@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>Aifola Express Routes</span>

            <button type="button" class="btn-h2" id="btnaddstaff"><i class="far fa-plus-square" style="margin:0px 8px 0px 0px"></i>Add Route</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>Routes List</button>

        </h2>
        <div class="block-cont"></div>
        <article class="display-block" id="staff-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>Start From</th><th>End To</th><th>Created By</th><th>Status</th><th>Action</th></tr>
                    </thead>
                    <tbody>
                        @foreach($routes as $data)
                          <tr>
                              <td>{{ date_format(date_create($data->created_at), 'd M Y')}}</td>
                              <td>{{$data->start_from}}</td>
                              <td>{{$data->end_to}}</td>
                              <td>{{$data->user_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>
                                <button type="button" class="btn-success-ac-v1" id="btnEditRoute" data-id="{{$data->id}}" data-startfrom="{{$data->start_from}}" data-endto="{{$data->end_to}}"><i class="fas fa-edit"></i></button>
                                <button type="button" id="btnRemoveRoutes" class="btn-ban-ac-v1" data-id="{{$data->id}}">
                                    <i class="fa fa-trash"></i>
                                </button>
                                   @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 route"><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 route"><i class="fas fa-ban"></i></button></a>
                                  @endif
                                  <a href="{{route('dashboard.route-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-none" id="add-staff">
            <form action="{{route('create-routes')}}" 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>
                </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>
                <input type="hidden" name="type" value="new">
                <section class="view-col-half-left">
                    <h5>Start From</h5>
                    <input type="text" name="startfrom" class="form-control" required placeholder="" class="form-control">
                </section>
                <section class="view-col-half-right">
                    <h5>End To</h5>
                    <input type="text" name="endto" class="form-control" required>
                </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>

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


    <div class="modal fade in" id="edit-route-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">Edit Route</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick = "$('#edit-route-modal').modal('hide')">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('create-routes')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <section class="view-col-full">
                        <h5>Staff Name</h5>
                        <input type="text" name="name" class="form-control" value="{{Auth::user()->name}}" required placeholder="Staff full name" readonly>
                    </section>
                    <section class="view-col-full">
                        <h5>Start From</h5>
                        <input type="text" name="startfrom" id="editstartfrom" class="form-control" required placeholder="" class="form-control">
                    </section>
                    <section class="view-col-full">
                        <h5>End To</h5>
                        <input type="text" name="endto" id="editendto" class="form-control" required>
                        <input type="hidden" name="id" id="routesid">
                        <input type="hidden" name="type" value="edit">
                    </section>
                    <section class="view-col-full">
                        <br>
                        <button type="submit" class="btn btn-success text-white w-25 p-10">Edit Route</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("New Aifola Express Route");
        });

        
        $(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("Aifola Express Routes");
        });

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

    let status_bn = 0;
    let id_route = 0;

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

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

    });

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


    $(document).on('click', '#btnRemoveRoutes', function(){
        id_route = $(this).data('id');
        msg = "Do you real want to remove this route from customer to be hiden that mean customer can not select this route?";
        $("#ban-all-modal #bodymod").text(msg);
        $('#ban-all-modal').modal('show');

    });

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


    $(document).on('click', '#btnEditRoute', function(){
        $('#editstartfrom').val($(this).data('startfrom'));
        $('#editendto').val($(this).data('endto'));
        $('#routesid').val($(this).data('id'));
        $('#edit-route-modal').modal('show');
    });

    $('#edit-route-modal').modal('hide');
    

</script>
@endpush