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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])
    <div class="container-fluid py-4">
        {{-- Dashboard Widgets per Role --}}
        <div class="row dashboard-widget-row">
            @php $w = $widgets ?? []; @endphp
            @if (($dash['role'] ?? '') === 'admins')
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Total Pengajuan</p>
                                    <h4 class="mb-0">{{ $w['total_pengajuan'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #6c757d;">
                                    <i class="fas fa-list-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Pending Head</p>
                                    <h4 class="mb-0">{{ $w['pending_head'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #ffc107;">
                                    <i class="fas fa-user-clock"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Pending PPIC</p>
                                    <h4 class="mb-0">{{ $w['pending_ppic'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #17a2b8;">
                                    <i class="fas fa-inbox"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Finish</p>
                                    <h4 class="mb-0">{{ $w['finish'] ?? 0 }}</h4>
                                </div>
                                <div
                                    class="rounded-circle p-3 d-flex align-items-center justify-content-center bg-success text-white">
                                    <i class="fas fa-flag-checkered"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Parsial</p>
                                    <h4 class="mb-0">{{ $w['parsial'] ?? 0 }}</h4>
                                </div>
                                <div
                                    class="rounded-circle p-3 d-flex align-items-center justify-content-center bg-dark text-white">
                                    <i class="fas fa-chart-pie"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(($dash['role'] ?? '') === 'ppic')
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Total Pengajuan</p>
                                    <h4 class="mb-0">{{ $w['total_pengajuan'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #6c757d;">
                                    <i class="fas fa-list-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Pending</p>
                                    <h4 class="mb-0">{{ $w['pending_ppic'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #ffc107;">
                                    <i class="fas fa-exclamation-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Disetujui</p>
                                    <h4 class="mb-0">{{ $w['approve_ppic'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #28a745;">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Ditolak</p>
                                    <h4 class="mb-0">{{ $w['reject_ppic'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #dc3545;">
                                    <i class="fas fa-times-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Parsial</p>
                                    <h4 class="mb-0">{{ $w['parsial'] ?? 0 }}</h4>
                                </div>
                                <div
                                    class="rounded-circle p-3 d-flex align-items-center justify-content-center bg-dark text-white">
                                    <i class="fas fa-chart-pie"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Finish</p>
                                    <h4 class="mb-0">{{ $w['finish'] ?? 0 }}</h4>
                                </div>
                                <div
                                    class="rounded-circle p-3 d-flex align-items-center justify-content-center bg-success text-white">
                                    <i class="fas fa-flag-checkered"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(($dash['role'] ?? '') === 'head')
                <div class="col-xl-4 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Pending</p>
                                    <h4 class="mb-0">{{ $w['pending_head'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #ffc107;">
                                    <i class="fas fa-exclamation-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Disetujui</p>
                                    <h4 class="mb-0">{{ $w['approve_head'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #28a745;">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 mb-4">
                    <div class="card shadow-sm rounded-3 bg-white">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-muted mb-1 small fw-bold">Ditolak</p>
                                    <h4 class="mb-0">{{ $w['reject_head'] ?? 0 }}</h4>
                                </div>
                                <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                    style="background-color: #dc3545;">
                                    <i class="fas fa-times-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                @php
                    $spvCards = [
                        ['label' => 'Entry', 'count' => $w['entry'] ?? 0, 'color' => '#6c757d', 'icon' => 'fa-edit'],
                        [
                            'label' => 'Pending',
                            'count' => $w['pending'] ?? 0,
                            'color' => '#ffc107',
                            'icon' => 'fa-user-clock',
                        ],
                        [
                            'label' => 'Finish',
                            'count' => $w['finish'] ?? 0,
                            'color' => '#28a745',
                            'icon' => 'fa-flag-checkered',
                        ],
                        [
                            'label' => 'Parsial',
                            'count' => $w['parsial'] ?? 0,
                            'color' => '#17a2b8',
                            'icon' => 'fa-chart-pie',
                        ],
                        ['label' => 'Cancel', 'count' => $w['cancel'] ?? 0, 'color' => '#6c757d', 'icon' => 'fa-ban'],
                        [
                            'label' => 'Reject',
                            'count' => $w['reject'] ?? 0,
                            'color' => '#dc3545',
                            'icon' => 'fa-times-circle',
                        ],
                    ];
                @endphp
                @foreach ($spvCards as $card)
                    <div class="col-xl-4 col-md-6 mb-4">
                        <div class="card shadow-sm rounded-3 bg-white">
                            <div class="card-body p-4">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <p class="text-uppercase text-muted mb-1 small fw-bold">{{ $card['label'] }}</p>
                                        <h4 class="mb-0">{{ $card['count'] }}</h4>
                                    </div>
                                    <div class="rounded-circle p-3 d-flex align-items-center justify-content-center text-white"
                                        style="background-color: {{ $card['color'] }};">
                                        <i class="fas {{ $card['icon'] }}"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
        {{-- Ringkasan Peran --}}
        @php $role = $dash['role'] ?? 'user'; @endphp
        <div class="row dashboard-chart-anim">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0 p-3 d-flex flex-wrap justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <h6 class="mb-0">Grafik Pengajuan PR</h6>
                            <span class="badge bg-primary">{{ $dash['range']['label'] ?? '' }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <button type="button" id="dateRangeBtn" class="btn btn-outline-dark btn-sm">
                                <i class="fas fa-calendar-alt"></i>
                                {{ \Carbon\Carbon::parse($dash['range']['start'])->format('d/m/Y') }}
                                - {{ \Carbon\Carbon::parse($dash['range']['end'])->format('d/m/Y') }}
                            </button>
                            <a href="?range=1m" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-sync-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body chart-bg">
                        <div class="row">
                            <style>
                                /* Card Interactions for Widgets */
                                @keyframes fadeInUp {
                                    from { opacity: 0; transform: translateY(15px); }
                                    to { opacity: 1; transform: translateY(0); }
                                }
                                
                                .dashboard-widget-row > div {
                                    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
                                    opacity: 0;
                                }
                                .dashboard-widget-row > div:nth-child(1) { animation-delay: 0.05s; }
                                .dashboard-widget-row > div:nth-child(2) { animation-delay: 0.1s; }
                                .dashboard-widget-row > div:nth-child(3) { animation-delay: 0.15s; }
                                .dashboard-widget-row > div:nth-child(4) { animation-delay: 0.2s; }
                                .dashboard-widget-row > div:nth-child(5) { animation-delay: 0.25s; }
                                .dashboard-widget-row > div:nth-child(6) { animation-delay: 0.3s; }
                                
                                .dashboard-chart-anim {
                                    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
                                    animation-delay: 0.2s;
                                    opacity: 0;
                                }
                                
                                .dashboard-table-anim {
                                    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
                                    animation-delay: 0.3s;
                                    opacity: 0;
                                }

                                .dashboard-widget-row .card {
                                    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                                    border: 1px solid rgba(0,0,0,0.05);
                                    border-radius: 12px;
                                }
                                .dashboard-widget-row .card:hover {
                                    transform: translateY(-5px);
                                    box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
                                    border-color: rgba(0,0,0,0.08);
                                }
                                
                                /* Icon circular background hover */
                                .dashboard-widget-row .card .rounded-circle {
                                    transition: transform 0.3s ease;
                                }
                                .dashboard-widget-row .card:hover .rounded-circle {
                                    transform: scale(1.15) rotate(10deg);
                                }

                                /* Chart & Data Card Styling */
                                .card {
                                    border-radius: 12px;
                                    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
                                    border: none;
                                }
                                .card-header {
                                    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
                                    background-color: #ffffff;
                                    border-top-left-radius: 12px !important;
                                    border-top-right-radius: 12px !important;
                                }
                                
                                /* Date Range Button Styling */
                                #dateRangeBtn {
                                    border-radius: 8px;
                                    font-weight: 500;
                                    transition: all 0.2s ease;
                                    background-color: #ffffff;
                                    border: 1px solid #dee2e6;
                                }
                                #dateRangeBtn:hover {
                                    background-color: #f8f9fa;
                                    color: #344767;
                                    border-color: #c1c9d2;
                                    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
                                }

                                /* Table hover styles */
                                .table-hover tbody tr {
                                    transition: background-color 0.2s ease, transform 0.2s ease;
                                }
                                .table-hover tbody tr:hover {
                                    background-color: #f8f9fa;
                                    transform: scale(1.001);
                                }

                                /* Chart specific */
                                .chart-container {
                                    position: relative;
                                    height: 320px;
                                    margin: 0 -10px;
                                }
                                .chart-container canvas {
                                    max-height: 320px;
                                }
                                @media (max-width: 768px) {
                                    .chart-container {
                                        height: 260px;
                                    }
                                    .chart-container canvas {
                                        max-height: 260px;
                                    }
                                }

                                /* Smooth background for the card body where chart is */
                                .card-body.chart-bg {
                                    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
                                    border-bottom-left-radius: 12px;
                                    border-bottom-right-radius: 12px;
                                }
                            </style>
                            <div class="col-12 mb-3">
                                <div class="chart-container">
                                    <canvas id="prDailyChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- ============================================================ --}}
        {{-- Tabel Ringkasan PRA PR (Header-Level) — Berbasis Role      --}}
        {{-- ============================================================ --}}
        @php $recentPrs = $dash['recentPrs'] ?? collect(); @endphp

        <div class="row mt-4 dashboard-table-anim">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    {{-- Header Card --}}
                    <div class="card-header bg-white pb-0 pt-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-clipboard-list text-primary me-2"></i>
                            @if ($role === 'spv')
                                Ringkasan PRA PR
                            @elseif (in_array($role, ['head', 'ppic', 'admins']))
                                Antrian Approval <span
                                    class="badge bg-warning text-white ms-1">{{ $w['pending_head'] ?? ($w['pending_ppic'] ?? 0) }}</span>
                            @elseif ($role === 'admins')
                                Seluruh PRA PR
                            @else
                                Pantauan PRA PR
                            @endif
                        </h6>

                        <div class="d-flex align-items-center gap-2">
                            @if (in_array($role, ['head', 'ppic']))
                                <a href="{{ url('prapr') }}" class="btn btn-sm btn-primary mb-0">
                                    Lihat Semua
                                </a>
                            @endif

                            @if (in_array($role, ['spv', 'admins']))
                                <a href="{{ url('prapr') }}" class="btn btn-sm btn-primary mb-0">Lihat Semua</a>
                            @endif
                        </div>
                    </div>

                    {{-- Body Card --}}
                    <div class="card-body px-0 pt-3 pb-2">
                        @if ($recentPrs->isEmpty())
                            {{-- Empty State Simpel --}}
                            <div class="text-center p-4">
                                <i class="fas fa-folder-open fa-3x text-light mb-3"></i>
                                <h6 class="text-muted">Tidak ada data PRA PR saat ini.</h6>
                            </div>
                        @else
                            {{-- Tabel Data --}}
                            <div class="table-responsive">
                                <table class="table table-hover align-items-center mb-0">
                                    <thead class="bg-light text-secondary text-xs font-weight-bolder">
                                        <tr>
                                            {{-- KUNCI ALIGNMENT: Semua th diberikan px-3 dan text-align yang tegas --}}
                                            <th class="text-center px-3" style="width: 5%">#</th>
                                            <th class="text-start px-3">NO PRA PR</th>
                                            <th class="text-start px-3">TGL PENGAJUAN</th>

                                            @if (in_array($role, ['head', 'ppic', 'admins']))
                                                <th class="text-start px-3">NAMA PEMOHON</th>
                                            @endif

                                            @if (in_array($role, ['head', 'ppic', 'admins']))
                                                <th class="text-start px-3">DEPARTEMEN</th>
                                            @endif

                                            <th class="text-center px-3">
                                                {{ in_array($role, ['spv', 'admins']) ? 'TOTAL BARANG' : 'BEBAN TUGAS' }}
                                            </th>

                                            @if (in_array($role, ['spv', 'admins']))
                                                <th class="text-center px-3">STATUS</th>
                                            @endif

                                            <th class="text-center px-3">AKSI</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-sm">
                                        @foreach ($recentPrs as $idx => $pr)
                                            <tr>
                                                {{-- KUNCI ALIGNMENT: Semua td menyamakan text-align dan px-3 dari th di atasnya --}}
                                                <td class="align-middle text-center px-3 text-muted">{{ $idx + 1 }}
                                                </td>
                                                <td class="align-middle text-start px-3 fw-bold text-dark">
                                                    {{ $pr->no_prapr }}</td>
                                                <td class="align-middle text-start px-3">
                                                    {{ \Carbon\Carbon::parse($pr->tanggal_pengajuan)->format('d M Y') }}
                                                </td>

                                                @if (in_array($role, ['head', 'ppic', 'admins']))
                                                    <td class="align-middle text-start px-3">
                                                        {{ $pr->user ? $pr->user->firstname . ' ' . $pr->user->lastname : '-' }}
                                                    </td>
                                                @endif

                                                @if (in_array($role, ['head', 'ppic', 'admins']))
                                                    <td class="align-middle text-start px-3">
                                                        {{ $pr->departemen->nama_departemen ?? '-' }}</td>
                                                @endif

                                                <td class="align-middle text-center px-3">
                                                    @if ($role === 'head')
                                                        <span class="text-muted fw-bold">{{ $pr->jumlah_pending ?? 0 }}
                                                            Item</span>
                                                    @elseif ($role === 'ppic')
                                                        <span class="text-muted fw-bold">{{ $pr->jumlah_pending ?? 0 }}
                                                            Item</span>
                                                    @else
                                                        <span class="text-muted fw-bold">{{ $pr->jumlah_barang ?? 0 }}
                                                            Item</span>
                                                    @endif
                                                </td>

                                                @if (in_array($role, ['spv', 'admins']))
                                                    <td class="align-middle text-center px-3">
                                                        @php
                                                            $statusColors = [
                                                                'entry' => '#6c757d',
                                                                'pending' => '#ffc107',
                                                                'finish' => '#28a745',
                                                                'parsial' => '#17a2b8',
                                                                'reject' => '#dc3545',
                                                                'cancel' => '#6c757d',
                                                            ];
                                                            $bgColor = $statusColors[$pr->status] ?? '#6c757d';
                                                        @endphp
                                                        <span class="badge badge-sm"
                                                            style="background-color: {{ $bgColor }}; color: #ffffff;">
                                                            {{ strtoupper($pr->status) }}
                                                        </span>
                                                    </td>
                                                @endif

                                                <td class="align-middle text-center px-3">
                                                    @php
                                                        // Logika warna dihapus karena semua pakai warna yang sama
                                                        // Sisa logika untuk teks tombol saja
                                                        $btnText = in_array($role, ['head', 'ppic', 'admins'])
                                                            ? 'Review'
                                                            : 'Detail';
                                                    @endphp
                                                    <a href="{{ url('prapr/show/' . $pr->id) }}"
                                                        class="btn btn-sm btn-primary mb-0 px-3 shadow-sm text-white">
                                                        {{ $btnText }}
                                                    </a>
                                                </td>   
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts JS --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        (function() {
            const dailyLabels = @json($dash['series']['daily']['labels'] ?? []);
            const dailyData = @json($dash['series']['daily']['data'] ?? []);
            const perDepartmentSeries = @json($dash['series']['per_department'] ?? []);

            const palette = [{
                    border: '#0ea5e9',
                    bg: 'rgba(14, 165, 233, 0.15)'
                }, // Sky blue
                {
                    border: '#14b8a6',
                    bg: 'rgba(20, 184, 166, 0.15)'
                }, // Teal
                {
                    border: '#f59e0b',
                    bg: 'rgba(245, 158, 11, 0.15)'
                }, // Amber
                {
                    border: '#a855f7',
                    bg: 'rgba(168, 85, 247, 0.15)'
                }, // Purple
                {
                    border: '#e11d48',
                    bg: 'rgba(225, 29, 72, 0.15)'
                }, // Rose
                {
                    border: '#15803d',
                    bg: 'rgba(21, 128, 61, 0.15)'
                }, // Green
                {
                    border: '#84cc16',
                    bg: 'rgba(132, 204, 22, 0.15)'
                }, // Lime
                {
                    border: '#f97316',
                    bg: 'rgba(249, 115, 22, 0.15)'
                }, // Orange
                {
                    border: '#6366f1',
                    bg: 'rgba(99, 102, 241, 0.15)'
                }, // Indigo
                {
                    border: '#10b981',
                    bg: 'rgba(16, 185, 129, 0.15)'
                } // Emerald
            ];

            const datasets = [];

            perDepartmentSeries.forEach((series, idx) => {
                const colors = palette[idx % palette.length];
                datasets.push({
                    label: series.label,
                    data: series.data || [],
                    borderColor: colors.border,
                    backgroundColor: (ctx) => {
                        const chart = ctx.chart;
                        const {
                            ctx: canvasCtx,
                            chartArea
                        } = chart;
                        if (!chartArea) return colors.bg;

                        const gradient = canvasCtx.createLinearGradient(0, chartArea.top, 0,
                            chartArea.bottom);
                        const borderColor = colors.border;
                        const [r, g, b] = borderColor.match(/\d+/g).map(Number);

                        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.25)`);
                        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0.01)`);
                        return gradient;
                    },
                    tension: 0.4,
                    cubicInterpolationMode: 'monotone',
                    fill: true,
                    pointRadius: 0,
                    pointHoverRadius: 5,
                    borderWidth: 2.5,
                    pointBackgroundColor: colors.border,
                    hoverBackgroundColor: colors.border
                });
            });

            // Fallback: keep chart visible if per-department series is empty
            if (!datasets.length) {
                datasets.push({
                    label: 'Pengajuan PR',
                    data: dailyData,
                    borderColor: '#0ea5e9',
                    backgroundColor: (ctx) => {
                        const chart = ctx.chart;
                        const {
                            ctx: canvasCtx,
                            chartArea
                        } = chart;
                        if (!chartArea) return 'rgba(14, 165, 233, 0.15)';

                        const gradient = canvasCtx.createLinearGradient(0, chartArea.top, 0, chartArea
                            .bottom);
                        gradient.addColorStop(0, 'rgba(14, 165, 233, 0.25)');
                        gradient.addColorStop(1, 'rgba(14, 165, 233, 0.01)');
                        return gradient;
                    },
                    tension: 0.4,
                    cubicInterpolationMode: 'monotone',
                    fill: true,
                    pointRadius: 0,
                    pointHoverRadius: 5,
                    borderWidth: 2.5,
                    pointBackgroundColor: '#0ea5e9',
                    hoverBackgroundColor: '#0ea5e9'
                });
            }

            const ctx1 = document.getElementById('prDailyChart');
            if (ctx1) {
                new Chart(ctx1, {
                    type: 'line',
                    data: {
                        labels: dailyLabels,
                        datasets: datasets
                    },
                    options: {
                        animation: {
                            duration: 1500,
                            easing: 'easeOutQuart'
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'bottom',
                                labels: {
                                    usePointStyle: true,
                                    boxWidth: 7,
                                    boxHeight: 7,
                                    padding: 16,
                                    font: {
                                        size: 13,
                                        weight: '500'
                                    }
                                }
                            },
                            tooltip: {
                                enabled: true,
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(255,255,255,0.95)',
                                titleColor: '#344767',
                                bodyColor: '#67748e',
                                borderColor: 'rgba(0,0,0,0.08)',
                                borderWidth: 1,
                                padding: 12,
                                boxPadding: 6,
                                usePointStyle: true,
                                titleFont: {
                                    size: 13,
                                    weight: '600',
                                    family: "'Open Sans', sans-serif"
                                },
                                bodyFont: {
                                    size: 12,
                                    family: "'Open Sans', sans-serif"
                                },
                                cornerRadius: 8
                            }
                        },
                        scales: {
                            x: {
                                grid: {
                                    display: false,
                                    drawBorder: false,
                                    color: 'rgba(0,0,0,0.05)',
                                    lineWidth: 0.5
                                },
                                ticks: {
                                    font: {
                                        size: 11
                                    },
                                    color: 'rgba(0,0,0,0.6)'
                                }
                            },
                            y: {
                                beginAtZero: true,
                                grid: {
                                    display: true,
                                    drawBorder: false,
                                    color: 'rgba(0,0,0,0.05)',
                                    lineWidth: 0.5
                                },
                                ticks: {
                                    precision: 0,
                                    font: {
                                        size: 11
                                    },
                                    color: 'rgba(0,0,0,0.6)'
                                }
                            }
                        }
                    }
                });
            }

        })();
    </script>
    <script>
        // Date range picker on button
        (function() {
            const btn = document.getElementById('dateRangeBtn');
            if (!btn || typeof $ === 'undefined' || !$.fn.daterangepicker) return;

            const startInit = moment("{{ $dash['range']['start'] ?? '' }}", 'YYYY-MM-DD', true).isValid() ? moment(
                "{{ $dash['range']['start'] ?? '' }}") : moment().startOf('month');
            const endInit = moment("{{ $dash['range']['end'] ?? '' }}", 'YYYY-MM-DD', true).isValid() ? moment(
                "{{ $dash['range']['end'] ?? '' }}") : moment().endOf('month');

            $('#dateRangeBtn').daterangepicker({
                startDate: startInit,
                endDate: endInit,
                opens: 'center',
                showDropdowns: true,
                alwaysShowCalendars: true,
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD',
                    applyLabel: 'Apply',
                    cancelLabel: 'Cancel',
                    daysOfWeek: ['M', 'S', 'S', 'R', 'K', 'J', 'S'],
                    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov',
                        'Des'
                    ]
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Day': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Day': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')]
                }
            }, function(start, end) {
                const url = new URL(window.location.href);
                url.searchParams.set('start', start.format('YYYY-MM-DD'));
                url.searchParams.set('end', end.format('YYYY-MM-DD'));
                url.searchParams.delete('range');
                window.location.href = url.toString();
            });

            // Visual feedback: set button text to chosen range
            $('#dateRangeBtn').on('apply.daterangepicker', function(ev, picker) {
                const txt = picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY');
                this.innerHTML = '<i class="fas fa-calendar-alt"></i> ' + txt;
            });
        })();
    </script>
    <script>
        // Make dashboard widgets clickable by title mapping
        (function() {
            const reservasiUrl = '{{ url('prapr') }}';
            const historyUrl = '{{ url('histpr') }}';

            const cards = document.querySelectorAll('.dashboard-widget-row .card');
            cards.forEach((card) => {
                const titleEl = card.querySelector('p');
                if (!titleEl) return;

                const title = (titleEl.textContent || '').toLowerCase().trim();
                let targetUrl = null;

                if (title.includes('pending')) {
                    targetUrl = reservasiUrl;
                } else if (title.includes('disetujui') || title.includes('approve')) {
                    targetUrl = historyUrl + '?status=approve';
                } else if (title.includes('ditolak') || title.includes('reject')) {
                    targetUrl = historyUrl + '?status=reject';
                }

                if (!targetUrl) return;

                card.style.cursor = 'pointer';
                card.addEventListener('click', function() {
                    window.location.href = targetUrl;
                });
            });
        })();
    </script>
@endsection