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

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

            <button type="button" class="btn-h2" id="btnaddBoarding"><i class="far fa-plus-square" style="margin:0px 8px 0px 0px"></i>Add Boarding</button>
            <button type="button" class="btn-h2" id="btnBoarding"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Boarding</button>
            <button type="button" class="btn-h2" id="btnaddVituo"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Vituo</button>
            <button type="button" class="btn-h2" id="btnaddstaff"><i class="far fa-plus-square" style="margin:0px 8px 0px 0px"></i>Add Schedules</button>
            <button type="button" class="btn-h2" id="btnbuses"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Schedules</button>
            <button type="button" class="btn-h2 btn-h2-active" id="btnstafflist"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Route Details</button>

        </h2>
        <div class="block-cont"></div>
        
        <article class="display-block" id="staff-list" style="width:100% !important;">
            <table class="table-view-details">
                @foreach($route as $data)
                <tr>
                    <td><h2>Start From</h2>{{$data->start_from}}</td>
                    <td><h2>End To</h2>{{$data->end_to}}</td>
                    <td><h2>Status</h2>{{$data->status == 0 ? "Active" : "Inactive"}}</td>
                    
                </tr>
                <tr>
                    <td><h2>Created By</h2>{{$data->user_name}}</td>
                    <td><h2>Staff Code</h2>SAEC/{{$data->user_id}}</td>
                    <td><h2>Created At</h2>{{ date_format(date_create($data->created_at), 'd M, Y H:i:s') }}</td>
                </tr>
                @endforeach
            </table>
        </article>

        <article class="display-none" 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>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>{{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>
                                    @if($data->status == 0)
                                        <a class="btnBanSchedule" data-id="{{$data->id}}" data-status="1"><button type="button" class="btn-ban-ac-v1" title="Ban this shedules"><i class="fas fa-ban"></i></button></a>
                                    @else
                                        <a class="btnBanSchedule" data-id="{{$data->id}}" data-status="0"><button type="button" class="btn-unban-ac-v1" title="Unban this shedules"><i class="fas fa-ban"></i></button></a>
                                    @endif
                                    
                                    <a id="btnDeleteSchedule" data-id="{{$data->id}}"><button type="button" class="btn-ban-ac-v1" title="Remove this shedules">
                                        <i class="fa fa-trash"></i>
                                    </button></a>

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


        
        <article class="display-none" id="vituo-list">
            
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="table-first">
                    <thead class="thead-light">
                        <tr>
                            <th>Name</th><th>Fare</th><th>Status</th><th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sub_route as $data)
                           <tr>
                               <td>{{$data->name}}</td>
                               <td>{{$data->fare}}</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>
                                   <button type="button" data-id="{{$data->id}}" data-name="{{$data->name}}" data-fare="{{$data->fare}}" class="btn-success-ac-v1" id="btneditVituo" title="Edit"><i class="fas fa-edit"></i> Edit Vituo</button>
                               </td>
                           </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">
                                <button type="button" class="btn bg-success text-white" id="btnaddVituoRoute"><i class="fas fa-plus"></i> Add Vituo</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </article>

        
        <article class="display-none" id="boarding-list">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="table-second">
                    <thead class="thead-light">
                        <tr>
                            <th>Created At</th><th>Boarding Point</th><th>Status</th><th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($boarding_points as $data)
                           <tr>
                               <td>{{ date_format(date_create($data->created_at), 'd M, Y H:i:s A') }}</td>
                               <td>{{$data->name}}</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>
                                    @if($data->status == 0)
                                        <a class="btnBan" data-id="{{$data->id}}" data-status="1"><button type="button" class="btn-ban-ac-v1" title="Ban this boarding point"><i class="fas fa-ban"></i></button></a>
                                    @else
                                        <a class="btnBan" data-id="{{$data->id}}" data-status="0"><button type="button" class="btn-unban-ac-v1" title="Unban this boarding point"><i class="fas fa-ban"></i></button></a>
                                    @endif
                                    
                                    <a class="btnDelete" data-id="{{$data->id}}"><button type="button" class="btn-ban-ac-v1" title="Remove this shedules">
                                        <i class="fa fa-trash"></i>
                                    </button></a>
                               </td>
                           </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </article>

        <article class="display-none" id="boarding-add">
            <form action="{{route('add-boarding-point')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <section class="view-col-half-left">
                    <h5>Staff Name</h5>
                    <input type="text" name="name" class="form-control" value="{{Auth::user()->name}}" required placeholder="Staff full name" readonly>
                    <input type="hidden" name="id" value="{{$id}}">
                </section>
                <section class="view-col-half-right">
                    <h5>Status</h5>
                    <input type="text" name="address" class="form-control" value="Active" required placeholder="Staff address" readonly>
                </section>

                <section class="view-col-full">
                    <h5>Boarding Point</h5>
                    <input type="text" name="boardingname" class="form-control" required placeholder="" class="form-control">
                </section>

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

        <article class="display-none" id="add-staff">
            <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" min="@php echo date('Y-m-d'); @endphp" required>
                    <input type="hidden" name="id" value="{{$id}}">
                    <input type="hidden" name="type" value="add">
                </section>
                <section class="view-col-half-right">
                    <h5>Depature Time</h5>
                    <input type="time" name="deptime" class="form-control" required>
                </section>

                <section class="view-col-half-left">
                    <h5>Report Time</h5>
                    <input type="time" name="reporttime" class="form-control" 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" class="form-control" required></section>
                    <section class="view-col-half-right"><input type="time" name="arrivaltime" class="form-control" required></section>
                </section>
                <section class="view-col-half-left">
                    <h5>Route VIA</h5>
                    <input type="text" name="via" class="form-control" required placeholder="Eg: Chalinze">
                </section>
                <section class="view-col-half-right">
                    <h5>Bus Type</h5>
                    <select name="bustype" class="form-control">
                        <option>Luxury</option>
                        <option>Luxury VIP</option>
                    </select>
                </section>

                <section class="view-col-half-left">
                    <h5>Vehicle Number</h5>
                    <input type="text" name="regnumber" 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>53</option>
                        <option>57</option>
                        <option>47</option>
                    </select>
                </section>

                <section class="view-col-half-left">
                    <h5>Fare</h5>
                    <input type="number" step="any" name="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" class="form-control">
                </section>

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


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

        {{-- 
         SELECT `id`, `route_id`, `depature_date`, `depature_time`, `expected_arrival_time`, `reporting_time`, `via`, `bus_type`, `fare`, `registration_number`, `number_of_sit`, `vip_addition_price`, `vip_seat`, `user_id`, `status`, `is_deleted`, `created_at`, `updated_at` FROM `depatures` WHERE 1    
        --}}

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

    <div class="modal fade in" id="add-vituo-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">Aifola Express Portal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick = "$('#alert-modal').modal('hide')">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('add-sub-route')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <section class="view-col-full">
                        <h5>Kituo Name</h5>
                        <input type="text" name="name" class="form-control" required>
                        <input type="hidden" name="id" value="{{$id}}">
                    </section>
                    <section class="view-col-full">
                        <h5>Fare</h5>
                        <input type="number" step="any" name="fare" class="form-control" required class="form-control">
                    </section>
                    <section class="view-col-full">
                        <br>
                        <button type="submit" class="btn btn-success text-white w-25 p-10">Add Vituo</button>
                    </section>
                </form>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade in" id="edit-vituo-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">Aifola Express Portal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick = "$('#alert-modal').modal('hide')">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('edit-sub-route')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <section class="view-col-full">
                        <h5>Kituo Name</h5>
                        <input type="text" name="name" id="suname" class="form-control" required>
                        <input type="hidden" name="id" id="suid">
                    </section>
                    <section class="view-col-full">
                        <h5>Fare</h5>
                        <input type="number" step="any" name="fare" id="sufare" class="form-control" required class="form-control">
                    </section>
                    <section class="view-col-full">
                        <br>
                        <button type="submit" class="btn btn-success text-white w-25 p-10">Add Vituo</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, #buses-list, #boarding-list, #boarding-add, #vituo-list').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, #vituo-list').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, #vituo-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, #vituo-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, #vituo-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('click', '#btnaddVituo', function(){
            $('#add-staff, #boarding-list, #boarding-add, #staff-list, #buses-list').css({"display":"none"});
            $('#vituo-list').css({"display":"block"});

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

            $('h2 span').empty();
            $('h2 span').text("Vituo Vya Njiani");
        });
        
        



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

    $(document).on('click', '#btnaddVituoRoute', function(){
        $("#add-vituo-modal").modal('show');
    });


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

        $('#suname').val($(this).data('name'));
        $('#suid').val($(this).data('id'));
        $('#sufare').val($(this).data('fare'));

        $("#edit-vituo-modal").modal('show');
    });


    $("#add-vituo-modal, #edit-vituo-modal").modal('hide');

});
</script>
@endpush