@extends('admin.layouts.app')
@section('content')
<div class="row">
    @foreach ($events as $event)
    <div class="col-md-4 mb-4">
        <div class="card" style="height: 100%; transition: transform 0.5s ease-in-out;" onmouseover="this.style.boxShadow='5px 5px 15px rgba(0,0,0,0.3)';" onmouseout="this.style.boxShadow='none';">
            <img src="{{ asset($event->image->path ?? 'images/default-event.jpg') }}" class="card-img-top" alt="{{ $event->name }}" style="height: 200px; object-fit: cover; transition: transform 0.5s ease-in-out;" onmouseover="this.style.transform='scale(1.05)';" onmouseout="this.style.transform='scale(1)';">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">{{ $event->name }}</h5>
                <p class="card-text flex-grow-1">{{ $event->description }}</p>
                <a href="{{ route('promoter.events.show', $event->id) }}" class="btn btn-primary mt-auto">View Details</a>
            </div>
        </div>
    </div>
    @endforeach
    <div class="col-12 text-end">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                {{ $events->links('vendor.pagination.bootstrap-4') }}
            </ul>
        </nav>
    </div>
</div>


@endsection