@extends('layout.master')

@section('title', $openDashboardName ? $openDashboardName . ' - Dashboard' : 'Dashboard')

@section('styles')
    <!-- ArcGIS -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />

    <style>
        #viewDiv1,
        #viewDiv2,
        #viewDiv3,
        #viewDiv4,
        #viewDiv5 {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 50vh;
            overflow: hidden;

            @media (width >=1536px) {
                height: 100%
            }
        }

        .scrollable {
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgb(30, 58, 138) transparent;
            scroll-snap-type: none;

            @media (width >=1536px) {
                scroll-snap-type: y mandatory;
                padding-bottom: 1rem;
            }

            .custom-card {
                scroll-snap-align: start;
                scroll-margin-left: 1px;
            }
        }

        /* Dashboard Index Styles */
        .dashboard-index {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
        }

        .dashboard-card {
            --card-color: #2563eb;
            --card-color-soft: #eff6ff;
            --card-color-softer: #eff6ff80;

            flex: 1 1 100%;
            max-width: 100%;
            
            @media (min-width: 768px) {
                flex: 1 1 calc(50% - 1.5rem);
                max-width: calc(50% - 1.5rem);
            }
            
            @media (min-width: 1024px) {
                flex: 1 1 calc(33.333% - 1.5rem);
                max-width: calc(33.333% - 1.5rem);
            }

            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 4px solid var(--card-color);
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 1.75rem;
            position: relative;

            &:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            }

            &.theme-blue {
                --card-color: #2563eb;
                --card-color-soft: #eff6ff;
                --card-color-softer: #dbeafe80;
            }

            &.theme-green {
                --card-color: #16a34a;
                --card-color-soft: #f0fdf4;
                --card-color-softer: #dcfce780;
            }

            &.theme-orange {
                --card-color: #ea580c;
                --card-color-soft: #fff7ed;
                --card-color-softer: #ffedd580;
            }

            &.theme-purple {
                --card-color: #7c3aed;
                --card-color-soft: #f5f3ff;
                --card-color-softer: #ede9fe80;
            }

            &.theme-teal {
                --card-color: #0d9488;
                --card-color-soft: #f0fdfa;
                --card-color-softer: #ccfbf180;
            }

            button, .btn {
                border-radius: 10px;
                padding: 0.75rem;
                transition: all 0.3s ease;
            }
        }

        /* Decorative blob accent */
        .dashboard-card::before {
            content: '';
            position: absolute;
            top: -2.5rem;
            right: -2.5rem;
            width: 8rem;
            height: 8rem;
            border-radius: 9999px;
            background: var(--card-color-softer);
            pointer-events: none;
        }

        .dashboard-card-icon {
            position: relative;
            z-index: 1;
            width: 4rem;
            height: 4rem;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--card-color-soft);
            color: var(--card-color);
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .dashboard-card-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;
        }

        .dashboard-card-title {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--dark-bg);
            margin-bottom: 0.5rem;
            line-height: 1.4;
            min-height: 50px;
        }

        .dashboard-card-desc {
            font-size: 0.9rem;
            color: #6b7280;
            line-height: 1.5;
            margin-bottom: 1.5rem;
            min-height: 65px;
        }

        .dashboard-card-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            width: 100%;
            border: none;
            background: var(--card-color-soft);
            color: var(--card-color);
        }

        .dashboard-card-btn:hover {
            background: var(--card-color);
            color: #fff;
        }

        .custom-card {
            color: #fff;
            background-color: #1b1e29;
            border: 1px solid #3b82f6;
            border-radius: 0.813rem;
            width: 100%;
        }

        .card-expand {
            position: fixed;
            inset: 0px;
            height: 100%;
            width: 100%;
            z-index: 9999;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #fff;

            thead th {
                border: 1px solid #fff;
                padding: .25rem;
                text-align: center;
            }

            tbody td {
                border: 1px solid #fff;
                padding: .25rem;
                text-align: center;
            }
        }

        .custom-table-border-blue {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #3b82f6;

            thead th {
                border: 1px solid #3b82f6;
                padding: .25rem;
                text-align: center;
            }

            tbody td {
                border: 1px solid #3b82f6;
                padding: .25rem;
                text-align: center;
            }
        }

        .custom-select-border-blue {
            border-radius: .5rem;
            padding: .5rem;
            color: #3b82f6;
            border: 1px solid #3b82f6;
            background-color: transparent;
        }

        .custom-input-border-blue {
            border-radius: .5rem;
            padding: .5rem;
            color: #3b82f6;
            border: 1px solid #3b82f6;
            background-color: transparent;
            outline-style: none;
        }

        .text-balance {
            text-wrap: balance;
        }

        #dokumen-modal,
        #data-modal,
        #inventori-hutan,
        #kawasan-lesen,
        #kawasan-rawatan-silvikultur,
        #sempadan-kawasan-kerja-disahkan,
        #kawasan-tanda-pokok {
            .modal-content {
                background-color: #292c37;
                color: #ffff !important;
                overflow: hidden;
            }

            .modal-header {
                padding: 1rem 1.5rem;
            }

            .modal-title {
                letter-spacing: 0.5px;
            }

            .modal-body {
                padding: 1.5rem;
            }

            i,
            .color-accent-1 {
                color: rgb(var(--info-rgb)) !important;
            }

            canvas {
                min-height: 25rem;

                @media (width >=1536px) {
                    min-height: unset;
                }
            }
        }

        #kawasan-rawatan-silvikultur #bilChart {
            min-height: 25rem;

             @media (width >=1536px) {
                min-height: 20rem;
            }
        }

        #dokumen-modal {
            select option:first-child {
                color: rgb(59, 130, 246, 0.5);
            }
        }

        .space-y {
            &> :not(:last-child) {
                margin-block-end: .5rem;
            }
        }

        .layout-container {
            height: 100%;

            &> :not(:last-child) {
                margin-block-end: .5rem;
            }

            @media (width >=1536px) {
                display: grid;
                gap: .5rem;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                grid-template-rows: repeat(12, minmax(0, 1fr));

                &> :not(:last-child) {
                    margin-block-end: 0;
                }
            }
        }
    </style>
@endsection

