@extends('layout.master')

@section('title', 'Map Service')

@section('content')

<div class="page-header">
    <h5 class="page-title">Senarai Map Services</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Data</li>
            <li class="breadcrumb-item active">Map Services</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="terhad">TERHAD</div>
                    
                    <div class="d-flex justify-content-end">
                        <a class="btn btn-primary me-2" onClick="add()" href="javascript:void(0)"><i class="fa-solid fa-plus me-2"></i> Tambah Negeri</a>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table"></table>
                    </div>
                    
                    <div class="terhad text-end">TERHAD</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal Tambah Map Services -->
<div class="modal fade" id="the-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="modal-title">Tambah Map Services</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="javascript:void(0)" id="modal-form" name="modal-form" class="form-horizontal" method="POST" enctype="multipart/form-data" novalidate>
                <div class="modal-body">
                    <input type="hidden" name="id" id="id" required>

                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label">Negeri <span class="required-field" style="color: red; font-size: 0.8em;">*</span></label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="negeri-dropdown" aria-label="Default select example" name="negeri_id" required>
                                @foreach (\App\Models\Negeri::all() as $value)
                                <option value="{{ $value->id }}">
                                    {{ $value->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="web_service_url" class="col-sm-3 col-form-label">Web Service URL</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="web_service_url" name="web_service_url" value="">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="map_server_url" class="col-sm-3 col-form-label">Map Server URL</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="map_server_url" name="map_server_url" value="">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="map_server_json" class="col-sm-3 col-form-label">Map Server JSON</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="map_server_json" name="map_server_json" value="">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="map_imej_server_url" class="col-sm-3 col-form-label">Map Imej Server URL</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="map_imej_server_url" name="map_imej_server_url" value="">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary mx-1" type="submit" id="btn-save">Simpan</button>
                    <a class="btn btn-outline-danger mx-1" data-bs-dismiss="modal">Batal</a>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('js')
<script type="text/javascript">

    var swalText = '';

    $(document).ready( function () {     
        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            // serverSide: true,
            ajax: {
                url : "{{ route('data_spatial.map_service') }}",
                data: {
                    type : "{{ request()->type }}"
                }, 
            },
            buttons: [
               {
                   extend: 'pdf',
                   className: 'btn btn-danger',
                   text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                   title: '',
                   filename: 'Senarai Map Services',
                   exportOptions: {
                        columns: '.export-pdf',
                   }
               },
               {
                   extend: 'csv',
                   className: 'btn btn-success',
                   text: '<i class="fa fa-file-csv me-2"></i> CSV',
                   filename: 'Senarai Map Services',
                   exportOptions: {
                        columns: '.export-csv',
                    }
               },
               {
                   extend: 'excel',
               }
            ],
            columns: [
                { data: null, title: '', width: '1%' },
                { data: 'DT_RowIndex', title: 'Bil', width: '1%', orderable: false, searchable: false, className: 'text-center export-pdf export-csv' },
                { 
                    data: 'negeris.name', 
                    title: 'Negeri',
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.negeris?.name ?? '-'}`;
                    }
                },
                { data: 'web_service_url', title: 'Web Service URL', className: 'export-pdf export-csv', render:DataTable.render.ellipsis() },
                { data: 'map_server_url', title: 'Map Server URL', className: 'export-pdf export-csv', render:DataTable.render.ellipsis() },
                { data: 'map_server_json', title: 'Map Server JSON', className: 'export-csv' },
                { data: 'map_imej_server_url', title: 'Map Imej Server URL', className: 'export-csv', render:DataTable.render.ellipsis() },
                { data: 'action', title: 'Tindakan', className: 'text-center', orderable: false },
            ],
            order: [[1, 'asc']],
        });
    });
     
    function add(){
        $('#modal-form').trigger("reset");
        $('#modal-title').html("Tambah Map Services");
        $('#the-modal').modal('show');
        $('#id').val('');
        swalText = 'Map Services Baharu Berjaya Ditambah';
    }
         
    function edit_func(id){
        $.ajax({
            type:"POST",
            url: "{{ route('data_spatial.map_service_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                $('#modal-form').trigger("reset");
                $('#modal-title').html("Kemaskini Map Services");
                $('#the-modal').modal('show');
                $('#id').val(result.id);
                $('#web_service_url').val(result.web_service_url);
                $('#map_server_url').val(result.map_server_url);
                $('#map_server_json').val(result.map_server_json);
                $('#map_imej_server_url').val(result.map_imej_server_url);
                $("#negeri-dropdown").val(result.negeri_id).trigger('change');
                swalText = 'Map Services Telah Berjaya Dikemaskini';
            }
        });
    }

    function padamMapService(id, name){

        const nama = 'Map Services '+ name;

        sPadam(null, nama, function() {
            $.ajax({
                type: "POST",
                url: "{{ route('data_spatial.map_service_delete') }}",
                data: { id : id },
                dataType: 'json',
                success: function(result) {
                    $('#the-table').DataTable().draw(false);
                    sSuccess('Map Services Telah Berjaya Dipadam');
                },
                error: function(data) {
                    sFail('Gagal memadam Map Services. Sila cuba lagi.');
                }
            });
        });
    }
     
    $('#modal-form').submit(function(e) {
        e.preventDefault();
        $("#btn-save").html('Menyimpan...').attr("disabled", true);

        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('data_spatial.map_service_store') }}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                $("#the-modal").modal('hide');
                $('#the-table').DataTable().ajax.reload(null, false);
                $("#btn-save").html('Simpan').attr("disabled", false);
                
                sSuccess(swalText);
            },
            error: function(data){
                console.log(data);
                $("#btn-save").html('Simpan').attr("disabled", false);
            }
        });
    });
</script>
@endsection