{{-- Home Page Template --}}
@extends('core::layouts.master')

@section('title', 'ASETQU V.2 - Digital Asset Ecosystem')
@section('description', 'ASETQU V.2 adalah ekosistem digital asset yang menggabungkan Web3 technology, gaming, dan komunitas crypto.')
@section('body-class', 'home-page')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/home.css') }}">
@endpush

@section('content')

{{-- Hero Section with Swiper --}}
<section class="hero-section" id="hero">
    <div class="swiper hero-swiper">
        <div class="swiper-wrapper">
            @forelse($heroBanners as $banner)
            <div class="swiper-slide">
                <div class="hero-slide" style="background-image: url('{{ asset('storage/' . $banner->background_image) }}');">
                    <div class="hero-overlay {{ $banner->overlay_type === 'light' ? 'hero-overlay-light' : ($banner->overlay_type === 'none' ? '' : '') }}"></div>
                    <div class="container">
                        <div class="hero-content hero-content-{{ $banner->text_alignment }}">
                            <h1 class="hero-title {{ $banner->text_alignment === 'center' ? 'hero-title-center' : '' }}">
                                {!! nl2br(e($banner->title)) !!}
                            </h1>
                            <p class="hero-description {{ $banner->text_alignment === 'center' ? 'hero-description-center' : '' }}">
                                {{ $banner->subtitle }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            {{-- Default Slide if no banners --}}
            <div class="swiper-slide">
                <div class="hero-slide" style="background-image: url('{{ asset('assets/images/hero/background-2.png') }}');">
                    <div class="hero-overlay"></div>
                    <div class="container">
                        <div class="hero-content hero-content-center">
                            <h1 class="hero-title hero-title-center">
                                <span class="text-gold italic">Memberdayakan Aset Digital</span><br>
                                <span class="text-white">& Ekonomi Tokenisasi</span>
                            </h1>
                            <p class="hero-description hero-description-center">
                                AsetQu V.2 menyediakan ekosistem modern untuk aset digital, yang memungkinkan transaksi aman, tokenisasi yang transparan, serta pertumbuhan nilai yang berkelanjutan bagi bisnis dan komunitas.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforelse
        </div>
        <div class="swiper-pagination"></div>
    </div>
</section>

{{-- About Section --}}
<section class="about-section section" id="about">
    <div class="about-bg-pattern"></div>
    <div class="container">
        <div class="about-card">
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <div class="about-logo-wrapper">
                        <img src="{{ asset('assets/images/asetqu-logo-alt.png') }}" alt="ASETQU V.2" class="about-logo" onerror="handleImageError(this)">
                        {{-- <h3 class="about-brand">ASETQU <span>V.2</span></h3> --}}
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="about-content">
                        <h2 class="section-title-gradient">Tentang AsetQu V.2</h2>
                        <p class="about-intro">
                            AsetQu Token Version 2 (AsetQu V.2) merupakan aset digital generasi terbaru yang dibangun di atas blockchain Solana, dirancang untuk menghadirkan utilitas yang aman, transparan, dan berkinerja tinggi dalam ekosistem Real-World Assets (RWA).
                        </p>
                        <ul class="about-list">
                            <li>
                                <span class="list-icon"></span>
                                <span>Menyediakan infrastruktur transaksi yang transparan, adil, dan dapat diaudit untuk seluruh aplikasi Real-World Assets (RWA), guna memastikan kepercayaan publik serta kepatuhan terhadap standar regulasi yang berlaku di Indonesia</span>
                            </li>
                            <li>
                                <span class="list-icon"></span>
                                <span>Menyediakan pengalaman investasi yang aman, mudah diakses, dan berorientasi masa depan, sehingga baik pengguna individu maupun institusi dapat berpartisipasi dalam ekonomi digital dengan tingkat kenyamanan dan perlindungan yang optimal</span>
                            </li>
                            <li>
                                <span class="list-icon"></span>
                                <span>Mengintegrasikan teknologi blockchain dengan sektor properti, keuangan, dan sektor strategis lainnya untuk mempercepat transformasi digital, meningkatkan efisiensi operasional, serta menciptakan nilai nyata bagi ekosistem bisnis Indonesia</span>
                            </li>
                            <li>
                                <span class="list-icon"></span>
                                <span>Mengembangkan produk dan solusi berskala enterprise dengan memanfaatkan arsitektur Solana—yang memiliki kecepatan tinggi, biaya rendah, dan kapasitas data besar—sebagai fondasi perluasan ekosistem AsetQu V.2 di tingkat nasional dan regional</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Roadmap Section --}}
<section class="roadmap-section section" id="roadmap">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up" data-aos-once="false" data-aos-duration="800">
            <h2 class="section-title-gradient">Perencana Strategis ASETQU V.2</h2>
            <p class="section-subtitle">
                Perencana Strategis AsetQu V2 menggambarkan tahapan pengembangan ekosistem secara bertahap dan berkelanjutan, mulai dari migrasi token dan peningkatan infrastruktur, hingga tokenisasi aset dunia nyata (RWA), ekspansi ekosistem, dan adopsi global berbasis teknologi AI.
            </p>
        </div>

        <div class="roadmap-timeline">
            {{-- Phase 1 --}}
            <div class="roadmap-item left" data-aos="fade-right" data-aos-once="false" data-aos-duration="800">
                <div class="roadmap-content">
                    <p>Q1 2026</p>
                    <h4 class="roadmap-title">Peluncuran AsetQu V.2</h4>
                    <ul>
                        <li>Migrasi token 1:1 dari versi sebelumnya</li>
                        <li>Pembaruan branding & identitas ekosistem</li>
                        <li>Rilis dashboard migrasi & pelacakan burn</li>
                        <li>Audit keamanan smart contract tahap 1</li>
                        <li>Pembangunan AsetBid (fundamental & UI/UX baru)</li>
                    </ul>
                </div>
                <div class="roadmap-dot"></div>
            </div>

            {{-- Phase 2 --}}
            <div class="roadmap-item right" data-aos="fade-left" data-aos-once="false" data-aos-duration="800" data-aos-delay="100">
                <div class="roadmap-content">
                    <p>Q2 2026</p>
                    <h4 class="roadmap-title">AsetBid On-Chain Auction</h4>
                    <ul>
                        <li>Implementasi sistem anti-manipulasi bidding</li>
                        <li>Aktivasi mekanisme burning otomatis dari transaksi</li>
                        <li>Rilis mode listing aset fisik and economy digital</li>
                        <li>Program staking V1 + reward periodik</li>
                        <li>Perluasan komunitas & edukasi blockchain aset</li>
                    </ul>
                </div>
                <div class="roadmap-dot"></div>
            </div>

            {{-- Phase 3 --}}
            <div class="roadmap-item left" data-aos="fade-right" data-aos-once="false" data-aos-duration="800" data-aos-delay="200">
                <div class="roadmap-content">
                    <p>Q3 2026</p>
                    <h4 class="roadmap-title">Governance DAO</h4>
                    <ul>
                        <li>Peningkatan utility staking (tier membership)</li>
                        <li>Smart contract treasury terdesentralisasi</li>
                        <li>Integrasi identitas pemilik aset on-chain</li>
                        <li>Kolaborasi lembaga legal verifikasi dokumen digital</li>
                        <li>Rilis analitik real-time: aktivitas lelang, burning, volume ekosistem</li>
                    </ul>
                </div>
                <div class="roadmap-dot"></div>
            </div>

            {{-- Phase 4 --}}
            <div class="roadmap-item right" data-aos="fade-left" data-aos-once="false" data-aos-duration="800" data-aos-delay="300">
                <div class="roadmap-content">
                    <p>Q4 2026</p>
                    <h4 class="roadmap-title">RWA & Tokenisasi Properti</h4>
                    <ul>
                        <li>Modul tokenisasi kepemilikan aset</li>
                        <li>Distribusi pendapatan otomatis via smart contract</li>
                        <li>Fitur lending berbasis aset tokenized</li>
                        <li>Registry dokumen aset on-chain</li>
                        <li>Onboarding aset fisik pertama ke ekosistem</li>
                        <li>Standarisasi legal & compliance RWA lintas negara</li>
                    </ul>
                </div>
                <div class="roadmap-dot"></div>
            </div>

            {{-- Phase 5 --}}
            <div class="roadmap-item left" data-aos="fade-right" data-aos-once="false" data-aos-duration="800" data-aos-delay="400">
                <div class="roadmap-content">
                    <p>Q1-Q2 2027</p>
                    <h4 class="roadmap-title">Ekspansi Ekosistem & Enterprise Integration</h4>
                    <ul>
                        <li>API enterprise untuk agen, notaris & institusi</li>
                        <li>Kolaborasi internasional untuk RWA lintas wilayah</li>
                        <li>Sistem scoring untuk aset & risk index on-chain</li>
                        <li>Mobile App AsetQuHub (Android/iOS) versi beta</li>
                        <li>Advanced staking utility</li>
                        <li>Aktivasi pool likuiditas lintas chain</li>
                    </ul>
                </div>
                <div class="roadmap-dot"></div>
            </div>

            {{-- Phase 6 --}}
            <div class="roadmap-item right" data-aos="fade-left" data-aos-once="false" data-aos-duration="800" data-aos-delay="500">
                <div class="roadmap-content">
                    <p>Q3-Q4 2027</p>
                    <h4 class="roadmap-title">Globalisasi & AI-Powered Property Network</h4>
                    <ul>
                        <li>Ekspansi global pasar RWA</li>
                        <li>Integrasi AI untuk valuasi aset, prediksi pasar & deteksi fraud</li>
                        <li>Smart Asset Contract generasi baru</li>
                        <li>AsetBid versi 2.0</li>
                        <li>Ekosistem sepenuhnya terdesentralisasi</li>
                        <li>Model ekonomi deflasi yang stabil & berkelanjutan</li>
                    </ul>
                </div>
                <div class="roadmap-dot"></div>
            </div>

            {{-- Timeline Line --}}
            <div class="timeline-line"></div>
        </div>
    </div>
