@php
    $userNegeri = Auth::user()?->negeris?->kod ?? '01';

    $petunjuks = [
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-purple.svg',
            'desc' => "≥ 1 Pokok berpasaran (Dia. ≥ 60cm)\nS : Seraya, Nemensu, Sengkawang Merah, Meranti Bukit\nM : Meranti Merah Muda\nK : Keruing, Kempas, Kapur, Keladan\nN : Nyatoh, Kedondong, Resak\nO : Lain-lain pokok berpasaran",
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-green.svg',
            'desc' => '≥ 2 Pokok (Dia. ≥ 45cm) DAN ≥ 4 Pokok DMP (Dia. 30-40cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-line-green.svg',
            'desc' => '≥ 2 Pokok (Dia. ≥ 45cm) TETAPI < 4 Pokok DMP (Dia. 30-40cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-blue.svg',
            'desc' => '< 2 Pokok (Dia. ≥ 45cm) TETAPI ≥ 4 Pokok DMP (Dia. 30-40cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-brown.svg',
            'desc' => '≥ 4 Pokok DMP (Dia. 15-30cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-yellow.svg',
            'desc' => '≥ 4 Pokok DMP (Dia. 5-15cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-red.svg',
            'desc' => '≥ 4 Pokok DMP (Tinggi ≥ 150cm, Dia. < 5cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-orange.svg',
            'desc' => '≥ 4 Pokok DMP (Tinggi 15cm - 150cm)',
        ],
        (object) [
            'iconUrl' => 'assets/svgs/dashboards/petunjuk/rectangle-white.svg',
            'desc' => '< 4 Pokok DMP (Tinggi 15cm - 150cm)',
        ],
    ];
@endphp

@pushOnce('css')
    <style>
        label:has(input[name="luasChartTab"]:checked) {
            background-color: #3b82f6;
        }
    </style>
@endPushOnce

