@extends('layouts.app')

@section('title', 'Senarai '.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','principal_admin','admin'])
    @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_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">
                                    @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('admin') || $is_permission_own || $is_permission_all)
                                    <div class="" style="margin-right:5px">
                                        <a href="{{url('admin/permohonan/bas/add')}}" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                            <span>
                                                <i class="la la-plus"></i>
                                                <span>
                                                    Tambah Lokasi
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                    @endif
                                    @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('admin') || $is_permission_own || $is_permission_all)
                                    <div class="" style="margin-right:5px">
                                        <a href="{{url('admin/permohonan/bas/addroute')}}" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                            <span>
                                                <i class="la la-plus"></i>
                                                <span>
                                                    Tambah Laluan
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                    @endif
                                    @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('admin') || $is_permission_own || $is_permission_all)
                                        <div class="" style="margin-right:5px">
                                            <a href="{{url('admin/permohonan/bas/route_update_delete')}}" class="btn btn-brand m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                                <span>
                                                    <i class="fa fa-edit"></i>
                                                    <span>
                                                        Padam dan Kemaskini Laluan
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                    @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || $is_permission_export)
                                        <div class="" style="margin-right:5px">
                                            <a href="#" id="export_file" onclick="exportFile();return false;" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                                <span>
                                                    <i class="la la-file-excel-o"></i>
                                                    <span>
                                                        Export
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                    <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;">
                                        <option value="bas_id">Id</option>
                                        <option value="name">Nama</option>
                                        <option value="pbt">PBT</option>
                                        <option value="dun">DUN</option>
                                        <option value="semua" 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 Lokasi</th>
                                        <th scope="col">Nama Lokasi Hentian Bas</th>
                                        <th scope="col">PBT</th>
                                        <th scope="col">DUN</th>
                                        <th scope="col"></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- MODAL DELETE BAS STOP  -->
        <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 id="delete_form" class="m-form m-form--label-align-right" action="{{ url ('admin/permohonan/bas') }}" 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>
                </div>
            </div>
        </div>
        <!-- END MODAL DELETE BAS STOP -->

        <!-- MODAL SUMMARY BAS STOP -->
        <div class="modal fade" id="displayModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Rumusan Lokasi <br>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="m-form__section m-form__section--first">
                            <!-- ADD MAP -->
                            <div class="form-group row"></div>
                            <div id="mapdisplay">
                                <div id="map"></div>
                            </div>
                            <br>
                            <!-- END ADD MAP -->
                            <h5 style="color: #f4516c">
                                Maklumat Lokasi:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md">
                                    <label for="m_id" class="form-control-label">
                                        ID Lokasi:
                                    </label>
                                    <input type="text" class="form-control" name="m_id" id="m_id" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="m_nama" class="form-control-label">
                                        Nama Lokasi Hentian Bas:
                                    </label>
                                    <input type="text" class="form-control" name="m_nama" id="m_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="m_pbt" class="form-control-label">
                                        pbt:
                                    </label>
                                    <input type="text" class="form-control" name="m_pbt" id="m_pbt" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="m_laluan_bas" class="form-control-label">
                                        Nama Laluan Bas:
                                    </label>
                                    <input type="text" class="form-control" name="m_laluan_bas" id="m_laluan_bas" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="m_lon" class="form-control-label">
                                        Longitud:
                                    </label>
                                    <input type="text" class="form-control" name="m_lon" id="m_lon" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="m_late" class="form-control-label">
                                        Latitud:
                                    </label>
                                    <input type="text" class="form-control" name="m_lat" id="m_lat" readonly>
                                </div>
                            </div>
                        </div>
                        <hr class="modal-hr">
                        <div class="m-form__section m-form__section--middle">
                            <h5 style="color: #f4516c">
                                Maklumat Parlimen:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="m_par_code" class="form-control-label">
                                        Kod Parlimen:
                                    </label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">
                                            P
                                        </span>
                                        <input type="text" class="form-control" name="m_par_code" id="m_par_code" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6 no_akaun_air">
                                    <label for="m_par" class="form-control-label">
                                        Nama Parlimen:
                                    </label>
                                    <input type="text" class="form-control" name="m_par" id="m_par" readonly>
                                </div>
                            </div>
                        </div>
                        <hr class="modal-hr">
                        <div class="m-form__section m-form__section--middle">
                            <h5 style="color: #f4516c">
                                Maklumat DUN:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="m_dun_code" class="form-control-label">
                                        Kod DUN:
                                    </label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">
                                            N
                                        </span>
                                        <input type="text" class="form-control" name="m_dun_code" id="m_dun_code" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="m_dun" class="form-control-label">
                                        Nama DUN:
                                    </label>
                                    <input type="text" class="form-control" name="m_dun" id="m_dun" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div id="kemaskini_area" style="margin-left: 2rem;left: 0;position: absolute;"></div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{-- END MODAL SUMMARY BAS STOP --}}
    @endif
@endrole
@endsection

@push('script')
@section('js')
@role(['super_admin', 'principal_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>

<!-- Data Table -->
<script>
    $(document).ready(function() {
        $('#list_bas').dataTable({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('admin/permohonan/bas/list/stop?status=') }}{{ $status }}'
            },
            searching: false,
            language: {
                emptyTable: "Tiada Data"
            },
            columns: [
                { data: 'bas_id', name: 'bas_id' },
                { data: 'nama', name: 'nama' },
                { data: 'pbt', name: 'pbt' },
                { data: 'dun', name: 'dun' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
        });

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

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

            $('#list_bas').dataTable().fnDestroy();
            $('#list_bas').dataTable({});
            $('#list_bas').dataTable().fnDestroy();
            $('#list_bas').dataTable({
                scrollX: true,
                processing: true,
                paging: true,
                pageLength: 15,
                lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
                serverSide: true,
                ajax: {
                    url:'{{ url('admin/permohonan/bas/list/stop?status=') }}{{ $status }}',
                    data:{q:q, filter_type:filter_type}
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'bas_id', name: 'bas_id' },
                    { data: 'nama', name: 'nama' },
                    { data: 'pbt', name: 'pbt' },
                    { data: 'dun', name: 'dun' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
            });
        });

        // FUNCTION DELETE
        $(document).on("click", ".open-ModalDelete", function() {
            var id_delete = $(this).data('id');
            $("#DeleteStesenBasForm #id_delete").val(id_delete);
        });
    });

    // FUNCTION EXPORT
    function exportFile() {
        window.open("{{ url('admin/permohonan/bas/export') }}");
    }

    // FUNCTION SHOW DETAIL
    function showDetail(x){
        var data = {
            _token: '{{ csrf_token() }}',
            id: x
        };

        $.ajax({
            url: '{{ url('admin/permohonan/bas/stop/show') }}',
            data: data,
            success: function(response){
                var bas_id = response.bas_id
                var name = response.name
                var popupinfo = response.popupinfo
                var par = response.par
                var par_code = response.par_code
                var dun = response.dun
                var dun_code = response.dun_code
                var lat = response.lat
                var lon = response.lon
                var pbt = response.pbt
                var bas_route = response.model_bas_route.features;

                var startlat = 2.900485;
                var startlon = 101.517875;

                $("#displayModal #m_id").val(bas_id);
                $("#displayModal #m_nama").val(name);
                $("#displayModal #m_par").val(par);
                $("#displayModal #m_par_code").val(par_code);
                $("#displayModal #m_dun").val(dun);
                $("#displayModal #m_dun_code").val(dun_code);
                $("#displayModal #m_lat").val(lat);
                $("#displayModal #m_lon").val(lon);
                $("#displayModal #m_pbt").val(pbt);
                $('#displayModal #m_laluan_bas').val(bas_route.length > 0 ? bas_route.properties.bas_id : '')

                $('#mapdisplay').html('');
                $('#mapdisplay').html('<div id="map"></div>'); 

                var options = {
                    center: [startlat, startlon],
                    zoom: 9
                }
                var map = new L.map('map', options);
                var nzoom = 12;

                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>'
                }).addTo(map);

                L.geoJSON(bas_route, {style: styleLines}).addTo(map); 

                var myMarker = L.marker([lat, lon]).addTo(map).bindPopup("Nama: " + name + "<br />Lat: " + lat + "<br />Lon: " + lon, { minWidth : 200 }).openPopup();
                setTimeout(function () { map.invalidateSize() }, 600);

                $('#displayModal').modal('show');
            },
            error: function(err){
                $.alert({
                    type: 'red',
                    title: 'Whoops, looks like something went wrong!',
                    content: 'Please check with system admin.',
                    typeAnimated: true,
                    icon: 'fa fa-warning',
                    columnClass: 'col-md-6 col-md-offset-3',
                });
            }
        })
    }

    function styleLines(feature) {
        return {
            color: getColor(feature.properties.pbt),
            weight: 3,
            opacity: .7,
            dashArray: null,
            lineJoin: 'round'
        };
    }

    function getColor(d) {
        return d === 'MBSA' ? 'red' :
            d == 'MDHS' ? 'red' :
            d == 'MPAJ' ? 'red' :
            d == 'MDKL' ? 'red' :
            d == 'MDKS' ? 'red' :
            d == 'MDSB' ? 'red' :
            d == 'MPK' ? 'red' :
            d == 'MPS' ? 'red' :
            d == 'MPKJ' ? 'red' :
            d == 'MPSJ' ? 'red' :
            d == 'MPSP' ? 'red' :
            'red';
    }
</script>
@endrole
@endsection
@endpush