<!doctype html>
<html lang="es" data-bs-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@yield('title', 'Eventos')</title>

  {{-- Tipografía --}}
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">

  {{-- Assets con Vite --}}
  @vite(['resources/js/app.js', 'resources/css/app.css'])

  @stack('head')

  <style>
    :root{
      --bg-dark:#0b0e13; --bg-card:#12161d; --accent:#9ae6b4; --muted:#9aa4b2;
    }
    body{ background:var(--bg-dark); color:#e9edf1; font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Arial;}
    .navbar{ background:linear-gradient(180deg,rgba(11,14,19,.95) 0, rgba(11,14,19,.65) 100%); backdrop-filter:blur(8px);}
    .brand-badge{ background:linear-gradient(135deg,rgba(154,230,180,.15),rgba(154,230,180,.05)); border:1px solid rgba(154,230,180,.25); color:var(--accent); border-radius:999px; padding:.35rem .65rem; font-size:.85rem;}
    .btn-accent{ background:var(--accent); color:#0b0e13; border:none;}
    .btn-accent:hover{ background:#b7f0c8; color:#0b0e13;}
    .card-surface{ background:var(--bg-card); border:1px solid rgba(255,255,255,.06);}
  </style>
</head>
<body>

<nav class="navbar navbar-expand-lg border-bottom border-dark sticky-top">
  <div class="container">
    <a class="navbar-brand fw-semibold text-white" href="{{ url('/') }}">
      <span class="brand-badge me-2">Eventos</span> Galería & Preview
    </a>

    <button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div id="nav" class="collapse navbar-collapse">
      <ul class="navbar-nav ms-auto align-items-lg-center gap-2">

        {{-- ====== Invitado (no autenticado) ====== --}}
        @guest
          @if (Route::has('login'))
            <li class="nav-item"><a class="btn btn-sm btn-outline-light" href="{{ route('login') }}">Ingresar</a></li>
          @endif
          @if (Route::has('register'))
            <li class="nav-item ms-lg-2"><a class="btn btn-sm btn-accent" href="{{ route('register') }}">Crear cuenta</a></li>
          @endif
        @endguest

        {{-- ====== Usuario autenticado ====== --}}
        @auth
          {{-- Enlace al Dashboard (común) --}}
          @if (Route::has('dashboard'))
            <li class="nav-item d-none d-lg-block">
              <a class="nav-link text-white-50" href="{{ route('dashboard') }}">Dashboard</a>
            </li>
          @endif

          {{-- ====== Menú por rol ====== --}}
          @php $user = auth()->user(); @endphp

          @if (method_exists($user,'isAdmin') && $user->isAdmin())
            {{-- ------- ADMIN ------- --}}
            @if (Route::has('events.index'))
              <li class="nav-item"><a class="btn btn-sm btn-outline-light" href="{{ route('events.index') }}">Todos los eventos</a></li>
            @endif

            {{-- Espacio para más opciones de admin (ej: usuarios, reportes) --}}
            {{-- <li class="nav-item"><a class="btn btn-sm btn-outline-light" href="#">Usuarios</a></li> --}}

          @else
            {{-- ------- INVITADO / USUARIO NORMAL ------- --}}
            @if (Route::has('events.index'))
              <li class="nav-item"><a class="btn btn-sm btn-outline-light" href="{{ route('events.index') }}">Mis eventos</a></li>
            @endif
            @if (Route::has('events.create'))
              <li class="nav-item ms-lg-2"><a class="btn btn-sm btn-accent" href="{{ route('events.create') }}">Crear evento</a></li>
            @endif
            {{-- Atajo opcional al último evento (si definiste la ruta) --}}
            @if (Route::has('events.quick.last'))
              <li class="nav-item ms-lg-2"><a class="btn btn-sm btn-outline-light" href="{{ route('events.quick.last') }}">Subir imágenes</a></li>
            @endif
          @endif

          {{-- ====== Logout ====== --}}
          @if (Route::has('logout'))
            <li class="nav-item ms-lg-2">
              <form action="{{ route('logout') }}" method="POST" class="d-inline">@csrf
                <button class="btn btn-sm btn-outline-light">Salir</button>
              </form>
            </li>
          @endif
        @endauth
      </ul>
    </div>
  </div>
</nav>

<main class="py-4">
  <div class="container">

    {{-- Mensajes flash --}}
    @if (session('ok'))
      <div class="alert alert-success">{{ session('ok') }}</div>
    @endif
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach ($errors->all() as $e)
            <li>{{ $e }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    @yield('content')
  </div>
</main>

<footer class="py-4 border-top border-dark mt-4">
  <div class="container d-flex flex-wrap justify-content-between align-items-center gap-2">
    <small>© {{ date('Y') }} Eventos • Galería & Preview</small>
    <small>Sube, ordena y comparte con código privado</small>
  </div>
</footer>

@stack('scripts')
</body>
</html>
