@extends('layouts.app')

@section('title', 'Permohonan '.strtoupper(App\IPR::where('name', $ipr->name)->pluck('name')[0]))
@section('permohonan', 'm-menu__item--active')
@section(App\Cluster::where('id', $ipr->cluster_id)->pluck('name')[0], 'm-menu__item--active')
@section(App\IPR::where('name', $ipr->name)->pluck('name')[0], 'm-menu__item--active')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
    #map {
        height: 500px;
    }
    #map_edit {
        height: 500px;
    }
    #results .address:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    .dataTables_wrapper .dataTables_filter {
        float: right;
        text-align: right;
        visibility: hidden;
    }
</style>
@endsection

@section('content')
@role(['super_admin','admin'])
@if(Auth::user()->hasRole('super_admin') || (Auth::user()->hasRole('admin') && Auth::user()->ipr_id == App\IPR::where('name', 'bas')->pluck('id')[0]))
<div class="row">
    <div class="col-lg-12">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">Senarai Lokasi {{ App\IPR::where('name', 'bas')->pluck('display_name')[0] }}
                    </div>
                </div>
                <div class="col-md-12">
                    <form class="pull-right" id="search_form" style="margin-top: 15px;">
                        <div class="input-group">
                            <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;">
                                <option value="0">Id</option>
                                <option value="1">Nama</option>
                                <option value="2">PBT</option>
                                <option value="" selected="selected">Semua</option>
                            </select>
                            <input type="text" class="form-control" id="q" placeholder="Carian..." style="height:unset;padding:5px 5px;">
                            <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped" id="list_bas" style="overflow-x: auto !important;width: 100% !important;">
                        <thead class="thead-white">
                            <tr>
                                <th scope="col">ID Laluan Bas</th>
                                <th scope="col">Nama Laluan Bas</th>
                                <th scope="col">PBT</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($model_route as $data)
                            <tr>
                                <td>{{$data->bas_id}}</td>
                                <td>{{$data->name}}</td>
                                <td>{{$data->pbt}} </td>
                                <td>       
                                <a class="btn btn-brand m-btn btn-sm m-btn m-btn--icon m-btn--pill" 
                                    data-id="{{ $data->id }}" 
                                    href="{{url('admin/permohonan/bas/edit_route?id='.$data->id)}}">
                                    <span><i class="fa fa-edit"></i><span>Kemaskini</a>  

                                    <a href="#DeleteStesenBasForm" class="open-ModalDelete btn btn-danger m-btn btn-sm m-btn m-btn--icon m-btn--pill" data-toggle="modal" 
                                    data-id="{{ $data->bas_id }}">
                                        <span><i class="fa fa-trash"></i><span>Padam</span></span></a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Padam Stesen Bas  -->
<div class="modal fade" id="DeleteStesenBasForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
        <div class="modal-content">
            <div class="modal-header text-left">
                <h4 style="color: #f4516c" class="modal-title w-100 font-weight-bold">Padam Lokasi Hentian Bas</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- Form -->
            <form id="delete_form" class="m-form m-form--label-align-right" action="{{ url ('admin/permohonan/bas/route_update_delete') }}" method="POST">
                @csrf
                <div class="modal-body mx-3">
                <label data-error="wrong" data-success="right" for="orangeForm-id">Adakah anda pasti ingin padam ID ini?</label>
                <input type='text' name="id_delete" id="id_delete" class="form-control" readonly>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
                    <button type="submit" class="btn btn-primary">Ya</button>
                </div>
            </form>
            <!-- End Form -->
        </div>
    </div>
</div>
<!-- End Modal Padam Stesen Bas -->


@endif
@endrole
@endsection

@push('script')
@section('js')
@role(['super_admin','admin'])
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>


<script>        
    $(document).ready(function() {
        $('#list_bas').DataTable();  

        $('#search_form').submit(function (event) {
            event.preventDefault();
            $("#filter").trigger("click");
        });

        $('#filter').click(function(){
            var filter_type = $("#filter_type").val();
            var q = $('#q').val();

            if (q == '') {
                $('#list_bas').DataTable().columns('').search('').draw();
            } else {
                $('#list_bas').DataTable().columns(filter_type).search(q).draw();
            }
        });  
        
        $(document).on("click", ".open-ModalDelete", function() {
            var id_delete = $(this).data('id');
            $("#DeleteStesenBasForm #id_delete").val(id_delete);
        });
    });
</script>
@endrole
@endsection
@endpush