</section>

{{-- Whitepaper Section --}}
<section class="whitepaper-section section" id="whitepaper">
    <div class="container">
        <div class="whitepaper-card">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <div class="whitepaper-image">
                        <img src="{{ asset('assets/images/asetqu-coin.png') }}" alt="ASETQU Coin" class="coin-image" onerror="handleImageError(this)">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="whitepaper-content">
                        <h2 class="section-title-cyan">WHITE PAPER</h2>
                        <p>
                            AsetQu V.2 adalah token utilitas dan investasi yang dibangun di atas blockchain Solana untuk menghadirkan transparansi, efisiensi, dan nilai jangka panjang di ekosistem AsetQu V.2. Fokus utama token ini bukan pada spekulasi jangka pendek atau trend meme, tetapi pada penerapan nyata dalam tiga pilar utama yakni AsetBid (lelang properti transparan), AsetTrust Score (identitas reputasi digital), dan AsetAcademy (platform edukasi aset dan blockchain).
                        </p>
                        <p>
                            Dengan memanfaatkan kecepatan dan skalabilitas Solana, AsetQu V.2 memungkinkan transaksi cepat, biaya rendah, serta pengalaman pengguna yang optimal. Token ini dirancang untuk menjadi pondasi ekosistem yang berkelanjutan, inklusif, dan berdampak nyata bagi industri aset fisik dan ekonomi digital.
                        </p>
                        <a href="{{ asset('assets/files/white-paper-ASETQU-V2.pdf') }}" class="btn btn-download">
                            <i class="fas fa-download me-2"></i>
                            Unduh Berkas
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Events Section --}}
<section class="events-section section" id="events">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title-gradient">Kalender Acara ASETQU V.2</h2>
        </div>

        <div class="row">
            {{-- Calendar --}}
            <div class="col-lg-3">
                <div class="event-calendar" id="eventCalendar">
                    <div class="calendar-header">
                        <button class="cal-nav prev" id="calPrev"><i class="fas fa-chevron-left"></i></button>
                        <span class="cal-month" id="calMonth"></span>
                        <button class="cal-nav next" id="calNext"><i class="fas fa-chevron-right"></i></button>
                    </div>
                    <div class="calendar-days" id="calDays">
                        {{-- Days will be generated by JavaScript --}}
                    </div>
                </div>
            </div>

            {{-- Event Poster --}}
            <div class="col-lg-4">
                <div class="event-poster" id="eventPoster">
                    <img src="{{ asset('assets/images/events/event-poster.jpg') }}" alt="Event Poster" id="eventPosterImg" onerror="handleImageError(this)">
                </div>
            </div>

            {{-- Event Details --}}
            <div class="col-lg-5">
                <div class="event-details" id="eventDetails">
                    <h3 class="event-calendar-title">Kalender Acara ASETQU V.2</h3>
                    <h4 class="event-name" id="eventName">Peluncuran Produk</h4>
                    <span class="event-badge" id="eventBadge">PRODUK FEATURE LAUNCH</span>
                    <p class="event-desc" id="eventDesc">
                        Memperkenalkan platform staking AsetQu V.2 terbaru dengan mekanisme reward yang ditingkatkan
                    </p>
                    <div class="event-datetime" id="eventDatetime">
                        <i class="far fa-clock"></i>
                        <span id="eventDatetimeText">19 Desember 2025 | 10.00 AM</span>
                    </div>
                    <a href="#" class="btn btn-event-detail" id="eventDetailBtn">Detail</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Community Feed Section --}}
