@extends('layouts.app')

@section('title', $event->titulo)

@push('head')
<style>
  /* Carrusel multi-imagen (más grandes) */
  .multi-slide img{
    aspect-ratio: 1/1;
    object-fit: cover;
    height: 220px;
    cursor: zoom-in;                /* 👈 se nota que hay zoom */
    transition: transform .2s ease; /* leve feedback */
  }
  .multi-slide img:hover { transform: scale(1.02); }

  @media (min-width: 768px){ .multi-slide img{ height: 260px; } }
  @media (min-width: 992px){ .multi-slide img{ height: 300px; } }

  /* Miniaturas inferiores + hover */
  .mini-thumb img{
    aspect-ratio: 1/1;
    object-fit: cover;
    height: 70px;
    transition: transform .3s ease, box-shadow .3s ease, border .3s ease;
    border: 2px solid transparent;
    cursor: zoom-in;
  }
  @media (min-width: 768px){ .mini-thumb img{ height: 80px; } }
  @media (min-width: 992px){ .mini-thumb img{ height: 90px; } }
  .mini-thumb img:hover{
    transform: scale(1.05);
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.6);
  }

  /* Caja con leve fondo para legibilidad sobre fondos muy vivos */
  .backdrop-pad { background: rgba(0,0,0,.18); border-radius: 1rem; padding: 1rem; }

  /* ===== Overlay de zoom (sin modal) ===== */
  .zoom-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.9);
    display: none;                  /* oculto por defecto */
    align-items: center; justify-content: center;
    z-index: 1080;                  /* sobre el carrusel */
    padding: 2rem;
    backdrop-filter: blur(2px);
  }
  .zoom-overlay.show{ display: flex; }

  .zoom-image{
    max-width: 96vw; max-height: 90vh;
    object-fit: contain;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
    cursor: zoom-out;
    transition: transform .2s ease;
  }

  .zoom-close{
    position: absolute; top: 1rem; right: 1rem;
    font-size: 2rem; line-height: 1; width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.35); color: #fff;
    cursor: pointer;
  }
  .zoom-title{
    position: absolute; left: 1rem; bottom: 1rem;
    color: #ddd; font-size: .95rem;
    background: rgba(0,0,0,.35);
    padding: .35rem .6rem; border-radius: .5rem;
    max-width: 85vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
</style>
@endpush

@section('content')
  @php
    // Helper para resolver URLs públicas desde BD:
    // Acepta 'storage/event_images/...', 'event_images/...', o '/storage/event_images/...'
    $pubUrl = function (?string $p) {
        if (empty($p)) return null;
        $p = ltrim($p, '/');
        if (strpos($p, 'storage/') !== 0) $p = 'storage/' . $p;
        return asset($p);
    };

    // Fondo
    $bgStyle = $event->bg_color ? "--bg-fallback: {$event->bg_color};" : '';
    $wrapperStyle = $bgStyle;
    if (!empty($event->bg_image_path)) {
        $bgUrl = $pubUrl($event->bg_image_path);
        if ($bgUrl) $wrapperStyle .= "background: url('{$bgUrl}') center/cover no-repeat fixed;";
    } elseif (!empty($event->bg_color)) {
        $wrapperStyle .= "background: var(--bg-fallback);";
    }
  @endphp

  <div class="py-3" style="{{ $wrapperStyle }}">
    <div class="container backdrop-pad">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <h1 class="h4 m-0">{{ $event->titulo }}</h1>
        <div class="small text-muted">/p/{{ $event->slug }}</div>
      </div>

      @if (session('ok'))
        <div class="alert alert-success">{{ session('ok') }}</div>
      @endif

      @if($event->images->isEmpty())
        <div class="card card-surface p-4 rounded-4 mb-4">
          <p class="text-muted mb-0">Aún no hay imágenes subidas para este evento.</p>
        </div>
      @else
        {{-- Carrusel multi-imagen con autoplay (Bootstrap 5) --}}
        <div id="multiCarousel"
             class="carousel slide mb-3"
             data-bs-ride="carousel"
             data-bs-interval="2500"
             data-bs-pause="hover">
          <div class="carousel-inner multi-slide">
            @foreach($event->images->sortBy(['order','id'])->values()->chunk(4) as $chunkIndex => $chunk)
              <div class="carousel-item {{ $chunkIndex === 0 ? 'active' : '' }}">
                <div class="row g-2 justify-content-center">
                  @foreach($chunk as $img)
                    @php $imgSrc = $pubUrl($img->path); $title = $img->original_name ?? 'Imagen'; @endphp
                    <div class="col-6 col-md-3">
                      <img
                        src="{{ $imgSrc }}"
                        alt="{{ $title }}"
                        class="d-block w-100 rounded-3"
                        loading="lazy"
                        data-zoom-src="{{ $imgSrc }}"
                        data-zoom-title="{{ $title }}">
                    </div>
                  @endforeach
                </div>
              </div>
            @endforeach
          </div>

          {{-- Controles --}}
          <button class="carousel-control-prev" type="button" data-bs-target="#multiCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Anterior</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#multiCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Siguiente</span>
          </button>
        </div>

        {{-- Tira de miniaturas clicables --}}
        <div class="row g-2 mb-4">
          @foreach($event->images->values() as $i => $thumb)
            @php $thumbSrc = $pubUrl($thumb->path); @endphp
            <div class="col-3 col-sm-2 col-md-2 col-lg-2 mini-thumb">
              <img
                src="{{ $thumbSrc }}"
                alt="Miniatura {{ $i+1 }}"
                class="w-100 rounded-2"
                loading="lazy"
                data-zoom-src="{{ $thumbSrc }}"
                data-zoom-title="Imagen {{ $i+1 }}">
            </div>
          @endforeach
        </div>
      @endif

      {{-- ===================== Subir imágenes (SIN LOGIN) ===================== --}}
      @if ($event->guest_upload_enabled)
        <div class="card card-surface rounded-4 p-4 mt-3">
          <h3 class="h5 mb-3">Sube tus fotos del evento 📸</h3>
          <form method="POST" action="{{ route('events.images.store', $event) }}" enctype="multipart/form-data">
            @csrf
            <input type="file" name="images[]" multiple accept="image/*" class="form-control mb-2" required>
            <button class="btn btn-success">Subir</button>
          </form>
          @error('images') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
          @error('images.*') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
          <small class="text-muted d-block mt-2">
            Formatos permitidos: jpg, jpeg, png, webp. Máx 8MB por archivo.
          </small>
        </div>
      @else
        <div class="alert alert-info mt-3">
          El organizador aún no ha habilitado la subida de imágenes para invitados.
        </div>
      @endif
      {{-- ===================== FIN Subir imágenes ===================== --}}

    </div>
  </div>

  {{-- 🔎 Overlay de zoom (sin modal) --}}
  <div id="zoomOverlay" class="zoom-overlay" aria-hidden="true">
    <button type="button" class="zoom-close" aria-label="Cerrar">&times;</button>
    <img id="zoomImage" src="" alt="Imagen ampliada" class="zoom-image">
    <div id="zoomTitle" class="zoom-title"></div>
  </div>
@endsection

@push('scripts')
<script>
  // Autoplay de Bootstrap Carousel
  document.addEventListener('DOMContentLoaded', function() {
    const el = document.querySelector('#multiCarousel');
    if (el && window.bootstrap) {
      new bootstrap.Carousel(el, {
        interval: 2500,
        ride: 'carousel',
        pause: 'hover',
        wrap: true
      });
    }

    // === Zoom-in-place (overlay) ===
    const overlay   = document.getElementById('zoomOverlay');
    const zoomImg   = document.getElementById('zoomImage');
    const zoomTitle = document.getElementById('zoomTitle');
    const btnClose  = overlay.querySelector('.zoom-close');

    function openZoom(src, title){
      zoomImg.src = src;
      zoomTitle.textContent = title;
      overlay.classList.add('show');
      overlay.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
    }

    function closeZoom(){
      overlay.classList.remove('show');
      overlay.setAttribute('aria-hidden', 'true');
      zoomImg.src = '';
      document.body.style.overflow = '';
    }

    // Delegación: click en cualquier imagen con data-zoom-src
    document.body.addEventListener('click', function(e){
      const target = e.target;
      if (target && target.matches('img[data-zoom-src]')) {
        const src = target.getAttribute('data-zoom-src');
        const title = target.getAttribute('data-zoom-title') || 'Vista previa';
        openZoom(src, title);
      }
    });

    // Cerrar con botón, fondo o tecla Esc
    btnClose.addEventListener('click', closeZoom);
    overlay.addEventListener('click', function(e){
      if (e.target === overlay) closeZoom();
    });
    document.addEventListener('keydown', function(e){
      if (e.key === 'Escape' && overlay.classList.contains('show')) closeZoom();
    });
  });
</script>
@endpush