@props(['event'])

<div class="col-xl-4 col-lg-6 col-md-6 col-12 mb-4" data-aos="fade-up">
    <div class="gridarea__wraper h-100 d-flex flex-column justify-content-between shadow-sm rounded-4 overflow-hidden border">
        <div class="gridarea__img position-relative">
            <a href="{{ route('events.show', $event->slug) }}">
                <img loading="lazy" src="{{ asset($event->featured_image ?? 'img/program/ai_1.jpg') }}" alt="{{ $event->title }}" class="w-100" style="height: 220px; object-fit: cover;">
            </a>
            <div class="gridarea__small__button position-absolute top-0 start-0 m-3">
                <span class="badge bg-primary text-uppercase px-3 py-2">{{ $event->event_type }}</span>
            </div>
            <div class="position-absolute top-0 end-0 m-3">
                <span class="badge {{ $event->mode === 'online' ? 'bg-info' : ($event->mode === 'offline' ? 'bg-success' : 'bg-warning') }} text-uppercase px-2 py-1">
                    <i class="icofont-{{ $event->mode === 'online' ? 'globe' : 'location-pin' }}"></i> {{ $event->mode }}
                </span>
            </div>
        </div>
        <div class="gridarea__content p-4 d-flex flex-column flex-grow-1 justify-content-between">
            <div>
                <div class="gridarea__list mb-2 text-muted small d-flex justify-content-between">
                    <span><i class="icofont-calendar text-primary me-1"></i> {{ $event->start_date->format('M d, Y') }}</span>
                    <span><i class="icofont-clock-time text-primary me-1"></i> {{ $event->start_date->format('h:i A') }}</span>
                </div>
                <h5 class="fw-bold mb-2">
                    <a href="{{ route('events.show', $event->slug) }}" class="text-dark text-decoration-none hover-primary">
                        {{ Str::limit($event->title, 65) }}
                    </a>
                </h5>
                <p class="text-muted small mb-3">
                    {{ Str::limit($event->short_description, 100) }}
                </p>
                @if($event->speaker_name)
                    <div class="small text-muted mb-3">
                        <i class="icofont-user text-primary me-1"></i> <strong>{{ $event->speaker_name }}</strong>
                    </div>
                @endif
            </div>

            <div class="pt-3 border-top d-flex align-items-center justify-content-between">
                <div>
                    @if($event->registration_fee > 0)
                        <span class="fs-5 fw-bold text-primary">₹{{ number_format($event->registration_fee, 2) }}</span>
                    @else
                        <span class="badge bg-success-subtle text-success fs-6 fw-bold px-2 py-1">FREE</span>
                    @endif
                </div>
                <div>
                    <a href="{{ route('events.show', $event->slug) }}" class="default__button btn-sm">Details &amp; Register</a>
                </div>
            </div>
        </div>
    </div>
</div>