<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>

    <link rel="icon" type="image/x-icon"
          href="https://jesusfb.github.io/velozcdn/cotizahoy/citizahoyico.ico"/>

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('css/fontawesome.min.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" rel="stylesheet">

    <!-- Bootstrap 4 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

    <!-- AdminLTE -->
    <link rel="stylesheet" href="{{ asset('css/adminlte.min.css') }}">

    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css"
          rel="stylesheet"/>

    @yield('styles')

    <style>
        .content-wrapper { overflow-x: hidden; }
        .card-body { overflow-x: auto; }
        table { width: 100%; }
        .table { white-space: nowrap; }

        @media (max-width: 768px) {
            .content-wrapper { padding: 10px !important; }
            .brand-text { font-size: 14px; }
            .navbar-nav .nav-link { font-size: 14px; }
            .main-footer { text-align: center; }
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-navbar-fixed layout-footer-fixed">

<div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#">
                    <i class="fas fa-bars" style="font-size:22px"></i>
                </a>
            </li>
        </ul>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    {{ Auth::user()->name }}
                    <i class="fas fa-user" style="font-size:22px"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="{{ route('profile.show') }}" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> Mi perfil
                    </a>

                    <div class="dropdown-divider"></div>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <a href="#" class="dropdown-item"
                           onclick="event.preventDefault(); this.closest('form').submit();">
                            <i class="fas fa-sign-out-alt mr-2"></i> Salir
                        </a>
                    </form>
                </div>
            </li>
        </ul>
    </nav>

    <!-- Sidebar -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <a href="/home" class="brand-link text-center">
            <i class="fa-solid fa-file-invoice-dollar mr-2" style="font-size:26px"></i>
            <span class="brand-text font-weight-light">COTIZAWEB</span>
        </a>

        @include('layouts.navigation')
    </aside>

    <!-- Content -->
    <div class="content-wrapper">
        <section class="content pt-3">
            <div class="container-fluid">
                @yield('content')
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="main-footer text-sm">
        <div class="float-right d-none d-sm-inline">
            VERSION 1.1.0
        </div>
        <strong>
            Copyright &copy; 2026
            <a href="https://codigoideal.com">CODIGOIDEAL.COM</a>.
        </strong>
    </footer>

</div>

<!-- ===================== SCRIPTS (ORDEN CRÍTICO) ===================== -->

<!-- jQuery (PRIMERO) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- AdminLTE -->
<script src="{{ asset('js/adminlte.min.js') }}"></script>

<!-- Inicialización global Select2 -->
<script>
$(document).ready(function () {

    if ($.fn.select2) {
        $('.select2').select2({
            theme: 'bootstrap4',
            width: '100%'
        });
        console.log('Select2 cargado correctamente');
    } else {
        console.error('Select2 NO cargó');
    }

});
</script>

@yield('scripts')

</body>
</html>