@extends('frontend.layouts.app')

@section('title')
    {{ $event->title }}
@endsection

@push('style')
    <style>
        /* Main Featured Image */
        .event-detail-image {
            width: 100%;
            height: 600px;
            /* হাইট একটু এডজাস্ট করা হয়েছে */
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .event-meta {
            font-size: 15px;
            color: #6c757d;
            font-weight: 500;
        }

        .event-description p {
            line-height: 1.8rem;
            font-size: 17px;
            color: #333;
            margin-bottom: 20px;
        }

        /* Gallery Styles */
        .gallery-img-container {
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
            height: 250px;
            /* গ্যালারি ইমেজের ফিক্সড হাইট */
        }

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

        .gallery-img-container:hover .gallery-img {
            transform: scale(1.05);
            /* হোভার ইফেক্ট */
        }

        .share-icons i {
            font-size: 22px;
            margin-right: 15px;
            cursor: pointer;
            transition: 0.3s;
        }

        .share-icons i:hover {
            color: #0d6efd;
            transform: translateY(-3px);
        }
    </style>
@endpush

@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => [['name' => 'News & Events', 'url' => '#'], ['name' => $event->title, 'url' => null]],
    ])

    <div class="container-fluid my-5">

        <div class="row justify-content-center">
            <div class="col-lg-10 col-12">

                @if (isset($event->images) && is_array($event->images) && count($event->images) > 0)
                    <img src="{{ asset($event->images[0]) }}" class="event-detail-image mb-4" alt="{{ $event->title }}">
                @endif

                <h2 class="text-primary fw-bold mb-3">{{ $event->title }}</h2>

                <div class="event-meta mb-4 d-flex align-items-center">
                    <i class="ri-calendar-2-line me-2 text-primary"></i>
                    {{ $event->created_at->format('d M, Y') }}
                </div>

                <div class="event-description mb-5">
                    {!! $event->description !!}
                </div>

                @if (isset($event->images) && is_array($event->images) && count($event->images) > 1)
                    <div class="row mt-5">
                        <div class="col-12 mb-3">
                            <h4 class="fw-bold border-bottom pb-2">Event Gallery</h4>
                        </div>

                        @foreach ($event->images as $index => $img)
                            @if ($index > 0)
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <div class="gallery-img-container shadow-sm">
                                        <img src="{{ asset($img) }}" class="gallery-img glightbox">
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                @endif

            </div>
        </div>

    </div>
@endsection

@push('script')
@endpush