@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid">

    {{-- ══ HEADER ══ --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 dashboard-header">
                <div class="card-body text-white p-4">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h3 class="mb-1 fw-bold">
                                <i class="bi bi-speedometer2"></i>
                                @if(Auth::user()->role === 'super_admin') Dashboard Admin
                                @elseif(Auth::user()->role === 'auditor') Dashboard Auditor
                                @else Dashboard Departemen
                                @endif
                            </h3>
                            <p class="mb-0 opacity-75">Selamat datang, <strong>{{ Auth::user()->name }}</strong>!</p>
                        </div>

                        {{-- Filter area: Rentang + Departemen/AuditType berdampingan --}}
                        <div class="d-flex align-items-center gap-2 flex-wrap">

                            {{-- Dropdown Rentang Bulan --}}
                            <div class="d-flex align-items-center gap-2">
                                <span class="text-white opacity-80 small fw-semibold text-nowrap">
                                    <i class="bi bi-calendar-range me-1"></i>Rentang
                                </span>
                                <select id="globalRangeSelect" class="filter-select">
                                    <option value="3"  {{ $rangeMonths == 3  ? 'selected' : '' }}>3 Bulan Terakhir</option>
                                    <option value="6"  {{ $rangeMonths == 6  ? 'selected' : '' }}>6 Bulan Terakhir</option>
                                    <option value="12" {{ $rangeMonths == 12 ? 'selected' : '' }}>12 Bulan Terakhir</option>
                                </select>
                            </div>

                            {{-- Divider --}}
                            <div class="vr opacity-50" style="height:28px;"></div>

                            {{-- Dropdown Departemen / Audit Type --}}
                            @if(in_array(Auth::user()->role, ['super_admin', 'auditor']))
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-white opacity-80 small fw-semibold text-nowrap">
                                        <i class="bi bi-building me-1"></i>Departemen
                                    </span>
                                    <select id="deptSelect" class="filter-select">
                                        <option value="all" {{ $departmentFilter === 'all' ? 'selected' : '' }}>Semua Departemen</option>
                                        @foreach($departments as $dept)
                                            <option value="{{ $dept->id }}" {{ $departmentFilter == $dept->id ? 'selected' : '' }}>
                                                {{ $dept->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-white opacity-80 small fw-semibold text-nowrap">
                                        <i class="bi bi-clipboard-check me-1"></i>Tipe Audit
                                    </span>
                                    <select id="auditSelect" class="filter-select">
                                        <option value="all" {{ $auditTypeFilter === 'all' ? 'selected' : '' }}>Semua Tipe Audit</option>
                                        @foreach($auditTypes as $type)
                                            <option value="{{ $type->id }}" {{ $auditTypeFilter == $type->id ? 'selected' : '' }}>
                                                {{ $type->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

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

    {{-- ══ STAT CARDS (nilai diupdate JS saat ganti rentang) ══ --}}
    <div class="row g-3 mb-4">
        @if(Auth::user()->role === 'super_admin')
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Total Laporan</p>
                                <h2 class="stat-value text-primary" id="statCard0">{{ $stats['total_reports'] }}</h2>
                            </div>
                            <div class="stat-icon bg-primary bg-opacity-10">
                                <i class="bi bi-file-earmark-text text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Menunggu</p>
                                <h2 class="stat-value text-warning" id="statCard1">{{ $stats['pending'] }}</h2>
                            </div>
                            <div class="stat-icon bg-warning bg-opacity-10">
                                <i class="bi bi-clock-history text-warning"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Diperbaiki</p>
                                <h2 class="stat-value text-success" id="statCard2">{{ $stats['completed'] }}</h2>
                            </div>
                            <div class="stat-icon bg-success bg-opacity-10">
                                <i class="bi bi-check-circle text-success"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Disetujui</p>
                                <h2 class="stat-value" style="color:#9b59b6;" id="statCard3">{{ $stats['approved'] }}</h2>
                            </div>
                            <div class="stat-icon" style="background:rgba(155,89,182,0.1);">
                                <i class="bi bi-award" style="color:#9b59b6;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        @elseif(Auth::user()->role === 'auditor')
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Laporan Saya</p>
                                <h2 class="stat-value text-primary" id="statCard0">{{ $stats['my_reports'] }}</h2>
                            </div>
                            <div class="stat-icon bg-primary bg-opacity-10">
                                <i class="bi bi-clipboard-data text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Menunggu</p>
                                <h2 class="stat-value text-warning" id="statCard1">{{ $stats['pending'] }}</h2>
                            </div>
                            <div class="stat-icon bg-warning bg-opacity-10">
                                <i class="bi bi-hourglass-split text-warning"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Perlu Ditinjau</p>
                                <h2 class="stat-value text-info" id="statCard2">{{ $stats['need_review'] }}</h2>
                            </div>
                            <div class="stat-icon bg-info bg-opacity-10">
                                <i class="bi bi-eye-fill text-info"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Disetujui</p>
                                <h2 class="stat-value text-success" id="statCard3">{{ $stats['approved'] }}</h2>
                            </div>
                            <div class="stat-icon bg-success bg-opacity-10">
                                <i class="bi bi-check-circle-fill text-success"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        @else
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Ditugaskan</p>
                                <h2 class="stat-value text-primary" id="statCard0">{{ $stats['assigned'] }}</h2>
                            </div>
                            <div class="stat-icon bg-primary bg-opacity-10">
                                <i class="bi bi-inbox-fill text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Menunggu</p>
                                <h2 class="stat-value text-warning" id="statCard1">{{ $stats['pending'] }}</h2>
                            </div>
                            <div class="stat-icon bg-warning bg-opacity-10">
                                <i class="bi bi-exclamation-triangle text-warning"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Diperbaiki</p>
                                <h2 class="stat-value text-success" id="statCard2">{{ $stats['fixed'] }}</h2>
                            </div>
                            <div class="stat-icon bg-success bg-opacity-10">
                                <i class="bi bi-tools text-success"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card stat-card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="stat-label">Disetujui</p>
                                <h2 class="stat-value" style="color:#9b59b6;" id="statCard3">{{ $stats['approved'] }}</h2>
                            </div>
                            <div class="stat-icon" style="background:rgba(155,89,182,0.1);">
                                <i class="bi bi-patch-check-fill" style="color:#9b59b6;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- Label rentang aktif --}}
    <div class="mb-3">
        <span class="range-info-badge" id="rangeBadge">
            <i class="bi bi-calendar2-check"></i>
            Menampilkan data <strong id="rangeLabel">{{ $rangeMonths }} bulan terakhir</strong>
        </span>
    </div>

    {{-- ══ ROW 1: Pie (kiri) + Bar Status per Bulan (kanan) ══ --}}
    <div class="row g-4 mb-4">

        {{-- Pie Chart --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-pie-chart-fill text-primary"></i> Distribusi Status
                    </h5>
                    <small class="text-muted">
                        @if(in_array(Auth::user()->role, ['super_admin', 'auditor']))
                            @if($departmentFilter === 'all') Semua Departemen
                            @else {{ $departments->firstWhere('id', $departmentFilter)->name ?? '-' }}
                            @endif
                        @else
                            @if($auditTypeFilter === 'all') Semua Tipe Audit
                            @else {{ $auditTypes->firstWhere('id', $auditTypeFilter)->name ?? '-' }}
                            @endif
                        @endif
                    </small>
                </div>
                <div class="card-body d-flex flex-column">
                    <div style="position:relative; height:240px;">
                        <canvas id="statusPieChart"></canvas>
                    </div>
                    <div class="mt-4 d-flex flex-column gap-2">
                        @php
                            $pillData = [
                                ['label'=>'Diajukan',     'pct'=>$chartData['percentages'][0], 'val'=>$chartData['data'][0], 'color'=>'#3498db'],
                                ['label'=>'Dalam Proses', 'pct'=>$chartData['percentages'][1], 'val'=>$chartData['data'][1], 'color'=>'#f39c12'],
                                ['label'=>'Diperbaiki',   'pct'=>$chartData['percentages'][2], 'val'=>$chartData['data'][2], 'color'=>'#27ae60'],
                                ['label'=>'Disetujui',    'pct'=>$chartData['percentages'][3], 'val'=>$chartData['data'][3], 'color'=>'#9b59b6'],
                            ];
                        @endphp
                        @foreach($pillData as $pill)
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <div class="pie-dot" style="background:{{ $pill['color'] }};"></div>
                                    <span class="small text-muted">{{ $pill['label'] }}</span>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="fw-semibold small" style="color:{{ $pill['color'] }};">{{ $pill['val'] }}</span>
                                    <span class="status-pill" style="background:{{ $pill['color'] }}1a; color:{{ $pill['color'] }}; border:1px solid {{ $pill['color'] }}40;">
                                        {{ $pill['pct'] }}%
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Bar Status per Bulan — TIDAK ada dropdown rentang sendiri, ikut global --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                        <div>
                            <h5 class="mb-0 fw-bold">
                                <i class="bi bi-bar-chart-steps text-primary"></i> Status Laporan per Bulan
                            </h5>
                            <small class="text-muted" id="statusBarSubtitle">{{ $rangeMonths }} bulan terakhir</small>
                        </div>
                        {{-- Mini summary pills status --}}
                        <div class="d-flex flex-wrap gap-2" id="statusSummaryPills">
                            @php
                                $n = $rangeMonths;
                                $sD  = array_sum(array_slice($monthlyStatusData['diajukan'],    -$n));
                                $sP  = array_sum(array_slice($monthlyStatusData['dalam_proses'],-$n));
                                $sF  = array_sum(array_slice($monthlyStatusData['diperbaiki'],  -$n));
                                $sA  = array_sum(array_slice($monthlyStatusData['disetujui'],   -$n));
                            @endphp
                            <span class="summary-pill" style="background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;" id="spDiajukan">
                                <span class="legend-dot" style="background:#3498db;"></span> Diajukan: <strong>{{ $sD }}</strong>
                            </span>
                            <span class="summary-pill" style="background:#fef3c7;color:#b45309;border:1px solid #fde68a;" id="spDalamProses">
                                <span class="legend-dot" style="background:#f39c12;"></span> Proses: <strong>{{ $sP }}</strong>
                            </span>
                            <span class="summary-pill" style="background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;" id="spDiperbaiki">
                                <span class="legend-dot" style="background:#27ae60;"></span> Diperbaiki: <strong>{{ $sF }}</strong>
                            </span>
                            <span class="summary-pill" style="background:#f3e8ff;color:#7e22ce;border:1px solid #e9d5ff;" id="spDisetujui">
                                <span class="legend-dot" style="background:#9b59b6;"></span> Disetujui: <strong>{{ $sA }}</strong>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body d-flex flex-column">
                    <div style="position:relative; flex:1; min-height:260px;">
                        <canvas id="statusBarChart"></canvas>
                    </div>
                    <div class="mt-3 d-flex flex-wrap gap-3 justify-content-center">
                        <span class="chart-legend-item"><span class="legend-dot" style="background:#3498db;"></span><span class="small text-muted">Diajukan</span></span>
                        <span class="chart-legend-item"><span class="legend-dot" style="background:#f39c12;"></span><span class="small text-muted">Dalam Proses</span></span>
                        <span class="chart-legend-item"><span class="legend-dot" style="background:#27ae60;"></span><span class="small text-muted">Diperbaiki</span></span>
                        <span class="chart-legend-item"><span class="legend-dot" style="background:#9b59b6;"></span><span class="small text-muted">Disetujui</span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══ ROW 2: Bar Total Laporan per Bulan ══ --}}
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                        <div>
                            <h5 class="mb-0 fw-bold">
                                <i class="bi bi-bar-chart-fill text-success"></i> Laporan per Bulan
                            </h5>
                            <small class="text-muted" id="monthlyBarSubtitle">{{ $rangeMonths }} bulan terakhir</small>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            @php
                                $slicedData  = array_slice($monthlyChartData['data'], -$rangeMonths);
                                $mTotal      = array_sum($slicedData);
                                $mMax        = count($slicedData) > 0 ? max($slicedData) : 0;
                                $mAvg        = $mTotal > 0 ? round($mTotal / $rangeMonths, 1) : 0;
                                $mPeakIdx    = $mMax > 0 ? array_search($mMax, $slicedData) : false;
                                $slicedLbls  = array_slice($monthlyChartData['labels'], -$rangeMonths);
                                $mPeakLabel  = $mPeakIdx !== false ? ($slicedLbls[$mPeakIdx] ?? '-') : '-';
                            @endphp
                            <span class="summary-pill pill-blue" id="pillTotal">
                                <i class="bi bi-stack"></i> Total: <strong id="pillTotalVal">{{ $mTotal }}</strong>
                            </span>
                            <span class="summary-pill pill-green" id="pillMax">
                                <i class="bi bi-graph-up-arrow"></i> Tertinggi: <strong id="pillMaxVal">{{ $mMax }}</strong>
                            </span>
                            <span class="summary-pill pill-orange" id="pillAvg">
                                <i class="bi bi-calculator"></i> Rata-rata: <strong id="pillAvgVal">{{ $mAvg }}</strong>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div style="position:relative; height:300px;">
                        <canvas id="monthlyBarChart"></canvas>
                    </div>
                    <div class="mt-3 d-flex align-items-center gap-2" id="peakBadgeWrap" style="{{ $mMax > 0 ? '' : 'display:none;' }}">
                        <span class="peak-badge">
                            <i class="bi bi-trophy-fill"></i> Puncak: <span id="peakText">{{ $mPeakLabel }} ({{ $mMax }} laporan)</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══ RECENT REPORTS ══ --}}
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-clock-history text-primary"></i> Laporan Terbaru
                    </h5>
                    <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-list-ul"></i> Lihat Semua
                    </a>
                </div>
                <div class="card-body p-0">
                    @if($recentReports->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        @if(in_array(Auth::user()->role, ['super_admin', 'auditor']))
                                            <th class="border-0">Departemen</th>
                                        @else
                                            <th class="border-0">Tipe Audit</th>
                                        @endif
                                        <th class="border-0">Jenis Masalah</th>
                                        <th class="border-0">Lokasi</th>
                                        <th class="border-0 text-center">Status</th>
                                        <th class="border-0">Tanggal</th>
                                        <th class="border-0 text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentReports as $report)
                                        <tr>
                                            @if(in_array(Auth::user()->role, ['super_admin', 'auditor']))
                                                <td><span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary">{{ $report->department->name }}</span></td>
                                            @else
                                                <td><span class="badge bg-info bg-opacity-10 text-info border border-info">{{ $report->auditType->name }}</span></td>
                                            @endif
                                            <td><small class="text-muted">{{ Str::limit($report->issue_type, 35) }}</small></td>
                                            <td><small class="text-muted"><i class="bi bi-geo-alt"></i> {{ Str::limit($report->location, 28) }}</small></td>
                                            <td class="text-center">{!! $report->status_badge !!}</td>
                                            <td><small class="text-muted">{{ $report->created_at->format('d M Y') }}</small></td>
                                            <td class="text-center">
                                                <a href="{{ route('reports.show', $report) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1 opacity-50"></i>
                            <p class="mt-2 mb-0">Belum ada laporan</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Data mentah dari PHP (selalu 12 bulan penuh) ──
    const allLabels    = {!! json_encode($monthlyChartData['labels']) !!};
    const allDataTotal = {!! json_encode($monthlyChartData['data']) !!};
    const allStatus    = {!! json_encode($monthlyStatusData) !!};

    // Stats per status per bulan untuk hitung ulang saat ganti rentang
    // [total, submitted, fixed/in_progress, approved] per bulan
    const allMonthlyStats = {!! json_encode([
        'diajukan'     => $monthlyStatusData['diajukan'],
        'dalam_proses' => $monthlyStatusData['dalam_proses'],
        'diperbaiki'   => $monthlyStatusData['diperbaiki'],
        'disetujui'    => $monthlyStatusData['disetujui'],
        'total'        => $monthlyChartData['data'],
    ]) !!};

    let currentRange = {{ $rangeMonths }};

    // Helper
    function sliceLast(arr, n) { return arr.slice(-n); }
    function sumArr(arr)        { return arr.reduce((a,b) => a+b, 0); }

    // ── PIE CHART ──
    new Chart(document.getElementById('statusPieChart').getContext('2d'), {
        type: 'pie',
        data: {
            labels: {!! json_encode($chartData['labels']) !!},
            datasets: [{ data: {!! json_encode($chartData['data']) !!}, backgroundColor: {!! json_encode($chartData['colors']) !!}, borderWidth: 3, borderColor: '#fff', hoverOffset: 10 }]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: { backgroundColor: 'rgba(0,0,0,0.8)', padding: 12,
                    callbacks: { label: function(ctx) {
                        const total = ctx.dataset.data.reduce((a,b)=>a+b,0);
                        const pct = total > 0 ? ((ctx.parsed/total)*100).toFixed(1) : 0;
                        return ` ${ctx.label}: ${ctx.parsed} (${pct}%)`;
                    }}
                }
            },
            animation: { animateRotate: true, animateScale: true }
        }
    });

    // ── STATUS BAR CHART (Row 1) ──
    const statusBarChart = new Chart(document.getElementById('statusBarChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: sliceLast(allLabels, currentRange),
            datasets: [
                { label:'Diajukan',     data: sliceLast(allStatus.diajukan, currentRange),     backgroundColor:'rgba(52,152,219,0.80)',  borderColor:'#2980b9', borderWidth:1.5, borderRadius:4, borderSkipped:false },
                { label:'Dalam Proses', data: sliceLast(allStatus.dalam_proses, currentRange), backgroundColor:'rgba(243,156,18,0.80)',  borderColor:'#e67e22', borderWidth:1.5, borderRadius:4, borderSkipped:false },
                { label:'Diperbaiki',   data: sliceLast(allStatus.diperbaiki, currentRange),   backgroundColor:'rgba(39,174,96,0.80)',   borderColor:'#229954', borderWidth:1.5, borderRadius:4, borderSkipped:false },
                { label:'Disetujui',    data: sliceLast(allStatus.disetujui, currentRange),    backgroundColor:'rgba(155,89,182,0.80)',  borderColor:'#8e44ad', borderWidth:1.5, borderRadius:4, borderSkipped:false },
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: { backgroundColor:'rgba(0,0,0,0.82)', padding:12, titleFont:{size:13,weight:'bold'}, bodyFont:{size:12},
                    callbacks: { label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y} laporan` }
                }
            },
            scales: {
                x: { grid:{display:false}, ticks:{font:{size:11}, maxRotation:45} },
                y: { beginAtZero:true, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{stepSize:1, font:{size:11}, callback: val => Number.isInteger(val)?val:''} }
            }
        }
    });

    // ── MONTHLY BAR CHART (Row 2) ──
    function barBg(data)     { const mx=Math.max(...data); return data.map(v=>v===mx&&mx>0?'rgba(231,76,60,0.85)':'rgba(6,95,70,0.72)'); }
    function barBorder(data) { const mx=Math.max(...data); return data.map(v=>v===mx&&mx>0?'#c0392b':'#065F46'); }

    const monthlyBarChart = new Chart(document.getElementById('monthlyBarChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: sliceLast(allLabels, currentRange),
            datasets: [{
                label: 'Jumlah Laporan',
                data: sliceLast(allDataTotal, currentRange),
                backgroundColor: barBg(sliceLast(allDataTotal, currentRange)),
                borderColor:     barBorder(sliceLast(allDataTotal, currentRange)),
                borderWidth:2, borderRadius:6, borderSkipped:false,
            }]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: { backgroundColor:'rgba(0,0,0,0.82)', padding:12, titleFont:{size:13,weight:'bold'}, bodyFont:{size:12},
                    callbacks: {
                        label: ctx => ` ${ctx.parsed.y} laporan`,
                        afterLabel: ctx => { const t=ctx.chart.data.datasets[0].data.reduce((a,b)=>a+b,0); const p=t>0?((ctx.parsed.y/t)*100).toFixed(1):0; return ` ${p}% dari total`; }
                    }
                }
            },
            scales: {
                x: { grid:{display:false}, ticks:{font:{size:11}, maxRotation:45} },
                y: { beginAtZero:true, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{stepSize:1, font:{size:11}, callback: val=>Number.isInteger(val)?val:''} }
            }
        }
    });

    // ── UPDATE SEMUA saat ganti rentang bulan ──
    function applyRange(n) {
        currentRange = n;
        const labels = sliceLast(allLabels, n);
        const data   = sliceLast(allDataTotal, n);
        const mx     = data.length > 0 ? Math.max(...data) : 0;
        const tot    = sumArr(data);
        const avg    = n > 0 && tot > 0 ? (tot/n).toFixed(1) : 0;

        // ── 1. Update Stat Cards ──
        const sD = sumArr(sliceLast(allMonthlyStats.diajukan,    n));
        const sP = sumArr(sliceLast(allMonthlyStats.dalam_proses,n));
        const sF = sumArr(sliceLast(allMonthlyStats.diperbaiki,  n));
        const sA = sumArr(sliceLast(allMonthlyStats.disetujui,   n));
        const sT = sumArr(sliceLast(allMonthlyStats.total,       n));

        animateStat('statCard0', sT);
        animateStat('statCard1', sD);
        animateStat('statCard2', sF);
        animateStat('statCard3', sA);

        // ── 2. Update Status Bar Chart ──
        statusBarChart.data.labels           = labels;
        statusBarChart.data.datasets[0].data = sliceLast(allStatus.diajukan,    n);
        statusBarChart.data.datasets[1].data = sliceLast(allStatus.dalam_proses,n);
        statusBarChart.data.datasets[2].data = sliceLast(allStatus.diperbaiki,  n);
        statusBarChart.data.datasets[3].data = sliceLast(allStatus.disetujui,   n);
        statusBarChart.update();

        // ── 3. Update Monthly Bar Chart ──
        monthlyBarChart.data.labels                      = labels;
        monthlyBarChart.data.datasets[0].data            = data;
        monthlyBarChart.data.datasets[0].backgroundColor = barBg(data);
        monthlyBarChart.data.datasets[0].borderColor     = barBorder(data);
        monthlyBarChart.update();

        // ── 4. Update pills bulanan ──
        document.getElementById('pillTotalVal').textContent = tot;
        document.getElementById('pillMaxVal').textContent   = mx;
        document.getElementById('pillAvgVal').textContent   = avg;

        // ── 5. Update status summary pills ──
        document.getElementById('spDiajukan').querySelector('strong').textContent    = sD;
        document.getElementById('spDalamProses').querySelector('strong').textContent = sP;
        document.getElementById('spDiperbaiki').querySelector('strong').textContent  = sF;
        document.getElementById('spDisetujui').querySelector('strong').textContent   = sA;

        // ── 6. Update peak badge ──
        const peakWrap = document.getElementById('peakBadgeWrap');
        if (mx > 0) {
            const peakIdx = data.indexOf(mx);
            document.getElementById('peakText').textContent = `${labels[peakIdx]} (${mx} laporan)`;
            peakWrap.style.display = '';
        } else { peakWrap.style.display = 'none'; }

        // ── 7. Update subtitle & range badge ──
        const txt = `${n} bulan terakhir`;
        document.getElementById('statusBarSubtitle').textContent  = txt;
        document.getElementById('monthlyBarSubtitle').textContent = txt;
        document.getElementById('rangeLabel').textContent         = txt;
    }

    // ── FETCH AJAX untuk ganti departemen/audit type ──
    const ajaxUrl    = "{{ route('dashboard.ajax') }}";
    const userRole   = "{{ Auth::user()->role }}";
    let   currentDept = "{{ $departmentFilter }}";
    let   currentAudit = "{{ $auditTypeFilter }}";

    function fetchDeptData(filterVal) {
        const params = new URLSearchParams({ range: currentRange });
        if (userRole === 'super_admin' || userRole === 'auditor') {
            params.set('department', filterVal);
        } else {
            params.set('audit_type', filterVal);
        }

        fetch(`${ajaxUrl}?${params}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(json => {
            const newLabels      = json.monthlyChartData.labels;
            const newDataTotal   = json.monthlyChartData.data;
            const newStatus      = json.monthlyStatusData;
            const newChartData   = json.chartData;

            allLabels.splice(0, allLabels.length, ...newLabels);
            allDataTotal.splice(0, allDataTotal.length, ...newDataTotal);
            Object.assign(allStatus, newStatus);
            Object.assign(allMonthlyStats, {
                diajukan:     newStatus.diajukan,
                dalam_proses: newStatus.dalam_proses,
                diperbaiki:   newStatus.diperbaiki,
                disetujui:    newStatus.disetujui,
                total:        newDataTotal,
            });

            applyRange(currentRange);

            pieChart.data.datasets[0].data = newChartData.data;
            pieChart.update();

            newChartData.data.forEach((val, i) => {
                const elV = document.getElementById(`pie-val-${i}`);
                const elP = document.getElementById(`pie-pct-${i}`);
                if (elV) elV.textContent = val;
                if (elP) elP.textContent = newChartData.percentages[i] + '%';
            });
        })
        .catch(err => { console.error('AJAX error:', err); });
    }

    function animateStat(id, val) {
        const el = document.getElementById(id);
        if (!el) return;
        el.style.opacity = '0.3';
        el.style.transform = 'scale(0.9)';
        setTimeout(() => {
            el.textContent = val;
            el.style.opacity = '1';
            el.style.transform = 'scale(1)';
        }, 180);
    }

    // ── Listeners ──
    document.getElementById('globalRangeSelect').addEventListener('change', function () {
        applyRange(parseInt(this.value));
    });

    const deptEl  = document.getElementById('deptSelect');
    const auditEl = document.getElementById('auditSelect');

    if (deptEl) {
        deptEl.addEventListener('change', function () {
            currentDept = this.value;
            fetchDeptData(this.value);
        });
    }
    if (auditEl) {
        auditEl.addEventListener('change', function () {
            currentAudit = this.value;
            fetchDeptData(this.value);
        });
    }
});
</script>

@push('styles')
<style>
    .dashboard-header { background: linear-gradient(135deg, #065F46 0%, #047857 100%); border-radius: 12px; }

    /* ── Dropdown filter di header ── */
    .filter-select {
        display: inline-block;
        border-radius: 7px;
        font-size: 0.8rem;
        font-weight: 500;
        border: 1.5px solid rgba(255,255,255,0.35);
        background-color: rgba(255,255,255,0.96);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 9px center;
        appearance: none;
        -webkit-appearance: none;
        color: #1f2937;
        padding: 5px 26px 5px 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        cursor: pointer;
        transition: border-color 0.15s, box-shadow 0.15s;
        line-height: 1.4;
    }
    .filter-select:hover { border-color: rgba(255,255,255,0.80); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
    .filter-select:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
    .filter-select option { background: #fff; color: #1f2937; }

    /* Range info badge */
    .range-info-badge {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 0.8rem; padding: 5px 14px; border-radius: 20px;
        background: #f0fdf4; color: #065F46; border: 1px solid #bbf7d0;
        font-weight: 500;
    }

    .stat-card { border-radius: 12px !important; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; }
    .stat-label { font-size: 0.72rem; text-transform: uppercase; font-weight: 600; color: #6b7280; margin-bottom: 4px; letter-spacing: 0.04em; }
    .stat-value { font-size: 2rem; font-weight: 700; margin: 0; line-height: 1; transition: opacity 0.18s ease, transform 0.18s ease; }
    .stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }

    .card { border-radius: 12px !important; }
    .card-header { border-radius: 12px 12px 0 0 !important; }

    .pie-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
    .status-pill { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

    .chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
    .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

    .summary-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
    .pill-blue   { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .pill-green  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
    .pill-orange { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }

    .peak-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }

    .table th { font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: #374151; }
    .table td { font-size: 0.875rem; vertical-align: middle; }
    .table tbody tr:hover { background: rgba(6, 95, 70, 0.04); }

    @media (max-width: 767.98px) {
        .stat-value { font-size: 1.5rem; }
        .stat-icon  { width: 38px; height: 38px; font-size: 1rem; }
        .summary-pill { font-size: 0.68rem; padding: 3px 7px; }
    }
</style>
@endpush

@endsection