@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
        $baseQuery = request()->except(['page']);
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => $pageEventsTitle ?? 'Events'])

    <section class="events-clean-section space">
        <div class="container">
            @if(!empty($pageEventsIntro))
                <div class="row mb-30">
                    <div class="col-lg-8 mx-auto text-center">
                        <p class="events-clean-intro">{{ $pageEventsIntro }}</p>
                    </div>
                </div>
            @endif

            <div class="events-clean-toolbar">
                <div class="events-clean-toolbar__filters">
                    @foreach(['upcoming' => 'Upcoming', 'past' => 'Past', 'today' => 'Today', 'this_month' => 'This month'] as $key => $label)
                        <a href="{{ route('frontend.events.index', array_merge($baseQuery, ['filter' => $key])) }}"
                           class="events-clean-chip {{ ($filter ?? '') === $key ? 'is-active' : '' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            @if($categories->count())
                <div class="events-clean-cats-row">
                    <a href="{{ route('frontend.events.index', collect(request()->except('page'))->except('category')->all()) }}"
                       class="events-clean-cat {{ !request('category') ? 'is-active' : '' }}">
                        All events
                    </a>
                    @foreach($categories as $category)
                        <a href="{{ route('frontend.events.index', array_merge($baseQuery, ['category' => $category->slug])) }}"
                           class="events-clean-cat {{ request('category') === $category->slug ? 'is-active' : '' }}">
                            {{ $category->name }}
                            <span>{{ $category->events_count }}</span>
                        </a>
                    @endforeach
                </div>
            @endif

            <div class="events-clean-grid">
                @forelse($events as $event)
                    @php
                        $brand_name = $siteName ?? config('app.name');
                        $category_label = strtoupper($event->category?->name ?? 'Event');
                        $avatar_url = $logoUrl
                            ?? 'https://ui-avatars.com/api/?name='.urlencode($brand_name).'&background=050505&color=d69a00&bold=true&size=64';
                        $image_url = $event->featured_image
                            ? asset('storage/'.$event->featured_image)
                            : $assetPath('images/blog/blog-thumb01.webp');
                        $excerpt = \Illuminate\Support\Str::limit(
                            strip_tags($event->description ?: ($event->content ?? '')),
                            110
                        );
                        $can_register = $event->isPublicRegistrationLinkAvailable() && $event->isRegistrationOpen();
                        $register_url = $can_register ? $event->registration_url : null;
                    @endphp
                    <article class="events-clean-card">
                        <div class="events-clean-card__meta">
                            <div class="events-clean-card__person">
                                <img class="events-clean-card__avatar" src="{{ $avatar_url }}" alt="" width="36" height="36">
                                <div>
                                    <p class="events-clean-card__name">{{ $brand_name }}</p>
                                    <p class="events-clean-card__role">{{ $category_label }}</p>
                                </div>
                            </div>
                            <p class="events-clean-card__date">
                                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                    <rect x="3.5" y="5" width="17" height="15.5" rx="2" stroke="currentColor" stroke-width="1.6"/>
                                    <path d="M8 3.5v3M16 3.5v3M3.5 10h17" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                                </svg>
                                {{ $event->start_date->format('M d, Y') }}
                            </p>
                        </div>

                        <a href="{{ route('frontend.events.show', $event->slug) }}" class="events-clean-card__media">
                            <img src="{{ $image_url }}" alt="{{ $event->title }}" loading="lazy" width="520" height="320">
                        </a>

                        <h3 class="events-clean-card__title">
                            <a href="{{ route('frontend.events.show', $event->slug) }}">{{ $event->title }}</a>
                        </h3>

                        @if($event->location)
                            <p class="events-clean-card__location">
                                <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
                                {{ \Illuminate\Support\Str::limit($event->location, 48) }}
                            </p>
                        @endif

                        @if($excerpt !== '')
                            <p class="events-clean-card__excerpt">{{ $excerpt }}</p>
                        @endif

                        <div class="events-clean-card__actions">
                            <a href="{{ route('frontend.events.show', $event->slug) }}" class="events-clean-btn events-clean-btn--ghost">
                                View details
                            </a>
                            @if($register_url)
                                <a href="{{ $register_url }}" class="events-clean-btn events-clean-btn--gold">
                                    Register
                                </a>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="events-clean-empty">
                        <h3>No events found</h3>
                        <p>Check back later or try another filter.</p>
                    </div>
                @endforelse
            </div>

            @if($events->hasPages())
                <ul class="pagination-menu mt-40">
                    <li>{{ $events->appends(request()->query())->links() }}</li>
                </ul>
            @endif

            @if($featuredEvents->count())
                <div class="events-clean-featured-strip">
                    <h4>Featured events</h4>
                    <div class="events-clean-featured-list">
                        @foreach($featuredEvents as $fe)
                            <a href="{{ route('frontend.events.show', $fe->slug) }}" class="events-clean-featured-item">
                                <span>{{ $fe->title }}</span>
                                <small>{{ $fe->start_date->format('M d, Y') }}</small>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>

    @include('frontend.partials.events-tip')

    @include('frontend.partials.newsletter', [
        'newsletter_thumb' => $assetPath('images/about/hm1-img01.webp'),
    ])
