@extends('layouts.app')

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

@section('content')
<h1 class="mb-4">Mis eventos</h1>
<p class="text-muted">Bienvenido, {{ $user->name }} 👋</p>

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

@if($lastEvent)
  <div class="alert alert-info">
    Último evento: <strong>{{ $lastEvent->titulo }}</strong>
  </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 al último evento
    </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="h5 mt-5 mb-3">Listado de 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="small text-muted 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