@extends('layouts.frontend.master')
@section('content')
    <!-- Untuk Tampilan di Halaman Utama aplikasi Web -->
    <!-- Hitung Mundur -->
    @php
        $p = 'setting.home';
        $k = "$p.hitung_mundur";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section
            class="position-relative"
            data-anim-wrap
            style="background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), url('{{ asset('assets/bg_tiff.jpg') }}') center center / cover no-repeat;
                padding-top: 0 !important; padding-bottom: 0 !important;">
            <div class="container py-20" style="position: relative; z-index: 2;">
                <!-- Desktop: justify-between, Mobile: flex-column + center -->
                <div class="row y-gap-20 justify-between items-center flex-lg-row flex-column text-lg-start">
                    <!-- Kolom Teks (kiri desktop, tengah mobile) -->
                    <div class="col-xl-7 col-lg-7" data-anim-child="slide-right delay-{{ $anim++ }}">
                        <h2 class="text-30 lh-15 text-dark mobile-text-20 text-lg-start">
                            {!! settings()->get("$k.title") !!}
                        </h2>
                        @php
                            $start = settings()->get("$k.start_date");
                            $end = settings()->get("$k.end_date");
                        @endphp
                        @if ($start && $end)
                            <p class="fw-medium mt-2 mb-2 mobile-text-16 text-lg-start" style="font-weight: bold; color: #D93025;">
                                {{ \Carbon\Carbon::parse($start)->translatedFormat('d') }}
                                - {{ \Carbon\Carbon::parse($end)->translatedFormat('d F Y') }}
                            </p>
                        @endif
                        <a href="{{ str_parse(settings()->get("$k.button_link")) }}"
                           class="btn btn-sm btn-outline-light text-dark fw-normal mobile-text-14 text-lg-start"
                           style="font-weight: bold">
                            {{ settings()->get("$k.button_text") ?? 'Info Lengkap' }}
                        </a>
                    </div>

                    <!-- Kolom Countdown (tengah desktop & mobile) -->
                    <div class="col-xl-5 col-lg-5" data-anim-child="slide-left delay-{{ $anim++ }}">
                        @if ($end)
                            <div id="countdown-box" class="text-center" data-end-date="{{ \Carbon\Carbon::parse($end)->format('Y-m-d\TH:i:s') }}">
                                <div class="countdown-time d-flex align-items-center justify-content-center mb-2 text-30 lh-15 mobile-text-20" style="font-weight: bold; color: #D93025;">
                                    <div class="countdown-item d-flex align-items-center">
                                        <span class="countdown-value" id="countdown-days">00</span>
                                        <span class="countdown-label mx-1"> Hari</span>
                                    </div>
                                    <div class="countdown-separator mx-2"> </div>
                                    <div class="countdown-item d-flex align-items-center">
                                        <span class="countdown-value" id="countdown-hours">00</span>
                                        <span class="countdown-label mx-1"> Jam</span>
                                    </div>
                                    <div class="countdown-separator mx-2"> </div>
                                    <div class="countdown-item d-flex align-items-center">
                                        <span class="countdown-value" id="countdown-minutes">00</span>
                                        <span class="countdown-label mx-1"> Menit</span>
                                    </div>
                                    <div class="countdown-separator mx-2"> </div>
                                    <div class="countdown-item d-flex align-items-center">
                                        <span class="countdown-value" id="countdown-seconds">00</span>
                                        <span class="countdown-label mx-1"> Detik</span>
                                    </div>
                                </div>
                                <!-- Baris Teks -->
                                <div class="countdown-text mt-10">
                                    <span class="text-30 lh-15 mobile-text-20" style="font-weight: bold; color: #D93025;">Menuju TIFF 2025</span>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif

    @php
        $p = 'setting.home';
        $k = "$p.hero";
        $filter = [['search' => '__periode_nama__', 'replace' => $periode->nama], ['search' => '__periode_dari__', 'replace' => $periode->dari], ['search' => '__periode_sampai__', 'replace' => $periode->sampai]];
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section data-anim-wrap class="masthead -type-4 bg-light-6 animated pt-30" style="margin-top: 0; position: relative;">
            <!-- Background Image dengan Blur/Overlay -->
            <div style="
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: url('{{ asset(settings()->get("$k.image")) }}');
                background-size: cover;
                background-position: center;
                filter: blur(2px) opacity(0.7);
                z-index: 0;
            "></div>

            <!-- Konten Utama -->
            <div class="container pt-60" style="position: relative; z-index: 1;">
                <div class="row justify-center items-center">
                    <div class="col-xl-5 col-lg-6">
                        <div class="masthead__content pb-50">
                            <h1 data-anim-child="slide-up delay-{{ $anim++ }}" class="masthead__title">
                                {{ settings()->get("$k.title") }}<br>
                                </span>
                            </h1>
                            <p data-anim-child="slide-right delay-{{ $anim++ }}" class="masthead__text pt-15">
                                {!! settings()->get("$k.sub_title") !!}
                            <div class="col-auto mt-20" data-anim-child="slide-right delay-{{ $anim++ }}">
                                <a href="{!! settings()->get("$k.video_link") !!}" class="d-flex items-center js-gallery"
                                    data-gallery="gallery1">
                                    <div class="d-flex justify-center items-center size-60 rounded-full border-dark-1-lg">
                                        <div class="icon-play text-20 text-dark-1 pl-5"></div>
                                    </div>
                                    <div class="ml-10">{!! settings()->get("$k.video_title") !!}</div>
                                </a>
                            </div>
                            </p>
                        </div>
                    </div>

                    <div class="col-xl-6 col-lg-6" style="padding-bottom: 20px;">
                        <div data-anim-child="slide-left delay-{{ $anim++ }}" class="masthead__image">
                            <video
                                autoplay
                                muted
                                loop
                                playsinline
                                preload="auto"
                                controlsList="nodownload"
                                oncontextmenu="return false;"
                                style="position: relative; max-width: 100%; width: 100%; height: auto; border: 4px solid #fff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">
                                <source src="{{ asset('assets/smart_city.mp4') }}" type="video/mp4">
                                Browser kamu tidak mendukung video HTML5.
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- daftar poesaka -->
    @php
        $k = "$p.poesaka";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-md layout-pb-md " style="background-color: #bfcae6;" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-20 justify-between items-center">
                    <div class="col-xl-7 col-lg-8">
                        <h2 class="text-30 lh-15 text-white" data-anim-child="slide-right delay-{{ $anim++ }}">
                            {!! settings()->get("$k.title") !!}
                        </h2>
                    </div>

                    <div class="col-auto" data-anim-child="slide-left delay-{{ $anim++ }}">
                        <a href="{{ str_parse(settings()->get("$k.button_link")) }}"
                            class="button -md -outline-dark-1 -rounded text-dark-1">
                            {{ settings()->get("$k.button_text") }}
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- visi dan misi -->
    @php
        $k = "$p.visi_misi";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-30 justify-between items-center">
                    <div class="col-lg-6" data-anim-child="slide-right delay-{{ $anim++ }}">
                        <img class="w-1/1 lazy" data-src="{{ $periode->fotoUrl() }}" alt="{{ $periode->nama }}"
                            style="max-width: 500px;">
                    </div>

                    <div class="col-xl-5 col-lg-6 col-md-9" data-anim-child="slide-left delay-{{ $anim++ }}">
                        <h3 class="text-24 lh-15">{{ settings()->get("$k.title") }}</h3>
                        <p class="sectionTitle__text ">
                            {!! str_parse(settings()->get("$k.sub_title"), $filter) !!}
                        </p>
                        <h3 class="text-20 lh-15">{{ settings()->get("$k.visi") }}</h3>
                        <p class="sectionTitle__text ">{!! $periode->visi !!}</p>
                        <h3 class="text-20 lh-15">{{ settings()->get("$k.misi") }}</h3>
                        <div class="sectionTitle__text ">{!! $periode->misi !!}</div>

                        <p class="sectionTitle__text ">{{ settings()->get("$k.semboyan") }}</p>
                        <div class="d-flex x-gap-15 y-gap-15 pt-30">
                            <div>
                                <a href="{{ route('tentang.kepengurusan.struktur') }}"
                                    class="button -md -purple-1 text-white">
                                    {{ settings()->get("$k.button_text") }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- struktur -->
    @php
        $k = "$p.struktur_penduduk";
        $anim = 1;
    @endphp
    @if ($pengurus->count() && settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg bg-light-4" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-15 justify-between items-end" data-anim-child="slide-up delay-{{ $anim++ }}">
                    <div class="col-lg-6">
                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title ">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text ">{!! str_parse(settings()->get("$k.sub_title"), $filter) !!}</p>
                        </div>
                    </div>

                    <div class="col-auto">
                        <div class="col-auto">
                            <a href="{{ route('tentang.kepengurusan.struktur') }}"
                                class="button -icon -outline-purple-1 text-purple-1 fw-500">
                                {{ settings()->get("$k.button_text") }}
                                <span class="icon-arrow-top-right text-14 ml-10"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="pt-60 lg:pt-40 js-section-slider" data-gap="30" data-pagination="js-students-slider-pagination"
                    data-nav-prev="js-students-slider-prev" data-nav-next="js-students-slider-next"
                    data-slider-cols="xl-4 lg-3 md-2" data-anim-child="slide-left delay-{{ $anim++ }}">
                    <div class="swiper-wrapper">

                        {{-- pengurus item --}}
                        @foreach ($pengurus as $a)
                            <div class="swiper-slide" data-anim-child="slide-left delay-{{ $anim++ }}">
                                <div class="teamCard -type-2 bg-white shadow-4" style="min-height: 370px; border: 0">
                                    <div class="teamCard__content">
                                        <img class="lazy" data-src="{{ $a->penduduk->fotoUrl() }}" alt="image"
                                            style="margin: auto;position: relative;margin: auto;width: 150px;height: 150px;max-height: 150px;border-radius: 150px;object-fit: cover; /* cover, contain, fill, scale-down */object-position: center;-webkit-border-radius: 150px;-moz-border-radius: 150px;">
                                        <h4 class="teamCard__title text-17 lh-15 fw-500 mt-12 text-center">
                                            {{ $a->penduduk->nama }}</h4>
                                        <div class="teamCard__subtitle text-14 lh-1 mt-5 text-center">
                                            {{ $a->jabatan->nama }}
                                            @if ($a->jabatan->parent)
                                                <a href="{{ route('tentang.kepengurusan.bidang', $a->jabatan->parent->slug) }}"
                                                    style="text-transform: capitalize;" class="text-purple-1">
                                                    @if ($a->jabatan->parent->singkatan)
                                                        {{ $a->jabatan->parent->singkatan }}
                                                    @else
                                                        {{ $a->jabatan->parent->nama }}
                                                    @endif
                                                </a>
                                            @endif
                                        </div>

                                        <div class="teamCard__button mt-20">
                                            <a href="{{ $a->penduduk->user->username ? url($a->penduduk->user->username) : route('penduduk.id', $a->penduduk->id) }}"
                                                class="button -icon -outline-purple-1 -rounded text-purple-1">
                                                Lihat Profile
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row pt-60 lg:pt-40">
                    <div class="col-auto">
                        <div class="d-flex x-gap-15 justify-center items-center">
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-left-hover js-students-slider-prev">
                                    <i class="icon icon-arrow-left"></i>
                                </button>
                            </div>
                            <div class="col-auto">
                                <div class="pagination -arrows js-students-slider-pagination"></div>
                            </div>
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-right-hover js-students-slider-next">
                                    <i class="icon icon-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- kata warga -->
    @php
        $k = "$p.kata_warga";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg bg-dark-5" data-anim-wrap>
            <div class="container">
                <div class="row justify-center text-center" data-anim-child="slide-up delay-{{ $anim++ }}">
                    <div class="col-auto">
                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title text-white">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text text-white">{{ settings()->get("$k.sub_title") }}</p>
                        </div>

                    </div>
                </div>

                <div class="pt-60 lg:pt-50 js-section-slider" data-gap="30" data-pagination data-slider-cols="xl-1">
                    <div class="swiper-wrapper">
                        {{-- items --}}
                        @foreach ($kata_warga_list as $item)
                            <div class="swiper-slide">
                                <div data-anim-child="slide-left delay-{{ $anim++ }}"
                                    class="testimonials -type-3 sm:px-20 sm:py-40 bg-white">
                                    <div class="row y-gap-30 md:text-center md:justify-center">
                                        <div class="col-md-auto">
                                            <div class="testimonials__image" style="height: 170px; object-fit: cover;">
                                                <img class="lazy" data-src="{{ $item->user_foto }}"
                                                    alt="{{ $item->user }}" style="height: 170px; width: 170px">
                                            </div>
                                        </div>
                                        <div class="col-md">
                                            <p class="testimonials__text text-16 lh-17 fw-500 mt-15">
                                                {{ $item->deskripsi }}</p>
                                            <div class="mt-15">
                                                <div class="text-15 lh-1 text-purple-1 fw-500">
                                                    <a
                                                        href="{{ $item->user_username ? url($item->user_username) : route('penduduk.id', $item->user_id) }}">
                                                        {{ $item->user }}</a>
                                                </div>
                                                <div class="text-13 lh-1 mt-10">{{ $item->profesi }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-center x-gap-15 items-center pt-60 lg:pt-40" data-anim="slide-up delay-3">
                        <div class="col-auto">
                            <button class="d-flex items-center text-24 arrow-left-hover js-prev">
                                <i class="icon text-white icon-arrow-left"></i>
                            </button>
                        </div>
                        <div class="col-auto">
                            <div class="pagination -arrows js-pagination"></div>
                        </div>
                        <div class="col-auto">
                            <button class="d-flex items-center text-24 arrow-right-hover js-next">
                                <i class="icon text-white icon-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>


            </div>
        </section>
    @endif

    <!-- galeri kegiatan -->
    @php
        $k = "$p.galeri_kegiatan";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg bg-light-3" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-15 justify-between items-end">
                    <div class="col-lg-6" data-anim="slide-right delay-{{ $anim++ }}">

                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title ">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text ">{{ settings()->get("$k.sub_title") }}</p>
                        </div>

                    </div>

                    <div class="col-auto" data-anim="slide-left delay-{{ $anim++ }}">
                        <div class="d-flex justify-center x-gap-15 items-center">
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-left-hover js-events-slider-prev">
                                    <i class="icon icon-arrow-left"></i>
                                </button>
                            </div>
                            <div class="col-auto">
                                <div class="pagination -arrows js-events-slider-pagination"></div>
                            </div>
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-right-hover js-events-slider-next">
                                    <i class="icon icon-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pt-60 lg:pt-40 js-section-slider" data-gap="30"
                    data-pagination="js-events-slider-pagination" data-nav-prev="js-events-slider-prev"
                    data-nav-next="js-events-slider-next" data-slider-cols="xl-3 lg-2">
                    <div class="swiper-wrapper">
                        @foreach ($galeri_list as $galery)
                            <div class="swiper-slide">
                                <div data-anim="slide-left delay-{{ $anim++ }}" class="eventCard -type-1">
                                    <div class="eventCard__img" style="height: 250px;">
                                        <img class="lazy"
                                            data-src="{{ "https://drive.google.com/uc?export=view&id={$galery->foto_id_gdrive}" }}"
                                            alt="{{ $galery->nama }}"
                                            style="width: 100%; height: 250px; object-fit: cover;">
                                    </div>

                                    <div class="eventCard__bg bg-white">
                                        <div class="eventCard__content y-gap-10">
                                            <div class="eventCard__inner">
                                                <h4 class="eventCard__title text-17 fw-500">
                                                    {{ $galery->nama }}
                                                </h4>
                                                <div class="d-flex x-gap-15 pt-10">
                                                    <div class="d-flex items-center">
                                                        <div class="icon-calendar-2 text-16 mr-8"></div>
                                                        <div class="text-14">{{ $galery->tanggal_str }}</div>
                                                    </div>
                                                    <div class="d-flex items-center">
                                                        <div class="icon-location text-16 mr-8"></div>
                                                        <div class="text-14">{{ $galery->lokasi }}</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="eventCard__button">
                                                <a href="{{ route('galeri.detail', $galery->slug) }}"
                                                    class="button -sm -rounded -purple-1 text-white px-25">Lihat</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row pt-60 lg:pt-40" data-anim="slide-right delay-{{ $anim++ }}">
                    <div class="col-auto">
                        <a href="{{ route('galeri') }}" class="button -icon -outline-purple-1 text-purple-1 fw-500">
                            {{ settings()->get("$k.button_text") }}
                            <span class="icon-arrow-top-right text-14 ml-10"></span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- lokasi pariwisata -->
    @php
        $k = "$p.pariwisata_kegiatan";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg bg-light-3" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-15 justify-between items-end">
                    <div class="col-lg-6" data-anim="slide-right delay-{{ $anim++ }}">

                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title ">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text ">{{ settings()->get("$k.sub_title") }}</p>
                        </div>

                    </div>

                    <div class="col-auto" data-anim="slide-left delay-{{ $anim++ }}">
                        <div class="d-flex justify-center x-gap-15 items-center">
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-left-hover js-events-slider-prev">
                                    <i class="icon icon-arrow-left"></i>
                                </button>
                            </div>
                            <div class="col-auto">
                                <div class="pagination -arrows js-events-slider-pagination"></div>
                            </div>
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-right-hover js-events-slider-next">
                                    <i class="icon icon-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pt-60 lg:pt-40 js-section-slider" data-gap="30"
                    data-pagination="js-events-slider-pagination" data-nav-prev="js-events-slider-prev"
                    data-nav-next="js-events-slider-next" data-slider-cols="xl-3 lg-2">
                    <div class="swiper-wrapper">
                        @foreach ($pariwisata_list as $pariwisata)
                            <div class="swiper-slide">
                                <div data-anim="slide-left delay-{{ $anim++ }}" class="eventCard -type-1">
                                    <div class="eventCard__img" style="height: 250px;">
                                        <img class="lazy"
                                            data-src="{{ "https://drive.google.com/uc?export=view&id={$pariwisata->foto_id_gdrive}" }}"
                                            alt="{{ $pariwisata->nama }}"
                                            style="width: 100%; height: 250px; object-fit: cover;">
                                    </div>

                                    <div class="eventCard__bg bg-white">
                                        <div class="eventCard__content y-gap-10">
                                            <div class="eventCard__inner">
                                                <h4 class="eventCard__title text-17 fw-500">
                                                    {{ $pariwisata->nama }}
                                                </h4>
                                                <div class="d-flex x-gap-15 pt-10">
                                                    <div class="d-flex items-center">
                                                        <div class="icon-calendar-2 text-16 mr-8"></div>
                                                        <div class="text-14">{{ $pariwisata->tanggal_str }}</div>
                                                    </div>
                                                    <div class="d-flex items-center">
                                                        <div class="icon-location text-16 mr-8"></div>
                                                        <div class="text-14">{{ $pariwisata->lokasi }}</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="eventCard__button">
                                                <a href="{{ route('pariwisata.detail', $pariwisata->slug) }}"
                                                    class="button -sm -rounded -purple-1 text-white px-25">Lihat</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row pt-60 lg:pt-40" data-anim="slide-right delay-{{ $anim++ }}">
                    <div class="col-auto">
                        <a href="{{ route('pariwisata') }}" class="button -icon -outline-purple-1 text-purple-1 fw-500">
                            {{ settings()->get("$k.button_text") }}
                            <span class="icon-arrow-top-right text-14 ml-10"></span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Jenis Layanan -->
    @php
        $k = "$p.layanan_jenis";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg bg-light-3" data-anim-wrap>
            <div class="container">
                <div class="row y-gap-15 justify-between items-end">
                    <div class="col-lg-6" data-anim="slide-right delay-{{ $anim++ }}">

                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title ">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text ">{{ settings()->get("$k.sub_title") }}</p>
                        </div>

                    </div>

                    <div class="col-auto" data-anim="slide-left delay-{{ $anim++ }}">
                        <div class="d-flex justify-center x-gap-15 items-center">
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-left-hover js-events-slider-prev">
                                    <i class="icon icon-arrow-left"></i>
                                </button>
                            </div>
                            <div class="col-auto">
                                <div class="pagination -arrows js-events-slider-pagination"></div>
                            </div>
                            <div class="col-auto">
                                <button class="d-flex items-center text-24 arrow-right-hover js-events-slider-next">
                                    <i class="icon icon-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pt-60 lg:pt-40 js-section-slider" data-gap="30"
                    data-pagination="js-events-slider-pagination" data-nav-prev="js-events-slider-prev"
                    data-nav-next="js-events-slider-next" data-slider-cols="xl-3 lg-2">
                    <div class="swiper-wrapper">
                        @foreach ($layanan_list as $layanan)
                            <div class="swiper-slide">
                                <div data-anim="slide-left delay-{{ $anim++ }}" class="eventCard -type-1">
                                    <div class="eventCard__img" style="height: 250px;">
                                        <img class="lazy"
                                            data-src="{{ "https://drive.google.com/uc?export=view&id={$layanan->foto_id_gdrive}" }}"
                                            alt="{{ $layanan->nama }}"
                                            style="width: 100%; height: 250px; object-fit: cover;">
                                    </div>

                                    <div class="eventCard__bg bg-white">
                                        <div class="eventCard__content y-gap-10">
                                            <div class="eventCard__inner">
                                                <h4 class="eventCard__title text-17 fw-500">
                                                    {{ $layanan->nama }}
                                                </h4>
                                                <div class="d-flex x-gap-15 pt-10">
                                                    <div class="d-flex items-center">
                                                        <div class="icon-calendar-2 text-16 mr-8"></div>
                                                        <div class="text-14">{{ $layanan->tanggal_str }}</div>
                                                    </div>
                                                    <div class="d-flex items-center">
                                                        <div class="icon-location text-16 mr-8"></div>
                                                        <div class="text-14">{{ $layanan->lokasi }}</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="eventCard__button">
                                                <a href="{{ route('layanan.detail', $layanan->slug) }}"
                                                    class="button -sm -rounded -purple-1 text-white px-25">Lihat</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row pt-60 lg:pt-40" data-anim="slide-right delay-{{ $anim++ }}">
                    <div class="col-auto">
                        <a href="{{ route('layanan') }}" class="button -icon -outline-purple-1 text-purple-1 fw-500">
                            {{ settings()->get("$k.button_text") }}
                            <span class="icon-arrow-top-right text-14 ml-10"></span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @php
        $k = "$p.instagram";
        $instagram_visible = settings()->get("$k.visible");
        $anim = 1;
    @endphp
    @if ($instagram_visible)
        <section class="layout-pt-md layout-pb-lg bg-dark-5">
            <div data-anim-wrap class="container">
                <div class="page-header__content">
                    <div class="row justify-center text-center">
                        <div class="col-auto" data-anim="slide-left delay-{{ $anim++ }}">
                            <div data-anim="slide-up delay-{{ $anim++ }}" class="is-in-view">
                                <h1 class="sectionTitle__title text-white">{{ settings()->get("$k.title") }}</h1>
                            </div>

                            <div data-anim="slide-up delay-{{ $anim++ }}" class="is-in-view">
                                <p class="sectionTitle__text text-white">
                                    {{ settings()->get("$k.sub_title") }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid y-gap-30 pt-50">
                    <div class="grid-sizer col-lg-4 col-md-6"></div>
                    @foreach ($instagrams as $item)
                        <div class="grid-item col-lg-4 col-md-6 px-8 py-8 col-12"
                            data-anim="slide-left delay-{{ $anim++ }}">
                            {!! str_replace('<script async src="//www.instagram.com/embed.js"></script>', '', $item->keterangan) !!}
                        </div>
                    @endforeach
                </div>
                @if ($instagrams->count() > 0)
                    <script async src="//www.instagram.com/embed.js"></script>
                @endif
            </div>
        </section>
    @endif

    <!-- blog dan artikel -->
    @php
        $k = "$p.artikel";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-md layout-pb-lg">
            <div data-anim-wrap class="container">
                <div class="row y-gap-20 justify-between items-center">
                    <div class="col-lg-6"data-anim-child="slide-right delay-{{ $anim++ }}">
                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title ">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text ">{{ settings()->get("$k.sub_title") }}</p>
                        </div>
                    </div>

                    <div class="col-auto" data-anim-child="slide-left delay-{{ $anim++ }}">
                        <a href="{{ route('artikel') }}" class="button -icon -purple-3 text-purple-1">
                            {{ settings()->get("$k.button_text") }}
                            <i class="icon-arrow-top-right text-13 ml-10"></i>
                        </a>
                    </div>
                </div>

                <div class="row y-gap-30 pt-50">
                    @foreach ($articles as $k => $a)
                        @if ($k > 1)
                            @continue
                        @endif
                        <div class="col-lg-4 col-md-6">
                            <div data-anim-child="slide-left delay-{{ $anim++ }}" class="blogCard -type-1">
                                <div class="blogCard__image">
                                    <img class="lazy" data-src="{{ $a->fotoUrl() }}" alt="{{ $a->nama }}"
                                        style="width: 100%; height: 300px; object-fit: cover; border-radius:16px">
                                </div>
                                <div class="blogCard__content">
                                    @if ($a->categories->count() > 0)
                                        <a href="{{ url("artikel?kategori={$a->categories[0]->slug}") }}"
                                            class="blogCard__category" title="Kategori {{ $a->categories[0]->nama }}">
                                            {{ $a->categories[0]->nama }}
                                        </a>
                                    @elseif ($a->tags->count() > 0)
                                        <a href="{{ url("artikel?tag={$a->tags[0]->slug}") }}" class="blogCard__category"
                                            title="tag {{ $a->tags[0]->nama }}">
                                            {{ $a->tags[0]->nama }}
                                        </a>
                                    @endif
                                    <h4 class="blogCard__title">
                                        <a href="{{ route('artikel.detail', $a->slug) }}">{{ $a->nama }}</a>
                                    </h4>
                                    <div class="blogCard__date">{{ $a->dateFormat() }}</div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <div class="col-lg-4">
                        <div class="row y-gap-30">

                            @foreach ($articles as $k => $a)
                                @if ($k < 2)
                                    @continue
                                @endif
                                <div class="col-lg-12 col-md-6">
                                    <a href="{{ route('artikel.detail', $a->slug) }}"
                                        data-anim-child="slide-left delay-{{ $anim++ }}" class="eventCard -type-4">
                                        <div class="eventCard__date bg-light-7 mr-20"
                                            style="min-width: 100px; min-height: 100px">
                                            <span class="text-30 lh-1 fw-700">{{ $a->dateFormat('d') }}</span>
                                            <span
                                                class="text-18 lh-1 fw-500 uppercase mt-10">{{ $a->dateFormat('M') }}</span>
                                        </div>

                                        <div class="eventCard__content">
                                            @if ($a->categories->count() > 0)
                                                <div class="text-13 lh-1 fw-500 uppercase text-purple-1">
                                                    {{ $a->categories[0]->nama }}
                                                </div>
                                            @elseif ($a->tags->count() > 0)
                                                <div class="text-13 lh-1 fw-500 uppercase text-purple-1">
                                                    {{ $a->tags[0]->nama }}
                                                </div>
                                            @endif
                                            <h4 class="text-17 lh-15 fw-500 mt-10"> {{ $a->nama }}</h4>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Sensus penduduk -->
    @php
        $k = "$p.sensus";
        $anim = 1;
    @endphp
    @if (settings()->get("$k.visible"))
        <section class="layout-pt-lg layout-pb-lg bg-red-3 relative" data-anim-wrap>
            <div class="side-image pr-25 lg:d-none" data-anim-child="slide-left delay-{{ $anim++ }}">
                <img class="lazy" data-src="{{ asset(settings()->get("$k.image")) }}" alt="image">
            </div>

            <div class="container" data-anim-child="slide-left delay-{{ $anim++ }}">
                <div class="row">
                    <div class="col-xl-8 col-lg-6">
                        <div class="sectionTitle ">
                            <h2 class="sectionTitle__title text-white">{{ settings()->get("$k.title") }}</h2>
                            <p class="sectionTitle__text text-white">{{ settings()->get("$k.sub_title") }}</p>
                        </div>


                        <div class="row x-gap-20 y-gap-20 pt-60 lg:pt-40">

                            <div class="col-auto">
                                <a href="{{ route('pendaftaran.sensus') }}" class="button -md -dark-1 text-white">
                                    {{ settings()->get("$k.button_text") }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- resources\views\pages\frontend\home.blade.php -->
    <!-- ==================== -->
    <!-- 1. TOMBOL TOGGLE CHAT (AI & ADMIN) -->
    <!-- ==================== -->
    <div id="chat-buttons" class="chat-button-container">
        <button id="ai-chat-toggle" class="chat-toggle-btn-ai">
            <i class="fa-solid fa-comment"></i> Chat AI
        </button>
        <a href="{{ route('pengaduan') }}" class="chat-toggle-btn-lapor">
            <i class="fa-regular fa-comments"></i> Lapor
        </a>
    </div>

    <!-- ==================== -->
    <!-- 2. MODAL CHAT AI -->
    <!-- ==================== -->
    <div id="ai-chat-box" class="ai-chat-container hidden">
        <!-- Header Section -->
        <div class="ai-chat-header">
            <div class="ai-chat-title">
                <span class="ai-avatar"><i class="far fa-comments"></i></span>
                <span>TomBot</span>
            </div>
            <button id="ai-chat-close" class="ai-chat-close-btn">&times;</button>
        </div>

        <!-- Chat Messages Body -->
        <div class="ai-chat-body">
            <div id="ai-chat-state" class="small text-muted px-3 pt-2"></div>
            <div id="chat-log" class="ai-chat-messages"></div>
        </div>

        <!-- Sticky Footer -->
        <div class="ai-chat-footer">
            <form id="chat-form"
                  action="{{ route('ai-chat.store') }}"
                  data-history-endpoint="{{ route('ai-chat.history') }}"
                  data-close-endpoint="{{ route('ai-chat.close-session') }}"
                  class="ai-chat-form">
                @csrf
                <input type="hidden" name="session_id" id="ai-session_id">
                <textarea name="prompt" id="ai-prompt" class="ai-chat-input" required rows="1"
                          oninput="autoGrow(this)" placeholder="Tulis pesanmu di sini..."></textarea>
                <button type="submit" class="ai-chat-submit">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- ==================== -->
    <!-- 3. TOMBOL AKHIRI CHAT AI (FLOATING) -->
    <!-- ==================== -->
    <div class="ai-chat-end-btn-container">
        <button id="ai-end-chat-btn" class="ai-chat-end-btn">
            <i class="fas fa-sign-out-alt"></i> Akhiri Chat
        </button>
    </div>

    <!-- ==================== -->
    <!-- 4. MODAL FORM BIODATA ADMIN -->
    <!-- ==================== -->
    <div id="admin-chat-form-modal" class="admin-chat-modal hidden">
        <div class="admin-chat-modal-content">
            <!-- Form Header -->
            <div class="admin-chat-modal-header">
                <div class="header-content">
                    <h3 id="admin-time-based-greeting">Halo!</h3>
                </div>
            </div>
            <!-- Biodata Form -->
            <form id="admin-chat-user-form">
                <div class="admin-form-group">
                    <label for="admin-chat-nama">Nama Anda</label>
                    <input type="text" id="admin-chat-nama" name="nama"
                           placeholder="Nama lengkap Sesuai KTP" required>
                </div>
                <div class="admin-form-group">
                    <label for="admin-chat-email">Email (Opsional)</label>
                    <input type="email" id="admin-chat-email" name="email"
                           placeholder="emailkamu@contoh.com">
                </div>
                <div class="admin-form-group">
                    <label for="admin-chat-no-hp">Nomor HP/WhatsApp</label>
                    <input type="tel" id="admin-chat-no-hp" name="no_hp"
                           placeholder="0812-3456-7890" required>
                </div>
                <!-- Form Footer Buttons -->
                <div class="admin-chat-form-footer">
                    <button type="submit" class="admin-chat-submit-rounded">
                        <i class="fas fa-paper-plane"></i> Kirim Laporan
                    </button>
                    <button type="button" id="admin-chat-modal-close"
                            class="admin-chat-cancel-btn" title="Batal">
                        <i class="fas fa-times"></i> Batal
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ==================== -->
    <!-- 5. MODAL CHAT ADMIN -->
    <!-- ==================== -->
    <div id="admin-chat-box" class="admin-chat-container hidden">
        <!-- Header Section -->
        <div class="admin-chat-header">
            <div class="admin-chat-title">
                <span class="admin-avatar"><i class="fas fa-headset"></i></span>
                <span>Admin / CS</span>
            </div>
            <button id="admin-chat-close" class="admin-chat-close-btn">×</button>
        </div>

        <!-- Chat Messages Body -->
        <div id="admin-chat-state" class="small text-muted px-3 pt-2"></div>
        <div id="admin-chat-log" class="admin-chat-messages"></div>

        <!-- Input Form -->
        <form id="admin-chat-form" action="{{ route('admin-chat.store') }}"
              data-admin-endpoint="{{ route('admin-chat.store') }}"
              data-history-endpoint="{{ route('admin-chat.history') }}"
              data-close-endpoint="{{ route('admin-chat.close-session') }}"
              method="POST"
              class="admin-chat-form">
            @csrf
            <input type="hidden" name="nama" id="admin-hidden-nama">
            <input type="hidden" name="email" id="admin-hidden-email">
            <input type="hidden" name="no_hp" id="admin-hidden-no_hp">
            <input type="hidden" name="session_id" id="admin-session_id">
            <input type="text" name="prompt" id="admin-prompt"
                   placeholder="Tulis pesan Anda..." required class="admin-chat-input">
            <button type="submit" class="admin-chat-submit">
                <i class="fas fa-paper-plane"></i>
            </button>
        </form>
    </div>

    <!-- ==================== -->
    <!-- 6. TOMBOL AKHIRI CHAT ADMIN (FLOATING) -->
    <!-- ==================== -->
    <div class="admin-chat-end-btn-container">
        <button id="admin-end-chat-btn" class="admin-chat-end-btn">
            <i class="fas fa-sign-out-alt"></i> Akhiri Laporan
        </button>
    </div>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/adminchat.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/css/aichat.css') }}"/>
    @if ($instagram_visible)
        <style>
            .instagram-media {
                border-radius: 16px !important;
                box-shadow: 0px 1px 4px 0px #14034212 !important;
            }
        </style>
    @endif
    <style>
        /* Paksa semua elemen dalam masthead__content jadi putih */
        .masthead__content,
        .masthead__content * {
            color: white !important;
            border-color: white !important;
        }

        /* Warna ikon play */
        .masthead__content .icon-play {
            color: white !important;
        }

        /* Warna border lingkaran play button */
        .masthead__content .border-dark-1-lg {
            border-color: white !important;
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/frontend/js/aiadminchat.js') }}"></script>
    @if ($instagram_visible)
        <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            $(window).on('load', function() {
                setTimeout(() => {
                    var msnry = new Masonry(document.querySelector('.grid'), {
                        itemSelector: '.grid-item',
                        columnWidth: '.grid-sizer'
                    });
                }, 2000);
            });
        </script>
    @endif

    <script>
        // Pastikan JS di-load
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Chat script loaded'); // Debug
        });
    </script>

    <script>
        function initCountdown() {
            const countdownBox = document.getElementById('countdown-box');
            if (!countdownBox) return;

            const endDateStr = countdownBox.getAttribute('data-end-date');
            if (!endDateStr) return;

            const endDate = new Date(endDateStr);
            if (isNaN(endDate.getTime())) return;

            function updateCountdown() {
                const now = new Date();
                const distance = endDate - now;

                if (distance < 0) {
                    document.querySelector('.countdown-text span').textContent = 'Acara telah berakhir';
                    document.querySelector('.countdown-text span').className = 'badge bg-danger text-white px-3 py-1 rounded-pill fw-medium';
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                document.getElementById('countdown-days').textContent = days.toString().padStart(2, '0');
                document.getElementById('countdown-hours').textContent = hours.toString().padStart(2, '0');
                document.getElementById('countdown-minutes').textContent = minutes.toString().padStart(2, '0');
                document.getElementById('countdown-seconds').textContent = seconds.toString().padStart(2, '0');
            }

            updateCountdown();
            setInterval(updateCountdown, 1000);
        }

        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(initCountdown, 300);
        });
    </script>
@endsection