<section class="community-section section" id="community">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title-gradient">ULASAN PENGGUNA</h2>
        </div>

        <div class="community-feed-wrapper">
            <div class="community-feed-scroll" id="communityFeedScroll">
                @forelse($testimonials as $testimonial)
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        @if($testimonial->avatar)
                            <img src="{{ asset('storage/' . $testimonial->avatar) }}" alt="{{ $testimonial->name }}" class="testimonial-avatar">
                        @else
                            <img src="{{ asset('assets/images/avatars/avatar-1.jpg') }}" alt="{{ $testimonial->name }}" class="testimonial-avatar" onerror="handleImageError(this)">
                        @endif
                        <div class="testimonial-author">
                            <h5>{{ $testimonial->name }}</h5>
                            <span>{{ $testimonial->position }}</span>
                        </div>
                    </div>
                    <p class="testimonial-text">
                        {{ $testimonial->content }}
                    </p>
                </div>
                @empty
                {{-- Default testimonials if none in database --}}
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="{{ asset('assets/images/avatars/avatar-1.jpg') }}" alt="User" class="testimonial-avatar" onerror="handleImageError(this)">
                        <div class="testimonial-author">
                            <h5>Less Van Hooke</h5>
                            <span>Investor</span>
                        </div>
                    </div>
                    <p class="testimonial-text">
                        Volatilitas Asetqu memang tinggi, tapi justru di situlah peluangnya. Dengan analisis yang tepat, saya bisa mendapatkan hasil yang konsisten.
                    </p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</section>

