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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard', 'title_group' => 'HRD', 'title_menu' => 'Dashboard'])
    <style>
        .hrd-kpi-card-link {
            display: block;
            height: 100%;
            color: inherit;
            text-decoration: none;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .hrd-kpi-card-link:hover {
            color: inherit;
            text-decoration: none;
            transform: translateY(-2px);
        }

        .hrd-kpi-card-link .card {
            cursor: pointer;
        }

        .hrd-kpi-card-link:hover .card {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
        }
    </style>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        @php
                            $filterMonth = request()->input('bulan', now()->format('m'));
                            $filterYear = request()->input('tahun', now()->format('Y'));
                            $monthNames = [
                                '01' => 'Januari',
                                '02' => 'Februari',
                                '03' => 'Maret',
                                '04' => 'April',
                                '05' => 'Mei',
                                '06' => 'Juni',
                                '07' => 'Juli',
                                '08' => 'Agustus',
                                '09' => 'September',
                                '10' => 'Oktober',
                                '11' => 'November',
                                '12' => 'Desember',
                            ];
                        @endphp
                        <div class="row align-items-center mb-4">
                            <div class="col-12 col-lg-6 mb-3 mb-lg-0">
                                <h2 class="mb-0">
                                    <i class="fas fa-chart-line text-primary"></i> Dashboard HRD
                                </h2>
                            </div>
                            <div class="col-12 col-lg-6 d-flex justify-content-lg-end">
                                <form method="GET" action="{{ url()->current() }}" class="d-flex flex-wrap gap-2 align-items-center mb-0">
                                    <select name="bulan" class="form-select form-select-sm" style="width: 140px;" onchange="this.form.submit()">
                                        @foreach ($monthNames as $monthValue => $monthLabel)
                                            <option value="{{ $monthValue }}" {{ $filterMonth === $monthValue ? 'selected' : '' }}>{{ $monthLabel }}</option>
                                        @endforeach
                                    </select>
                                    <select name="tahun" class="form-select form-select-sm" style="width: 110px;" onchange="this.form.submit()">
                                        @for ($year = now()->year - 2; $year <= now()->year + 1; $year++)
                                            <option value="{{ $year }}" {{ (string) $filterYear === (string) $year ? 'selected' : '' }}>{{ $year }}</option>
                                        @endfor
                                    </select>
                                </form>
                            </div>
                        </div>

                        @php
                            $selectedMonthLabel = $monthNames[$filterMonth] ?? now()->translatedFormat('F');
                            $selectedPeriodLabel = $selectedMonthLabel . ' ' . $filterYear;

                            $monthScope = function ($query) use ($filterMonth, $filterYear) {
                                $query->where(function ($q) {
                                    $q->where('is_active', 1)->orWhereNull('is_active');
                                });
                                $query->whereMonth('created_at', $filterMonth)
                                    ->whereYear('created_at', $filterYear);
                            };

                            // 1. APPROVAL STATISTICS (scoped)
                            $totalApprovalNeeded = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                ->where($monthScope)
                                ->whereIn('request_status', ['review', 'pending', 'approved'])
                                ->whereNotNull('head_approval_date')
                                ->whereNull('hrd_approval_date')
                                ->count();

                            $approvedRequests = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                ->where($monthScope)
                                ->whereIn('request_status', ['pengadaan', 'pengerjaan'])
                                ->count();

                            $rejectedRequests = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                ->where($monthScope)
                                ->where('request_status', 'LIKE', '%reject%')
                                ->count();

                            $completedRequests = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                ->where($monthScope)
                                ->where('request_status', 'completed')
                                ->count();

                            // 2. PERIODIC SCHEDULE STATS
                            $periodicHeaders = \Illuminate\Support\Facades\DB::table('tr_periodic_header')
                                ->count();

                            $periodicDetails = \Illuminate\Support\Facades\DB::table('tr_periodic_detail')
                                ->count();

                            $generatedItems = \Illuminate\Support\Facades\DB::table('tr_periodic_items')
                                ->count();

                            $unrealizedItems = \Illuminate\Support\Facades\DB::table('tr_periodic_items')
                                ->whereNull('realization_date')
                                ->count();

                            // 3. DAILY TASK STATS
                            $totalDailyTasks = \Illuminate\Support\Facades\DB::table('ms_daily')
                                ->where('is_active', 1)
                                ->count();

                            $todayLoggedTasks = \Illuminate\Support\Facades\DB::table('rp_daily_log')
                                ->whereDate('work_date', \Illuminate\Support\Carbon::today()->toDateString())
                                ->distinct()
                                ->count('daily_task_id');

                            $todayCompleted = \Illuminate\Support\Facades\DB::table('rp_daily_log')
                                ->whereDate('work_date', \Illuminate\Support\Carbon::today()->toDateString())
                                ->whereRaw('LOWER(COALESCE(job_status, \'\')) = ?', ['completed'])
                                ->distinct()
                                ->count('daily_task_id');

                            $dailyTarget = $totalDailyTasks;
                            $completionRate = $dailyTarget > 0 ? round(($todayCompleted / $dailyTarget) * 100) : 0;

                            $dailyRateLabels = [];
                            $dailyRateData = [];
                            $dailyCompletedData = [];
                            $dailyTargetData = [];
                            $dailyStartDate = \Illuminate\Support\Carbon::createFromDate((int) $filterYear, (int) $filterMonth, 1)->startOfMonth();
                            $dailyEndDate = $dailyStartDate->copy()->endOfMonth();

                            $dailyCompletedRows = \Illuminate\Support\Facades\DB::table('rp_daily_log')
                                ->whereBetween('work_date', [$dailyStartDate->toDateString(), $dailyEndDate->toDateString()])
                                ->whereRaw('LOWER(COALESCE(job_status, \'\')) = ?', ['completed'])
                                ->select(
                                    'work_date',
                                    \Illuminate\Support\Facades\DB::raw('COUNT(DISTINCT daily_task_id) as completed_count')
                                )
                                ->groupBy('work_date')
                                ->get()
                                ->keyBy('work_date');

                            $dailyCursorDate = $dailyStartDate->copy();
                            while ($dailyCursorDate->lte($dailyEndDate)) {
                                $dailyDate = $dailyCursorDate->toDateString();
                                $dailyCompletedCount = isset($dailyCompletedRows[$dailyDate])
                                    ? (int) $dailyCompletedRows[$dailyDate]->completed_count
                                    : 0;

                                $dailyRateLabels[] = $dailyCursorDate->format('d M');
                                $dailyCompletedData[] = $dailyCompletedCount;
                                $dailyTargetData[] = $dailyTarget;
                                $dailyRateData[] = $dailyTarget > 0
                                    ? round(($dailyCompletedCount / $dailyTarget) * 100, 1)
                                    : 0;

                                $dailyCursorDate->addDay();
                            }

                            $dailyMonthlyAverage = count($dailyRateData) > 0
                                ? round(array_sum($dailyRateData) / count($dailyRateData), 1)
                                : 0;

                            // 4. AREA & WORKERS
                            $totalAreas = \Illuminate\Support\Facades\DB::table('ms_area')->count();
                            $totalWorkers = \Illuminate\Support\Facades\DB::table('users')
                                ->whereRaw("FIND_IN_SET('ptgoff', REPLACE(idroles, ' ', '')) OR FIND_IN_SET('ptgspu', REPLACE(idroles, ' ', ''))")
                                ->count();

                            // 5. TOP AREAS by Requests
                            $topAreas = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                ->where($monthScope)
                                ->select('area_id', \Illuminate\Support\Facades\DB::raw('COUNT(*) as count'))
                                ->groupBy('area_id')
                                ->orderBy('count', 'desc')
                                ->limit(5)
                                ->get();
                            
                                $selectedRequests = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                    ->where($monthScope)
                                    ->select('user_id')
                                    ->get();
                            
                                $selectedUserIds = $selectedRequests->pluck('user_id')->filter()->unique()->values()->all();
                                $departmentMap = [];
                                if (!empty($selectedUserIds)) {
                                    $departmentMap = \Illuminate\Support\Facades\DB::table('ms_employee')
                                        ->whereIn('user_id', $selectedUserIds)
                                        ->join('ms_department', 'ms_employee.departemen_id', '=', 'ms_department.id')
                                        ->pluck('ms_department.nama_departemen', 'ms_employee.user_id')
                                        ->toArray();
                                }
                            
                                $allDepartments = \Illuminate\Support\Facades\DB::table('ms_department')
                                    ->where(fn ($q) => $q->where('is_active', '1')->orWhereNull('is_active'))
                                    ->orderBy('nama_departemen')
                                    ->pluck('nama_departemen')
                                    ->toArray();
                            
                                $deptCounts = array_fill_keys($allDepartments, 0);
                                $deptCounts['Tidak Diketahui'] = 0;
                            
                                foreach ($selectedRequests as $requestRow) {
                                    if (isset($requestRow->user_id) && isset($departmentMap[$requestRow->user_id])) {
                                        $deptName = $departmentMap[$requestRow->user_id];
                                        if (!array_key_exists($deptName, $deptCounts)) {
                                            $deptCounts[$deptName] = 0;
                                        }
                                        $deptCounts[$deptName]++;
                                    } else {
                                        $deptCounts['Tidak Diketahui']++;
                                    }
                                }
                            
                                $deptLabels = array_keys($deptCounts);
                                $deptData = array_values($deptCounts);
                            
                                $chartColors = [
                                    'rgba(15,98,254,0.75)', 'rgba(66,190,101,0.75)', 'rgba(255,131,43,0.75)',
                                    'rgba(250,77,86,0.75)', 'rgba(138,63,252,0.75)', 'rgba(51,177,255,0.75)',
                                    'rgba(255,193,7,0.75)', 'rgba(233,30,99,0.75)', 'rgba(0,150,136,0.75)',
                                    'rgba(121,85,72,0.75)',
                                ];
                                $deptBgColors = [];
                                foreach ($deptLabels as $idx => $label) {
                                    $deptBgColors[] = $label === 'Tidak Diketahui'
                                        ? 'rgba(158,158,158,0.4)'
                                        : $chartColors[$idx % count($chartColors)];
                                }

                                $periodicYearLabels = [];
                                $periodicYearTotalData = [];
                                $periodicYearDoneData = [];
                                $periodicYearPendingData = [];
                                $periodicYearRateData = [];
                                $periodicYearSummary = [];

                                for ($month = 1; $month <= 12; $month++) {
                                    $monthKey = str_pad((string) $month, 2, '0', STR_PAD_LEFT);
                                    $periodicYearLabels[] = $monthNames[$monthKey] ?? $monthKey;
                                    $periodicYearSummary[$monthKey] = [
                                        'total' => 0,
                                        'done' => 0,
                                        'pending' => 0,
                                    ];
                                }

                                $periodicYearRows = \Illuminate\Support\Facades\DB::table('tr_periodic_items')
                                    ->where(function ($query) {
                                        $query->where('is_active', 1)->orWhereNull('is_active');
                                    })
                                    ->whereNotNull('planned_date')
                                    ->whereYear('planned_date', $filterYear)
                                    ->select(
                                        \Illuminate\Support\Facades\DB::raw('MONTH(planned_date) as month_number'),
                                        \Illuminate\Support\Facades\DB::raw('COUNT(*) as total_count'),
                                        \Illuminate\Support\Facades\DB::raw('SUM(CASE WHEN realization_date IS NOT NULL THEN 1 ELSE 0 END) as done_count')
                                    )
                                    ->groupBy(\Illuminate\Support\Facades\DB::raw('MONTH(planned_date)'))
                                    ->get();

                                foreach ($periodicYearRows as $row) {
                                    $monthKey = str_pad((string) $row->month_number, 2, '0', STR_PAD_LEFT);
                                    $totalCount = (int) $row->total_count;
                                    $doneCount = (int) $row->done_count;

                                    $periodicYearSummary[$monthKey] = [
                                        'total' => $totalCount,
                                        'done' => $doneCount,
                                        'pending' => max(0, $totalCount - $doneCount),
                                    ];
                                }

                                foreach ($periodicYearSummary as $summary) {
                                    $periodicYearTotalData[] = $summary['total'];
                                    $periodicYearDoneData[] = $summary['done'];
                                    $periodicYearPendingData[] = $summary['pending'];
                                    $periodicYearRateData[] = $summary['total'] > 0
                                        ? round(($summary['done'] / $summary['total']) * 100, 1)
                                        : 0;
                                }

                                $periodicYearTotal = array_sum($periodicYearTotalData);
                                $periodicYearDone = array_sum($periodicYearDoneData);
                                $periodicYearRate = $periodicYearTotal > 0
                                    ? round(($periodicYearDone / $periodicYearTotal) * 100, 1)
                                    : 0;
                        @endphp

                        <!-- KEY METRICS CARDS -->
                        @php
                            $approvalUrl = url('pengajuan-hrd') . '#list_hrd_approval';
                            $approvedUrl = url('pengajuan-hrd') . '#list_hrd_pending';
                            $rejectedUrl = url('pengajuan-hrd') . '?status=rejected#list_hrd_history';
                            $completedUrl = url('pengajuan-hrd') . '?status=completed#list_hrd_history';
                        @endphp
                        <div class="row mb-4">
                            <!-- Menunggu Approval -->
                            <div class="col-lg-3 col-md-6 mb-4">
                                <a href="{{ $approvalUrl }}" class="hrd-kpi-card-link" aria-label="Buka daftar menunggu approval HRD">
                                    <div class="card h-100" style="border-left: 4px solid #f59e0b;">
                                        <div class="card-body p-4">
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="numbers">
                                                        <p class="text-sm text-muted mb-0">Menunggu Approval</p>
                                                        <h5 class="font-weight-bolder mb-0" style="color: #f59e0b;">{{ $totalApprovalNeeded }}</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-end">
                                                    <div class="icon icon-shape icon-sm rounded" style="background: rgba(245, 158, 11, 0.15);">
                                                        <i class="fas fa-inbox" style="color: #f59e0b; font-size: 1.5rem;"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <!-- Disetujui -->
                            <div class="col-lg-3 col-md-6 mb-4">
                                <a href="{{ $approvedUrl }}" class="hrd-kpi-card-link" aria-label="Buka daftar pengajuan yang telah disetujui HRD">
                                    <div class="card h-100" style="border-left: 4px solid #10b981;">
                                        <div class="card-body p-4">
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="numbers">
                                                        <p class="text-sm text-muted mb-0">Telah Disetujui</p>
                                                        <h5 class="font-weight-bolder mb-0" style="color: #10b981;">{{ $approvedRequests }}</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-end">
                                                    <div class="icon icon-shape icon-sm rounded" style="background: rgba(16, 185, 129, 0.15);">
                                                        <i class="fas fa-check-circle" style="color: #10b981; font-size: 1.5rem;"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <!-- Ditolak -->
                            <div class="col-lg-3 col-md-6 mb-4">
                                <a href="{{ $rejectedUrl }}" class="hrd-kpi-card-link" aria-label="Buka riwayat pengajuan ditolak">
                                    <div class="card h-100" style="border-left: 4px solid #ef4444;">
                                        <div class="card-body p-4">
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="numbers">
                                                        <p class="text-sm text-muted mb-0">Ditolak</p>
                                                        <h5 class="font-weight-bolder mb-0" style="color: #ef4444;">{{ $rejectedRequests }}</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-end">
                                                    <div class="icon icon-shape icon-sm rounded" style="background: rgba(239, 68, 68, 0.15);">
                                                        <i class="fas fa-times-circle" style="color: #ef4444; font-size: 1.5rem;"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <!-- Selesai -->
                            <div class="col-lg-3 col-md-6 mb-4">
                                <a href="{{ $completedUrl }}" class="hrd-kpi-card-link" aria-label="Buka riwayat pengajuan selesai">
                                    <div class="card h-100" style="border-left: 4px solid #8b5cf6;">
                                        <div class="card-body p-4">
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <div class="numbers">
                                                        <p class="text-sm text-muted mb-0">Selesai</p>
                                                        <h5 class="font-weight-bolder mb-0" style="color: #8b5cf6;">{{ $completedRequests }}</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-end">
                                                    <div class="icon icon-shape icon-sm rounded" style="background: rgba(139, 92, 246, 0.15);">
                                                        <i class="fas fa-flag-checkered" style="color: #8b5cf6; font-size: 1.5rem;"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                        @if (($overdue_estimation_alerts ?? collect())->isNotEmpty())
                            <div class="card mb-4" style="border-left: 5px solid #f97316; background:#fff7ed;">
                                <div class="card-header pb-0" style="background: transparent;">
                                    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3">
                                        <div>
                                            <h5 class="mb-1" style="color:#7c2d12;">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                Pengajuan Melewati Estimasi
                                            </h5>
                                            <p class="text-sm mb-0" style="color:#9a3412;">
                                                {{ $overdue_estimation_alerts->count() }} pengajuan masih aktif tetapi tanggal estimasinya sudah lewat.
                                            </p>
                                        </div>
                                        <a href="{{ url('pengajuan-hrd') }}" class="btn btn-sm mb-0 align-self-start align-self-lg-center"
                                            style="background:#f97316;color:#fff;">
                                            Lihat Daftar HRD
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body pt-3">
                                    <div class="table-responsive">
                                        <table class="table table-sm align-items-center mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="text-xs ps-0" style="color:#7c2d12;">Pekerjaan</th>
                                                    <th class="text-xs" style="color:#7c2d12;">Area</th>
                                                    <th class="text-xs" style="color:#7c2d12;">Tahap</th>
                                                    <th class="text-xs" style="color:#7c2d12;">Estimasi Selesai</th>
                                                    <th class="text-xs text-end pe-0" style="color:#7c2d12;">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($overdue_estimation_alerts as $alert)
                                                    <tr>
                                                        <td class="text-sm ps-0 text-wrap" style="color:#431407; min-width: 220px;">
                                                            {{ $alert->job_description ?? '-' }}
                                                        </td>
                                                        <td class="text-sm" style="color:#431407;">{{ $alert->area_name ?? '-' }}</td>
                                                        <td class="text-sm">
                                                            <span class="badge" style="background:#fed7aa;color:#9a3412;">
                                                                {{ $alert->overdue_stage ?? '-' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-sm" style="color:#431407;">
                                                            {{ $alert->overdue_date ? \Illuminate\Support\Carbon::parse($alert->overdue_date)->format('d-m-Y') : '-' }}
                                                        </td>
                                                        <td class="text-sm text-end pe-0">
                                                            <a href="{{ url('pengajuan-hrd/show/' . encrypt($alert->id)) }}" class="btn btn-link btn-sm mb-0 px-0"
                                                                style="color:#c2410c;">
                                                                Detail
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- PERIODIC & DAILY ROW -->
                        <div class="row mb-4">
                            <!-- Jadwal Periodic -->
                            <div class="col-lg-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-header py-3 bg-light">
                                        <h6 class="mb-0">
                                            <i class="fas fa-calendar-check text-info"></i> Jadwal Periodic
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row text-center mb-3">
                                            <div class="col-6 border-right">
                                                <p class="text-sm text-muted mb-1">Template Aktif</p>
                                                <h5 class="font-weight-bolder text-info">{{ $periodicDetails }}</h5>
                                            </div>
                                            <div class="col-6">
                                                <p class="text-sm text-muted mb-1">Item Generated</p>
                                                <h5 class="font-weight-bolder text-info">{{ $generatedItems }}</h5>
                                            </div>
                                        </div>
                                        <div class="p-3 mb-0 rounded" style="background-color: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3);">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            <span class="ms-2">{{ $unrealizedItems }} item belum direalisasikan</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Daily Completion -->
                            <div class="col-lg-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-header py-3 bg-light">
                                        <h6 class="mb-0">
                                            <i class="fas fa-tasks text-success"></i> Daily Checklist - {{ now()->format('d M Y') }}
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-sm">Progress Completion</span>
                                                <span class="font-weight-bold">{{ $completionRate }}%</span>
                                            </div>
                                            <div class="progress" style="height: 10px;">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $completionRate }}%;" aria-valuenow="{{ $completionRate }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                        <p class="text-sm text-muted mb-0">
                                            <strong>{{ $todayCompleted }}</strong> dari <strong>{{ $dailyTarget }}</strong> task hari ini
                                        </p>
                                        @if ($todayLoggedTasks < $dailyTarget)
                                            <p class="text-xs text-muted mb-0 mt-1">{{ $todayLoggedTasks }} task sudah diinput hari ini</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header py-3 bg-light">
                                        <div class="d-flex align-items-center justify-content-between gap-2">
                                            <div>
                                                <h6 class="mb-0">
                                                    <i class="fas fa-chart-bar text-info"></i> Realisasi Periodic - {{ $filterYear }}
                                                </h6>
                                                <span class="text-xs text-muted">
                                                    Total: {{ $periodicYearTotal }} | Terlaksana: {{ $periodicYearDone }} | Rate: {{ $periodicYearRate }}%
                                                </span>
                                            </div>
                                            <button class="btn btn-sm btn-outline-info mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#periodic-year-collapse" aria-expanded="true" aria-controls="periodic-year-collapse">
                                                <i class="fas fa-chevron-up" id="periodic-year-toggle-icon"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="collapse show" id="periodic-year-collapse">
                                        <div class="card-body">
                                            <div style="height: 320px;">
                                                <canvas id="periodic-year-chart" style="width:100%; height:100%;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header py-3 bg-light">
                                        <div class="d-flex align-items-center justify-content-between gap-2">
                                            <div>
                                                <h6 class="mb-0">
                                                    <i class="fas fa-chart-line text-success"></i> Completion Rate Daily - {{ $selectedPeriodLabel }}
                                                </h6>
                                                <span class="text-xs text-muted">
                                                    Rata-rata: {{ $dailyMonthlyAverage }}% | Target harian: {{ $dailyTarget }} task
                                                </span>
                                            </div>
                                            <button class="btn btn-sm btn-outline-success mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#daily-rate-collapse" aria-expanded="true" aria-controls="daily-rate-collapse">
                                                <i class="fas fa-chevron-up" id="daily-rate-toggle-icon"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="collapse show" id="daily-rate-collapse">
                                        <div class="card-body">
                                            <div style="height: 260px;">
                                                <canvas id="daily-rate-chart" style="width:100%; height:100%;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card h-100">
                                    <div class="card-header py-3 bg-light">
                                        <div class="d-flex align-items-center justify-content-between gap-2">
                                            <h6 class="mb-0">
                                                <i class="fas fa-chart-bar text-primary"></i> Permintaan Departemen - {{ $selectedPeriodLabel }}
                                            </h6>
                                            <button class="btn btn-sm btn-outline-primary mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#dept-chart-collapse" aria-expanded="true" aria-controls="dept-chart-collapse">
                                                <i class="fas fa-chevron-up" id="dept-chart-toggle-icon"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="collapse show" id="dept-chart-collapse">
                                        <div class="card-body">
                                            <div style="height:220px;">
                                                <canvas id="dept-chart" style="width:100%; height:100%;"></canvas>
                                            </div>
                                            <div id="dept-chart-legend" class="d-flex flex-wrap justify-content-center gap-2 mt-3" style="font-size:0.75rem;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header py-3 bg-light">
                                        <div class="d-flex align-items-center justify-content-between gap-2">
                                            <h6 class="mb-0"><i class="fas fa-chart-line text-primary"></i> Trend Permintaan Non-Periodic - {{ $selectedPeriodLabel }}</h6>
                                            <button class="btn btn-sm btn-outline-primary mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#trend-non-periodic-collapse" aria-expanded="true" aria-controls="trend-non-periodic-collapse">
                                                <i class="fas fa-chevron-up" id="trend-non-periodic-toggle-icon"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="collapse show" id="trend-non-periodic-collapse">
                                        <div class="card-body">
                                            <div style="height: 320px;">
                                                <canvas id="trend-chart" style="width:100%; height:100%;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- AREA & PERFORMANCE -->
                        <div class="row mb-4">
                            <!-- Top Areas -->
                            <div class="col-lg-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-header py-3 bg-light">
                                        <h6 class="mb-0">
                                            <i class="fas fa-chart-bar text-primary"></i> Area dengan Permintaan Terbanyak
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        @if($topAreas->count() > 0)
                                            <div class="list-group list-group-flush">
                                                @foreach($topAreas as $area)
                                                    @php
                                                        $areaName = \Illuminate\Support\Facades\DB::table('ms_area')
                                                            ->where('id', $area->area_id)
                                                            ->value('nama_area') ?? 'Area ' . $area->area_id;
                                                    @endphp
                                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                                        <span>{{ $areaName }}</span>
                                                        <span class="badge bg-primary rounded-pill">{{ $area->count }}</span>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <p class="text-muted text-sm">Tidak ada data permintaan</p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Resources Summary -->
                            <div class="col-lg-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-header py-3 bg-light">
                                        <h6 class="mb-0">
                                            <i class="fas fa-users-cog text-success"></i> Ringkasan Sumber Daya
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row text-center">
                                            <div class="col-6 border-right mb-3">
                                                <p class="text-sm text-muted mb-1">Petugas Aktif</p>
                                                <h5 class="font-weight-bolder text-success">{{ $totalWorkers }}</h5>
                                            </div>
                                            <div class="col-6 mb-3">
                                                <p class="text-sm text-muted mb-1">Area Kerja</p>
                                                <h5 class="font-weight-bolder text-info">{{ $totalAreas }}</h5>
                                            </div>
                                            <div class="col-12">
                                                <p class="text-sm text-muted mb-1">Daily Task Master</p>
                                                <h5 class="font-weight-bolder text-warning">{{ $totalDailyTasks }}</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                                        <!-- TREND CHART: selected month requests -->
                                        @php
                                            $startDate = \Illuminate\Support\Carbon::createFromDate((int) $filterYear, (int) $filterMonth, 1)->startOfMonth();
                                            $endDate = (clone $startDate)->endOfMonth();
                                            $range = [];
                                            $cursor = $startDate->copy();
                                            while ($cursor->lte($endDate)) {
                                                $d = $cursor->copy();
                                                $range[] = $d->toDateString();
                                                $cursor->addDay();
                                            }

                                            $raw = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                                                ->where($monthScope)
                                                ->select(\Illuminate\Support\Facades\DB::raw('DATE(created_at) as date'), \Illuminate\Support\Facades\DB::raw('COUNT(*) as count'))
                                                ->groupBy(\Illuminate\Support\Facades\DB::raw('DATE(created_at)'))
                                                ->orderBy('date')
                                                ->get()
                                                ->keyBy('date');

                                            $trendLabels = [];
                                            $trendData = [];
                                            foreach ($range as $d) {
                                                $trendLabels[] = \Illuminate\Support\Carbon::parse($d)->format('d M');
                                                $trendData[] = isset($raw[$d]) ? (int) $raw[$d]->count : 0;
                                            }
                                        @endphp

                                        <!-- QUICK ACTIONS -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header py-3 bg-light">
                                        <h6 class="mb-0">
                                            <i class="fas fa-lightning-bolt"></i> Aksi Cepat
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-2">
                                            <div class="col-lg-3 col-md-6">
                                                <a href="{{ url('pengajuan-hrd') }}" class="btn btn-outline-primary w-100 rounded-lg">
                                                    <i class="fas fa-stamp"></i> Approval Pengajuan
                                                </a>
                                            </div>
                                            <div class="col-lg-3 col-md-6">
                                                <a href="{{ url('daftar-periodic-hrd') }}" class="btn btn-outline-info w-100 rounded-lg">
                                                    <i class="fas fa-plus-square"></i> Input Jadwal Periodic
                                                </a>
                                            </div>
                                            <div class="col-lg-3 col-md-6">
                                                <a href="{{ url('area') }}" class="btn btn-outline-warning w-100 rounded-lg">
                                                    <i class="fas fa-map"></i> Kelola Area
                                                </a>
                                            </div>
                                            <div class="col-lg-3 col-md-6">
                                                <a href="{{ url('daily') }}" class="btn btn-outline-success w-100 rounded-lg">
                                                    <i class="fas fa-list-check"></i> Daily Task Master
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('/') }}assets/js/plugins/chartjs.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            try {
                function registerCollapseChart(collapseId, iconId, chart) {
                    var collapseElement = document.getElementById(collapseId);
                    var toggleIcon = document.getElementById(iconId);

                    if (!collapseElement || !toggleIcon) {
                        return;
                    }

                    collapseElement.addEventListener('shown.bs.collapse', function() {
                        toggleIcon.classList.remove('fa-chevron-down');
                        toggleIcon.classList.add('fa-chevron-up');
                        if (chart && typeof chart.resize === 'function') {
                            chart.resize();
                        }
                    });

                    collapseElement.addEventListener('hidden.bs.collapse', function() {
                        toggleIcon.classList.remove('fa-chevron-up');
                        toggleIcon.classList.add('fa-chevron-down');
                    });
                }

                var deptCtx = document.getElementById('dept-chart').getContext('2d');
                var deptChart = new Chart(deptCtx, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode($deptLabels) !!},
                        datasets: [{
                            label: 'Jumlah Permintaan',
                            data: {!! json_encode($deptData) !!},
                            backgroundColor: {!! json_encode($deptBgColors) !!},
                            borderWidth: 0,
                            borderRadius: 5,
                            barPercentage: 0.7,
                            categoryPercentage: 0.9,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: { precision: 0 }
                            },
                            x: {
                                ticks: { display: false },
                                grid: { display: false }
                            }
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    title: function(context) { return context[0].label; },
                                    label: function(context) { return ' ' + context.parsed.y + ' permintaan'; }
                                }
                            }
                        }
                    }
                });

                var deptLegend = document.getElementById('dept-chart-legend');
                if (deptLegend) {
                    deptLegend.innerHTML = '';
                    {!! json_encode($deptLabels) !!}.forEach(function(label, index) {
                        var value = {!! json_encode($deptData) !!}[index] || 0;
                        var color = {!! json_encode($deptBgColors) !!}[index];
                        var badge = document.createElement('span');
                        badge.className = 'badge rounded-pill';
                        badge.style.cssText = 'background-color:' + color + ';color:#fff;font-weight:500;padding:0.35em 0.7em;';
                        badge.textContent = label + ' (' + value + ')';
                        deptLegend.appendChild(badge);
                    });
                }
                registerCollapseChart('dept-chart-collapse', 'dept-chart-toggle-icon', deptChart);

                var ctx = document.getElementById('trend-chart').getContext('2d');
                var trendChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: {!! json_encode($trendLabels) !!},
                            datasets: [{
                            label: 'Permintaan Non-Periodic',
                            data: {!! json_encode($trendData) !!},
                            borderColor: '#3366FF',
                            backgroundColor: 'rgba(51,102,255,0.12)',
                            pointBackgroundColor: '#fff',
                            pointBorderColor: '#3366FF',
                            pointRadius: 4,
                            fill: true,
                            tension: 0.35
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {precision:0}
                            }
                        },
                        plugins: {
                            legend: { display: false }
                        }
                    }
                });
                registerCollapseChart('trend-non-periodic-collapse', 'trend-non-periodic-toggle-icon', trendChart);

                var periodicYearCtx = document.getElementById('periodic-year-chart').getContext('2d');
                var periodicYearChart = new Chart(periodicYearCtx, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode($periodicYearLabels) !!},
                        datasets: [
                            {
                                label: 'Terlaksana',
                                data: {!! json_encode($periodicYearDoneData) !!},
                                backgroundColor: 'rgba(16,185,129,0.85)',
                                borderColor: '#10b981',
                                borderWidth: 1,
                                borderRadius: 5,
                                barPercentage: 0.72,
                                categoryPercentage: 0.8
                            },
                            {
                                label: 'Belum Terlaksana',
                                data: {!! json_encode($periodicYearPendingData) !!},
                                backgroundColor: 'rgba(245,158,11,0.8)',
                                borderColor: '#f59e0b',
                                borderWidth: 1,
                                borderRadius: 5,
                                barPercentage: 0.72,
                                categoryPercentage: 0.8
                            },
                            {
                                type: 'line',
                                label: 'Completion Rate',
                                data: {!! json_encode($periodicYearRateData) !!},
                                yAxisID: 'rate',
                                borderColor: '#0d6efd',
                                backgroundColor: '#0d6efd',
                                pointBackgroundColor: '#ffffff',
                                pointBorderColor: '#0d6efd',
                                pointBorderWidth: 2,
                                pointRadius: 4,
                                borderWidth: 2,
                                tension: 0.35,
                                fill: false,
                                order: 0
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                stacked: true,
                                ticks: { precision: 0 }
                            },
                            x: {
                                stacked: true,
                                grid: { display: false }
                            },
                            rate: {
                                beginAtZero: true,
                                max: 100,
                                position: 'right',
                                grid: { drawOnChartArea: false },
                                ticks: {
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    usePointStyle: true,
                                    boxWidth: 8
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        if (context.dataset.label === 'Completion Rate') {
                                            return ' Completion Rate: ' + context.parsed.y + '%';
                                        }

                                        return ' ' + context.dataset.label + ': ' + context.parsed.y;
                                    },
                                    afterBody: function(context) {
                                        var index = context[0].dataIndex;
                                        var total = {!! json_encode($periodicYearTotalData) !!}[index] || 0;
                                        var done = {!! json_encode($periodicYearDoneData) !!}[index] || 0;
                                        var pending = {!! json_encode($periodicYearPendingData) !!}[index] || 0;
                                        return 'Belum terlaksana: ' + pending + '\nProgress: ' + done + ' dari ' + total;
                                    }
                                }
                            }
                        }
                    }
                });
                registerCollapseChart('periodic-year-collapse', 'periodic-year-toggle-icon', periodicYearChart);

                var dailyRateCtx = document.getElementById('daily-rate-chart').getContext('2d');
                var dailyRateChart = new Chart(dailyRateCtx, {
                    type: 'line',
                    data: {
                        labels: {!! json_encode($dailyRateLabels) !!},
                        datasets: [{
                            label: 'Completion Rate',
                            data: {!! json_encode($dailyRateData) !!},
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16,185,129,0.12)',
                            pointBackgroundColor: '#ffffff',
                            pointBorderColor: '#10b981',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            fill: true,
                            tension: 0.35
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 100,
                                ticks: {
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            },
                            x: {
                                grid: { display: false }
                            }
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return ' Completion Rate: ' + context.parsed.y + '%';
                                    },
                                    afterBody: function(context) {
                                        var index = context[0].dataIndex;
                                        var completed = {!! json_encode($dailyCompletedData) !!}[index] || 0;
                                        var target = {!! json_encode($dailyTargetData) !!}[index] || 0;
                                        return 'Selesai: ' + completed + ' dari ' + target + ' task';
                                    }
                                }
                            }
                        }
                    }
                });
                registerCollapseChart('daily-rate-collapse', 'daily-rate-toggle-icon', dailyRateChart);
            } catch (e) {
                console.error('Chart init error', e);
            }
        });
    </script>
@endpush