@php
    // Initialize variables with defaults to prevent undefined errors
    $events = $events ?? [];
@endphp

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

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

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard/event.css') }}?v={{ time() }}">
@endpush

@section('content')
<div class="event-page">
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Acara yang Diikuti</h1>
        <p class="page-description">Berikut list data acara yang anda ikuti dan jangan lewatkan acara yang akan berlangsung</p>
    </div>

    <!-- Events Grid -->
    <div class="events-grid">
        @forelse($events as $event)
        <div class="event-card">
            <div class="event-image">
                @if($event->poster)
                    <img src="{{ asset('storage/' . $event->poster) }}" alt="{{ $event->title }}">
                @else
                    <img src="{{ asset('assets/images/events/default-event.jpg') }}" alt="{{ $event->title }}">
                @endif
            </div>

            <div class="event-content">
                <h3 class="event-title">{{ $event->title }}</h3>

                <div class="event-meta">
                    <div class="meta-item">
                        <i class="fas fa-calendar"></i>
                        <span>: {{ \Carbon\Carbon::parse($event->event_date)->locale('id')->translatedFormat('l, d F Y') }}</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-clock"></i>
                        <span>: {{ date('H.i', strtotime($event->start_time)) }} WIB</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>: {{ $event->event_type === 'online' ? 'Online' : $event->location }}</span>
                    </div>
                </div>

                <a href="{{ route('dashboard.event.detail', $event->slug) }}" class="btn-detail">
                    Detail
                </a>
            </div>
        </div>
        @empty
        <!-- Empty State when no events -->
        <div class="col-12">
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <h3>Belum Ada Event yang Diikuti</h3>
                <p>Anda belum mengikuti event apapun. Jelajahi kalender event dan ikuti event yang menarik!</p>
                <a href="{{ url('/news-events/calendar') }}" class="btn-explore-events">
                    <i class="fas fa-calendar-plus me-2"></i>
                    Jelajahi Event
                </a>
            </div>
        </div>
        @endforelse
    </div>
</div>
@endsection