{{-- FAQ Section --}}
<section class="faq-section section" id="faq">
    <div class="container">
        <div class="faq-card">
            <div class="row">
                <div class="col-lg-5">
                    <div class="faq-header">
                        <span class="faq-badge">AsetQu V.2</span>
                        <h2>Frequently Asked Questions</h2>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="accordion faq-accordion" id="faqAccordion">
                        @forelse($faqs as $index => $faq)
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button {{ $index === 0 ? '' : 'collapsed' }}"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#faq{{ $faq->id }}">
                                    {{ $faq->question }}
                                </button>
                            </h2>
                            <div id="faq{{ $faq->id }}"
                                 class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                                 data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    {{ $faq->answer }}
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    Apa itu AsetQu V.2
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    AsetQu V.2 adalah versi terbaru dari platform AsetQu V.2 yang menghadirkan peningkatan teknologi, keamanan, dan fitur untuk mendukung ekosistem trading, aset digital, dan tokenisasi aset dunia nyata (RWA)
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    Apa fungsi token AsetQu V.2 dalam ekosistem AsetQu V.2
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Token AsetQu V.2 digunakan sebagai utilitas utama dalam ekosistem AsetQu, termasuk untuk staking, partisipasi governance, transaksi di marketplace, serta mendukung mekanisme burn untuk menjaga keseimbangan suplai token
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    Bagaimana cara melakukan staking token AsetQu V.2
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Pengguna dapat melakukan staking melalui Staking Dashboard di Token Dashboard AsetQu V.2 dengan memilih periode staking yang tersedia dan memantau reward secara real-time melalui akun masing-masing
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    Apakah AsetQu V.2 aman digunakan
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    AsetQu V.2 menerapkan standar keamanan tinggi, termasuk audit smart contract, sistem enkripsi data, dan mekanisme proteksi aset untuk memastikan keamanan pengguna dan transparansi transaksi
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                    Bagaimana cara bergabung dengan komunitas AsetQu V.2
                                </button>
                            </h2>
                            <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Pengguna dapat bergabung melalui fitur Community AsetQu V.2, mengikuti event, newsletter, dan kanal media sosial resmi untuk berinteraksi, belajar, serta mendapatkan informasi terbaru seputar ekosistem AsetQu V.2
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                        @endforelse
                    </div>
                </div>

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

