@extends('core::layouts.master')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

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

@section('content')
{{-- Hero Section --}}
<section class="calendar-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="hero-content" data-aos="fade-right">
                    <h1 class="hero-title">
                        <span class="text-gradient-gold">Kalender Acara ASETQU V.2</span>
                    </h1>
                    <p class="hero-subtitle">
                        Pembaharuan terbaru, acara mendatang, dan peluang kemitraan di ekosistem AsetQu V.2
                    </p>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image" data-aos="fade-left" data-aos-delay="200">
                    {{-- <div class="cube-wrapper">
                        <div class="cube-glow"></div>
                        <div class="cube-placeholder">
                            <div class="cube-3d">
                                <div class="cube-face front"></div>
                                <div class="cube-face back"></div>
                                <div class="cube-face left"></div>
                                <div class="cube-face right"></div>
                                <div class="cube-face top"></div>
                                <div class="cube-face bottom"></div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Calendar Section - Same as Home 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>

{{-- Upcoming Events Section --}}
<section class="upcoming-events-section section">
    <div class="container">
        <h2 class="section-title text-center" data-aos="fade-up">
            ACARA YANG AKAN DATANG
        </h2>

        <div class="row g-4 mt-4">
            @forelse($events as $event)
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                <div class="upcoming-event-card">
                    <div class="event-image">
                        @if($event->poster)
                            <img src="{{ asset('storage/' . $event->poster) }}" alt="{{ $event->title }}" onerror="this.style.display='none'">
                        @endif
                        <div class="event-image-placeholder">
                            <h4>{{ Str::upper($event->title) }}</h4>
                            <p>{{ ucfirst($event->event_type) }}</p>
                        </div>
                    </div>
                    <div class="event-content">
                        <h4 class="event-name text-gradient-cyan">{{ $event->title }}</h4>
                        <ul class="event-info-list">
                            <li>
                                <i class="far fa-calendar"></i>
                                <span>: {{ \Carbon\Carbon::parse($event->event_date)->locale('id')->translatedFormat('l, d F Y') }}</span>
                            </li>
                            <li>
                                <i class="far fa-clock"></i>
                                <span>: Pukul {{ date('H.i', strtotime($event->start_time)) }} - {{ date('H.i', strtotime($event->end_time)) }} WIB</span>
                            </li>
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                                <span>: {{ $event->event_type === 'online' ? 'Online' : $event->location }}</span>
                            </li>
                        </ul>
                        <a href="{{ route('page.news.event-detail', $event->slug) }}" class="btn btn-detail-full">Detail</a>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-calendar-alt" style="font-size: 64px; color: #8b5cf6; opacity: 0.5;"></i>
                    <p class="mt-3" style="color: #9ca3af;">Belum ada event tersedia</p>
                </div>
            </div>
            @endforelse
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // ========================================
    // Event Calendar Functionality (Same as Home)
    // ========================================

    // Load events data from database
    const eventsData = [
        @foreach($events as $event)
        {
            id: {{ $event->id }},
            date: '{{ \Carbon\Carbon::parse($event->event_date)->format('Y-m-d') }}',
            slug: '{{ $event->slug }}',
            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();
});
</script>
@endpush