@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @php
        // $roles sudah dikirim dari controller sebagai array multi-role
        $roles = $roles ?? ['guests'];
    @endphp

    <div class="container-fluid py-4">

        <div class="row mb-4" style="position: relative; z-index: 10;">
            <div class="col-12">
                <div class="d-flex align-items-center" style="gap: 10px;">
                    @if ($has_ticket_access ?? true)
                        <button id="btn-ticketing" onclick="switchDashboard('ticketing')"
                            class="btn btn-sm px-4 py-2 position-relative"
                            style="border-radius:20px;font-weight:600;font-size:13px;
                                        background:linear-gradient(310deg,#028284,#016e70);
                                        color:#fff;border:none;
                                        box-shadow:0 4px 15px rgba(1,110,112,0.4);">
                            MSJ Ticketing
                            @if (!empty($ticket_counter) && $ticket_counter > 0)
                                <span class="pt-barang-counter">
                                    {{ $ticket_counter }}
                                </span>
                            @elseif (!empty($ticket_AP) && $ticket_AP > 0)
                                <span class="pt-ticket-ap">
                                    {{ $ticket_AP }}
                                </span>
                            @endif
                        </button>
                    @endif
                    @if ($has_barang_access ?? true)
                        <button id="btn-permintaan-barang" onclick="switchDashboard('permintaan-barang')"
                            class="btn btn-sm px-4 py-2 position-relative"
                            style="border-radius:20px;font-weight:600;font-size:13px;background:#fff;color:#028284;border:2px solid #016e70;box-shadow:none;">
                            MSJ Permintaan Barang
                            @if (($pt_barang_counter ?? 0) > 0)
                                <span class="pt-barang-counter">
                                    {{ $pt_barang_counter }}
                                </span>
                            @endif
                        </button>
                        <button id="btn-peminjaman-barang" onclick="switchDashboard('peminjaman-barang')"
                            class="btn btn-sm px-4 py-2 position-relative"
                            style="border-radius:20px;font-weight:600;font-size:13px;background:#fff;color:#028284;border:2px solid #016e70;box-shadow:none;">
                            MSJ Peminjaman Barang
                            @if (($pmj_counter ?? 0) > 0)
                                <span class="pt-barang-counter">
                                    {{ $pmj_counter }}
                                </span>
                            @endif
                        </button>
                    @endif
                </div>
            </div>
        </div>
        @if ($has_ticket_access ?? true)
            <div id="dashboard-ticketing">
                @if (in_array('admins', $roles))
                    {{-- DASHBOARD UNTUK ADMINS --}}
                    @include('pages.dashboard.partials.admin-itstaf')
                @elseif(in_array('mis.it', $roles))
                    {{-- DASHBOARD UNTUK MIS.IT (approval ticket) --}}
                    @include('pages.dashboard.partials.misit')
                @else
                    {{-- DASHBOARD UNTUK ITSTAF, HEAD.S, GUESTS (ticket milik sendiri) --}}
                    @include('pages.dashboard.partials.guests')
                @endif
            </div>
        @endif

        @if ($has_barang_access ?? true)
            <div id="dashboard-permintaan-barang" style="display:none;">
                <div class="row mt-2">
                    <div class="col-12">
                        <div class="card mb-4" style="background:linear-gradient(310deg,#028284,#016e70 100%);border:none;">
                            <div class="card-header pb-3 p-3" style="background:transparent;">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 text-white" style="font-size:16px;font-weight:700;">Dashboard MSJ
                                            Permintaan Barang</h6>
                                        <p class="text-sm mb-0" style="color:rgba(255,255,255,0.75);">
                                            <i class="ni ni-bag-17 me-1"></i>
                                            @if (array_intersect($roles, ['admins', 'itstaf']))
                                                Monitoring Permintaan Barang
                                            @elseif(in_array('head.s', $roles))
                                                Monitoring Departemen
                                            @else
                                                Permintaan Barang Saya
                                            @endif
                                            - 3 Bulan Terakhir ({{ now()->subMonths(3)->format('M Y') }} s/d
                                            {{ now()->format('M Y') }})
                                        </p>
                                    </div>
                                    <span class="badge text-white px-3 py-2"
                                        style="background:rgba(255,255,255,0.2);font-size:12px;border-radius:12px;">
                                        <i class="ni ni-time-alarm me-1"></i> {{ now()->format('H:i') }} WIB
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if (array_intersect($roles, ['admins', 'itstaf']))
                    {{-- DASHBOARD PERMINTAAN UNTUK ADMINS & ITSTAF --}}
                    @include('pages.dashboard.partials.permintaan.admin-itstaf')
                @elseif(in_array('head.s', $roles))
                    {{-- DASHBOARD PERMINTAAN UNTUK HEAD.S (termasuk mis.it,head.s) --}}
                    @include('pages.dashboard.partials.permintaan.head')
                @else
                    {{-- DASHBOARD PERMINTAAN UNTUK GUESTS, MIS.IT, ITSTAF tanpa head.s --}}
                    @include('pages.dashboard.partials.permintaan.guests')
                @endif

            </div>

            <div id="dashboard-peminjaman-barang" style="display:none;">
                @if (array_intersect($roles, ['admins', 'itstaf']))
                    {{-- DASHBOARD PEMINJAMAN UNTUK ADMINS & ITSTAF --}}
                    @include('pages.dashboard.partials.peminjaman.admin-itstaf')
                @elseif(in_array('head.s', $roles))
                    {{-- DASHBOARD PEMINJAMAN UNTUK HEAD.S (termasuk mis.it,head.s) --}}
                    @include('pages.dashboard.partials.peminjaman.head')
                @else
                    {{-- DASHBOARD PEMINJAMAN UNTUK GUESTS --}}
                    @include('pages.dashboard.partials.peminjaman.guests')
                @endif
            </div>
        @endif

    </div>
@endsection


@push('js')
    <style>
        .bg-pmj-orange {
            background: linear-gradient(310deg, #e67e22, #d35400) !important;
        }

        .pmj-picker-btn {
            border-color: #f5cba7;
            color: #e67e22;
        }

        .pmj-picker-btn:hover {
            border-color: #e67e22;
            color: #d35400;
        }

        .pmj-picker-btn-year {
            border-color: #f5cba7;
            color: #d35400;
        }

        .pmj-picker-btn-year:hover {
            border-color: #d35400;
            color: #c0392b;
        }

        .prb-month-picker,
        .prb-year-picker {
            position: relative;
            display: inline-block;
        }

        .prb-picker-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 5px 12px;
            border-radius: 8px;
            border: 1.5px solid #c8d6f5;
            background: #fff;
            color: #344767;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all .15s;
            box-shadow: 0 1px 4px rgba(94, 114, 228, .1);
        }

        .prb-picker-btn:hover {
            border-color: #5e72e4;
            color: #5e72e4;
            box-shadow: 0 2px 8px rgba(94, 114, 228, .2);
        }

        .prb-picker-btn-green {
            border-color: #b0ecd4;
            color: #2dce89;
        }

        .prb-picker-btn-green:hover {
            border-color: #2dce89;
            color: #1aab6d;
            box-shadow: 0 2px 8px rgba(45, 206, 137, .2);
        }

        .prb-picker-dropdown {
            display: none;
            position: fixed;
            z-index: 9999;
            background: #fff;
            border-radius: 12px;
            border: 1px solid #e0e7ff;
            box-shadow: 0 8px 32px rgba(94, 114, 228, .15);
            padding: 12px;
            min-width: 220px;
            animation: prb-fadein .15s ease;
        }

        .prb-picker-dropdown.show {
            display: block;
        }

        @keyframes prb-fadein {
            from {
                opacity: 0;
                transform: translateY(-4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .prb-picker-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .prb-picker-year {
            font-size: 13px;
            font-weight: 700;
            color: #344767;
        }

        .prb-picker-nav {
            background: none;
            border: 1px solid #e0e7ff;
            border-radius: 6px;
            width: 26px;
            height: 26px;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            color: #5e72e4;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .15s;
        }

        .prb-picker-nav:hover {
            background: #5e72e4;
            color: #fff;
            border-color: #5e72e4;
        }

        .prb-picker-months {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }

        .prb-picker-years {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }

        .prb-picker-cell {
            padding: 6px 4px;
            text-align: center;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            color: #344767;
            border: 1.5px solid transparent;
            transition: all .12s;
            background: #f8f9fe;
        }

        .prb-picker-cell:hover {
            background: #e0e7ff;
            color: #5e72e4;
            border-color: #c8d6f5;
        }

        .prb-picker-cell.active {
            background: linear-gradient(135deg, #5e72e4, #825ee4);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(94, 114, 228, .35);
        }

        .prb-picker-cell.disabled {
            opacity: .35;
            cursor: not-allowed;
            pointer-events: none;
        }

        .prb-picker-cell.active-green {
            background: linear-gradient(135deg, #2dce89, #11cdef);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(45, 206, 137, .35);
        }

        .pt-barang-counter {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #ef4444;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .pt-ticket-ap {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #ffc107;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .bg-warning-custom {
            background-color: #ffc107 !important;
            color: #000
        }
    </style>
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script src="{{ asset('/') }}assets/js/vendor/echarts.min.js"></script>
    <script src="{{ asset('/') }}assets/js/sweetalert2.all.min.js"></script>
    <script>
        window.toggleCollapse = function(id) {
            var el = document.getElementById(id);
            var icon = document.getElementById('icon-collapse-' + id.replace('collapse-', ''));
            if (!el) return;

            var isHidden = el.style.display === 'none';
            el.style.display = isHidden ? 'block' : 'none';

            if (icon) icon.style.transform = isHidden ? 'rotate(0deg)' : 'rotate(180deg)';

            if (isHidden) {
                setTimeout(function() {
                    if (typeof chartDept !== 'undefined' && chartDept) chartDept.resize();
                    if (typeof chartUsers !== 'undefined' && chartUsers) chartUsers.resize();
                    if (typeof chartBarang !== 'undefined' && chartBarang) chartBarang.resize();
                    if (typeof chartRej !== 'undefined' && chartRej) chartRej.resize();
                    if (typeof chartYearlyBar !== 'undefined' && chartYearlyBar) chartYearlyBar.resize();
                    if (typeof chartYearlyLine !== 'undefined' && chartYearlyLine) chartYearlyLine.resize();

                    if (id === 'collapse-bulanan' && typeof initAllCharts === 'function') {
                        var now = new Date();
                        var val = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0');
                        initAllCharts();
                        if (typeof fetchChartData === 'function') fetchChartData(val);
                    }
                    if (id === 'collapse-pmj-bulanan' && typeof initPmjCharts === 'function') {
                        initPmjCharts();
                    }
                    if (id === 'collapse-pmj-tahunan' && typeof pmjFetchYearly === 'function') {
                        pmjFetchYearly(new Date().getFullYear());
                    }
                }, 100);
            }
        };
        document.addEventListener('DOMContentLoaded', function() {
            (function() {
                var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt', 'Nov',
                    'Des'
                ];
                var monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];

                var now = new Date();
                var curYear = now.getFullYear();
                var curMonth = now.getMonth();
                var selYear = curYear;
                var selMonth = curMonth;
                var pickerYear = curYear;

                function pad(n) {
                    return String(n).padStart(2, '0');
                }

                function renderMonths() {
                    var grid = document.getElementById('bulan-months-grid');
                    if (!grid) return;
                    console.log('[PT-PERMINTAAN] renderMonths() called. pickerYear:', pickerYear, 'curYear:',
                        curYear, 'curMonth:', curMonth);
                    document.getElementById('bulan-year-label').textContent = pickerYear;
                    var html = '';
                    for (var i = 0; i < 12; i++) {
                        var isFuture = (pickerYear > curYear) || (pickerYear === curYear && i > curMonth);
                        var isActive = (pickerYear === selYear && i === selMonth);
                        html += '<div class="prb-picker-cell' +
                            (isActive ? ' active' : '') +
                            (isFuture ? ' disabled' : '') +
                            '" data-m="' + i + '">' + monthNames[i] + '</div>';
                    }
                    grid.innerHTML = html;
                    var cells = grid.querySelectorAll('.prb-picker-cell:not(.disabled)');
                    console.log('[PT-PERMINTAAN] Adding listeners to', cells.length, 'month cells');
                    cells.forEach(function(el, idx) {
                        el.addEventListener('click', function() {
                            var rawM = this.dataset.m;
                            var parsedM = parseInt(rawM);
                            console.log('[PT-PERMINTAAN] MONTH CLICK - Cell index:', idx,
                                'data-m text:', rawM, 'parsed:', parsedM, 'monthNames[' +
                                parsedM + ']:', monthNames[parsedM]);
                            selMonth = parsedM;
                            selYear = pickerYear;
                            var val = selYear + '-' + pad(selMonth + 1);
                            console.log('[PT-PERMINTAAN] FINAL - selMonth:', selMonth,
                                'selYear:', selYear, 'API value:', val);
                            document.getElementById('label-filter-bulan').textContent =
                                monthNamesFull[selMonth] + ' ' + selYear;
                            closeAll();
                            if (typeof initAllCharts === 'function') initAllCharts();
                            fetchChartData(val);
                        });
                    });
                }

                function renderYears() {
                    var grid = document.getElementById('tahun-years-grid');
                    if (!grid) return;
                    console.log('[PT-PERMINTAAN] renderYears() called. Current selTahun:', selTahun);
                    var html = '';
                    for (var y = curYear; y >= curYear - 8; y--) {
                        var isActive = (y === selTahun);
                        html += '<div class="prb-picker-cell' + (isActive ? ' active-green' : '') +
                            '" data-y="' + y + '">' + y + '</div>';
                    }
                    grid.innerHTML = html;
                    var cells = grid.querySelectorAll('.prb-picker-cell');
                    console.log('[PT-PERMINTAAN] Adding listeners to', cells.length, 'year cells');
                    cells.forEach(function(el, idx) {
                        el.addEventListener('click', function() {
                            var rawY = this.dataset.y;
                            var parsedY = parseInt(rawY);
                            console.log('[PT-PERMINTAAN] YEAR CLICK - Cell index:', idx,
                                'data-y text:', rawY, 'parsed:', parsedY);
                            selTahun = parsedY;
                            console.log('[PT-PERMINTAAN] FINAL - selTahun:', selTahun);
                            document.getElementById('label-filter-tahun').textContent =
                                selTahun;
                            closeAll();
                            fetchYearlyData(selTahun);
                        });
                    });
                }

                var selTahun = curYear;

                function closeAll() {
                    var dd1 = document.getElementById('dropdown-filter-bulan');
                    var dd2 = document.getElementById('dropdown-filter-tahun');
                    if (dd1) dd1.classList.remove('show');
                    if (dd2) dd2.classList.remove('show');
                }

                var btnBulan = document.getElementById('btn-filter-bulan');
                if (btnBulan) {
                    btnBulan.addEventListener('click', function(e) {
                        e.stopPropagation();
                        console.log('[PT-PERMINTAAN] btn-filter-bulan clicked');
                        var dd = document.getElementById('dropdown-filter-bulan');
                        var isOpen = dd.classList.contains('show');
                        closeAll();
                        if (!isOpen) {
                            dd.classList.add('show');
                            var rect = btnBulan.getBoundingClientRect();
                            dd.style.top = (rect.bottom + 6) + 'px';
                            dd.style.left = (rect.right - 220) + 'px';
                            renderMonths();
                            if (typeof initAllCharts === 'function') initAllCharts();
                        }
                    });
                }

                var btnPrev = document.getElementById('bulan-prev');
                var btnNext = document.getElementById('bulan-next');
                if (btnPrev) {
                    btnPrev.addEventListener('click', function(e) {
                        e.stopPropagation();
                        console.log('[PT-PERMINTAAN] bulan-prev clicked. pickerYear before:',
                            pickerYear);
                        if (pickerYear > curYear - 5) {
                            pickerYear--;
                            console.log('[PT-PERMINTAAN] pickerYear after:', pickerYear);
                            renderMonths();
                        }
                    });
                }
                if (btnNext) {
                    btnNext.addEventListener('click', function(e) {
                        e.stopPropagation();
                        console.log('[PT-PERMINTAAN] bulan-next clicked. pickerYear before:',
                            pickerYear);
                        if (pickerYear < curYear) {
                            pickerYear++;
                            console.log('[PT-PERMINTAAN] pickerYear after:', pickerYear);
                            renderMonths();
                        }
                    });
                }

                var btnTahun = document.getElementById('btn-filter-tahun');
                if (btnTahun) {
                    btnTahun.addEventListener('click', function(e) {
                        e.stopPropagation();
                        var dd = document.getElementById('dropdown-filter-tahun');
                        var isOpen = dd.classList.contains('show');
                        closeAll();
                        if (!isOpen) {
                            dd.classList.add('show');
                            var rect = btnTahun.getBoundingClientRect();
                            dd.style.top = (rect.bottom + 6) + 'px';
                            dd.style.left = (rect.right - 220) + 'px';
                            renderYears();
                        }
                    });
                }

                document.addEventListener('click', function(e) {
                    var mp = document.querySelector('.prb-month-picker');
                    var yp = document.querySelector('.prb-year-picker');
                    if (mp && !mp.contains(e.target)) {
                        var dd = document.getElementById('dropdown-filter-bulan');
                        if (dd) dd.classList.remove('show');
                    }
                    if (yp && !yp.contains(e.target)) {
                        var dd = document.getElementById('dropdown-filter-tahun');
                        if (dd) dd.classList.remove('show');
                    }
                });

            })();
        });
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById("chart-line");
            if (!canvas) return;
            const ctx = canvas.getContext("2d");
            const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
            gradientStroke.addColorStop(1, 'rgba(251,99,64,0.2)');
            gradientStroke.addColorStop(0.2, 'rgba(251,99,64,0)');
            gradientStroke.addColorStop(0, 'rgba(251,99,64,0)');
            new Chart(ctx, {
                type: "line",
                data: {
                    labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    datasets: [{
                        label: "Mobile apps",
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 0,
                        borderColor: "#fb6340",
                        backgroundColor: gradientStroke,
                        fill: true,
                        data: [50, 40, 300, 220, 500, 250, 400, 230, 500]
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    scales: {
                        y: {
                            grid: {
                                display: true
                            },
                            ticks: {
                                color: '#8898aa'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#8898aa'
                            }
                        }
                    }
                }
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            window.switchDashboard = function(type) {
                const ticketing = document.getElementById('dashboard-ticketing');
                const permintaan = document.getElementById('dashboard-permintaan-barang');
                const peminjaman = document.getElementById('dashboard-peminjaman-barang');
                const btnTicketing = document.getElementById('btn-ticketing');
                const btnPermintaan = document.getElementById('btn-permintaan-barang');
                const btnPeminjaman = document.getElementById('btn-peminjaman-barang');

                if (ticketing) ticketing.style.display = 'none';
                if (permintaan) permintaan.style.display = 'none';
                if (peminjaman) peminjaman.style.display = 'none';

                [btnTicketing, btnPermintaan, btnPeminjaman].forEach(function(b) {
                    if (!b) return;
                    b.style.background = '#fff';
                    b.style.color = '#028284';
                    b.style.border = '2px solid #016e70';
                    b.style.boxShadow = 'none';
                });

                var activeBtn = null;
                if (type === 'ticketing') {
                    if (ticketing) ticketing.style.display = 'block';
                    activeBtn = btnTicketing;
                } else if (type === 'permintaan-barang') {
                    if (permintaan) permintaan.style.display = 'block';
                    activeBtn = btnPermintaan;
                    initAllCharts();
                } else if (type === 'peminjaman-barang') {
                    if (peminjaman) peminjaman.style.display = 'block';
                    activeBtn = btnPeminjaman;
                    initPmjCharts();
                }

                if (activeBtn) {
                    activeBtn.style.background = 'linear-gradient(310deg,#028284,#016e70)';
                    activeBtn.style.color = '#fff';
                    activeBtn.style.border = 'none';
                    activeBtn.style.boxShadow = '0 4px 15px rgba(1,110,112,0.4)';
                }
            };

            // Default tab berdasarkan akses
            @if ($has_ticket_access ?? true)
                switchDashboard('ticketing');
            @else
                switchDashboard('permintaan-barang');
            @endif
        });

        window.confirmComplete = function(fId) {
            Swal.fire({
                title: 'Konfirmasi Complete',
                text: 'Tandai permintaan ini sebagai selesai? Stock barang akan dikurangi!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Complete',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#19a974',
                cancelButtonColor: '#6c757d'
            }).then(r => {
                if (r.isConfirmed) document.getElementById(fId).submit();
            });
        };
    </script>

    @php
        // $roles sudah dikirim dari controller sebagai array multi-role
        // Hanya admins/itstaf yang dapat chart admin, bukan head.s atau mis.it
        $isAdminChartRole = (bool) array_intersect($roles, ['admins', 'itstaf']);
    @endphp

    @if ($isAdminChartRole)
        <script>
            var chartYearlyBar = null;
            var chartYearlyLine = null;
            var yearlyInitialized = false;

            var lineColors = [
                '#5e72e4', '#2dce89', '#fb6340', '#11cdef', '#f5365c',
                '#ffd600', '#825ee4', '#8392ab', '#344767', '#2dce89'
            ];

            var monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt', 'Nov', 'Des'];

            function buildYearlyBar(data, tahun) {
                return {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: monthLabels,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0',
                                type: 'dashed'
                            }
                        }
                    },
                    series: [{
                        type: 'bar',
                        barMaxWidth: 35,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#5e72e4'
                                    },
                                    {
                                        offset: 1,
                                        color: '#825ee4'
                                    }
                                ]
                            },
                            borderRadius: [4, 4, 0, 0]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#344767',
                            fontSize: 10,
                            formatter: function(p) {
                                return p.value > 0 ? p.value : '';
                            }
                        },
                        data: data
                    }]
                };
            }

            function buildYearlyLine(deptNames, seriesData) {
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: deptNames,
                        bottom: 0,
                        textStyle: {
                            fontSize: 9,
                            color: '#344767'
                        },
                        type: 'scroll'
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: monthLabels,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0',
                                type: 'dashed'
                            }
                        }
                    },
                    series: seriesData.map((s, i) => ({
                        name: s.name,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 2,
                            color: lineColors[i % lineColors.length]
                        },
                        itemStyle: {
                            color: lineColors[i % lineColors.length]
                        },
                        data: s.data
                    }))
                };
            }

            function initYearlyCharts(data) {
                if (!yearlyInitialized) {
                    chartYearlyBar = echarts.init(document.getElementById('chart-yearly-bar'));
                    chartYearlyLine = echarts.init(document.getElementById('chart-yearly-line'));
                    yearlyInitialized = true;
                    window.addEventListener('resize', function() {
                        chartYearlyBar.resize();
                        chartYearlyLine.resize();
                    });
                }
                chartYearlyBar.setOption(buildYearlyBar(data.monthly_bar, data.tahun), true);
                chartYearlyLine.setOption(buildYearlyLine(data.dept_names, data.dept_series), true);

                document.getElementById('label-yearly-bar').textContent = data.tahun;
                document.getElementById('label-yearly-line').textContent = data.tahun;
            }

            function fetchYearlyData(tahun) {
                var loading = document.getElementById('yearly-loading');
                loading.style.display = 'inline';

                fetch('{{ url('dashboard/chart-yearly') }}?tahun=' + tahun, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        }
                    })
                    .then(r => r.json())
                    .then(data => {
                        loading.style.display = 'none';
                        if (data.error) {
                            console.error(data.error);
                            return;
                        }
                        initYearlyCharts(data);
                    })
                    .catch(err => {
                        loading.style.display = 'none';
                        console.error('Yearly fetch error:', err);
                    });
            }
            var chartDept = null;
            var chartUsers = null;
            var chartBarang = null;
            var chartRej = null;
            var chartsInitialized = false;

            var gradColors = ['#5e72e4', '#825ee4', '#11cdef', '#2dce89', '#fb6340', '#f5365c', '#ffd600', '#adb5bd', '#344767',
                '#8392ab'
            ];

            @php
                $deptNames = ($chart_per_dept ?? collect())->pluck('dept_nama')->toArray();
                $deptValues = ($chart_per_dept ?? collect())->pluck('total')->toArray();
                $userNames = ($chart_top_users ?? collect())->pluck('user_nama')->toArray();
                $userValues = ($chart_top_users ?? collect())->pluck('total')->toArray();
                $barangNames = ($chart_top_barang ?? collect())->pluck('nama_barang')->toArray();
                $barangValues = ($chart_top_barang ?? collect())->pluck('total_qty')->toArray();
                $rejNames = ($chart_top_rejected_barang ?? collect())->pluck('nama_barang')->toArray();
                $rejValues = ($chart_top_rejected_barang ?? collect())->pluck('total_reject')->toArray();
            @endphp

            var initData = {
                deptNames: @json($deptNames),
                deptValues: @json($deptValues),
                userNames: @json($userNames),
                userValues: @json($userValues),
                barangNames: @json($barangNames),
                barangValues: @json($barangValues),
                rejNames: @json($rejNames),
                rejValues: @json($rejValues),
            };

            function buildOptionPie(names, values) {
                return {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: '5%',
                        top: 'center',
                        textStyle: {
                            fontSize: 11,
                            color: '#344767'
                        }
                    },
                    series: [{
                        name: 'Permintaan',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['38%', '50%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },
                        data: names.length > 0 ?
                            names.map((n, i) => ({
                                name: n,
                                value: values[i],
                                itemStyle: {
                                    color: gradColors[i % gradColors.length]
                                }
                            })) : [{
                                name: 'Tidak ada data',
                                value: 0
                            }]
                    }]
                };
            }

            function buildOptionHBar(names, values, colorStart, colorEnd) {
                return {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0',
                                type: 'dashed'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: names.length > 0 ? names : ['Tidak ada data'],
                        axisLabel: {
                            color: '#344767',
                            fontSize: 10
                        }
                    },
                    series: [{
                        type: 'bar',
                        barMaxWidth: 28,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                        offset: 0,
                                        color: colorStart
                                    },
                                    {
                                        offset: 1,
                                        color: colorEnd
                                    }
                                ]
                            },
                            borderRadius: [0, 4, 4, 0]
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#344767',
                            fontSize: 10
                        },
                        data: values.length > 0 ? values : [0]
                    }]
                };
            }

            function initAllCharts() {
                if (chartsInitialized) return;
                chartsInitialized = true;

                var panelBulanan = document.getElementById('collapse-bulanan');
                var wasHidden = panelBulanan && panelBulanan.style.display === 'none';
                if (wasHidden) panelBulanan.style.visibility = 'hidden';
                if (wasHidden) panelBulanan.style.display = 'block';

                chartDept = echarts.init(document.getElementById('chart-per-dept'));
                chartUsers = echarts.init(document.getElementById('chart-top-users'));
                chartBarang = echarts.init(document.getElementById('chart-top-barang'));
                chartRej = echarts.init(document.getElementById('chart-top-rejected'));

                if (wasHidden) panelBulanan.style.display = 'none';
                if (wasHidden) panelBulanan.style.visibility = '';

                chartDept.setOption(buildOptionPie(initData.deptNames, initData.deptValues));
                chartUsers.setOption(buildOptionHBar(initData.userNames, initData.userValues, '#5e72e4', '#825ee4'));
                chartBarang.setOption(buildOptionHBar(initData.barangNames, initData.barangValues, '#2dce89', '#11cdef'));
                chartRej.setOption(buildOptionHBar(initData.rejNames, initData.rejValues, '#f5365c', '#fb6340'));

                window.addEventListener('resize', function() {
                    chartDept.resize();
                    chartUsers.resize();
                    chartBarang.resize();
                    chartRej.resize();
                });

                fetchYearlyData({{ now()->year }});
            }


            function fetchChartData(bulan) {
                console.log('[PT-PERMINTAAN] fetchChartData() called with bulan:', bulan);
                var loading = document.getElementById('chart-loading');
                if (loading) loading.style.display = 'inline';

                fetch('{{ url('dashboard/chart-data') }}?bulan=' + bulan, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        }
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (loading) loading.style.display = 'none';
                        if (data.error) {
                            console.error('[PT-PERMINTAAN] Error:', data.error);
                            return;
                        }

                        console.log('[PT-PERMINTAAN] API Response - bulan_label:', data.bulan_label);
                        var label = data.bulan_label;
                        document.getElementById('label-dept').textContent = label;
                        document.getElementById('label-users').textContent = label;
                        document.getElementById('label-barang').textContent = label;
                        document.getElementById('label-rejected').textContent = label;

                        if (!chartsInitialized) initAllCharts();

                        chartDept.setOption(buildOptionPie(data.per_dept.names, data.per_dept.values));
                        chartUsers.setOption(buildOptionHBar(data.top_users.names, data.top_users.values, '#5e72e4',
                            '#825ee4'));
                        chartBarang.setOption(buildOptionHBar(data.top_barang.names, data.top_barang.values, '#2dce89',
                            '#11cdef'));
                        chartRej.setOption(buildOptionHBar(data.top_rejected.names, data.top_rejected.values, '#f5365c',
                            '#fb6340'));
                    })
                    .catch(err => {
                        if (loading) loading.style.display = 'none';
                        console.error('Fetch error:', err);
                    });
            }
        </script>
    @else
        <script>
            function initAllCharts() {}

            function initPmjCharts() {}
        </script>
    @endif
    <script>
        @if ($isAdminChartRole)
            @php
                $pmjDeptNames = ($pmj_chart_per_dept ?? collect())->pluck('dept_nama')->toArray();
                $pmjDeptValues = ($pmj_chart_per_dept ?? collect())->pluck('total')->toArray();

                $pmjUserNames = ($pmj_chart_top_users ?? collect())->pluck('user_nama')->toArray();
                $pmjUserValues = ($pmj_chart_top_users ?? collect())->pluck('total')->toArray();

                $pmjBarangNames = ($pmj_chart_top_barang ?? collect())->pluck('nama_barang')->toArray();
                $pmjBarangVals = ($pmj_chart_top_barang ?? collect())->pluck('total_qty')->toArray();

                $pmjStatusLabels = ($pmj_chart_status ?? collect())
                    ->pluck('status')
                    ->map(
                        fn($s) => match ($s) {
                            'entry' => 'Entry',
                            'proposed' => 'Proposed',
                            'approve' => 'Approve',
                            'on_progress' => 'On Progress',
                            'borrowed' => 'Dipinjam',
                            'completed' => 'Selesai',
                            'rejected' => 'Rejected',
                            'revisi' => 'Revisi',
                            default => ucfirst($s),
                        },
                    )
                    ->toArray();
                $pmjStatusValues = ($pmj_chart_status ?? collect())->pluck('total')->toArray();
            @endphp

            var pmjInitData = {
                deptNames: @json($pmjDeptNames),
                deptValues: @json($pmjDeptValues),
                userNames: @json($pmjUserNames),
                userValues: @json($pmjUserValues),
                barangNames: @json($pmjBarangNames),
                barangValues: @json($pmjBarangVals),
                statusLabels: @json($pmjStatusLabels),
                statusValues: @json($pmjStatusValues),
            };

            var pmjChartDept = null,
                pmjChartUsers = null,
                pmjChartBarang = null,
                pmjChartStatus = null;
            var pmjChartYearlyBar = null,
                pmjChartYearlyLine = null;
            var pmjBulananInit = false,
                pmjYearlyInit = false;

            var pmjGradColors = ['#e67e22', '#d35400', '#f39c12', '#eb984e', '#fad7a0',
                '#2dce89', '#11cdef', '#5e72e4', '#f5365c', '#825ee4'
            ];
            var pmjLineColors = ['#e67e22', '#5e72e4', '#2dce89', '#f5365c', '#11cdef',
                '#ffd600', '#825ee4', '#fb6340', '#8392ab', '#2dce89'
            ];
            var monthLabelsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt', 'Nov', 'Des'];


            var now = new Date();
            var curYear = now.getFullYear();
            var curMonth = now.getMonth();

            function pad(n) {
                return String(n).padStart(2, '0');
            }

            function pmjBuildPie(names, values, title) {
                return {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: '5%',
                        top: 'center',
                        textStyle: {
                            fontSize: 11,
                            color: '#344767'
                        }
                    },
                    series: [{
                        name: title || '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['38%', '50%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },
                        data: names.length > 0 ?
                            names.map((n, i) => ({
                                name: n,
                                value: values[i],
                                itemStyle: {
                                    color: pmjGradColors[i % pmjGradColors.length]
                                }
                            })) : [{
                                name: 'Tidak ada data',
                                value: 0
                            }]
                    }]
                };
            }

            function pmjBuildHBar(names, values) {
                return {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0',
                                type: 'dashed'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: names.length > 0 ? names : ['Tidak ada data'],
                        axisLabel: {
                            color: '#344767',
                            fontSize: 10
                        }
                    },
                    series: [{
                        type: 'bar',
                        barMaxWidth: 28,
                        itemStyle: {
                            borderRadius: [0, 4, 4, 0]
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#344767',
                            fontSize: 10
                        },
                        data: values.length > 0 ? values.map((v, i) => ({
                            value: v,
                            itemStyle: {
                                color: pmjGradColors[i % pmjGradColors.length]
                            }
                        })) : [{
                            value: 0,
                            itemStyle: {
                                color: '#e67e22'
                            }
                        }]
                    }]
                };
            }

            function pmjBuildYearBar(data) {
                return {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: monthLabelsShort,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0',
                                type: 'dashed'
                            }
                        }
                    },
                    series: [{
                        type: 'bar',
                        barMaxWidth: 35,
                        itemStyle: {
                            borderRadius: [4, 4, 0, 0]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#344767',
                            fontSize: 10,
                            formatter: function(p) {
                                return p.value > 0 ? p.value : '';
                            }
                        },
                        data: data.map((d, i) => ({
                            value: d,
                            itemStyle: {
                                color: pmjGradColors[i % pmjGradColors.length]
                            }
                        }))
                    }]
                };
            }

            function pmjBuildYearLine(deptNames, seriesData) {
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: deptNames,
                        bottom: 0,
                        textStyle: {
                            fontSize: 9,
                            color: '#344767'
                        },
                        type: 'scroll'
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: monthLabelsShort,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: '#8898aa',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0',
                                type: 'dashed'
                            }
                        }
                    },
                    series: seriesData.map((s, i) => ({
                        name: s.name,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 2,
                            color: pmjLineColors[i % pmjLineColors.length]
                        },
                        itemStyle: {
                            color: pmjLineColors[i % pmjLineColors.length]
                        },
                        data: s.data
                    }))
                };
            }

            function initPmjCharts() {
                if (pmjBulananInit) return;

                var panelBulanan = document.getElementById('collapse-pmj-bulanan');
                var wasHidden = panelBulanan && panelBulanan.style.display === 'none';
                if (wasHidden) {
                    panelBulanan.style.visibility = 'hidden';
                    panelBulanan.style.display = 'block';
                }

                pmjChartDept = echarts.init(document.getElementById('pmj-chart-per-dept'));
                pmjChartUsers = echarts.init(document.getElementById('pmj-chart-top-users'));
                pmjChartBarang = echarts.init(document.getElementById('pmj-chart-top-barang'));
                pmjChartStatus = echarts.init(document.getElementById('pmj-chart-status'));
                pmjChartYearlyBar = echarts.init(document.getElementById('pmj-chart-yearly-bar'));
                pmjChartYearlyLine = echarts.init(document.getElementById('pmj-chart-yearly-line'));

                if (wasHidden) {
                    panelBulanan.style.display = 'none';
                    panelBulanan.style.visibility = '';
                }

                pmjChartDept.setOption(pmjBuildPie(pmjInitData.deptNames, pmjInitData.deptValues, 'Peminjaman'));
                pmjChartUsers.setOption(pmjBuildHBar(pmjInitData.userNames, pmjInitData.userValues));
                pmjChartBarang.setOption(pmjBuildHBar(pmjInitData.barangNames, pmjInitData.barangValues));
                pmjChartStatus.setOption(pmjBuildPie(pmjInitData.statusLabels, pmjInitData.statusValues, 'Status'));

                pmjBulananInit = true;
                pmjYearlyInit = true;

                window.addEventListener('resize', function() {
                    [pmjChartDept, pmjChartUsers, pmjChartBarang, pmjChartStatus,
                        pmjChartYearlyBar, pmjChartYearlyLine
                    ]
                    .forEach(function(c) {
                        if (c) c.resize();
                    });
                });

                pmjFetchYearly({{ now()->year }});
                var currentBulan = pad(curMonth + 1);
                var currentTahun = curYear;
                pmjFetchBulanan(currentTahun + '-' + currentBulan);
            }

            function pmjFetchBulanan(bulan) {
                console.log('[PMJ-PEMINJAMAN] pmjFetchBulanan() called with bulan:', bulan);
                fetch('{{ url('dashboard/pmj-chart-data') }}?bulan=' + bulan, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data.error) {
                            console.error('[PMJ-PEMINJAMAN] Error:', data.error);
                            return;
                        }
                        console.log('[PMJ-PEMINJAMAN] API Response - bulan_label:', data.bulan_label);
                        var label = data.bulan_label;
                        ['pmj-label-dept', 'pmj-label-users', 'pmj-label-barang', 'pmj-label-status']
                        .forEach(function(id) {
                            var el = document.getElementById(id);
                            if (el) el.textContent = label;
                        });

                        if (!pmjBulananInit) initPmjCharts();
                        pmjChartDept.setOption(pmjBuildPie(data.per_dept.names, data.per_dept.values, 'Peminjaman'));
                        pmjChartUsers.setOption(pmjBuildHBar(data.top_users.names, data.top_users.values));
                        pmjChartBarang.setOption(pmjBuildHBar(data.top_barang.names, data.top_barang.values));
                        pmjChartStatus.setOption(pmjBuildPie(data.status.labels, data.status.values, 'Status'));
                    })
                    .catch(err => console.error('PMJ Bulanan fetch error:', err));
            }

            function pmjFetchYearly(tahun) {
                var loading = document.getElementById('pmj-yearly-loading');
                if (loading) loading.style.display = 'inline';

                fetch('{{ url('dashboard/pmj-chart-yearly') }}?tahun=' + tahun, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (loading) loading.style.display = 'none';
                        if (data.error) {
                            console.error('PMJ Yearly data error:', data.error);
                            return;
                        }

                        if (!pmjChartYearlyBar || !pmjChartYearlyLine) {
                            pmjChartYearlyBar = echarts.init(document.getElementById('pmj-chart-yearly-bar'));
                            pmjChartYearlyLine = echarts.init(document.getElementById('pmj-chart-yearly-line'));
                        }

                        if (pmjChartYearlyBar) {
                            pmjChartYearlyBar.setOption(pmjBuildYearBar(data.monthly_bar), true);
                            pmjChartYearlyBar.resize();
                        }
                        if (pmjChartYearlyLine) {
                            pmjChartYearlyLine.setOption(pmjBuildYearLine(data.dept_names, data.dept_series), true);
                            pmjChartYearlyLine.resize();
                        }

                        var lblBar = document.getElementById('pmj-label-yearly-bar');
                        var lblLine = document.getElementById('pmj-label-yearly-line');
                        if (lblBar) lblBar.textContent = data.tahun;
                        if (lblLine) lblLine.textContent = data.tahun;
                    })
                    .catch(err => {
                        if (loading) loading.style.display = 'none';
                        console.error('PMJ Yearly fetch error:', err);
                    });
            }

            document.addEventListener('DOMContentLoaded', function() {
                (function() {
                    var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt',
                        'Nov', 'Des'
                    ];
                    var monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                    ];
                    var selYear = curYear,
                        selMonth = curMonth,
                        pickerYear = curYear,
                        selTahun = curYear;

                    function renderMonths() {
                        var grid = document.getElementById('pmj-bulan-months-grid');
                        if (!grid) return;
                        console.log('[PMJ-PEMINJAMAN] renderMonths() called. pickerYear:', pickerYear,
                            'curYear:', curYear, 'curMonth:', curMonth);
                        console.log('[PMJ-PEMINJAMAN] Current selMonth:', selMonth, 'selYear:', selYear);

                        var newGrid = grid.cloneNode(false);
                        grid.parentNode.replaceChild(newGrid, grid);
                        grid = newGrid;

                        document.getElementById('pmj-bulan-year-label').textContent = pickerYear;
                        var html = '';
                        for (var i = 0; i < 12; i++) {
                            var isFuture = (pickerYear > curYear) || (pickerYear === curYear && i > curMonth);
                            var isActive = (pickerYear === selYear && i === selMonth);
                            html += '<div class="prb-picker-cell' + (isActive ? ' active' : '') + (isFuture ?
                                ' disabled' : '') + '" data-m="' + i + '">' + monthNames[i] + '</div>';
                        }
                        grid.innerHTML = html;

                        var cells = grid.querySelectorAll('.prb-picker-cell:not(.disabled)');
                        console.log('[PMJ-PEMINJAMAN] Adding listeners to', cells.length, 'month cells');
                        cells.forEach(function(el, idx) {
                            el.addEventListener('click', function(e) {
                                e.stopPropagation();
                                var rawM = this.getAttribute('data-m');
                                var monthIndex = parseInt(rawM);
                                console.log('[PMJ-PEMINJAMAN] MONTH CLICK - Cell index:', idx,
                                    'data-m text:', rawM, 'parsed:', monthIndex,
                                    'monthNames[' + monthIndex + ']:', monthNames[
                                        monthIndex]);
                                if (isNaN(monthIndex) || monthIndex < 0 || monthIndex > 11) {
                                    console.error('[PMJ-PEMINJAMAN] Invalid month index:',
                                        monthIndex);
                                    return;
                                }
                                selMonth = monthIndex;
                                selYear = pickerYear;
                                var val = selYear + '-' + pad(selMonth + 1);
                                console.log('[PMJ-PEMINJAMAN] FINAL - selMonth:', selMonth,
                                    'selYear:', selYear, 'API value:', val);
                                document.getElementById('pmj-label-filter-bulan').textContent =
                                    monthNamesFull[selMonth] + ' ' + selYear;
                                closeAll();
                                if (!pmjBulananInit) {
                                    initPmjCharts();
                                }
                                pmjFetchBulanan(val);
                            });
                        });
                    }

                    function renderYears() {
                        var grid = document.getElementById('pmj-tahun-years-grid');
                        if (!grid) return;
                        console.log('[PMJ-PEMINJAMAN] renderYears() called. Current selTahun:', selTahun);

                        var newGrid = grid.cloneNode(false);
                        grid.parentNode.replaceChild(newGrid, grid);
                        grid = newGrid;

                        var html = '';
                        for (var y = curYear; y >= curYear - 8; y--) {
                            html += '<div class="prb-picker-cell' + (y === selTahun ? ' active-pmj-orange' :
                                '') + '" data-y="' + y + '">' + y + '</div>';
                        }
                        grid.innerHTML = html;
                        var cells = grid.querySelectorAll('.prb-picker-cell');
                        console.log('[PMJ-PEMINJAMAN] Adding listeners to', cells.length, 'year cells');
                        cells.forEach(function(el, idx) {
                            el.addEventListener('click', function(e) {
                                e.stopPropagation();
                                var rawY = this.getAttribute('data-y');
                                var parsedY = parseInt(rawY);
                                console.log('[PMJ-PEMINJAMAN] YEAR CLICK - Cell index:', idx,
                                    'data-y text:', rawY, 'parsed:', parsedY);
                                selTahun = parsedY;
                                console.log('[PMJ-PEMINJAMAN] FINAL - selTahun:', parsedY);
                                document.getElementById('pmj-label-filter-tahun').textContent =
                                    selTahun;
                                closeAll();
                                pmjFetchYearly(selTahun);
                            });
                        });
                    }

                    function closeAll() {
                        var dd1 = document.getElementById('pmj-dropdown-filter-bulan');
                        var dd2 = document.getElementById('pmj-dropdown-filter-tahun');
                        if (dd1) dd1.classList.remove('show');
                        if (dd2) dd2.classList.remove('show');
                    }

                    var btnBulan = document.getElementById('pmj-btn-filter-bulan');
                    if (btnBulan) {
                        btnBulan.addEventListener('click', function(e) {
                            e.stopPropagation();
                            console.log('[PMJ-PEMINJAMAN] pmj-btn-filter-bulan clicked');
                            var dd = document.getElementById('pmj-dropdown-filter-bulan');
                            if (!dd) return;
                            var isOpen = dd.classList.contains('show');
                            closeAll();
                            if (!isOpen) {
                                dd.classList.add('show');
                                var rect = btnBulan.getBoundingClientRect();
                                dd.style.top = (rect.bottom + 6) + 'px';
                                dd.style.left = (rect.right - 220) + 'px';
                                renderMonths();
                            }
                        });
                    }
                    var btnPrev = document.getElementById('pmj-bulan-prev'),
                        btnNext = document.getElementById('pmj-bulan-next');
                    if (btnPrev) btnPrev.addEventListener('click', function(e) {
                        e.stopPropagation();
                        console.log('[PMJ-PEMINJAMAN] pmj-bulan-prev clicked. pickerYear before:',
                            pickerYear);
                        if (pickerYear > curYear - 5) {
                            pickerYear--;
                            console.log('[PMJ-PEMINJAMAN] pickerYear after:', pickerYear);
                            renderMonths();
                        }
                    });
                    if (btnNext) btnNext.addEventListener('click', function(e) {
                        e.stopPropagation();
                        console.log('[PMJ-PEMINJAMAN] pmj-bulan-next clicked. pickerYear before:',
                            pickerYear);
                        if (pickerYear < curYear) {
                            pickerYear++;
                            console.log('[PMJ-PEMINJAMAN] pickerYear after:', pickerYear);
                            renderMonths();
                        }
                    });

                    var btnTahun = document.getElementById('pmj-btn-filter-tahun');
                    if (btnTahun) {
                        btnTahun.addEventListener('click', function(e) {
                            e.stopPropagation();
                            console.log('[PMJ-PEMINJAMAN] pmj-btn-filter-tahun clicked');
                            var dd = document.getElementById('pmj-dropdown-filter-tahun');
                            var isOpen = dd.classList.contains('show');
                            closeAll();
                            if (!isOpen) {
                                dd.classList.add('show');
                                var rect = btnTahun.getBoundingClientRect();
                                dd.style.top = (rect.bottom + 6) + 'px';
                                dd.style.left = (rect.right - 220) + 'px';
                                renderYears();
                            }
                        });
                    }

                    document.addEventListener('click', function(e) {
                        var mp = document.querySelector('.pmj-month-picker'),
                            yp = document.querySelector('.pmj-year-picker');
                        if (mp && !mp.contains(e.target)) {
                            var dd = document.getElementById('pmj-dropdown-filter-bulan');
                            if (dd) dd.classList.remove('show');
                        }
                        if (yp && !yp.contains(e.target)) {
                            var dd = document.getElementById('pmj-dropdown-filter-tahun');
                            if (dd) dd.classList.remove('show');
                        }
                    });


                    var styleEl = document.createElement('style');
                    styleEl.textContent =
                        '.prb-picker-cell.active-pmj-orange{background:linear-gradient(135deg,#e67e22,#d35400);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(230,126,34,.35);}';
                    document.head.appendChild(styleEl);

                })();
            });
        @endif
    </script>

@endpush