@section('content')

    @if (!$isMobile)
        <div class="page-header">
            <div class="d-flex align-items-start">
                <div class="me-3 mt-1">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="2" y="2" width="9" height="9" rx="3" fill="#6366f1"/>
                        <rect x="2" y="13" width="9" height="9" rx="3" fill="#818cf8"/>
                        <rect x="13" y="2" width="9" height="9" rx="3" fill="#818cf8"/>
                        <rect x="13" y="13" width="9" height="9" rx="3" fill="#6366f1"/>
                    </svg>
                </div>
                <div>
                    <h2 class="fw-bold mb-1" style="color: #0f172a; font-size: 1.75rem;"><span onclick="fTest()">Dashboard</span></h2>
                    <p class="text-muted mb-0" style="color: #64748b; font-size: 0.95rem;">Senarai modul Dashboard e-GP PSOH. Sila pilih menu untuk mengakses modul yang dikehendaki.</p>
                </div>
            </div>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </nav>
        </div>
    @endif

    <section class="section">
        <div class="dashboard-index mb-4">
            @foreach ($dashboards as $item)
                <div class="dashboard-card shadow-sm theme-{{ $item->color }}">
                    <div class="dashboard-card-icon">
                        <i class="{{ $item->icon }}"></i>
                    </div>
                    <div class="dashboard-card-content">
                        <div>
                            <div class="dashboard-card-title">{{ $item->name }}</div>
                            <div class="dashboard-card-desc">{{ $item->description }}</div>
                        </div>
                        <a href="{{ route('dashboards.index', array_filter(['open' => $item->dashboardModalId, 'isMobile' => $isMobile ?: null])) }}" @if (!$isMobile) target="_blank" @endif class="btn dashboard-card-btn fw-bold">
                            <span><i class="{{ $item->icon }} me-2"></i>Lihat Dashboard</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <x-dashboards.inventori-hutan :arrNegeri="$arrNegeri" :arrTahun="$arrTahun" />
    <x-dashboards.kawasan-lesen :arrNegeri="$arrNegeri" :arrTahun="$arrTahun" />
    <x-dashboards.kawasan-rawatan-silvikultur :arrNegeri="$arrNegeri" :arrTahun="$arrTahun" />
    <x-dashboards.kawasan-tanda-pokok :arrNegeri="$arrNegeri" :arrTahun="$arrTahun" />
    <x-dashboards.sempadan-kawasan-kerja-disahkan :arrNegeri="$arrNegeri" :arrTahun="$arrTahun" />
    <x-modals.dokumen.table id="dokumen-modal" />
    <x-modals.data.table id="data-modal" />
@endsection

