@php
$events = App\Models\Event::where('status','active')->get();
@endphp

@push('styles')

<style>
    /* Custom Styles */
    .event-item {
        transition: all 0.3s ease;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        margin: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .event-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

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

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

    .overlay {
        transition: all 0.3s ease;
    }

    .hover-lift {
        transition: all 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .hover-primary:hover {
        color: var(--bs-primary) !important;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Empty State */
    .empty-state {
        padding: 60px 20px;
        background: #f8f9fa;
        border-radius: 15px;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .display-2 {
            font-size: 2.5rem;
        }

        .event-item .h4 {
            font-size: 1.2rem;
        }
    }

    /* Carousel Navigation Buttons */
    .carousel-prev-btn,
    .carousel-next-btn {
        transition: all 0.3s ease;
    }

    .carousel-prev-btn:hover,
    .carousel-next-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    /* Owl Carousel Custom Styles */
    .owl-carousel .owl-item {
        padding: 10px 0;
    }

    /* Ensure all cards in carousel have equal height */
    .owl-carousel .owl-stage {
        display: flex;
    }

    .owl-carousel .owl-item {
        display: flex;
        height: auto;
    }

    .owl-carousel .owl-item>div {
        height: 100%;
    }

    /* Fix for event details section */
    .border.border-top-0.rounded-bottom.p-4.bg-white {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
</style>

@endpush

<div class="container-fluid events py-3">
    <div class="container-fluid py-3">
        <!-- Section Header -->
        <div class="pb-5">
            <div class="text-center">
                <h4 class="text-primary fw-bold text-uppercase mb-2" style="letter-spacing: 2px;">Events</h4>
                <h1 class="display-4 fw-bold mb-0">Program <span class="text-primary">Events</span></h1>
            </div>
        </div>

        <!-- Events Carousel -->
        @if($events->count() > 0)
        <div class="owl-carousel owl-carousel-2 carousel-item-4 position-relative">
            @foreach ($events as $event)
            <div class="event-item rounded overflow-hidden wow fadeInUp h-100" data-wow-delay="0.1s">
                <div class="position-relative overflow-hidden">
                    <!-- Event Image -->
                    <img src="{{ asset($event->image) }}" class="img-fluid w-100 event-image" alt="{{ $event->name }}" style="height: 250px; object-fit: cover;">

                    <!-- Date Badge -->
                    <div class="bg-primary text-white fw-bold rounded d-inline-block position-absolute p-2 shadow" style="top: 15px; right: 15px; z-index: 1;">
                        <div class="text-center">
                            <div class="small">{{ $event->time }}</div>

                        </div>
                    </div>

                    <!-- Event Meta Info -->
                    <div class="d-flex justify-content-between bg-white px-3 py-2 w-100 position-absolute"
                        style="bottom: 0; left: 0; background: rgba(255,255,255,0.95) !important;">

                        <a href="#" class="text-dark text-decoration-none small">
                            <i class="fas fa-map-marker-alt text-primary me-1"></i> {{ Str::limit($event->venue, 30) }}
                        </a>
                    </div>
                </div>

                <!-- Event Details -->
                <div class="border border-top-0 rounded-bottom p-4 bg-white d-flex flex-column" style="min-height: 280px;">
                    <div class="mb-2">
                        @if($event->date)
                        <span class="badge bg-light text-dark me-2">
                            <i class="fas fa-calendar-alt text-primary me-1"></i> {{ $event->date }}
                        </span>
                        @endif
                        @if($event->category)
                        <span class="badge bg-primary bg-opacity-10 text-primary">
                            {{ $event->category }}
                        </span>
                        @endif
                    </div>

                    <a href="#" class="h4 mb-3 d-block text-dark text-decoration-none hover-primary" style="min-height: 60px;">
                        {{ Str::limit($event->name, 50) }}
                    </a>

                    <p class="text-muted mb-3 line-clamp-3 flex-grow-1" style="min-height: 72px;">
                        {{ safeTruncate($event->short_desc, 100) }}
                    </p>

                    <div class="d-flex justify-content-between align-items-center mt-auto">
                        <a class="btn btn-outline-primary rounded-pill py-2 px-4 hover-lift" href="{{route('event.details',$event->slug)}}">
                            Read More <i class="fas fa-chevron-right ms-1 small"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        @else
        <div class="text-center py-5">
            <div class="empty-state">
                <i class="fas fa-calendar-times fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No Events Right Now</h4>
                <p class="text-muted">Check back later for upcoming events!</p>
                <a href="#" class="btn btn-primary rounded-pill mt-2">View Past Events</a>
            </div>
        </div>
        @endif

    </div>
</div>