@php
    $version = $basicInfo->theme_version;
@endphp
@extends("frontend.layouts.layout-v$version")

@section('pageHeading')
    {{ __('Events') }}
@endsection

@section('metaKeywords')
    @if (!empty($seoInfo))
        {{ $seoInfo->meta_keyword_home }}
    @endif
@endsection

@section('metaDescription')
    @if (!empty($seoInfo))
        {{ $seoInfo->meta_description_home }}
    @endif
@endsection

@section('content')
    @includeIf('frontend.partials.breadcrumb', [
        'breadcrumb' => $bgImg->breadcrumb,
        'title' => __('Events'),
        'subtitle' => __('Discover Our Events'),
    ])

    <!-- All Events Section -->
    <section class="events-area pb-100 pt-30">
        <div class="container">

            <div class="row">
                @if($events->count() > 0)
                    @foreach($events as $event)
                        <div class="col-lg-4 col-md-6 mb-30">
                            <div class="event-card" data-aos="fade-up">
                                <div class="event-image">
                                    <img src="{{ $event->banner_image_url ?: asset('assets/img/default_img.png') }}" alt="{{ $event->title }}" class="img-fluid" onerror="this.src='{{ asset('assets/img/default_img.png') }}'">
                                    @if($event->is_featured)
                                        <div class="featured-badge">
                                            <i class="fas fa-star"></i> {{ __('Featured') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="event-content">
                                    <div class="event-date">
                                        <i class="far fa-calendar-alt"></i>
                                        {{ $event->start_date_time->format('M d, Y') }}
                                    </div>
                                    <h3 class="event-title">
                                        <a href="{{ route('frontend.event.details', $event->slug) }}">{{ $event->title }}</a>
                                    </h3>
                                    <div class="event-venue">
                                        <i class="fas fa-map-marker-alt"></i>
                                        {{ $event->venue }}
                                    </div>
                                    <div class="event-time">
                                        <i class="far fa-clock"></i>
                                        {{ $event->start_date_time->format('g:i A') }} - {{ $event->end_date_time->format('g:i A') }}
                                    </div>
                                    <div class="event-description">
                                        {{ Str::limit(strip_tags($event->description), 100) }}
                                    </div>
                                    <div class="event-actions">
                                        <a href="{{ route('frontend.event.details', $event->slug) }}" class="btn btn-primary">
                                            {{ __('View Details') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-lg-12">
                        <div class="text-center">
                            <div class="no-events-found">
                                <i class="far fa-calendar-times fa-4x text-muted mb-4"></i>
                                <h3 class="mb-3">{{ __('No Events Found') }}</h3>
                                <p class="text-muted mb-4">{{ __('We currently don\'t have any events scheduled. Please check back later for upcoming events.') }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Pagination -->
            @if($events->hasPages())
                <div class="row">
                    <div class="col-lg-12">
                        <div class="pagination-wrapper text-center">
                            {{ $events->appends(request()->query())->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('custom-styles')
<style>
    /* Event Type Tabs Custom Styles */
    .event-type-tabs {
        margin: 0 0 24px 0;
        display: flex;
        justify-content: center;
    }

    .event-type-tabs .nav-tabs {
        border-bottom: none;
        gap: 16px;
    }

    .event-type-tabs .nav-link {
        color: #2B4E72;
        background: #fff;
        border: 1px solid #2B4E72;
        border-radius: 32px;
        padding: 10px 32px;
        font-weight: 500;
        transition: background 0.2s, color 0.2s;
        text-decoration: none;
    }

    .event-type-tabs .nav-link.active,
    .event-type-tabs .nav-link:focus,
    .event-type-tabs .nav-link:active {
        background: var(--color-primary, #2B4E72) !important;
        color: #fff !important;
        border-color: var(--color-primary, #2B4E72) !important;
    }

    .event-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        border: 1px solid #e9ecef;
    }

    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

    .event-card.featured {
        border: 2px solid #ffc107;
        box-shadow: 0 4px 20px rgba(255, 193, 7, 0.15);
    }

    .event-image {
        position: relative;
        height: 220px;
        overflow: hidden;
    }

    .event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .event-card:hover .event-image img {
        transform: scale(1.05);
    }

    .event-status {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 2;
    }

    .event-status .badge {
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 20px;
    }

    .featured-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: linear-gradient(45deg, #ffc107, #ff9800);
        color: #000;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: bold;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    }

    .event-content {
        padding: 25px;
    }

    .event-date {
        color: #666;
        font-size: 14px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .event-title {
        font-size: 20px;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .event-title a {
        color: #333;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .event-title a:hover {
        color: var(--color-primary);
    }

    .event-venue, .event-time {
        color: #666;
        font-size: 14px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .event-description {
        color: #777;
        font-size: 14px;
        margin: 15px 0;
        line-height: 1.6;
    }

    .event-actions {
        margin-top: 20px;
    }

    .event-actions .btn {
        width: 100%;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .event-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    .event-image {
        position: relative;
        overflow: hidden;
        border-radius: 10px 10px 0 0;
    }

    .event-image img {
        transition: transform 0.3s ease;
    }

    .event-card:hover .event-image img {
        transform: scale(1.05);
    }

    .no-events-found {
        padding: 80px 20px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        border: 2px dashed #dee2e6;
        text-align: center;
    }

    .no-events-found i {
        color: #6c757d;
        margin-bottom: 20px;
    }

    .no-events-found h3 {
        color: #495057;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .no-events-found p {
        color: #6c757d;
        margin-bottom: 30px;
        font-size: 1.1rem;
    }

    .pagination-wrapper {
        margin-top: 50px;
    }

    .pagination-wrapper .pagination {
        justify-content: center;
    }

    .pagination-wrapper .page-link {
        border-radius: 8px;
        margin: 0 2px;
        border: 1px solid #dee2e6;
        color: #2B4E72;
    }

    .pagination-wrapper .page-item.active .page-link {
        background-color: var(--color-primary, #2B4E72);
        border-color: var(--color-primary, #2B4E72);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .event-type-tabs .nav-link {
            padding: 8px 16px;
            font-size: 14px;
        }

        .event-type-tabs .nav-tabs {
            gap: 8px;
        }

        .event-content {
            padding: 20px;
        }

        .event-title {
            font-size: 18px;
        }

        .event-image {
            height: 180px;
        }
    }
</style>
@endsection