@php
  use Illuminate\Support\Facades\Auth;
  use Illuminate\Support\Facades\Storage;
  use Carbon\Carbon;
@endphp

@extends('layouts/guest')

@section('title', 'Evento - '.$evento->nome)

@section('page-style')
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
@endsection

@section('app-css-extra')
@vite(['resources/css/guest-client.css'])
@endsection

@section('pageTitle')
<div class="d-flex flex-column align-items-center">
  <h2 class="mb-1 fw-bold">
    <i class="bx bx-calendar-check"></i>
    {{ $evento->nome }}
  </h2>
  <small class="text-muted">Scheda evento</small>
</div>
@endsection

@section('content')
<style>
  .evento-cover {
    width: 100%;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    position: relative;
    margin-bottom: -50px;
    background: linear-gradient(120deg, #d1d7e6 0%, #b5cae6 100%);
  }
  .evento-cover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .evento-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .evento-cover-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #607080;
    font-size: 0.95rem;
  }
  .evento-cover .carousel {
    height: 100%;
  }
  .evento-cover .carousel-inner {
    height: 100%;
  }
  .evento-cover .carousel-item {
    height: 100%;
  }
  .evento-cover .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .evento-banner {
    margin-top: 60px;
    width: 100%;
    background: #fff;
    border-radius: 0 0 1rem 1rem;
    padding: 2rem 2rem 1.5rem 2rem;
    box-shadow: 0 4px 30px 0 rgba(44, 62, 80, 0.10);
    min-height: 240px;
  }
  .evento-media-zone {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(226, 230, 239, 0.95);
  }
  .evento-poster-card {
    border: 1px solid var(--fest-border, #e2e6ef);
    border-radius: 0.75rem;
    background: linear-gradient(165deg, #fafbfd 0%, #f0f2f8 100%);
    padding: 0.65rem;
    box-shadow: 0 2px 14px rgba(21, 38, 92, 0.07);
  }
  .evento-poster-card img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(72vh, 560px);
    object-fit: contain;
    border-radius: 0.5rem;
    background: #fff;
  }
  .evento-gallery-grid a {
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 4px rgba(21, 38, 92, 0.08);
  }
  .evento-gallery-grid a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(21, 38, 92, 0.12);
  }
  .evento-gallery-grid .ratio {
    background: #e8ebf2;
  }
  .evento-gallery-grid img {
    object-fit: cover;
  }
  @media (max-width: 768px) {
    .evento-cover {
      height: 180px;
    }
    .evento-banner {
      padding: 1.2rem 0.5rem 1rem 0.5rem;
    }
    .evento-poster-card img {
      max-height: 65vh;
    }
  }
</style>

@include('_partials.status')

