@php
    use App\Models\Negeri;
@endphp

@extends('layout.master')

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

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <div class="page-header">
        <h5 class="page-title">Semakan Data</h5>

        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="/">Laman Utama</a>
                </li>
                <li class="breadcrumb-item active">
                    Semakan Data
                </li>
            </ol>
        </nav>
    </div>

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="card-body">

                        {{-- FILTER --}}
                        <div class="row gx-3 gy-2 mb-4">

                            <div class="col-md-3">
                                <select class="form-select" id="filterKategori" onchange="table.clear().draw();filterNegeri.val('');">
                                    <option value="">Pilih Kategori</option>
                                    <option value="kawasan_kerja">Sempadan Kawasan Kerja Disahkan </option>
                                    <option value="inventori_hutan">Inventori Hutan</option>
                                    <option value="tanda_pokok">Kawasan Tanda Pokok</option>
                                    <option value="kawasan_lesen">Kawasan Lesen</option>
                                    <option value="silvikultur">Kawasan Rawatan Silvikultur</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-select" id="filterNegeri" onchange="populateTable()">
                                    <option value="">Pilih Negeri</option>
                                    {{-- @foreach (Negeri::select('id', 'name')->get() as $value)
                                        <option value="{{ $value->id }}"> {{ $value->name }} </option>
                                    @endforeach --}}
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-select" id="tahun" onchange="populateTable()">
                                    <option value="">Pilih tahun</option>
                                    <option value="2023">2023</option>
                                    <option value="2024">2024</option>
                                    <option value="2025">2025</option>
                                    <option value="2026" selected>2026</option>
                                    <option value="2027">2027</option>
                                    <option value="2028">2028</option>
                                    <option value="2029">2029</option>
                                </select>
                            </div>

                        </div>

                        {{-- TABLE --}}
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover w-100" id="the-table">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>Daerah Hutan</th>
                                        <th>No Surat Rujukan Kelulusan</th>
                                        <th>Status</th>
                                        <th width="120">Tindakan</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('js')

    <script>
        //on load start
        PSOH_API_URL = "{{ env('PSOH_API_URL') }}";
        PSOH_API_USER = "{{ env('PSOH_API_USER') }}";
        PSOH_API_PASSWORD = "{{ env('PSOH_API_PASSWORD') }}";
        var apiLogin = PSOH_API_URL + "/egp/jana-pautan-login?login_id=" + PSOH_API_USER + "&pw=" + PSOH_API_PASSWORD;
        //get token from apiLogin
        $.ajax({
            url: apiLogin,
            method: 'POST',
            success: function(response) {
                // console.log('API Login Response:', response);
                //store token in localStorage
                localStorage.setItem('psoh_token', response.token);
            },
            error: function(xhr, status, error) {
                console.error('API Login Error:', error);
            }
        });
        //on load end


        //api kategori
        var Kawasan_Kerja = PSOH_API_URL + "/egp/sempadan/kawasan-kerja";
        var Inventori_Hutan = PSOH_API_URL + "/egp/inventori/sempadan-inventori";
        var Tanda_Pokok = PSOH_API_URL + "/egp/tanda-pokok/kawasan-tanda-pokok";
        var Kawasan_Lesen = PSOH_API_URL + "/egp/lesen/kawasan-lesen";
        var Kawasan_Rawatan_Silvikultur = PSOH_API_URL + "/egp/rawatan/kawasan-rawatan";

        //parameter ?tahun=2026&kod_negeri=05


        var negeri_id = [
            {
                "id": '01',
                "name": "Johor",
                "name_id": "JOHOR",
                "kod_negeri_new": "01"
            },
            {
                "id": '02',
                "name": "Kedah",
                "name_id": "KEDAH",
                "kod_negeri_new": "02"
            },
            {
                "id": '03',
                "name": "Kelantan",
                "name_id": "KELANTAN",
                "kod_negeri_new": "03"
            },
            {
                "id": '04',
                "name": "Melaka",
                "name_id": "MELAKA",
                "kod_negeri_new": "04"
            },
            {
                "id": '05',
                "name": "Negeri Sembilan",
                "name_id": "NEGERI SEMBILAN",
                "kod_negeri_new": "05"
            },
            {
                "id": '06',
                "name": "Pahang",
                "name_id": "PAHANG",
                "kod_negeri_new": "06"
            },
            {
                "id": '07',
                "name": "Pulau Pinang",
                "name_id": "PULAU PINANG",
                "kod_negeri_new": "07"
            },
            {
                "id": '08',
                "name": "Perak",
                "name_id": "PERAK",
                "kod_negeri_new": "08"
            },
            {
                "id": '09',
                "name": "Perlis",
                "name_id": "PERLIS",
                "kod_negeri_new": "09"
            },
            {
                "id": '10',
                "name": "Selangor",
                "name_id": "SELANGOR",
                "kod_negeri_new": "10"
            },
            {
                "id": '11',
                "name": "Terengganu",
                "name_id": "TERENGGANU",
                "kod_negeri_new": "11"
            },
            {
                "id": '12',
                "name": "Sabah",
                "name_id": "SABAH",
                "kod_negeri_new": "12"
            },
            {
                "id": '13',
                "name": "Sarawak",
                "name_id": "SARAWAK",
                "kod_negeri_new": "13"
            },
            {
                "id": '14',
                "name": "Wilayah Persekutuan Kuala Lumpur",
                "name_id": "WILAYAH PERSEKUTUAN KUALA LUMPUR",
                "kod_negeri_new": "14"
            },
            
            {
                "id": '15',
                "name": "Wilayah Persekutuan Labuan",
                "name_id": "WILAYAH PERSEKUTUAN LABUAN",
                "kod_negeri_new": "15"
            },
            {
                "id": '16',
                "name": "Wilayah Persekutuan Putrajaya",
                "name_id": "WILAYAH PERSEKUTUAN PUTRAJAYA",
                "kod_negeri_new": "16"
            }
        ];

            //populate filterNegeri dropdown
            var filterNegeri = $('#filterNegeri');
            negeri_id.forEach(function(negeri) {
                filterNegeri.append('<option value="' + negeri.id + '">' + negeri.name + '</option>');
            });

        // filterKategori.change(function() {
        //     var selectedKategori = $(this).val();
        //     console.log('Selected Kategori:', selectedKategori);
        // });

        function kategoriToApiUrl(kategori) {
            switch (kategori) {
                case 'kawasan_kerja':
                    return Kawasan_Kerja;
                case 'inventori_hutan':
                    return Inventori_Hutan;
                case 'tanda_pokok':
                    return Tanda_Pokok;
                case 'kawasan_lesen':
                    return Kawasan_Lesen;
                case 'silvikultur':
                    return Kawasan_Rawatan_Silvikultur;
                default:
                    return null;
            }
        }

        // Look up maklumat_apis.process_status for the selected kategori (jenis_pengesahan_data_spatial),
        // matching each row's rujukan (no_rujukan_surat_kelulusan) to maklumat_apis.no_rujukan.
        // For 'inventori_hutan', the same no_rujukan can exist for both Pre-F and Post-F, so
        // jenis_inventori is included in the match key to avoid the two colliding.
        // process_status === 'Selesai' => status 'Disemak', otherwise 'Belum Disemak'.
        function applyProcessStatus(dataArr, selectedKategori, callback) {
            $.ajax({
                url: "/semakan_data/get_status",
                method: "POST",
                data: {
                    jenis_pengesahan_data_spatial: selectedKategori,
                    _token: "{{ csrf_token() }}"
                },
                success: function(statusResponse) {
                    var statusMap = {};
                    (statusResponse || []).forEach(function(rec) {
                        var key = String(rec.no_rujukan || '').trim() + '|' + (rec.jenis_inventori || '').trim();
                        statusMap[key] = rec.process_status;
                    });
                    dataArr.forEach(function(item) {
                        var key = String(item.rujukan || '').trim() + '|' + (item.jenis_inventori || '').trim();
                        item.status = statusMap[key] === 'Selesai' ? 'Disemak' : 'Belum Disemak';
                    });
                    callback(dataArr);
                },
                error: function(xhr, status, error) {
                    console.error('Status API Error:', error);
                    callback(dataArr);
                }
            });
        }

        data = [];
        // data = [
        //     {
        //         // "id": 1,
        //         "negeri": "Perak",
        //         "rujukan": "DK/PHH/2026/333",
        //         "status": "Disemak",
        //         "zipFile": "https://google.com",
        //         "pdfFile": "https://google.com"
        //     },
        // ];

        //populate table with data from API based on selected kategori, negeri and tahun
        function populateTable() {
            var selectedKategori = $('#filterKategori').val();
            var selectedNegeri = $('#filterNegeri').val();
            var selectedTahun = $('#tahun').val();
            var apiUrl = kategoriToApiUrl(selectedKategori);
            // console.log('Selected Kategori:', selectedKategori);
            // console.log('Selected Negeri:', selectedNegeri);
            // console.log('Selected Tahun:', selectedTahun);
            // console.log('API URL:', apiUrl);

            //get data from API
            if (apiUrl) {
                $.ajax({
                    url: apiUrl,
                    method: 'GET',
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('psoh_token')
                    },
                    data: {
                        tahun: selectedTahun,
                        kod_negeri: selectedNegeri
                    },
                    success: function(response) {
                        // console.log('API Response:', response);
                        var negeriName = negeri_id.find(n => n.id === selectedNegeri)?.name_id || '';
                        var data = response.data[negeriName] ? response.data[negeriName] : [];
                        // console.log('Data to populate table:', data);
                        switch (selectedKategori) {
                            case 'kawasan_kerja':
                                // console.log('Data for Kawasan Kerja:', data.kawasan_kerja_mengikut_daerah);
                                data = Array.isArray(data.kawasan_kerja_mengikut_daerah) ? data.kawasan_kerja_mengikut_daerah.map(item => ({
                                    // id: item.id,
                                    negeri: item.daerah_hutan,
                                    rujukan: item.no_rujukan_surat_kelulusan ? item.no_rujukan_surat_kelulusan : item.daerah_hutan,
                                    status: 'Belum Disemak',
                                    zipFile: item.pelan_kawasan_kerja_zip,
                                    pdfFile: item.pelan_kawasan_kerja_pdf
                                })) : [];

                                applyProcessStatus(data, selectedKategori, function(updatedData) {
                                    table.clear().rows.add(updatedData).draw();
                                });
                                break;
                            case 'inventori_hutan':
                                // console.log('Data for Inventori Hutan:', data.pre_f.sempadan_inventori_mengikut_daerah);
                                data_pre_f = Array.isArray(data.pre_f.sempadan_inventori_mengikut_daerah) ? data.pre_f.sempadan_inventori_mengikut_daerah.map(item => ({
                                    // id: item.id,
                                    negeri: item.daerah_hutan + ' (Pre-F)',
                                    rujukan: item.no_rujukan_surat_kelulusan ? item.no_rujukan_surat_kelulusan : item.daerah_hutan,
                                    status: 'Belum Disemak',
                                    zipFile: item.pelan_kawasan_kerja_zip,
                                    pdfFile: item.pelan_kawasan_kerja_pdf,
                                    kaedah_pelaksanaan: 'Kontrak',
                                    jenis_inventori: 'Pre-F',
                                })) : [];
                                // console.log('Data for Inventori Hutan (Pre-F):', data_pre_f);

                                //combine pre_f and post_f data
                                data_post_f = Array.isArray(data.post_f.sempadan_inventori_mengikut_daerah) ? data.post_f.sempadan_inventori_mengikut_daerah.map(item => ({
                                    // id: item.id,
                                    negeri: item.daerah_hutan + ' (Post-F)',
                                    rujukan: item.no_rujukan_surat_kelulusan ? item.no_rujukan_surat_kelulusan : item.daerah_hutan,
                                    status: 'Belum Disemak',
                                    zipFile: item.pelan_kawasan_kerja_zip,
                                    pdfFile: item.pelan_kawasan_kerja_pdf,
                                    kaedah_pelaksanaan: 'Kontrak',
                                    jenis_inventori: 'Post-F',
                                })) : [];
                                // console.log('Data for Inventori Hutan (Post-F):', data_post_f);
                                concatData = data_pre_f.concat(data_post_f);
                                // console.log('Combined Data for Inventori Hutan:', concatData);
                                data = concatData;

                                applyProcessStatus(data, selectedKategori, function(updatedData) {
                                    table.clear().rows.add(updatedData).draw();
                                });
                                break;
                            case 'tanda_pokok':
                                // console.log('Data for Kawasan Kerja:', data.kawasan_kerja_mengikut_daerah);
                                data = Array.isArray(data.dokumen_tanda_pokok) ? data.dokumen_tanda_pokok.map(item => ({
                                    // id: item.id,
                                    negeri: item.daerah_hutan,
                                    rujukan: item.no_rujukan_surat_kelulusan,
                                    status: 'Belum Disemak',
                                    zipFiles: [
                                        { label: 'Baris Tanam', url: item.baris_tanam_zip },
                                        { label: 'Garisan Kawalan', url: item.garisan_kawalan_zip },
                                        { label: 'Petak Kawalan', url: item.petak_kawalan_zip }
                                    ]
                                })) : [];

                                console.log('Data for Tanda Pokok:', data);

                                applyProcessStatus(data, selectedKategori, function(updatedData) {
                                    table.clear().rows.add(updatedData).draw();
                                });
                                break;
                            // add other cases as needed
                            case 'kawasan_lesen':
                                // console.log('Data for Kawasan Kerja:', data.kawasan_kerja_mengikut_daerah);
                                data = Array.isArray(data.senarai_kawasan_lesen) ? data.senarai_kawasan_lesen.map(item => ({
                                    // id: item.id,
                                    negeri: item.daerah_hutan,
                                    rujukan: item.no_rujukan_surat_kelulusan,
                                    status: 'Belum Disemak',
                                    zipFile: '',
                                    pdfFile: '',
                                })) : [];

                                console.log('Data for Kawasan Lesen:', data);

                                applyProcessStatus(data, selectedKategori, function(updatedData) {
                                    table.clear().rows.add(updatedData).draw();
                                });
                                break;
                            // add other cases as needed
                            case 'silvikultur':
                                // console.log('Data for Kawasan Kerja:', data.kawasan_kerja_mengikut_daerah);
                                data = Array.isArray(data.senarai_kawasan_rawatan) ? data.senarai_kawasan_rawatan.map(item => ({
                                    // id: item.id,
                                    negeri: item.daerah_hutan,
                                    rujukan: item.no_rujukan_surat_kelulusan,
                                    status: 'Belum Disemak',
                                    jenis_kawasan: 'Tanaman Mengaya', //KENE UBAH IN FUTURE
                                    zipFile: item.blok_kerja_zip,
                                    pdfFile: '',
                                })) : [];

                                console.log('Data for Kawasan Rawatan Silvikultur:', data);

                                applyProcessStatus(data, selectedKategori, function(updatedData) {
                                    table.clear().rows.add(updatedData).draw();
                                });
                                break;
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('API Error:', error);
                    }
                });
            }
        }

        //sample data for dev
        
        
        let table = $('#the-table').DataTable({

            processing: true,
            serverSide: false,

            // ajax: {
            //     url: "/layers",
            //     dataSrc: "data"
            // },

            //load data from sample data for dev
            data: data,

            columns: [
                {
                    //id hidden but replace with auto increment number
                    data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    data: "negeri"
                },
                {
                    data: "rujukan"
                },
                {
                    data: "status",
                    render: function(data) {
                        if (data === "Belum Disemak") {
                            return `
                                <span class="badge bg-danger">
                                    Belum Disemak
                                </span>
                            `;
                        }else if (data === "Disemak"){
                            return `
                            <span class="badge bg-success">
                                Disemak
                            </span>
                            `;
                        }
                    }
                },
                {
                    data: "zipFile, pdfFile, rujukan, negeri, kaedah_pelaksanaan, jenis_inventori, jenis_kawasan",
                    orderable: false,
                    searchable: false,

                    render: function(data, type, row) {
                        // Edit button store the current row to maklumat_api model, use store_maklumat_api in controller

                        // Some kategori (e.g. tanda_pokok) have several ZIP files per row instead of
                        // a single one; render one download button per entry when row.zipFiles is set,
                        // otherwise fall back to the single row.zipFile button used by the other kategori.
                        var zipButtonsHtml = Array.isArray(row.zipFiles) ? row.zipFiles.map(function(z) {
                            return `
                        <button
                            class="btn btn-sm btn-warning"
                            onclick="window.open('${z.url}', '_blank')"
                            ${!z.url ? 'disabled' : ''}
                            title="Download ${z.label}"
                        >
                            <i class="fa-solid fa-file-zipper"></i>
                        </button>
                            `;
                        }).join('') : `
                        <button
                            class="btn btn-sm btn-warning"
                            onclick="window.open('${row.zipFile}', '_blank')"
                            ${!row.zipFile ? 'disabled' : ''}
                            title="Download ZIP"
                        >
                            <i class="fa-solid fa-file-zipper"></i>
                        </button>
                        `;

                        var firstZipUrl = row.zipFile || (Array.isArray(row.zipFiles) && row.zipFiles.length ? row.zipFiles[0].url : '');

                        return `
                        <button
                            class="btn btn-sm btn-danger"
                            onclick="window.open('${row.pdfFile}', '_blank')"
                            ${!row.pdfFile ? 'disabled' : ''}
                            title="View PDF"
                        >
                            <i class="fa-solid fa-file-pdf"></i>
                        </button>

                        ${zipButtonsHtml}
                        <button
                            class="btn btn-sm btn-success"
                            title="Edit"
                            onclick="storeSemakanData('${firstZipUrl}', '${row.pdfFile}', '${row.rujukan}', $('#filterNegeri option:selected').text(), '${row.kaedah_pelaksanaan}', '${row.jenis_inventori}', $('#filterKategori').val(), '${row.negeri}', $('#tahun').val(), '${negeri_id.find(n => n.id === $('#filterNegeri').val())?.kod_negeri_new || ''}', '${row.jenis_kawasan}')"
                        >
                            <i class="fa-solid fa-pen-to-square"></i>
                        </button>
                    `;
                    }
                }
            ]
        });

        function storeSemakanData(zipFile, pdfFile, rujukan, negeri, kaedahPelaksanaan, jenisInventori, filterKategori, daerah, tahun, kod_negeri, jenisKawasan) {
            //store the current row to maklumat_api model, use store_maklumat_api in controller
            
            let ajaxData = {
                no_rujukan: rujukan,
                tahun: tahun,
                negeri: negeri,
                daerah: daerah,
                jenis_pengesahan_data_spatial: filterKategori,
                kod_negeri: kod_negeri,
                _token: "{{ csrf_token() }}"
            };
            
            if(kaedahPelaksanaan !== 'undefined') {
                ajaxData.kaedah_pelaksanaan = kaedahPelaksanaan;
            }
            if(jenisInventori !== 'undefined') {
                ajaxData.jenis_inventori = jenisInventori;
            }
            if(jenisKawasan !== 'undefined') {
                ajaxData.jenis_kawasan = jenisKawasan;
            }

            console.log('Data to be sent to store_maklumat_api:', ajaxData);

            // console.log('Data to be sent to store_maklumat_api:', ajaxData);
            $.ajax({
                url: "/semakan_data/store_maklumat_api",
                method: "post",
                data: ajaxData,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Data berjaya disimpan',
                        text: response.id ? 'Dengan ID: ' + response.id : ''
                    }).then(function() {
                        window.location.href = "/semakan_data/viewer?id=" + response.id;
                    });
                },
                error: function(xhr, status, error) {
                    console.error('API Error:', error);
                    console.error('API Error Response:', xhr.responseText);
                }
            });
        }


        /*
        |--------------------------------------------------------------------------
        | DELETE
        |--------------------------------------------------------------------------
        */

        // function deleteData(id) {

        //     if (!confirm('Padam data ini?')) {
        //         return;
        //     }

        //     $.ajax({

        //         url: `/layers/${id}`,

        //         method: "DELETE",

        //         data: {
        //             _token: "{{ csrf_token() }}"
        //         },

        //         success: function() {

        //             table.ajax.reload();

        //             alert('Data berjaya dipadam');
        //         }
        //     });
        // }
    </script>

@endsection