<!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>{{ config('app.name', 'Laravel') }}</title>

    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <style>
    /* Estilos personalizados para el navbar */
    .custom-navbar {
        min-height: clamp(60px, 8vh, 75px);
        padding: 1% 0;
        background: white;
        box-shadow: 0 2px 8px rgba(1, 92, 255, 0.1);
        border-bottom: 2px solid #e1ecf7;
    }

    .custom-navbar .navbar-brand {
        font-size: clamp(18px, 2.2vw, 24px);
        font-weight: 700;
        color: #015cff !important;
        margin-left: 0;
        padding-left: 0;
        display: flex;
        align-items: center;
    }

    .navbar-logo {
        height: clamp(35px, 5vh, 40px);
        width: auto;
        max-width: clamp(200px, 25vw, 250px);
        object-fit: contain;
        transition: all 0.2s ease;
        margin-top: -2px;
        margin-bottom: -2px;
        filter: brightness(1.0);
    }

    .navbar-logo:hover {
        transform: scale(1.05);
        filter: contrast(1.2);
    }

    .custom-navbar .nav-link {
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: 500;
        color: #000000 !important;
        padding: 1% 2%;
    }

    .custom-navbar .dropdown-toggle::after {
        margin-left: 0.5%;
    }

    .custom-dropdown-menu {
        border: 2px solid #015cff !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 20px rgba(1, 92, 255, 0.15) !important;
        padding: 1% 0 !important;
        margin-top: 0.5% !important;
        min-width: clamp(180px, 20vw, 200px) !important;
        z-index: 1050 !important;
    }

    .custom-dropdown-menu .dropdown-item {
        font-size: clamp(13px, 1.4vw, 15px) !important;
        font-weight: 500 !important;
        color: #000000 !important;
        padding: 1.2% 2.5% !important;
        transition: all 0.2s ease !important;
        display: block !important;
    }

    .custom-dropdown-menu .dropdown-item:hover {
        background-color: #e6f2ff !important;
        color: #015cff !important;
    }

    .custom-container {
        max-width: 95%;
        margin: 0 auto;
        padding-left: 2%;
        padding-right: 2%;
    }

    .blulinc-container {
        max-width: 90%; /* Más compacto */
        margin: 0 auto;
        padding: 2% 2%;
        min-height: 80vh; /* Reducido */
        width: 100%;
    }

    .blulinc-header {
        background: linear-gradient(135deg, #015cff 0%, #0146cc 100%);
        color: white;
        margin-bottom: 2%;
        padding: 1.5% 3%;
        border-radius: 12px;
        text-align: center;
        font-size: clamp(18px, 2.5vw, 28px); /* Responsivo */
        font-weight: 700;
        box-shadow: 0 6px 24px rgba(1, 92, 255, 0.2);
        border: 1px solid #0146cc;
    }

    /* === MEDIA QUERIES RESPONSIVAS COMPACTAS === */

    /* Pantallas muy grandes (1920px+) */
    @media (min-width: 1920px) {
        .blulinc-container {
            max-width: 85%;
            padding: 2.5% 3%;
        }
        .custom-container {
            max-width: 90%;
        }
    }

    /* Pantallas grandes (1200px - 1919px) */
    @media (min-width: 1200px) and (max-width: 1919px) {
        .blulinc-container {
            max-width: 88%;
            padding: 2% 2.5%;
        }
        .custom-container {
            max-width: 92%;
        }
    }

    /* Pantallas medianas (768px - 1199px) */
    @media (min-width: 768px) and (max-width: 1199px) {
        .blulinc-container {
            max-width: 92%;
            padding: 2% 2%;
        }
        .custom-container {
            max-width: 95%;
            padding-left: 1.5%;
            padding-right: 1.5%;
        }
        .blulinc-header {
            padding: 1.2% 2.5%;
            border-radius: 10px;
        }
    }

    /* Pantallas pequeñas (576px - 767px) */
    @media (min-width: 576px) and (max-width: 767px) {
        .blulinc-container {
            max-width: 95%;
            padding: 1.5% 1.5%;
        }
        .custom-container {
            max-width: 98%;
            padding-left: 1%;
            padding-right: 1%;
        }
        .blulinc-header {
            padding: 1% 2%;
            border-radius: 8px;
        }
    }

    /* Pantallas muy pequeñas (hasta 575px) */
    @media (max-width: 575px) {
        .blulinc-container {
            max-width: 98%;
            padding: 1% 1%;
        }
        .custom-container {
            max-width: 100%;
            padding-left: 0.5%;
            padding-right: 0.5%;
        }
        .blulinc-header {
            padding: 0.8% 1.5%;
            border-radius: 6px;
        }
    }
    </style>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light custom-navbar">
            <div class="container-fluid custom-container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    <img src="{{ asset('images/bl-logo-black.png') }}?v={{ time() }}" alt="Blulinc" class="navbar-logo">
                </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">

                    </ul>

                    <ul class="navbar-nav ms-auto">
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">Login</a>
                                </li>
                            @endif

                            {{-- @if (Route::has('register')) --}}
                                {{-- <li class="nav-item"> --}}
                                    {{-- <a class="nav-link" href="{{ route('register') }}">Register</a> --}}
                                {{-- </li> --}}
                            {{-- @endif --}}
                        @else
                            <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()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end custom-dropdown-menu" aria-labelledby="navbarDropdown">
                                    @if(Auth::user() && Auth::user()->isSuperAdmin())
                                        <a class="dropdown-item" href="{{ route('user-management.create') }}">
                                            Create New User
                                        </a>
                                        <a class="dropdown-item" href="{{ route('user-management.index') }}">
                                            User Management
                                        </a>
                                    @endif
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        {{-- === NOTIFICACIONES DE MANTENIMIENTO === --}}
        @if(session('maintenance_active'))
            <div class="alert alert-warning alert-dismissible fade show m-3" role="alert">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <strong>Maintenance in Progress:</strong> {{ session('maintenance_message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('maintenance_scheduled'))
            <div class="alert alert-info alert-dismissible fade show m-3" role="alert">
                <i class="bi bi-clock me-2"></i>
                <strong>Scheduled Maintenance:</strong> {{ session('maintenance_message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        {{-- ========================================== --}}

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

    {{-- Agregar la directiva @stack para cargar scripts --}}
    @stack('scripts')
    

</body>
</html>
