<?php
session_start();
$host = 'localhost';
$db = 'trabajadores';
$username = 'root';
$password = 'root';

if (!isset($_SESSION['usuario'])) {
    header("Location: index.html");
    exit;
}

try {
    $conn = new mysqli($host, $username, $password, $db);

    if ($conn->connect_error) {
        die("Conexión fallida: " . $conn->connect_error);
    }

    $usuario = $_SESSION['usuario'];

    $sql = "SELECT NOMBRE, ROL FROM personal WHERE USUARIO = '$usuario'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $nombre = $row['NOMBRE'];
        $rol = $row['ROL'];

        // 👉 Agregamos la función para sacar iniciales
        function obtenerIniciales($nombreCompleto)
        {
            $partes = explode(' ', $nombreCompleto);
            $iniciales = '';

            foreach ($partes as $parte) {
                if (!empty($parte)) {
                    $iniciales .= strtoupper($parte[0]);
                }
            }
            return $iniciales;
        }

        // 👉 Ahora creamos las iniciales
        $inicialesUsuario = obtenerIniciales($nombre);
    } else {
        $nombre = "Usuario";
        $rol = "Usuario";
        $inicialesUsuario = "US"; // Algo por defecto
    }

    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="es" class="layout-navbar-fixed layout-compact layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="../assets/" data-template="vertical-menu-template">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Catalogo De Logistica</title>
    <meta name="description" content="" />
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../assets/img/favicon/favicon.ico" />
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="../assets/vendor/fonts/boxicons.css" />

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/estilosdetablas.css">
    <link rel="stylesheet" href="../css/botonesfiltros.css">
    <link rel="stylesheet" href="../css/botonexportar.css">


    <!-- Core CSS -->
    <link rel="stylesheet" href="../assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="../assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

    <link rel="stylesheet" href="../assets/vendor/libs/apex-charts/apex-charts.css" />

    <!-- Page CSS -->

    <!-- Helpers -->
    <script src="../assets/vendor/js/helpers.js"></script>
    <script src="../assets/js/config.js"></script>


    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <style>
        .wow {
            visibility: hidden;
        }

        td {
            white-space: nowrap;
        }

        /* Estilos para el desplegable */
        .search-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 9999;
            margin-top: 0.2rem;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: 0.25rem;
            overflow-y: auto;
            max-height: 300px;
        }

        .search-dropdown li {
            cursor: pointer;
        }

        .search-dropdown li:hover {
            background-color: #f0f0f0;
        }

        /* Ocultar resultados inicialmente */
        #modalSearchResults {
            display: none;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
    <style>
        .scroll-container {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding-bottom: 10px;
        }

        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .scroll-btn:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        .scroll-wrapper {
            position: relative;
        }

        /* Forzar que SweetAlert2 esté siempre sobre modales Bootstrap */
        .swal2-container {
            z-index: 20000 !important;
        }

        .scroll-container {
            overflow-x: auto;
            /* mantiene la función scroll */
            overflow-y: hidden;
            /* solo horizontal */
            -ms-overflow-style: none;
            /* IE y Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        .scroll-container::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        .scroll-btn {
            background: #009dff;
        }

        .scroll-btn:hover {
            background-color: #0088e0;
            /* un poco más oscuro */
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <!-- Menu -->

            <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                <div class="app-brand demo">
                    <a href="index.html" class="app-brand-link">
                        <span class="app-brand-logo demo">
                            <svg
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                x="0px"
                                y="0px"
                                viewBox="0 0 2000 2000"
                                style="enable-background:new 0 0 2000 2000;"
                                xml:space="preserve"
                                width="100"
                                height="100">
                                <style type="text/css">
                                    .st0 {
                                        display: none;
                                    }

                                    .st1 {
                                        fill: #009DFF;
                                    }
                                </style>
                                <g id="Capa_1" class="st0">
                                    <image style="display:inline;overflow:visible;" width="2550" height="1558" transform="matrix(1 0 0 1 494.3726 289.1373)"></image>
                                </g>
                                <g id="Capa_2">
                                    <g>
                                        <rect x="183.89" y="18.31" class="st1" width="1632.23" height="526.02" />
                                        <polygon class="st1" points="1031.3,1629.99 1031.3,1711.86 1308.44,1711.86 1308.44,1825.3 1031.3,1825.3 1031.3,1907.13 1308.44,1907.13 1308.44,1981.69 691.56,1981.69 691.56,682.4 1308.44,682.4 1308.44,1629.99" />
                                    </g>
                                </g>
                                <g id="Capa_3" class="st0"></g>
                            </svg>
                        </span>
                        <span class="app-brand-text demo menu-text fw-bolder ms-2">Trax</span>
                    </a>

                    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                        <i class="bx bx-chevron-left bx-sm align-middle"></i>
                    </a>
                </div>

                <div class="menu-inner-shadow"></div>

                <ul class="menu-inner py-1">
                    <!-- Dashboard
            <li class="menu-item active">
              <a href="index.html" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                <div data-i18n="Analytics">Dashboard</div>
              </a>
            </li> -->

                    <!-- Layouts -->
                    <li class="menu-item ">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-layout"></i>
                            <div data-i18n="Layouts">Inicio</div>
                        </a>

                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="tablero.php" class="menu-link">
                                    <div data-i18n="Without menu">Tablero</div>
                                </a>
                            </li>
                            <!--
                            <li class="menu-item">
                                <a href="nuevo_cliente.php" class="menu-link">
                                    <div data-i18n="Without navbar">Agregar Cliente</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_proveedor.php" class="menu-link">
                                    <div data-i18n="Container">Agregar Proveedor</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nueva_cotizacion.php" class="menu-link">
                                    <div data-i18n="Fluid">Agregar Cotizacion</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="nuevo_producto.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Producto</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="nueva_compra.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Compra</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="nueva_factura.php" class="menu-link">
                                    <div data-i18n="Blank">Agregar Factura</div>
                                </a>
                            </li>
                                -->
                        </ul>
                    </li>

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Aspel SAE</span>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-line-chart"></i>
                            <div data-i18n="Account Settings">Ventas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="facturas.php" class="menu-link">
                                    <div data-i18n="Account">Facturas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdeventa.php" class="menu-link">
                                    <div data-i18n="Notifications">Notas de Venta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="trasladoscartaporte.php" class="menu-link">
                                    <div data-i18n="Connections">Carta Porte</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="remisiones.php" class="menu-link">
                                    <div data-i18n="Connections">Remisiones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="pedidos.php" class="menu-link">
                                    <div data-i18n="Connections">Pedidos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cotizaciones.php" class="menu-link">
                                    <div data-i18n="Connections">Cotizaciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devoluciones.php" class="menu-link">
                                    <div data-i18n="Connections">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdecredito.php" class="menu-link">
                                    <div data-i18n="Connections">Notas de Crédito</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="parcialidades.php" class="menu-link">
                                    <div data-i18n="Connections">Parcialidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="comprobantesdepago.php" class="menu-link">
                                    <div data-i18n="Connections">Comprobantes</div>
                                </a>
                            <li class="menu-item">
                                <a href="estadisticas.php" class="menu-link">
                                    <div data-i18n="Connections">Estadisticas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticascli.php" class="menu-link">
                                    <div data-i18n="Connections">Ventas X Cliente</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-user"></i>
                            <div data-i18n="Authentications">Clientes</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="clientes.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxcobrar.php" class="menu-link">
                                    <div data-i18n="Basic">Cuentas X Cobrar</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="clientespoliza.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes con Póliza</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="clientestimbres.php" class="menu-link">
                                    <div data-i18n="ClientStamps">Clientes Timbres</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="clientesistemas.php" class="menu-link">
                                    <div data-i18n="ClientSystems">Clientes Sistemas</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-package"></i>
                            <div data-i18n="Misc">Inventarios</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="productos.php" class="menu-link">
                                    <div data-i18n="Error">Productos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="existencias.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Existencias</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-shopping-bag"></i>
                            <div data-i18n="Misc">Compras</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="compras.php" class="menu-link">
                                    <div data-i18n="Error">Compras</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="recepciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Recepciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ordenes.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Ordenes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="requisiciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Requisiciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devolucionescom.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticasprove.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Compras X Proveedor</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-group"></i>
                            <div data-i18n="Misc">Proveedores</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="proveedores.php" class="menu-link">
                                    <div data-i18n="Error">Proveedores</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxpagar.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Cuentas X Pagar</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <!-- Aspel COI -->
                    <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel COI</span></li>

                    <!-- Extended components -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-copy"></i>
                            <div data-i18n="Extended UI">Cuentas y Pólizas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="cuentas.php" class="menu-link">
                                    <div data-i18n="Perfect Scrollbar">Cuentas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="polizas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="activos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="auxiliares.php" class="menu-link">
                                    <div data-i18n="Text Divider">Auxiliares</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestosPD.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos DP</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="monedas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Monedas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="departamentos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Departamentos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="otrosimpuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Otros Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="activosgenerales.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos Generales</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldosDP.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos DP</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="rubros.php" class="menu-link">
                                    <div data-i18n="Text Divider">Rubros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ccostos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Centro de Costos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="concepto.php" class="menu-link">
                                    <div data-i18n="Text Divider">Conceptos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="regpol.php" class="menu-link">
                                    <div data-i18n="Text Divider">Registro de Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="impuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="timbres.php" class="menu-link">
                                    <div data-i18n="Text Divider">Timbres</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- Aspel BANCO -->
                    <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel BANCO</span></li>
                    <!-- Forms -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-credit-card"></i>
                            <div data-i18n="Form Elements">Movimientos</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item ">
                                <a href="movimientos.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="moneda.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Moneda</div>
                                </a>

                            </li>
                            <li class="menu-item ">
                                <a href="beneficiosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Beneficios</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="cuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Cuentas ban</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="formadepagoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Forma de pago</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="parametrosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Partidas de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="comprobantedeldocumentoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Comprobante del documento</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="centrodecuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Conceptos de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="historialxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Historial</div>
                                </a>

                            </li>
                        </ul>
                    </li>

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Mantenimiento y Soporte</span>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-credit-card"></i>
                            <div data-i18n="Form Elements">Mantenimiento</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="ordenservicio.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Ordenes de Servicio</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="registrossemana.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Registros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticasord.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Estadisticas</div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item  active open">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon icon-base bx bx-car"></i>
                            <div data-i18n="Form Elements">Logistica</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="datos_logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Datos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Nueva Ruta</div>
                                </a>
                            </li>
                            <li class="menu-item active">
                                <a href="altas_logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Catalogo De Logistica</div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </aside>
            <!-- / Menu -->



            <!-- Layout container -->
            <div class="layout-page">
                <!-- Navbar -->
                <nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
                    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                        <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                        </a>
                    </div>

                    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                        <!-- Search -->
                        <div class="navbar-nav align-items-center">
                            <div class="nav-item d-flex align-items-center">
                                <i class="bx bx-search fs-4 lh-0"></i>
                                <input
                                    type="text"
                                    class="form-control border-0 shadow-none"
                                    placeholder="Buscar..."
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalBusqueda" />

                                <!-- Resultados -->
                                <ul id="searchResults" class="list-group search-dropdown"></ul>
                            </div>
                        </div>


                        <!-- /Search -->

                        <ul class="navbar-nav flex-row align-items-center ms-auto">



                            <!-- icono de idioma  -->
                            <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="icon-base bx bx-globe icon-md"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                    <li>
                                        <a class="dropdown-item active" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
                                            <span>French</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
                                            <span>Arabic</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
                                            <span>German</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <!-- Icono de modo oscuro -->
                            <li class="nav-item dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" id="nav-theme" href="javascript:void(0);" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
                                    <i class="bx-sun icon-base bx icon-md theme-icon-active"></i>
                                    <span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
                                </a>

                                <!-- Submenu de modo oscuro -->
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text" data-bs-popper="static">
                                    <li>
                                        <button type="button" class="dropdown-item align-items-center active" data-bs-theme-value="light" aria-pressed="true">
                                            <span>
                                                <i class="icon-base bx bx-sun icon-md me-3" data-icon="sun"></i>Claro
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-moon icon-md me-3" data-icon="moon"></i>Oscuro
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="system" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-desktop icon-md me-3" data-icon="desktop"></i>Dispositivo
                                            </span>
                                        </button>
                                    </li>

                                </ul>
                                <!-- Aquí termina submenu -->
                            </li>


                            <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <i class="icon-base bx bx-grid-alt icon-md"></i>
                                </a>
                                <!-- submenu -->
                                <div class="dropdown-menu dropdown-menu-end p-0">
                                    <div class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Shortcuts</h6>
                                            <a href="javascript:void(0)" class="dropdown-shortcuts-add py-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Add shortcuts" data-bs-original-title="Add shortcuts"><i class="icon-base bx bx-plus-circle text-heading"></i></a>
                                        </div>
                                    </div>
                                    <div class="dropdown-shortcuts-list scrollable-container ps">
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-calendar icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-calendar.html" class="stretched-link">Calendar</a>
                                                <small>Appointments</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-food-menu icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
                                                <small>Manage Accounts</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-user icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-user-list.html" class="stretched-link">User App</a>
                                                <small>Manage Users</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-check-shield icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-access-roles.html" class="stretched-link">Role Management</a>
                                                <small>Permission</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-pie-chart-alt-2 icon-26px text-heading"></i>
                                                </span>
                                                <a href="index.html" class="stretched-link">Dashboard</a>
                                                <small>User Dashboard</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-cog icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
                                                <small>Account Settings</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-help-circle icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-faq.html" class="stretched-link">FAQs</a>
                                                <small>FAQs &amp; Articles</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-window-open icon-26px text-heading"></i>
                                                </span>
                                                <a href="modal-examples.html" class="stretched-link">Modals</a>
                                                <small>Useful Popups</small>
                                            </div>
                                        </div>
                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- aqui termina submenu -->

                            </li>

                            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <span class="position-relative">
                                        <i class="icon-base bx bx-bell icon-md"></i>
                                        <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
                                    </span>
                                </a>

                                <!--empiezan las notificaciones -->
                                <ul class="dropdown-menu dropdown-menu-end p-0">
                                    <li class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Notification</h6>
                                            <div class="d-flex align-items-center h6 mb-0">
                                                <span class="badge bg-label-primary me-2">8 New</span>
                                                <a href="javascript:void(0)" class="dropdown-notifications-all p-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Mark all as read" data-bs-original-title="Mark all as read"><i class="icon-base bx bx-envelope-open text-heading"></i></a>
                                            </div>
                                        </div>
                                    </li>


                                    <li class="dropdown-notifications-list scrollable-container ps ps--active-y">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <img src="../../assets/img/avatars/1.png" alt="" class="rounded-circle">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
                                                        <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
                                                        <small class="text-body-secondary">1h ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">Charles Franklin</h6>
                                                        <small class="mb-1 d-block text-body">Accepted your connection</small>
                                                        <small class="text-body-secondary">12hr ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar">
                                                            <img src="../../assets/img/avatars/2.png" alt="" class="rounded-circle">
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="small mb-0">New Message ✉️</h6>
                                                        <small class="mb-1 d-block text-body">You have new message from Natalie</small>
                                                        <small class="text-body-secondary">1h ago</small>
                                                    </div>
                                                    <div class="flex-shrink-0 dropdown-notifications-actions">
                                                        <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                                                        <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>

                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </li>

                                    <li class="border-top">
                                        <div class="d-grid p-4">
                                            <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
                                                <small class="align-middle">View all notifications</small>
                                            </a>
                                        </div>
                                    </li>
                                </ul> <!-- termina submenu de notificaciones -->
                            </li>

                            <!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <div class="avatar avatar-online">
                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar avatar-online">
                                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <span class="fw-semibold d-block"><?php echo htmlspecialchars($nombre); ?></span>
                                                    <small class="text-muted"><?php echo htmlspecialchars($rol); ?></small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="index.html">
                                            <i class="bx bx-power-off me-2"></i>
                                            <span class="align-middle">Cerrar Sesión</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!--/ User -->
                        </ul>
                    </div>
                </nav>
                <!-- / Navbar -->
                <div class="container-xxl flex-grow-1 container-p-y">
                    <!-- Content wrapper -->
                    <div class="content-wrapper">
                        <!-- Content -->
                        <div>
                            <div class="row">
                                <!-- Catálogo de Unidades -->
                                <div class="col-12">
                                    <div class="card wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                                        <div class="container my-4">
                                            <div class="mb-3">
                                                <h4 class="font-weight-bold">Catálogo De Unidades</h4>
                                                <div class="d-flex gap-2 mt-2 align-items-center">
                                                    <!-- Input con ícono -->
                                                    <div class="input-group flex-grow-1" style="max-width: 100%;">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text d-flex align-items-center justify-content-center" id="search-addon" style="padding: 0.5rem 0.75rem;">
                                                                <i class="bx bx-search" style="font-size: 1rem;"></i>
                                                            </span>
                                                        </div>
                                                        <input id="search" type="text" class="form-control" placeholder="Buscar unidad por nombre" aria-label="Buscar" aria-describedby="search-addon">
                                                    </div>
                                                    <button id="btnAdd" class="btn btn-primary d-inline-flex align-items-center" style="white-space: nowrap; ">
                                                        <span class="mr-1">+</span> Nueva Unidad
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body scroll-wrapper position-relative">
                                                <button class="scroll-btn start-0" onclick="doScrollLeft('vehiculos')">&#8249;</button>
                                                <div id="vehiculos" class="scroll-container"></div>
                                                <button class="scroll-btn end-0" onclick="doScrollRight('vehiculos')">&#8250;</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Catálogo de Repartidores -->
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="card wow animate__animated animate__fadeInUp" data-wow-delay="0.8s">
                                        <div class="container my-4">
                                            <div class="mb-3">
                                                <h4 class="font-weight-bold">Catálogo De Repartidores</h4>
                                                <div class="d-flex gap-2 mt-2 align-items-center">
                                                    <!-- Input con ícono -->
                                                    <div class="input-group flex-grow-1" style="max-width: 100%;">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text d-flex align-items-center justify-content-center" id="search-addon-repartidor" style="padding: 0.5rem 0.75rem;">
                                                                <i class="bx bx-search" style="font-size: 1rem;"></i>
                                                            </span>
                                                        </div>
                                                        <input id="searchRepartidor" type="text" class="form-control" placeholder="Buscar repartidor por nombre" aria-label="Buscar" aria-describedby="search-addon-repartidor">
                                                    </div>
                                                    <button id="btnAddRepartidor" class="btn btn-primary d-inline-flex align-items-center" style="white-space: nowrap;">
                                                        <span class="mr-1">+</span> Nuevo Repartidor
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body scroll-wrapper position-relative">
                                                <button class="scroll-btn start-0" onclick="doScrollLeft('repartidores')">&#8249;</button>
                                                <div id="repartidores" class="scroll-container"></div>
                                                <button class="scroll-btn end-0" onclick="doScrollRight('repartidores')">&#8250;</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- MODAL UNIDADES -->
                            <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">

                                        <!-- Encabezado -->
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="modalTitle">Detalle</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                        </div>

                                        <!-- Cuerpo -->
                                        <div class="modal-body">
                                            <form id="form" class="row g-3">

                                                <div class="col-md-6">
                                                    <label class="form-label">Placa</label>
                                                    <input name="placa" class="form-control" placeholder="Ej: ABC-123" required />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Tipo principal</label>
                                                    <select name="tipoPrincipal" id="tipoPrincipal" class="form-select" required>
                                                        <option value="">Seleccione...</option>
                                                        <option value="auto">Auto</option>
                                                        <option value="moto">Moto</option>
                                                        <option value="carga">Transporte de carga pesada</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Subtipo</label>
                                                    <select name="subtipo" id="subtipo" class="form-select" required>
                                                        <option value="">Seleccione primero tipo principal</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Marca</label>
                                                    <input name="marca" class="form-control" placeholder="Ej: Toyota, Honda..." />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Modelo</label>
                                                    <input name="modelo" class="form-control" placeholder="Ej: Corolla, CR-V..." />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Año</label>
                                                    <input name="anio" type="number" class="form-control" placeholder="Ej: 2024" />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Color</label>
                                                    <input name="color" class="form-control" placeholder="Ej: Rojo, Azul..." />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Combustible</label>
                                                    <select name="combustible" class="form-select">
                                                        <option value="gasolina">Gasolina</option>
                                                        <option value="diesel">Diésel</option>
                                                        <option value="electrico">Eléctrico</option>
                                                        <option value="hibrido">Híbrido</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Capacidad de carga (kg)</label>
                                                    <input name="capacidad" type="number" class="form-control" placeholder="Ej: 500" />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Número de pasajeros</label>
                                                    <input name="pasajeros" type="number" class="form-control" placeholder="Ej: 4" />
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label">Imagen</label>
                                                    <input name="imagen" type="file" class="form-control" accept="image/*" />
                                                </div>

                                                <div class="col-md-12">
                                                    <label class="form-label">Color de engomado</label>
                                                    <div class="d-flex flex-wrap gap-3 align-items-center">
                                                        <div class="form-check d-flex align-items-center gap-2">
                                                            <input class="form-check-input engomado-check" type="radio" name="engomado" value="amarillo" id="amarillo">
                                                            <label class="form-check-label d-flex align-items-center gap-2" for="amarillo">
                                                                Amarillo
                                                                <span class="rounded-circle" style="width:20px; height:20px; background-color:#FFD700; border:1px solid #ccc;"></span>
                                                            </label>
                                                        </div>

                                                        <div class="form-check d-flex align-items-center gap-2">
                                                            <input class="form-check-input engomado-check" type="radio" name="engomado" value="rosa" id="rosa">
                                                            <label class="form-check-label d-flex align-items-center gap-2" for="rosa">
                                                                Rosa
                                                                <span class="rounded-circle" style="width:20px; height:20px; background-color:#FF69B4; border:1px solid #ccc;"></span>
                                                            </label>
                                                        </div>

                                                        <div class="form-check d-flex align-items-center gap-2">
                                                            <input class="form-check-input engomado-check" type="radio" name="engomado" value="rojo" id="rojo">
                                                            <label class="form-check-label d-flex align-items-center gap-2" for="rojo">
                                                                Rojo
                                                                <span class="rounded-circle" style="width:20px; height:20px; background-color:#FF0000; border:1px solid #ccc;"></span>
                                                            </label>
                                                        </div>

                                                        <div class="form-check d-flex align-items-center gap-2">
                                                            <input class="form-check-input engomado-check" type="radio" name="engomado" value="verde" id="verde">
                                                            <label class="form-check-label d-flex align-items-center gap-2" for="verde">
                                                                Verde
                                                                <span class="rounded-circle" style="width:20px; height:20px; background-color:#008000; border:1px solid #ccc;"></span>
                                                            </label>
                                                        </div>

                                                        <div class="form-check d-flex align-items-center gap-2">
                                                            <input class="form-check-input engomado-check" type="radio" name="engomado" value="azul" id="azul">
                                                            <label class="form-check-label d-flex align-items-center gap-2" for="azul">
                                                                Azul
                                                                <span class="rounded-circle" style="width:20px; height:20px; background-color:#1E90FF; border:1px solid #ccc;"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="col-md-12">
                                                    <label class="form-label">Días que circula</label>
                                                    <div class="d-flex flex-wrap gap-3">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="todos">
                                                            <label class="form-check-label fw-bold" for="todos">Todos</label>
                                                        </div>

                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="lunes" id="lunes"><label class="form-check-label" for="lunes">Lunes</label></div>
                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="martes" id="martes"><label class="form-check-label" for="martes">Martes</label></div>
                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="miercoles" id="miercoles"><label class="form-check-label" for="miercoles">Miércoles</label></div>
                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="jueves" id="jueves"><label class="form-check-label" for="jueves">Jueves</label></div>
                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="viernes" id="viernes"><label class="form-check-label" for="viernes">Viernes</label></div>
                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="sabado" id="sabado"><label class="form-check-label" for="sabado">Sábado</label></div>
                                                        <div class="form-check"><input class="form-check-input day-check" type="checkbox" name="dias[]" value="domingo" id="domingo"><label class="form-check-label" for="domingo">Domingo</label></div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <label class="form-label">Talones de Verificación</label>
                                                    <div class="row">
                                                        <!-- Imagen 1 -->
                                                        <div class="col-md-6">
                                                            <label class="form-label">1º Periodo</label>
                                                            <input name="talon1" type="file" class="form-control mb-2" accept="image/*" />
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="noVerifico1" name="no_verifico1" value="no_verifico1" />
                                                                <label class="form-check-label" for="noVerifico1">Aún no verifico</label>
                                                            </div>
                                                        </div>

                                                        <!-- Imagen 2 -->
                                                        <div class="col-md-6">
                                                            <label class="form-label">2º Periodo</label>
                                                            <input name="talon2" type="file" class="form-control mb-2" accept="image/*" />
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" id="noVerifico2" name="no_verifico2" value="no_verifico2" />
                                                                <label class="form-check-label" for="noVerifico2">Aún no verifico</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <label class="form-label">Tarjeta De Circulazcion</label>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <label class="form-label">Fecha de Exp</label>
                                                            <input type="date" class="form-control" name="fecha_exp" placeholder="Ej: 1990-01-01">
                                                        </div>

                                                        <div class="col-md-6">
                                                            <label class="form-label">Fecha de Vigencia</label>
                                                            <input type="date" class="form-control" name="fecha_vig" placeholder="Ej: 1990-01-01">
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <label class="form-label">NIV</label>
                                                            <input name="Nserie" class="form-control" placeholder="Ej: 12FF32221G2HJA">
                                                        </div>

                                                        <div class="col-md-6">
                                                            <label class="form-label">A Nombre de Quien Esta la unidad</label>
                                                            <input name="NombreT" class="form-control" placeholder="Ej: Monica Solis">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <label class="form-label">Comentarios / Observaciones</label>
                                                    <textarea name="comentarios" class="form-control" rows="3" placeholder="Ej: cambio de llantas pendiente, pago de tenencia próximo, falla en frenos..."></textarea>
                                                </div>
                                            </form>
                                        </div>

                                        <!-- Footer -->
                                        <div class="modal-footer">
                                            <button type="submit" form="form" class="btn btn-primary">Guardar</button>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                        </div>

                                    </div>
                                </div>
                            </div>


                            <!-- MODAL REPARTIDORES - Bootstrap 5 -->
                            <div class="modal fade" id="editModalRepartidor" tabindex="-1" aria-labelledby="modalTitleRepartidor" aria-hidden="true">
                                <div class="modal-dialog modal-xl modal-dialog-centered">
                                    <div class="modal-content">

                                        <!-- Header -->
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="modalTitleRepartidor">Nuevo Repartidor</h5>
                                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Cerrar"></button>
                                        </div>

                                        <!-- Formulario -->
                                        <form id="formRepartidor" class="form-row">
                                            <div class="modal-body">
                                                <div class="row">
                                                    <!-- Columna Izquierda -->
                                                    <div class="col-lg-6 col-12">
                                                        <div class="mb-3">
                                                            <label>Nombre completo</label>
                                                            <input type="text" class="form-control" name="nombre" placeholder="Ej: Juan Pérez" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>CURP</label>
                                                            <input type="text" class="form-control" name="curp" maxlength="18" placeholder="Ej: PEJX880101HDFRRL09">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Traker_id</label>
                                                            <input type="text" class="form-control" name="traker_id" maxlength="18" placeholder="Ej: TRK123456789">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Domicilio</label>
                                                            <textarea class="form-control" name="direccion" placeholder="Ej: Calle 123, Colonia Centro, CDMX"></textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Fecha de nacimiento</label>
                                                            <input type="date" class="form-control" name="fecha_nacimiento" placeholder="Ej: 1990-01-01">
                                                        </div>
                                                        <div class="mb-3 text-center">
                                                            <label class="form-label">Foto de Licencia</label>
                                                            <img id="previewLicencia" class="img-fluid mb-2">
                                                            <input type="file" name="foto_licencia" class="form-control">
                                                        </div>
                                                    </div>

                                                    <!-- Columna Derecha -->
                                                    <div class="col-lg-6 col-12">
                                                        <div class="mb-3">
                                                            <label>Teléfono</label>
                                                            <input type="text" class="form-control" name="telefono" placeholder="Ej: 55-1234-5678" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Número de emergencia</label>
                                                            <input type="text" class="form-control" name="numero_emergencia" placeholder="Ej: 55-9876-5432">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Correo</label>
                                                            <input type="email" class="form-control" name="correo" placeholder="Ej: juan.perez@email.com">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Edad</label>
                                                            <input type="text" class="form-control" name="edad" placeholder="Ej: 33">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label>Comentarios</label>
                                                            <textarea class="form-control" name="comentarios" placeholder="Ej: Horario de entrega flexible"></textarea>
                                                        </div>
                                                        <div class="mb-3 text-center">
                                                            <label class="form-label">Foto del Repartidor</label>
                                                            <img id="previewImagenRepartidor" class="img-fluid mb-2">
                                                            <input type="file" name="imagen" class="form-control">
                                                        </div>
                                                    </div>

                                                    <!-- Footer con botones -->
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                                        <button type="submit" class="btn btn-primary">Guardar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                </div>
                            </div>

                            <!-- MODAL REPARTIDORES - Bootstrap 5 -->
                            <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-md modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="viewModalLabel">Detalle de Unidad</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                        </div>

                                        <div class="modal-body text-center">
                                            <!-- Imagen centrada -->
                                            <img id="vImagen" src="" alt="Imagen Unidad"
                                                class="img-fluid rounded mb-3 shadow-sm"
                                                style="max-height: 280px; width: auto; object-fit: cover;">

                                            <!-- Datos debajo de la imagen en 2 columnas más compactas -->
                                            <div class="container">
                                                <div class="row justify-content-center text-start">
                                                    <div class="col-md-5 col-sm-12">
                                                        <p><strong>Placa:</strong> <span id="vPlaca"></span></p>
                                                        <p><strong>Marca:</strong> <span id="vMarca"></span></p>
                                                        <p><strong>Modelo:</strong> <span id="vModelo"></span></p>
                                                    </div>
                                                    <div class="col-md-5 col-sm-12">
                                                        <p><strong>Color:</strong> <span id="vColor"></span></p>
                                                        <p><strong>Engomado:</strong> <span id="vEngomado"></span></p>
                                                        <p><strong>Periodo de verificación:</strong> <span id="vPeriodo"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="modal-footer d-flex justify-content-between">
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-primary" id="btnDetalles">🗑 Mas Detalles</button>
                                                <button type="button" id="btnEditar" style="background-color: #ffc107; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">✏ Editar</button>
                                                <button type="button" id="btnEliminar" style="background-color: red; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">🗑 Eliminar</button>
                                            </div>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- MODAL DETALLE AMPLIADO -->
                            <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="detailModalLabel">Detalles Ampliados de la Unidad</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <!-- Columna Izquierda -->
                                                    <div class="col-md-6">
                                                        <p><strong>Año:</strong> <span id="dAnio"></span></p>
                                                        <p><strong>Tipo Principal:</strong> <span id="dTipoPrincipal"></span></p>
                                                        <p><strong>Subtipo:</strong> <span id="dSubtipo"></span></p>
                                                        <p><strong>Combustible:</strong> <span id="dCombustible"></span></p>
                                                        <p><strong>Capacidad:</strong> <span id="dCapacidad"></span></p>
                                                        <p><strong>Pasajeros:</strong> <span id="dPasajeros"></span></p>
                                                        <p><strong>Días que no circula:</strong> <span id="dDias"></span></p>
                                                        <p><strong>Fecha de Exp:</strong> <span id="dFexp"></span></p>
                                                        <p><strong>Fecha de Vigencia:</strong> <span id="dFvig"></span></p>
                                                        <p><strong>Titular:</strong> <span id="dTitular"></span></p>
                                                        <p><strong>NIV:</strong> <span id="dNIV"></span></p>
                                                        <p><strong>Comentarios:</strong> <span id="dComentarios"></span></p>
                                                        <p><strong>Estado:</strong> <span id="dEstado"></span></p>
                                                    </div>

                                                    <!-- Columna Derecha -->
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <p><strong>Talon 1</strong></p>
                                                            <img id="dImagenTalon1" src="imagen_talon/default.png" alt="Talon 1"
                                                                class="img-fluid rounded shadow-sm"
                                                                style="max-height: 280px; width: auto; object-fit: cover;">
                                                        </div>
                                                        <div class="mb-3">
                                                            <p><strong>Talon 2</strong></p>
                                                            <img id="dImagenTalon2" src="imagen_talon/default.png" alt="Talon 2"
                                                                class="img-fluid rounded shadow-sm"
                                                                style="max-height: 280px; width: auto; object-fit: cover;">
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer d-flex justify-content-between">
                                            <button type="button" class="btn btn-secondary" id="btnRegresar">Regresar</button>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                        </div>

                                    </div>
                                </div>
                            </div>


                            <!-- MODAL DETALLE REPARTIDOR -->
                            <div class="modal fade" id="viewModalRepartidor" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Detalle del Repartidor</h5>
                                            <button type="button" class="btn-close" aria-label="Cerrar" id="btnCloseViewRepartidor"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <!-- Columna Izquierda: Foto y datos del Repartidor -->
                                                    <div class="col-md-6 col-12 d-flex flex-column mb-3">
                                                        <p><strong>Repartidor</strong></p>
                                                        <img id="dFotoRepartidor" src="" alt="Foto Repartidor" class="img-fluid rounded mb-2" style="max-height:180px; object-fit:cover;">
                                                        <p><strong>Nombre:</strong> <span id="dNombre"></span></p>
                                                        <p><strong>CURP:</strong> <span id="dCurp"></span></p>
                                                        <p><strong>Traker ID:</strong> <span id="dTrakerId"></span></p>
                                                        <p><strong>Teléfono:</strong> <span id="dTelefono"></span></p>
                                                        <p><strong>Correo:</strong> <span id="dCorreo"></span></p>
                                                        <p><strong>Comentarios:</strong> <span id="dComentarios"></span></p>
                                                    </div>

                                                    <!-- Columna Derecha: Foto y datos de Licencia -->
                                                    <div class="col-md-6 col-12 d-flex flex-column mb-3">
                                                        <p><strong>Licencia</strong></p>
                                                        <img id="dFotoLicencia" src="" alt="Licencia" class="img-fluid rounded mb-2" style="max-height:180px; object-fit:cover;">
                                                        <p><strong>Edad:</strong> <span id="dEdad"></span></p>
                                                        <p><strong>Dirección:</strong> <span id="dDireccion"></span></p>
                                                        <p><strong>Número de emergencia:</strong> <span id="dNumEmergencia"></span></p>
                                                        <p><strong>Fecha de nacimiento:</strong> <span id="dFechaNacimiento"></span></p>
                                                        <p><strong>Estatus:</strong> <span id="dEstatus"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer d-flex justify-content-between">
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-warning" id="btnEditarRepartidor">✏ Editar</button>
                                                <button type="button" class="btn btn-danger" id="btnEliminarRepartidor">🗑 Eliminar</button>
                                            </div>
                                            <button type="button" class="btn btn-secondary" id="btnCerrarViewRepartidor">Cerrar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>


                </div>

            </div>
            <!-- Overlay -->
            <div class="layout-overlay layout-menu-toggle"></div>
        </div>
        <!-- / Layout wrapper -->



        <!-- Core JS -->
        <!-- build:js assets/vendor/js/core.js -->
        <script src="../assets/vendor/libs/jquery/jquery.js"></script>
        <script src="../assets/vendor/libs/popper/popper.js"></script>
        <script src="../assets/vendor/js/bootstrap.js"></script>
        <script src="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

        <script src="../assets/vendor/js/menu.js"></script>
        <!-- endbuild -->

        <!-- Vendors JS -->
        <script src="../assets/vendor/libs/apex-charts/apexcharts.js"></script>

        <!-- Main JS -->
        <script src="../assets/js/main.js"></script>

        <!-- Page JS -->
        <script src="../assets/js/dashboards-analytics.js"></script>

        <!-- Place this tag in your head or just before your close body tag. -->
        <script async defer src="https://buttons.github.io/buttons.js"></script>

        <!-- WOW.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
        <script>
            new WOW().init();
        </script>


        <div class="modal fade" id="modalBusqueda" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Buscar módulo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <div class="input-group mb-4">
                            <span class="input-group-text"><i class="bx bx-search"></i></span>
                            <input type="text" id="modalSearchInput" class="form-control" placeholder="Buscar módulo..." autocomplete="off">
                        </div>

                        <div class="row" id="modulosEstaticos">
                            <!-- Columna 1 -->
                            <div class="col-md-4 mb-4">
                                <!-- Inicio -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-home me-1"></i> Inicio
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1">
                                            <a href="tablero.php"><i class="bx bx-home-smile me-2"></i> Panel principal</a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- Ventas -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-money me-1"></i> Ventas
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="facturas.php"><i class="bx bx-file me-2"></i> Facturas</a></li>
                                    </ul>
                                </div>
                                <!-- Clientes -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-user me-1"></i> Clientes
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="clientes.php"><i class="bx bx-user-pin me-2"></i> Clientes</a></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Columna 2 -->
                            <div class="col-md-4 mb-4">
                                <!-- Inventario -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-package me-1"></i> Inventario
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="productos.php"><i class="bx bx-cube me-2"></i> Productos</a></li>
                                    </ul>
                                </div>
                                <!-- Compras -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-cart me-1"></i> Compras
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="compras.php"><i class="bx bx-purchase-tag me-2"></i> Compras</a></li>
                                    </ul>
                                </div>
                            </div>

                            <!-- Columna 3 -->
                            <div class="col-md-4 mb-4">
                                <!-- Proveedores -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-building me-1"></i> Proveedores
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="proveedores.php"><i class="bx bx-user-voice me-2"></i> Proveedores</a></li>
                                    </ul>
                                </div>
                                <!-- Cuentas -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-wallet me-1"></i> Cuentas
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="cuentas.php"><i class="bx bx-credit-card me-2"></i> Cuentas</a></li>
                                    </ul>
                                </div>
                                <!-- Movimientos -->
                                <div class="mb-3">
                                    <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                        <i class="bx bx-transfer me-1"></i> Movimientos
                                    </small>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-0 py-1"><a href="movimientos.php"><i class="bx bx-transfer-alt me-2"></i> Movimientos</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Resultados de búsqueda -->
                        <ul id="modalSearchResults" class="list-group mb-3"></ul>

                    </div>
                </div>
            </div>
        </div>


</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> -->
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const checkTodos = document.getElementById("todos");
        const checkDias = document.querySelectorAll(".day-check");
        const vehiculosContainer = document.getElementById('vehiculos');
        const btnAdd = document.getElementById('btnAdd');
        const form = document.getElementById('form');
        const modalEdit = $('#editModal');
        const modalView = $('#viewModal');
        const modalTitle = document.getElementById('modalTitle');
        const search = document.getElementById('search');
        const notificacionesLista = document.querySelector('.dropdown-notifications-list .list-group');
        const badgeNoti = document.querySelector('.badge-notifications');
        const detailModal = new bootstrap.Modal(document.getElementById("detailModal"));
        const btnRegresar = document.getElementById('btnRegresar');


        let editingId = null;
        let autos = [];
        let alertasMostradas = false;
        const agregarNotificacion = (titulo, mensaje, hora = "Ahora", tipo = "info") => {
            const li = document.createElement('li');
            li.className = 'list-group-item list-group-item-action dropdown-notifications-item';

            const icono =
                tipo === 'warning' ? '⚠️' :
                tipo === 'success' ? '✅' :
                tipo === 'error' ? '❌' : 'ℹ️';

            li.innerHTML = `
            <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                    <div class="avatar">
                        <span class="avatar-initial rounded-circle bg-label-primary">${icono}</span>
                    </div>
                </div>
                <div class="flex-grow-1">
                    <h6 class="small mb-0">${titulo}</h6>
                    <small class="mb-1 d-block text-body">${mensaje}</small>
                    <small class="text-body-secondary">${hora}</small>
                </div>
                <div class="flex-shrink-0 dropdown-notifications-actions">
                    <a href="javascript:void(0)" class="dropdown-notifications-read">
                        <span class="badge badge-dot"></span>
                    </a>
                    <a href="javascript:void(0)" class="dropdown-notifications-archive">
                        <span class="icon-base bx bx-x"></span>
                    </a>
                </div>
            </div>
        `;
            notificacionesLista.prepend(li);

            // 🔴 Enciende el punto rojo en el ícono
            badgeNoti.classList.add('bg-danger');
        };

        // ------------------- MAPA ENGOMADO Y DÍA -------------------
        const engomadoPorPlaca = {
            '1': {
                color: 'VERDE',
                diaNoCircula: 4
            },
            '2': {
                color: 'VERDE',
                diaNoCircula: 4
            },
            '3': {
                color: 'ROJO',
                diaNoCircula: 3
            },
            '4': {
                color: 'ROJO',
                diaNoCircula: 3
            },
            '5': {
                color: 'AMARILLO',
                diaNoCircula: 1
            },
            '6': {
                color: 'AMARILLO',
                diaNoCircula: 1
            },
            '7': {
                color: 'ROSA',
                diaNoCircula: 2
            },
            '8': {
                color: 'ROSA',
                diaNoCircula: 2
            },
            '9': {
                color: 'AZUL',
                diaNoCircula: 5
            },
            '0': {
                color: 'AZUL',
                diaNoCircula: 5
            },
        };

        const actualizarEngomadoYDias = (placa) => {
            if (!placa) return;

            // Buscar el último dígito numérico
            const numeros = placa.match(/\d/g);
            if (!numeros || numeros.length === 0) return;
            const ultimoNumero = numeros[numeros.length - 1];

            const info = engomadoPorPlaca[ultimoNumero];
            if (!info) return;

            // Seleccionar radio correcto
            document.querySelectorAll('.engomado-check').forEach(radio => {
                radio.checked = radio.value.toLowerCase() === info.color.toLowerCase();
            });

            // Días que circula (todos menos el día que no circula)
            checkDias.forEach(c => {
                // Mapear nombre del día a valor del checkbox
                const diasMap = {
                    1: 'lunes',
                    2: 'martes',
                    3: 'miercoles',
                    4: 'jueves',
                    5: 'viernes',
                    6: 'sabado',
                    7: 'domingo'
                };
                c.checked = c.value !== diasMap[info.diaNoCircula];
            });

            // Checkbox "Todos"
            checkTodos.checked = Array.from(checkDias).every(ch => ch.checked);
        };


        // ------------------- PERMISO DE NOTIFICACIONES -------------------
        if (Notification.permission !== "granted") {
            Notification.requestPermission().then(permission => {
                if (permission === "granted") console.log("✅ Permiso de notificaciones concedido");
            });
        }

        // ------------------- LISTAR VEHÍCULOS -------------------
        const fetchVehiculos = async (mostrarAlertas = false) => {
            try {
                const res = await fetch('guardar_unidad.php?action=list');
                autos = await res.json();
                renderVehiculos(autos);

                if (mostrarAlertas && !alertasMostradas) {
                    // Ejecutar alertas de engomado y tarjeta de circulación en orden secuencial
                    for (const alertaFunc of [mostrarAlertasSecuenciales, mostrarAlertaTarjetaCirculacion]) {
                        await alertaFunc(autos);
                        if (alertasPausadas) break; // detener si el usuario abrió un modal de edición
                    }

                    alertasMostradas = true;
                }
            } catch (err) {
                console.error(err);
                Swal.fire("Error", "No se pudieron cargar las unidades", "error");
            }
        };


        const renderVehiculos = (data) => {

            vehiculosContainer.innerHTML = '';
            data.forEach(v => {
                const card = document.createElement('div');
                card.className = 'card flex-shrink-0';
                card.style.width = '350px';
                card.innerHTML = `
                                 <div class="card" style="border: 2px solid #f9f9f9ff; border-radius: 8px;">
                                     <div class="card-body">
                                         <h6 class="card-title">  ${(v.marca || '').toUpperCase()} ${(v.modelo || '').toUpperCase()}
                                         </h6>
                                         <img src="${v.imagen ? 'imagenes_vehiculos/' + v.imagen : 'imagenes_vehiculos/default.png'}"
                                              class="img-fluid d-flex mx-auto my-6 rounded" style="height:220px; object-fit:cover; margin-bottom: 20px;">
                                         
                                         <p class="text-muted mb-1"><strong>Placa:</strong> ${v.placa || ''}</p>
                                         <p class="text-muted mb-1"><strong>Color:</strong> ${v.color || ''}</p>
                                         <p class="text-muted mb-1"><strong>Año:</strong> ${v.anio || ''}</p>
                                         <p class="text-muted mb-1"><strong>Subtipo:</strong> ${v.subtipo || ''}</p>
                                         <p class="text-muted mb-1"><strong>Engomado:</strong> ${v.engomado || 'N/A'}</p>
                                         <button class="btn btn-primary w-100 btn-view" data-id="${v.id_unidad}">Ver</button>
                                     </div>
                                 </div>
        `;
                vehiculosContainer.appendChild(card);
            });

            document.querySelectorAll('.btn-view').forEach(btn => {
                btn.addEventListener('click', () => openView(btn.dataset.id));
            });
        };

        // ------------------- ALERTAS SECUNCIALES -------------------
        let alertasPausadas = false;
        let colaAlertas = [];

        const mostrarAlertasSecuenciales = async (vehiculos) => {
            const periodos = {
                'AMARILLO': {
                    primero: 'Enero-Febrero',
                    segundo: 'Julio-Agosto'
                },
                'ROSA': {
                    primero: 'Febrero-Marzo',
                    segundo: 'Agosto-Septiembre'
                },
                'ROJO': {
                    primero: 'Marzo-Abril',
                    segundo: 'Septiembre-Octubre'
                },
                'VERDE': {
                    primero: 'Abril-Mayo',
                    segundo: 'Octubre-Noviembre'
                },
                'AZUL': {
                    primero: 'Mayo-Junio',
                    segundo: 'Noviembre-Diciembre'
                }
            };

            const mesesActuales = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
                'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
            ];
            const mesActual = mesesActuales[new Date().getMonth()];

            for (const v of vehiculos) {
                if (v.talon1 && v.talon2) continue;
                const engomado = (v.engomado || '').toUpperCase().trim();
                const datosPeriodo = periodos[engomado];
                if (!datosPeriodo) continue;

                const estaEnPeriodo = p => p.toLowerCase().includes(mesActual);
                if (!(estaEnPeriodo(datosPeriodo.primero) || estaEnPeriodo(datosPeriodo.segundo))) continue;

                const calcularDiasRestantes = (periodoTexto) => {
                    const meses = {
                        "enero": 0,
                        "febrero": 1,
                        "marzo": 2,
                        "abril": 3,
                        "mayo": 4,
                        "junio": 5,
                        "julio": 6,
                        "agosto": 7,
                        "septiembre": 8,
                        "octubre": 9,
                        "noviembre": 10,
                        "diciembre": 11
                    };
                    const partes = periodoTexto.toLowerCase().split('-');
                    if (partes.length < 2) return null;
                    const mesFinIndex = meses[partes[1].trim()];
                    if (mesFinIndex === undefined) return null;
                    const hoy = new Date();
                    const finPeriodo = new Date(hoy.getFullYear(), mesFinIndex + 1, 0);
                    const diffMs = finPeriodo - hoy;
                    const diffDias = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
                    return diffDias > 0 ? diffDias : 0;
                };

                const diasRestantes = calcularDiasRestantes(datosPeriodo.segundo);
                if (diasRestantes > 15 || diasRestantes === 0) continue;

                const alerta = async () => {
                    const mensajeDias = `Te quedan <strong>${diasRestantes}</strong> día${diasRestantes === 1 ? '' : 's'} para que termine el periodo.`;

                    // ✅ Agregar notificación interna
                    agregarNotificacion(
                        "Verificación pendiente",
                        `Tu vehículo ${v.marca} ${v.modelo} (${v.placa}) debe verificarse pronto.`,
                        "Hace un momento",
                        "warning"
                    );

                    const result = await Swal.fire({
                        icon: 'info',
                        title: '¡Verifica tu vehículo!',
                        html: `<p>Tienes que verificar tu vehículo <strong>${(v.marca+' '+v.modelo+' '+v.color).toUpperCase()}</strong><br>
                           con placas <strong>${v.placa.toUpperCase()}</strong> y engomado <strong>${v.engomado.toUpperCase()}</strong></p>
                           <p><strong>Primer periodo:</strong> ${datosPeriodo.primero}<br>
                           <strong>Segundo periodo:</strong> ${datosPeriodo.segundo}</p>
                           <p><strong>${mensajeDias}</strong></p>`,
                        showCancelButton: true,
                        confirmButtonText: 'Editar',
                        cancelButtonText: 'Cerrar'
                    });

                    if (result.isConfirmed) {
                        alertasPausadas = true;
                        openModal(v.id_unidad);
                        $('#viewModal').modal('hide');
                    }
                };

                if (alertasPausadas) colaAlertas.push(alerta);
                else await alerta();
            }
        };

        const mostrarAlertaTarjetaCirculacion = async (vehiculos) => {
            const hoy = new Date();

            for (const v of vehiculos) {
                if (!v.fecha_vig) continue; // ignorar si no hay fecha de vigencia

                const vigencia = new Date(v.fecha_vig);
                const diffMs = vigencia - hoy;
                const diffDias = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

                if (diffDias > 0 && diffDias <= 15) {
                    const alerta = async () => {
                        // Notificación interna
                        agregarNotificacion(
                            "Tarjeta de circulación próxima a vencer",
                            `Tu vehículo ${v.marca} ${v.modelo} ${v.placa} vence en ${diffDias} día${diffDias === 1 ? '' : 's'}.`,
                            "Hace un momento",
                            "warning"
                        );

                        // SweetAlert
                        const result = await Swal.fire({
                            icon: 'warning',
                            title: '¡Tarjeta de circulación por vencer!',
                            html: `<p>Tu vehículo <strong>${v.marca} ${v.modelo} (${v.placa})</strong> tiene su tarjeta de circulación próxima a vencer.</p>
                           <p><strong>Fecha de vigencia:</strong> ${v.fecha_vig}<br>
                           <strong>Días restantes:</strong> ${diffDias}</p>`,
                            showCancelButton: true,
                            confirmButtonText: 'Editar',
                            cancelButtonText: 'Cerrar'
                        });

                        if (result.isConfirmed) {
                            alertasPausadas = true;
                            openModal(v.id_unidad);
                            $('#viewModal').modal('hide');
                        }
                    };

                    if (alertasPausadas) colaAlertas.push(alerta);
                    else await alerta();
                }
            }
        };

        $('#editModal').on('hidden.bs.modal', async () => {
            alertasPausadas = false;
            while (colaAlertas.length > 0) {
                const alertaPendiente = colaAlertas.shift();
                await alertaPendiente();
                if (alertasPausadas) break;
            }
        });

        // ------------------- ABRIR MODAL DETALLE -------------------
        const openView = (id) => {
            const v = autos.find(a => a.id_unidad == id);
            if (!v) return;

            // --- Datos del modal viewModal ---
            document.getElementById('vPlaca').textContent = v.placa || '';
            document.getElementById('vMarca').textContent = v.marca || '';
            document.getElementById('vModelo').textContent = v.modelo || '';
            document.getElementById('vColor').textContent = v.color || '';
            document.getElementById('vEngomado').textContent = v.engomado || '';

            const periodos = {
                'AMARILLO': {
                    primero: 'Enero-Febrero',
                    segundo: 'Julio-Agosto'
                },
                'ROSA': {
                    primero: 'Febrero-Marzo',
                    segundo: 'Agosto-Septiembre'
                },
                'ROJO': {
                    primero: 'Marzo-Abril',
                    segundo: 'Septiembre-Octubre'
                },
                'VERDE': {
                    primero: 'Abril-Mayo',
                    segundo: 'Octubre-Noviembre'
                },
                'AZUL': {
                    primero: 'Mayo-Junio',
                    segundo: 'Noviembre-Diciembre'
                }
            };
            const datosPeriodo = periodos[(v.engomado || '').toUpperCase()] || null;
            document.getElementById('vPeriodo').innerHTML = datosPeriodo ? `<strong>1º:</strong> ${datosPeriodo.primero}<br><strong>2º:</strong> ${datosPeriodo.segundo}` : 'N/A';

            document.getElementById('vImagen').src = v.imagen ? 'imagenes_vehiculos/' + v.imagen : 'imagenes_vehiculos/default.png';
            editingId = id;

            // --- Botón Editar ---
            $('#btnEditar').off('click').on('click', () => {
                openModal(id);
                $('#viewModal').modal('hide');
            });

            // --- Botón Eliminar ---
            $('#btnEliminar').off('click').on('click', async () => {
                const result = await Swal.fire({
                    title: '¿Seguro que quieres eliminar?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                });
                if (result.isConfirmed) {
                    try {
                        const res = await fetch('guardar_unidad.php?action=delete&id=' + id);
                        const data = await res.json();
                        Swal.fire(data.success ? "Éxito" : "Error", data.message, data.success ? "success" : "error");
                        if (data.success) {
                            $('#viewModal').modal('hide');
                            fetchVehiculos();
                        }
                    } catch (err) {
                        console.error(err);
                        Swal.fire("Error", "Error al eliminar el vehículo", "error");
                    }
                }
            });

            // --- Botón Más Detalles ---
            $('#btnDetalles').off('click').on('click', () => {
                // Cargar datos en detailModal
                document.getElementById('dAnio').textContent = v.anio || '';
                document.getElementById('dTipoPrincipal').textContent = v.tipo_principal || '';
                document.getElementById('dSubtipo').textContent = v.subtipo || '';
                document.getElementById('dCombustible').textContent = v.tipo_combustible || '';
                document.getElementById('dCapacidad').textContent = v.capacidad_peso || '';
                document.getElementById('dPasajeros').textContent = v.pasajeros || '';
                const diasSemana = {
                    1: 'Lunes',
                    2: 'Martes',
                    3: 'Miércoles',
                    4: 'Jueves',
                    5: 'Viernes',
                    6: 'Sábado',
                    7: 'Domingo'
                };

                // Suponiendo que v.dias_circula = "1,2"
                const diasArray = v.dias_circula ? v.dias_circula.split(',') : [];
                const diasNombres = diasArray.map(d => diasSemana[d.trim()]).join(', ');

                document.getElementById('dDias').textContent = diasNombres || 'N/A';

                document.getElementById('dFexp').textContent = v.fecha_exp || '';
                document.getElementById('dFvig').textContent = v.fecha_vig || '';
                document.getElementById('dTitular').textContent = v.NombreT || '';
                document.getElementById('dNIV').textContent = v.Nserie || '';
                document.getElementById('dComentarios').textContent = v.comentarios || '';
                document.getElementById('dEstado').textContent = v.estado || '';
                document.getElementById('dImagenTalon1').src = v.talon1 ? 'imagen_talon/' + v.talon1 : 'imagen_talon/default.png';
                document.getElementById('dImagenTalon2').src = v.talon2 ? 'imagen_talon/' + v.talon2 : 'imagen_talon/default.png';

                // Ocultar viewModal y mostrar detailModal usando jQuery
                $('#viewModal').modal('hide');
                $('#detailModal').modal('show');
            });

            // --- Mostrar viewModal ---
            $('#viewModal').modal('show');
        };

        // --- Botón Regresar ---
        $('#btnRegresar').off('click').on('click', () => {
            $('#detailModal').modal('hide'); // Oculta detailModal
            $('#viewModal').modal('show'); // Muestra viewModal
        });


        // ------------------- ABRIR MODAL EDICIÓN -------------------
        const openModal = (id = null) => {
            editingId = id;
            form.reset();

            // Limpiar checkboxes
            checkDias.forEach(c => c.checked = false);
            checkTodos.checked = false;

            // Título del modal
            modalTitle.textContent = id ? 'Editar Vehículo' : 'Nueva Unidad';

            // Función segura para asignar valores
            const setFormValue = (name, value) => {
                const el = form.querySelector(`[name="${name}"]`);
                if (el) el.value = value || '';
            };

            if (id) {
                const v = autos.find(a => a.id_unidad == id);
                if (!v) return;

                // 📋 Campos de texto y select
                setFormValue('placa', v.placa);
                setFormValue('tipoPrincipal', v.tipo_principal);
                updateSubtipoOptions();
                setFormValue('subtipo', v.subtipo);
                setFormValue('marca', v.marca);
                setFormValue('modelo', v.modelo);
                setFormValue('anio', v.anio);
                setFormValue('color', v.color);
                setFormValue('combustible', v.tipo_combustible);
                setFormValue('capacidad', v.capacidad_peso);
                setFormValue('pasajeros', v.pasajeros);
                setFormValue('comentarios', v.comentarios);
                setFormValue('estado', v.estado);
                setFormValue('Nserie', v.Nserie);
                setFormValue('NombreT', v.NombreT);
                setFormValue('fecha_exp', v.fecha_exp);
                setFormValue('fecha_vig', v.fecha_vig);

                // 🎨 Engomado (radio buttons)
                document.querySelectorAll('.engomado-check').forEach(radio => {
                    radio.checked = radio.value.toLowerCase() === (v.engomado || '').toLowerCase();
                });

                // 📅 Días de circulación
                const diasArray = (v.dias_circula || '').split(',').map(d => d.trim());
                checkDias.forEach(c => {
                    c.checked = diasArray.includes(c.value);
                });
                checkTodos.checked = Array.from(checkDias).every(ch => ch.checked);

                // 🖼️ Previews de imágenes
                const previewVehiculo = document.getElementById('previewVehiculo');
                const previewTalon1 = document.getElementById('previewTalon1');
                const previewTalon2 = document.getElementById('previewTalon2');

                if (previewVehiculo)
                    previewVehiculo.src = v.imagen ? 'imagenes_vehiculos/' + v.imagen : 'imagenes_vehiculos/default.png';
                if (previewTalon1)
                    previewTalon1.src = v.talon1 ? 'imagen_talon/' + v.talon1 : 'imagen_talon/default.png';
                if (previewTalon2)
                    previewTalon2.src = v.talon2 ? 'imagen_talon/' + v.talon2 : 'imagen_talon/default.png';

                // 🚦 Actualizar engomado y días automáticamente si no hay engomado
                if (!v.engomado) actualizarEngomadoYDias(v.placa);
            } else {
                // Nuevo vehículo: limpiar previews
                const previewVehiculo = document.getElementById('previewVehiculo');
                const previewTalon1 = document.getElementById('previewTalon1');
                const previewTalon2 = document.getElementById('previewTalon2');
                if (previewVehiculo) previewVehiculo.src = 'imagenes_vehiculos/default.png';
                if (previewTalon1) previewTalon1.src = 'imagen_talon/default.png';
                if (previewTalon2) previewTalon2.src = 'imagen_talon/default.png';
            }

            modalEdit.modal('show');
        };

        btnAdd.addEventListener('click', () => openModal());

        // ------------------- AUTOMÁTICO AL CAMBIAR PLACA -------------------
        form.placa.addEventListener('input', e => actualizarEngomadoYDias(e.target.value));

        // ------------------- SUBTIPO DINÁMICO -------------------
        const tipoPrincipalEl = document.getElementById('tipoPrincipal');
        const subtipoEl = document.getElementById('subtipo');
        const subtipoOptions = {
            auto: ['Sedán', 'Hatchback', 'SUV', 'Coupe'],
            moto: ['Motoneta', 'De Trabajo', 'Cross', 'Crucero', 'Chopper'],
            carga: ['Camioneta', 'Tráiler', 'Camión']
        };
        const updateSubtipoOptions = () => {
            subtipoEl.innerHTML = '<option value="">Seleccione...</option>';
            const val = tipoPrincipalEl.value;
            if (val && subtipoOptions[val]) subtipoOptions[val].forEach(s => {
                subtipoEl.appendChild(Object.assign(document.createElement('option'), {
                    value: s,
                    textContent: s
                }));
            });
        };
        tipoPrincipalEl.addEventListener('change', updateSubtipoOptions);

        // ------------------- SELECCIÓN DE DÍAS -------------------
        checkTodos.addEventListener("change", () => checkDias.forEach(c => c.checked = checkTodos.checked));
        checkDias.forEach(c => c.addEventListener("change", () => checkTodos.checked = Array.from(checkDias).every(ch => ch.checked)));

        // ------------------- BUSCADOR -------------------
        search.addEventListener('input', () => renderVehiculos(
            autos.filter(v => (v.marca + ' ' + v.modelo).toLowerCase().includes(search.value.toLowerCase()))
        ));

        // ------------------- GUARDAR -------------------
        form.addEventListener('submit', async e => {
            e.preventDefault();
            const formData = new FormData(form);
            if (editingId) formData.append('id', editingId);
            try {
                const res = await fetch('guardar_unidad.php?action=save', {
                    method: 'POST',
                    body: formData
                });
                const data = await res.json();
                Swal.fire(data.success ? "Éxito" : "Error", data.message, data.success ? "success" : "error");
                if (data.success) {
                    modalEdit.modal('hide');
                    fetchVehiculos(); // no muestra alertas
                }
            } catch (err) {
                console.error(err);
                Swal.fire("Error", "Error al guardar el vehículo", "error");
            }
        });

        // ------------------- INICIALIZAR -------------------
        fetchVehiculos(true);
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        // Elementos
        const listaRepartidores = document.getElementById("repartidores");
        const searchRepartidor = document.getElementById("searchRepartidor");
        const btnAddRepartidor = document.getElementById("btnAddRepartidor");
        const formRepartidor = document.getElementById("formRepartidor");

        // Inicializar modales Bootstrap 5
        const modalRepartidor = new bootstrap.Modal(document.getElementById("editModalRepartidor"));
        const viewModalRepartidor = new bootstrap.Modal(document.getElementById("viewModalRepartidor"));

        const btnEditarRepartidor = document.getElementById("btnEditarRepartidor");
        const btnEliminarRepartidor = document.getElementById("btnEliminarRepartidor");
        const btnCerrarViewRepartidor = document.getElementById("btnCerrarViewRepartidor");
        const btnCloseViewRepartidor = document.getElementById("btnCloseViewRepartidor");

        let repartidores = [];
        let editingId = null;
        window.currentRepartidorId = null;

        // ================== LISTAR ==================
        async function cargarRepartidores() {
            try {
                const res = await fetch("guardar_repartidores.php?action=list");
                const json = await res.json();
                if (json.success) {
                    repartidores = json.data;
                    renderRepartidores();
                }
            } catch (err) {
                console.error(err);
                Swal.fire("Error", "Error al cargar repartidores", "error");
            }
        }

        function renderRepartidores() {
            const term = searchRepartidor.value.toLowerCase();
            listaRepartidores.innerHTML = "";

            repartidores
                .filter(r => r.nombre.toLowerCase().includes(term))
                .forEach(r => {
                    const card = document.createElement("div");
                    card.className = "card shadow-sm mb-3";
                    card.style.minWidth = "350px";
                    card.innerHTML = `
                                      <div class="card">
                                        <div class="card-body" style="border: 2px solid #f9f9f9ff; border-radius: 8px;">
                                          <h6 class="card-title">${r.nombre.toUpperCase()}</h6>
                                          <img src="${r.foto_repartidor || 'https://via.placeholder.com/150'}"
                                               class="img-fluid d-flex mx-auto my-3 rounded"
                                               style="height:220px; object-fit:cover; margin-bottom: 10px;">
                                          <div>
                                            <p class="text-muted mb-1"><strong>Tel:</strong> ${r.telefono || '-'}</p>
                                            <p class="text-muted mb-1"><strong>Correo:</strong> ${r.correo || '-'}</p>
                                            <button class="btn btn-primary w-100" data-id="${r.id}">Ver</button>
                                          </div>
                                        </div>
                                      </div>
                `;
                    listaRepartidores.appendChild(card);

                    card.querySelector("button").addEventListener("click", () => verRepartidor(r.id));
                });
        }

        // ================== VER REPARTIDOR ==================
        function verRepartidor(id) {
            const r = repartidores.find(x => x.id == id);
            if (!r) return;

            window.currentRepartidorId = id;

            document.getElementById("dNombre").textContent = r.nombre || "";
            document.getElementById("dCurp").textContent = r.curp || "";
            document.getElementById("dTrakerId").textContent = r.traker_id || "";
            document.getElementById("dTelefono").textContent = r.telefono || "";
            document.getElementById("dCorreo").textContent = r.correo || "";
            document.getElementById("dEdad").textContent = r.edad || "";
            document.getElementById("dDireccion").textContent = r.direccion || "";
            document.getElementById("dNumEmergencia").textContent = r.numero_emergencia || "";
            document.getElementById("dFechaNacimiento").textContent = r.fecha_nacimiento || "";
            document.getElementById("dEstatus").textContent = r.estatus || "";
            document.getElementById("dComentarios").textContent = r.comentarios || "";

            document.getElementById("dFotoRepartidor").src = r.foto_repartidor || "https://via.placeholder.com/150";
            document.getElementById("dFotoLicencia").src = r.foto_licencia || "https://via.placeholder.com/150";

            viewModalRepartidor.show();
        }

        window.verRepartidor = verRepartidor;

        // ================== BOTONES CERRAR DETALLE ==================
        btnCerrarViewRepartidor.addEventListener("click", () => viewModalRepartidor.hide());
        btnCloseViewRepartidor.addEventListener("click", () => viewModalRepartidor.hide());

        // ================== BOTÓN EDITAR DESDE DETALLES ==================
        btnEditarRepartidor.addEventListener("click", () => {
            const r = repartidores.find(x => x.id == window.currentRepartidorId);
            if (!r) return;

            editingId = r.id;
            document.querySelector("#editModalRepartidor .modal-title").textContent = "Editar Repartidor";

            // Rellenar inputs excepto archivos
            Object.keys(r).forEach(key => {
                const input = formRepartidor[key];
                if (input && input.type !== "file") input.value = r[key] || "";
            });

            // Previsualizar fotos existentes
            if (r.foto_licencia) {
                document.getElementById("previewLicencia").src = r.foto_licencia;
                document.getElementById("previewLicencia").style.display = "none";
            } else {
                document.getElementById("previewLicencia").style.display = "none";
            }

            if (r.foto_repartidor) {
                document.getElementById("previewImagenRepartidor").src = r.foto_repartidor;
                document.getElementById("previewImagenRepartidor").style.display = "none";
            } else {
                document.getElementById("previewImagenRepartidor").style.display = "none";
            }

            // Asegurar inputs file vacíos
            formRepartidor.foto_licencia.value = "";
            formRepartidor.imagen.value = "";

            viewModalRepartidor.hide();
            modalRepartidor.show();
        });


        // ================== BOTÓN ELIMINAR ==================
        btnEliminarRepartidor.addEventListener("click", async () => {
            const id = window.currentRepartidorId;

            Swal.fire({
                title: "¿Estás seguro?",
                text: "Esta acción no se puede revertir",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Sí, eliminar",
                cancelButtonText: "Cancelar"
            }).then(async (result) => {
                if (result.isConfirmed) {
                    try {
                        const fd = new FormData();
                        fd.append("id", id);

                        const res = await fetch("guardar_repartidores.php?action=delete", {
                            method: "POST",
                            body: fd
                        });
                        const json = await res.json();

                        Swal.fire(
                            json.success ? "Eliminado" : "Error",
                            json.message,
                            json.success ? "success" : "error"
                        );

                        if (json.success) {
                            viewModalRepartidor.hide();
                            cargarRepartidores();
                        }
                    } catch (err) {
                        console.error(err);
                        Swal.fire("Error", "Error al eliminar repartidor", "error");
                    }
                }
            });
        });

        // ================== NUEVO REPARTIDOR ==================
        btnAddRepartidor.addEventListener("click", () => {
            formRepartidor.reset();
            editingId = null;
            document.querySelector("#editModalRepartidor .modal-title").textContent = "Nuevo Repartidor";
            modalRepartidor.show();
        });

        // ================== GUARDAR ==================
        formRepartidor.addEventListener("submit", async e => {
            e.preventDefault();
            const formData = new FormData(formRepartidor);
            if (editingId) formData.append("id", editingId);

            try {
                const res = await fetch("guardar_repartidores.php?action=save", {
                    method: "POST",
                    body: formData
                });
                const json = await res.json();

                Swal.fire(
                    json.success ? "Éxito" : "Error",
                    json.message,
                    json.success ? "success" : "error"
                );

                if (json.success) {
                    modalRepartidor.hide();
                    cargarRepartidores();
                }
            } catch (err) {
                console.error(err);
                Swal.fire("Error", "Error al guardar repartidor", "error");
            }
        });

        // ================== BÚSQUEDA ==================
        searchRepartidor.addEventListener("input", renderRepartidores);

        // ================== INICIALIZAR ==================
        cargarRepartidores();
    });
