@extends('layouts.user')
@section('page-title', 'Buses Schedules')
@section('page-title-body', 'Buses Schedules')
@section('active-link-3', 'active-link')

@section('main-theme')
    <div id="dashboard-container-view">
        <h2>
            <span>Buses Schedules</span>
        </h2>
        <div class="block-cont"></div>
        
        <article id="buses-list">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="table-first">
                    <thead class="thead-light">
                        <tr>
                            <th>Created At</th><th>Route Name</th><th>Depature Date</th>
                            <th>Depature Time</th><th>Expected Arrival Time</th>
                            <th>Reporting Time</th><th>Via</th>
                            <th>Bus Type</th><th>Fare</th>
                            <th>Vehicle Number</th><th>Total Seat</th>
                            <th>VIP Addition Price</th><th>VIP Seat</th><th>Status</th><th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($depatures as $data)
                           <tr>
                               <td>{{ date_format(date_create($data->created_at), 'd M, Y H:i') }}</td>
                               <td>{{$data->start_from}}-{{$data->end_to}}</td>
                               <td>{{date_format(date_create($data->depature_date), 'd M, Y') }}</td>
                               <td>{{date_format(date_create($data->depature_time), 'H:i A') }}</td>
                               <td>{{date_format(date_create($data->expected_arrival_time), 'H:i A') }}</td>
                               <td>{{date_format(date_create($data->reporting_time), 'H:i A') }}</td>
                               <td>{{$data->via}}</td>
                               <td>{{$data->bus_type}}</td>
                               <td>{{$data->fare}}</td>
                               <td>{{$data->registration_number}}</td>
                               <td>{{$data->number_of_sit}}</td>
                               <td>
                                    @if( $data->vip_addition_price == null || $data->vip_addition_price < 10)
                                        NA
                                    @else
                                        {{$data->vip_addition_price}}
                                    @endif
                               </td>
                               <td>
                                   @if( $data->vip_seat== null)
                                    NA
                                   @else
                                     {{$data->vip_seat}}
                                   @endif
                               </td>
                               <td>
                                    @if($data->status == 0)
                                        <span class="status-active"><i class="fas fa-exclamation-circle" style="margin: 0px 3px 0px 0px"></i> Active</span>
                                    @else
                                        <span class="status-unactive"><i class="fas fa-exclamation-circle" style="margin: 0px 3px 0px 0px"></i> Inactive</span>
                                    @endif
                               </td>
                               <td>
                                    <a href="{{route('dashboard.depature-details', [$data->id])}}"><button type="button" class="btn-success-ac-v1" id="" title="View this shedules"><i class="fas fa-expand"></i></button></a>
                               </td>
                           </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </article>
@endsection

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

    $(function(){

        //add-staff

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

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

            $('h2 span').empty();
            $('h2 span').text("New Aifola Express Route");
        });

        
        $(document).on('click', '#btnstafflist', function(){
            $('#add-staff, #buses-list, #boarding-list, #boarding-add').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("Aifola Express Routes");
        });


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

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

            $('h2 span').empty();
            $('h2 span').text("Add Boarding Point");
        });

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

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

            $('h2 span').empty();
            $('h2 span').text("Boarding Points");
        });

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

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

            $('h2 span').empty();
            $('h2 span').text("Buses Schedules");
        });
        
        



        $(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();
            }
        });
    });

    //remove-boarding

});
</script>
@endpush