<div class="guest-fest guest-fest-bg">
<div class="row justify-content-center">
  <div class="col-xxl-7 col-lg-10 mt-2 mb-4">
    <div class="card p-0 border-0 shadow-sm" style="border-radius: 1rem; overflow: hidden;">

      <div class="evento-cover">
        <div class="evento-cover-media">
          @if(count($galleriaItems) > 0)
            <div id="eventoCarousel" class="carousel carousel-dark slide carousel-fade h-100" data-bs-ride="carousel">
              <div class="carousel-indicators">
                @foreach($galleriaItems as $key => $foto)
                  <button type="button" data-bs-target="#eventoCarousel" data-bs-slide-to="{{ $key }}"
                    class="{{ $key === 0 ? 'active' : '' }}"
                    @if($key === 0) aria-current="true" @endif
                    aria-label="Slide {{ $key+1 }}"></button>
                @endforeach
              </div>
              <div class="carousel-inner h-100">
                @foreach($galleriaItems as $key => $foto)
                  <div class="carousel-item h-100{{ $key === 0 ? ' active' : '' }}">
                    <img class="d-block w-100" src="{{ Storage::disk('eventi')->url($foto['path']) }}" alt="Slide {{ $key+1 }}">
                  </div>
                @endforeach
              </div>
              <a class="carousel-control-prev" href="#eventoCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Precedente</span>
              </a>
              <a class="carousel-control-next" href="#eventoCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Successivo</span>
              </a>
            </div>
          @elseif($evento->copertina)
            <img
              class="evento-cover-image"
              src="{{ Storage::disk('eventi')->url($evento->copertina) }}"
              alt="Copertina {{ $evento->nome }}"
            >
          @else
            <div class="evento-cover-placeholder bg-light">
              <span><i class="bx bx-image me-1"></i> Nessuna copertina</span>
            </div>
          @endif
        </div>
      </div>

      <div class="evento-banner">
        <h2 class="guest-fest-page-title text-center mb-2" style="font-size: clamp(1.25rem, 3vw, 1.65rem);">
          {{ $evento->nome }}
        </h2>
        <div class="d-flex flex-wrap justify-content-center align-items-center gap-3 small mb-3 text-secondary">

          @php
            $dataInizio = $evento->data_inizio ? Carbon::parse($evento->data_inizio) : null;
            $dataFine   = $evento->data_fine   ? Carbon::parse($evento->data_fine) : null;

            $sameDay = $dataInizio && $dataFine && $dataInizio->isSameDay($dataFine);
            $allDayInizio = $dataInizio && $dataInizio->format('H:i') === '00:00';
            $allDayFine = $dataFine && $dataFine->format('H:i') === '00:00';
            $isAllDay = $allDayInizio && ($sameDay ? $allDayFine : true);
          @endphp

          @if($dataInizio)
            @if($sameDay)
              <div>
                <i class="bx bx-calendar fs-5 align-middle" style="color: #ffbc42;"></i>
                <span class="fw-semibold">Giorno:</span>
                <span>{{ $dataInizio->format('d/m/Y') }}</span>
                @if(!$isAllDay)
                  <span class="mx-2">
                    <i class="bx bx-time fs-5 align-middle" style="color:#8257e5;"></i>
                    <span>
                      {{ $dataInizio->format('H:i') }} - {{ $dataFine ? $dataFine->format('H:i') : $dataInizio->format('H:i') }}
                    </span>
                  </span>
                @endif
              </div>
            @else
              @if($isAllDay)
                <div>
                  <i class="bx bx-calendar fs-5 align-middle" style="color: #ffbc42;"></i>
                  <span class="fw-semibold">Dal</span>
                  <span>{{ $dataInizio->format('d/m/Y') }}</span>
                  <span class="fw-semibold">al</span>
                  <span>{{ $dataFine ? $dataFine->format('d/m/Y') : '-' }}</span>
                </div>
              @else
                <div>
                  <i class="bx bx-calendar fs-5 align-middle" style="color: #ffbc42;"></i>
                  <span class="fw-semibold">Inizio:</span>
                  <span>{{ $dataInizio->format('d/m/Y') }}</span>
                  <i class="bx bx-time fs-5 align-middle ms-1" style="color:#8257e5;"></i>
                  <span>{{ $dataInizio->format('H:i') }}</span>
                </div>
                @if($dataFine)
                  <div>
                    <i class="bx bx-calendar-minus fs-5 align-middle" style="color: #2ec4b6;"></i>
                    <span class="fw-semibold">Fine:</span>
                    <span>{{ $dataFine->format('d/m/Y') }}</span>
                    <i class="bx bx-time fs-5 align-middle ms-1" style="color:#8257e5;"></i>
                    <span>{{ $dataFine->format('H:i') }}</span>
                  </div>
                @endif
              @endif
            @endif
          @endif

          <div>
            <i class="bx bx-map fs-5 align-middle" style="color: #54428e;"></i>
            <span class="fw-semibold">Luogo:</span>
            <span>{{ $evento->luogo ?? '-' }}</span>
          </div>
          <div>
            <i class="bx bx-user-plus fs-5 align-middle" style="color: #f45b69;"></i>
            <span class="fw-semibold">Posti:</span>
            @if($evento->posti > 0)
              <span class="text-success">{{ $evento->posti }} posti</span>
            @else
              <span class="text-danger">Illimitati</span>
            @endif
          </div>
        </div>

        @if($evento->prezzo)
          <div class="text-center mb-3">
            <span class="px-3 py-1 border border-primary rounded-pill bg-light text-primary fw-semibold d-inline-flex align-items-center gap-1 shadow-sm">
              <i class="bx bx-euro"></i>
              @if($evento->prezzo_fisso)
                €{{ number_format($evento->prezzo, 2, ',', '.') }}
              @else
                €{{ number_format($evento->prezzo, 2, ',', '.') }}
                <span class="text-muted ms-1 fw-light" style="font-size:0.95em;">variabile</span>
              @endif
            </span>
          </div>
        @endif

        @if($evento->descrizione)
          <p class="mt-2 px-2 text-dark text-start" style="font-size: 1.06rem; line-height: 1.55;">
            {!! nl2br(e($evento->descrizione)) !!}
          </p>
        @endif

        <div class="text-center mb-2 mt-3">
          <a href="{{ route('prenotazone.prenota_form', ['evento_id' => $evento->id]) }}" class="btn btn-lg btn-primary d-inline-flex align-items-center gap-2 shadow-sm" style="border-radius:2rem;">
            <i class="bx bx-calendar-plus fs-5"></i> Prenota ora
          </a>
        </div>

        @php
          $haLocandina = (bool) $evento->immagine;
          $nGalleria = count($galleriaItems);
          $haGalleria = $nGalleria > 0;
        @endphp

        @if($haLocandina || $haGalleria)
          <div class="evento-media-zone">
            @if($haLocandina && $haGalleria)
              <div class="row g-4 align-items-start">
                <div class="col-lg-4">
                  <h3 class="guest-fest-subsection-title mb-3">Locandina</h3>
                  <div class="evento-poster-card">
                    <img
                      src="{{ Storage::disk('eventi')->url($evento->immagine) }}"
                      alt="Locandina {{ $evento->nome }}"
                      loading="lazy"
                    >
                  </div>
                </div>
                <div class="col-lg-8">
                  <h3 class="guest-fest-subsection-title mb-3">Galleria</h3>
                  <p class="small text-muted mb-3">Tocca o clicca un'immagine per aprirla a tutto schermo. In cima trovi le stesse foto nel carousel.</p>
                  <div class="row row-cols-2 row-cols-md-3 g-3 evento-gallery-grid">
                    @foreach($galleriaItems as $key => $foto)
                      @php $src = Storage::disk('eventi')->url($foto['path']); @endphp
                      <div class="col">
                        <a href="{{ $src }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none" title="{{ $foto['nome'] ?? 'Foto '.($key + 1) }}">
                          <div class="ratio ratio-4x3">
                            <img src="{{ $src }}" alt="{{ $foto['nome'] ?? 'Foto '.($key + 1) }}" class="w-100 h-100" loading="lazy">
                          </div>
                        </a>
                      </div>
                    @endforeach
                  </div>
                </div>
              </div>
            @elseif($haLocandina)
              <h3 class="guest-fest-subsection-title mb-3">Locandina</h3>
              <div class="mx-auto evento-poster-card" style="max-width: 420px;">
                <img
                  src="{{ Storage::disk('eventi')->url($evento->immagine) }}"
                  alt="Locandina {{ $evento->nome }}"
                  loading="lazy"
                >
              </div>
            @else
              <h3 class="guest-fest-subsection-title mb-3">Galleria</h3>
              <p class="small text-muted mb-3">Tocca o clicca un'immagine per aprirla a tutto schermo. In cima trovi le stesse foto nel carousel.</p>
              <div class="row row-cols-2 row-cols-md-3 g-3 evento-gallery-grid">
                @foreach($galleriaItems as $key => $foto)
                  @php $src = Storage::disk('eventi')->url($foto['path']); @endphp
                  <div class="col">
                    <a href="{{ $src }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none" title="{{ $foto['nome'] ?? 'Foto '.($key + 1) }}">
                      <div class="ratio ratio-4x3">
                        <img src="{{ $src }}" alt="{{ $foto['nome'] ?? 'Foto '.($key + 1) }}" class="w-100 h-100" loading="lazy">
                      </div>
                    </a>
                  </div>
                @endforeach
              </div>
            @endif

            @auth
              @if(Auth::user()->can('edit-evento'))
                <div class="text-center mt-4 pt-2">
                  <a href="{{ route('evento.gallery.edit', ['evento_id' => $evento->id]) }}" class="btn btn-sm btn-outline-primary">
                    <i class="bx bx-images"></i> Gestisci galleria
                  </a>
                </div>
              @endif
            @endauth
          </div>
        @else
          <div class="evento-media-zone text-center py-3 text-muted border rounded bg-light bg-opacity-50">
            <p class="mb-0 small">Nessuna locandina o galleria foto per questo evento.</p>
            @auth
              @if(Auth::user()->can('edit-evento'))
                <div class="mt-3">
                  <a href="{{ route('evento.gallery.edit', ['evento_id' => $evento->id]) }}" class="btn btn-sm btn-primary">
                    <i class="bx bx-plus"></i> Aggiungi foto alla galleria
                  </a>
                </div>
              @endif
            @endauth
          </div>
        @endif

      </div>
    </div>
  </div>
</div>
</div>

@endsection
