@extends('layouts.app')

@section('page_title', 'Events')
@section('page_subtitle', 'Join our upcoming community actions, workshops, and volunteer programs.')

@section('content')
<section class="section" style="padding-top: 60px;">
    <div class="container">
        <div class="page-header" style="text-align: center; margin-bottom: 50px;">
            @auth
                <div style="margin-top: 20px;">
                    <a class="button button-primary" href="{{ route('events.create') }}">+ Create New Event</a>
                </div>
            @endauth
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="blog-grid">
            @forelse($events as $event)
                <article class="post-card">
                    @if($event->image_path)
                        <div class="post-card-image">
                            <img src="{{ asset('storage/' . $event->image_path) }}" alt="{{ $event->title }}">
                        </div>
                    @endif
                    <div class="post-card-content">
                        <div style="font-size: 0.85rem; color: #00bcd4; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">
                            {{ $event->event_date->format('M d, Y') }} @if($event->event_time) at {{ date('h:i A', strtotime($event->event_time)) }} @endif
                        </div>
                        <h2>{{ $event->title }}</h2>
                        <p>{{ Str::limit($event->description, 120) }}</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: auto;">
                            @if($event->location)
                                <div style="font-size: 0.9rem; color: #888; display: flex; align-items: center; gap: 5px;">
                                    📍 {{ $event->location }}
                                </div>
                            @endif
                            @auth
                                <form action="{{ route('events.destroy', $event) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this event?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" style="background: none; border: none; color: #ff4d4d; cursor: pointer; font-weight: 700; font-size: 0.85rem; text-transform: uppercase;">Delete</button>
                                </form>
                            @endauth
                        </div>
                    </div>
                </article>
            @empty
                <div class="empty-state" style="grid-column: 1 / -1;">
                    <div style="font-size: 4rem; margin-bottom: 20px;">📅</div>
                    <p>No upcoming events at the moment. Check back soon!</p>
                </div>
            @endforelse
        </div>

        <div style="margin-top: 100px; border-top: 1px solid #eee; padding-top: 60px;">
            <div class="page-grid">
                <article>
                    <h2>Event Calendar</h2>
                    <p>Our calendar shows workshops, fundraisers, and community meetups. We update this regularly to keep you informed about our latest activities.</p>
                </article>
                <article>
                    <h2>Attendance Guidelines</h2>
                    <p>Follow the guidelines to register and participate safely in our events. We prioritize the safety and well-being of all participants.</p>
                </article>
            </div>
        </div>
    </div>
</section>
@endsection