<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@yield('title', 'Sampedro — Sistema de Sets')</title>

    {{-- Tailwind CSS --}}
    <script src="https://cdn.tailwindcss.com"></script>

    {{-- Alpine.js --}}
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    {{-- html2pdf (generación de PDF en cliente) --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

    <style>
        [x-cloak] { display: none !important; }
    </style>

    @stack('head')

  {{-- PWA --}}
<link rel="manifest" href="/sampedro-app/public/manifest.json">
<meta name="theme-color" content="#2563eb">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Sampedro">
<link rel="apple-touch-icon" href="/sampedro-app/public/icons/icon-192.png">

{{-- Registrar Service Worker --}}
<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sampedro-app/public/sw.js')
                .then(reg => console.log('SW registrado'))
                .catch(err => console.log('SW error:', err));
        });
    }
</script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased min-h-screen">

    {{-- ── Barra de navegación (solo si está autenticado) ─────── --}}
    @auth
    <nav class="bg-blue-700 text-white px-6 py-3 flex items-center justify-between shadow-md">
        <a href="{{ route('sets.index') }}" class="font-extrabold text-lg tracking-widest hover:text-blue-200 transition">
            SAMPEDRO
        </a>
        <div class="flex items-center gap-5 text-sm">
            <a href="{{ route('sets.create') }}"
               class="bg-white/10 hover:bg-white/20 px-3 py-1.5 rounded-lg transition font-medium">
                + Nuevo Set
            </a>
            <a href="{{ route('sets.index') }}"
               class="text-blue-200 hover:text-white transition">
                Mis Registros
            </a>
            <span class="text-blue-300 hidden sm:inline">|</span>
            <span class="text-blue-100 hidden sm:inline text-xs">{{ Auth::user()->name }}</span>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                        class="bg-blue-900 hover:bg-blue-800 px-3 py-1.5 rounded-lg transition text-xs font-semibold">
                    Salir
                </button>
            </form>
        </div>
    </nav>
    @endauth

    {{-- ── Toast de éxito (flash) ────────────────────────────── --}}
    @if (session('success'))
        <div x-data="{ show: true }"
             x-show="show"
             x-init="setTimeout(() => show = false, 4000)"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             x-cloak
             class="fixed top-4 right-4 z-50 bg-green-500 text-white px-5 py-3 rounded-xl
                    shadow-xl flex items-center gap-2 text-sm font-medium">
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    {{-- ── Contenido principal ─────────────────────────────────── --}}
    <main>
        @yield('content')
    </main>

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