@extends('layout.master')

@section('title', 'Data Spatial')

@section('content')

<div class="page-header">
    <h5 class="page-title">Senarai Data Spatial {{ request()->type == 'belum-semak' ? 'Belum Diluluskan' : '' }}</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">Senarai Data Spatial {{ request()->type == 'belum-semak' ? 'Belum Diluluskan' : '' }}</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-between align-items-center mb-2">
                        <div class="d-flex" style="gap: 1rem;">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="filterBy" id="radio1"  {{ (request()->type == 'belum-semak') ? 'checked' : '' }}>
                                <label class="form-check-label" for="radio1">
                                    Data Belum Disemak
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="filterBy" id="radio2"  {{ (request()->type == 'belum-semak') ? '' : 'checked' }}>
                                <label class="form-check-label" for="radio2">
                                    Data Telah Disemak
                                </label>
                            </div>
                        </div>

                        @role('Pentadbir Negeri')
                            <a class="btn btn-primary" onClick="add()" href="javascript:void(0)"><i class="fa-solid fa-plus me-2"></i> Tambah Data</a>
                        @endrole
                    </div>

                    @role('Pentadbir Utama', 'Pentadbir')
                        <div class="row gx-3 gy-2">
                        
                            <div class="col-sm-3">
                                <label class="form-label">Pilih Negeri</label>
                                <select class="form-select select-2" aria-label="Default select example" id="filterNegeri" autocomplete="off">
                                    <option value="" selected>Semua</option>
                                    @foreach (\App\Models\Negeri::whereIn('id', \App\Models\DataSpatial::distinct()->pluck('negeri_id'))->orderBy('name')->get() as $negeri)
                                        <option value="{{ $negeri->id }}">{{ $negeri->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-sm-3">
                                <label class="form-label">Pilih Tahun</label>
                                <select class="form-select select-2" aria-label="Default select example" id="filterTahun" autocomplete="off">
                                    <option value="" selected>Semua</option>
                                    @foreach (\App\Models\DataSpatial::selectRaw('YEAR(created_at) as tahun')->distinct()->orderBy('tahun', 'desc')->pluck('tahun') as $tahun)
                                        <option value="{{ $tahun }}">{{ $tahun }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endrole
                    
                    <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 Kelulusan Data Spatial -->
<div class="modal fade" id="the-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="modal-title">Kelulusan Data Spatial Baharu</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 needs-validation" 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">Lapisan Data  <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="lapisan_data_id" aria-label="" name="lapisan_data_id" value="">
                                @foreach ($lapisans as $lapisan)
                                <option value="{{ $lapisan->id }}">
                                    {{ $lapisan->name }}
                                </option>
                                @endforeach
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="nama_data_spatial" class="col-sm-3 col-form-label ">Nama Data <span class="required-field required-field-condition" style="color: red; font-size: 0.8em;">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="nama_data_spatial" name="nama_data_spatial" value="" required>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="ringkasan_data_spatial" class="col-sm-3 col-form-label">Ringkasan Data <span class="required-field required-field-condition" style="color: red; font-size: 0.8em;">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="ringkasan_data_spatial" name="ringkasan_data_spatial" value="" required>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3" id="kelulusan_form" style="display:none;">
                        <label class="col-sm-3 col-form-label">Kelulusan <span class="required-field" style="color: red; font-size: 0.8em;">*</span></label>
                        <div class="col-sm-9">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="kelulusan" id="kelulusan1" value="1" checked>
                                <label class="form-check-label" for="kelulusan1"> Lulus </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="kelulusan" id="kelulusan2" value="2">
                                <label class="form-check-label" for="kelulusan2"> Tidak Lulus </label>
                            </div>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3" id="ulasan_form" style="display:none;">
                        <label for="ulasan" class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="ulasan" name="ulasan" value="" placeholder="Sila nyatakan ulasan bagi penolakan data spatial baharu">
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3" id="doc_path_form" style="display:none;">
                        <label for="doc_path" class="col-sm-3 col-form-label">Dokumen Sokongan</label>
                        <div class="col-sm-9" style="position: relative;">
                            <input type="file" class="form-control" id="doc_path" name="doc_path" accept=".pdf, .png, .jpg, .jpeg">
                            <small>Format : (.pdf), (.png) atau (.jpeg) | Saiz max: 20MB</small>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3" id="doc_path_data_spatial_form" style="display:none;">
                        <label for="doc_path_data_spatial" class="col-sm-3 col-form-label">Data Untuk Dimuat Naik <span class="required-field" style="color: red; font-size: 0.8em;">*</span></label>
                        <div class="col-sm-9" style="position: relative;">
                            <input type="file" class="form-control" id="doc_path_data_spatial" name="doc_path_data_spatial" accept=".zip" required>
                            <small>Format : (.zip) | Saiz max: 50MB</small>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit" id="submit-button">Simpan</button>
                    <a class="btn btn-outline-danger" data-bs-dismiss="modal">Batal</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Butiran Maklumat -->
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Butiran Maklumat</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Nama Data</div>
                        <div class="col-sm-9 text-muted" id="nama">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Ringkasan Data</div>
                        <div class="col-sm-9 text-muted" id="ringkasan">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Data .zip</div>
                        <div class="col-sm-9 text-muted" id="dataZip">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Dokumen Sokongan</div>
                        <div class="col-sm-9 text-muted" id="dokumenSokongan">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Pemilik Data</div>
                        <div class="col-sm-9 text-muted" id="pemilikData">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Ulasan</div>
                        <div class="col-sm-9 text-muted" id="ulasan">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Negeri</div>
                        <div class="col-sm-9 text-muted" id="negeri">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Tarikh Dimuat Naik</div>
                        <div class="col-sm-9 text-muted" id="tarikMuatnaik">-</div>
                    </div>
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-3 col-form-label ">Status</div>
                        <div class="col-sm-9 text-muted" id="status">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script type="module">
    
    import ky from "{{asset('assets/vendor/ky/ky.js')}}";

    const url = new URL(window.location.href);
    const parameterType = url.searchParams.get('type');
    
    $('input[type=radio]').change(function(){
        if ($(this).attr("id") == "kelulusan2") {
            $('#ulasan_form').show();
        } else {
            $('#ulasan_form').hide();
        }
    });

    $(document).ready( function () {     
        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            // serverSide: true,
            ajax: {
                url : "{{ route('data_spatial.data_spatial') }}",
                data: (data) => {
                    data.type = "{{ request()->type }}";
                    const filterNegeri = document.querySelector('#filterNegeri');
                    const filterTahun = document.querySelector('#filterTahun');
                    if (filterNegeri) data.filterNegeri = filterNegeri.value;
                    if (filterTahun) data.filterTahun = filterTahun.value;
                }, 
            },
            buttons: [
                {
                    extend: 'selected',
                    text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                    action: function (e, dt, node, config) {
                        fDeleteMultipleSpatial();
                    }
                },
               {
                    extend: 'pdf',
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                    title: '',
                    filename: 'Senarai Data Spatial',
                    exportOptions: {
                        columns: '.export-pdf',
                    }
               },
               {
                    extend: 'csv',
                    className: 'btn btn-success',
                    text: '<i class="fa fa-file-csv me-2"></i> CSV',
                    filename: 'Senarai Data Spatial',
                    exportOptions: {
                        columns: '.export-csv',
                    }
               },
            ],
            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: 'nama_data_spatial',
                    title: 'Nama Data',
                    className: 'export-pdf export-csv',
                },
                { data: 'ringkasan_data_spatial', title: 'Ringkasan Data', className: 'export-pdf export-csv' },
                {
                    data: 'doc_path_data_spatial',
                    title: 'Data.zip',
                    className: 'text-center',
                    render: (data, type , row) => {
                        if (!row.doc_path_data_spatial) {
                            return '-';
                        } else {
                            return `
                            <a href="/data-spatial-download/${row.id}/spatial" target="_blank">
                                <i class="fa-regular fa-file-zipper fa-lg"></i>
                            </a>`;
                        }
                    }
                },
                { 
                    data: 'doc_path',
                    title: 'Dokumen Sokongan',
                    className: 'text-center',
                    render: (data, type, row) => {
                        if (!row.doc_path) {
                            return '-';
                        } else {
                            return `
                            <a href="/data-spatial-download/${row.id}/doc" target="_blank">
                                <i class="fa-regular fa-file-pdf fa-lg"></i>
                            </a>`;
                        }
                    }
                },
                { 
                    data: 'users.name', 
                    title: 'Pemilik Data', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.users?.name ?? '-'}`;
                    }
                },
                { 
                    data: 'kelulusan.ulasan', 
                    title: 'Ulasan', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.kelulusan?.ulasan ?? '-'}`;
                    }
                },
                { 
                    data: 'negeris.name', 
                    title: 'Negeri', 
                    className: 'export-csv',
                    render: (data, type, row) => {
                        return `${row.negeris?.name ?? '-'}`;
                    }
                },
                { data: 'created_at', title: 'Tarikh Dimuat Naik', className: 'export-pdf export-csv' },
                { 
                    data: 'status_name', 
                    title: 'Status', 
                    className: 'export-pdf export-csv text-center',
                    render: (data, type, row) => {
                        let badgeClass = 'bg-secondary';
                        if (row.status_name === 'Belum Disemak') badgeClass = 'bg-warning';
                        else if (row.status_name === 'Telah Diluluskan') badgeClass = 'bg-success';
                        else if (row.status_name === 'Tidak Diluluskan') badgeClass = 'bg-danger';
                        
                        return `<span class="badge ${badgeClass}">${row.status_name}</span>`;
                    }
                },
                { 
                    data: 'action', 
                    title: 'Tindakan', 
                    className: 'text-center',
                    orderable: false, 
                    searchable: false,
                    render: (data, type, row) => {
                        return `
                            @role('Pentadbir')
                                <a href="javascript:void(0)" data-bs-toggle="tooltip" onClick="edit_func(${row.id})" data-bs-title="Kemaskini" class="edit btn btn-warning edit btn-sm ${parameterType == 'belum-semak' ? '' : 'd-none'}">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                            @endrole
                            <button type="button" class="detailBtn btn btn-sm btn-info" data-bs-toggle="tooltip" data-bs-title="Papar">
                                <i class="fa-solid fa-eye"></i>
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" data-custom-toggle="tooltip" data-bs-title="Padam" data-delete="${row.id}" onclick="padamSpatial('${row.id}', '${row.nama_data_spatial}')">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        `;
                    }
                },
            ],
            order: [[1, 'asc']],
        });
    });
     
    window.add = () => {
        $('#modal-form').trigger("reset");
        $('#kelulusan_form').hide();
        $('#ulasan_form').hide();
        $('#doc_path_form').show();
        $('#modal-title').html("Tambah Data Spatial");
        $('#submit-button').html("Muat Naik");
        $('#lapisan_data_id').val(1).trigger('change');
        $('#doc_path_data_spatial_form').show();
        $('#the-modal').modal('show');
        $('#id').val('');

        $(".required-field-condition").show();
    }
    
    window.edit_func = (id) => {
        $.ajax({
            type:"POST",
            url: "{{ route('data_spatial.data_spatial_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                $('#modal-form').trigger("reset");
                $('#kelulusan_form').show();
                $('#ulasan_form').hide();
                $('#doc_path_form').hide();
                $('#doc_path_data_spatial_form').hide();
                $('#modal-title').html("Kelulusan Data Spatial Baharu");
                $('#submit-button').html("Simpan");
                $('#the-modal').modal('show');
                $('#id').val(result.id);
                $('#lapisan_data_id').val(result.lapisan_data_id).trigger('change');
                $('#nama_data_spatial').val(result.nama_data_spatial);
                $("#nama_data_spatial").prop('disabled', true);
                $('#ringkasan_data_spatial').val(result.ringkasan_data_spatial);
                $("#ringkasan_data_spatial").prop('disabled', true);
                $('#ulasan').val(result.kelulusan.ulasan);

                $(".required-field-condition").hide();

                if(result.kelulusan.kelulusan == 2) {
                    $("#kelulusan2").prop("checked", true);
                    $('#ulasan_form').show();
                }
                else 
                    $("#kelulusan1").prop("checked", true);
            }
        });
    }

    window.padamSpatial = function(id, name){

        sPadam(null, name, function() {
            $.ajax({
                type: "POST",
                url: "{{ route('data_spatial.data_spatial_delete') }}",
                data: { id : id },
                dataType: 'json',
                success: function(result) {
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess('Data Spatial Telah Berjaya Dipadam');
                },
                error: function(data) {
                    sFail('Gagal memadam Data Spatial. Sila cuba lagi.');
                }
            });
        });
    }

    function fDeleteMultipleSpatial() {
        
        let selectedData = $('#the-table').DataTable().rows({ selected: true }).data().toArray();
        
        if (selectedData.length === 0) {
            alert("Sila pilih sekurang-kurangnya satu rekod untuk dipadam.");
            return;
        }

        let selectedIds = selectedData.map(row => row.id); 

        sPadam(null, selectedIds.length + " rekod ini?", function () {
            $.ajax({
                type: "POST",
                url: "{{ route('data_spatial.data_spatial_delete_multiple') }}",
                data: { 
                    ids: selectedIds,
                    _token: '{{ csrf_token() }}' 
                },
                dataType: 'json',
                success: function(result){
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess(result.result);
                }
            });
        });
    }
     
    $('#modal-form').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('data_spatial.data_spatial_store')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                $("#the-modal").modal('hide');
                $('#the-table').DataTable().ajax.reload(null, false);
                $("#submit-button").html('Simpan').attr("disabled", false);

                var swalText = 'Data Spatial Baharu Telah Berjaya Ditambah';
                if(data.updateOrCreate == 'update') {
                    swalText = 'Data Spatial Baharu Dikembalikan';
                    if(data.data.kelulusan == 1) {
                        swalText = 'Data Spatial Baharu Telah Berjaya Dikemaskini';
                    }
                }

                sSuccess(swalText);
            },
            error: function(reject) {
                console.log(reject);
                $(".error-text").html('');
                $(".is-invalid").removeClass("is-invalid");
                $("#submit-button").html('Simpan').attr("disabled", false);

                $.each(reject.responseJSON.errors, function (key, value) {
                    var element = $("#" + key);
                    if (element.length === 0) {
                        element = $('[name="' + key + '"]');
                    }

                    element.addClass("is-invalid");
                    
                    let errorSpan = element.closest('.col-sm-9, .form-group').find(".error-text");
                    if (errorSpan.length === 0) {
                        errorSpan = element.nextAll(".error-text").first();
                    }

                    let multiError = Array.isArray(value) ? value.join('<br>') : value;
                    errorSpan.html(multiError);
                });
            }
        });
    });

    document.querySelector('#radio1').addEventListener('change', () => {
        window.location.href = "{{ route('data_spatial.data_spatial', ['type' => 'belum-semak']) }}";
    });

    document.querySelector('#radio2').addEventListener('change', () => {
        window.location.href = "{{ route('data_spatial.data_spatial') }}";
    });

    $('#filterNegeri').on('change', function () {
        $('#the-table').DataTable().ajax.reload();
    });

    $('#filterTahun').on('change', function () {
        $('#the-table').DataTable().ajax.reload();
    });

    $('#the-table').on("click", "tbody .detailBtn", function() {
        const data = $(this).closest("table").DataTable().row($(this).closest("tr")).data();

        document.querySelector('#detailModal #nama').innerHTML = data.nama_data_spatial ?? '-';
        document.querySelector('#detailModal #ringkasan').innerHTML = data.ringkasan_data_spatial ?? '-';
                            
        document.querySelector('#detailModal #dataZip').innerHTML = (data.doc_path_data_spatial) 
            ? `
                <a href="/data-spatial-download/${data.id}/spatial" target="_blank">
                    <i class="fa-regular fa-file-zipper fa-lg"></i>
                </a>
            `
            : '-';
        document.querySelector('#detailModal #dokumenSokongan').innerHTML = (data.doc_path) 
            ? `
                <a href="/data-spatial-download/${data.id}/doc" target="_blank">
                    <i class="fa-regular fa-file-pdf fa-lg"></i>
                </a>
            `
            : '-';
        document.querySelector('#detailModal #pemilikData').innerHTML = data.users?.name ?? '-';
        document.querySelector('#detailModal #ulasan').innerHTML = data.kelulusan?.ulasan ?? '-';
        document.querySelector('#detailModal #negeri').innerHTML = data.negeris?.name ?? '-';
        document.querySelector('#detailModal #tarikMuatnaik').innerHTML = data.created_at ?? '-';
        document.querySelector('#detailModal #status').innerHTML = data.status_name ?? '-';

        $('#detailModal').modal('show');
    });

    // Client-side validation for data spatial (zip, max 50MB)
    $('#doc_path_data_spatial').on('change', function() {
        var file = this.files[0];
        if (file) {
            var fileName = file.name;
            var ext = fileName.split('.').pop().toLowerCase();
            var allowedExt = ['zip'];
            var errorSpan = $(this).siblings('.error-text');
            var maxSize = 50 * 1024 * 1024; // 50MB

            if ($.inArray(ext, allowedExt) == -1) {
                errorSpan.text('Ralat: Hanya jenis fail .zip sahaja dibenarkan.');
                $(this).val('');
                $(this).addClass('is-invalid');
            } else if (file.size > maxSize) {
                errorSpan.text('Ralat: Saiz fail melebihi had maksimum 50MB.');
                $(this).val('');
                $(this).addClass('is-invalid');
            } else {
                errorSpan.text('');
                $(this).removeClass('is-invalid');
            }
        }
    });

    // Client-side validation for dokumen sokongan (pdf/img, max 20MB)
    $('#doc_path').on('change', function() {
        var file = this.files[0];
        if (file) {
            var fileName = file.name;
            var ext = fileName.split('.').pop().toLowerCase();
            var allowedExt = ['pdf', 'png', 'jpg', 'jpeg'];
            var errorSpan = $(this).siblings('.error-text');
            var maxSize = 20 * 1024 * 1024; // 20MB

            if ($.inArray(ext, allowedExt) == -1) {
                errorSpan.text('Ralat: Hanya jenis fail .pdf, .png, .jpg atau .jpeg sahaja dibenarkan.');
                $(this).val('');
                $(this).addClass('is-invalid');
            } else if (file.size > maxSize) {
                errorSpan.text('Ralat: Saiz fail melebihi had maksimum 20MB.');
                $(this).val('');
                $(this).addClass('is-invalid');
            } else {
                errorSpan.text('');
                $(this).removeClass('is-invalid');
            }
        }
    });

</script>
@endsection