</script>

<script>
    function doScrollLeft(id, amount = 300) {
        const el = document.getElementById(id);
        if (!el) return;
        el.scrollBy({
            left: -Math.abs(amount),
            behavior: 'smooth'
        });
    }

    function doScrollRight(id, amount = 300) {
        const el = document.getElementById(id);
        if (!el) return;
        el.scrollBy({
            left: Math.abs(amount),
            behavior: 'smooth'
        });
    }
</script>

<script>
    document.getElementById("modalSearchInput").addEventListener("input", function() {
        const query = this.value.trim();
        const results = document.getElementById("modalSearchResults");
        const modulos = document.getElementById("modulosEstaticos");

        results.innerHTML = "";

        if (query.length < 2) {
            // Mostrar módulos estáticos y ocultar resultados
            modulos.style.display = "flex"; // o "block" si prefieres
            results.style.display = "none";
            return;
        }

        // Ocultar módulos estáticos y mostrar resultados
        modulos.style.display = "none";
        results.style.display = "block";

        fetch("buscar_archivos.php?q=" + encodeURIComponent(query))
            .then(response => response.json())
            .then(data => {
                if (data.length === 0) {
                    results.innerHTML = `<li class="list-group-item text-muted">No se encontraron resultados</li>`;
                    return;
                }

                data.forEach(item => {
                    const li = document.createElement("li");
                    li.className = "list-group-item list-group-item-action";
                    li.innerHTML = `<i class="bx bx-link-alt me-2"></i> ${item.titulo}`;
                    li.addEventListener("click", () => {
                        window.location.href = item.archivo;
                    });
                    results.appendChild(li);
                });
            })
            .catch(error => {
                console.error("Error al buscar:", error);
            });
    });
</script>

</html>