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

<div class="modal" id="kawasan-tanda-pokok" 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 KAWASAN TANDA POKOK</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" style="display: grid; place-content: center;">
                            <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" style="display: grid; place-content: center;">
                            <div class="fw-bold text-balance">BILANGAN TANDA POKOK</div>

                            <div class="d-flex justify-content-center align-items-center gap-2">
                                <img src="{{ asset('assets/img/dashboards/kawasan tanda-pokok/all-blue-tree.webp') }}" style="width: 2rem; aspect-ratio: 1 / 1;" />
                                <div class="fs-1 fw-bolder color-accent-1" id="bil-kawasan-tanda-pokok">-</div>
                            </div>
                        </div>

                        <div class="custom-card p-3">
                            <div class="fw-bold mb-3">PETUNJUK</div>
                            <div class="space-y">
                                <div class="d-flex align-items-center" style="gap: 1rem;">
                                    <img src="{{ asset('assets/img/dashboards/kawasan tanda-pokok/white-tree.webp') }}" style="width: 2rem; aspect-ratio: 1 / 1;" />
                                    <div>POKOK TEBANGAN</div>
                                </div>

                                <div class="d-flex align-items-center" style="gap: 1rem;">
                                    <img src="{{ asset('assets/img/dashboards/kawasan tanda-pokok/yellow-tree.webp') }}" style="width: 2rem; aspect-ratio: 1 / 1;" />
                                    <div>POKOK IBU</div>
                                </div>

                                <div class="d-flex align-items-center" style="gap: 1rem;">
                                    <img src="{{ asset('assets/img/dashboards/kawasan tanda-pokok/blue-tree.webp') }}" style="width: 2rem; aspect-ratio: 1 / 1;" />
                                    <div>POKOK PERLINDUNGAN</div>
                                </div>
                            </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="viewDiv4"></div>

                    </div>

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

                        <div class="custom-card p-3 text-center" style="display: grid; place-content: center;">
                            <div class="fw-bold text-balance">LUAS KAWASAN TANDA POKOK</div>
                            <div class="fs-1 fw-bolder color-accent-1" id="total-luas">-</div>
                            <div class="fs-3 fw-bolder color-accent-1">Hektar</div>
                        </div>

                        <div class="custom-card pt-3 px-3 pb-4" style="min-height: 25rem; position: relative;">
                            <div class="fw-bold text-center text-balance mb-4">BILANGAN KAWASAN TANDA POKOK MENGIKUT DAERAH HUTAN</div>

                            <i class="fa fa-expand" data-button="expand" style="position: absolute; top: .5rem; right: .5rem; cursor: pointer;"></i>
                            <div class="h-100">
                                <canvas class="w-100 h-100" id="pieChart"></canvas>
                            </div>

                            <div class="fs-sm" style="position: absolute; bottom: .5rem; right: .5rem; color: #128af9;">Sumber : Data Digital</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" style="display: grid; place-content: center;">
                            <div class="text-center text-danger fs-4 fw-bold">TERHAD</div>
                        </div>

                    </div>

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

                        <div class="custom-card p-3 h-100" style="position: relative;">
                            <i class="fa fa-expand" data-button="expand" style="position: absolute; top: .5rem; right: .5rem; cursor: pointer;"></i>
                            <div class="h-100">
                                <canvas class="w-100 h-100" id="bilChart"></canvas>
                            </div>
                        </div>

                    </div>

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

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

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

        loadMap(4, 'kawasan-tanda-pokok');
    </script>
@endPushOnce