@extends('layouts.app')

@section('title', 'Mi Dashboard')

@section('content')
  <h1 class="mb-4">Panel de control</h1>

  @if($lastEvent)
    <div class="alert alert-success">
      <strong>Último evento:</strong> {{ $lastEvent->titulo }}
    </div>

    <div class="d-flex flex-wrap gap-2 mb-4">
      <a href="{{ route('events.edit', $lastEvent) }}" class="btn btn-accent btn-lg">
        Subir imágenes a "{{ \Illuminate\Support\Str::limit($lastEvent->titulo, 30) }}"
      </a>

      <a href="{{ route('events.index') }}" class="btn btn-outline-light btn-lg">
        Ver todos mis eventos
      </a>

      <a href="{{ route('events.create') }}" class="btn btn-outline-light btn-lg">
        Crear nuevo evento
      </a>
    </div>
  @else
    <div class="alert alert-warning">
      Aún no tienes eventos creados.
    </div>

    <a href="{{ route('events.create') }}" class="btn btn-accent btn-lg">
      Crear mi primer evento
    </a>
  @endif

  @if($events->count() > 0)
    <h2 class="h4 mt-5 mb-3">Mis eventos</h2>
    <div class="row g-3">
      @foreach($events as $event)
        <div class="col-6 col-md-4 col-lg-3">
          <div class="card card-surface rounded-4 overflow-hidden h-100">
            <div class="card-body">
              <h5 class="card-title text-truncate">{{ $event->titulo }}</h5>
              <p class="text-muted small mb-3">Slug: {{ $event->slug }}</p>
              <div class="d-flex gap-2">
                <a href="{{ route('events.edit', $event) }}" class="btn btn-sm btn-accent flex-fill">Editar</a>
                <a href="{{ route('preview.form', $event->slug) }}" class="btn btn-sm btn-outline-light flex-fill">Preview</a>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  @endif
@endsection