@extends('layouts.horizontalLayout')

@section('title', $event->event_name ?? 'Event Details')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
    .event-photo-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 8px;
        background: #f1f1f1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        transition: box-shadow .2s;
        display: block;
    }
    .event-photo-img:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }
    .photo-name {
        word-break: break-all;
        font-size: 15px;
        margin-top: 8px;
        color: #444;
        font-weight: 500;
        text-align: center;
    }
    .gallery-item {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap">
    <h4 class="fw-bold mb-0">{{ $event->event_name }}
      <span class="ms-1" data-bs-toggle="tooltip" title="This is your event detail page.">
        <i class="bx bx-info-circle"></i>
      </span>
    </h4>
    <div class="d-flex align-items-center flex-wrap gap-2">
      <a href="{{ route('my-events') }}" class="btn btn-outline-secondary">
        <i class="fa-solid fa-arrow-left"></i> Back to My Events
      </a>
      <a href="{{ route('events.upload.show', $event->id) }}" class="btn btn-dark">
        <i class="fa-solid fa-upload me-1"></i> Upload Photos
      </a>
      <a href="#" class="btn btn-outline-primary" title="Share Event">
        <i class="fa-solid fa-share-nodes"></i>
      </a>
      <a href="#" class="btn btn-outline-secondary" title="Settings">
        <i class="fa-solid fa-gear"></i>
      </a>
      <a href="#" class="btn btn-outline-danger" title="Delete Event">
        <i class="fa-solid fa-trash"></i>
      </a>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col-md-5 mb-3 mb-md-0">
      @if($event->event_cover)
        <img src="{{ asset('storage/event_covers/' . basename($event->event_cover)) }}" class="img-fluid rounded shadow-sm" alt="{{ $event->event_name }}">
      @else
        <img src="{{ asset('assets/img/illustrations/page-misc-error.png') }}" class="img-fluid rounded shadow-sm" alt="No Cover">
      @endif
    </div>
    <div class="col-md-7">
      <div class="mb-3">
        <span class="badge {{ $event->is_public ? 'bg-success' : 'bg-secondary' }}">
          {{ $event->is_public ? 'Published' : 'Unpublished' }}
        </span>
      </div>
      <div class="mb-2">
        <i class="fa-solid fa-calendar-days me-1 text-primary"></i>
        <strong>Date:</strong>
        {{ \Carbon\Carbon::parse($event->event_date)->format('l, F d, Y') }}
      </div>
      <div class="mb-2">
        <i class="fa-solid fa-location-dot me-1 text-primary"></i>
        <strong>Location:</strong>
        {{ $event->event_location ?? 'N/A' }}
      </div>
      <div class="mb-2">
        <i class="fa-solid fa-user me-1 text-primary"></i>
        <strong>Created By:</strong>
        {{ $event->user->name ?? 'You' }}
      </div>
      <div class="mb-2">
        <i class="fa-solid fa-image me-1 text-primary"></i>
        <strong>Photos:</strong> {{ isset($photos) ? $photos->count() : 0 }}
      </div>
      <div class="mt-3">
        <h6 class="fw-bold">Details</h6>
        <p class="mb-0">
          {{ $event->event_details ?? 'No description available.' }}
        </p>
      </div>
    </div>
  </div>

  <hr>

  <div>
    <h5 class="fw-bold mb-3">Photos & Media</h5>
    @if(isset($photos) && $photos->isEmpty())
      <div class="alert alert-info">
        No photos have been uploaded yet. Start by uploading some memories!
      </div>
    @elseif(isset($photos))
      <div class="row">
        @foreach($photos as $photo)
          @php
              try {
                  $photoUrl = Storage::disk('s3')->temporaryUrl($photo->s3_path, now()->addMinutes(60));
              } catch (\Exception $e) {
                  $photoUrl = Storage::disk('s3')->url($photo->s3_path);
              }
              $photoName = basename($photo->s3_path);
          @endphp
          <div class="col-12 col-sm-6 col-md-4 col-lg-3 gallery-item">
            <img
                src="{{ $photoUrl }}"
                class="event-photo-img"
                alt="{{ $photoName }}"
                loading="lazy"
            >
            <div class="photo-name">{{ $photoName }}</div>
          </div>
        @endforeach
      </div>
    @endif
  </div>

</div>
@endsection