<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'Sistema de Estudios')</title>

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    {{-- CSS de Bootstrap y Bootstrap Icons (desde CDN) --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    {{-- Si tienes un app.css manual, puedes mantenerlo aquí. Si no lo necesitas, bórralo. --}}
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    {{-- CSS de Flatpickr (desde CDN) --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    {{-- Aquí se inyectarán estilos específicos de las vistas (si usas @section('styles')) --}}
    @yield('styles')

    <style>
        /* Tus estilos CSS existentes */
        body {
            padding-top: 60px;
            background-color: #444444;
            color: #ffffff;
        }

        #app {
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 0;
        }

        .app-container {
            background-color: #333333;
            border: 1px solid #555555;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
            min-height: 100vh;
        }

        .navbar-dark {
            background-color: #222222 !important;
        }

        .navbar-dark .navbar-brand {
            color: #ffffff;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: #cccccc;
        }

        .navbar-dark .navbar-nav .nav-link:hover,
        .navbar-dark .navbar-nav .nav-link:focus {
            color: #ffffff;
        }

        .dropdown-menu {
            background-color: #333333;
            border: 1px solid #555555;
        }

        .dropdown-item {
            color: #cccccc;
        }

        .dropdown-item:hover,
        .dropdown-item:focus {
            background-color: #555555;
            color: #ffffff;
        }

        /* Estilos adicionales para Flatpickr */
        .flatpickr-input {
            background-color: #444 !important;
            color: #fff !important;
            border: 1px solid #666 !important;
        }

        .flatpickr-calendar {
            background: #333 !important;
            color: #fff !important;
            border: 1px solid #555 !important;
        }

        .flatpickr-day {
            color: #ccc !important;
        }

        .flatpickr-day.selected,
        .flatpickr-day.today.not-in-view,
        .flatpickr-day.today.in-view,
        .flatpickr-day:hover {
            background: #555 !important;
            color: #fff !important;
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months,
        .flatpickr-current-month .flatpickr-yearDropdown-years.curYear {
            background: #444 !important;
            color: #fff !important;
        }

        .flatpickr-current-month input.curYear,
        .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month,
        .flatpickr-current-month .flatpickr-yearDropdown-years .flatpickr-year {
            background: transparent !important;
            color: #fff !important;
        }
    </style>
</head>
<body class="antialiased">
    <div id="app">
        <div class="app-container">
            <nav class="navbar navbar-expand-md navbar-dark fixed-top">
                <div class="container-fluid">
                    <a class="navbar-brand" href="{{ url('/') }}">Sistema de Estudios</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">Panel</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('alumnos.*') ? 'active' : '' }}" href="{{ route('alumnos.index') }}">Alumnos</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('cepros.*') ? 'active' : '' }}" href="{{ route('cepros.index') }}">CEPROs</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('ugels.*') ? 'active' : '' }}" href="{{ route('ugels.index') }}">Ugeles</a>
                            </li>
                            {{-- Solo muestra el enlace "Usuarios" si el usuario es un administrador --}}
                            @if(Auth::check() && Auth::user()->rol === 'admin')
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('users.*') ? 'active' : '' }}" href="{{ route('users.index') }}">Usuarios</a>
                                </li>
                            @endif
                            {{-- ENTRADA PARA LA CONSULTA DE DNI --}}
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('consulta.dni.form') ? 'active' : '' }}" href="{{ route('consulta.dni.form') }}">Consulta DNI</a>
                            </li>
                        </ul>

                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            @guest
                                {{-- Si estás usando un login PERSONALIZADO, apunta a tu ruta personalizada --}}
                                @if (Route::has('login.custom.form')) 
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ route('login.custom.form') }}">Iniciar Sesión</a> 
                                    </li>
                                @endif
                                {{-- Si no tienes una ruta de registro personalizada, puedes eliminar este bloque --}}
                                {{-- @if (Route::has('register')) 
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                    </li>
                                @endif --}}
                            @else {{-- Usuario autenticado --}}
                                <li class="nav-item dropdown">
                                    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                       data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        {{ Auth::user()->alias ?? Auth::user()->email }} {{-- Muestra alias o email --}}
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                        {{-- BOTÓN/ENLACE DE CERRAR SESIÓN (APUNTANDO A TU RUTA PERSONALIZADA) --}}
                                        <a class="dropdown-item" href="{{ route('custom.logout') }}" 
                                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                            Cerrar Sesión 
                                        </a>
                                        <form id="logout-form" action="{{ route('custom.logout') }}" method="POST" class="d-none"> 
                                            @csrf
                                        </form>
                                    </div>
                                </li>
                            @endguest
                        </ul>
                    </div>
                </div>
            </nav>

            <main class="py-4">
                <div class="container">
                    @yield('content')
                </div>
            </main>
        </div>
    </div>

    {{-- SCRIPTS JS GLOBALES (Bootstrap y Flatpickr) --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    {{-- ¡LÍNEA AÑADIDA / DESCOMENTADA: Script de Google reCAPTCHA! (Si lo necesitas, si no, bórralo) --}}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script> 

    {{-- Aquí se inyectarán los scripts de las vistas individuales (como el de alumnos/create) --}}
    @stack('scripts') 

    {{-- Script de inicialización global para Flatpickr --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const flatpickrElements = document.querySelectorAll('.flatpickr-input');
            flatpickrElements.forEach(function(element) {
                flatpickr(element, {
                    dateFormat: "Y-m-d",
                    locale: "es"
                });
            });
        });
    </script>
</body>
</html>