@extends('layouts.app')

@section('styles')
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "outline": "#737780",
                        "on-surface-variant": "var(--tw-on-surface-variant)",
                        "on-tertiary-fixed": "#161c22",
                        "surface-container": "var(--tw-surface-container)",
                        "primary-fixed-dim": "#a7c8ff",
                        "outline-variant": "var(--tw-outline-variant)",
                        "on-primary": "#ffffff",
                        "surface-container-low": "var(--tw-surface-container-low)",
                        "tertiary-container": "#2e343a",
                        "on-surface": "var(--tw-on-surface)",
                        "background": "var(--tw-background)",
                        "tertiary-fixed-dim": "#c1c7cf",
                        "primary-container": "#003366",
                        "secondary-fixed-dim": "#acc7ff",
                        "on-tertiary": "#ffffff",
                        "on-secondary-fixed": "#001a40",
                        "on-tertiary-fixed-variant": "#41474e",
                        "surface-container-highest": "#d3e4fe",
                        "surface-container-lowest": "var(--tw-surface-container-lowest)",
                        "surface-bright": "#f8f9ff",
                        "inverse-on-surface": "#eaf1ff",
                        "surface-tint": "#3a5f94",
                        "on-primary-fixed-variant": "#1f477b",
                        "on-secondary": "#ffffff",
                        "on-secondary-container": "#003370",
                        "secondary": "#115cb9",
                        "surface-variant": "var(--tw-surface-variant)",
                        "on-error": "#ffffff",
                        "on-primary-fixed": "#001b3c",
                        "on-error-container": "#93000a",
                        "secondary-container": "#659dfe",
                        "inverse-primary": "#a7c8ff",
                        "on-primary-container": "#799dd6",
                        "surface-dim": "#cbdbf5",
                        "on-tertiary-container": "#969ca4",
                        "tertiary-fixed": "#dde3eb",
                        "tertiary": "#191f25",
                        "surface": "var(--tw-background)",
                        "on-background": "var(--tw-on-surface)",
                        "inverse-surface": "#213145",
                        "secondary-fixed": "#d7e2ff",
                        "error": "#ba1a1a",
                        "primary": "var(--tw-primary)",
                        "surface-container-high": "#dce9ff",
                        "primary-fixed": "#d5e3ff",
                        "on-secondary-fixed-variant": "#004491",
                        "error-container": "#ffdad6"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "container-max": "1280px",
                        "stack-sm": "0.5rem",
                        "gutter": "1.5rem",
                        "margin-desktop": "2.5rem",
                        "stack-md": "1rem",
                        "stack-lg": "2rem",
                        "margin-mobile": "1rem"
                    },
                    "fontFamily": {
                        "body-lg": ["Plus Jakarta Sans"],
                        "headline-lg": ["Plus Jakarta Sans"],
                        "caption": ["Plus Jakarta Sans"],
                        "display-lg": ["Plus Jakarta Sans"],
                        "headline-lg-mobile": ["Plus Jakarta Sans"],
                        "title-lg": ["Plus Jakarta Sans"],
                        "body-md": ["Plus Jakarta Sans"],
                        "label-md": ["Plus Jakarta Sans"],
                        "headline-md": ["Plus Jakarta Sans"]
                    },
                    "fontSize": {
                        "body-lg": ["18px", { "lineHeight": "28px", "fontWeight": "400" }],
                        "headline-lg": ["32px", { "lineHeight": "40px", "fontWeight": "700" }],
                        "caption": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
                        "display-lg": ["48px", { "lineHeight": "60px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
                        "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "700" }],
                        "title-lg": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
                        "body-md": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
                        "label-md": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }]
                    }
                }
            }
        }
    </script>
    <style>
        /* Custom Scroll Animation Styles */
        .reveal-element {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
        }
        
        .reveal-element.active {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-element-left {
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
        }
        
        .reveal-element-left.active {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal-element-right {
            opacity: 0;
            transform: translateX(40px);
            transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
        }
        
        .reveal-element-right.active {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal-scale {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
        }

        .reveal-scale.active {
            opacity: 1;
            transform: scale(1);
        }

        /* Staggered children transitions */
        .stagger-container {
            display: contents;
        }

        /* Hover animations for cards */
        .hover-card-trigger {
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        }
        
        .hover-card-trigger:hover {
            transform: translateY(-6px) scale(1.02) !important;
            box-shadow: 0 20px 30px rgba(0, 30, 64, 0.08) !important;
            border-color: #115cb9 !important;
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        /* Hide scrollbar for IE, Edge and Firefox */
        .scrollbar-hide {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
    </style>
@endsection

@section('content')


<!-- Main Content Canvas -->
<main class="flex-grow flex flex-col">
<!-- Hero Section -->
<section class="relative w-full min-h-[600px] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img alt="Tugu Pancakarsa Kabupaten Bogor" class="w-full h-full object-cover" src="{{ asset('assets/tugu_pancakarsa.jpg') }}"/>
<div class="absolute inset-0 bg-[#001e40] opacity-80"></div>
</div>
<div class="relative z-10 max-w-4xl mx-auto px-margin-desktop py-24 flex flex-col items-center text-center gap-6 stagger-container">
<h1 class="font-display-lg text-display-lg text-white reveal-element">Mulai Perjalanan Magang Anda Bersama Pemerintah Kabupaten Bogor</h1>
<p class="font-body-lg text-body-lg text-white/90 hover:text-white transition-colors duration-300 cursor-default max-w-3xl reveal-element">
                        Sistem informasi terintegrasi untuk pendaftaran, pengelolaan, dan pelaksanaan program magang di lingkungan Pemerintah Kabupaten Bogor.
                    </p>
<div class="flex flex-col sm:flex-row gap-4 mt-6 reveal-element">
<a href="{{ route('login.form', ['mode' => 'register']) }}" class="bg-secondary text-on-secondary font-label-md text-label-md rounded-md px-8 py-4 shadow-sm hover:shadow-md hover:bg-secondary-container hover:text-on-secondary-container transition-all flex items-center justify-center gap-2">
                            Daftar Magang
                            <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
</a>
<a href="{{ route('landing.instansi') }}"  class="border border-white text-white font-label-md text-label-md rounded-md px-8 py-4 hover:bg-white/10 transition-all text-center inline-block">
                            Lihat Instansi
                        </a>
</div>
</div>
</section>
<!-- Jenis Pelayanan Surat Izin Rekomendasi Section -->
<section class="max-w-container-max mx-auto px-margin-desktop pt-16 pb-24 relative z-10 w-full overflow-hidden">
<div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-4">
    <div class="flex flex-col gap-2">
        <h2 class="font-headline-lg text-headline-lg text-on-surface">Jenis Pelayanan Surat Izin Rekomendasi</h2>
        <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">Silakan pilih jenis pelayanan sesuai dengan kebutuhan Anda.</p>
    </div>
    <!-- Navigation Buttons -->
    <div class="flex gap-2.5">
        <button id="slide-left-btn" class="w-10 h-10 rounded-full border border-outline-variant/60 flex items-center justify-center text-on-surface-variant hover:bg-surface-container hover:text-primary transition-all shadow-sm" aria-label="Slide Left">
            <span class="material-symbols-outlined" style="font-size: 20px;">chevron_left</span>
        </button>
        <button id="slide-right-btn" class="w-10 h-10 rounded-full border border-outline-variant/60 flex items-center justify-center text-on-surface-variant hover:bg-surface-container hover:text-primary transition-all shadow-sm" aria-label="Slide Right">
            <span class="material-symbols-outlined" style="font-size: 20px;">chevron_right</span>
        </button>
    </div>
</div>

<div id="services-scroll-container" class="flex flex-row overflow-x-auto gap-6 pt-4 pb-8 -mt-4 scrollbar-hide stagger-container scroll-smooth" style="scroll-snap-type: x mandatory;">
<div data-service="Penelitian (Perguruan Tinggi)" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">school</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">Penelitian (Perguruan Tinggi)</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Pelayanan pengajuan surat izin rekomendasi untuk kegiatan penelitian dari perguruan tinggi.</p>
<button onclick="openModal('penelitian_pt')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
<div data-service="Penelitian (Instansi / Lembaga Lainnya)" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">business</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">Penelitian (Instansi / Lembaga Lainnya)</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Pelayanan pengajuan surat izin rekomendasi kegiatan penelitian bagi instansi atau lembaga lainnya.</p>
<button onclick="openModal('penelitian_instansi')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
<div data-service="KKL / PKL / Magang (Mahasiswa)" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">work</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">KKL / PKL / Magang (Mahasiswa)</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Informasi persyaratan dan pengajuan surat izin rekomendasi untuk kegiatan KKL, PKL, dan magang mahasiswa.</p>
<button onclick="openModal('kkl_mahasiswa')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
<div data-service="KKN Mahasiswa" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">groups</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">KKN Mahasiswa</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Pelayanan pengajuan surat izin rekomendasi untuk pelaksanaan program Kuliah Kerja Nyata.</p>
<button onclick="openModal('kkn_mahasiswa')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
<div data-service="KKL / PKL / Magang (Siswa Sekolah)" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">backpack</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">KKL / PKL / Magang (Siswa Sekolah)</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Informasi persyaratan dan pengajuan surat izin rekomendasi untuk kegiatan KKL, PKL, atau magang bagi siswa sekolah.</p>
<button onclick="openModal('kkl_siswa')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
<div data-service="Pelaksanaan Kegiatan" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">event</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">Pelaksanaan Kegiatan</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Pelayanan surat izin rekomendasi untuk pelaksanaan kegiatan yang membutuhkan persetujuan sesuai ketentuan.</p>
<button onclick="openModal('pelaksanaan_kegiatan')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
<div data-service="Perpanjangan Izin Rekomendasi" class="service-card cursor-pointer bg-surface-container-lowest p-6 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-outline-variant/30 reveal-element hover-card-trigger flex flex-col gap-4 flex-shrink-0 w-full sm:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]" style="scroll-snap-align: start;">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center text-primary mb-2">
<span class="material-symbols-outlined">update</span>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface">Perpanjangan Izin Rekomendasi</h3>
<p class="font-body-md text-body-md text-on-surface-variant flex-grow">Pelayanan pengajuan perpanjangan izin rekomendasi untuk kegiatan yang masih berlangsung.</p>
<button onclick="openModal('perpanjangan')" class="mt-4 w-full py-3 bg-surface-container-low text-primary font-label-md text-label-md rounded-lg hover:bg-surface-container transition-colors font-medium">Lihat Persyaratan</button>
</div>
</div>
</section>
<!-- Statistics Section (SMART Setjen DPR RI Style) -->
<section class="max-w-container-max mx-auto px-margin-desktop py-16 -mt-12 relative z-20">
<div class="grid grid-cols-2 md:grid-cols-4 gap-stack-md stagger-container">
<!-- Stat Card 1 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-ambient border-t-4 border-outline-variant hover:border-secondary flex flex-col gap-2 hover:shadow-hover transition-all duration-300 reveal-scale hover-card-trigger">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-secondary">groups</span>
<span class="font-label-md text-label-md uppercase">Total Peserta Terdaftar</span>
</div>
<span class="font-headline-lg text-headline-lg text-on-surface hover:text-primary transition-colors duration-300 cursor-default">2,450</span>
</div>
<!-- Stat Card 2 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-ambient border-t-4 border-outline-variant hover:border-secondary flex flex-col gap-2 hover:shadow-hover transition-all duration-300 reveal-scale hover-card-trigger">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-secondary-container">how_to_reg</span>
<span class="font-label-md text-label-md uppercase">Peserta Diterima</span>
</div>
<span class="font-headline-lg text-headline-lg text-on-surface hover:text-primary transition-colors duration-300 cursor-default">850</span>
</div>
<!-- Stat Card 3 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-ambient border-t-4 border-outline-variant hover:border-secondary flex flex-col gap-2 hover:shadow-hover transition-all duration-300 reveal-scale hover-card-trigger">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-on-surface hover:text-primary transition-colors duration-300 cursor-default-fixed-dim">school</span>
<span class="font-label-md text-label-md uppercase">Peserta Aktif</span>
</div>
<span class="font-headline-lg text-headline-lg text-on-surface hover:text-primary transition-colors duration-300 cursor-default">320</span>
</div>
<!-- Stat Card 4 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-ambient border-t-4 border-outline-variant hover:border-secondary flex flex-col gap-2 hover:shadow-hover transition-all duration-300 reveal-scale hover-card-trigger">
<div class="flex items-center gap-2 text-on-surface-variant">
<span class="material-symbols-outlined text-tertiary-fixed-dim">account_balance</span>
<span class="font-label-md text-label-md uppercase">Dinas / OPD Tersedia</span>
</div>
<span class="font-headline-lg text-headline-lg text-on-surface hover:text-primary transition-colors duration-300 cursor-default">45</span>
</div>
</div>
</section>
<!-- Interactive Analytics Section -->
<section id="analytics-section" class="max-w-container-max mx-auto px-margin-desktop py-16 -mt-8 relative z-20 reveal-scale">
    <div class="bg-surface-container-lowest rounded-xl shadow-ambient border border-outline-variant/30 p-8 flex flex-col gap-8">
        <!-- Section Header -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6 border-b border-outline-variant/20 pb-6">
            <div class="flex flex-col gap-2">
                <h2 class="font-headline-lg text-headline-lg text-on-surface flex items-center gap-2">
                    <span class="material-symbols-outlined text-secondary text-[28px]">monitoring</span>
                    Data Layanan Publik
                </h2>
                <p class="font-body-md text-body-md text-on-surface-variant">Statistik real-time pendaftaran, status kelulusan, dan tren penggunaan harian.</p>
            </div>
            <!-- Service Selector Dropdown -->
            <div class="flex flex-col gap-2 min-w-[320px]">
                <label for="service-selector" class="font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider">Pilih Jenis Layanan:</label>
                <div class="relative">
                    <select id="service-selector" class="w-full rounded-lg border-outline-variant/60 bg-surface-container-low text-on-surface font-label-md text-label-md p-3 pr-10 focus:border-secondary focus:ring focus:ring-secondary/20 transition-all appearance-none cursor-pointer">
                        @foreach(array_keys($chartData) as $service)
                            <option value="{{ $service }}">{{ $service }}</option>
                        @endforeach
                    </select>
                    <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-outline pointer-events-none">expand_more</span>
                </div>
            </div>
        </div>

        <!-- Charts Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
            <!-- Left Card: Donut Chart (Total Registered vs Accepted) -->
            <div class="lg:col-span-2 bg-surface-container-low/40 rounded-xl p-6 border border-outline-variant/20 flex flex-col gap-6">
                <div class="flex flex-col gap-1">
                    <h3 class="font-title-lg text-title-lg text-on-surface flex items-center gap-2">
                        <span class="material-symbols-outlined text-secondary text-[22px]">pie_chart</span>
                        Status Kelulusan Berkas
                    </h3>
                    <p class="font-caption text-caption text-on-surface-variant">Rasio berkas pendaftaran terdaftar yang telah diterima.</p>
                </div>
                
                <!-- Chart Area -->
                <div class="flex-grow flex items-center justify-center min-h-[280px] relative">
                    <div id="donut-chart-container" class="w-full"></div>
                </div>

                <!-- Custom Stats Summary Box -->
                <div class="grid grid-cols-2 gap-4 border-t border-outline-variant/20 pt-4">
                    <div class="flex flex-col items-center p-3 bg-surface-container-low rounded-lg border border-outline-variant/10 text-center">
                        <span class="font-caption text-caption text-on-surface-variant font-semibold uppercase">Total Pendaftar</span>
                        <span id="stat-registered-val" class="font-headline-md text-headline-md text-on-surface mt-1">0</span>
                    </div>
                    <div class="flex flex-col items-center p-3 bg-surface-container-low rounded-lg border border-outline-variant/10 text-center">
                        <span class="font-caption text-caption text-secondary font-semibold uppercase">Berkas Diterima</span>
                        <span id="stat-accepted-val" class="font-headline-md text-headline-md text-secondary mt-1">0</span>
                    </div>
                </div>
            </div>

            <!-- Right Card: Bar Chart (Weekly/Daily Submissions) -->
            <div class="lg:col-span-3 bg-surface-container-low/40 rounded-xl p-6 border border-outline-variant/20 flex flex-col gap-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div class="flex flex-col gap-1">
                        <h3 class="font-title-lg text-title-lg text-on-surface flex items-center gap-2">
                            <span class="material-symbols-outlined text-secondary text-[22px]">bar_chart</span>
                            Aktivitas Pendaftaran Harian
                        </h3>
                        <p class="font-caption text-caption text-on-surface-variant">Jumlah pendaftar harian selama 7 hari terakhir.</p>
                    </div>
                    <!-- Today Badge -->
                    <div class="bg-secondary/10 border border-secondary/20 rounded-lg px-4 py-2 flex items-center gap-2 text-secondary">
                        <span class="material-symbols-outlined text-[20px]">today</span>
                        <div class="flex flex-col">
                            <span class="font-caption text-[10px] font-bold uppercase tracking-wider leading-none">Pengguna Hari Ini</span>
                            <span id="today-count-badge" class="font-label-md text-label-md font-bold leading-none mt-1">0 Orang</span>
                        </div>
                    </div>
                </div>

                <!-- Chart Area -->
                <div class="flex-grow min-h-[280px] flex items-center justify-center">
                    <div id="bar-chart-container" class="w-full"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Timeline Section -->
<section class="bg-surface py-16 border-t border-surface-container">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="text-center flex flex-col gap-2 mb-12">
<h2 class="font-headline-lg text-headline-lg text-on-surface">Alur Tahapan Permohonan Magang</h2>
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl mx-auto">Informasi tahapan pelaksanaan program magang di lingkungan Pemerintah Kabupaten Bogor.</p>
</div>
<div class="relative">
<!-- Connecting Line -->

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10 stagger-container">
<!-- Stage 1 -->
<div class="flex flex-col gap-4 relative group cursor-pointer reveal-element">
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-md mx-auto lg:mx-0 z-10 border-4 border-surface relative group-hover:scale-110 transition-transform duration-300">
<span class="material-symbols-outlined text-on-primary fill">description</span>
</div>
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-ambient border border-surface-container-high flex-grow flex flex-col gap-2 group-hover:border-primary group-hover:shadow-hover group-hover:-translate-y-1 transition-all duration-300">
<span class="font-label-md text-label-md text-secondary">01</span>
<h3 class="font-title-lg text-title-lg text-on-surface hover:text-on-surface hover:text-on-surface-variant transition-colors duration-300 cursor-default transition-colors duration-300 cursor-default">Pendaftaran Calon Peserta Magang</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Calon peserta mengajukan pendaftaran program magang sesuai dengan ketentuan yang berlaku.</p>
</div>
</div>
<!-- Stage 2 -->
<div class="flex flex-col gap-4 relative group cursor-pointer reveal-element">
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-md mx-auto lg:mx-0 z-10 border-4 border-surface relative group-hover:scale-110 transition-transform duration-300">
<span class="material-symbols-outlined text-on-primary fill">search</span>
</div>
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-ambient border border-surface-container-high flex-grow flex flex-col gap-2 group-hover:border-primary group-hover:shadow-hover group-hover:-translate-y-1 transition-all duration-300">
<span class="font-label-md text-label-md text-secondary">02</span>
<h3 class="font-title-lg text-title-lg text-on-surface hover:text-on-surface hover:text-on-surface-variant transition-colors duration-300 cursor-default transition-colors duration-300 cursor-default">Verifikasi Peserta</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Data dan persyaratan calon peserta melalui proses verifikasi.</p>
</div>
</div>
<!-- Stage 3 -->
<div class="flex flex-col gap-4 relative group cursor-pointer reveal-element">
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-md mx-auto lg:mx-0 z-10 border-4 border-surface relative group-hover:scale-110 transition-transform duration-300">
<span class="material-symbols-outlined text-on-primary fill">check_circle</span>
</div>
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-ambient border border-surface-container-high flex-grow flex flex-col gap-2 group-hover:border-primary group-hover:shadow-hover group-hover:-translate-y-1 transition-all duration-300">
<span class="font-label-md text-label-md text-secondary">03</span>
<h3 class="font-title-lg text-title-lg text-on-surface hover:text-on-surface hover:text-on-surface-variant transition-colors duration-300 cursor-default transition-colors duration-300 cursor-default">Penetapan Peserta Magang</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Calon peserta yang memenuhi persyaratan ditetapkan sebagai peserta magang dan memperoleh informasi penempatan.</p>
</div>
</div>
<!-- Stage 4 -->
<div class="flex flex-col gap-4 relative group cursor-pointer reveal-element">
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-md mx-auto lg:mx-0 z-10 border-4 border-surface">
<span class="material-symbols-outlined text-on-primary fill">work</span>
</div>
<div class="bg-surface-container-lowest p-6 rounded-xl shadow-ambient border border-surface-container-high flex-grow flex flex-col gap-2 group-hover:border-primary group-hover:shadow-hover group-hover:-translate-y-1 transition-all duration-300">
<span class="font-label-md text-label-md text-secondary">04</span>
<h3 class="font-title-lg text-title-lg text-on-surface hover:text-on-surface hover:text-on-surface-variant transition-colors duration-300 cursor-default transition-colors duration-300 cursor-default">Pelaksanaan Program Magang</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Peserta melaksanakan program magang pada Dinas / OPD yang telah ditetapkan sesuai dengan ketentuan yang berlaku.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Instansi Tujuan Magang -->
<section class="max-w-container-max mx-auto px-margin-desktop py-16 w-full">
<div class="flex justify-between items-end mb-stack-lg">
<div class="flex flex-col gap-2">
<h2 class="font-headline-lg text-headline-lg text-on-surface">Instansi Tujuan Magang</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Pilih instansi yang sesuai dengan bidang studi dan minat Anda.</p>
</div>
<a class="font-label-md text-label-md text-secondary hover:underline flex items-center gap-1" href="{{ route('landing.instansi') }}">Lihat Semua <span class="material-symbols-outlined text-[16px]">arrow_forward</span></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-container">
<a class="group block bg-surface-container-lowest rounded-xl p-6 shadow-level-1 shadow-level-1-hover border-t-4 border-outline-variant hover:border-primary transition-colors duration-300 relative overflow-hidden flex flex-col h-full border border-x-outline-variant/30 border-b-outline-variant/30 reveal-element hover-card-trigger" href="{{ route('landing.instansi_detail') }}">
<div class="flex justify-between items-start mb-4">
  <div class="w-16 h-16 bg-surface-container flex items-center justify-center rounded-lg border border-outline-variant/20">
    <span class="material-symbols-outlined text-[32px] text-primary group-hover:scale-110 transition-transform">computer</span>
  </div>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface group-hover:text-primary mb-2 transition-colors line-clamp-2">Dinas Komunikasi dan Informatika</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6 flex-grow line-clamp-3">Membuka kesempatan magang pada beberapa bidang teknologi informasi.</p>
<div class="mt-auto flex items-center justify-between pt-4 border-t border-surface-container-high">
  <div class="flex items-center gap-1 px-3 py-1.5 bg-[#E8F5E9] text-[#2E7D32] rounded-lg border border-[#C8E6C9] font-label-md text-caption font-bold"><span class="material-symbols-outlined text-[16px]">check_circle</span><span>KUOTA TERSEDIA</span></div>
  <div class="py-2 px-4 bg-surface-container-low text-primary font-label-md text-label-md rounded-md hover:bg-surface-container transition-colors text-center inline-block">Lihat Detail</div>
</div>
</a>
<a class="group block bg-surface-container-lowest rounded-xl p-6 shadow-level-1 shadow-level-1-hover border-t-4 border-outline-variant hover:border-primary transition-colors duration-300 relative overflow-hidden flex flex-col h-full border border-x-outline-variant/30 border-b-outline-variant/30 reveal-element hover-card-trigger" href="{{ route('landing.instansi_detail') }}">
<div class="flex justify-between items-start mb-4">
  <div class="w-16 h-16 bg-surface-container flex items-center justify-center rounded-lg border border-outline-variant/20">
    <span class="material-symbols-outlined text-[32px] text-primary group-hover:scale-110 transition-transform">school</span>
  </div>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface group-hover:text-primary mb-2 transition-colors line-clamp-2">Dinas Pendidikan</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6 flex-grow line-clamp-3">Fokus pada pengembangan kurikulum dan administrasi pendidikan.</p>
<div class="mt-auto flex items-center justify-between pt-4 border-t border-surface-container-high">
  <div class="flex items-center gap-1 px-3 py-1.5 bg-[#E8F5E9] text-[#2E7D32] rounded-lg border border-[#C8E6C9] font-label-md text-caption font-bold"><span class="material-symbols-outlined text-[16px]">check_circle</span><span>KUOTA TERSEDIA</span></div>
  <div class="py-2 px-4 bg-surface-container-low text-primary font-label-md text-label-md rounded-md hover:bg-surface-container transition-colors text-center inline-block">Lihat Detail</div>
</div>
</a>
<a class="group block bg-surface-container-lowest rounded-xl p-6 shadow-level-1 shadow-level-1-hover border-t-4 border-outline-variant hover:border-primary transition-colors duration-300 relative overflow-hidden flex flex-col h-full border border-x-outline-variant/30 border-b-outline-variant/30 reveal-element hover-card-trigger" href="{{ route('landing.instansi_detail') }}">
<div class="flex justify-between items-start mb-4">
  <div class="w-16 h-16 bg-surface-container flex items-center justify-center rounded-lg border border-outline-variant/20">
    <span class="material-symbols-outlined text-[32px] text-primary group-hover:scale-110 transition-transform">domain</span>
  </div>
</div>
<h3 class="font-title-lg text-title-lg text-on-surface group-hover:text-primary mb-2 transition-colors line-clamp-2">Badan Perencanaan Pembangunan Daerah</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6 flex-grow line-clamp-3">Perencanaan strategis dan analisis data pembangunan daerah.</p>
<div class="mt-auto flex items-center justify-between pt-4 border-t border-surface-container-high">
  <div class="flex items-center gap-1 px-3 py-1.5 bg-surface-variant text-on-surface-variant rounded-lg border border-outline-variant/50 font-label-md text-caption font-bold"><span class="material-symbols-outlined text-[16px]">cancel</span><span>KUOTA PENUH</span></div>
  <div class="py-2 px-4 bg-surface-container-low text-primary font-label-md text-label-md rounded-md hover:bg-surface-container transition-colors text-center inline-block">Lihat Detail</div>
</div>
</a>
</div>
</section>
<!-- Peserta Magang Diterima -->
<section class="max-w-container-max mx-auto px-margin-desktop py-16 w-full">
<div class="flex flex-col gap-8">
<div class="flex justify-between items-end mb-stack-lg"><div class="flex flex-col gap-2"><h2 class="font-headline-lg text-headline-lg text-on-surface">Peserta Magang Diterima</h2><p class="font-body-md text-body-md text-on-surface-variant">Daftar peserta yang telah diterima untuk mengikuti program magang di lingkungan Pemerintah Kabupaten Bogor.</p></div><a class="font-label-md text-label-md text-secondary hover:underline flex items-center gap-1" href="{{ route('landing.peserta') }}">Lihat Selengkapnya <span class="material-symbols-outlined text-[16px]">arrow_forward</span></a></div>
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 rounded-md font-label-md text-label-md bg-primary-container text-on-primary">Semua Peserta</button>
</div>
<div class="relative w-full md:w-72">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
<input class="w-full pl-10 pr-4 py-2 rounded-md border border-outline-variant bg-surface-container-lowest focus:outline-none focus:border-primary text-body-md" placeholder="Cari nama peserta..." type="text"/>
</div>
</div>
<div class="bg-surface-container-lowest rounded-xl shadow-ambient overflow-hidden border border-surface-container-high">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse"><thead><tr class="bg-surface-container-low border-b border-surface-container-high"><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Nama Peserta</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Jurusan</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Asal Instansi</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Tujuan Dinas</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Bidang</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Tanggal Diterima</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Tanggal Berakhir</th><th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Status</th></tr></thead><tbody class="divide-y divide-surface-container-high"><tr class="hover:bg-surface-container-low/50 transition-colors"><td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center font-bold">AO</div><span class="font-label-md text-on-surface">Arjuna Olanda Putra</span></div></td><td class="px-6 py-4 text-body-md text-on-surface-variant">Teknik Informatika</td><td class="px-6 py-4 text-body-md text-on-surface-variant">IPB University</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Dinas Komunikasi dan Informatika</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Aplikasi Informatika</td><td class="px-6 py-4 text-body-md text-on-surface-variant">12 Mei 2024</td><td class="px-6 py-4 text-body-md text-on-surface-variant">12 Agu 2024</td><td class="px-6 py-4"><span class="px-3 py-1 rounded-full bg-[#DCFCE7] text-[#15803d] dark:bg-emerald-950/40 dark:text-emerald-400 font-label-md text-caption uppercase">Diterima</span></td></tr><tr class="hover:bg-surface-container-low/50 transition-colors"><td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center font-bold">FW</div><span class="font-label-md text-on-surface">Fachrizal Wisnu Pratama</span></div></td><td class="px-6 py-4 text-body-md text-on-surface-variant">Sistem Informasi</td><td class="px-6 py-4 text-body-md text-on-surface-variant">IPB University</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Dinas Komunikasi dan Informatika</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Aplikasi Informatika</td><td class="px-6 py-4 text-body-md text-on-surface-variant">12 Mei 2024</td><td class="px-6 py-4 text-body-md text-on-surface-variant">12 Agu 2024</td><td class="px-6 py-4"><span class="px-3 py-1 rounded-full bg-[#DCFCE7] text-[#15803d] dark:bg-emerald-950/40 dark:text-emerald-400 font-label-md text-caption uppercase">Diterima</span></td></tr><tr class="hover:bg-surface-container-low/50 transition-colors"><td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-surface-tint text-on-primary flex items-center justify-center font-bold">SR</div><span class="font-label-md text-on-surface">Siti Rahmawati</span></div></td><td class="px-6 py-4 text-body-md text-on-surface-variant">Akuntansi</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Universitas Indonesia</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Badan Pengelola Keuangan Daerah</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Anggaran & Perbendaharaan</td><td class="px-6 py-4 text-body-md text-on-surface-variant">10 Mei 2024</td><td class="px-6 py-4 text-body-md text-on-surface-variant">10 Agu 2024</td><td class="px-6 py-4"><span class="px-3 py-1 rounded-full bg-[#DCFCE7] text-[#15803d] dark:bg-emerald-950/40 dark:text-emerald-400 font-label-md text-caption uppercase">Diterima</span></td></tr><tr class="hover:bg-surface-container-low/50 transition-colors"><td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-secondary text-on-primary flex items-center justify-center font-bold">BS</div><span class="font-label-md text-on-surface">Budi Santoso</span></div></td><td class="px-6 py-4 text-body-md text-on-surface-variant">Kesehatan Masyarakat</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Universitas Indonesia</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Dinas Kesehatan</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Kesehatan Masyarakat</td><td class="px-6 py-4 text-body-md text-on-surface-variant">08 Mei 2024</td><td class="px-6 py-4 text-body-md text-on-surface-variant">08 Agu 2024</td><td class="px-6 py-4"><span class="px-3 py-1 rounded-full bg-[#DCFCE7] text-[#15803d] dark:bg-emerald-950/40 dark:text-emerald-400 font-label-md text-caption uppercase">Diterima</span></td></tr><tr class="hover:bg-surface-container-low/50 transition-colors"><td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold">DA</div><span class="font-label-md text-on-surface">Dian Anggraini</span></div></td><td class="px-6 py-4 text-body-md text-on-surface-variant">Administrasi Perkantoran</td><td class="px-6 py-4 text-body-md text-on-surface-variant">SMK Negeri 1 Bogor</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Dinas Pendidikan</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Kurikulum & Ketenagaan</td><td class="px-6 py-4 text-body-md text-on-surface-variant">05 Mei 2024</td><td class="px-6 py-4 text-body-md text-on-surface-variant">05 Agu 2024</td><td class="px-6 py-4"><span class="px-3 py-1 rounded-full bg-[#DCFCE7] text-[#15803d] dark:bg-emerald-950/40 dark:text-emerald-400 font-label-md text-caption uppercase">Diterima</span></td></tr><tr class="hover:bg-surface-container-low/50 transition-colors"><td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-outline text-white flex items-center justify-center font-bold">RK</div><span class="font-label-md text-on-surface">Rizky Kurniawan</span></div></td><td class="px-6 py-4 text-body-md text-on-surface-variant">Teknik Telekomunikasi</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Telkom University</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Dinas Komunikasi dan Informatika</td><td class="px-6 py-4 text-body-md text-on-surface-variant">Infrastruktur Teknologi</td><td class="px-6 py-4 text-body-md text-on-surface-variant">02 Mei 2024</td><td class="px-6 py-4 text-body-md text-on-surface-variant">02 Agu 2024</td><td class="px-6 py-4"><span class="px-3 py-1 rounded-full bg-[#DCFCE7] text-[#15803d] dark:bg-emerald-950/40 dark:text-emerald-400 font-label-md text-caption uppercase">Diterima</span></td></tr></tbody></table>
</div>
</div>
</div>
</section>
<!-- Dinas / OPD Grid -->
</main>




<!-- MODALS -->


<div id="modal_penelitian_pt" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_penelitian_pt" onclick="closeModal('penelitian_pt')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_penelitian_pt" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight">Penelitian / Pengambilan Data / Wawancara / Survey</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Institusi Pendidikan (Kampus / Universitas / Perguruan Tinggi) yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang mengikuti kegiatan Penelitian / Pengambilan Data / Wawancara / Survey. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN, contoh (Waktu : 7 Juli 2021 s.d 7 September 2021) MAKSIMAL 3 BULAN.</li>
                        <li>KTP dan Kartu Mahasiswa.</li>
                        <li>Proposal Penelitian / Pengambilan Data / Wawancara / Survey.</li>
                        <li>Surat Dari Lokasi Penelitian / Pengambilan Data / Wawancara / Survey Harus Memiliki Tanda Terima Koordinasi (Paraf / tandatangan yang di bubuhi cap stempel).</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('penelitian_pt')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.penelitian_pt') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>

<div id="modal_penelitian_instansi" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_penelitian_instansi" onclick="closeModal('penelitian_instansi')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_penelitian_instansi" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight">Penelitian / Pengambilan Data / Wawancara / Survey</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Instansi / Lembaga yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang mengikuti kegiatan Penelitian / Pengambilan Data / Wawancara / Survey / Pelaksanaan Kegiatan. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN, contoh (Waktu : 7 Juli 2021 s.d 7 September 2021) MAKSIMAL 3 BULAN.</li>
                        <li>KTP.</li>
                        <li>Surat Keterangan Penelitian dari DPMPTSP Provinsi Jawa Barat.</li>
                        <li>Surat Keterangan Penelitian dari Dirjen Polpum Kemendagri.</li>
                        <li>Surat Dari Lokasi Penelitian / Pengambilan Data / Wawancara / Survey / Pelaksanaan Kegiatan Harus Memiliki Tanda Terima Koordinasi (Paraf / tandatangan yang di bubuhi cap stempel).</li>
                        <li>Proposal Penelitian / Pengambilan Data / Wawancara / Survey / Pelaksanaan Kegiatan.</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('penelitian_instansi')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.penelitian_instansi') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>

<div id="modal_kkl_mahasiswa" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_kkl_mahasiswa" onclick="closeModal('kkl_mahasiswa')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_kkl_mahasiswa" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight uppercase">KKL / PKL / MAGANG (MAHASISWA)</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Institusi Pendidikan (Kampus / Universitas / Perguruan Tinggi) yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang mengikuti kegiatan PKL. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN. contoh (Waktu : 7 Juli 2021 s.d 7 September 2021), MAKSIMAL 3 BULAN.</li>
                        <li>KTP dan Kartu Mahasiswa.</li>
                        <li>Surat Dari Lokasi PKL / KKL Harus Memiliki Tanda Terima Koordinasi (Paraf / tandatangan yang di bubuhi cap stempel).</li>
                        <li>Proposal Magang / PKL / KKL.</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('kkl_mahasiswa')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.kkl_mahasiswa') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>

<div id="modal_kkn_mahasiswa" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_kkn_mahasiswa" onclick="closeModal('kkn_mahasiswa')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_kkn_mahasiswa" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight uppercase">KKN MAHASISWA</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Institusi Pendidikan (Kampus / Universitas / Perguruan Tinggi) yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang mengikuti kegiatan KKN. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN, contoh (Waktu : 7 Juli 2021 s.d 7 September 2021) MAKSIMAL 3 BULAN.</li>
                        <li>KTP (Penanggung Jawab / Pembimbing dan Mahasiswa yang mengikuti KKN).</li>
                        <li>Kartu Mahasiswa.</li>
                        <li>Proposal atau lampiran kegiatan KKN.</li>
                        <li>Surat Dari Lokasi KKN Harus Memiliki Tanda Terima Koordinasi (Paraf / tandatangan yang di bubuhi cap stempel).</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('kkn_mahasiswa')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.kkn_mahasiswa') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>

<div id="modal_kkl_siswa" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_kkl_siswa" onclick="closeModal('kkl_siswa')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_kkl_siswa" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight uppercase">PKL / MAGANG (SISWA SEKOLAH)</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Sekolah yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang akan melaksanakan PKL. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN, contoh (Waktu : 7 Juli 2021 s.d 7 September 2021) MAKSIMAL 3 BULAN.</li>
                        <li>KTP (Penanggung Jawab / Pembimbing).</li>
                        <li>Kartu Pelajar.</li>
                        <li>Surat Dari Lokasi PKL Harus Memiliki Tanda Terima Koordinasi (Paraf / tandatangan yang di bubuhi cap stempel).</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('kkl_siswa')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.kkl_siswa') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>

<div id="modal_pelaksanaan_kegiatan" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_pelaksanaan_kegiatan" onclick="closeModal('pelaksanaan_kegiatan')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_pelaksanaan_kegiatan" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight uppercase">PELAKSANAAN KEGIATAN</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Institusi Pendidikan (Kampus / Universitas / Perguruan Tinggi) yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang mengikuti kegiatan Pelaksanaan Kegiatan. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN, contoh (Waktu : 7 Juli 2021 s.d 7 September 2021) MAKSIMAL 3 BULAN.</li>
                        <li>KTP (Penanggung Jawab / Pembimbing dan Mahasiswa yang mengikuti Pelaksanaan Kegiatan).</li>
                        <li>Kartu Mahasiswa.</li>
                        <li>Proposal / Lampiran Pelaksanaan Kegiatan.</li>
                        <li>Surat Dari Lokasi Pelaksanaan Kegiatan Harus Memiliki Tanda Terima Koordinasi (Paraf / tandatangan yang di bubuhi cap stempel).</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('pelaksanaan_kegiatan')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.pelaksanaan_kegiatan') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>

<div id="modal_perpanjangan" class="fixed inset-0 z-50 hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity opacity-0" id="backdrop_perpanjangan" onclick="closeModal('perpanjangan')"></div>
    
    <!-- Modal Content -->
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
        <div id="modal_box_perpanjangan" class="relative bg-white rounded-2xl text-left overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.1)] transform transition-all sm:my-8 sm:max-w-2xl w-full opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-300">
            <!-- Header -->
            <div class="px-6 py-5" style="background: #5a4bd1;">
                <h3 class="text-xl font-bold text-white text-center leading-tight uppercase">PERPANJANGAN IZIN REKOMENDASI</h3>
            </div>
            
            <!-- Body -->
            <div class="px-8 py-6 max-h-[60vh] overflow-y-auto">
                <p class="text-gray-600 mb-6 font-medium text-[15px]">Sebelum melanjutkan pengajuan, mohon pastikan dokumen Anda memenuhi persyaratan berikut:</p>
                <div class="bg-[#f8f9fc] p-6 rounded-xl border border-gray-100">
                    <ul class="list-disc pl-5 m-0 space-y-4 marker:text-[#5a4bd1] text-gray-600 text-[15px] leading-relaxed">
                        <li>Surat Pengantar / Permohonan Asli dari Institusi Pendidikan (Kampus / Universitas / Perguruan Tinggi) / Instansi Lembaga / Sekolah yang di Tunjukan Kepada Kepala Badan Kesbangpol Kabupaten Bogor dan melampirkan nama yang mengikuti kegiatan Pelaksanaan Kegiatan. WAJIB MELAMPIRKAN WAKTU PELAKSANAAN, contoh (Waktu : 7 Juli 2021 s.d 7 September 2021) MAKSIMAL 3 BULAN.</li>
                        <li>Surat Izin Rekomendasi Sebelumnya. Dikeluarkan oleh Bakesbangpol Kab. Bogor.</li>
                        <li>Surat Rekomendasi harus dilokasi yang sama, jika ada perubahan lokasi maka diharuskan untuk melakukan permohonan pengajuan baru.</li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-white px-8 py-5 flex flex-col sm:flex-row justify-center items-center gap-4 border-t border-gray-100">
                <button type="button" onclick="closeModal('perpanjangan')" class="w-full sm:w-[140px] px-6 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105" style="background: #606770;">Tutup</button>
                <a href="{{ route('landing.form.perpanjangan') }}" class="w-full sm:w-auto px-8 py-3 rounded-full font-bold text-white shadow-sm transition-transform hover:scale-105 text-center" style="background: #4634ff;">Lanjutkan untuk Mengajukan</a>
            </div>
        </div>
    </div>
</div>



<!-- Modal Script -->
<script>
    function openModal(id) {
        const modal = document.getElementById('modal_' + id);
        const backdrop = document.getElementById('backdrop_' + id);
        const modalBox = document.getElementById('modal_box_' + id);
        
        // Show container
        modal.classList.remove('hidden');
        
        // Trigger animations
        setTimeout(() => {
            backdrop.classList.remove('opacity-0');
            modalBox.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
            modalBox.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100');
        }, 10);
        
        // Prevent scrolling on body
        document.body.style.overflow = 'hidden';
    }
    
    function closeModal(id) {
        const modal = document.getElementById('modal_' + id);
        const backdrop = document.getElementById('backdrop_' + id);
        const modalBox = document.getElementById('modal_box_' + id);
        
        // Trigger exit animations
        backdrop.classList.add('opacity-0');
        modalBox.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100');
        modalBox.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
        
        // Hide container after animation
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }, 300);
    }

    // Scroll and Stagger Animations via Intersection Observer
    document.addEventListener('DOMContentLoaded', () => {
        // Trigger Hero immediately on page load
        setTimeout(() => {
            const heroElements = document.querySelectorAll('.stagger-container .reveal-element');
            heroElements.forEach((el, index) => {
                setTimeout(() => {
                    el.classList.add('active');
                }, index * 100);
            });
        }, 100);

        // Stagger container observer
        const staggerContainers = document.querySelectorAll('.stagger-container');
        staggerContainers.forEach(container => {
            // skip hero container since it is triggered immediately
            if (container.closest('section').classList.contains('relative') && container.closest('section').classList.contains('min-h-[600px]')) {
                return;
            }
            const children = container.querySelectorAll('.reveal-element, .reveal-scale, .reveal-element-left, .reveal-element-right');
            const containerObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        children.forEach((child, index) => {
                            setTimeout(() => {
                                child.classList.add('active');
                            }, index * 100);
                        });
                        containerObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.05, rootMargin: '0px 0px -50px 0px' });
            containerObserver.observe(container);
        });

        // Individual elements observer
        const revealElements = document.querySelectorAll('.reveal-element:not(.stagger-container *), .reveal-scale:not(.stagger-container *), .reveal-element-left:not(.stagger-container *), .reveal-element-right:not(.stagger-container *)');
        const elementObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    elementObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
        
        revealElements.forEach(el => elementObserver.observe(el));

        // Horizontal scrolling for services cards
        const container = document.getElementById('services-scroll-container');
        const leftBtn = document.getElementById('slide-left-btn');
        const rightBtn = document.getElementById('slide-right-btn');

        if (container && leftBtn && rightBtn) {
            const scrollAmount = () => {
                const firstCard = container.querySelector('.hover-card-trigger');
                return firstCard ? firstCard.offsetWidth + 24 : 350; // card width + gap
            };

            leftBtn.addEventListener('click', () => {
                container.scrollBy({ left: -scrollAmount(), behavior: 'smooth' });
            });

            rightBtn.addEventListener('click', () => {
                container.scrollBy({ left: scrollAmount(), behavior: 'smooth' });
            });

            const updateButtonState = () => {
                const isAtStart = container.scrollLeft <= 5;
                const isAtEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth - 5;
                
                leftBtn.style.opacity = isAtStart ? '0.4' : '1';
                leftBtn.style.cursor = isAtStart ? 'default' : 'pointer';
                
                rightBtn.style.opacity = isAtEnd ? '0.4' : '1';
                rightBtn.style.cursor = isAtEnd ? 'default' : 'pointer';
            };

            container.addEventListener('scroll', updateButtonState);
            // Run initially
            setTimeout(updateButtonState, 150);
        }

        // Charts and interactive logic
        const serviceStats = @json($chartData);
        const dayNames = @json($pastDayNames);
        let donutChart = null;
        let barChart = null;

        function highlightServiceCard(serviceName) {
            // Remove active style from all cards
            document.querySelectorAll('.service-card').forEach(card => {
                card.classList.remove('border-[#115cb9]', 'ring-2', 'ring-[#115cb9]/20');
            });
            // Add active style to matching card
            const activeCard = document.querySelector(`.service-card[data-service="${serviceName}"]`);
            if (activeCard) {
                activeCard.classList.add('border-[#115cb9]', 'ring-2', 'ring-[#115cb9]/20');
            }
        }

        function renderCharts(serviceName) {
            const data = serviceStats[serviceName];
            if (!data) return;

            // Highlight the card in the service list
            highlightServiceCard(serviceName);

            // Update stats summary in HTML
            document.getElementById('stat-registered-val').textContent = Number(data.registered).toLocaleString('id-ID');
            document.getElementById('stat-accepted-val').textContent = Number(data.accepted).toLocaleString('id-ID');
            document.getElementById('today-count-badge').textContent = `${data.today} Orang`;

            // Donut Chart Config
            const donutOptions = {
                series: [data.registered - data.accepted, data.accepted],
                chart: {
                    type: 'donut',
                    height: 280,
                    fontFamily: 'Plus Jakarta Sans, sans-serif',
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 500
                    }
                },
                labels: ['Sedang Diproses / Lainnya', 'Diterima'],
                colors: ['#f59e0b', '#10b981'], // Amber and Emerald Green
                legend: {
                    show: true,
                    position: 'bottom',
                    labels: {
                        colors: 'var(--tw-on-surface)'
                    }
                },
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: '11px',
                        fontWeight: '700',
                        colors: ['#ffffff']
                    },
                    dropShadow: {
                        enabled: true,
                        top: 1,
                        left: 1,
                        blur: 1,
                        opacity: 0.5
                    },
                    formatter: function (val) {
                        return val.toFixed(1) + "%";
                    }
                },
                tooltip: {
                    theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
                    y: {
                        formatter: function (value) {
                            return value + " Berkas";
                        }
                    }
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '52%', // Thicker ring to fit labels
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: 'Total Terdaftar',
                                    color: 'var(--tw-on-surface-variant)',
                                    fontSize: '12px',
                                    fontWeight: '600',
                                    formatter: function (w) {
                                        return data.registered.toLocaleString('id-ID');
                                    }
                                },
                                value: {
                                    color: 'var(--tw-on-surface)',
                                    fontSize: '20px',
                                    fontWeight: '700',
                                    formatter: function (val) {
                                        return val;
                                    }
                                }
                            }
                        }
                    }
                }
            };

            // Bar Chart Config (highlight last column which represents Today)
            const colors = Array(6).fill('#818cf8'); // soft indigo for previous days
            colors.push('#10b981'); // Emerald Green for Today

            const barOptions = {
                series: [{
                    name: 'Jumlah Pengguna',
                    data: data.weekly_series
                }],
                chart: {
                    type: 'bar',
                    height: 280,
                    fontFamily: 'Plus Jakarta Sans, sans-serif',
                    toolbar: {
                        show: false
                    },
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 500
                    }
                },
                colors: colors,
                plotOptions: {
                    bar: {
                        borderRadius: 4,
                        columnWidth: '50%',
                        distributed: true
                    }
                },
                dataLabels: {
                    enabled: false
                },
                legend: {
                    show: false
                },
                xaxis: {
                    categories: dayNames,
                    labels: {
                        style: {
                            colors: Array(7).fill('var(--tw-on-surface-variant)'),
                            fontSize: '12px',
                            fontWeight: 600
                        }
                    },
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: 'var(--tw-on-surface-variant)'
                        },
                        formatter: function (val) {
                            return Math.round(val);
                        }
                    }
                },
                grid: {
                    borderColor: 'var(--tw-outline-variant)',
                    opacity: 0.1,
                    strokeDashArray: 4,
                    yaxis: {
                        lines: {
                            show: true
                        }
                    }
                },
                tooltip: {
                    theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
                    y: {
                        formatter: function (val) {
                            return val + " Pengguna";
                        }
                    }
                }
            };

            if (donutChart) {
                donutChart.updateOptions(donutOptions);
            } else {
                donutChart = new ApexCharts(document.querySelector("#donut-chart-container"), donutOptions);
                donutChart.render();
            }

            if (barChart) {
                barChart.updateOptions(barOptions);
            } else {
                barChart = new ApexCharts(document.querySelector("#bar-chart-container"), barOptions);
                barChart.render();
            }
        }

        // Initialize selector & charts
        const serviceSelector = document.getElementById('service-selector');
        if (serviceSelector) {
            renderCharts(serviceSelector.value);

            serviceSelector.addEventListener('change', function(e) {
                renderCharts(e.target.value);
            });
        }

        // Handle Card Clicks in services list
        document.querySelectorAll('.service-card').forEach(card => {
            card.addEventListener('click', function(e) {
                // If the user clicked the button "Lihat Persyaratan", don't scroll or intercept
                if (e.target.closest('button')) {
                    return;
                }
                const serviceName = this.getAttribute('data-service');
                if (serviceName && serviceSelector) {
                    serviceSelector.value = serviceName;
                    renderCharts(serviceName);
                    // Smooth scroll to analytics section
                    const targetSection = document.getElementById('analytics-section');
                    if (targetSection) {
                        targetSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }
            });
        });
    });
</script>
@endsection