<div class="modal" id="inventori-hutan" tabindex="-1">
    <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-accent">
                <h5 class="modal-title fw-bolder fs-22 text-white">DASHBOARD INVENTORI HUTAN</h5>
                <button class="btn-close btn-close-white" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body p-2">

                <div class="layout-container">
                    <!-- left container -->
                    <div class="scrollable space-y" style="grid-row: span 12;">

                        <div class="custom-card p-3">
                            <div class="d-flex justify-content-between mb-2 align-items-center" style="gap: .25rem;">
                                <div class="d-flex align-items-center" style="gap: .25rem;">
                                    <i class="fa-solid fa-filter"></i>
                                    <span class="fs-sm fw-bold">FILTER</span>
                                </div>
                                <div class="fs-sm text-balance" data-button="reset" data-kod-negeri="{{ $userNegeri }}" style="color: #128af9; cursor: pointer;">Reset</div>
                            </div>

                            <select class="form-control form-control-sm mb-2" id="filterNegeri" autocomplete="off">
                                @foreach ($arrNegeri as $negeri)
                                    <option value="{{ $negeri->kodNew }}" {{ $userNegeri == $negeri->kodNew ? 'selected' : '' }}>{{ $negeri->name }}</option>
                                @endforeach
                            </select>

                            <select class="form-control form-control-sm" id="filterTahun" autocomplete="off">
                                @foreach ($arrTahun as $tahun)
                                    <option value="{{ $tahun }}" {{ $tahun == date('Y') ? 'selected' : '' }}>{{ $tahun }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="custom-card p-2">
                            <div class="text-center text-danger fs-4 fw-bold">TERHAD</div>
                        </div>

                        <div class="custom-card" style="position: relative;">
                            <i class="fa fa-expand" data-button="expand" style="position: absolute; top: .5rem; right: .5rem; cursor: pointer;"></i>

                            <div class="fw-bold text-balance px-3 pt-3" id="nama-negeri"></div>

                            <div class="fs-sm p-3">

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Keluasan Negeri</div>
                                    <div class="col-sm-5" id="luas-negeri" style="align-self: center;"></div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Kawasan Berhutan</div>
                                    <div class="col-sm-5" id="kawasan-hutan" style="align-self: center;"></div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Kawasan Tidak Berhutan</div>
                                    <div class="col-sm-5" id="kawasan-tidak-berhutan" style="align-self: center;"></div>
                                </div>

                                <div class="text-center fw-bold text-balance py-2">Sumber Hutan</div>

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Hutan Simpanan Kekal</div>
                                    <div class="col-sm-5" id="hutan-simpan-kekal" style="align-self: center;"></div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Ladang Hutan</div>
                                    <div class="col-sm-5" id="ladang-hutan" style="align-self: center;"></div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Tanah Kerajaan</div>
                                    <div class="col-sm-5" id="tanah-kerajaan" style="align-self: center;"></div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-sm-7 fw-bold text-balance">Rizab Hidupan Liar</div>
                                    <div class="col-sm-5" id="rizab-hidupan-liar" style="align-self: center;"></div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-7 fw-bold text-balance">Catuan Tebangan Tahunan (untuk Hutan Simpanan Kekal)</div>
                                    <div class="col-sm-5" id="catuan-tebangan-tahunan" style="align-self: center;"></div>
                                </div>
                            </div>

                            <div class="p-3" style="border-top: 1px solid #3b82f6;">
                                <div class="fs-sm text-balance" style="color: #128af9;">Sumber: Perangkaan Perhutanan Semenanjung Malaysia Tahun <span id="tahunFooter">-</span></div>
                            </div>
                        </div>

                        <div class="custom-card p-3 text-center">
                            <div class="fw-bold text-balance">BILANGAN SEMPADAN INVENTORI PRE-F</div>
                            <div class="fs-1 fw-bolder color-accent-1" id="total-bil-sempadan-pre-f">-</div>
                        </div>

                        <div class="custom-card p-3 text-center">
                            <div class="fw-bold text-balance">BILANGAN SEMPADAN INVENTORI POST-F</div>
                            <div class="fs-1 fw-bolder color-accent-1" id="total-bil-sempadan-post-f">-</div>
                        </div>

                    </div>

                    <!-- map container -->
                    <div style="grid-column: span 4; grid-row: span 8;">

                        {{-- <div id="mainWindow" class="custom-card p-3">
                            <form enctype="multipart/form-data" method="post" id="uploadForm">
                                <div class="field">
                                    <label class="file-upload">
                                        <span><strong>Tambah Fail</strong></span>
                                        <input type="file" name="file" id="inFile" />
                                    </label>
                                </div>
                            </form>
                            <span class="file-upload-status" style="opacity:1;" id="upload-status"></span>
                            <div id="fileInfo"> </div>
                        </div> --}}

                        <div class="custom-card" id="viewDiv1"></div>

                    </div>

                    <!-- right container -->
                    <div class="scrollable space-y" style="grid-row: span 8;">

                        <div class="custom-card p-3">
                            <div class="fw-bold mb-3">PETUNJUK</div>
                            <div class="fs-sm space-y">
                                @foreach ($petunjuks as $petunjuk)
                                    <div class="d-flex align-items-start" style="gap: 1rem;">
                                        <div style="padding-top: 2px;">
                                            <img src="{{ asset($petunjuk->iconUrl) }}" style="width: 3rem;" />
                                        </div>
                                        <div>{!! nl2br(e($petunjuk->desc)) !!}</div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="custom-card p-3 text-center" style="display: grid; place-content: center;">
                            <button class="btn btn-primary-transparent" onclick="dokumenModal.show()">SENARAI DOKUMEN</button>
                        </div>

                        <div class="custom-card p-2">
                            <div class="text-center text-danger fs-4 fw-bold">TERHAD</div>
                        </div>

                    </div>

                    <!-- bottom chart container-->
                    <div style="grid-column: span 5; grid-row: span 4;">

                        <div class="custom-card p-3 h-100" style="position: relative;">
                            <div class="d-flex align-items-center" style="position: absolute; top: .5rem; right: .5rem; gap: .5rem;">
                                <label class="px-2" style="border: 1px solid white; cursor: pointer;">
                                    <input name="luasChartTab" type="radio" value="pre-f" autocomplete="off" hidden checked>
                                    PRE-F
                                </label>
                                <label class="px-2" style="border: 1px solid white; cursor: pointer;">
                                    <input name="luasChartTab" type="radio" value="post-f" autocomplete="off" hidden>
                                    POST-F
                                </label>
                                <i class="fa fa-expand" data-button="expand" style="cursor: pointer;"></i>
                            </div>
                            <div class="h-100">
                                <canvas class="w-100 h-100" id="luasChartPreF" data-type="pre-f"></canvas>
                                <canvas class="w-100 h-100" id="luasChartPostF" data-type="post-f" hidden></canvas>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@pushOnce('scripts')
    <script>
        document.querySelector(`#inventori-hutan #filterNegeri`).addEventListener('change', (e) => {
            openDashboard('inventori-hutan');
        });

        document.querySelector(`#inventori-hutan #filterTahun`).addEventListener('change', (e) => {
            openDashboard('inventori-hutan');
        });

        loadMap(1, 'inventori-hutan');

        document.querySelectorAll('#inventori-hutan [name="luasChartTab"]').forEach(el => {
            el.addEventListener('change', (e) => {
                const type = e.target.value;
                const luasChartPreF = document.querySelector('#inventori-hutan #luasChartPreF');
                const luasChartPostF = document.querySelector('#inventori-hutan #luasChartPostF');

                luasChartPreF.hidden = true;
                luasChartPostF.hidden = true;

                if (type == 'pre-f') {
                    luasChartPreF.hidden = false;
                } else if (type == 'post-f') {
                    luasChartPostF.hidden = false;
                } else {
                    throw new Error("inventori hutan, invalid type");
                }
            });
        });
    </script>
@endPushOnce