@extends('layouts.app')

@section('title', 'Mis eventos')

@section('content')
<div class="container py-4">

  {{-- Header + CTA --}}
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <h1 class="h4 mb-1">Mis eventos</h1>
      <p class="text-muted mb-0">
        Administra tus galerías y comparte el enlace de preview con tus invitados.
      </p>
    </div>

    @if (Route::has('events.create'))
      <a href="{{ route('events.create') }}" class="btn btn-accent mt-2 mt-md-0">
        + Crear nuevo evento
      </a>
    @endif
  </div>

  @if($events->isEmpty())
    {{-- Estado vacío --}}
    <div class="card card-surface rounded-4 border-0 text-center p-4">
      <h2 class="h5 mb-2">Todavía no tienes eventos</h2>
      <p class="text-muted mb-3">
        Crea tu primer evento y comienza a reunir todas las fotos en una sola galería.
      </p>
      @if (Route::has('events.create'))
        <a href="{{ route('events.create') }}" class="btn btn-accent">
          Crear mi primer evento
        </a>
      @endif
    </div>
  @else
    {{-- Grid de eventos --}}
    <div class="row g-3">
      @foreach($events as $event)
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card card-surface h-100 rounded-4 border-0">
            <div class="card-body d-flex flex-column">

              {{-- Título --}}
              <h2 class="h6 mb-1 text-truncate" title="{{ $event->titulo }}">
                {{ $event->titulo }}
              </h2>

              {{-- Slug / enlace --}}
              <div class="small text-muted mb-1">
                Preview: <code class="text-light">/p/{{ $event->slug }}</code>
              </div>

              {{-- Fecha --}}
              <div class="small text-muted mb-3">
                Creado el {{ $event->created_at->format('d/m/Y') }}
              </div>

              <div class="mt-auto d-flex flex-wrap gap-2">
                {{-- Botón ver preview --}}
                @if (Route::has('preview.form'))
                  <a href="{{ route('preview.form', $event->slug) }}"
                     target="_blank"
                     class="btn btn-sm btn-outline-light flex-fill">
                    Ver preview
                  </a>
                @else
                  <a href="{{ url('/p/'.$event->slug) }}"
                     target="_blank"
                     class="btn btn-sm btn-outline-light flex-fill">
                    Ver preview
                  </a>
                @endif

                {{-- Botón editar --}}
                @if (Route::has('events.edit'))
                  <a href="{{ route('events.edit', $event) }}"
                     class="btn btn-sm btn-accent flex-fill">
                    Editar
                  </a>
                @endif
              </div>

            </div>
          </div>
        </div>
      @endforeach
    </div>

    {{-- Paginación (si la usas) --}}
    @if(method_exists($events, 'links'))
      <div class="mt-4">
        {{ $events->links() }}
      </div>
    @endif

  @endif
</div>
@endsection