@endsection

@push('styles')
<style>
    .events-clean-section {
        background: #fff;
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .events-clean-intro {
        margin: 0;
        color: #3f4654;
        font-size: 1.05rem;
        line-height: 1.6;
    }

    .events-clean-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 22px;
    }

    .events-clean-toolbar__filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .events-clean-chip {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #111827;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .events-clean-chip:hover,
    .events-clean-chip.is-active {
        background: #050505;
        border-color: #050505;
        color: #fff;
    }

    .events-clean-cats-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 28px;
        padding-bottom: 18px;
        border-bottom: 1px solid #eceff3;
    }

    .events-clean-cat {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 12px;
        border-radius: 8px;
        background: #f5f6f8;
        color: #1f2937;
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .events-clean-cat span {
        color: #4b5563;
        font-weight: 600;
    }

    .events-clean-cat.is-active,
    .events-clean-cat:hover {
        background: #fff8e6;
        color: #9a6b00;
    }

    .events-clean-cat.is-active span,
    .events-clean-cat:hover span {
        color: #9a6b00;
    }

    .events-clean-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0;
        row-gap: 0;
    }

    .events-clean-card {
        display: flex;
        flex-direction: column;
        padding: 0 24px 32px;
        border-right: 1px solid #eceff3;
        max-width: 100%;
    }

    .events-clean-card:nth-child(3n),
    .events-clean-card:last-child {
        border-right: 0;
    }

    .events-clean-card:nth-child(n+4) {
        padding-top: 32px;
        border-top: 1px solid #eceff3;
    }

    .events-clean-card:nth-child(3n+1) {
        padding-left: 0;
    }

    .events-clean-card:nth-child(3n) {
        padding-right: 0;
    }

    .events-clean-card__meta {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
    }

    .events-clean-card__person {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .events-clean-card__avatar {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        object-fit: contain;
        flex: 0 0 auto;
        background: #111;
        padding: 4px;
    }

    .events-clean-card__name {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 800;
        color: #0b0f19;
        line-height: 1.2;
    }

    .events-clean-card__role {
        margin: 3px 0 0;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #4b5563;
    }

    .events-clean-card__date {
        margin: 2px 0 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        font-weight: 650;
        color: #374151;
        white-space: nowrap;
    }

    .events-clean-card__date svg {
        width: 14px;
        height: 14px;
        color: #111;
    }

    .events-clean-card__media {
        display: block;
        overflow: hidden;
        clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
        background: #f3f4f6;
        aspect-ratio: 16 / 11;
        margin-bottom: 14px;
    }

    .events-clean-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

    .events-clean-card:hover .events-clean-card__media img {
        transform: scale(1.04);
    }

    .events-clean-card__title {
        margin: 0 0 6px;
        font-size: clamp(1.05rem, 1.35vw, 1.22rem);
        font-weight: 800;
        line-height: 1.28;
        color: #0b0f19;
    }

    .events-clean-card__title a {
        color: inherit;
        text-decoration: none;
    }

    .events-clean-card__title a:hover {
        color: #d69a00;
    }

    .events-clean-card__location {
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #4b5563;
    }

    .events-clean-card__location i {
        color: #d69a00;
        font-size: 0.75rem;
    }

    .events-clean-card__excerpt {
        margin: 0 0 14px;
        font-size: 0.88rem;
        line-height: 1.5;
        color: #3f4654;
        font-weight: 500;
    }

    .events-clean-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: auto;
        padding-top: 4px;
    }

    .events-clean-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 14px;
        border-radius: 9px;
        font-size: 0.82rem;
        font-weight: 700;
        text-decoration: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .events-clean-btn--ghost {
        border: 1px solid #d1d5db;
        background: #fff;
        color: #111827;
    }

    .events-clean-btn--ghost:hover {
        border-color: #050505;
        color: #050505;
    }

    .events-clean-btn--gold {
        border: 1px solid #d69a00;
        background: #d69a00;
        color: #111;
    }

    .events-clean-btn--gold:hover {
        background: #f6c343;
        border-color: #f6c343;
        color: #111;
    }

    .events-clean-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 48px 16px;
    }

    .events-clean-empty h3 {
        margin: 0 0 8px;
        font-weight: 800;
        color: #0b0f19;
    }

    .events-clean-empty p {
        margin: 0;
        color: #4b5563;
    }

    .events-clean-featured-strip {
        margin-top: 42px;
        padding-top: 28px;
        border-top: 1px solid #eceff3;
    }

    .events-clean-featured-strip h4 {
        margin: 0 0 14px;
        font-size: 1rem;
        font-weight: 800;
        color: #0b0f19;
    }

    .events-clean-featured-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    .events-clean-featured-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 16px;
        border: 1px solid #eceff3;
        border-radius: 12px;
        text-decoration: none;
        background: #fff;
        transition: border-color 0.15s ease;
    }

    .events-clean-featured-item:hover {
        border-color: #d69a00;
    }

    .events-clean-featured-item span {
        font-size: 0.9rem;
        font-weight: 750;
        color: #0b0f19;
    }

    .events-clean-featured-item small {
        font-size: 0.78rem;
        font-weight: 600;
        color: #4b5563;
    }

    @media (max-width: 991px) {
        .events-clean-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .events-clean-card {
            border-right: 1px solid #eceff3;
            padding-left: 16px;
            padding-right: 16px;
        }

        .events-clean-card:nth-child(3n) {
            border-right: 1px solid #eceff3;
            padding-right: 16px;
        }

        .events-clean-card:nth-child(2n) {
            border-right: 0;
            padding-right: 0;
        }

        .events-clean-card:nth-child(2n+1) {
            padding-left: 0;
        }

        .events-clean-card:nth-child(n+4) {
            border-top: 0;
            padding-top: 0;
        }

        .events-clean-card:nth-child(n+3) {
            padding-top: 28px;
            border-top: 1px solid #eceff3;
        }
    }

    @media (max-width: 640px) {
        .events-clean-grid {
            grid-template-columns: 1fr;
        }

        .events-clean-card,
        .events-clean-card:nth-child(2n),
        .events-clean-card:nth-child(3n),
        .events-clean-card:nth-child(2n+1) {
            border-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .events-clean-card:nth-child(n+2) {
            padding-top: 28px;
            border-top: 1px solid #eceff3;
        }
    }
</style>
@endpush