@section('js')
    <!-- Chart.js -->
    <script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1"></script>
    <!-- Dashboard Map -->
    <script src="{{ asset('assets/js/dashboardmap.js?r=' . filemtime(public_path('assets/js/dashboardmap.js'))) }}"></script>
    <!-- ArcGIS -->
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
        Chart.register(ChartDataLabels);
        let sempadan_kawasan_kerja_disahkan_bil_hutan_chart;
        let inventori_hutan_luas_chart_pref;
        let inventori_hutan_luas_chart_postf;
        let kawasan_silvikultur_bil_chart;
        let kawasan_silvikultur_luas_chart;
        let kawasan_tanda_pokok_peratus_chart;
        let kawasan_tanda_pokok_pie_chart;
        let kawasan_lesen_bil_chart;
        let dokumenModal;
        let dataModal;
        window.urlMapServer = "";
        let dokumens = [];
        let filteredDokumens = [];

        $(document).ready(function() {
            dokumenModal = new bootstrap.Modal('#dokumen-modal');
            dataModal = new bootstrap.Modal('#data-modal');
        });
        require([
                "esri/layers/FeatureLayer",
            ],
            function(
                FeatureLayer,
            ) {
                function setContentDocumentModal(dokumens) {
                    const tbodyEl = document.querySelector("#dokumen-modal tbody");
                    tbodyEl.innerHTML = '';

                    if (dokumens.length > 0) {
                        tbodyEl.insertAdjacentHTML("beforeend", dokumens.map((dokumen, i) => `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${dokumen.no_rujukan}</td>
                            <td class="text-center">
                                <a href="${dokumen.url ?? '#'}"${dokumen.url ? '' : 'onclick="return false;"'}  target="_blank" class="text-center">
                                    <i class="fa-solid fa-file-export fa-xl"></i>
                                </a>
                            </td>
                        </tr>
                    `).join(''));

                    } else {
                        tbodyEl.innerHTML = `
                        <tr>
                            <td colspan="3">Tiada data</td>
                        </tr>
                    `;
                    }
                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                window.baseUrl = "{{ env('APP_URL') }}";
                window.psohApiAuth = "{{ env('PSOH_API_AUTH') }}";
                window.psohLoginId = "{{ env('PSOH_LOGIN_ID') }}";
                window.psohPassword = "{{ env('PSOH_PASSWORD') }}";

                document.querySelectorAll('.dashboardBtn').forEach(element => {
                    element.addEventListener('click', (e) => {
                        const type = e.target.getAttribute('data-type');
                        openDashboard(type);
                    });
                });

                /**
                 * Helper: login to PSOH and fetch dashboard data with validation.
                 * Throws a descriptive error if the API response is invalid.
                 */
                async function loginAndFetchPsoh(type, filter_by) {
                    const loggedIn = await loggedInPsoh();

                    if (!loggedIn || !loggedIn.token) {
                        throw new Error('Gagal mendapatkan token daripada PSOH. Sila pastikan API PSOH boleh diakses.');
                    }

                    const res = await fetchDataDashboardFromPsoh(type, loggedIn.token, filter_by);

                    if (!res || !res.data) {
                        throw new Error('Respons daripada PSOH tidak mengandungi data. Sila cuba lagi.');
                    }

                    const dataPsoh = Object.values(res['data'])[0];

                    if (!dataPsoh) {
                        throw new Error('Data dashboard daripada PSOH kosong.');
                    }

                    return dataPsoh;
                }

                window.openDashboard = async (type) => {
                    $('#loading-indicator').modal('show');

                    const dashboardEl = document.querySelector(`#${type}`);
                    dashboardEl.querySelector(`#tahunFooter`).innerHTML = dashboardEl.querySelector(`#filterTahun`).value;

                    const filter_by = {
                        kod_negeri: dashboardEl.querySelector(`#filterNegeri`).value,
                        tahun: dashboardEl.querySelector(`#filterTahun`).value,
                        nama_negeri: dashboardEl.querySelector(`#filterNegeri`).selectedOptions[0].text.toUpperCase(),
                    };

                    try {
                        const data = await loadData(type, filter_by);

                        if (type == 'inventori-hutan') {
                            const dataPsoh = await loginAndFetchPsoh(type, filter_by);
                            console.log('data psoh', dataPsoh);

                            const dataGis1 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_INVENTORI_PRE_F/MapServer/4',
                                outFields: ["LUAS_HA", 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis1', dataGis1);

                            const dataGis2 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_INVENTORI_POST_F/MapServer/4',
                                outFields: ["LUAS_HA", 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis2', dataGis2);

                            const luasSempadans = [];
                            for (let i = 0; i < dataPsoh.post_f.sempadan_inventori_mengikut_daerah.length; i++) {
                                const post_f_daerah = dataPsoh.post_f.sempadan_inventori_mengikut_daerah[i];
                                const pre_f_daerah = dataPsoh.pre_f.sempadan_inventori_mengikut_daerah[i];

                                luasSempadans.push({
                                    'daerah_hutan': post_f_daerah.daerah_hutan,
                                    'pre_f_keluasan_sempadan': pre_f_daerah.keluasan,
                                    'post_f_keluasan_sempadan': post_f_daerah.keluasan,
                                });
                            }

                            if (dashboardEl.querySelector('#luasChartPreF')) {
                                let res1 = [];
                                if (dataGis1.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataGis1, ({ DPH }) => DPH))
                                        .map(([DPH, records]) => ({ 
                                            DPH, 
                                            LUAS_HA: records.reduce((sum, record) => sum + Number(record.LUAS_HA || 0), 0)
                                        }));
                                }

                                const labels = res1.map(x => x.DPH);
                                const data1 = res1.map(x => Math.round(x.LUAS_HA));

                                inventori_hutan_luas_chart_pref?.destroy();
                                inventori_hutan_luas_chart_pref = new Chart($(`#${type} #luasChartPreF`), chartjs_config.inventoriHutan.luasChartPref);
                                inventori_hutan_luas_chart_pref.data.labels = labels;
                                inventori_hutan_luas_chart_pref.data.datasets[0].data = data1;

                                inventori_hutan_luas_chart_pref.update();
                            }

                            if (dashboardEl.querySelector('#luasChartPostF')) {
                                let res1 = [];
                                if (dataGis2.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataGis2, ({ DPH }) => DPH))
                                        .map(([DPH, records]) => ({ 
                                            DPH, 
                                            LUAS_HA: records.reduce((sum, record) => sum + Number(record.LUAS_HA || 0), 0)
                                        }));
                                }
                                
                                const labels = res1.map(x => x.DPH);
                                const data1 = res1.map(x => Math.round(x.LUAS_HA));

                                inventori_hutan_luas_chart_postf?.destroy();
                                inventori_hutan_luas_chart_postf = new Chart($(`#${type} #luasChartPostF`), chartjs_config.inventoriHutan.luasChartPostf);
                                inventori_hutan_luas_chart_postf.data.labels = labels;
                                inventori_hutan_luas_chart_postf.data.datasets[0].data = data1;

                                inventori_hutan_luas_chart_postf.update();
                            }

                            dashboardEl.querySelector(`#total-bil-sempadan-pre-f`).innerHTML = dataGis1.length ?? 0;
                            dashboardEl.querySelector(`#total-bil-sempadan-post-f`).innerHTML = dataGis2.length ?? 0;

                            dashboardEl.querySelector(`#nama-negeri`).innerHTML = `MAKLUMAT ${dashboardEl.querySelector(`#filterNegeri`).options[dashboardEl.querySelector(`#filterNegeri`).selectedIndex].text}` ?? '-';

                            dashboardEl.querySelector(`#luas-negeri`).innerHTML = data?.negeriDashboard?.luas_negeri ? `${Number(data.negeriDashboard.luas_negeri).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-hutan`).innerHTML = data?.negeriDashboard?.kawasan_hutan ? `${Number(data.negeriDashboard.kawasan_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-tidak-berhutan`).innerHTML = data?.negeriDashboard?.kawasan_tidak_berhutan ? `${Number(data.negeriDashboard.kawasan_tidak_berhutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#hutan-simpan-kekal`).innerHTML = data?.negeriDashboard?.hutan_simpan_kekal ? `${Number(data.negeriDashboard.hutan_simpan_kekal).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#ladang-hutan`).innerHTML = data?.negeriDashboard?.ladang_hutan ? `${Number(data.negeriDashboard.ladang_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#tanah-kerajaan`).innerHTML = data?.negeriDashboard?.tanah_kerajaan ? `${Number(data.negeriDashboard.tanah_kerajaan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#rizab-hidupan-liar`).innerHTML = data?.negeriDashboard?.rizab_hidupan_liar ? `${Number(data.negeriDashboard.rizab_hidupan_liar).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#catuan-tebangan-tahunan`).innerHTML = data?.negeriDashboard?.catuan_tebangan_tahunan ? `${Number(data.negeriDashboard.catuan_tebangan_tahunan).toLocaleString()} Hektar` : '-';

                            dokumens = [];
                            dataPsoh?.pre_f?.sempadan_inventori_mengikut_daerah.map(x => {
                                if (x.no_rujukan_surat_kelulusan) {
                                    dokumens.push({
                                        'no_rujukan': x.no_rujukan_surat_kelulusan,
                                        'url': x.pelan_kawasan_kerja_pdf,
                                        'daerah_hutan': x.daerah_hutan,
                                    });
                                }
                            });
                            dataPsoh?.post_f?.sempadan_inventori_mengikut_daerah.map(x => {
                                if (x.no_rujukan_surat_kelulusan) {
                                    dokumens.push({
                                        'no_rujukan': x.no_rujukan_surat_kelulusan,
                                        'url': x.pelan_kawasan_kerja_pdf,
                                    });
                                }
                            });
                            setContentDocumentModal(dokumens);

                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).innerHTML = '<option value="" selected>Pilihan Daerah Hutan</option>';
                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).insertAdjacentHTML("beforeend", dataPsoh.senarai_daerah_hutan.map(x => `
                                <option value="${x.nama}">${x.nama}</option>
                            `).join(''));

                        } else if (type == 'kawasan-lesen') {
                            const dataPsoh = await loginAndFetchPsoh(type, filter_by);
                            console.log('data psoh', dataPsoh);

                            const dataGis1 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_LESEN/MapServer/1',
                                outFields: ['LUAS_HA', 'JNS_LESEN', 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}' AND JNS_LESEN IN ('CTT',  'PROJEK')`,
                            });
                            console.log('dataGis1', dataGis1);

                            const dataCtt = dataGis1.filter(x => x.JNS_LESEN == 'CTT');
                            const dataProjek = dataGis1.filter(x => x.JNS_LESEN == 'PROJEK');

                            if (dashboardEl.querySelector(`#bilChart`)) {
                                let res1 = [];
                                if (dataCtt.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataCtt, ({ DPH  }) => DPH ))
                                        .map(([DPH , records]) => ({ DPH , count: records.length }));
                                }

                                let res2 = [];
                                if (dataProjek.length > 0) {
                                    res2 = Object.entries(Object.groupBy(dataProjek, ({ DPH  }) => DPH ))
                                        .map(([DPH , records]) => ({ DPH , count: records.length }));
                                }

                                const grouped1 = Object.groupBy(res1, x => x.DPH);
                                const grouped2 = Object.groupBy(res2, x => x.DPH);
                                const DPH = new Set([...Object.keys(grouped1), ...Object.keys(grouped2)]);
                                const chartData = [...DPH].map(DPH => ({
                                    DPH: DPH,
                                    BIL_CTT: grouped1[DPH]?.[0]?.count ?? 0,
                                    BIL_PROJEK: grouped2[DPH]?.[0]?.count ?? 0,
                                }));
                                console.log('chartData', chartData);

                                const labels = chartData.map(x => x.DPH);
                                const data1 = chartData.map(x => x.BIL_CTT);
                                const data2 = chartData.map(x => x.BIL_PROJEK);

                                kawasan_lesen_bil_chart?.destroy();
                                kawasan_lesen_bil_chart = new Chart($(`#${type} #bilChart`), chartjs_config.kawasanLesen.bilChart);
                                kawasan_lesen_bil_chart.data.labels = labels;
                                kawasan_lesen_bil_chart.data.datasets[0].data = data1;
                                kawasan_lesen_bil_chart.data.datasets[1].data = data2;

                                kawasan_lesen_bil_chart.update();
                            }

                            dashboardEl.querySelector('#luas-catuan-tebangan').innerHTML = `${Math.round(dataCtt.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString()} HEKTAR`;
                            dashboardEl.querySelector('#luas-projek').innerHTML = `${Math.round(dataProjek.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString()} HEKTAR`;

                            dashboardEl.querySelector('#bil-catuan-tebangan').innerHTML = dataCtt.length ?? 0;
                            dashboardEl.querySelector('#bil-projek').innerHTML = dataProjek.length ?? 0;

                            dashboardEl.querySelector('#luas-kawasan-lesen').innerHTML = Math.round(dataGis1.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString();

                            let resCtt = [];
                            if (dataCtt.length > 0) {
                                resCtt = Object.entries(Object.groupBy(dataCtt, ({ DPH }) => DPH))
                                    .map(([DPH, records]) => ({ 
                                        DPH, 
                                        LUAS_HA: records.reduce((sum, record) => sum + Number(record.LUAS_HA || 0), 0)
                                     }));
                            }

                            let resProjek = [];
                            if (dataProjek.length > 0) {
                                resProjek = Object.entries(Object.groupBy(dataProjek, ({ DPH }) => DPH))
                                    .map(([DPH, records]) => ({ DPH, LUAS_HA }));
                            }

                            const grouped1 = Object.groupBy(resCtt, x => x.DPH);
                            const grouped2 = Object.groupBy(resProjek, x => x.DPH);
                            const DPH = new Set([...Object.keys(grouped1), ...Object.keys(grouped2)]);
                            const dataTable1 = [...DPH].map(DPH => ({
                                DPH: DPH,
                                LUAS_CTT: grouped1[DPH]?.[0]?.LUAS_HA || 0,
                                LUAS_PROJEK: grouped2[DPH]?.[0]?.LUAS_HA || 0,
                            }));
                            console.log('dataTable1', dataTable1);

                            dashboardEl.querySelector(`#luasKawasanLesenLayout tbody`).innerHTML = '';
                            if (dataTable1.length > 0) {
                                dashboardEl.querySelector(`#luasKawasanLesenLayout tbody`).insertAdjacentHTML("beforeend", dataTable1.map(x => `
                                    <tr>
                                        <td>${x.DPH}</td>    
                                        <td>${Math.round(x.LUAS_CTT).toLocaleString()}</td>    
                                        <td>${Math.round(x.LUAS_PROJEK).toLocaleString()}</td>    
                                    </tr>
                                `).join(''));
                                
                            } else {
                                dashboardEl.querySelector(`#luasKawasanLesenLayout tbody`).innerHTML = `
                                <tr>
                                    <td colspan="3">Tiada Data</td>
                                </tr>
                            `;

                            }

                            dashboardEl.querySelector(`#nama-negeri`).innerHTML = `MAKLUMAT ${dashboardEl.querySelector(`#filterNegeri`).options[dashboardEl.querySelector(`#filterNegeri`).selectedIndex].text}` ?? '-';
                            dashboardEl.querySelector(`#luas-negeri`).innerHTML = data?.negeriDashboard?.luas_negeri ? `${Number(data.negeriDashboard.luas_negeri).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-hutan`).innerHTML = data?.negeriDashboard?.kawasan_hutan ? `${Number(data.negeriDashboard.kawasan_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-tidak-berhutan`).innerHTML = data?.negeriDashboard?.kawasan_tidak_berhutan ? `${Number(data.negeriDashboard.kawasan_tidak_berhutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#hutan-simpan-kekal`).innerHTML = data?.negeriDashboard?.hutan_simpan_kekal ? `${Number(data.negeriDashboard.hutan_simpan_kekal).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#ladang-hutan`).innerHTML = data?.negeriDashboard?.ladang_hutan ? `${Number(data.negeriDashboard.ladang_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#tanah-kerajaan`).innerHTML = data?.negeriDashboard?.tanah_kerajaan ? `${Number(data.negeriDashboard.tanah_kerajaan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#rizab-hidupan-liar`).innerHTML = data?.negeriDashboard?.rizab_hidupan_liar ? `${Number(data.negeriDashboard.rizab_hidupan_liar).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#catuan-tebangan-tahunan`).innerHTML = data?.negeriDashboard?.catuan_tebangan_tahunan ? `${Number(data.negeriDashboard.catuan_tebangan_tahunan).toLocaleString()} Hektar` : '-';

                            dokumens = [];
                            dataPsoh?.senarai_kawasan_lesen.map(x => {
                                if (x.no_rujukan_surat_kelulusan) {
                                    dokumens.push({
                                        'no_rujukan': x.no_rujukan_surat_kelulusan,
                                        'url': '', // TODO:
                                    });
                                }
                            });
                            setContentDocumentModal(dokumens);

                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).innerHTML = '<option value="" selected>Pilihan Daerah Hutan</option>';
                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).insertAdjacentHTML("beforeend", dataPsoh.senarai_daerah_hutan.map(x => `
                                <option value="${x.nama}">${x.nama}</option>
                            `).join(''));

                        } else if (type == 'kawasan-rawatan-silvikultur') {
                            const dataPsoh = await loginAndFetchPsoh(type, filter_by);
                            console.log('data psoh', dataPsoh);

                            const dataGis1 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_RAWATAN_SILVIKULTUR_TANAMAN_MENGAYA/MapServer/3',
                                outFields: ['LUAS_HA', 'DPH', 'KOMPARTMEN'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}' AND RAWATAN = 'TANAMAN MENGAYA'`,
                            });
                            console.log('dataGis1', dataGis1);

                            const dataGis2 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_RAWATAN_SILVIKULTUR_POTONG_AKAR/MapServer/3',
                                outFields: ['LUAS_HA', 'DPH', 'KOMPARTMEN'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}' AND RAWATAN = 'POTONG AKAR'`,
                            });
                            console.log('dataGis2', dataGis2);


                            if (dashboardEl.querySelector(`#luasChart`)) {
                                let res1 = [];
                                if (dataGis1.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataGis1, ({ KOMPARTMEN }) => KOMPARTMEN))
                                        .map(([KOMPARTMEN, records]) => ({ 
                                            KOMPARTMEN, 
                                            LUAS_HA: records.reduce((sum, record) => sum + Number(record.LUAS_HA || 0), 0)
                                        }));
                                }

                                let res2 = [];
                                if (dataGis2.length > 0) {
                                    res2 = Object.entries(Object.groupBy(dataGis2, ({ KOMPARTMEN }) => KOMPARTMEN))
                                        .map(([KOMPARTMEN, records]) => ({ 
                                            KOMPARTMEN, 
                                            LUAS_HA: records.reduce((sum, record) => sum + Number(record.LUAS_HA || 0), 0)
                                        }));
                                }

                                const grouped1 = Object.groupBy(res1, x => x.KOMPARTMEN);
                                const grouped2 = Object.groupBy(res2, x => x.KOMPARTMEN);
                                const KOMPARTMEN = new Set([...Object.keys(grouped1), ...Object.keys(grouped2)]);
                                const chartData = [...KOMPARTMEN].map(KOMPARTMEN => ({
                                    KOMPARTMEN: KOMPARTMEN,
                                    LUAS_TANAMAN_MENGAYA: grouped1[KOMPARTMEN]?.[0]?.LUAS_HA || 0,
                                    LUAS_POTONG_AKAR: grouped2[KOMPARTMEN]?.[0]?.LUAS_HA || 0,
                                }));
                                console.log('chartData', chartData);

                                const labels = chartData.map(x => x.KOMPARTMEN);
                                const data1 = chartData.map(x => Math.round(x.LUAS_TANAMAN_MENGAYA));
                                const data2 = chartData.map(x => Math.round(x.LUAS_POTONG_AKAR));

                                kawasan_silvikultur_luas_chart?.destroy();
                                kawasan_silvikultur_luas_chart = new Chart($(`#${type} #luasChart`), chartjs_config.kawasanRawatanSilvikultur.luasChart);
                                kawasan_silvikultur_luas_chart.data.labels = labels;
                                kawasan_silvikultur_luas_chart.data.datasets[0].data = data1;
                                kawasan_silvikultur_luas_chart.data.datasets[1].data = data2;

                                kawasan_silvikultur_luas_chart.update();
                            }

                            if (dashboardEl.querySelector(`#bilChart`)) {
                                let res1 = [];
                                if (dataGis1.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataGis1, ({ DPH }) => DPH))
                                        .map(([DPH, records]) => ({ DPH, count: records.length }));
                                }

                                let res2 = [];
                                if (dataGis2.length > 0) {
                                    res2 = Object.entries(Object.groupBy(dataGis2, ({ DPH }) => DPH))
                                        .map(([DPH, records]) => ({ DPH, count: records.length }));
                                }

                                const grouped1 = Object.groupBy(res1, x => x.DPH);
                                const grouped2 = Object.groupBy(res2, x => x.DPH);
                                const DPH = new Set([...Object.keys(grouped1), ...Object.keys(grouped2)]);
                                const chartData = [...DPH].map(DPH => ({
                                    DPH: DPH,
                                    COUNT_TANAMAN_MENGAYA: grouped1[DPH]?.[0]?.count || 0,
                                    COUNT_POTONG_AKAR: grouped2[DPH]?.[0]?.count || 0,
                                }));

                                const labels = chartData.map(x => x.DPH);
                                const data1 = chartData.map(x => x.COUNT_TANAMAN_MENGAYA);
                                const data2 = chartData.map(x => x.COUNT_POTONG_AKAR);

                                kawasan_silvikultur_bil_chart?.destroy();
                                kawasan_silvikultur_bil_chart = new Chart($(`#${type} #bilChart`), chartjs_config.kawasanRawatanSilvikultur.bilChart);
                                kawasan_silvikultur_bil_chart.data.labels = labels;
                                kawasan_silvikultur_bil_chart.data.datasets[0].data = data1;
                                kawasan_silvikultur_bil_chart.data.datasets[1].data = data2;

                                kawasan_silvikultur_bil_chart.update();
                            }

                            dashboardEl.querySelector(`#bil-tanaman-mengaya`).innerHTML = dataGis1.length ?? 0;
                            dashboardEl.querySelector(`#luas-tanaman-mengaya`).innerHTML = Math.round(dataGis1.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString();

                            dashboardEl.querySelector(`#bil-potong-akar`).innerHTML = dataGis2.length ?? 0;
                            dashboardEl.querySelector(`#luas-potong-akar`).innerHTML = Math.round(dataGis2.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString();

                            dashboardEl.querySelector(`#nama-negeri`).innerHTML = `MAKLUMAT ${dashboardEl.querySelector(`#filterNegeri`).options[dashboardEl.querySelector(`#filterNegeri`).selectedIndex].text}` ?? '-';

                            dashboardEl.querySelector(`#luas-negeri`).innerHTML = data?.negeriDashboard?.luas_negeri ? `${Number(data.negeriDashboard.luas_negeri).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-hutan`).innerHTML = data?.negeriDashboard?.kawasan_hutan ? `${Number(data.negeriDashboard.kawasan_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-tidak-berhutan`).innerHTML = data?.negeriDashboard?.kawasan_tidak_berhutan ? `${Number(data.negeriDashboard.kawasan_tidak_berhutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#hutan-simpan-kekal`).innerHTML = data?.negeriDashboard?.hutan_simpan_kekal ? `${Number(data.negeriDashboard.hutan_simpan_kekal).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#ladang-hutan`).innerHTML = data?.negeriDashboard?.ladang_hutan ? `${Number(data.negeriDashboard.ladang_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#tanah-kerajaan`).innerHTML = data?.negeriDashboard?.tanah_kerajaan ? `${Number(data.negeriDashboard.tanah_kerajaan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#rizab-hidupan-liar`).innerHTML = data?.negeriDashboard?.rizab_hidupan_liar ? `${Number(data.negeriDashboard.rizab_hidupan_liar).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#catuan-tebangan-tahunan`).innerHTML = data?.negeriDashboard?.catuan_tebangan_tahunan ? `${Number(data.negeriDashboard.catuan_tebangan_tahunan).toLocaleString()} Hektar` : '-';

                            dokumens = [];
                            dataPsoh?.senarai_kawasan_rawatan.map(x => {
                                if (x.no_rujukan_surat_kelulusan) {
                                    dokumens.push({
                                        'no_rujukan': x.no_rujukan_surat_kelulusan,
                                        'url': x.lubang_tanaman_pdf,
                                    });
                                }
                            });

                            setContentDocumentModal(dokumens);

                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).innerHTML = '<option value="" selected>Pilihan Daerah Hutan</option>';
                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).insertAdjacentHTML("beforeend", dataPsoh.senarai_daerah_hutan.map(x => `
                                <option value="${x.nama}">${x.nama}</option>
                            `).join(''));

                        } else if (type == 'kawasan-tanda-pokok') {
                            const dataPsoh = await loginAndFetchPsoh(type, filter_by);
                            console.log('data psoh', dataPsoh);

                            const dataGis1 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_TANDA_POKOK/MapServer/1', // POKOK TEBANGAN
                                outFields: ['KOMPARTMEN', 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis1', dataGis1);
                            
                            const dataGis2 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_TANDA_POKOK/MapServer/2', // POKOK IBU
                                outFields: ['KOMPARTMEN', 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis2', dataGis2);

                            const dataGis3 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_TANDA_POKOK/MapServer/3', // POKOK PERLINDUNGAN
                                outFields: ['KOMPARTMEN', 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis3', dataGis3);

                            const dataGis4 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_TANDA_POKOK/MapServer/8', // KAWASAN KERJA
                                outFields: ['LUAS_HA', 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis4', dataGis4);

                            if (dashboardEl.querySelector(`#bilChart`)) {
                                let res1 = [];
                                if (dataGis1.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataGis1, ({ KOMPARTMEN  }) => KOMPARTMEN ))
                                        .map(([KOMPARTMEN , records]) => ({ KOMPARTMEN , count: records.length }));
                                }

                                let res2 = [];
                                if (dataGis2.length > 0) {
                                    res2 = Object.entries(Object.groupBy(dataGis2, ({ KOMPARTMEN  }) => KOMPARTMEN ))
                                        .map(([KOMPARTMEN , records]) => ({ KOMPARTMEN , count: records.length }));
                                }

                                let res3 = [];
                                if (dataGis3.length > 0) {
                                    res3 = Object.entries(Object.groupBy(dataGis3, ({ KOMPARTMEN  }) => KOMPARTMEN ))
                                        .map(([KOMPARTMEN , records]) => ({ KOMPARTMEN , count: records.length }));
                                }

                                const grouped1 = Object.groupBy(res1, x => x.KOMPARTMEN);
                                const grouped2 = Object.groupBy(res2, x => x.KOMPARTMEN);
                                const grouped3 = Object.groupBy(res3, x => x.KOMPARTMEN);
                                const KOMPARTMEN = new Set([...Object.keys(grouped1), ...Object.keys(grouped2), ...Object.keys(grouped3)]);
                                const chartData = [...KOMPARTMEN].map(KOMPARTMEN => ({
                                    KOMPARTMEN: KOMPARTMEN,
                                    POKOK_TEBANGAN_COUNT: grouped1[KOMPARTMEN]?.[0]?.count ?? 0,
                                    POKOK_IBU_COUNT: grouped2[KOMPARTMEN]?.[0]?.count ?? 0,
                                    POKOK_PERLINDUNGAN_COUNT: grouped3[KOMPARTMEN]?.[0]?.count ?? 0
                                }));
                                console.log('chartData', chartData);


                                const labels = chartData.map(x => x.KOMPARTMEN)
                                const data1 = chartData.map(x => x.POKOK_TEBANGAN_COUNT);
                                const data2 = chartData.map(x => x.POKOK_IBU_COUNT);
                                const data3 = chartData.map(x => x.POKOK_PERLINDUNGAN_COUNT);

                                kawasan_tanda_pokok_peratus_chart?.destroy();
                                kawasan_tanda_pokok_peratus_chart = new Chart($('#kawasan-tanda-pokok #bilChart'), chartjs_config.kawasanTandaPokok.bilChart);
                                kawasan_tanda_pokok_peratus_chart.data.labels = labels;
                                kawasan_tanda_pokok_peratus_chart.data.datasets[0].data = data1;
                                kawasan_tanda_pokok_peratus_chart.data.datasets[1].data = data2;
                                kawasan_tanda_pokok_peratus_chart.data.datasets[2].data = data3;

                                kawasan_tanda_pokok_peratus_chart.update();
                            }

                            if (dashboardEl.querySelector(`#pieChart`)) {
                                let chartData = [];
                                if (dataGis4.length > 0) {
                                    chartData = Object.entries(Object.groupBy([...dataGis4], ({ DPH  }) => DPH ))
                                        .map(([DPH , records]) => ({ DPH , count: records.length }));
                                }

                                console.log('chartData', chartData);

                                const labels = chartData.map(x => x.DPH);
                                const data1 = chartData.map(x => x.count);

                                kawasan_tanda_pokok_pie_chart?.destroy();
                                kawasan_tanda_pokok_pie_chart = new Chart($('#kawasan-tanda-pokok #pieChart'), chartjs_config.kawasanTandaPokok.pieChart);
                                kawasan_tanda_pokok_pie_chart.data.labels = labels;
                                kawasan_tanda_pokok_pie_chart.data.datasets[0].data = data1;

                                kawasan_tanda_pokok_pie_chart.update();
                            }


                            dashboardEl.querySelector(`#bil-kawasan-tanda-pokok`).innerHTML = dataGis1.length + dataGis2.length + dataGis3.length ?? 0;
                            dashboardEl.querySelector(`#total-luas`).innerHTML = Math.round(dataGis4.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString();

                            dashboardEl.querySelector(`#nama-negeri`).innerHTML = `MAKLUMAT ${dashboardEl.querySelector(`#filterNegeri`).options[dashboardEl.querySelector(`#filterNegeri`).selectedIndex].text}` ?? '-';
                            dashboardEl.querySelector(`#luas-negeri`).innerHTML = data?.negeriDashboard?.luas_negeri ? `${Number(data.negeriDashboard.luas_negeri).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-hutan`).innerHTML = data?.negeriDashboard?.kawasan_hutan ? `${Number(data.negeriDashboard.kawasan_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-tidak-berhutan`).innerHTML = data?.negeriDashboard?.kawasan_tidak_berhutan ? `${Number(data.negeriDashboard.kawasan_tidak_berhutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#hutan-simpan-kekal`).innerHTML = data?.negeriDashboard?.hutan_simpan_kekal ? `${Number(data.negeriDashboard.hutan_simpan_kekal).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#ladang-hutan`).innerHTML = data?.negeriDashboard?.ladang_hutan ? `${Number(data.negeriDashboard.ladang_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#tanah-kerajaan`).innerHTML = data?.negeriDashboard?.tanah_kerajaan ? `${Number(data.negeriDashboard.tanah_kerajaan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#rizab-hidupan-liar`).innerHTML = data?.negeriDashboard?.rizab_hidupan_liar ? `${Number(data.negeriDashboard.rizab_hidupan_liar).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#catuan-tebangan-tahunan`).innerHTML = data?.negeriDashboard?.catuan_tebangan_tahunan ? `${Number(data.negeriDashboard.catuan_tebangan_tahunan).toLocaleString()} Hektar` : '-';

                            dokumens = [];
                            dataPsoh?.dokumen_tanda_pokok.map(x => {
                                if (x.no_rujukan_surat_kelulusan) {
                                    dokumens.push({
                                        'no_rujukan': x.no_rujukan_surat_kelulusan,
                                        'url': x.baris_tanam_zip,
                                    });
                                }
                            });
                            setContentDocumentModal(dokumens);

                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).innerHTML = '<option value="" selected>Pilihan Daerah Hutan</option>';
                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).insertAdjacentHTML("beforeend", dataPsoh.senarai_daerah_hutan.map(x => `
                                <option value="${x.nama}">${x.nama}</option>
                            `).join(''));
                            
                        } else if (type == 'sempadan-kawasan-kerja-disahkan') {
                            const dataPsoh = await loginAndFetchPsoh(type, filter_by);
                            console.log('data psoh', dataPsoh);

                            const dataGisPsoh = await fetchDataGisPsoh({
                                FeatureLayer, 
                                kodNegeri: filter_by.kod_negeri,
                                outFields: ["LUAS_HA"],
                            });
                            console.log('data gis psoh', dataGisPsoh);

                            const dataGis1 = await fetchDataGis({
                                FeatureLayer, 
                                url: 'https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_SEMPADAN/MapServer/1',
                                outFields: ["LUAS_HA", 'DPH'],
                                where: `KOD_NEGERI = '${filter_by.kod_negeri}' AND TAHUN = '${filter_by.tahun}'`,
                            });
                            console.log('dataGis1', dataGis1);
                            
                            if (dashboardEl.querySelector(`#bilChart`)) {
                                let res1 = [];
                                if (dataGis1.length > 0) {
                                    res1 = Object.entries(Object.groupBy(dataGis1, ({ DPH }) => DPH))
                                        .map(([DPH, records]) => ({ DPH, count: records.length }));
                                }

                                const labels = res1.map(x => x.DPH);
                                const data1 = res1.map(x => x.count);

                                sempadan_kawasan_kerja_disahkan_bil_hutan_chart?.destroy();
                                sempadan_kawasan_kerja_disahkan_bil_hutan_chart = new Chart($(`#${type} #bilChart`), chartjs_config.sempadanKawasanKerja.bilChart);
                                sempadan_kawasan_kerja_disahkan_bil_hutan_chart.data.labels = labels;
                                sempadan_kawasan_kerja_disahkan_bil_hutan_chart.data.datasets[0].data = data1;

                                sempadan_kawasan_kerja_disahkan_bil_hutan_chart.update();
                            }

                            dashboardEl.querySelector(`#total-bil-sempadan`).innerHTML = Math.round(dataGis1.length).toLocaleString();
                            dashboardEl.querySelector(`#total-bil-hutan`).innerHTML = dataGisPsoh?.length.toLocaleString() ?? 0;

                            dashboardEl.querySelector(`#luas-hutan`).innerHTML = Math.round(dataGisPsoh.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString();
                            dashboardEl.querySelector(`#luas-kawasankerja`).innerHTML = Math.round(dataGis1.map(x => Number(x.LUAS_HA)).reduce((total, x) => total + x, 0)).toLocaleString();

                            dashboardEl.querySelector(`#nama-negeri`).innerHTML = `MAKLUMAT ${dashboardEl.querySelector(`#filterNegeri`).options[dashboardEl.querySelector(`#filterNegeri`).selectedIndex].text}` ?? '-';
                            dashboardEl.querySelector(`#luas-negeri`).innerHTML = data?.negeriDashboard?.luas_negeri ? `${Number(data.negeriDashboard.luas_negeri).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-hutan`).innerHTML = data?.negeriDashboard?.kawasan_hutan ? `${Number(data.negeriDashboard.kawasan_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#kawasan-tidak-berhutan`).innerHTML = data?.negeriDashboard?.kawasan_tidak_berhutan ? `${Number(data.negeriDashboard.kawasan_tidak_berhutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#hutan-simpan-kekal`).innerHTML = data?.negeriDashboard?.hutan_simpan_kekal ? `${Number(data.negeriDashboard.hutan_simpan_kekal).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#ladang-hutan`).innerHTML = data?.negeriDashboard?.ladang_hutan ? `${Number(data.negeriDashboard.ladang_hutan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#tanah-kerajaan`).innerHTML = data?.negeriDashboard?.tanah_kerajaan ? `${Number(data.negeriDashboard.tanah_kerajaan).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#rizab-hidupan-liar`).innerHTML = data?.negeriDashboard?.rizab_hidupan_liar ? `${Number(data.negeriDashboard.rizab_hidupan_liar).toLocaleString()} Hektar` : '-';
                            dashboardEl.querySelector(`#catuan-tebangan-tahunan`).innerHTML = data?.negeriDashboard?.catuan_tebangan_tahunan ? `${Number(data.negeriDashboard.catuan_tebangan_tahunan).toLocaleString()} Hektar` : '-';

                            dokumens = [];
                            dataPsoh?.kawasan_kerja_mengikut_daerah.map(x => {
                                if (x.no_rujukan_surat_kelulusan) {
                                    dokumens.push({
                                        'no_rujukan': x.no_rujukan_surat_kelulusan,
                                        'url': x.pelan_kawasan_kerja_pdf,
                                    });
                                }
                            });
                            setContentDocumentModal(dokumens);

                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).innerHTML = '<option value="" selected>Pilihan Daerah Hutan</option>';
                            document.querySelector(`#dokumen-modal #daerahHutanSelect`).insertAdjacentHTML("beforeend", dataPsoh.senarai_daerah_hutan.map(x => `
                                <option value="${x.nama}">${x.nama}</option>
                            `).join(''));

                        } else {
                            throw new Error('error opening dashboard!');
                        }

                        if (!@json($isMobile)) {
                            const res1 = await storeLaporanAktivitiIntegrasiPsoh({
                                'negeri': dashboardEl.querySelector(`#filterNegeri`).value,
                                'dashboardType': type,
                            });
                        }

                        $('#loading-indicator').modal('hide');
                        $(`#${type}`).modal('show');

                    } catch (xhr) {
                        $('#loading-indicator').modal('hide');
                        console.error(xhr);
                        const errorMsg = xhr?.message || xhr?.responseJSON?.message || 'Ralat tidak diketahui semasa memuatkan dashboard.';
                        alert(`Ralat: ${errorMsg}`);
                    }
                }

                function loadData(dashboardType, filter_by = {}) {
                    return new Promise(function(resolve, reject) {
                        $.ajax({
                            url: "{{ route('dashboards.getAll') }}",
                            type: "GET",
                            data: {
                                type: dashboardType,
                                filter_by: filter_by
                            },
                            success: (res) => resolve(res),
                            error: (err) => reject(err),
                        });
                    });
                }

                function applyFilters() {
                    const daerahHutan = document.querySelector('#daerahHutanSelect').value.toLowerCase();
                    const noRujukan = document.querySelector('#noRujukanInput').value.trim().toLowerCase();

                    let data = [];
                    if (daerahHutan || noRujukan) {
                        filteredDokumens = dokumens.filter(x => {
                            const matchDaerah = !daerahHutan || x.daerah_hutan.toLowerCase() == daerahHutan;
                            const matchNoRujukan = !noRujukan || x.no_rujukan.toLowerCase().includes(noRujukan);
                            
                            return matchDaerah && matchNoRujukan;
                        });
                        setContentDocumentModal(filteredDokumens);
                    } else {
                        setContentDocumentModal(dokumens);
                    }
                    
                }


                document.addEventListener('DOMContentLoaded', () => {
                    const urlParams = new URLSearchParams(window.location.search);
                    const openDashboardId = urlParams.get('open');
                    if (openDashboardId) {
                        openDashboard(openDashboardId);
                    }
                });

                document.querySelectorAll(`[data-button="reset"]`).forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        resetFilter(e);
                    });
                });

                document.querySelectorAll(`[data-button="expand"]`).forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        expandCard(e);
                    });
                });

                document.querySelector('#daerahHutanSelect').addEventListener('change', applyFilters);
                document.querySelector('#noRujukanInput').addEventListener('input', applyFilters);
            });
    </script>

@endsection