@extends('layouts.user')
@section('page-title', 'Buses Booked Seat')
@section('page-title-body', 'Buses Booked Seat')
@section('active-link-2', 'active-link')

@section('main-theme')
    <div id="dashboard-container-view">
        <h2>
            <span>Departure Details</span>
            <button type="button" class="btn-h2" id="btnaddBoarding"><i class="fas fa-print" style="margin:0px 8px 0px 0px"></i>Print Seat Plan</button>
            <button type="button" class="btn-h2" id="btnShowBookedSeat"><i class="fas fa-chair" style="margin:0px 8px 0px 0px"></i>Booked Seat</button>
            <button type="button" class="btn-h2" id="btnEditDeparture"><i class="far fa-edit" style="margin:0px 8px 0px 0px"></i>Edit Departure Details</button>
            <button type="button" class="btn-h2 btn-h2-active" id="btnDepatureDetails"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Departure Details</button>

        </h2>
        <div class="block-cont"></div>
        
        <article class="display-none" id="booked-seat-list" style="width:100% !important;">
            <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>
        </article>

        <article class="display-block" id="show-departure-details">
                <section class="view-col-half-left">
                    <h5>Depature Date</h5>
                    <p>{{date_format(date_create($depature->depature_date),'d M Y')}}</p>
                </section>
                <section class="view-col-half-right">
                    <h5>Depature Time</h5>
                    <p>{{date_format(date_create($depature->depature_time),'H:i A')}}</p>
                </section>

                <section class="view-col-half-left">
                    <h5>Report Time</h5>
                    <p>{{date_format(date_create($depature->reporting_time),'H:i A')}}</p>
                </section>
                <section class="view-col-half-right">
                    <h5>Expected Arrival Date & Time</h5>
                    <p>{{date_format(date_create($depature->expected_arrival_time),'d M Y H:i A')}}</p>
                </section>
                <section class="view-col-half-left">
                    <h5>Route VIA</h5>
                    <p>{{$depature->via}}</p>
                </section>
                <section class="view-col-half-right">
                    <h5>Bus Type</h5>
                    <p>{{$depature->bus_type}}</p>
                </section>

                <section class="view-col-half-left">
                    <h5>Vehicle Number</h5>
                    <p>{{$depature->registration_number}}</p>
                </section>
                <section class="view-col-half-right">
                    <h5>Number Of Seat</h5>
                    <p>{{$depature->number_of_sit}}</p>
                </section>

                <section class="view-col-half-left">
                    <h5>Fare</h5>
                    <p>{{number_format($depature->fare, 2)}}</p>
                </section>
                <section class="view-col-half-right">
                    <h5>VIP Addition Fare</h5>
                    <p>{{number_format($depature->vip_addition_price, 2)}}</p>
                </section>

                <section class="view-col-full">
                    <h5>VIP Seat</h5>
                    <p>{{$depature->vip_seat}}</p>
                </section>
        </article>


        <article class="display-none" id="edit-depature-details">
            <form action="{{route('create-routes-depature')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <section class="view-col-half-left">
                    <h5>Depature Date</h5>
                    <input type="date" name="depdate" class="form-control" value="{{$depature->depature_date}}" required>
                    <input type="hidden" name="id" value="{{$depature->id}}">
                    <input type="hidden" name="type" value="edit">
                </section>
                <section class="view-col-half-right">
                    <h5>Depature Time</h5>
                    <input type="time" name="deptime" class="form-control" value="{{$depature->depature_time}}" required>
                </section>

                <section class="view-col-half-left">
                    <h5>Report Time</h5>
                    <input type="time" name="reporttime" class="form-control" value="{{$depature->reporting_time}}" required class="form-control">
                </section>
                <section class="view-col-half-right">
                    <h5>Expected Arrival Date & Time</h5>
                    <section class="view-col-half-left"><input type="date" name="arrivaldate" value="{{date_format(date_create($depature->expected_arrival_time),'Y-m-d')}}" class="form-control" required></section>
                    <section class="view-col-half-right"><input type="time" name="arrivaltime" value="{{date_format(date_create($depature->expected_arrival_time),'H:i:s')}}" class="form-control" required></section>
                </section>
                <section class="view-col-half-left">
                    <h5>Route VIA</h5>
                    <input type="text" name="via" class="form-control" value="{{$depature->via}}" required placeholder="Eg: Chalinze">
                </section>
                <section class="view-col-half-right">
                    <h5>Bus Type</h5>
                    <select name="bustype" class="form-control">
                        <option {{$depature->bus_type == "Luxury" ? "selected" : ""}}>Luxury</option>
                        <option {{$depature->bus_type == "Luxury VIP" ? "selected" : ""}}>Luxury VIP</option>
                    </select>
                </section>

                <section class="view-col-half-left">
                    <h5>Vehicle Number</h5>
                    <input type="text" name="regnumber"  value="{{$depature->registration_number}}" class="form-control" required placeholder="Eg: T345DHH">
                </section>
                <section class="view-col-half-right">
                    <h5>Number Of Seat</h5>
                    <select name="seatno" class="form-control">
                        <option {{$depature->number_of_sit == 53 ? "selected" : ""}}>53</option>
                        <option {{$depature->number_of_sit == 57 ? "selected" : ""}}>57</option>
                        <option {{$depature->number_of_sit == 47 ? "selected" : ""}}>47</option>
                    </select>
                </section>

                <section class="view-col-half-left">
                    <h5>Fare</h5>
                    <input type="number" step="any" name="fare"  value="{{$depature->fare}}" class="form-control" required class="form-control">
                </section>
                <section class="view-col-half-right">
                    <h5>VIP Addition Fare</h5>
                    <input type="number" step="any" name="vipfare"  value="{{$depature->vip_addition_price}}" class="form-control">
                </section>

                <section class="view-col-full">
                    <h5>VIP Seat(Eg: 2,7,9,10)</h5>
                    <input type="text" name="vipseat"  value="{{$depature->vip_seat}}" class="form-control">
                </section>


                <section class="view-col-full">
                    <br>
                    <button type="submit" class="btn btn-success text-white w-25 p-10">Edit Depature Details</button>
                </section>
            </form>
        </article>


        
        <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(){
        $(document).on('click', '#btnShowBookedSeat', function(){
            $('#booked-seat-list').css({"display":"block"});
            $('#show-departure-details, #edit-depature-details').css({"display":"none"});

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

            $('h2 span').empty();
            $('h2 span').text("Booked Seat");
        });

        $(document).on('click', '#btnEditDeparture', function(){
            $('#show-departure-details, #booked-seat-list').css({"display":"none"});
            $('#edit-depature-details').css({"display":"block"});

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

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

        $(document).on('click', '#btnDepatureDetails', function(){
            $('#edit-depature-details, #booked-seat-list').css({"display":"none"});
            $('#show-departure-details').css({"display":"block"});

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

            $('h2 span').empty();
            $('h2 span').text("Depature 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':[0]
                }],
            order: [[ 0, 'desc' ]]
            });


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



    let status_bn = 0;
    let id_bp = 0;

    $(document).on('click', '.btnBan', function(){
        status_bn = $(this).data('status');
        id_bp = $(this).data('id');
        let msg = "";
        if(status_bn == 1){
            msg = "Do you real want to ban this boading point from customer to be hiden that mean customer can not select?";
        }else{
           msg = "Do you real want to unban this boarding point to be available that mean customer can select?"; 
        }

        $("#ban-all-modal #bodymod").text(msg);
        $('#ban-all-modal').modal('show');

    });

    $(document).on('click', '#ban-all-modal #btnComplete', function(){
        $.ajax({
                url:"../../ban-boarding/"+id_bp+"/"+status_bn,
                method:"get",
                dataType:"text",
                success:function(data){
                    location.reload();
                }
            });
    });


    $(document).on('click', '.btnDelete', function(){

        id_bp = $(this).data('id');
        let msg =  "Do you real want to remove this boading point from customer to be hiden that mean customer can not select?";
        $("#delete-all-modal #bodymod").text(msg);
        $('#delete-all-modal').modal('show');

    });

    $(document).on('click', '#delete-all-modal #btnComplete', function(){
        $.ajax({
                url:"../../remove-boarding/"+id_bp,
                method:"get",
                dataType:"text",
                success:function(data){
                    location.reload();
                }
            });
    });




    $(document).on('click', '.btnBanSchedule', function(){
        status_bn = $(this).data('status');
        id_bp = $(this).data('id');
        let msg = "";
        if(status_bn == 1){
            msg = "Do you real want to ban this bus schedules?";
        }else{
           msg = "Do you real want to unban this bus schedule to be available that mean customer can select?"; 
        }

        $("#ban-all-modal #bodymod").text(msg);
        $('#ban-all-modal').modal('show');

    });

    $(document).on('click', '#ban-all-modal #btnComplete', function(){
        $.ajax({
                url:"../../ban-schedules/"+id_bp+"/"+status_bn,
                method:"get",
                dataType:"text",
                success:function(data){
                    location.reload();
                }
            });
    });


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

        id_bp = $(this).data('id');
        console.log(id_bp);
        let msg =  "Do you real want to remove this bus schedules from the system?";
        $("#delete-all-modal #bodymod").text(msg);
        $('#delete-all-modal').modal('show');

    });

    $(document).on('click', '#delete-all-modal #btnComplete', function(){
        $.ajax({
            url:"../../remove-schedules/"+id_bp,
            method:"get",
            dataType:"text",
            success:function(data){
                location.reload();
            }
        });
    });

    $(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