@extends('layouts.user')
@section('page-title', 'Booked Route')
@section('page-title-body', 'Booked Route')
@section('active-link-4', 'active-link')

@section('main-theme')
    <div id="dashboard-container-view">
        <h2>
            <span>Booked Route</span>

        </h2>
        <div class="block-cont"></div>

        <div class="">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="table-first">
                    <thead class="thead-light">
                        <tr><th>Booked Date</th><th>Customer Name</th>
                            <th>Phone No.</th><th>Depature Date</th>
                            <th>Route</th><th>Vehicle No.</th><th>Fare</th>
                            <th>Seat No.</th><th>Ticket No.</th>
                            <th>Payment</th>
                            <th>Receipt</th>
                            <th>Status</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($booked as $data)
                            <tr>
                                <td>{{ date_format(date_create($data->created_at), 'd M, Y')}}</td>
                                <td>{{ $data->customer_name}}</td>
                                <td>{{ $data->customer_phone}}</td>
                                <td>{{ date_format(date_create($data->date_depature), 'd M, Y')}}  {{ date_format(date_create($data->depature_time), 'H:i A')}}</td>
                                <td>{{ $data->start_from}}({{ $data->end_to}}) -TO- {{$data->subroute}}</td>
                                <td>{{ $data->registration_number}}</td>
                                <td>{{ number_format($data->fare, 2)}}</td>
                                <td>{{ $data->sit_number}} {{ $data->vip}}</td>
                                <td>{{ $data->ticket_number}}</td>
                                <td>{{ $data->payment_mode}}</td>
                                <td>{{ $data->receipt}}</td>
                                <td>{{ $data->payment_status}}</td>
                                <td>
                                    @if($data->payment_mode == "Mobile")
                                      @if($data->payment_status != "Paid")
                                        <button type="button" class="btn-success-ac-v1" id="btnApproveReceivedPayment" data-id="{{$data->id}}" data-mode="{{$data->payment_mode}}" data-receipt="{{$data->receipt}}" title="Approve payment received">Confirm</button>
                                      @endif
                                    @elseif($data->payment_mode == "Booking")
                                        @if($data->payment_status != "Paid")
                                        <button type="button" class="btn-success-ac-v1" id="btnApproveReceivedPayment" data-id="{{$data->id}}" data-mode="{{$data->payment_mode}}" data-receipt="{{$data->receipt}}" title="Approve payment received">Confirm</button>
                                        @endif
                                    @endif
                                </td>
                                <td>
                                    <a href="{{route('dashboard.ticket-details',[$data->id])}}"><button type="button" class="btn-success-ac-v1" id=""><i class="fas fa-expand"></i></button></a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        
        <div class="block-cont"></div>
    </div>
    <div class="modal fade in" id="approve-payment-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Approve Payments</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick = "$('#approve-payment-modal').modal('hide')">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('approve-payments')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <section class="view-col-full">
                        <h5>Payment Receipt</h5>
                        <input type="text" name="receipt" id="bookreceipt" class="form-control" required>
                        <input type="hidden" name="id" id="bookid">
                        <input type="hidden" name="type" id="booktype">
                    </section>
                    <section class="view-col-full">
                        <br>
                        <button type="submit" class="btn btn-success text-white w-100 p-10">Approve Payment</button>
                    </section>
                </form>
            </div>
            </div>
        </div>
    </div>

@endsection

<!-- js script -->
@push('scripts')
<script>
    $(function(){

        //add-staff

        $(document).on('click', '#btnaddstaff', function(){
            $('#add-staff').css({"display":"block"});
            $('#staff-list').css({"display":"none"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Customer Tickets");
        });

        
        $(document).on('click', '#btnstafflist', function(){
            $('#add-staff').css({"display":"none"});
            $('#staff-list').css({"display":"block"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Customer Details");
        });

        $(document).on('change', '#region', function(){

            let region_id = $(this).val();
            $.ajax({
                url:"../get-districts/"+region_id,
                method:"get",
                dataType:"text",
                success:function(data){
                    //console.log(data);
                    var json = $.parseJSON(data);
                    $('#district').empty();
                    $('#district').append("<option value='invalid-1'>Select district</option>");
                    for (var i = 0; i < json.length; ++i) {
                        $('#district').append("<option value=" + json[i].id + ">" + json[i].name + "</option>");
                    }
                }
            });

        });




        var db = $('#table-first').dataTable({
            columnDefs: [ 
            { 
                type: 'date',
                'targets':[1]
            }],
        order: [[ 1, 'desc' ]]
        });


        $(document).on('click', '#btnApproveReceivedPayment', function(){

            $('#bookreceipt').val($(this).data('receipt'));
            $('#bookid').val($(this).data('id'));
            $('#booktype').val($(this).data('mode'));

            $('#approve-payment-modal').modal('show');

        });

        $('#approve-payment-modal').modal('hide');



    });

</script>
@endpush