{{-- Partnership Section --}}
<section class="partnership-section section" id="partnership">
    <div class="partnership-bg"></div>
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title-italic">Kunci Token Gambaran Umum</h2>
            <p>
                Dua fase penguncian token ini menunjukkan komitmen AsetQu dalam membangun ekosistem yang kuat dan berkelanjutan hingga tahun 2030!
            </p>
        </div>

        {{-- BscScan Button --}}
        <div class="text-center mb-5">
            <a href="https://bscscan.com/token/0xC69456817C99Efa2d33F4C2408D350fC86138f76" class="btn btn-bscscan">
                <span>Bsc scan AsetQu V.2</span>
            </a>
        </div>

        {{-- Kolaborasi Section --}}
        <div class="partner-category">
            <h3 class="partner-category-title">Kolaborasi</h3>
            <div class="partner-cards-wrapper">
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/coin-market-cap.png') }}" alt="CoinMarketCap" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/bsc-scan.png') }}" alt="BscScan" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/cfx.png') }}" alt="CFX" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/otoritas-jasa-keuangan.png') }}" alt="OJK" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/komdigi.png') }}" alt="KOMINFO" onerror="handleImageError(this)">
                </div>
            </div>
        </div>

        {{-- Wallet Section --}}
        <div class="partner-category">
            <h3 class="partner-category-title">Wallet</h3>
            <div class="partner-cards-wrapper">
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/indodax.png') }}" alt="INDODAX" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/metamask-icon.png') }}" alt="MetaMask" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/trustwallet-icon.png') }}" alt="Trust Wallet" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/coinbase-icon.png') }}" alt="Coinbase" onerror="handleImageError(this)">
                </div>
                <div class="partner-card">
                    <img src="{{ asset('assets/images/icons/phantom-icon.png') }}" alt="Phantom" onerror="handleImageError(this)">
                </div>
            </div>
        </div>

        {{-- Timeline Graphic --}}
        <div class="timeline-graphic">
            <img src="{{ asset('assets/images/partner-road.png') }}" alt="Timeline" class="img-fluid" onerror="handleImageError(this)">
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('.coin-image').addClass('floating');
    // Initialize Hero Swiper
    var heroSwiper = new Swiper('.hero-swiper', {
        loop: true,
        speed: 1000,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        parallax: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

    // ========================================
    // Event Calendar Functionality
    // ========================================

    // Load events data from controller
    const eventsData = [
        @foreach($events as $event)
        {
            id: {{ $event->id }},
            date: '{{ \Carbon\Carbon::parse($event->event_date)->format('Y-m-d') }}',
            title: '{{ addslashes($event->title) }}',
            badge: '{{ strtoupper($event->event_type) }} EVENT',
            description: '{{ addslashes(Str::limit($event->description, 100)) }}',
            time: '{{ date('h:i A', strtotime($event->start_time)) }}',
            poster: '{{ $event->poster ? asset('storage/' . $event->poster) : asset('assets/images/events/event-poster.jpg') }}',
            link: '{{ route('page.news.event-detail', $event->slug) }}'
        }{{ $loop->last ? '' : ',' }}
        @endforeach
    ];

    // Indonesian month names
    const monthNames = [
        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
    ];

    const dayNames = ['SEN', 'SEL', 'RAB', 'KAM', 'JUM', 'SAB', 'MIN'];

    let currentDate = new Date();
    let currentMonth = currentDate.getMonth();
    let currentYear = currentDate.getFullYear();
    let selectedDate = null;

    // Initialize calendar
    function initCalendar() {
        renderCalendar();

        // Navigation buttons
        $('#calPrev').on('click', function() {
            currentMonth--;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            renderCalendar();
        });

        $('#calNext').on('click', function() {
            currentMonth++;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            renderCalendar();
        });
    }

    // Render calendar
    function renderCalendar() {
        const calDays = $('#calDays');
        const calMonth = $('#calMonth');

        // Update month title
        calMonth.text(monthNames[currentMonth] + ' ' + currentYear);

        // Clear calendar
        calDays.empty();

        // Add day headers
        dayNames.forEach(day => {
            calDays.append(`<div class="day-header">${day}</div>`);
        });

        // Get first day of month and total days
        const firstDay = new Date(currentYear, currentMonth, 1);
        const lastDay = new Date(currentYear, currentMonth + 1, 0);
        const totalDays = lastDay.getDate();

        // Get starting day (Monday = 0, Sunday = 6)
        let startingDay = firstDay.getDay() - 1;
        if (startingDay < 0) startingDay = 6;

        // Add empty cells for days before the first day
        for (let i = 0; i < startingDay; i++) {
            calDays.append(`<div class="day empty"></div>`);
        }

        // Add days
        const today = new Date();
        for (let day = 1; day <= totalDays; day++) {
            const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
            const hasEvent = eventsData.some(e => e.date === dateStr);
            const isToday = (day === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear());
            const isSelected = (selectedDate === dateStr);

            let classes = 'day';
            if (hasEvent) classes += ' has-event';
            if (isToday) classes += ' today';
            if (isSelected) classes += ' active';

            calDays.append(`<div class="${classes}" data-date="${dateStr}">${day}</div>`);
        }

        // Add click event to days
        calDays.find('.day:not(.empty)').on('click', function() {
            const dateStr = $(this).data('date');
            selectDate(dateStr);
        });

        // Show nearest event on initial load
        if (!selectedDate) {
            showNearestEvent();
        }
    }

    // Select date and show event
    function selectDate(dateStr) {
        selectedDate = dateStr;

        // Update active state
        $('.calendar-days .day').removeClass('active');
        $(`.calendar-days .day[data-date="${dateStr}"]`).addClass('active');

        // Find event for this date
        const event = eventsData.find(e => e.date === dateStr);

        if (event) {
            showEventDetails(event);
        } else {
            showNoEvent(dateStr);
        }
    }

    // Show event details
    function showEventDetails(event) {
        const eventDate = new Date(event.date);
        const dateText = `${eventDate.getDate()} ${monthNames[eventDate.getMonth()]} ${eventDate.getFullYear()} | ${event.time}`;

        $('#eventName').text(event.title);
        $('#eventBadge').text(event.badge);
        $('#eventDesc').text(event.description);
        $('#eventDatetimeText').text(dateText);
        $('#eventPosterImg').attr('src', event.poster);
        $('#eventDetailBtn').attr('href', event.link);
        $('#eventPoster').removeClass('no-event-poster');

        $('#eventDetails').removeClass('no-event');
        $('#eventDetailBtn').show(); // Show button when event exists
    }

    // Show no event message
    function showNoEvent(dateStr) {
        const eventDate = new Date(dateStr);
        const dateText = `${eventDate.getDate()} ${monthNames[eventDate.getMonth()]} ${eventDate.getFullYear()}`;

        $('#eventName').text('Tidak Ada Event');
        $('#eventBadge').text('NO EVENT');
        $('#eventDesc').text('Belum ada event yang dijadwalkan pada tanggal ini. Cek tanggal lain yang ditandai untuk melihat event yang tersedia.');
        $('#eventDatetimeText').text(dateText);

        // Set poster to data URI placeholder (gray background)
        const placeholderDataUri = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzFhMTAyZSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjAiIGZpbGw9IiM4YjVjZjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5UaWRhayBBZGEgRXZlbnQ8L3RleHQ+PC9zdmc+';
        $('#eventPosterImg').attr('src', placeholderDataUri);
        $('#eventPosterImg').attr('alt', 'No Event');
        $('#eventPoster').addClass('no-event-poster');

        $('#eventDetails').addClass('no-event');
        $('#eventDetailBtn').hide(); // Hide button when no event
    }

    // Show nearest upcoming event
    function showNearestEvent() {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        // Find nearest upcoming event
        const upcomingEvents = eventsData
            .map(e => ({ ...e, dateObj: new Date(e.date) }))
            .filter(e => e.dateObj >= today)
            .sort((a, b) => a.dateObj - b.dateObj);

        if (upcomingEvents.length > 0) {
            const nearestEvent = upcomingEvents[0];
            selectedDate = nearestEvent.date;

            // Navigate to that month if different
            const eventDate = new Date(nearestEvent.date);
            if (eventDate.getMonth() !== currentMonth || eventDate.getFullYear() !== currentYear) {
                currentMonth = eventDate.getMonth();
                currentYear = eventDate.getFullYear();
                renderCalendar();
            }

            // Select the date
            $(`.calendar-days .day[data-date="${nearestEvent.date}"]`).addClass('active');
            showEventDetails(nearestEvent);
        }
    }

    // Initialize
    initCalendar();

    // ========================================
    // Community Feed Auto-Scroll
    // ========================================
    function initCommunityScroll() {
        const scrollContainer = document.getElementById('communityFeedScroll');
        if (!scrollContainer) return;

        let scrollSpeed = 1; // pixels per frame
        let isPaused = false;
        let animationId = null;

        function autoScroll() {
            if (!isPaused) {
                scrollContainer.scrollLeft += scrollSpeed;

                // Reset to beginning when reaching end
                if (scrollContainer.scrollLeft >= (scrollContainer.scrollWidth - scrollContainer.clientWidth)) {
                    // Smooth reset with transition
                    scrollContainer.style.scrollBehavior = 'auto';
                    scrollContainer.scrollLeft = 0;
                    setTimeout(() => {
                        scrollContainer.style.scrollBehavior = 'smooth';
                    }, 50);
                }
            }
            animationId = requestAnimationFrame(autoScroll);
        }

        // Pause on hover
        scrollContainer.addEventListener('mouseenter', () => {
            isPaused = true;
        });

        scrollContainer.addEventListener('mouseleave', () => {
            isPaused = false;
        });

        // Touch support
        scrollContainer.addEventListener('touchstart', () => {
            isPaused = true;
        });

        scrollContainer.addEventListener('touchend', () => {
            setTimeout(() => {
                isPaused = false;
            }, 2000); // Resume after 2 seconds
        });

        // Start auto-scroll
        autoScroll();
    }

    // Initialize community scroll
    initCommunityScroll();
});
</script>
@endpush