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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $user = $user_login ?? auth()->user();
        $fullName = trim(($user->firstname ?? '') . ' ' . ($user->lastname ?? ''));
        $candidateName = $fullName !== '' ? $fullName : ($user->username ?? 'User');
        $userName = is_numeric($candidateName) ? ($user->username ?? 'User') : $candidateName;
        $userId = $user->id ?? null;
        $sessionUsername = strtolower(trim((string) (session('username') ?? '')));
        $modelUsername = strtolower(trim((string) ($user->username ?? '')));
        $usernameFromId = $userId
            ? strtolower((string) (\Illuminate\Support\Facades\DB::table('users')->where('id', $userId)->value('username') ?? ''))
            : '';
        $userLogin = $sessionUsername !== '' && !is_numeric($sessionUsername)
            ? $sessionUsername
            : ($modelUsername !== '' && !is_numeric($modelUsername)
                ? $modelUsername
                : $usernameFromId);
        $roleTokens = array_filter(array_map('trim', explode(',', strtolower($user->idroles ?? ''))));
        $isPrivilegedRole = count(array_intersect($roleTokens, ['admins', 'admin', 'hrdxxx', 'hrd', 'headxx'])) > 0;
        $isAdminDashboard = count(array_intersect($roleTokens, ['admins', 'admin'])) > 0;

        $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',
        ];
        $selectedMonthLabel = $monthNames[$filterMonth] ?? now()->translatedFormat('F');
        $selectedPeriodLabel = $selectedMonthLabel . ' ' . $filterYear;

        $hrdUserIds = \Illuminate\Support\Facades\DB::table('users')
            ->where(function ($q) {
                $q->whereRaw("FIND_IN_SET('hrdxxx', REPLACE(LOWER(idroles), ' ', ''))")
                    ->orWhereRaw("FIND_IN_SET('hrd', REPLACE(LOWER(idroles), ' ', ''))");
            })
            ->pluck('id')
            ->map(fn ($id) => (int) $id)
            ->all();

        $hrdUsernames = \Illuminate\Support\Facades\DB::table('users')
            ->where(function ($q) {
                $q->whereRaw("FIND_IN_SET('hrdxxx', REPLACE(LOWER(idroles), ' ', ''))")
                    ->orWhereRaw("FIND_IN_SET('hrd', REPLACE(LOWER(idroles), ' ', ''))");
            })
            ->pluck('username')
            ->map(fn ($username) => strtolower((string) $username))
            ->all();

        $isVisibleOnDashboard = function ($item) use ($isPrivilegedRole, $userId, $userLogin, $hrdUserIds, $hrdUsernames) {
            $uid = isset($item->user_id) ? (string) $item->user_id : '';
            $uidInt = is_numeric($uid) ? (int) $uid : null;
            $createdBy = strtolower((string) ($item->user_create ?? ''));
            $isHrd = ($uidInt !== null && in_array($uidInt, $hrdUserIds, true))
                || ($uid !== '' && !is_numeric($uid) && in_array(strtolower($uid), $hrdUsernames, true))
                || ($createdBy !== '' && in_array($createdBy, $hrdUsernames, true));
            $matchedUserId = $userId && $uidInt !== null && $uidInt === (int) $userId;
            $matchedUserCreate = $userLogin !== '' && $createdBy === $userLogin;

            if ($isPrivilegedRole) return true;
            if ($isHrd) return false;
            if ($matchedUserId) return true;
            if ($matchedUserCreate) return true;
            return false;
        };

        // Get real data from tr_non_periodic table
        $allRequests = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
            ->when(!$isPrivilegedRole && ($userId || $userLogin), function ($query) use ($userId, $userLogin) {
                $query->where(function ($inner) use ($userId, $userLogin) {
                    if ($userId) $inner->where('user_id', $userId);
                    if ($userLogin) $inner->orWhere('user_create', $userLogin);
                });
            })
            ->whereMonth('created_at', $filterMonth)
            ->whereYear('created_at', $filterYear)
            ->where(function ($query) {
                $query->where('is_active', 1)->orWhereNull('is_active');
            })
            ->orderBy('created_at', 'desc')
            ->get()
            ->filter(fn ($item) => $isVisibleOnDashboard($item))
            ->values();

        // Summary statistics
        $totalRequests = $allRequests->count();

        $verifikasiRequests = $allRequests->filter(function ($item) {
            $status = strtolower(trim($item->request_status ?? ''));
            return in_array($status, ['verifikasi', 'review', 'pending', 'approved']) && empty($item->hrd_approval_date);
        })->count();

        $pendingRequests = $allRequests->filter(function ($item) {
            $status = strtolower(trim($item->request_status ?? ''));
            return in_array($status, ['review', 'pending', 'approved']) && empty($item->hrd_approval_date);
        })->count();

        $inProgressRequests = $allRequests->filter(function ($item) {
            $status = strtolower(trim($item->request_status ?? ''));
            $reviewApproved = in_array($status, ['review', 'approved']) && !empty($item->hrd_approval_date);
            $inProgress = in_array($status, ['pengadaan', 'pengerjaan', 'revisi']);
            return $reviewApproved || $inProgress;
        })->count();

        $completedRequests = $allRequests->filter(function ($item) {
            $status = strtolower(trim($item->request_status ?? ''));
            return $status === 'completed';
        })->count();

        $stats = $isAdminDashboard
            ? [
                ['label' => 'Total Permintaan',  'value' => $totalRequests,      'icon' => 'ni-collection',      'class' => 'primary', 'desc' => 'Semua pengajuan PU', 'url' => url('user')],
                ['label' => 'Menunggu Approval', 'value' => $verifikasiRequests, 'icon' => 'ni-time-alarm',      'class' => 'primary', 'desc' => 'Belum ditinjau HRD', 'url' => url('user') . '#list_user_verifikasi'],
                ['label' => 'Dalam Proses',      'value' => $inProgressRequests, 'icon' => 'ni-settings-gear-65','class' => 'primary', 'desc' => 'Pengadaan / pengerjaan aktif', 'url' => url('user') . '#list_user_tracking'],
                ['label' => 'Selesai',           'value' => $completedRequests,  'icon' => 'ni-check-bold',      'class' => 'primary', 'desc' => 'Pengajuan selesai', 'url' => url('user') . '?status=completed#list_user_history'],
            ]
            : [
                ['label' => 'Total Permintaan',  'value' => $totalRequests,      'icon' => 'ni-collection',      'class' => 'primary', 'desc' => 'Semua permintaan', 'url' => url('user')],
                ['label' => 'Menunggu Approval', 'value' => $verifikasiRequests, 'icon' => 'ni-time-alarm',      'class' => 'primary', 'desc' => 'Belum ditinjau HRD', 'url' => url('user') . '#list_user_verifikasi'],
                ['label' => 'Ditugaskan',        'value' => $inProgressRequests, 'icon' => 'ni-settings-gear-65','class' => 'primary', 'desc' => 'Sedang dalam pengerjaan', 'url' => url('user') . '#list_user_tracking'],
                ['label' => 'Selesai',           'value' => $completedRequests,  'icon' => 'ni-check-bold',      'class' => 'primary', 'desc' => 'Pekerjaan selesai', 'url' => url('user') . '?status=completed#list_user_history'],
            ];

        // Most frequent area
        $mostFrequentArea = $allRequests->groupBy('area_id')
            ->map(fn ($group) => $group->count())
            ->sortDesc()
            ->keys()
            ->first();

        $areaName = '-';
        if ($mostFrequentArea) {
            $areaFromTable = \Illuminate\Support\Facades\DB::table('ms_area')
                ->where('id', $mostFrequentArea)
                ->value('nama_area');
            $areaName = $areaFromTable ?? $mostFrequentArea;
        }

        // Recent activities
        $activities = [];
        foreach ($allRequests->take(5) as $request) {
            $status = strtolower(trim($request->request_status ?? ''));

            if ($status === 'verifikasi') {
                $statusText = 'Menunggu Approval'; $statusClass = 'bg-warning';
            } elseif (in_array($status, ['review', 'pending', 'approved'])) {
                $statusText = 'Menunggu Approval'; $statusClass = 'bg-primary';
            } elseif (in_array($status, ['pengadaan', 'pengerjaan'])) {
                $statusText = 'Ditugaskan'; $statusClass = 'bg-info';
            } elseif ($status === 'completed') {
                $statusText = 'Selesai'; $statusClass = 'bg-success';
            } elseif (in_array($status, ['reject', 'rejected'])) {
                $statusText = 'Ditolak'; $statusClass = 'bg-danger';
            } elseif (in_array($status, ['cancel', 'cancelled', 'canceled'])) {
                $statusText = 'Dibatalkan'; $statusClass = 'bg-secondary';
            } else {
                $statusText = 'Pending'; $statusClass = 'bg-primary';
            }

            $createdDate = \Carbon\Carbon::parse($request->created_at);
            if ($createdDate->isToday())                        $dateText = 'Hari ini';
            elseif ($createdDate->isYesterday())                $dateText = 'Kemarin';
            elseif ($createdDate->diffInDays() < 7)            $dateText = floor($createdDate->diffInDays()) . ' hari lalu';
            elseif ($createdDate->diffInWeeks() < 4)           $dateText = floor($createdDate->diffInWeeks()) . ' minggu lalu';
            else                                                $dateText = $createdDate->format('d M Y');

            $activities[] = [
                'title'        => $request->job_description ?? 'Permintaan PU',
                'status'       => $statusText,
                'status_class' => $statusClass,
                'date'         => $dateText,
            ];
        }

        // ── Trend bulan terpilih ───────────────────────────────────────
        $startDate  = \Carbon\Carbon::createFromDate((int) $filterYear, (int) $filterMonth, 1)->startOfMonth();
        $endDate    = (clone $startDate)->endOfMonth();
        $rangeDates = [];
        $cursor = $startDate->copy();
        while ($cursor->lte($endDate)) {
            $rangeDates[] = $cursor->toDateString();
            $cursor->addDay();
        }

        $groupedByDate = $allRequests->groupBy(fn ($it) => \Carbon\Carbon::parse($it->created_at)->toDateString());

        $trendLabels = [];
        $trendData   = [];
        foreach ($rangeDates as $d) {
            $trendLabels[] = \Carbon\Carbon::parse($d)->format('d/m');
            $trendData[]   = isset($groupedByDate[$d]) ? $groupedByDate[$d]->count() : 0;
        }

        $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(fn ($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;

        $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();

        $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 = [];
        $dailyCompletedRows = \Illuminate\Support\Facades\DB::table('rp_daily_log')
            ->whereBetween('work_date', [$startDate->toDateString(), $endDate->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 = $startDate->copy();
        while ($dailyCursorDate->lte($endDate)) {
            $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;

        // ── Highlight personal bulan terpilih ─────────────────────────
        $currentMonthStart = (clone $startDate);
        $currentMonthEnd   = (clone $endDate);
        $currentMonthRequests = $allRequests->filter(
            fn ($item) => \Carbon\Carbon::parse($item->created_at)->between($currentMonthStart, $currentMonthEnd)
        );
        $userIdsInRequests = $currentMonthRequests->pluck('user_id')->filter()->unique()->values()->all();
        $departmentMap = [];
        if (!empty($userIdsInRequests)) {
            $departmentMap = \Illuminate\Support\Facades\DB::table('ms_employee')
                ->whereIn('user_id', $userIdsInRequests)
                ->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 ($query) => $query->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 ($currentMonthRequests 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.45)'
                : $chartColors[$idx % count($chartColors)];
        }

        $internalCount = $allRequests->where('work_type', 'internal')->count();
        $vendorCount   = $allRequests->where('work_type', 'vendor')->count();

        $workTypeValue = $internalCount > $vendorCount
            ? 'Internal'
            : ($vendorCount > $internalCount ? 'Vendor' : 'Seimbang');

        $vendorStatus = $internalCount > $vendorCount
            ? 'Internal (' . $internalCount . ')'
            : ($vendorCount > $internalCount
                ? 'Vendor (' . $vendorCount . ')'
                : 'Seimbang');

        $highlights = [
            ['label' => 'Area paling sering',   'value' => $areaName],
            ['label' => 'Metode pelaksana',  'value' => $vendorStatus],
            ['label' => 'Permintaan ' . $selectedMonthLabel,  'value' => $currentMonthRequests->count() . ' permintaan'],
        ];

        $overdueEstimationAlerts = collect();
        if ($isAdminDashboard) {
            $today = now()->toDateString();
            $overdueEstimationAlerts = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
                ->leftJoin('ms_area', 'tr_non_periodic.area_id', '=', 'ms_area.id')
                ->select(
                    'tr_non_periodic.id',
                    'tr_non_periodic.request_status',
                    'tr_non_periodic.job_description',
                    'tr_non_periodic.pengadaan_estimated_ended_at',
                    'tr_non_periodic.pengerjaan_estimated_ended_at',
                    'ms_area.nama_area as area_name',
                    \Illuminate\Support\Facades\DB::raw("
                        CASE
                            WHEN LOWER(COALESCE(tr_non_periodic.request_status, '')) = 'pengadaan'
                                AND tr_non_periodic.pengadaan_estimated_ended_at IS NOT NULL
                                AND tr_non_periodic.pengadaan_estimated_ended_at < '{$today}'
                            THEN 'Pengadaan'
                            WHEN LOWER(COALESCE(tr_non_periodic.request_status, '')) IN ('pengerjaan', 'revisi')
                                AND tr_non_periodic.pengerjaan_estimated_ended_at IS NOT NULL
                                AND tr_non_periodic.pengerjaan_estimated_ended_at < '{$today}'
                            THEN 'Pengerjaan'
                            ELSE NULL
                        END as overdue_stage
                    "),
                    \Illuminate\Support\Facades\DB::raw("
                        CASE
                            WHEN LOWER(COALESCE(tr_non_periodic.request_status, '')) = 'pengadaan' THEN tr_non_periodic.pengadaan_estimated_ended_at
                            WHEN LOWER(COALESCE(tr_non_periodic.request_status, '')) IN ('pengerjaan', 'revisi') THEN tr_non_periodic.pengerjaan_estimated_ended_at
                            ELSE NULL
                        END as overdue_date
                    ")
                )
                ->where(function ($query) {
                    $query->where('tr_non_periodic.is_active', '1')
                        ->orWhereNull('tr_non_periodic.is_active');
                })
                ->where(function ($query) use ($today) {
                    $query->where(function ($inner) use ($today) {
                        $inner->whereRaw("LOWER(COALESCE(tr_non_periodic.request_status, '')) = ?", ['pengadaan'])
                            ->whereNotNull('tr_non_periodic.pengadaan_estimated_ended_at')
                            ->whereDate('tr_non_periodic.pengadaan_estimated_ended_at', '<', $today);
                    })->orWhere(function ($inner) use ($today) {
                        $inner->whereRaw("LOWER(COALESCE(tr_non_periodic.request_status, '')) IN (?, ?)", ['pengerjaan', 'revisi'])
                            ->whereNotNull('tr_non_periodic.pengerjaan_estimated_ended_at')
                            ->whereDate('tr_non_periodic.pengerjaan_estimated_ended_at', '<', $today);
                    });
                })
                ->orderBy('overdue_date')
                ->limit(10)
                ->get();
        }
    @endphp

    @if (request()->ajax())
        @php
            header('Content-Type: application/json');
            echo json_encode([
                'stats' => $stats,
                'activities' => $activities,
                'highlights' => $highlights,
                'trendLabels' => $trendLabels,
                'trendData' => $trendData,
                'deptLabels' => $deptLabels,
                'deptData' => $deptData,
                'deptBgColors' => $deptBgColors,
                'today' => now()->format('d M Y'),
            ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
            exit;
        @endphp
    @endif

    <div class="container-fluid py-4 dashboard-page">
        <div class="row">
            <div class="col-12">
                <div class="card dashboard-hero mb-4">
                    <div class="card-body">
                        <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between">
                            <div>
                                <p class="text-xs text-uppercase mb-2" style="color: #0f5fae;">Notifikasi PU</p>
                                <h4 class="mb-2 text-dark">Selamat datang, {{ $userName }}</h4>
                                <p class="text-sm text-secondary mb-0">Menampilkan data periode {{ $selectedPeriodLabel }}</p>
                            </div>
                            <div class="row">
                                <span class="badge bg-primary">{{ now()->format('d M Y') }}</span>
                                <div class="mt-2 d-flex flex-column gap-2">
                                    <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>
                        </div>

                        <div class="row mt-4">
                            @foreach ($stats as $stat)
                                <div class="col-xl-3 col-sm-6 mb-3 mb-xl-0">
                                    <a href="{{ $stat['url'] }}" class="dashboard-stat-link" aria-label="Buka {{ $stat['label'] }}">
                                        <div class="card shadow-sm border-0 h-100">
                                            <div class="card-body p-3">
                                                <div class="row">
                                                    <div class="col-8">
                                                        <p class="text-xs text-uppercase text-secondary mb-1">{{ $stat['label'] }}</p>
                                                        <h5 class="font-weight-bolder mb-1 dashboard-stat-value" data-stat-index="{{ $loop->index }}">{{ $stat['value'] }}</h5>
                                                        <p class="mb-0 text-xs text-secondary">{{ $stat['desc'] }}</p>
                                                    </div>
                                                    <div class="col-4 text-end">
                                                        <div class="icon icon-shape bg-{{ $stat['class'] }} shadow-{{ $stat['class'] }} text-center rounded-circle">
                                                            <i class="ni {{ $stat['icon'] }} text-lg opacity-10 text-white" aria-hidden="true"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($isAdminDashboard)
            @if ($overdueEstimationAlerts->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;">
                                    {{ $overdueEstimationAlerts->count() }} pengajuan masih aktif tetapi tanggal estimasinya sudah lewat.
                                </p>
                            </div>
                            <a href="{{ url('user') }}" class="btn btn-sm mb-0 align-self-start align-self-lg-center" style="background:#f97316;color:#fff;">
                                Lihat Daftar PU
                            </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 ($overdueEstimationAlerts 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('user/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

            <div class="row mb-4">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="card h-100 dashboard-section-card">
                        <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-4">
                                <div class="col-6">
                                    <p class="text-sm text-muted mb-1">Template Aktif</p>
                                    <h5 class="font-weight-bolder text-info mb-0">{{ $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 mb-0">{{ $generatedItems }}</h5>
                                </div>
                            </div>
                            <div class="alert mb-0" style="background:#fff3e0;border:1px solid #ffcc80;color:#f57c00;">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <span>{{ $unrealizedItems }} item belum direalisasikan</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="card h-100 dashboard-section-card">
                        <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="d-flex justify-content-between align-items-center mb-2">
                                <p class="text-sm text-muted mb-0">Progress Completion</p>
                                <span class="font-weight-bold">{{ $completionRate }}%</span>
                            </div>
                            <div class="progress mb-3" style="height: 8px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $completionRate }}%;" aria-valuenow="{{ $completionRate }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p class="text-sm 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-lg-8 mb-lg-0 mb-4">
                    <div class="card h-100 dashboard-section-card">
                        <div class="card-header py-3 bg-light">
                            <h6 class="mb-0">Aktivitas Terbaru</h6>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Permintaan</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Waktu</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dashboard-activities-body">
                                        @forelse ($activities as $activity)
                                            <tr>
                                                <td>
                                                    <div class="d-flex px-3 py-2">
                                                        <div>
                                                            <div class="icon icon-shape icon-sm bg-primary shadow text-center">
                                                                <i class="ni ni-bell-55 text-white opacity-10"></i>
                                                            </div>
                                                        </div>
                                                        <div class="ms-3">
                                                            <h6 class="text-sm mb-0">{{ $activity['title'] }}</h6>
                                                            <p class="text-xs text-secondary mb-0">Permintaan pekerjaan PU</p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge {{ $activity['status_class'] }}">{{ $activity['status'] }}</span>
                                                </td>
                                                <td class="align-middle text-end">
                                                    <span class="text-xs text-secondary">{{ $activity['date'] }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-secondary py-4">Belum ada aktivitas.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card h-100 dashboard-section-card">
                        <div class="card-header py-3 bg-light">
                            <h6 class="mb-0">Highlight</h6>
                        </div>
                        <div class="card-body">
                            <div id="dashboard-highlights">
                                @foreach ($highlights as $item)
                                    <div class="d-flex justify-content-between text-sm mb-3">
                                        <span class="text-secondary">{{ $item['label'] }}</span>
                                        <span class="fw-bold text-dark">{{ $item['value'] }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card dashboard-section-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="#admin-periodic-collapse" aria-expanded="true" aria-controls="admin-periodic-collapse">
                                    <i class="fas fa-chevron-up" id="admin-periodic-toggle-icon"></i>
                                </button>
                            </div>
                        </div>
                        <div class="collapse show" id="admin-periodic-collapse">
                            <div class="card-body">
                                <div style="height: 320px;">
                                    <canvas id="admin-periodic-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 dashboard-section-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="#admin-daily-collapse" aria-expanded="true" aria-controls="admin-daily-collapse">
                                    <i class="fas fa-chevron-up" id="admin-daily-toggle-icon"></i>
                                </button>
                            </div>
                        </div>
                        <div class="collapse show" id="admin-daily-collapse">
                            <div class="card-body">
                                <div style="height: 260px;">
                                    <canvas id="admin-daily-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 dashboard-section-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-primary"></i> Permintaan Departemen - {{ $selectedPeriodLabel }}
                                    </h6>
                                    <span class="text-xs text-muted">Distribusi permintaan berdasarkan departemen pengaju</span>
                                </div>
                                <button class="btn btn-sm btn-outline-primary mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#admin-dept-collapse" aria-expanded="true" aria-controls="admin-dept-collapse">
                                    <i class="fas fa-chevron-up" id="admin-dept-toggle-icon"></i>
                                </button>
                            </div>
                        </div>
                        <div class="collapse show" id="admin-dept-collapse">
                            <div class="card-body">
                                <div style="height: 320px;">
                                    <canvas id="admin-dept-chart" style="width:100%; height:100%;"></canvas>
                                </div>
                                <div id="admin-dept-legend" class="d-flex flex-wrap gap-2 justify-content-center mt-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <div class="card dashboard-section-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-primary"></i> Trend Permintaan Non-Periodic - {{ $selectedPeriodLabel }}
                                    </h6>
                                    <span class="text-xs text-muted">Pergerakan jumlah permintaan berdasarkan tanggal pengajuan</span>
                                </div>
                                <button class="btn btn-sm btn-outline-primary mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#admin-trend-collapse" aria-expanded="true" aria-controls="admin-trend-collapse">
                                    <i class="fas fa-chevron-up" id="admin-trend-toggle-icon"></i>
                                </button>
                            </div>
                        </div>
                        <div class="collapse show" id="admin-trend-collapse">
                            <div class="card-body">
                                <div style="height: 320px;">
                                    <canvas id="admin-trend-chart" style="width:100%; height:100%;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        @else
            <div class="row">
                {{-- Aktivitas Terbaru --}}
                <div class="col-lg-7 mb-lg-0 mb-4">
                    <div class="card h-100 dashboard-section-card">
                        <div class="card-header pb-0">
                            <h6 class="mb-1">Aktivitas Terbaru</h6>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Permintaan</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">Waktu</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dashboard-activities-body">
                                        @forelse ($activities as $activity)
                                            <tr>
                                                <td>
                                                    <div class="d-flex px-3 py-2">
                                                        <div>
                                                            <div class="icon icon-shape icon-sm bg-primary shadow text-center">
                                                                <i class="ni ni-bell-55 text-white opacity-10"></i>
                                                            </div>
                                                        </div>
                                                        <div class="ms-3">
                                                            <h6 class="text-sm mb-0">{{ $activity['title'] }}</h6>
                                                            <p class="text-xs text-secondary mb-0">Permintaan pekerjaan PU</p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge {{ $activity['status_class'] }}">{{ $activity['status'] }}</span>
                                                </td>
                                                <td class="align-middle text-end">
                                                    <span class="text-xs text-secondary">{{ $activity['date'] }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-secondary py-4">Belum ada aktivitas.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Panel Kanan --}}
                <div class="col-lg-5">
                    <div class="card h-100 dashboard-section-card">
                        <div class="card-body">
                            <div class="mb-3">
                                <p class="text-xs text-uppercase mb-1" style="color: #0f5fae;">Status Proyek</p>
                                <h5 class="mb-0 text-dark">PU Monitoring</h5>
                            </div>

                            {{-- Chart Trend Bulan Terpilih --}}
                            <div class="mb-4">
                                <h6 class="mb-2">Trend Permintaan Non-Periodic - {{ $selectedPeriodLabel }}</h6>
                                <div style="height:160px;">
                                    <canvas id="admin-trend-chart" style="width:100%; height:100%;"></canvas>
                                </div>
                            </div>

                            {{-- Highlight --}}
                            <div class="card shadow-none border">
                                <div class="card-body p-3">
                                    <h6 class="mb-3">Highlight</h6>
                                    <div id="dashboard-highlights">
                                        @foreach ($highlights as $item)
                                            <div class="d-flex justify-content-between text-sm mb-2">
                                                <span class="text-secondary">{{ $item['label'] }}</span>
                                                <span class="fw-bold text-dark">{{ $item['value'] }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

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

            function updateTrendChart(labels, values) {
                if (window.adminTrendChart) {
                    window.adminTrendChart.data.labels = labels;
                    window.adminTrendChart.data.datasets[0].data = values;
                    window.adminTrendChart.update();
                    return;
                }

                var ctx1 = document.getElementById('admin-trend-chart').getContext('2d');
                window.adminTrendChart = new Chart(ctx1, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Permintaan Non-Periodic',
                            data: values,
                            borderColor: '#0f62fe',
                            backgroundColor: 'rgba(15,98,254,0.12)',
                            fill: true,
                            tension: 0.35,
                            pointRadius: 2,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } },
                            x: { ticks: { font: { size: 9 }, maxRotation: 45, minRotation: 45 } }
                        },
                        plugins: { legend: { display: false } }
                    }
                });
            }

            function updatePeriodicChart(labels, doneData, pendingData, rateData, totalData) {
                var canvas = document.getElementById('admin-periodic-chart');
                if (!canvas) return;

                if (window.adminPeriodicChart) {
                    window.adminPeriodicChart.data.labels = labels;
                    window.adminPeriodicChart.data.datasets[0].data = doneData;
                    window.adminPeriodicChart.data.datasets[1].data = pendingData;
                    window.adminPeriodicChart.data.datasets[2].data = rateData;
                    window.adminPeriodicChart.update();
                    return;
                }

                window.adminPeriodicChart = new Chart(canvas.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'Terlaksana',
                                data: doneData,
                                backgroundColor: 'rgba(16,185,129,0.85)',
                                borderColor: '#10b981',
                                borderWidth: 1,
                                borderRadius: 5,
                            },
                            {
                                label: 'Belum Terlaksana',
                                data: pendingData,
                                backgroundColor: 'rgba(245,158,11,0.8)',
                                borderColor: '#f59e0b',
                                borderWidth: 1,
                                borderRadius: 5,
                            },
                            {
                                type: 'line',
                                label: 'Completion Rate',
                                data: rateData,
                                yAxisID: 'rate',
                                borderColor: '#0d6efd',
                                backgroundColor: '#0d6efd',
                                pointBackgroundColor: '#ffffff',
                                pointBorderColor: '#0d6efd',
                                pointBorderWidth: 2,
                                pointRadius: 4,
                                borderWidth: 2,
                                tension: 0.35,
                                fill: false,
                            }
                        ]
                    },
                    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 = totalData[index] || 0;
                                        var done = doneData[index] || 0;
                                        var pending = pendingData[index] || 0;
                                        return 'Belum terlaksana: ' + pending + '\nProgress: ' + done + ' dari ' + total;
                                    }
                                }
                            }
                        }
                    }
                });
            }

            function updateDailyChart(labels, rates, completedData, targetData) {
                var canvas = document.getElementById('admin-daily-chart');
                if (!canvas) return;

                if (window.adminDailyChart) {
                    window.adminDailyChart.data.labels = labels;
                    window.adminDailyChart.data.datasets[0].data = rates;
                    window.adminDailyChart.update();
                    return;
                }

                window.adminDailyChart = new Chart(canvas.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Completion Rate',
                            data: rates,
                            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 = completedData[index] || 0;
                                        var target = targetData[index] || 0;
                                        return 'Selesai: ' + completed + ' dari ' + target + ' task';
                                    }
                                }
                            }
                        }
                    }
                });
            }

            function updateDeptChart(labels, values, colors) {
                var canvas = document.getElementById('admin-dept-chart');
                if (!canvas) return;

                if (window.adminDeptChart) {
                    window.adminDeptChart.data.labels = labels;
                    window.adminDeptChart.data.datasets[0].data = values;
                    window.adminDeptChart.data.datasets[0].backgroundColor = colors;
                    window.adminDeptChart.update();
                } else {
                    window.adminDeptChart = new Chart(canvas.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Jumlah Permintaan',
                                data: values,
                                backgroundColor: colors,
                                borderWidth: 0,
                                borderRadius: 5,
                                barPercentage: 0.7,
                                categoryPercentage: 0.9,
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: { precision: 0 },
                                    grid: { display: true, drawBorder: false }
                                },
                                x: { grid: { display: false }, ticks: { autoSkip: false, maxRotation: 30, minRotation: 0 } }
                            },
                            plugins: {
                                legend: { display: false },
                                tooltip: {
                                    callbacks: {
                                        title: function (context) { return context[0].label; },
                                        label: function (context) { return ' ' + context.parsed.y + ' permintaan'; }
                                    }
                                }
                            }
                        }
                    });
                }

                var legend = document.getElementById('admin-dept-legend');
                if (legend) {
                    legend.innerHTML = '';
                    labels.forEach(function (label, index) {
                        var color = Array.isArray(colors) ? colors[index] : colors;
                        var value = values[index] || 0;
                        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 + ')';
                        legend.appendChild(badge);
                    });
                }
            }

            function registerAdminCollapse(collapseId, iconId, chartGetter) {
                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');
                    var chart = chartGetter();
                    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');
                });
            }

            function renderDashboardPayload(payload) {
                var statValues = document.querySelectorAll('.dashboard-stat-value');
                statValues.forEach(function (element) {
                    var index = parseInt(element.getAttribute('data-stat-index') || '0', 10);
                    if (payload.stats && payload.stats[index]) {
                        element.textContent = payload.stats[index].value;
                    }
                });

                var activitiesBody = document.getElementById('dashboard-activities-body');
                if (activitiesBody && Array.isArray(payload.activities)) {
                    activitiesBody.innerHTML = payload.activities.length
                        ? payload.activities.map(function (activity) {
                            return '<tr>' +
                                '<td><div class="d-flex px-3 py-2"><div><div class="icon icon-shape icon-sm bg-primary shadow text-center"><i class="ni ni-bell-55 text-white opacity-10"></i></div></div><div class="ms-3"><h6 class="text-sm mb-0">' + activity.title + '</h6><p class="text-xs text-secondary mb-0">Permintaan pekerjaan PU</p></div></div></td>' +
                                '<td><span class="badge ' + activity.status_class + '">' + activity.status + '</span></td>' +
                                '<td class="align-middle text-end"><span class="text-xs text-secondary">' + activity.date + '</span></td>' +
                            '</tr>';
                        }).join('')
                        : '<tr><td colspan="3" class="text-center text-secondary py-4">Belum ada aktivitas.</td></tr>';
                }

                var highlights = document.getElementById('dashboard-highlights');
                if (highlights && Array.isArray(payload.highlights)) {
                    highlights.innerHTML = payload.highlights.map(function (item) {
                        return '<div class="d-flex justify-content-between text-sm mb-2"><span class="text-secondary">' + item.label + '</span><span class="fw-bold text-dark">' + item.value + '</span></div>';
                    }).join('');
                }

                var dateBadge = document.querySelector('.dashboard-hero .badge.bg-primary');
                if (dateBadge && payload.today) {
                    dateBadge.textContent = payload.today;
                }

                updateTrendChart(payload.trendLabels || [], payload.trendData || []);
                updateDeptChart(payload.deptLabels || [], payload.deptData || [], payload.deptBgColors || []);
            }

            function fetchDashboardData() {
                fetch(window.location.href + (window.location.search ? '&' : '?') + '_ajax=1', {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    cache: 'no-store'
                })
                .then(function (response) {
                    if (!response.ok) {
                        throw new Error('Request failed');
                    }
                    return response.json();
                })
                .then(function (payload) {
                    renderDashboardPayload(payload);
                })
                .catch(function (error) {
                    console.error('dashboard refresh error', error);
                });
            }

            // ── Chart Trend Bulan Terpilih (Line) ───────────────────────
            try {
                updatePeriodicChart(
                    {!! json_encode($periodicYearLabels) !!},
                    {!! json_encode($periodicYearDoneData) !!},
                    {!! json_encode($periodicYearPendingData) !!},
                    {!! json_encode($periodicYearRateData) !!},
                    {!! json_encode($periodicYearTotalData) !!}
                );
                updateDailyChart(
                    {!! json_encode($dailyRateLabels) !!},
                    {!! json_encode($dailyRateData) !!},
                    {!! json_encode($dailyCompletedData) !!},
                    {!! json_encode($dailyTargetData) !!}
                );
                updateDeptChart(
                    {!! json_encode($deptLabels) !!},
                    {!! json_encode($deptData) !!},
                    {!! json_encode($deptBgColors) !!}
                );
                updateTrendChart({!! json_encode($trendLabels) !!}, {!! json_encode($trendData) !!});
            } catch (e) {
                console.error('dashboard chart error', e);
            }

            registerAdminCollapse('admin-periodic-collapse', 'admin-periodic-toggle-icon', function () {
                return window.adminPeriodicChart;
            });
            registerAdminCollapse('admin-daily-collapse', 'admin-daily-toggle-icon', function () {
                return window.adminDailyChart;
            });
            registerAdminCollapse('admin-dept-collapse', 'admin-dept-toggle-icon', function () {
                return window.adminDeptChart;
            });

            var adminTrendCollapse = document.getElementById('admin-trend-collapse');
            var adminTrendToggleIcon = document.getElementById('admin-trend-toggle-icon');
            if (adminTrendCollapse && adminTrendToggleIcon) {
                adminTrendCollapse.addEventListener('shown.bs.collapse', function () {
                    adminTrendToggleIcon.classList.remove('fa-chevron-down');
                    adminTrendToggleIcon.classList.add('fa-chevron-up');
                    if (window.adminTrendChart) {
                        window.adminTrendChart.resize();
                    }
                });

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

            fetchDashboardData();
            window.setInterval(fetchDashboardData, 30000);

        });
    </script>
