@extends('layouts.admin.master')

@section('content')
    <div class="container py-5">
        <!-- Event Header -->
        <div class="card shadow mb-5">
            <div class="card-body text-center p-4 p-md-5">
                <img src="{{ $event->files->first() ? asset('storage/' . $event->files->first()->file_path) : asset('frontend/event-banner.png') }}" class="img-fluid mb-4" style="max-width: 320px; height: 250px">
                <!-- Event Meta -->
                <div class="d-flex flex-column align-items-center mb-4">
                    <div class="d-flex align-items-center mb-3">
                        <img src="{{ asset('frontend/icons/location-icon.svg') }}" class="mr-2" style="width: 24px; height: 24px" alt="Venue">
                        <span class="font-weight-medium">{{ $event->venue ?? 'Venue TBD' }}</span>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <img src="{{ asset('frontend/icons/calendar-icon.svg') }}" class="mr-2" style="width: 24px; height: 24px" alt="Date">
                        <span class="font-weight-medium">{{ $event->date->format('M d, Y') }}</span>
                    </div>
                    @if($event->time)
                        <div class="d-flex align-items-center mb-3">
                            <img src="{{ asset('frontend/icons/calendar-icon.svg') }}" class="mr-2" style="width: 24px; height: 24px" alt="Time">
                            <span class="font-weight-medium">{{ $event->time->format('h:i A') }}</span>
                        </div>
                    @endif
                    @if($event->fee)
                        <div class="mb-3">
                            <span class="font-weight-medium">Fee: {{ number_format($event->fee, 0) }} BDT</span>
                        </div>
                    @endif

                    <button class="btn btn-success font-weight-bold mt-3">Pay Now</button>
                </div>

                <!-- Horizontal Line -->
                <hr class="my-4">
            </div>
        </div>

        <!-- Image/Video Gallery -->
        <div class="card shadow">
            <div class="card-body p-4 p-md-5">
                <h1 class="display-4 font-weight-bold text-dark text-center mb-5">Media Gallery</h1>

                <div class="row">
                    @foreach($event->files as $file)
                        <div class="col-md-4 mb-4">
                            <div class="card border">
                                <div class="card-body bg-light d-flex align-items-center justify-content-center" style="height: 250px">
                                    @if($file->file_type == 1)
                                        <!-- Image -->
                                        <img src="{{ asset('storage/' . $file->file_path) }}" class="img-fluid" alt="Event Image" style="max-height: 100%">
                                    @else
                                        <!-- Video -->
                                        <video controls class="w-100" style="max-height: 100%">
                                            <source src="{{ asset('storage/' . $file->file_path) }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                    @if($event->files->isEmpty())
                        <div class="col-12 text-center text-muted">
                            No media files available for this event.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection