@extends('layouts.app')

@section('title', 'Events & Tournaments - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">SCHEDULE</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Events & <span style="color: var(--gold-light);">Tournaments</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Tab switcher -->
<section style="background: var(--off-white); padding: 20px 0; border-bottom: 1px solid var(--gray-200);">
    <div class="container">
        <div style="display: flex; gap: 8px; background: var(--gray-200); border-radius: 8px; padding: 4px; width: fit-content; margin: 0 auto;">
            <button class="people-tab active" onclick="switchEventsTab('upcoming', this)" style="border: none; background: white; color: var(--blue); padding: 10px 24px; border-radius: 6px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition);">Upcoming Events</button>
            <button class="people-tab" onclick="switchEventsTab('past', this)" style="border: none; background: transparent; color: var(--gray-500); padding: 10px 24px; border-radius: 6px; font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--transition);">Past Events</button>
        </div>
    </div>
</section>

<!-- Content grids -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        <!-- Upcoming Events Tab Content -->
        <div id="tab-events-upcoming" class="tab-events-content" style="display: block;">
            @if($upcomingEvents->count() > 0)
            <div class="events-list">
                @foreach($upcomingEvents as $event)
                <div class="event-card">
                    <div class="event-card-img">
                        @if($event->image && file_exists(public_path($event->image)))
                            <img src="{{ asset($event->image) }}" alt="{{ $event->title }}">
                        @else
                            <div style="background: linear-gradient(135deg, var(--blue), var(--blue-mid)); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">🥋</div>
                        @endif
                    </div>
                    <div class="event-date-box">
                        <div class="event-date-day">{{ $event->start_date->format('d') }}</div>
                        <div class="event-date-month">{{ $event->start_date->format('M Y') }}</div>
                    </div>
                    <div class="event-info">
                        <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--blue); margin-bottom: 8px;">{{ $event->title }}</h3>
                        <p style="font-size: 0.9rem; color: var(--gray-700); line-height: 1.6; margin-bottom: 12px;">{{ $event->description }}</p>
                        <div class="event-meta">
                            <span><i class="fas fa-map-marker-alt"></i> {{ $event->venue }}</span>
                            <span><i class="fas fa-calendar-alt"></i> {{ $event->start_date->format('M d') }} – {{ $event->end_date->format('M d, Y') }}</span>
                            <span><i class="fas fa-clock"></i> {{ $event->start_date->format('h:i A') }}</span>
                        </div>
                    </div>
                    <div>
                        @if($event->registration_status === 'open')
                            <span class="reg-open"><i class="fas fa-circle" style="font-size: 0.5rem; vertical-align: middle; margin-right: 4px;"></i> Open</span>
                        @else
                            <span class="reg-closed"><i class="fas fa-lock" style="font-size: 0.7rem; margin-right: 4px;"></i> Closed</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div style="text-align: center; padding: 80px 40px; color: var(--gray-500);">
                <i class="fas fa-calendar-times" style="font-size: 3.5rem; opacity: 0.3; margin-bottom: 16px;"></i>
                <p>No upcoming tournaments or courses are currently scheduled.</p>
            </div>
            @endif
        </div>

        <!-- Past Events Tab Content -->
        <div id="tab-events-past" class="tab-events-content" style="display: none;">
            @if($pastEvents->count() > 0)
            <div class="events-list">
                @foreach($pastEvents as $event)
                <div class="event-card" style="opacity: 0.85; border-left: 4px solid var(--gray-500);">
                    <div class="event-card-img">
                        @if($event->image && file_exists(public_path($event->image)))
                            <img src="{{ asset($event->image) }}" alt="{{ $event->title }}">
                        @else
                            <div style="background: linear-gradient(135deg, var(--blue), var(--blue-mid)); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">🥋</div>
                        @endif
                    </div>
                    <div class="event-date-box" style="background: var(--gray-700);">
                        <div class="event-date-day">{{ $event->start_date->format('d') }}</div>
                        <div class="event-date-month">{{ $event->start_date->format('M Y') }}</div>
                    </div>
                    <div class="event-info">
                        <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--blue); margin-bottom: 8px;">{{ $event->title }}</h3>
                        <p style="font-size: 0.9rem; color: var(--gray-700); line-height: 1.6; margin-bottom: 12px;">{{ $event->description }}</p>
                        <div class="event-meta">
                            <span><i class="fas fa-map-marker-alt"></i> {{ $event->venue }}</span>
                            <span><i class="fas fa-calendar-alt"></i> Completed: {{ $event->end_date->format('M d, Y') }}</span>
                        </div>
                    </div>
                    <div>
                        <span class="reg-closed"><i class="fas fa-check" style="font-size: 0.7rem; margin-right: 4px;"></i> Done</span>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div style="text-align: center; padding: 80px 40px; color: var(--gray-500);">
                <i class="fas fa-history" style="font-size: 3.5rem; opacity: 0.3; margin-bottom: 16px;"></i>
                <p>No past events records are stored.</p>
            </div>
            @endif
        </div>
    </div>
</section>

<script>
function switchEventsTab(tabId, btn) {
    // Hide all contents
    document.querySelectorAll('.tab-events-content').forEach(c => c.style.display = 'none');
    // Deactivate all buttons
    document.querySelectorAll('.people-tab').forEach(b => {
        b.style.background = 'transparent';
        b.style.color = 'var(--gray-500)';
        b.style.boxShadow = 'none';
        b.classList.remove('active');
    });
    
    // Show active tab
    document.getElementById('tab-events-' + tabId).style.display = 'block';
    
    // Activate button
    btn.style.background = 'white';
    btn.style.color = 'var(--blue)';
    btn.style.boxShadow = 'var(--shadow-sm)';
    btn.classList.add('active');
}
</script>

@endsection