@endpush

<style>
    .dashboard-page {
        background-color: #f8f9fa;
        border-radius: 18px;
        padding-bottom: 1.25rem;
    }

    .dashboard-hero {
        color: #333;
        background: #fff;
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .dashboard-hero h4 {
        letter-spacing: 0.2px;
    }

    .dashboard-hero .card {
        background: #fff;
        border: 1px solid rgba(13, 110, 253, 0.08);
        border-radius: 0.9rem;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .dashboard-hero .card:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    }

    .dashboard-stat-link {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
        transition: transform 0.15s ease;
    }

    .dashboard-stat-link:hover {
        color: inherit;
        text-decoration: none;
        transform: translateY(-2px);
    }

    .dashboard-stat-link .card {
        cursor: pointer;
    }

    .dashboard-hero .text-uppercase {
        letter-spacing: 0.45px;
    }

    .dashboard-hero .badge.bg-primary {
        border-radius: 999px;
        font-weight: 600;
    }

    .dashboard-section-card {
        border: 1px solid #e5eaf2;
        border-radius: 1rem;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .dashboard-section-card .card-header {
        border-bottom: 1px solid #edf2f7;
    }

    .dashboard-section-card .table tbody tr {
        border-bottom: 1px solid #edf2f7;
    }

    .dashboard-section-card .table tbody tr:nth-child(even) {
        background: rgba(248, 250, 252, 0.65);
    }

    .dashboard-section-card .table tbody tr:hover {
        background: rgba(230, 240, 255, 0.45);
    }

    .dashboard-section-card .badge {
        border-radius: 999px;
        padding: 0.42rem 0.55rem;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .dashboard-visual {
        border-radius: 1rem;
        min-height: 180px;
        padding: 1.5rem;
        color: #333;
        background: #fff;
        display: flex;
        align-items: flex-end;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5eaf2;
    }

    .dashboard-visual-content {
        max-width: 80%;
    }
</style>