@extends('layouts.admin')
@section('title', 'Event Calendar')
@section('page-title', 'Event Calendar')
@section('page-subtitle', 'View upcoming events')

@section('content')
<div class="card-royal p-6">
    <div class="flex justify-between items-center mb-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
            <i class="fas fa-calendar mr-2 text-gold-500"></i> Upcoming Events
        </h3>
        <a href="{{ route('admin.events.index') }}" class="text-sm text-gold-500 hover:text-gold-600">
            <i class="fas fa-list mr-1"></i> List View
        </a>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($events as $event)
            <div class="border border-[var(--border-color)] rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
                <div class="p-4 bg-gradient-to-r from-gold-500/10 to-royal-500/10">
                    <div class="flex items-start justify-between">
                        <div class="w-14 h-14 rounded-lg bg-white shadow flex flex-col items-center justify-center">
                            <span class="text-xs font-bold text-gold-600">{{ $event->start_date->format('M') }}</span>
                            <span class="text-xl font-bold text-[var(--text-primary)]">{{ $event->start_date->format('d') }}</span>
                        </div>
                        <span class="px-2 py-1 text-xs font-semibold rounded 
                            @if($event->status === 'published') bg-green-100 text-green-700
                            @else bg-gray-100 text-gray-700 @endif">
                            {{ ucfirst($event->status) }}
                        </span>
                    </div>
                </div>
                
                <div class="p-4">
                    <h4 class="font-semibold text-[var(--text-primary)] mb-2">{{ $event->title }}</h4>
                    <p class="text-sm text-[var(--text-secondary)] mb-3">
                        <i class="fas fa-clock mr-1"></i> {{ $event->start_date->format('g:i A') }}
                        @if($event->location)
                            <br><i class="fas fa-map-marker-alt mr-1 mt-1"></i> {{ $event->location }}
                        @endif
                    </p>
                    
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-[var(--text-secondary)]">
                            <i class="fas fa-users mr-1"></i> {{ $event->confirmed_rsvps_count }} RSVPs
                        </span>
                        @if($event->max_participants)
                            <span class="{{ $event->is_full ? 'text-red-500' : 'text-green-500' }}">
                                {{ $event->available_spots }} spots left
                            </span>
                        @endif
                    </div>
                    
                    <a href="{{ route('admin.events.show', $event->id) }}" class="mt-4 w-full btn-royal px-4 py-2 rounded-lg text-white text-center block text-sm">
                        View Details
                    </a>
                </div>
            </div>
        @empty
            <div class="col-span-3 text-center py-12">
                <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
                <p class="text-[var(--text-secondary)]">No upcoming events.</p>
                <a href="{{ route('admin.events.create') }}" class="text-gold-500 hover:underline">Create an event</a>
            </div>
        @endforelse
    </div>
</div>
@endsection