@extends('layouts.app')

@section('title', 'Events & Technical Summits | AICDS')

@section('content')

<x-breadcrumb title="Events & Technical Summits" :breadcrumbs="['Events' => route('events.index')]" />

<div class="sp_top_100 sp_bottom_100">
    <div class="container">
        <!-- Search and Category Navigation -->
        <div class="row mb-5" data-aos="fade-up">
            <div class="col-12">
                <div class="p-4 bg-light rounded-4 border shadow-sm">
                    <form action="{{ route('events.index') }}" method="GET" class="row g-3 align-items-center">
                        <div class="col-md-6">
                            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search by event title, speaker, or topics...">
                        </div>
                        <div class="col-md-3">
                            <select name="type" class="form-select">
                                <option value="">-- All Event Categories --</option>
                                <option value="workshops" {{ request('type') === 'workshops' ? 'selected' : '' }}>Workshops</option>
                                <option value="webinars" {{ request('type') === 'webinars' ? 'selected' : '' }}>Webinars</option>
                                <option value="conferences" {{ request('type') === 'conferences' ? 'selected' : '' }}>Conferences</option>
                                <option value="hackathons" {{ request('type') === 'hackathons' ? 'selected' : '' }}>Hackathons</option>
                                <option value="fdp" {{ request('type') === 'fdp' ? 'selected' : '' }}>Faculty Development (FDP)</option>
                                <option value="projects" {{ request('type') === 'projects' ? 'selected' : '' }}>Student Projects</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex gap-2">
                            <button type="submit" class="default__button w-100 py-2">Filter</button>
                            <a href="{{ route('events.index') }}" class="btn btn-outline-secondary py-2">Reset</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Category Pills -->
        <div class="row mb-5" data-aos="fade-up">
            <div class="col-12">
                <div class="d-flex flex-wrap gap-2 justify-content-center">
                    <a href="{{ route('events.index') }}" class="btn btn-sm {{ empty(request('type')) ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">All Summits</a>
                    <a href="{{ route('events.workshops') }}" class="btn btn-sm {{ request('type') === 'workshops' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">Workshops</a>
                    <a href="{{ route('events.webinars') }}" class="btn btn-sm {{ request('type') === 'webinars' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">Webinars</a>
                    <a href="{{ route('events.conferences') }}" class="btn btn-sm {{ request('type') === 'conferences' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">Conferences</a>
                    <a href="{{ route('events.hackathons') }}" class="btn btn-sm {{ request('type') === 'hackathons' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">Hackathons</a>
                    <a href="{{ route('events.fdp') }}" class="btn btn-sm {{ request('type') === 'fdp' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">FDPs</a>
                    <a href="{{ route('events.projects') }}" class="btn btn-sm {{ request('type') === 'projects' ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-3 py-2">Student Projects</a>
                </div>
            </div>
        </div>

        <!-- Events Grid -->
        <div class="row">
            @forelse($events as $event)
                <x-event-card :event="$event" />
            @empty
                <div class="col-12 text-center py-5">
                    <div class="p-5 bg-light rounded-4 border">
                        <i class="icofont-calendar display-4 text-muted mb-3 d-block"></i>
                        <h4 class="fw-bold">No Events Found</h4>
                        <p class="text-muted">No scheduled events match your selected filters. Please check back soon.</p>
                    </div>
                </div>
            @endforelse
        </div>

        <div class="d-flex justify-content-center mt-5">
            {{ $events->links() }}
        </div>
    </div>
</div>

@endsection