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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3 d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <p class="text-sm mb-1">Periode Yang Berjalan</p>
                            <h5 class="mb-3" style="color: #008384;">
                                @if ($has_active_period && $period_start_str && $period_end_str)
                                    {{ $active_periode->nama_periode }} : ({{ $period_start_str }} - {{ $period_end_str }})
                                @else
                                    Tidak Ada Periode Aktif
                                @endif
                            </h5>
                        </div>
                        @if (isset($user) && in_array($user->idroles, ['hrdcek', 'admins']) && isset($allData['fnce']['belumTransfer']) && $allData['fnce']['belumTransfer']->count() > 0)
                            <div class="mb-3">
                                <button type="button" id="btnSendFinanceReminder"
                                    class="btn btn-primary mb-0 shadow-sm"
                                    data-bs-toggle="modal" data-bs-target="#confirmFinanceReminderModal">
                                    <i class="fas fa-envelope me-1"></i> Kirim Reminder ke Finance
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Popup Modal -->
        <div class="modal fade" id="copyPopup" tabindex="-1" aria-labelledby="copyPopupLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4 shadow-lg">
                    <div class="modal-header" style="background-color:#008384;">
                        <h5 class="modal-title fw-bold text-white">
                            <i class="fas fa-bell me-2" style="color:white;"></i> Pengingat Beasiswa
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            aria-label="Tutup pengingat beasiswa"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-sm text-primary mb-3">{{ $reminderText }}</p>
                        <label for="popupText" class="form-label fw-semibold text-muted">Pesan lengkap:</label>
                        <textarea id="popupText" class="form-control"
                            style="min-height: 250px; white-space: normal; overflow-y: auto; background: white; padding: 15px; border-radius: 4px; line-height: 1.6; font-size: 0.9rem;">{{ e($announcementText ?? '') }}</textarea>
                    </div>
                    <div class="modal-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button id="copyToClipboardBtn" class="btn" style="background-color:#f59e0b; color:white;">
                            <i class="fas fa-copy me-1"></i> Salin Pesan
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Trigger Reminder for HRD Checker -->
        @if ((isset($showClosingReminder) && $showClosingReminder) || (isset($showOpeningReminder) && $showOpeningReminder))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const referrer = document.referrer;
                    const isRefresh = performance.navigation.type === 1;
                    const isFromLogin = referrer.includes('/login') && !isRefresh;

                    if (isFromLogin) {
                        const popupElement = document.getElementById('copyPopup');
                        if (popupElement) {
                            const popup = new bootstrap.Modal(popupElement);
                            popup.show();
                        }
                    }
                });
            </script>
        @endif

        <!-- Alert Banner -->
        @if (isset($user) &&
                in_array($user->idroles, ['hrdcek', 'admins']) &&
                (isset($daysSince) || isset($daysLeft)) &&
                // H-7 sampai H pembukaan
                (($daysSince <= 0 && $daysSince >= -7) ||
                    // Selama periode berlangsung
                    ($daysSince > 0 && $daysLeft >= 0) ||
                    // H-7 sampai H penutupan
                    ($daysLeft >= 0 && $daysLeft <= 7)))
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4 alert-banner warning" style="position: relative; min-height: 80px;">
                        <div class="card-body p-3">

                            <!-- INI YANG BARU – layout persis asli, tapi responsif 100% -->
                            <div class="d-flex align-items-start flex-column flex-lg-row" style="gap: 20px;">

                                <!-- KIRI: Icon + Teks (sama persis) -->
                                <div class="d-flex align-items-start flex-grow-1" style="gap: 16px; min-width: 0;">
                                    <div class="d-flex align-items-center justify-content-center flex-shrink-0"
                                        style="background-color: #fef3c7; color: #f59e0b; border-radius: 50%; width: 42px; height: 42px;">
                                        <i class="fas fa-bell fa-lg"></i>
                                    </div>

                                    <div class="alert-text flex-grow-1" style="overflow-wrap: break-word;">
                                        <div class="fw-bold text-dark mb-1" style="font-size: 1rem;">
                                            Himbauan Pengajuan Beasiswa
                                        </div>
                                        <div class="text-muted" style="font-size: .9rem; line-height: 1.5;">
                                            @if (isset($daysSince) && ($daysSince >= -7 && $daysSince < 0))
                                                Periode beasiswa akan dimulai pada tanggal
                                                ({{ $openingDate->translatedFormat('d M Y') }}).
                                                Silakan akses formulir <a href="{{ e($formLink ?? '#') }}" target="_blank"
                                                    style="color: #008384; text-decoration: underline;">di sini</a>.
                                            @elseif (isset($daysSince) && $daysSince === 0)
                                                Formulir beasiswa dibuka hari ini
                                                ({{ $openingDate->translatedFormat('d M Y') }}).
                                                Mohon HRD segera mengingatkan karyawan untuk mengisi formulir pengajuan.
                                                Silakan akses formulir <a href="{{ e($formLink ?? '#') }}" target="_blank"
                                                    style="color: #008384; text-decoration: underline;">di sini</a>.
                                            @elseif (isset($daysLeft) && $daysLeft === 0)
                                                Formulir beasiswa akan ditutup hari ini
                                                ({{ $closureDate->translatedFormat('d M Y') }}).
                                                Mohon HRD segera mengingatkan karyawan untuk mengisi formulir pengajuan
                                                sebelum batas waktu berakhir.
                                                Silakan akses formulir <a href="{{ e($formLink ?? '#') }}" target="_blank"
                                                    style="color: #008384; text-decoration: underline;">di sini</a>.
                                            @elseif (isset($daysLeft) && $daysLeft > 7)
                                                Formulir beasiswa masih dibuka hingga tanggal
                                                ({{ $closureDate->translatedFormat('d M Y') }}). Mohon HRD segera
                                                mengingatkan
                                                karyawan untuk mengisi formulir pengajuan
                                                sebelum batas waktu berakhir.
                                                Silakan akses formulir <a href="{{ e($formLink ?? '#') }}" target="_blank"
                                                    style="color: #008384; text-decoration: underline;">di sini</a>.
                                            @elseif (isset($daysLeft) && ($daysLeft <= 7 && $daysLeft > 0))
                                                Formulir beasiswa akan ditutup dalam <strong
                                                    style="color: #f59e0b; font-size: 18px;">{{ $daysLeft }}</strong>
                                                hari lagi
                                                ({{ $closureDate->translatedFormat('d M Y') }}).
                                                Mohon HRD segera mengingatkan karyawan untuk mengisi formulir pengajuan
                                                sebelum batas waktu berakhir.
                                                Silakan akses formulir <a href="{{ e($formLink ?? '#') }}" target="_blank"
                                                    style="color: #008384; text-decoration: underline;">di sini</a>.
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <!-- KANAN: Tombol – muncul di kanan (desktop) atau di bawah teks (HP) -->
                                @if ((isset($daysSince) && $daysSince <= 0) || (isset($daysLeft) && $daysLeft >= 0))
                                    <div class="flex-shrink-0 align-self-start align-self-lg-center ms-lg-auto">
                                        <button class="btn btn-md copy-announcement"
                                            style="background-color: #f59e0b; color: white; border-radius: 8px; padding: 6px 14px; white-space: nowrap;"
                                            data-text="{{ e($announcementText ?? '') }}"
                                            data-link="{{ e($formLink ?? '#') }}">
                                            <i class="fas fa-copy me-1"></i> Copy Message
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif


        <!-- SUMMARY CARDS -->
        @if ($user->idroles != 'fnce')
            <div class="row">
                <!-- Card: Jumlah Pendaftar -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <form
                            @if (isset($user) && in_array($user->idroles, ['hrdcek', 'admins'])) class="dashboard-quicklink" data-dashboard-detail="" onsubmit="return false;" @endif>
                            <div class="card-body p-3">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-xs mb-2 text-uppercase font-weight-bold">Jumlah Pendaftar</p>
                                            <h3 class="font-weight-bolder mb-2" style="color: #3b82f6;">
                                                {{ number_format($card->Jumlah_Pengajuan ?? 0, 0, ',', '.') }}
                                            </h3>
                                            @if ($user->idroles == 'hrdcek' || $user->idroles == 'admins')
                                                <a href="#" class="text-xs font-weight-medium"
                                                    style="color: #3b82f6;">Lihat Selengkapnya</a>
                                            @else
                                                <span class="text-xs font-weight-medium" style="color: #3b82f6;">Pendaftar
                                                    Beasiswa</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                            style="background: linear-gradient(45deg, #3b82f6, #93c5fd);">
                                            <i class="fas fa-user-plus text-lg text-white" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Card: Menunggu Persetujuan -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <form class="dashboard-quicklink" data-dashboard-detail="0" onsubmit="return false;">
                            <div class="card-body p-3">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-xs mb-2 text-uppercase font-weight-bold">Menunggu Persetujuan
                                            </p>
                                            <h3 class="font-weight-bolder mb-2" style="color: #f59e0b;">
                                                {{ number_format($card->menungguPersetujuan ?? 0, 0, ',', '.') }}
                                            </h3>
                                            <a href="#" class="text-xs font-weight-medium"
                                                style="color: #f59e0b;">Lihat Selengkapnya</a>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                            style="background: linear-gradient(45deg, #f59e0b, #fde68a);">
                                            <i class="fas fa-clock text-lg text-white" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Card: Disetujui -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <form class="dashboard-quicklink" data-dashboard-detail="1" onsubmit="return false;">
                            <div class="card-body p-3">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-xs mb-2 text-uppercase font-weight-bold">Disetujui</p>
                                            <h3 class="font-weight-bolder mb-2" style="color: #10b981;">
                                                {{ number_format($card->disetujui ?? 0, 0, ',', '.') }}
                                            </h3>
                                            <a href="#" class="text-xs font-weight-medium"
                                                style="color: #10b981;">Lihat Selengkapnya</a>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                            style="background: linear-gradient(45deg, #10b981, #6ee7b7);">
                                            <i class="fas fa-check-circle text-lg text-white" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Card: Ditolak -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <form class="dashboard-quicklink" data-dashboard-detail="2" onsubmit="return false;">
                            <div class="card-body p-3">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-xs mb-2 text-uppercase font-weight-bold">Ditolak</p>
                                            <h3 class="font-weight-bolder mb-2" style="color: #991b1b;">
                                                {{ number_format($card->ditolak ?? 0, 0, ',', '.') }}
                                            </h3>
                                            <a href="#" class="text-xs font-weight-medium"
                                                style="color: #991b1b;">Lihat Selengkapnya</a>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                            style="background: linear-gradient(45deg, #f87171, #991b1b);">
                                            <i class="fas fa-times-circle text-lg text-white" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Card: Ditolak Finance -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <form class="dashboard-quicklink" data-dashboard-detail="3" onsubmit="return false;">
                            <div class="card-body p-3">
                                <div class="row align-items-center">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-xs mb-2 text-uppercase font-weight-bold">Ditolak Finance</p>
                                            <h3 class="font-weight-bolder mb-2" style="color: #7f1d1d;">
                                                {{ number_format($card->ditolakFinance ?? 0, 0, ',', '.') }}
                                            </h3>
                                            <a href="#" class="text-xs font-weight-medium"
                                                style="color: #7f1d1d;">Lihat Selengkapnya</a>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                            style="background: linear-gradient(45deg, #ef4444, #7f1d1d);">
                                            <i class="fas fa-money-bill-wave text-lg text-white" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @else
            <div class="row">
                <!-- Card: Seluruh Pendaftar -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all" id="fnce-semua-pendaftar-card"
                        style="cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease;"
                        onclick="toggleFnceSemuaTable()">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-xs mb-2 text-uppercase font-weight-bold">Seluruh Pendaftar</p>
                                        <h3 class="font-weight-bolder mb-2" style="color: #6366f1;">
                                            {{ number_format($card->Jumlah_Pengajuan ?? 0, 0, ',', '.') }}
                                        </h3>
                                        <a href="#" class="text-xs font-weight-medium"
                                            style="color: #6366f1;" onclick="event.preventDefault();">
                                            <i class="fas fa-chevron-down me-1" id="fnce-semua-chevron"
                                                style="transition: transform 0.3s ease;"></i>Lihat Selengkapnya
                                        </a>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                        style="background: linear-gradient(45deg, #6366f1, #a5b4fc);">
                                        <i class="fas fa-users text-lg text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Pendaftar Diterima (Clickable) -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all" id="fnce-pendaftar-card"
                        style="cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease;"
                        onclick="toggleFnceTable()">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-xs mb-2 text-uppercase font-weight-bold">Pendaftar Diterima</p>
                                        <h3 class="font-weight-bolder mb-2" style="color: #3b82f6;">
                                            {{ number_format($card->jumlahPengajuanDiterima ?? 0, 0, ',', '.') }}
                                        </h3>
                                        <a href="#" class="text-xs font-weight-medium"
                                            style="color: #3b82f6;" onclick="event.preventDefault();">
                                            <i class="fas fa-chevron-down me-1" id="fnce-chevron"
                                                style="transition: transform 0.3s ease;"></i>Lihat Selengkapnya
                                        </a>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                        style="background: linear-gradient(45deg, #3b82f6, #93c5fd);">
                                        <i class="fas fa-user-check text-lg text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Belum Transfer -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-xs mb-2 text-uppercase font-weight-bold">Belum Transfer</p>
                                        <h3 class="font-weight-bolder mb-2" style="color: #f59e0b;">
                                            {{ number_format($card->belumTransfer ?? 0, 0, ',', '.') }}
                                        </h3>
                                        <span class="text-xs font-weight-medium" style="color: #f59e0b;">Menunggu
                                            Transfer</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                        style="background: linear-gradient(45deg, #f59e0b, #fde68a);">
                                        <i class="fas fa-clock text-lg text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Transfer Selesai -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-xs mb-2 text-uppercase font-weight-bold">Transfer Selesai</p>
                                        <h3 class="font-weight-bolder mb-2" style="color: #10b981;">
                                            {{ number_format($card->transaksiSelesai ?? 0, 0, ',', '.') }}
                                        </h3>
                                        <span class="text-xs font-weight-medium" style="color: #10b981;">Transaksi
                                            Selesai</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                        style="background: linear-gradient(45deg, #10b981, #6ee7b7);">
                                        <i class="fas fa-check-circle text-lg text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card: Total Nominal -->
                <div class="col-xl col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm h-100 transition-all">
                        <div class="card-body p-3">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-xs mb-2 text-uppercase font-weight-bold">Total Nominal</p>
                                        <h4 class=" text-md font-weight-bolder mb-2" style="color: #8b5cf6;">
                                            {{ number_format($card->totalAmount ?? 0, 0, ',', '.') }}
                                        </h4>
                                        <span class="text-xs font-weight-medium" style="color: #8b5cf6;">Nominal
                                            Beasiswa</span>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape shadow text-center rounded-circle transition-all"
                                        style="background: linear-gradient(45deg, #8b5cf6, #c4b5fd);">
                                        <i class="fas fa-wallet text-lg text-white" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Collapsible Table: Daftar Seluruh Pendaftar (Finance) --}}
            <div id="fnce-semua-pendaftar-wrapper"
                style="max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, opacity 0.4s ease; opacity: 0;">
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-header bg-white border-0 px-4 pt-4 pb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-users me-2 text-primary"></i>
                                        <h6 class="mb-0 fw-bold text-primary">Daftar Seluruh Pendaftar</h6>
                                    </div>
                                    <span class="badge rounded-pill px-3 py-2"
                                        style="background: linear-gradient(45deg, #6366f1, #a5b4fc); color: white; font-size: 0.85rem;">
                                        {{ number_format($card->Jumlah_Pengajuan ?? 0, 0, ',', '.') }} Pendaftar
                                    </span>
                                </div>
                            </div>
                            <div class="card-body px-4 pb-4 pt-0">
                                <div class="table-responsive">
                                    <table class="table table-hover display" id="fnceSemuaPendaftarTable" style="width: 100%;">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="50px">No</th>
                                                <th>ID Pengajuan</th>
                                                <th>Nama Karyawan</th>
                                                <th>Dept</th>
                                                <th>Nama Anak</th>
                                                <th>Jenjang</th>
                                                <th>Jenis Pend.</th>
                                                <th>Nominal</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody id="fnce-semua-pendaftar-data"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Collapsible Table: Daftar Pendaftar Diterima (Finance) --}}
            <div id="fnce-pendaftar-wrapper"
                style="max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, opacity 0.4s ease; opacity: 0;">
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="card border-0 shadow-sm rounded-4">
                            <div class="card-header bg-white border-0 px-4 pt-4 pb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-users me-2 text-primary"></i>
                                        <h6 class="mb-0 fw-bold text-primary">Daftar Pendaftar Lolos HRD Checker</h6>
                                    </div>
                                    <span class="badge rounded-pill px-3 py-2"
                                        style="background: linear-gradient(45deg, #3b82f6, #93c5fd); color: white; font-size: 0.85rem;">
                                        {{ number_format($card->jumlahPengajuanDiterima ?? 0, 0, ',', '.') }} Pendaftar
                                    </span>
                                </div>
                            </div>
                            <div class="card-body px-4 pb-4 pt-0">
                                <div class="table-responsive">
                                    <table class="table table-hover display" id="fncePendaftarTable" style="width: 100%;">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="50px">No</th>
                                                <th>ID Pengajuan</th>
                                                <th>Nama Karyawan</th>
                                                <th>Dept</th>
                                                <th>Nama Anak</th>
                                                <th>Jenjang</th>
                                                <th>Jenis Pend.</th>
                                                <th>Nominal</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody id="fnce-pendaftar-data"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- SUMMARY TABLE STATUS PER ROLE -->
        @if ($user->idroles == 'hrdcek' || $user->idroles == 'admins')
            <div class="row mt-2 mb-2 g-4">
                <!-- CARD KIRI: Status Approval -->
                <div class="col-lg-7">
                    <div class="card border-0 shadow-sm rounded-4 h-100 d-flex flex-column">
                        <div class="card-header bg-white border-0 px-4 pt-4 pb-3">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-file-signature me-2 text-primary"></i>
                                <h6 class="mb-0 fw-bold text-primary"> Status Approval Pengajuan</h6>
                            </div>
                        </div>

                        <div class="card-body p-0 flex-grow-1 overflow-auto">
                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead>
                                        <tr class="text-muted fw-semibold" style="font-size: 0.9rem;">
                                            <th scope="col" class="ps-4 text-start">Role</th>
                                            <th scope="col" class="text-center">
                                                <i class="fas fa-hourglass-half me-1 text-warning"></i> Menunggu
                                            </th>
                                            <th scope="col" class="text-center">
                                                <i class="fas fa-check-circle me-1 text-success"></i> Disetujui
                                            </th>
                                            <th scope="col" class="text-center">
                                                <i class="fas fa-times-circle me-1 text-danger"></i> Ditolak
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white">
                                        @forelse ($roleStatus as $status)
                                            <tr class="approval-row">
                                                <td class="ps-4 py-3 fw-medium text-dark">
                                                    {{ $status->role_name }}
                                                </td>

                                                <!-- Menunggu – tetap pink pastel seperti asli -->
                                                <td class="text-center py-3 modal-trigger"
                                                    data-role="{{ $status->role }}" data-status="menunggu"
                                                    data-count="{{ $status->menunggu ?? 0 }}"
                                                    data-role-name="{{ $status->role_name }}">
                                                    <span class="px-3 py-1 rounded-pill fw-bold text-sm"
                                                        style="background: #FEF3C7; color: #92400E;">
                                                        {{ number_format($status->menunggu ?? 0, 0, ',', '.') }}
                                                    </span>
                                                </td>

                                                <!-- Disetujui → Pastel Hijau -->
                                                <td class="text-center py-3 modal-trigger"
                                                    data-role="{{ $status->role }}" data-status="disetujui"
                                                    data-count="{{ $status->disetujui ?? 0 }}"
                                                    data-role-name="{{ $status->role_name }}">
                                                    <span class="px-3 py-1 rounded-pill fw-bold text-sm"
                                                        style="background: #D1FAE5; color: #065F46;">
                                                        {{ number_format($status->disetujui ?? 0, 0, ',', '.') }}
                                                    </span>
                                                </td>

                                                <!-- Ditolak → Pastel Merah -->
                                                <td class="text-center py-3 modal-trigger"
                                                    data-role="{{ $status->role }}" data-status="ditolak"
                                                    data-count="{{ $status->ditolak ?? 0 }}"
                                                    data-role-name="{{ $status->role_name }}">
                                                    <span class="px-3 py-1 rounded-pill fw-bold text-sm"
                                                        style="background: #FEE2E2; color: #991B1B;">
                                                        {{ number_format($status->ditolak ?? 0, 0, ',', '.') }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
        <td colspan="4" class="text-center text-muted py-6">
            <i class="fas fa-inbox fa-2x mb-3 opacity-50"></i>
            <div>Tidak ada data pengajuan</div>
        </td>
    </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CARD KANAN: Status Transfer (tinggi sama + isi rapi tengah) -->
                <div class="col-lg-5">
                    <div class="card border-0 shadow-sm rounded-4 h-100 d-flex flex-column">
                        <div class="card-header bg-white border-0 px-4 pt-4 pb-3">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-wallet me-2 text-primary"></i>
                                    <h6 class="mb-0 fw-bold text-primary"> Status Transfer Beasiswa</h6>
                                </div>
                            </div>
                        </div>

            <!-- Modal Konfirmasi Kirim Reminder Finance -->
            <div class="modal fade" id="confirmFinanceReminderModal" tabindex="-1" aria-labelledby="confirmFinanceReminderModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content rounded-4 shadow-sm">
                        <div class="modal-header border-0 bg-primary">
                            <h5 class="modal-title fw-bold text-white" id="confirmFinanceReminderModalLabel">
                                <i class="fas fa-paper-plane me-2"></i> Konfirmasi Pengiriman
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body text-center p-4">
                            <div class="mb-3">
                                <i class="fas fa-envelope-open-text text-warning fa-3x mb-3"></i>
                                <h6 class="fw-bold">Anda yakin ingin mengirim email reminder ke tim Finance?</h6>
                                <p class="text-muted text-sm mb-0">
                                    Email ini menginformasikan bahwa terdapat <strong>{{ number_format($allData['fnce']['belumTransfer']->count(), 0, ',', '.') }}</strong> pengajuan beasiswa dengan nominal <strong>Rp {{ number_format($allData['fnce']['belumTransfer']->sum('nominal_beasiswa'), 0, ',', '.') }}</strong> yang sedang menunggu proses transfer.
                                </p>
                            </div>
                        </div>
                        <div class="modal-footer border-0 justify-content-center pb-4 pt-0">
                            <button type="button" class="btn btn-secondary px-4 me-2" data-bs-dismiss="modal">Batal</button>
                            <button type="button" class="btn btn-primary px-4" onclick="confirmSendFinanceReminder()" id="btnConfirmSendFinanceReminder">
                                <i class="fas fa-paper-plane me-1"></i> Ya, Kirim Sekarang
                            </button>
                        </div>
                    </div>
                </div>
            </div>

                        <div class="card-body d-flex flex-column justify-content-center pt-2 pb-4">
                            <div class="row g-3 g-md-4 text-center">
                                <!-- Belum Ditransfer -->
                                <div class="col-6">
                                    <div class="modal-trigger h-100 d-flex flex-column justify-content-center align-items-center rounded-4 shadow-sm text-white p-2"
                                        style="background: #FFF7D6; min-height: 160px; cursor: pointer;" data-role="fnce"
                                        data-status="belumTransfer"
                                        data-count="{{ $allData['fnce']['belumTransfer']->count() }}"
                                        data-role-name="Finance">

                                        <div class="fs-1 fw-black mb-1" style="color: #B45309; line-height: 1;">
                                            {{ number_format($allData['fnce']['belumTransfer']->count(), 0, ',', '.') }}
                                        </div>
                                        <span class="fw-semibold d-block" style="color: #B45309;">Belum Transfer</span>
                                        <div class="mt-2 text-center" style="color: #B45309; line-height: 1.2;">
                                            <span style="font-size: 0.75rem;">Total Transfer:</span><br>
                                            <strong style="font-size: 0.85rem;">Rp {{ number_format($allData['fnce']['belumTransfer']->sum('nominal_beasiswa'), 0, ',', '.') }}</strong>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sudah Ditransfer -->
                                <div class="col-6">
                                    <div class="modal-trigger h-100 d-flex flex-column justify-content-center align-items-center rounded-4 shadow-sm text-white p-2"
                                        style="background: #D9FBEA; min-height: 160px; cursor: pointer;" data-role="fnce"
                                        data-status="sudahTransfer"
                                        data-count="{{ $allData['fnce']['sudahTransfer']->count() }}"
                                        data-role-name="Finance">

                                        <div class="fs-1 fw-black mb-1" style="color: #047857; line-height: 1;">
                                            {{ number_format($allData['fnce']['sudahTransfer']->count(), 0, ',', '.') }}
                                        </div>
                                        <span class="fw-semibold d-block" style="color: #047857;">Selesai Transfer</span>
                                    </div>
                                </div>
                            </div>
                            <div id="financeReminderMsg" class="mt-3 text-sm text-center" style="display: none;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                .hover-row td {
                    cursor: pointer;
                }

                .status-card {
                    transition: all 0.3s ease;
                }

                .status-card:hover {
                    transform: translateY(-6px) scale(1.02);
                    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
                }

                .text-teal-700 {
                    color: #0d9488;
                }

                .text-sm {
                    font-size: 0.875rem;
                }

                .approval-row:hover {
                    background-color: #f7fafc;
                }

                .modal-trigger {
                    transition: transform 0.2s ease;
                }

                .modal-trigger:hover {
                    transform: translateY(-4px);
                }
            </style>

            <!-- Modal untuk Detail Pengajuan -->
            <div class="modal fade" id="detailPengajuanModal" tabindex="-1" role="dialog"
                aria-labelledby="detailPengajuanModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="detailPengajuanModalLabel">Daftar Pengajuan Beasiswa </h5>
                            <br>
                            <div class="ms-3 text-primary">
                                <span id="modalRoleName"></span> |
                                <span id="modalStatusName"></span>

                            </div>
                            {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button> --}}
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-hover display" id="modalPengajuanTable">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="80px">Action</th>
                                            <th>ID Pengajuan</th>
                                            <th>Nama Karyawan</th>
                                            <th>Dept</th>
                                            <th>Nama Anak</th>
                                            <th>Jenjang</th>
                                            <th>Jenis Pend.</th>
                                            <th>Nominal</th>
                                        </tr>
                                    </thead>
                                    <tbody id="modal-data"></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- BAR CHART: PER DEPT -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card z-index-2 h-100 shadow-sm border-0">

                    <!-- HEADER + FILTER -->
                    <div class="card-header pb-0 pt-4 bg-transparent">
                        <div class="row align-items-lg-center">

                            <!-- Judul -->
                            <div class="col-lg-6 col-12 mb-3 mb-lg-0">
                                <h4 class="mb-0 text-capitalize">Data Pengajuan Beasiswa</h4>
                            </div>

                            <!-- Filter -->
                            <div class="col-lg-6 col-12">
                                <form id="barFilters"
                                    class="row g-3 justify-content-start justify-content-lg-end align-self-start align-self-lg-center"
                                    onsubmit="return false;" autocomplete="off">

                                    <!-- Periode Beasiswa -->
                                    <div class="col-12 col-sm-6 col-lg-5">
                                        <p class="text-sm font-weight-medium mb-2 text-secondary">
                                            Periode Beasiswa
                                        </p>
                                        <select id="periode_id_bar" name="periode_id_bar"
                                            class="form-select form-select-sm">
                                            @if ($selected_periode_id_bar === null)
                                                <option value="" selected>Pilih Periode</option>
                                            @endif
                                            @foreach ($periodes as $periode)
                                                <option value="{{ $periode->id_periode }}"
                                                    {{ $selected_periode_id_bar == $periode->id_periode ? 'selected' : '' }}>
                                                    {{ $periode->nama_periode }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Lihat Berdasarkan -->
                                    <div class="col-12 col-sm-6 col-lg-5">
                                        <p class="text-sm font-weight-medium mb-2 text-secondary">
                                            Lihat Berdasarkan
                                        </p>
                                        <select id="type" name="type" class="form-select form-select-sm">
                                            <option value="nominal" {{ $selected_type == 'nominal' ? 'selected' : '' }}>
                                                Nominal Beasiswa
                                            </option>
                                            <option value="jumlah" {{ $selected_type == 'jumlah' ? 'selected' : '' }}>
                                                Jumlah Pendaftar
                                            </option>
                                        </select>
                                    </div>

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

                    <!-- CHART BODY -->
                    <div class="card-body p-3 p-md-4">
                        <div style="position: relative; height: 350px; overflow-x: auto; overflow-y: hidden;">
                            <canvas id="chart-bar" class="w-100" height="350"></canvas>
                        </div>
                    </div>

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

        <!-- LINE CHART: PERIODE -->
        <div class="row mt-4">
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <h5 class="text-capitalize mb-0">Data Pengajuan Beasiswa per Periode</h5>
                        <form id="lineChartForm" class="mt-3" onsubmit="return false;" autocomplete="off">
                            <div class="row justify-content-between align-items-start">
                                <div class="col-md-8 col-sm-12 mb-2">
                                    <p class="text-sm mb-2 font-weight-medium">Filter Tanggal:</p>
                                    <div class="d-flex align-items-center flex-wrap">
                                        <input type="date" id="start_year" name="start_year"
                                            class="form-control me-2 mb-2" style="width: auto; min-width: 150px;"
                                            value="{{ $start_year ?? '' }}" min="1900-01-01" max="2100-12-31">
                                        <span class="mx-2 mb-2">s/d</span>
                                        <input type="date" id="end_year" name="end_year"
                                            class="form-control me-2 mb-2" style="width: auto; min-width: 150px;"
                                            value="{{ $end_year ?? '' }}" min="1900-01-01" max="2100-12-31">
                                        <button type="button" id="clearDateFilter"
                                            class="btn btn-outline-danger btn-sm mb-2"
                                            style="padding: 0.25rem 0.5rem; font-size: 0.75rem;"
                                            title="Hapus Filter Tanggal">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        <p id="dateError" class="text-danger d-none text-xs pt-1 px-1">
                                            Tanggal mulai tidak boleh lebih besar dari tanggal selesai.
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12 mb-2">
                                    <p class="text-sm mb-2 font-weight-medium">Lihat Berdasarkan</p>
                                    <select id="type_line" name="type_line" class="form-select">
                                        <option value="nominal" {{ $selected_type_line == 'nominal' ? 'selected' : '' }}>
                                            Nominal Beasiswa
                                        </option>
                                        <option value="jumlah" {{ $selected_type_line == 'jumlah' ? 'selected' : '' }}>
                                            Jumlah Pendaftar
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart-container-line position-relative">
                            <canvas id="chart-line" class="chart-canvas w-100" height="350"
                                aria-label="Grafik data beasiswa per periode"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PIE CHART: PENDAFTAR PER JENJANG -->
            <div class="col-lg-5 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100 shadow-sm border-0 overflow-hidden">

                    <!-- Judul Card -->
                    <div class="card-header pb-0 pt-4 bg-transparent">
                        <h5 class="mb-0 text-capitalize">Jumlah Pendaftar per Jenjang Pendidikan</h5>
                    </div>

                    <!-- Filter Periode & Departemen -->
                    <div class="card-header pb-0 pt-2 bg-transparent">
                        <form id="pieFilters" class="row g-3" onsubmit="return false;" autocomplete="off">

                            <!-- Periode Beasiswa -->
                            <div class="col-12 col-md-6">
                                <p class="text-sm font-weight-medium text-secondary mb-1">Periode Beasiswa</p>
                                <select id="periode_id_pie" name="periode_id_pie" class="form-select form-select-sm">
                                    @if ($selected_periode_id_pie === null)
                                        <option value="" selected>Pilih Periode</option>
                                    @endif
                                    @foreach ($periodes as $periode)
                                        <option value="{{ $periode->id_periode }}"
                                            {{ $selected_periode_id_pie == $periode->id_periode ? 'selected' : '' }}>
                                            {{ $periode->nama_periode }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Departemen -->
                            <div class="col-12 col-md-6">
                                <p class="text-sm font-weight-medium text-secondary mb-1">Departemen</p>
                                <select id="dept_id" name="dept_id" class="form-select form-select-sm">
                                    <option value="">All Dept</option>
                                    @foreach ($departments as $dept)
                                        <option value="{{ $dept->id }}"
                                            {{ $selectedDeptId == $dept->id ? 'selected' : '' }}>
                                            {{ $dept->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                    </div>

                    <!-- Chart Body -->
                    <div class="card-body p-4">
                        <div class="position-relative" style="min-height: 300px;">

                            <!-- Pesan kalau tidak ada data -->
                            <div id="pie-no-data"
                                class="d-none position-absolute top-50 start-50 translate-middle text-center text-muted w-100"
                                style="z-index: 1;">
                                <p class="mb-0">Tidak ada data tersedia</p>
                            </div>

                            <!-- Canvas Pie Chart - Responsif 100% -->
                            <div class="chart-pie">
                                <canvas id="chart-pie" class="w-100" style="max-height: 340px;"></canvas>
                            </div>

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

        <style>
            .card.transition-all {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .card.transition-all:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
            }

            .icon.transition-all:hover {
                transform: scale(1.1);
            }

            .chart-canvas {
                min-width: {{ max(300, count($deptData) * 50) }}px;
            }

            #chart-line {
                min-width: {{ max(500, count($periodData) * 100) }}px;
            }

            #chart-pie {
                min-width: 300px;
            }

            .text-danger.d-none {
                display: none;
            }

            .chart-container-line {
                padding: 15px 0;
                overflow-x: auto;
            }

            input[type="date"] {
                border: 1px solid #d1d5db;
                border-radius: 0.375rem;
                padding: 0.5rem;
            }

            .filter-tag {
                display: inline-flex;
                align-items: center;
                background-color: #E6F3F3;
                color: #008384;
                padding: 6px 12px;
                border-radius: 20px;
                font-size: 14px;
                margin: 0 10px 5px 0;
                position: relative;
            }

            .filter-tag .close-btn {
                cursor: pointer;
                margin-left: 8px;
                font-size: 16px;
                color: #008384;
                padding-left: 5px;
            }

            .filter-tag .close-btn:hover {
                color: #DDD;
            }

            @media (max-width: 768px) {
                .chart-container-line {
                    padding: 10px 0;
                }

                input[type="date"] {
                    width: 100% !important;
                    margin-bottom: 0.5rem;
                }
            }

            @media (max-width: 576px) {
                #chart-bar {
                    min-width: 600px !important;
                    /* biar bisa di-scroll horizontal */
                }
            }

            .alert-banner.warning {
                background-color: #fffef9;
                border-left: 5px solid #f59e0b;
            }

            .alert-icon {
                margin-right: 10px;
                font-size: 18px;
                color: #f59e0b;
            }

            .alert-text a {
                color: #008384;
                text-decoration: underline;
            }

            .modal textarea {
                border: 1px solid #d1d5db;
                border-radius: 0.375rem;
                padding: 0.5rem;
            }

            .hover-effect:hover {
                background-color: #f8f9fa !important;
                transition: background-color 0.2s ease;
            }
        </style>
    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script src="./assets/js/plugins/chartjs-plugin-datalabels.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // ===== Kirim Reminder Email ke Finance =====
            window.confirmSendFinanceReminder = function() {
                const btn = document.getElementById('btnConfirmSendFinanceReminder');
                const msgDiv = document.getElementById('financeReminderMsg');
                if (!btn) return;


                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Mengirim...';
                if (msgDiv) { msgDiv.style.display = 'none'; msgDiv.innerHTML = ''; }

                fetch('{{ route("dashboard.sendFinanceReminder") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    // Tutup modal
                    const modalEl = document.getElementById('confirmFinanceReminderModal');
                    if (modalEl) {
                        const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
                        modal.hide();
                    }

                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: data.message,
                            confirmButtonColor: '#008384'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: data.message,
                            confirmButtonColor: '#008384'
                        });
                    }

                    if (msgDiv) msgDiv.style.display = 'none';

                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Ya, Kirim Sekarang';
                })
                .catch(error => {
                    const modalEl = document.getElementById('confirmFinanceReminderModal');
                    if (modalEl) {
                        const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
                        modal.hide();
                    }
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Terjadi Kesalahan',
                        text: 'Gagal memproses permintaan. Silakan coba lagi.',
                        confirmButtonColor: '#008384'
                    });

                    if (msgDiv) msgDiv.style.display = 'none';

                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Ya, Kirim Sekarang';
                });
            };

            // ===== Finance: Toggle Daftar Seluruh Pendaftar =====
            let fnceSemuaTableInstance = null;
            let fnceSemuaTableOpen = false;

            window.toggleFnceSemuaTable = function() {
                const wrapper = document.getElementById('fnce-semua-pendaftar-wrapper');
                const chevron = document.getElementById('fnce-semua-chevron');
                const card = document.getElementById('fnce-semua-pendaftar-card');

                if (!wrapper) return;

                fnceSemuaTableOpen = !fnceSemuaTableOpen;

                if (fnceSemuaTableOpen) {
                    if (!fnceSemuaTableInstance) {
                        const fnceData = @json($fnceSemuaPendaftar ?? []);

                        const tbody = document.getElementById('fnce-semua-pendaftar-data');
                        tbody.innerHTML = '';

                        const statusBadgeMap = {
                            'Menunggu HRD Checker': '<span class="badge" style="background-color:#6b7280; color:white;">Menunggu HRD Checker</span>',
                            'Pending Head HRD': '<span class="badge" style="background-color:#4b5563; color:white;">Pending Head HRD</span>',
                            'Pending SP': '<span class="badge" style="background-color:#f59e0b; color:white;">Pending SP</span>',
                            'Belum Transfer': '<span class="badge" style="background-color:#3b82f6; color:white;">Belum Transfer</span>',
                            'Sudah Transfer': '<span class="badge bg-success">Sudah Transfer</span>',
                            'Ditolak HRD Checker': '<span class="badge bg-danger">Ditolak HRD Checker</span>',
                            'Ditolak Head HRD': '<span class="badge bg-danger">Ditolak Head HRD</span>',
                            'Ditolak SP': '<span class="badge bg-danger">Ditolak SP</span>',
                            'Ditolak Finance': '<span class="badge bg-danger">Ditolak Finance</span>'
                        };

                        fnceData.forEach((item, index) => {
                            const nominal = item.nominal_beasiswa ?
                                'Rp ' + new Intl.NumberFormat('id-ID').format(item.nominal_beasiswa) : '-';
                            const statusBadge = statusBadgeMap[item.current_status] || '<span class="badge bg-secondary">-</span>';

                            tbody.innerHTML += `
                                <tr>
                                    <td class="text-center">${index + 1}</td>
                                    <td>${item.id_trs_beasiswa || '-'}</td>
                                    <td>${item.nama_karyawan || '-'}</td>
                                    <td>${item.dept || '-'}</td>
                                    <td>${item.nama_anak_kk || '-'}</td>
                                    <td>${item.jenjang_name || item.jenjang_pendidikan || '-'}</td>
                                    <td>${item.jenis_pendidikan_name || item.jenis_pendidikan || '-'}</td>
                                    <td style="text-align:right;">${nominal}</td>
                                    <td class="text-center">${statusBadge}</td>
                                </tr>
                            `;
                        });

                        fnceSemuaTableInstance = $('#fnceSemuaPendaftarTable').DataTable({
                            paging: true,
                            info: true,
                            searching: true,
                            ordering: true,
                            responsive: true,
                            pageLength: 10,
                            order: [[0, 'asc']],
                            language: {
                                search: "Cari :",
                                lengthMenu: "Tampilkan _MENU_ baris",
                                zeroRecords: "Tidak ada data pendaftar",
                                info: "Data _START_ - _END_ dari _TOTAL_",
                                infoEmpty: "Tidak ada data",
                                infoFiltered: "(pencarian dari _MAX_ data)"
                            }
                        });
                    }

                    wrapper.style.maxHeight = wrapper.scrollHeight + 1000 + 'px';
                    wrapper.style.opacity = '1';
                    if (chevron) chevron.style.transform = 'rotate(180deg)';
                    if (card) card.style.borderColor = '#6366f1';

                    setTimeout(() => {
                        wrapper.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    }, 300);
                } else {
                    wrapper.style.maxHeight = '0';
                    wrapper.style.opacity = '0';
                    if (chevron) chevron.style.transform = 'rotate(0deg)';
                    if (card) card.style.borderColor = 'transparent';
                }
            };

            // ===== Finance: Toggle Daftar Pendaftar =====
            let fnceTableInstance = null;
            let fnceTableOpen = false;

            window.toggleFnceTable = function() {
                const wrapper = document.getElementById('fnce-pendaftar-wrapper');
                const chevron = document.getElementById('fnce-chevron');
                const card = document.getElementById('fnce-pendaftar-card');

                if (!wrapper) return;

                fnceTableOpen = !fnceTableOpen;

                if (fnceTableOpen) {
                    // Populate table if first time
                    if (!fnceTableInstance) {
                        const fnceData = @json($fnceAllPendaftar ?? []);

                        const tbody = document.getElementById('fnce-pendaftar-data');
                        tbody.innerHTML = '';

                        const statusBadgeMap = {
                            'Pending Head HRD': '<span class="badge" style="background-color:#6b7280; color:white;">Pending Head HRD</span>',
                            'Pending SP': '<span class="badge" style="background-color:#f59e0b; color:white;">Pending SP</span>',
                            'Belum Transfer': '<span class="badge" style="background-color:#3b82f6; color:white;">Belum Transfer</span>',
                            'Sudah Transfer': '<span class="badge bg-success">Sudah Transfer</span>'
                        };

                        fnceData.forEach((item, index) => {
                            const nominal = item.nominal_beasiswa ?
                                'Rp ' + new Intl.NumberFormat('id-ID').format(item.nominal_beasiswa) : '-';
                            const statusBadge = statusBadgeMap[item.current_status] || '<span class="badge bg-secondary">-</span>';

                            tbody.innerHTML += `
                                <tr>
                                    <td class="text-center">${index + 1}</td>
                                    <td>${item.id_trs_beasiswa || '-'}</td>
                                    <td>${item.nama_karyawan || '-'}</td>
                                    <td>${item.dept || '-'}</td>
                                    <td>${item.nama_anak_kk || '-'}</td>
                                    <td>${item.jenjang_name || item.jenjang_pendidikan || '-'}</td>
                                    <td>${item.jenis_pendidikan_name || item.jenis_pendidikan || '-'}</td>
                                    <td style="text-align:right;">${nominal}</td>
                                    <td class="text-center">${statusBadge}</td>
                                </tr>
                            `;
                        });

                        fnceTableInstance = $('#fncePendaftarTable').DataTable({
                            paging: true,
                            info: true,
                            searching: true,
                            ordering: true,
                            responsive: true,
                            pageLength: 10,
                            order: [[8, 'asc']],
                            language: {
                                search: "Cari :",
                                lengthMenu: "Tampilkan _MENU_ baris",
                                zeroRecords: "Tidak ada data pendaftar",
                                info: "Data _START_ - _END_ dari _TOTAL_",
                                infoEmpty: "Tidak ada data",
                                infoFiltered: "(pencarian dari _MAX_ data)"
                            }
                        });
                    }

                    // Animate open
                    wrapper.style.maxHeight = wrapper.scrollHeight + 1000 + 'px';
                    wrapper.style.opacity = '1';
                    if (chevron) chevron.style.transform = 'rotate(180deg)';
                    if (card) card.style.borderColor = '#3b82f6';

                    // Scroll to table smoothly
                    setTimeout(() => {
                        wrapper.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    }, 300);
                } else {
                    // Animate close
                    wrapper.style.maxHeight = '0';
                    wrapper.style.opacity = '0';
                    if (chevron) chevron.style.transform = 'rotate(0deg)';
                    if (card) card.style.borderColor = 'transparent';
                }
            };

            // Modal Trigger for roleStatus
            let modalTable = null; // Simpan instance DataTable
            const allData = @json($allData);
            $('.modal-trigger').click(function(e) {
                e.preventDefault();
                const role = $(this).data('role');
                const roleName = $(this).data('role-name');
                const status = $(this).data('status');
                const count = $(this).data('count');
                const data = allData[role][status];
                const tbody = $('#modal-data');
                tbody.empty();

                // Format status untuk tampilan
                const statusMap = {
                    'menunggu': 'Menunggu',
                    'disetujui': 'Disetujui',
                    'ditolak': 'Ditolak',
                    'belumTransfer': 'Belum Transfer',
                    'sudahTransfer': 'Sudah Transfer'
                };
                const formattedStatus = statusMap[status] || status;

                // Isi keterangan di header modal
                $('#modalRoleName').text(`Role: ${roleName}`);
                $('#modalStatusName').text(`Status: ${formattedStatus} (${count})`);

                if (count === 0) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Informasi',
                        text: 'Tidak ada data untuk ditampilkan',
                        confirmButtonColor: '#008384'
                    });
                    return;
                }

                if (data && data.length) {
                    data.forEach(item => {
                        const nominal = item.nominal_beasiswa ?
                            'Rp ' + new Intl.NumberFormat('id-ID').format(item.nominal_beasiswa) :
                            '-';
                        tbody.append(`
                            <tr>
                                <td>
                                    <button class="btn btn-sm btn-primary view-btn" 
                                            onclick="viewPengajuan('${item.encrypted_id}')">
                                        <i class="fas fa-eye me-1"></i>View
                                    </button>
                                </td>
                                <td>${item.id_trs_beasiswa || '-'}</td>
                                <td>${item.nama_karyawan || '-'}</td>
                                <td>${item.dept || '-'}</td>
                                <td>${item.nama_anak_kk || '-'}</td>
                                <td>${item.jenjang_name || item.jenjang_pendidikan || '-'}</td>
                                <td>${item.jenis_pendidikan_name || item.jenis_pendidikan || '-'}</td>
                                <td style="text-align:right;">${nominal}</td>
                            </tr>
                        `);
                    });

                    // Hancurkan DataTable jika sudah ada
                    if (modalTable) {
                        modalTable.destroy();
                    }

                    // Inisialisasi DataTable
                    modalTable = $('#modalPengajuanTable').DataTable({
                        paging: true,
                        info: true,
                        searching: true,
                        ordering: true,
                        responsive: true,
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Data _START_ - _END_ dari _TOTAL_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        }
                    });

                    $('#detailPengajuanModal').modal('show');
                } else {
                    tbody.append('<tr><td colspan="8" class="text-center">Tidak ada data</td></tr>');
                    if (modalTable) {
                        modalTable.destroy();
                        modalTable = null;
                    }
                }


            });

            $('#detailPengajuanModal').on('hidden.bs.modal', function() {
                const tbody = $('#modal-data');
                tbody.empty(); // Kosongkan tbody
                $('#modalRoleName').text(''); // Reset header
                $('#modalStatusName').text('');
                if (modalTable) {
                    modalTable.destroy();
                    modalTable = null;
                }
            });

            // Function view pengajuan
            window.viewPengajuan = function(encryptedId) {
                // Tambahkan parameter ?from=dashboard
                const url = `{{ url('/trbea/show') }}/${encodeURIComponent(encryptedId)}?from=dashboard`;
                window.open(url, '_blank');
            };

            // Register Chart.js plugin
            if (typeof Chart === 'undefined' || !Chart.register) {
                console.error('Chart.js is not loaded');
                return;
            }
            Chart.register(ChartDataLabels);

            // Color palette
            const spunindoPalette = [
                '#1E40AF', '#3B82F6', '#0EA5E9', '#22D3EE', '#14B8A6', '#10B981', '#84CC16',
                '#65A30D', '#F59E0B', '#F97316', '#EA580C', '#DC2626'
            ];
            const defaultSpunindoColor = '#008384';

            // Initialize charts
            const ctxBar = document.getElementById("chart-bar")?.getContext("2d");
            const ctxLine = document.getElementById("chart-line")?.getContext("2d");
            const ctxPie = document.getElementById("chart-pie")?.getContext("2d");
            const pieNoData = document.getElementById("pie-no-data");

            // Server data
            // const serverDeptLabels = @json($deptData->pluck('dept') ?? []);
            const serverDeptValues = @json($deptData->pluck($selected_type ?? 'jumlah') ?? []);
            // const serverPeriodLabels = @json($periodData->pluck('periode') ?? ['Tidak Ada Data']);
            const serverPeriodValues = @json($periodData->pluck($selected_type_line ?? 'jumlah') ?? [0]);
            const serverJenjangLabels = @json($jenjangData->pluck('jenjang') ?? []);
            const serverJenjangValues = @json($jenjangData->pluck('jumlah') ?? []);

            // // Bar Chart
            // const barConfig = {
            //     type: 'bar',
            //     data: {
            //         labels: serverDeptLabels,
            //         datasets: [{
            //             label: "{{ $selected_type == 'nominal' ? 'Nominal Beasiswa' : 'Jumlah Anak Terdaftar' }}",
            //             data: serverDeptValues,
            //             backgroundColor: serverDeptLabels.map((_, i) => spunindoPalette[i %
            //                 spunindoPalette.length] || defaultSpunindoColor),
            //             borderWidth: 1
            //         }]
            //     },
            //     options: {
            //         responsive: true,
            //         maintainAspectRatio: false,
            //         plugins: {
            //             legend: {
            //                 display: false
            //             },
            //             datalabels: {
            //                 display: false
            //             }
            //         },
            //         scales: {
            //             y: {
            //                 beginAtZero: true,
            //                 grid: {
            //                     display: true,
            //                     color: 'rgba(0, 0, 0, 0.1)',
            //                     borderDash: [5, 5]
            //                 },
            //                 ticks: {
            //                     padding: 10,
            //                     precision: 0,
            //                     color: '#475569',
            //                     callback: value => new Intl.NumberFormat('id-ID').format(value)
            //                 },
            //                 title: {
            //                     display: true,
            //                     text: '{{ $selected_type == 'nominal' ? 'Nominal (Rp)' : 'Jumlah Pendaftar' }}',
            //                     color: '#008384',
            //                     font: {
            //                         size: 14,
            //                         weight: 'bold'
            //                     }
            //                 }
            //             },
            //             x: {
            //                 grid: {
            //                     display: false
            //                 },
            //                 ticks: {
            //                     padding: 10,
            //                     maxRotation: 45,
            //                     minRotation: 45
            //                 }
            //             }
            //         }
            //     }
            // };
            // const barChart = ctxBar ? new Chart(ctxBar, barConfig) : console.error('Bar Chart Canvas not found');

            // // Line Chart
            // const lineConfig = {
            //     type: 'line',
            //     data: {
            //         labels: serverPeriodLabels,
            //         datasets: [{
            //             label: "{{ $selected_type_line == 'nominal' ? 'Nominal Beasiswa' : 'Jumlah Pendaftar' }}",
            //             data: serverPeriodValues,
            //             borderColor: '#3B82F6',
            //             backgroundColor: 'rgba(59, 130, 246, 0.2)',
            //             tension: 0.4,
            //             pointBackgroundColor: '#1E40AF',
            //             pointBorderColor: '#FFFFFF',
            //             pointRadius: 5,
            //             pointHoverRadius: 7,
            //             borderWidth: 3,
            //             fill: true
            //         }]
            //     },
            //     options: {
            //         responsive: true,
            //         maintainAspectRatio: false,
            //         plugins: {
            //             legend: {
            //                 display: false
            //             },
            //             tooltip: {
            //                 mode: 'index',
            //                 intersect: false,
            //                 backgroundColor: '#FFFFFF',
            //                 titleColor: '#1E40AF',
            //                 bodyColor: '#333333',
            //                 borderColor: '#008384',
            //                 borderWidth: 1,
            //                 callbacks: {
            //                     label: function(context) {
            //                         let label = context.dataset.label || '';
            //                         if (label) label += ': ';
            //                         return label + new Intl.NumberFormat('id-ID').format(context.parsed.y);
            //                     }
            //                 }
            //             },
            //             datalabels: {
            //                 display: false
            //             }
            //         },
            //         scales: {
            //             y: {
            //                 beginAtZero: true,
            //                 grid: {
            //                     display: true,
            //                     color: 'rgba(0, 0, 0, 0.1)',
            //                     borderDash: [5, 5]
            //                 },
            //                 ticks: {
            //                     padding: 10,
            //                     color: '#475569',
            //                     precision: 0,
            //                     callback: value => new Intl.NumberFormat('id-ID').format(value)
            //                 },
            //                 title: {
            //                     display: true,
            //                     text: '{{ $selected_type_line == 'nominal' ? 'Nominal (Rp)' : 'Jumlah Pendaftar' }}',
            //                     color: '#008384',
            //                     font: {
            //                         size: 14,
            //                         weight: 'bold'
            //                     }
            //                 }
            //             },
            //             x: {
            //                 grid: {
            //                     display: false
            //                 },
            //                 ticks: {
            //                     padding: 10,
            //                     color: '#475569'
            //                 }
            //             }
            //         }
            //     }
            // };
            // const lineChart = ctxLine ? new Chart(ctxLine, lineConfig) : console.error(
            //     'Line Chart Canvas not found');

            // Server data baru
            const serverDeptLabels = @json($deptData->pluck('dept') ?? []);
            const serverDeptDisetujui = @json($deptData->pluck($selected_type == 'nominal' ? 'disetujui_nominal' : 'disetujui_jumlah') ?? []);
            const serverDeptDitolak = @json($deptData->pluck($selected_type == 'nominal' ? 'ditolak_nominal' : 'ditolak_jumlah') ?? []);
            const serverPeriodLabels = @json($periodData->pluck('periode') ?? ['Tidak Ada Data']);
            const serverPeriodDisetujui = @json($periodData->pluck($selected_type_line == 'nominal' ? 'disetujui_nominal' : 'disetujui_jumlah') ?? [0]);
            const serverPeriodDitolak = @json($periodData->pluck($selected_type_line == 'nominal' ? 'ditolak_nominal' : 'ditolak_jumlah') ?? [0]);

            // ==================== BAR CHART (Grouped – 2 bar per department) ====================
            const barConfig = {
                type: 'bar',
                data: {
                    labels: serverDeptLabels,
                    datasets: [{
                            label: 'Disetujui',
                            data: serverDeptDisetujui,
                            backgroundColor: '#3b82f6',
                        },
                        {
                            label: 'Ditolak',
                            data: serverDeptDitolak,
                            backgroundColor: '#d03232',
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',

                        },
                        datalabels: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: value => new Intl.NumberFormat('id-ID').format(value),
                                precision: 0,
                            },
                            title: {
                                display: true,
                                text: '{{ $selected_type == 'nominal' ? 'Nominal (Rp)' : 'Jumlah Pengajuan' }}',
                                color: '#008384',
                                font: {
                                    size: 14,
                                    weight: 'bold'
                                }
                            }
                        },
                        x: {
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45
                            }
                        }
                    }
                }
            };

            const barChart = ctxBar ? new Chart(ctxBar, barConfig) : null;

            // ==================== LINE CHART (2 garis) ====================
            const lineConfig = {
                type: 'line',
                data: {
                    labels: serverPeriodLabels,
                    datasets: [{
                            label: 'Disetujui',
                            data: serverPeriodDisetujui,
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.18)',
                            tension: 0.4,
                            pointBackgroundColor: '#2563eb',
                            pointBorderWidth: 0,
                            pointRadius: 5,
                            borderWidth: 4,
                            fill: true
                        },
                        {
                            label: 'Ditolak',
                            data: serverPeriodDitolak.map(v => v === 0 ? null : v),
                            borderColor: '#d03232', // merah yang kamu minta
                            backgroundColor: 'rgba(208, 50, 50, 0.16)', // fill soft merah biar matching
                            tension: 0.4,
                            pointBackgroundColor: '#d03232',
                            pointBorderWidth: 0,
                            pointRadius: 5,
                            borderWidth: 4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    spanGaps: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            position: 'top',

                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: '#FFFFFF',
                            titleColor: '#1E40AF',
                            bodyColor: '#333333',
                            borderColor: '#008384',
                            borderWidth: 1,
                            callbacks: {
                                title: () => null, // hilangkan title (nama periode)
                                label: ctx => {
                                    let label = ctx.dataset.label || '';
                                    const value = ctx.parsed.y;
                                    const formatted = new Intl.NumberFormat('id-ID', {
                                        style: '{{ $selected_type_line == 'nominal' ? 'currency' : 'decimal' }}',
                                        currency: 'IDR',
                                        minimumFractionDigits: 0
                                    }).format(value);
                                    return `${label}: ${formatted}`;
                                }
                            }
                        },
                        datalabels: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(16, 185, 129, 0.12)'
                            },
                            ticks: {
                                callback: value => new Intl.NumberFormat('id-ID').format(value),
                                color: '#374151',
                                precision: 0,
                            },
                            title: {
                                display: true,
                                text: '{{ $selected_type_line == 'nominal' ? 'Nominal (Rp)' : 'Jumlah Pengajuan' }}',
                                color: '#008384',
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#374151'
                            }
                        }
                    },
                }
            };
            const lineChart = ctxLine ? new Chart(ctxLine, lineConfig) : null;

            // Pie Chart
            const pieConfig = {
                type: 'pie',
                data: {
                    labels: serverJenjangLabels,
                    datasets: [{
                        data: serverJenjangValues,
                        backgroundColor: spunindoPalette.slice(0, Math.min(serverJenjangLabels.length,
                            spunindoPalette.length)),
                        borderWidth: 1,
                        borderColor: '#FFFFFF'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                usePointStyle: true,
                                pointStyle: 'circle',
                                padding: 20
                            }
                        },
                        datalabels: {
                            color: '#FFFFFF',
                            font: {
                                size: 14,
                                weight: 'bold'
                            },
                            anchor: 'center',
                            align: 'center',
                            clamp: true
                        }
                    }
                }
            };
            const pieChart = ctxPie ? new Chart(ctxPie, pieConfig) : console.error('Pie Chart Canvas not found');

            // Toggle pie chart visibility
            function togglePieChartVisibility(data) {
                if (!pieNoData || !ctxPie || !ctxPie.canvas || !ctxPie.canvas.parentElement) {
                    console.error('Pie chart elements not found');
                    return;
                }
                if (data.length === 0 || (data.length === 1 && data[0].jenjang === null)) {
                    pieNoData.classList.remove('d-none');
                    ctxPie.canvas.parentElement.classList.add('d-none');
                } else {
                    pieNoData.classList.add('d-none');
                    ctxPie.canvas.parentElement.classList.remove('d-none');
                }
            }
            if (pieNoData && ctxPie && ctxPie.canvas && ctxPie.canvas.parentElement) {
                togglePieChartVisibility(serverJenjangLabels);
            }

            // Update charts from AJAX response
            function updateChartsFromData(data) {
                const deptData = Array.isArray(data.deptData) ? data.deptData : [];
                const periodData = Array.isArray(data.periodData) ? data.periodData : [];
                const jenjangData = Array.isArray(data.jenjangData) ? data.jenjangData : [];

                // Bar Chart
                barChart.data.labels = data.deptData.map(d => d.dept || '');
                barChart.data.datasets[0].data = data.deptData.map(d => Number(d[data.selected_type === 'nominal' ?
                    'disetujui_nominal' : 'disetujui_jumlah'] ?? 0));
                barChart.data.datasets[1].data = data.deptData.map(d => Number(d[data.selected_type === 'nominal' ?
                    'ditolak_nominal' : 'ditolak_jumlah'] ?? 0));
                barChart.options.scales.y.title.text = data.selected_type === 'nominal' ? 'Nominal (Rp)' :
                    'Jumlah Pengajuan';
                barChart.update();

                // Line Chart
                lineChart.data.labels = data.periodData.map(p => p.periode || 'Tidak Ada Data');
                lineChart.data.datasets[0].data = data.periodData.map(p => Number(p[data.selected_type_line ===
                    'nominal' ? 'disetujui_nominal' : 'disetujui_jumlah'] ?? 0));
                lineChart.data.datasets[1].data = data.periodData.map(p => Number(p[data.selected_type_line ===
                    'nominal' ? 'ditolak_nominal' : 'ditolak_jumlah'] ?? 0));
                lineChart.options.scales.y.title.text = data.selected_type_line === 'nominal' ? 'Nominal (Rp)' :
                    'Jumlah Pengajuan';
                lineChart.update();

                pieChart.data.labels = jenjangData.map(it => it.jenjang || '');
                pieChart.data.datasets[0].data = jenjangData.map(it => Number(it.jumlah ?? 0));
                pieChart.data.datasets[0].backgroundColor = spunindoPalette.slice(0, Math.min(jenjangData.length,
                    spunindoPalette.length));
                pieChart.update();
                if (pieNoData && ctxPie && ctxPie.canvas && ctxPie.canvas.parentElement) {
                    togglePieChartVisibility(jenjangData);
                }
            }

            // Fetch chart data
            async function fetchChartData(filters = {}) {
                try {
                    const url = new URL("{{ url('dashboard') }}");

                    Object.keys(filters).forEach(k => {
                        if (filters[k] !== '' && filters[k] !== null && typeof filters[k] !==
                            'undefined') {
                            url.searchParams.append(k, filters[k]);
                        }
                    });

                    const res = await fetch(url.toString(), {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    });

                    if (!res.ok) throw new Error(`Network response was not ok: ${res.status}`);
                    const data = await res.json();
                    // console.log('Fetched Chart Data:', data);
                    updateChartsFromData(data);
                } catch (err) {
                    console.error('Error fetching chart data:', err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: 'Terjadi kesalahan saat memperbarui grafik. Silakan coba lagi.',
                        confirmButtonColor: '#008384'
                    });
                }
            }

            // Collect filter values
            function collectFilters() {
                return {
                    periode_id_bar: document.getElementById('periode_id_bar')?.value ?? '',
                    periode_id_pie: document.getElementById('periode_id_pie')?.value ?? '',
                    type: document.getElementById('type')?.value ?? '',
                    type_line: document.getElementById('type_line')?.value ?? '',
                    dept_id: document.getElementById('dept_id')?.value ?? '',
                    start_year: document.getElementById('start_year')?.value ?? '',
                    end_year: document.getElementById('end_year')?.value ?? ''
                };
            }

            // Add filter change listeners
            const filterSelectors = ['#periode_id_bar', '#periode_id_pie', '#type', '#type_line', '#dept_id',
                '#start_year', '#end_year'
            ];
            filterSelectors.forEach(sel => {
                const el = document.querySelector(sel);
                if (!el) return;
                el.addEventListener('change', function() {
                    const start = document.getElementById('start_year')?.value;
                    const end = document.getElementById('end_year')?.value;
                    const dateError = document.getElementById('dateError');
                    if (start && end && new Date(start) > new Date(end)) {
                        dateError.classList.remove('d-none');
                        return;
                    } else {
                        dateError.classList.add('d-none');
                    }
                    const filters = collectFilters();
                    // console.log('Filters Changed:', filters);
                    fetchChartData(filters);
                });
            });

            // Clear date filter
            const clearDateFilterBtn = document.getElementById('clearDateFilter');
            if (clearDateFilterBtn) {
                clearDateFilterBtn.addEventListener('click', function() {
                    console.log('Clear date filter clicked');
                    const start = document.getElementById('start_year');
                    const end = document.getElementById('end_year');
                    const dateError = document.getElementById('dateError');
                    if (start) start.value = '';
                    if (end) end.value = '';
                    if (dateError) dateError.classList.add('d-none');
                    fetchChartData(collectFilters());
                });
            }

            // Prevent form submission
            ['barFilters', 'lineChartForm', 'pieFilters'].forEach(id => {
                const f = document.getElementById(id);
                if (f) f.addEventListener('submit', ev => ev.preventDefault());
            });

            // Quicklinks (cards)
            document.querySelectorAll('.dashboard-quicklink').forEach(el => {
                el.addEventListener('click', function() {
                    const detail = el.getAttribute('data-dashboard-detail');
                    const u = new URL('{{ url('/trbea') }}', window.location.origin);
                    u.searchParams.append('dashboard_detail', detail);
                    window.location.href = u.toString();
                });
            });

            // Copy Announcement (Alert Banner Button)
            document.querySelectorAll('.copy-announcement').forEach(button => {
                button.addEventListener('click', function() {
                    const text = this.getAttribute('data-text') || '';
                    const formLink = this.getAttribute('data-link') || '#';
                    const popupText = document.getElementById('popupText');
                    if (popupText) {
                        popupText.value = text;
                        const copyPopup = new bootstrap.Modal(document.getElementById('copyPopup'));
                        copyPopup.show();
                    } else {
                        console.error('Element #popupText not found');
                    }
                });
            });

            // Copy to Clipboard (Popup Modal Button)
            const copyToClipboardBtn = document.getElementById('copyToClipboardBtn');
            if (copyToClipboardBtn) {
                copyToClipboardBtn.addEventListener('click', function() {
                    const popupText = document.getElementById('popupText');
                    const textToCopy = popupText ? popupText.value.trim() : '';
                    if (textToCopy) {
                        navigator.clipboard.writeText(textToCopy).then(() => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Pesan berhasil disalin!',
                                text: 'Pesan telah tersalin ke clipboard.',
                                confirmButtonColor: '#f59e0b'
                            }).then(() => {
                                const popupElement = document.getElementById('copyPopup');
                                if (popupElement) {
                                    const popup = bootstrap.Modal.getInstance(popupElement);
                                    if (popup) popup.hide();
                                }
                            });
                        }).catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: 'Tidak bisa menyalin teks ke clipboard.',
                                confirmButtonColor: '#008384'
                            });
                            console.error('Clipboard error:', err);
                        });
                    } else {
                        console.error('No text available to copy');
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Tidak ada teks untuk disalin.',
                            confirmButtonColor: '#008384'
                        });
                    }
                });
            }
        });
    </script>
@endpush