@extends('layouts.app')

@section('title', 'Panel de administrador')

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

  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <h1 class="h4 mb-1">Panel de administrador</h1>
      <p class="text-muted mb-0">Bienvenido, {{ $user->name }} 👋</p>
    </div>
  </div>

  <div class="alert alert-info">
    Puedes ver y administrar todos los eventos creados por los usuarios.
  </div>

  @if($events->isEmpty())
    <p class="text-muted">No hay eventos registrados.</p>
  @else

    {{-- ===== Vista en tarjetas (móvil) ===== --}}
    <div class="d-md-none">
      @foreach($events as $event)
        <div class="card card-surface mb-3 rounded-3">
          <div class="card-body">
            <h2 class="h6 mb-1 text-truncate">{{ $event->titulo }}</h2>
            <p class="small text-muted mb-2">
              Usuario: {{ $event->user->name ?? 'N/A' }}
            </p>

            <div class="small mb-1">
              <strong>Slug:</strong> {{ $event->slug }}
            </div>
            <div class="small text-muted mb-3">
              <strong>Creado:</strong> {{ $event->created_at->format('d/m/Y') }}
            </div>

            <div class="d-flex gap-2 flex-wrap">
              @if (Route::has('preview.form'))
                <a href="{{ route('preview.form', $event->slug) }}"
                   class="btn btn-sm btn-outline-light flex-fill">
                  Preview
                </a>
              @endif

              @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>
      @endforeach
    </div>

    {{-- ===== Tabla (desktop / tablet) ===== --}}
    <div class="d-none d-md-block">
      <div class="card card-surface rounded-3">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-dark table-striped mb-0 align-middle">
              <thead>
                <tr>
                  <th style="min-width: 200px;">Título</th>
                  <th style="min-width: 160px;">Usuario</th>
                  <th style="min-width: 160px;">Slug</th>
                  <th style="min-width: 110px;">Creado</th>
                  <th style="min-width: 190px;">Acciones</th>
                </tr>
              </thead>
              <tbody>
                @foreach($events as $event)
                  <tr>
                    <td class="text-truncate" title="{{ $event->titulo }}">{{ $event->titulo }}</td>
                    <td class="text-truncate" title="{{ $event->user->name ?? 'N/A' }}">
                      {{ $event->user->name ?? 'N/A' }}
                    </td>
                    <td class="text-truncate">{{ $event->slug }}</td>
                    <td>{{ $event->created_at->format('d/m/Y') }}</td>
                    <td>
                      <div class="d-flex gap-2">
                        @if (Route::has('preview.form'))
                          <a href="{{ route('preview.form', $event->slug) }}"
                             class="btn btn-sm btn-outline-light">
                            Preview
                          </a>
                        @endif

                        @if (Route::has('events.edit'))
                          <a href="{{ route('events.edit', $event) }}"
                             class="btn btn-sm btn-accent">
                            Editar
                          </a>
                        @endif
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div> {{-- .table-responsive --}}
        </div>
      </div>
    </div>

  @endif
</div>
@endsection