<?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>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.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://unpkg.com/leaflet/dist/leaflet.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;
        }

        #map {
            height: 600px;
            width: 100%;
        }

        .leaflet-routing-container {
            display: none !important;
        }

        .swal2-container {
            z-index: 20000 !important;
        }

        /* Por defecto, el cursor normal */
        #tramosRuta li {
            cursor: default;
        }

        /* Cuando está activado el orden manual */
        #tramosRuta.orden-manual li {
            cursor: grab;
        }

        #tramosRuta.orden-manual li:active {
            cursor: grabbing;
        }

        #modalAtrasados .modal-dialog {
            max-width: 600px;
            /* ancho */
        }

        #modalAtrasados .modal-content {
            height: 500px;
            /* alto fijo */
        }

        .mensaje-alerta {
            display: none;
            background-color: #b80000;
            color: white;
            text-align: center;
            padding: 6px 12px;
            /* menos padding para que sea más delgado */
            font-weight: bold;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            margin: 8px auto;
            /* centrado horizontalmente */
            max-width: 400px;
            /* mensaje más estrecho */
        }

        .mensaje-alerta.show {
            display: block;
            opacity: 1;
        }

        .custom-select-icon {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding-right: 6rem;
            /* espacio para el ícono */
            border-radius: .375rem;
            /* radio Bootstrap */
            width: 100%;
            /* ocupa todo el ancho del contenedor */
        }

        .icono-redondeado {
            background-color: #009dff;
            color: #fff;
            pointer-events: none;
            /* click pasa al select */
            border-radius: 0 .375rem .375rem 0;
            /* solo esquinas derechas */
            height: 100%;
        }

        #alertAgregarRuta {
            display: none;
            background-color: #b80000;
            /* Fondo rojo claro */
            color: #ffffffff;
            /* Texto rojo oscuro */
            padding: 6px 12px;
            margin-top: 10px;
            text-align: center;
            /* Texto centrado */
            font-weight: bold;
            font-size: 15px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            opacity: 0;
        }

        /* Cuando se muestra la alerta */
        #alertAgregarRuta.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        /* 🔹 Cuando desaparece */
        #alertAgregarRuta.hide {
            opacity: 0;
            transform: translateY(-5px);
        }

        .loader-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }

        .loader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #009dff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .list-group-item {
            border: none;
        }
    </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-header small text-uppercase">
                        <span class="menu-header-text">Logistica</span>
                    </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 active">
                                <a href="logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Nueva Ruta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <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">
                                        <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 -->
                <?php
                $host = 'localhost';
                $username = 'SYSDBA';
                $password = 'masterkey';
                $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos2.fdb';
                try {
                    $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                    // 🔹 Consulta: pedidos tipo 'P' con FECHA_ENT igual a la fecha actual
                    $sqlTotal = "
                                SELECT *
                                FROM FACTP01
                                WHERE TIP_DOC = 'P'
                                AND CAST(FECHA_ENT AS DATE) = CURRENT_DATE
                            ";

                    $stmtTotal = $dbh->prepare($sqlTotal);
                    $stmtTotal->execute();

                    $rowsTotal = $stmtTotal->fetchAll(PDO::FETCH_ASSOC);
                    $totalRegistros = count($rowsTotal);

                } catch (PDOException $e) {
                    echo "<div class='container mt-5'><h2>Error de conexión:</h2>";
                    echo "<p>" . $e->getMessage() . "</p></div>";
                    exit;
                }
                ?>

                <?php
                $host = 'localhost';
                $user = 'root';
                $pass = 'root';
                $dbname = 'rastreo';

                try {
                    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $user, $pass, [
                        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
                    ]);

                    // --- CONSULTA: contar registros de la tabla 'rutas' ---
                    $sql = "SELECT COUNT(*) AS total FROM rutas";
                    $stmt = $pdo->prepare($sql);
                    $stmt->execute();
                    $row = $stmt->fetch(PDO::FETCH_ASSOC);
                    $totalRutas = $row['total'] ?? 0;

                } catch (PDOException $e) {
                    die("Error de conexión: " . $e->getMessage());
                }
                ?>


                <!-- Content wrapper -->
                <div class="content-wrapper">
                    <!-- Content -->


                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="row">
                            <!--/ Total Revenue -->
                            <div class="col-12 col-md-12 col-lg-12 order-3 order-md-2">
                                <div class="row">


                                    <div class="col-sm-6 col-xl-4 mb-4 wow animate__animated animate__fadeInUp"
                                        data-wow-delay="0.2s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">
                                                        <small>Total de Pedidos</small>
                                                        <h4 class="mb-1" id="total-registros">
                                                            <?php echo $totalRegistros ?? 'Error'; ?>
                                                        </h4>
                                                    </div>
                                                    <span class="badge bg-label-primary rounded-circle p-2">
                                                        <i class="icon-base bx bx-dollar icon-lg"></i>
                                                    </span>


                                                </div>

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


                                    <div class="col-sm-6 col-xl-4 mb-4 wow animate__animated animate__fadeInUp"
                                        data-wow-delay="0.4s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">

                                                        <small>Pedidos En Curso</small>
                                                        <h4 class="mb-1" id="facturas-emitidas">
                                                            <?php echo $totalRutas ?? 'Error'; ?>
                                                        </h4>
                                                    </div>
                                                    <span class="badge bg-label-success rounded-circle p-2">
                                                        <i class="icon-base bx bx-task icon-lg"></i>
                                                    </span>
                                                </div>

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


                                    <div class="col-sm-12 col-xl-4 mb-4 wow animate__animated animate__fadeInUp"
                                        data-wow-delay="0.6s">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="content-left">
                                                        <small>Pedidos Restantes</small>
                                                        <h4 class="mb-1" id="facturas-canceladas">
                                                            <?php echo htmlspecialchars($totalCanceladas ?? 'No Disponible'); ?>
                                                        </h4>
                                                    </div>
                                                    <span class="badge bg-label-danger rounded-circle p-2">
                                                        <i class="icon-base bx bx-task-x icon-lg"></i>
                                                    </span>
                                                </div>

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

                        <div>

                            <?php
                            $host = 'localhost';
                            $username = 'SYSDBA';
                            $password = 'masterkey';
                            $database = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos2.fdb';

                            try {
                                $dsn = "firebird:dbname=$host:$database;charset=UTF8";
                                $pdo = new PDO($dsn, $username, $password, [
                                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
                                ]);

                                // Obtener clientes con pedidos
                                $stmt = $pdo->query("
                                   SELECT DISTINCT c.CLAVE, c.NOMBRE, f.TIP_DOC_SIG, f.DOC_SIG
                                   FROM FACTP01 f
                                   JOIN CLIE01 c ON f.CVE_CLPV = c.CLAVE
                                   ORDER BY c.NOMBRE
                               ");
                                $clientes = $stmt->fetchAll(PDO::FETCH_ASSOC);

                                // Obtener todos los pedidos
                                $stmt2 = $pdo->query("
                                   SELECT f.CVE_DOC, f.CVE_CLPV, c.NOMBRE AS cliente, f.TIP_DOC_SIG, f.DOC_SIG, 
                                          c.CALLE_ENVIO, c.NUMEXT_ENVIO, c.COLONIA_ENVIO, 
                                          c.LOCALIDAD_ENVIO, c.MUNICIPIO_ENVIO, c.ESTADO_ENVIO, c.PAIS_ENVIO
                                   FROM FACTP01 f
                                   JOIN CLIE01 c ON f.CVE_CLPV = c.CLAVE
                                   ORDER BY f.CVE_DOC
                               ");
                                $pedidos = $stmt2->fetchAll(PDO::FETCH_ASSOC);
                            } catch (PDOException $e) {
                                die("Error de conexión: " . $e->getMessage());
                            }

                            ?>

                            <?php
                            // Conexion a MySQL (rastreo)
                            $host = "localhost";
                            $username = "root";
                            $password = "root";
                            $database = "rastreo";

                            try {
                                $pdo = new PDO("mysql:host=$host;dbname=$database;charset=utf8", $username, $password, [
                                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
                                ]);
                            } catch (PDOException $e) {
                                die("Error de conexión: " . $e->getMessage());
                            }

                            // Repartidores
                            try {
                                $stmt = $pdo->query("SELECT * FROM repartidores");
                                $repartidores = $stmt->fetchAll(PDO::FETCH_ASSOC);
                            } catch (PDOException $e) {
                                die("Error al consultar repartidores: " . $e->getMessage());
                            }

                            // Autos
                            try {
                                $stmt = $pdo->query("SELECT * FROM autos");
                                $autos = $stmt->fetchAll(PDO::FETCH_ASSOC);
                            } catch (PDOException $e) {
                                die("Error al consultar autos: " . $e->getMessage());
                            }
                            ?>

                            <!-- conexion para pedidos atrasados -->
                            <?php
                            // Debug desactivado
                            ini_set('display_errors', 1);
                            error_reporting(E_ALL);

                            date_default_timezone_set('America/Mexico_City');
                            $hoy = date('Y-m-d');

                            /* =======================
                            CONEXIÓN A FIREBIRD SAE
                            ======================= */
                            $hostFB = 'localhost';
                            $userFB = 'SYSDBA';
                            $passFB = 'masterkey';
                            $dbFB = 'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos2.fdb';

                            try {
                                $dsnFB = "firebird:dbname=$hostFB:$dbFB;charset=UTF8";
                                $pdoFB = new PDO($dsnFB, $userFB, $passFB, [
                                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
                                ]);
                            } catch (PDOException $e) {
                                exit;
                            }

                            /* ======================
                            CONEXIÓN A MYSQL RASTREO
                            ====================== */
                            $hostMy = 'localhost';
                            $dbMy = 'rastreo';
                            $userMy = 'root';   // ajusta si es necesario
                            $passMy = 'root';   // ajusta si es necesario
                            
                            try {
                                $dsnMy = "mysql:host=$hostMy;dbname=$dbMy;charset=utf8mb4";
                                $pdoMy = new PDO($dsnMy, $userMy, $passMy, [
                                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
                                ]);
                            } catch (PDOException $e) {
                                exit;
                            }

                            /* ======================
                             CONSULTAR PEDIDOS ATRASADOS EN FACTP01
                             ====================== */
                            $sql = "
                              SELECT f.CVE_DOC
                              FROM FACTP01 f
                              WHERE CAST(f.FECHA_ENT AS DATE) < ?
                            ";

                            try {
                                $stmt = $pdoFB->prepare($sql);
                                $stmt->execute([$hoy]);
                                $pedidosHoy = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                $countFound = count($pedidosHoy);
                            } catch (PDOException $e) {
                                exit;
                            }


                            /* ======================
                             GUARDAR PEDIDOS EN MYSQL (rastreo.pedidos)
                             ====================== */
                            $inserted = 0;
                            $skipped = 0;

                            if ($countFound > 0) {
                                try {
                                    $stmtCheck = $pdoMy->prepare("SELECT COUNT(*) FROM pedidos WHERE cve_doc = :cve_doc");
                                    $stmtInsert = $pdoMy->prepare("INSERT INTO pedidos (cve_doc, creado_en) VALUES (:cve_doc, :creado_en)");
                                } catch (PDOException $e) {
                                    exit;
                                }

                                foreach ($pedidosHoy as $p) {
                                    $cve = $p['CVE_DOC'];

                                    if (!$cve) {
                                        continue;
                                    }

                                    try {
                                        $stmtCheck->execute([':cve_doc' => $cve]);
                                        $exists = (int) $stmtCheck->fetchColumn();
                                    } catch (PDOException $e) {
                                        continue;
                                    }

                                    if ($exists > 0) {
                                        $skipped++;
                                        continue;
                                    }

                                    try {
                                        $stmtInsert->execute([
                                            ':cve_doc' => $cve,
                                            ':creado_en' => $hoy
                                        ]);
                                        $inserted++;
                                    } catch (PDOException $e) {
                                        // Aquí puedes loguear en archivo si quieres
                                    }
                                    /* ======================
                                     ELIMINAR PEDIDOS CANCELADOS O ENTREGADOS
                                     ====================== */
                                    try {
                                        $sqlDelete = "
                                          DELETE p
                                          FROM pedidos p
                                          INNER JOIN rutas r ON r.pedido_id = p.cve_doc
                                          WHERE r.STAT_PED IN ('C', 'E')
                                      ";
                                        $pdoMy->exec($sqlDelete);
                                    } catch (PDOException $e) {
                                        // Aquí puedes loguear si quieres
                                    }
                                }
                            }
                            ?>


                            <!-- Lista de pedidos -->
                            <div class="content-wrapper">
                                <!-- Card abajo (Pedidos + Mapa) -->
                                <div>
                                    <div class="card overflow-hidden">
                                        <div class="d-flex flex-column flex-lg-row app-logistics-fleet-wrapper">

                                            <!-- Sidebar (Pedidos / Filtros) -->
                                            <div class="app-logistics-fleet-sidebar col-lg-5 h-100"
                                                id="app-logistics-fleet-sidebar">
                                                <div
                                                    class="card-header border-0 pt-6 pb-1 d-flex justify-content-between">
                                                    <h5 class="mb-0 card-title">Gestión de Pedidos</h5>
                                                </div>
                                                <!-- Sidebar Body -->
                                                <div class="card-body p-2 logistics-fleet-sidebar-body">
                                                    <form id="formPedidos">

                                                        <!-- Paso 1: Selección de pedidos -->
                                                        <div class="step" id="step1">
                                                            <!-- Select de almacén -->
                                                            <div class="position-relative mb-1"
                                                                style="max-width: 100%;">
                                                                <select id="selectAlmacen"
                                                                    class="form-select custom-select-icon">
                                                                    <option value="" disabled selected>Todos los
                                                                        almacenes</option>
                                                                </select>
                                                                <!-- Ícono como decorativo, el click pasa al select -->
                                                                <span
                                                                    class="position-absolute top-0 end-0 h-100 d-flex align-items-center px-3"
                                                                    style="background-color: #009dff; color: #fff; pointer-events: none; border-radius: 0 8px 8px 0;">
                                                                    <i class="fas fa-chevron-down"></i>
                                                                </span>
                                                            </div>


                                                            <!-- Enlace para editar ubicación -->
                                                            <a href="#" id="editarUbicacionLink"
                                                                class="text-primary d-block mb-2"
                                                                style="text-decoration: underline; margin-left: 15px;">
                                                                ¿Tu almacén no aparece correctamente?
                                                            </a>
                                                            <div class="position-relative mb-1"
                                                                style="max-width: 100%;">
                                                                <select id="selectCliente" class="form-select mb-2">
                                                                    <option value="" disabled selected>Todos</option>
                                                                </select>
                                                                <!-- Ícono como decorativo, el click pasa al select -->
                                                                <span
                                                                    class="position-absolute top-0 end-0 h-100 d-flex align-items-center px-3"
                                                                    style="background-color: #009dff; color: #fff; pointer-events: none; border-radius: 0 8px 8px 0;">
                                                                    <i class="fas fa-chevron-down"></i>
                                                                </span>
                                                            </div>

                                                            <!-- Buscadores -->
                                                            <div class="row mb-2 g-2">
                                                                <div class="col">
                                                                    <input type="search" id="buscarPedido"
                                                                        class="form-control"
                                                                        placeholder="Buscar por Pedido">
                                                                </div>
                                                                <div class="col">
                                                                    <input type="search" id="buscarFactura"
                                                                        class="form-control"
                                                                        placeholder="Buscar por Factura">
                                                                </div>
                                                            </div>

                                                            <!-- Lista de pedidos -->
                                                            <div class="mb-2" id="contenedorPed"
                                                                style="max-height: 250px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: .25rem; border: none;">
                                                                <div class="list-group" id="listaPedidos"></div>
                                                            </div>
                                                            <!-- Botón para abrir el modal -->
                                                            <button type="button"
                                                                class="btn btn-primary mt-2 w-100 w-100"
                                                                data-bs-toggle="modal" data-bs-target="#modalAtrasados">
                                                                <i class="bi bi-exclamation-octagon text-danger"></i>
                                                                Atrasados
                                                            </button>

                                                            <button type="button" class="btn btn-primary mt-2 w-100"
                                                                id="btnAgregarRuta" disabled>
                                                                Agregar a la ruta
                                                            </button>

                                                            <!-- ALERTA DE VALIDACIÓN ABAJO DEL BOTÓN -->
                                                            <div id="alertAgregarRuta"
                                                                ¡class="alert alert-danger mensaje-alerta"></div>

                                                            <!-- Navegación -->
                                                            <div class="d-flex justify-content-end mt-3">
                                                                <button type="button" class="btn btn-primary"
                                                                    id="nextStep">
                                                                    Ver Peidos De La Ruta ><i
                                                                        class="bi bi-arrow-right"></i>
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <!-- Paso 2: Lista de pedidos seleccionados -->
                                                        <div class="step d-none" id="step2">
                                                            <!-- Pedidos agregados -->
                                                            <div
                                                                style="max-height: 300px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: .25rem; padding: .5rem;">
                                                                <ul id="pedidosRuta" class="list-group"></ul>
                                                            </div>

                                                            <button type="button" class="btn btn-primary mt-2 w-100"
                                                                id="btnCalcularRuta" data-bs-toggle="modal"
                                                                data-bs-target="#modalRuta" disabled>
                                                                Calcular ruta optimizada
                                                            </button>

                                                            <!-- Navegación -->
                                                            <div class="d-flex justify-content-between mt-3">
                                                                <button type="button" class="btn btn-primary"
                                                                    id="prevStep">
                                                                    <i class="bi bi-arrow-left"></i> Agregar Pedidos
                                                                </button>
                                                            </div>
                                                        </div>

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

                                            <!-- Mapa -->
                                            <div class="col-lg-7 h-100 map-container">
                                                <div id="map" class="w-100 h-100" style="min-height:600px;"></div>
                                            </div>

                                            <!-- Overlay Hidden -->
                                            <div class="app-overlay d-none"></div>
                                        </div>
                                    </div>

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



                        <!-- / Content -->
                    </div>


                    <!-- NUEVAS UBICACIONES DE ALMACEN -->
                    <div class="modal fade" id="modalMapa" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-body position-relative">
                                    <div id="AlmacenMap" style="height: 400px;"></div>

                                    <!-- 🔹 Leyenda dinámica -->
                                    <p id="leyendaUbicacion" class="text-center mt-2 text-muted fw-bold"></p>

                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="button" id="btnRegresarUbicacion" class="btn btn-secondary me-2">
                                            Regresar a ubicación predeterminada
                                        </button>
                                        <button type="button" id="btnEditarMapa" class="btn btn-primary">
                                            Guardar ubicación
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- NUEVAS UBICACIONES DE PEDIDOS -->
                    <div class="modal fade" id="modalPedidos" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-body position-relative">
                                    <!-- Mapa específico de pedidos -->
                                    <div id="PedidosMap" style="height: 400px;"></div>

                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="button" id="btnRegresarPedidos" class="btn btn-secondary me-2">
                                            Regresar a ubicación predeterminada
                                        </button>
                                        <button type="button" id="btnEditarPedidos" class="btn btn-primary">
                                            Guardar ubicación
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Pedidos agregados -->
                    <div class="mt-3 list-group rounded-3 flex-grow-1"
                        style="max-height: 200px; overflow-y: auto; padding: .5rem;">


                        <!-- modal -->
                        <div class="modal fade" id="modalRuta" tabindex="-1" aria-labelledby="modalRutaLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content">

                                    <div class="modal-header text-white">
                                        <h5 class="modal-title" id="modalRutaLabel">Ruta del Repartidor</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Cerrar"></button>
                                    </div>

                                    <div class="modal-body">
                                        <!-- Contenedor flex: mini mapa + tramos -->
                                        <div class="d-flex gap-3">
                                            <!-- Mini mapa -->
                                            <div id="miniMapa" style="height:400px; flex:1;" class="rounded shadow">
                                            </div>

                                            <!-- Tramos y tiempo estimado -->
                                            <div style="flex:1; max-height:400px; display:flex; flex-direction:column;">
                                                <h6>Orden de la ruta</h6>

                                                <!-- Lista de pedidos con scroll -->
                                                <div style="flex:1; overflow-y:auto;">
                                                    <ul id="tramosRuta" class="list-group mb-2"></ul>
                                                </div>

                                                <!-- Texto de ayuda oculto por defecto -->
                                                <p id="textoAyuda" class="text-muted small mt-1" style="display:none;">
                                                    Arrastra los pedidos para darles el orden que desees.
                                                </p>

                                                <!-- Botón fuera del scroll -->
                                                <button type="button" id="btnToggleOrden"
                                                    class="btn btn-primary mt-2 w-100">
                                                    Activar orden manual
                                                </button>
                                            </div>

                                        </div>

                                        <!-- Selección de repartidor -->
                                        <!-- Selección de repartidor y auto en 2 columnas -->
                                        <div class="row">
                                            <!-- Columna repartidor -->
                                            <div class="col-md-6">
                                                <!-- Selección de repartidor -->
                                                <label for="selectRepartidor" class="form-label">Selecciona un
                                                    repartidor:</label>
                                                <select id="selectRepartidor" class="form-select mb-3">
                                                    <option value="">-- Selecciona --</option>
                                                    <?php foreach ($repartidores as $r): ?>
                                                        <option value="<?= $r['id'] ?>"
                                                            data-nombre="<?= htmlspecialchars($r['nombre']) ?>"
                                                            data-telefono="<?= htmlspecialchars($r['telefono']) ?>"
                                                            data-correo="<?= htmlspecialchars($r['correo']) ?>"
                                                            data-edad="<?= htmlspecialchars($r['edad']) ?>"
                                                            data-tracker="<?= htmlspecialchars($r['traker_id']) ?>">
                                                            <?= $r['nombre'] ?>
                                                        </option>
                                                    <?php endforeach; ?>
                                                </select>

                                                <!-- Datos del repartidor -->
                                                <div id="infoRepartidor" class="border rounded p-3 mb-3 bg-light">
                                                    <p><strong>Nombre:</strong> <span id="nombreRepartidor">-</span></p>
                                                    <p><strong>Teléfono:</strong> <span id="telefonoRepartidor">-</span>
                                                    </p>
                                                    <p><strong>Correo:</strong> <span id="correoRepartidor">-</span></p>
                                                    <p><strong>Edad:</strong> <span id="edad">-</span></p>
                                                </div>
                                            </div>

                                            <!-- Columna auto -->
                                            <div class="col-md-6">
                                                <!-- Selección de auto -->
                                                <label for="selectAuto" class="form-label">Selecciona un auto:</label>
                                                <select id="selectAuto" class="form-select mb-3">
                                                    <option value="">-- Selecciona --</option>
                                                    <?php foreach ($autos as $a): ?>
                                                        <option value="<?= $a['id_unidad'] ?>"
                                                            data-marca="<?= htmlspecialchars($a['marca']) ?>"
                                                            data-modelo="<?= htmlspecialchars($a['modelo']) ?>"
                                                            data-placas="<?= htmlspecialchars($a['placa']) ?>"
                                                            data-color="<?= htmlspecialchars($a['color']) ?>"
                                                            data-tipo="<?= htmlspecialchars($a['subtipo']) ?>"
                                                            data-combustible="<?= htmlspecialchars($a['tipo_combustible']) ?>"
                                                            data-peso="<?= htmlspecialchars($a['capacidad_peso']) ?>"
                                                            data-anio="<?= htmlspecialchars($a['anio']) ?>">
                                                            <?= $a['modelo'] ?> (<?= $a['placa'] ?>)
                                                        </option>
                                                    <?php endforeach; ?>
                                                </select>

                                                <!-- Datos del auto -->
                                                <div id="infoAuto" class="border rounded p-3 mb-3 bg-light">
                                                    <p><strong>Marca:</strong> <span id="marcaAuto">-</span></p>
                                                    <p><strong>Modelo:</strong> <span id="modeloAuto">-</span></p>
                                                    <p><strong>Placas:</strong> <span id="placasAuto">-</span></p>
                                                    <p><strong>Color:</strong> <span id="colorAuto">-</span></p>
                                                    <p><strong>Año:</strong> <span id="anioAuto">-</span></p>
                                                    <p><strong>Combustible:</strong> <span id="combustibleAuto">-</span>
                                                    </p>
                                                    <p><strong>Capacidad de Peso:</strong> <span id="pesoAuto">-</span>
                                                    </p>
                                                    <p><strong>Tipo:</strong> <span id="tipoAuto">-</span></p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Cerrar</button>
                                        <button type="button" class="btn btn-success" id="btnConfirmarRuta">Confirmar
                                            Ruta</button>
                                    </div>

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

                        <!-- Modal Atrasados -->
                        <div class="modal fade" id="modalAtrasados" tabindex="-1" aria-labelledby="modalAtrasadosLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-md modal-dialog-scrollable">
                                <div class="modal-content">

                                    <!-- Header -->
                                    <div class="modal-header">
                                        <h5 class="modal-title d-flex align-items-center gap-2"
                                            id="modalAtrasadosLabel">
                                            <i class="bi bi-exclamation-octagon text-danger fs-4"></i>
                                            Pedidos Atrasados
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Cerrar"></button>
                                    </div>

                                    <!-- Body -->
                                    <div class="modal-body p-3">
                                        <!-- mensaje de alamecen -->


                                        <div style="max-height:300px; overflow-y:auto;">
                                            <ul class="list-group list-group-flush">
                                            </ul>
                                        </div>
                                        <!-- JavaScript agregará aquí los pedidos atrasados -->
                                        <div id="modalAtrasadosMsg" class="alert alert-danger mensaje-alerta">
                                        </div>
                                    </div>

                                    <!-- Footer -->
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            data-bs-dismiss="modal">Cerrar</button>
                                        <button type="button" class="btn btn-primary btn-sm" id="btnProcesarAtrasados">
                                            Agregar a la ruta
                                        </button>
                                    </div>

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



                        <!-- / Content -->

                        <div class="content-backdrop fade"></div>
                    </div>
                    <!-- Content wrapper -->
                </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/chart.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-polylineencoded"></script>

<!-- Leaflet Routing Machine (usa OSRM) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>

<!-- animaciones -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></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", function () {
        const step1 = document.getElementById("step1");
        const step2 = document.getElementById("step2");

        document.getElementById("nextStep").addEventListener("click", function () {
            step1.classList.add("d-none");
            step2.classList.remove("d-none");
        });

        document.getElementById("prevStep").addEventListener("click", function () {
            step2.classList.add("d-none");
            step1.classList.remove("d-none");
        });

        document.getElementById("finishStep").addEventListener("click", function () {
            alert("Formulario completado 🚀");
            // Aquí podrías hacer un submit o cerrar el wizard
        });
    });
</script>

<script>
    let map;
    let miniMap;
    let markers = [];
    let pedidosSeleccionados = [];
    let pedidos = [];
    let waypointsSeleccionados = [];
    let pedidosOrdenadosParaMaps = [];
    let puntoPartida = null; // Marcador dinámico del almacén seleccionado
    let autoSeleccionado = null;
    let sortable = null;
    let ordenManualActivo = false;

    // datos temporales de atrasados cargados por JS
    let pedidosAtrasadosData = [];

    const listaPedidosEl = document.getElementById('listaPedidos');
    const selectAlmacenEl = document.getElementById("selectAlmacen");

    const selectClienteEl = document.getElementById('selectCliente');
    const btnAgregarRuta = document.getElementById('btnAgregarRuta');
    const btnCalcularRuta = document.getElementById('btnCalcularRuta');
    const ulPedidosRuta = document.getElementById('pedidosRuta');
    const ulTramos = document.getElementById('tramosRuta');
    // Obtener referencias
    const selectRepartidor = document.getElementById("selectRepartidor");
    const nombreRepartidorEl = document.getElementById("nombreRepartidor");
    const telefonoRepartidorEl = document.getElementById("telefonoRepartidor");
    const correoRepartidorEl = document.getElementById("correoRepartidor");
    const edadEl = document.getElementById("edad");
    // botones
    const btnConfirmarRuta = document.getElementById("btnConfirmarRuta");
    const pedidoIconRojo = L.icon({
        iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
        shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png",
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    // ------------------ Autos ------------------
    const selectAuto = document.getElementById("selectAuto");
    const marcaAutoEl = document.getElementById("marcaAuto");
    const modeloAutoEl = document.getElementById("modeloAuto");
    const placasAutoEl = document.getElementById("placasAuto");
    const colorAutoEl = document.getElementById("colorAuto");
    const combustibleAutoEl = document.getElementById("combustibleAuto");
    const pesoAutoEl = document.getElementById("pesoAuto");
    const anioAutoEl = document.getElementById("anioAuto");
    const tipoAutoEl = document.getElementById("tipoAuto");
    // botones de atrasados
    const btnProcesarAtrasados = document.getElementById("btnProcesarAtrasados");
    const modalAtrasadosEl = document.getElementById('modalAtrasados');

    const contenedorPedidos = document.getElementById('contenedorPed');


    // ------------------ Inicializar mapa principal ------------------
    function initMap() {
        map = L.map("map").setView([19.4326, -99.1332], 14);

        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; CARTO',
            maxZoom: 19
        }).addTo(map);
    }

    // ------------------ Normalizador ------------------
    function norm(v) {
        return (v ?? '').toString().trim().toUpperCase();
    }

    function calcularDistancia(lat1, lon1, lat2, lon2) {
        const R = 6371; // Radio de la tierra en km
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a =
            Math.sin(dLat / 2) ** 2 +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) ** 2;
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c; // distancia en km
    }

    // ------------------ Actualizar botones ------------------
    function actualizarEstadoBotones() {
        const hayPedidosEnLista = listaPedidosEl.querySelectorAll('input[name="pedidos[]"]').length > 0;
        const hayPedidosSeleccionados = pedidosSeleccionados.length > 0;
        btnAgregarRuta.disabled = !hayPedidosEnLista;
        btnCalcularRuta.disabled = !hayPedidosSeleccionados;
    }


    // Crear el loader
    const loader = document.createElement('div');
    loader.className = 'loader-overlay';
    loader.innerHTML = `
  <div class="loader"></div>
  <div class="text-muted fw-semibold">Cargando Peidos y Almacénes...</div>
`;

    // 🔹 Mostrar animación antes del fetch
    contenedorPedidos.appendChild(loader);

    fetch("marcadores.php")
        .then(res => res.json())
        .then(data => {
            pedidos = Array.isArray(data) ? data : [];

            // --- Rellenar select de clientes ---
            const clientesUnicos = [...new Set(pedidos.map(p => p.cliente).filter(Boolean))];
            clientesUnicos.forEach(c => {
                const opt = document.createElement('option');
                opt.value = c;
                opt.textContent = `Cliente ${c}`;
                selectClienteEl.appendChild(opt);
            });

            mostrarPedidos(); // mostrar pedidos inicialmente
        })
        .catch(err => console.error("Error al cargar pedidos:", err))
        .finally(() => {
            // 🔹 Quitar loader siempre (éxito o error)
            loader.remove();
        });



    // ------------------ Mostrar pedidos ------------------
    // Función que filtra los pedidos por almacén
    function filtrarPorAlmacen(lista, almacenId) {
        if (!almacenId) return lista; // Si no hay almacén seleccionado, devuelve toda la lista
        return lista.filter(p => (p.NUM_ALMA ?? '').toString() === almacenId.toString());
    }

    function mostrarPedidos(clienteId = '', nombreFiltro = '', facturaFiltro = '', almacenId = '') {
        listaPedidosEl.innerHTML = '';
        let filtrados = pedidos;

        // 🔹 Solo pedidos con fecha de hoy (si no tienen fecha_ent, se incluyen)
        const hoy = new Date().toISOString().split('T')[0]; // "2025-09-18"
        filtrados = filtrados.filter(p => {
            if (!p.fecha_ent) return true; // conservar items sin fecha (ej. atrasados normalizados)
            return (p.fecha_ent ?? '').substring(0, 10) === hoy;
        });

        if (clienteId) {
            filtrados = filtrados.filter(p => norm(p.cliente) === norm(clienteId));
        }
        if (nombreFiltro) {
            filtrados = filtrados.filter(p => (p.pedido ?? '').toString().toUpperCase().includes(nombreFiltro
                .toUpperCase()));
        }
        if (facturaFiltro) {
            filtrados = filtrados.filter(p => p.tip_doc_sig === 'F' && (p.doc_sig ?? '').toString().toUpperCase().includes(
                facturaFiltro.toUpperCase()));
        }

        filtrados = filtrarPorAlmacen(filtrados, almacenId);

        if (!filtrados.length) {
            listaPedidosEl.innerHTML = `<div class="list-group-item text-muted">Sin pedidos</div>`;
            actualizarEstadoBotones();
            return;
        }

        filtrados.forEach(p => {
            const label = document.createElement('label');
            label.className = "list-group-item";
            // value = index en array global 'pedidos' (si aún no está en pedidos lo agregamos antes de renderizar)
            let idx = pedidos.indexOf(p);
            if (idx === -1) {
                pedidos.push(p);
                idx = pedidos.length - 1;
            }
            label.innerHTML =
                `<div class="pedido-item" style="display: flex; justify-content: space-between; align-items: center; padding: 5px 0;">
                   <div>
                     <strong>${p.pedido || p.CVE_DOC}:</strong> 
                     ${p.cliente || p.NOMBRE_CLIENTE || 'Sin cliente'} </br> 
                     ${p.direccion || p.CALLE_ENVIO || 'Sin dirección'}
                   </div>
                   <input type="checkbox" name="pedidos[]" value="${idx}" style="transform: scale(1.5);">
                 </div>`

            listaPedidosEl.appendChild(label);
        });

        actualizarEstadoBotones();
    }

    // ------------------ Filtros ------------------
    function aplicarFiltros() {
        mostrarPedidos(selectClienteEl.value, buscarPedido.value, buscarFactura.value, selectAlmacenEl
            .value // <-- incluir almacén
        );
    }

    buscarPedido.addEventListener('input', aplicarFiltros);
    buscarFactura.addEventListener('input', aplicarFiltros);
    selectClienteEl.addEventListener('change', aplicarFiltros);
    selectAlmacenEl.addEventListener('change', aplicarFiltros);

    // ------------------ Render lista de ubicaciones más cercanas ------------------
    let miniMapMarkers = {}; // guardaremos los marcadores del mini mapa por índice de pedido
    function generarMapsUrl() {
        if (!puntoPartida || pedidosOrdenadosParaMaps.length === 0) return "";

        const {
            lat,
            lng
        } = puntoPartida.getLatLng();

        const partes = [
            `${lat},${lng}`,
            ...pedidosOrdenadosParaMaps.map(p => `${p.lat},${p.lon}`),
            `${lat},${lng}` // 🔥 Volver al origen al final
        ];

        return `https://www.google.com/maps/dir/${partes.join('/')}/?travelmode=driving`;
    }


    function limpiarMapa() {
        // Borrar todo en el mapa principal
        map.eachLayer(layer => {
            if (!(layer instanceof L.TileLayer)) map.removeLayer(layer);
        });
        markers = [];

        // Borrar todo en el miniMapa
        if (miniMap) {
            miniMap.eachLayer(layer => {
                if (!(layer instanceof L.TileLayer)) miniMap.removeLayer(layer);
            });
            miniMapMarkers = {};
        }

        // Limpiar arrays
        pedidosSeleccionados = [];
        waypointsSeleccionados = [];
        pedidosOrdenadosParaMaps = [];

        // Limpiar listas HTML
        ulPedidosRuta.innerHTML = "";
        ulTramos.innerHTML = "<li class='list-group-item text-muted'>No hay pedidos agregados a la ruta</li>";

        // Reset checkboxes
        document.querySelectorAll('input[name="pedidos[]"]').forEach(cb => cb.checked = false);

        actualizarEstadoBotones();
    }

    function showAlertRuta(text) {
        const alertEl = document.getElementById('alertAgregarRuta');
        alertEl.textContent = text;
        alertEl.classList.remove('hide'); // Por si aún tenía la clase anterior
        alertEl.classList.add('show');
        alertEl.style.display = "block";

        // Desaparece después de 3 segundos
        setTimeout(() => {
            alertEl.classList.remove('show');
            alertEl.classList.add('hide');

            // Esperar la transición antes de ocultarlo completamente
            setTimeout(() => {
                alertEl.style.display = "none";
                alertEl.textContent = "";
            }, 300);
        }, 3000);
    }


    // ------------------ Cargar pedidos atrasados (llenado por JS en la modal) ------------------
    async function cargarPedidosAtrasados() {
        const ul = modalAtrasadosEl.querySelector('ul.list-group');
        ul.innerHTML = `
         <li class="list-group-item text-center text-muted py-4">
           <div class="d-flex flex-column align-items-center">
             <div class="loader mb-2"></div>
             <div>Cargando pedidos atrasados...</div>
           </div>
         </li>`;


        try {
            const resp = await fetch("pedidos_atrasados.php");
            const data = await resp.json();
            pedidosAtrasadosData = Array.isArray(data) ? data : [];

            ul.innerHTML = '';

            if (!pedidosAtrasadosData.length) {
                ul.innerHTML = `<li class="list-group-item text-center text-muted">No hay pedidos atrasados 🎉</li>`;
                return;
            }

            // 🔹 Filtrar pedidos que ya estén en la ruta
            const pedidosYaAgregados = new Set(pedidosSeleccionados.map(i => pedidos[i].pedido));

            pedidosAtrasadosData.forEach(p => {
                const pedidoId = p.pedido || p.CVE_DOC || p.cve_doc;

                if (pedidosYaAgregados.has(pedidoId)) return; // ignorar

                const li = document.createElement('li');
                li.className = 'list-group-item d-flex align-items-center justify-content-between';
                li.innerHTML = `
                <div class="d-flex align-items-center">
                    <div class="avatar flex-shrink-0 me-3 d-flex align-items-center justify-content-center rounded bg-light" style="width:40px; height:40px;">
                        <span class="avatar-initial rounded bg-label-danger">
                            <i class="icon-base bx bx-package icon-lg text-danger"></i>
                        </span>
                    </div>
                    <div>
                        <div class="fw-semibold">${pedidoId}</div>
                        <small class="text-muted">
                            <strong>Debió ser entregado el:</strong> ${p.fecha_ent ? new Date(p.fecha_ent).toLocaleDateString() : 'Sin fecha'}
                        </small>
                    </div>
                </div>
                <div class="form-check">
                    <input class="form-check-input pedidos-atrasados-chk" type="checkbox" value="${pedidoId}" name="pedidosAtrasados[]">
                </div>
            `;
                ul.appendChild(li);
            });

            if (!ul.children.length) {
                ul.innerHTML = `<li class="list-group-item text-center text-muted">No hay pedidos atrasados 🎉</li>`;
            }

        } catch (err) {
            console.error("Error cargando atrasados:", err);
            ul.innerHTML = `<li class="list-group-item text-center text-danger">Error al cargar pedidos atrasados</li>`;
        }
    }


    // helper: construir direccion legible si los campos vienen separados
    function formatDireccionFrom(p) {
        const parts = [];
        const calle = p.calle_envio || p.CALLE || p.calle || p.CALLE_ENVIO || '';
        if (calle) parts.push(calle);
        const colonia = p.colonia_envio || p.COLONIA || p.colonia || p.COLONIA_ENVIO || '';
        if (colonia) parts.push(colonia);
        const localidad = p.localidad_envio || p.LOCALIDAD || p.localidad || p.LOCALIDAD_ENVIO || p.municipio_envio || p
            .MUNICIPIO || p.municipio || '';
        if (localidad) parts.push(localidad);
        const estado = p.estado_envio || p.ESTADO || p.estado || p.ESTADO_ENVIO || '';
        if (estado) parts.push(estado);
        const pais = p.pais_envio || p.PAIS || p.pais || p.PAIS_ENVIO || '';
        if (pais) parts.push(pais);
        return parts.join(', ');
    }


    // ------------------ Procesar pedidos atrasados seleccionados ------------------
    btnProcesarAtrasados.addEventListener("click", async () => {
        try {
            const msgEl = document.getElementById("modalAtrasadosMsg");

            const showMsg = (text) => {
                msgEl.textContent = text;
                msgEl.style.display = "block";
                msgEl.classList.add("show");
                setTimeout(() => {
                    msgEl.classList.remove("show");
                    setTimeout(() => {
                        msgEl.style.display = "none";
                        msgEl.textContent = "";
                    }, 150);
                }, 3000);
            };

            if (!puntoPartida) {
                showMsg("Selecciona un Almacén Primero");
                return;
            }

            const checked = Array.from(
                modalAtrasadosEl.querySelectorAll('input.pedidos-atrasados-chk:checked')
            );

            if (!checked.length) {
                showMsg("Debes seleccionar al menos un pedido atrasado.");
                return;
            }

            // 🔹 Mostrar animación encima del modal
            Swal.fire({
                title: 'Cargando pedidos...',
                text: 'Estamos agregando los pedidos atrasados al mapa',
                allowOutsideClick: false,
                backdrop: true,
                didOpen: () => Swal.showLoading()
            });

            // --- Procesar pedidos atrasados ---
            for (const cb of checked) {
                const pedidoId = cb.value;
                const orig = pedidosAtrasadosData.find(x =>
                    (x.pedido && x.pedido.toString() === pedidoId.toString()) ||
                    (x.CVE_DOC && x.CVE_DOC.toString() === pedidoId.toString()) ||
                    (x.cve_doc && x.cve_doc.toString() === pedidoId.toString())
                );

                const normalized = {
                    pedido: pedidoId,
                    CVE_DOC: pedidoId,
                    cliente: orig?.cliente || orig?.CLIENTE || 'Atrasado',
                    calle: orig?.calle || 'Sin calle',
                    colonia: orig?.colonia || 'Sin colonia',
                    localidad: orig?.localidad || orig?.municipio || 'Sin localidad',
                    estado: orig?.estado || 'Sin estado',
                    pais: orig?.pais || 'Sin país',
                    postalcode: orig?.postalcode || orig?.CODIGO_ENVIO || '00000',
                    direccion: orig?.direccion || formatDireccionFrom(orig) || 'Sin dirección',
                    lat: parseFloat(orig?.lat || 0),
                    lon: parseFloat(orig?.lon || 0),
                    atrasado: true
                };

                pedidos.push(normalized);
                const newIndex = pedidos.length - 1;
                if (!pedidosSeleccionados.includes(newIndex)) pedidosSeleccionados.push(newIndex);

                const li = cb.closest('li');
                if (li) li.remove();
            }

            // 🔹 Renderizar en el mapa
            await renderPedidosEnRuta();

            // 🔹 Cerrar SweetAlert (loading)
            Swal.close();

            // 🔹 Cerrar el modal de atrasados
            $('#modalAtrasados').modal('hide');


            // 🔹 Confirmación
            Swal.fire({
                icon: 'success',
                title: 'Pedidos cargados',
                text: 'Los pedidos atrasados fueron marcados en el mapa',
                timer: 2000,
                showConfirmButton: false
            });

            // 🔹 Limpiar pedidos atrasados
            pedidosAtrasadosData = [];
            const ul = modalAtrasadosEl.querySelector('ul.list-group');
            if (ul) ul.innerHTML = '';

        } catch (err) {
            console.error("Error procesando atrasados:", err);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Hubo un problema al cargar los pedidos atrasados'
            });
        }
    });

    // ------------------ Render lista con distancia y tiempo reales ------------------
    async function renderListaCercanas() {
        ulTramos.innerHTML = "<li class='list-group-item'>Calculando...</li>";

        if (pedidosSeleccionados.length === 0) {
            ulTramos.innerHTML = "<li class='list-group-item text-muted'>No hay pedidos agregados a la ruta</li>";
            pedidosOrdenadosParaMaps = [];
            return;
        }

        // Copiar pedidos seleccionados (son índices)
        let pedidosTemp = pedidosSeleccionados.map(i => pedidos[i]);

        // Geocodificar si no tienen lat/lon
        for (let p of pedidosTemp) await geocodePedido(p);

        // Calcular distancia desde el almacén seleccionado
        if (puntoPartida) {
            const {
                lat: latA,
                lng: lonA
            } = puntoPartida.getLatLng();
            pedidosTemp.forEach(p => {
                p.distancia = calcularDistancia(latA, lonA, p.lat, p.lon);
            });
        } else {
            // Si no hay almacén seleccionado, ponemos distancia infinita para que queden al final
            pedidosTemp.forEach(p => p.distancia = Infinity);
        }

        // Ordenar por distancia
        pedidosOrdenadosParaMaps = pedidosTemp.sort((a, b) => a.distancia - b.distancia);

        // Renderizar lista
        ulTramos.innerHTML = "";
        pedidosOrdenadosParaMaps.forEach((p, index) => {
            const li = document.createElement("li");
            li.className = "list-group-item d-flex justify-content-between align-items-center";
            li.dataset.index = pedidos.indexOf(p); // 👈 identificador único
            li.innerHTML = `<span><b>${p.pedido || p.CVE_DOC}</b> - ${p.direccion || p.CALLE_ENVIO || ''}</span>
           <span class="badge bg-primary">${p.distancia === Infinity ? '-' : p.distancia.toFixed(2) + ' km'}</span>`;
            ulTramos.appendChild(li);
        });

    }

    // ------------------ Geocodificar ------------------
    async function geocodePedido(p) {
        // si ya tiene lat/lon válidos (no null/0) no rehacer
        if (p.lat && p.lon && p.lat !== 0 && p.lon !== 0) return;
        try {
            let direccion = `${p.calle || ''}`;
            if (p.colonia) direccion += `, ${p.colonia}`;
            if (p.localidad || p.municipio) direccion += `, ${p.localidad || p.municipio}`;
            if (p.estado) direccion += `, ${p.estado}`;
            if (p.pais) direccion += `, ${p.pais}`;
            // si no hay nada, intentar con p.direccion
            if (!direccion.trim() && p.direccion) direccion = p.direccion;

            if (!direccion.trim()) {
                p.lat = 0;
                p.lon = 0;
                return;
            }

            const res = await fetch(
                `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(direccion)}&limit=1`);
            const data = await res.json();
            if (data && data[0]) {
                p.lat = parseFloat(data[0].lat);
                p.lon = parseFloat(data[0].lon);
            } else {
                p.lat = 0;
                p.lon = 0;
            }
        } catch (e) {
            p.lat = 0;
            p.lon = 0;
        }
    }

    // ------------------ Render pedidos en ruta ------------------
    async function renderPedidosEnRuta() {
        ulPedidosRuta.innerHTML = ''; // Limpiar lista

        for (let idx of pedidosSeleccionados) {
            const p = pedidos[idx];
            await geocodePedido(p); // Asíncrono: geocodifica dirección

            // Crear marcador en mapa principal si no existe
            if (!markers[idx]) {
                markers[idx] = L.marker([p.lat, p.lon], {
                    icon: pedidoIconRojo
                })
                    .addTo(map)
                    .bindPopup(`Pedido ${p.pedido || p.CVE_DOC}`);
            }

            // Crear elemento de lista
            const li = document.createElement('li');
            li.className = 'list-group-item d-flex justify-content-between align-items-center';
            li.innerHTML = `
            <span>
        <input type="checkbox" name="pedidos[]" style="display: none !important;" value="${idx}"> ${p.pedido || p.CVE_DOC} - ${p.cliente || 'Sin cliente'} - ${p.direccion || p.CALLE_ENVIO || 'Sin dirección'}
                <a href="#" class="text-primary d-block mt-1 abrir-modal"
                   data-idx="${idx}"
                   style="text-decoration: underline; font-size: 0.9em;">
                   ¿Tu pedido no aparece correctamente?
                </a>
            </span>
            <button class="btn btn-sm btn-danger btn-eliminar">Eliminar</button>
        `;

            // Evento para eliminar pedido
// Evento para eliminar pedido
li.querySelector('.btn-eliminar').addEventListener('click', () => {
    const i = pedidosSeleccionados.indexOf(idx);
    if (i !== -1) pedidosSeleccionados.splice(i, 1);

    // Quitar marcador del mapa
    if (markers[idx]) {
        map.removeLayer(markers[idx]);
        markers[idx] = null;
    }

    // 🔹 Volver a agregar el pedido a la lista principal
    const p = pedidos[idx];
    if (typeof listaPedidosEl !== 'undefined' && listaPedidosEl) {
        const label = document.createElement('label');
        label.className = "list-group-item";
        label.innerHTML = `
            <div class="pedido-item" style="display: flex; justify-content: space-between; align-items: center; padding: 5px 0;">
                <div>
                    <strong>${p.pedido || p.CVE_DOC}:</strong> 
                    ${p.cliente || p.NOMBRE_CLIENTE || 'Sin cliente'} <br> 
                    ${p.direccion || p.CALLE_ENVIO || 'Sin dirección'}
                </div>
                <input type="checkbox" name="pedidos[]" value="${idx}" style="transform: scale(1.5);">
            </div>
        `;
        listaPedidosEl.appendChild(label);
    }

    // 🔹 Re-renderizar lista de rutas y actualizar botones
    renderPedidosEnRuta();
    actualizarEstadoBotones();
});

            ulPedidosRuta.appendChild(li);
        }

        // Actualizar waypoints
        waypointsSeleccionados = pedidosSeleccionados.map(i => L.latLng(pedidos[i].lat || 0, pedidos[i].lon || 0));
        actualizarEstadoBotones();
    }

    // ------------------ Calcular ruta en mini mapa ------------------
    async function calcularRutaOptimizadaModal() {
        if (pedidosSeleccionados.length === 0) return;
        if (!navigator.geolocation) {
            alert("Geolocalización no disponible");
            return;
        }

        navigator.geolocation.getCurrentPosition(async pos => {
            if (!miniMap) return;

            const origen = L.latLng(pos.coords.latitude, pos.coords.longitude);
            const waypoints = [origen, ...waypointsSeleccionados];

            if (miniMap.routeControl) miniMap.removeControl(miniMap.routeControl);
            navigator.geolocation.getCurrentPosition(async pos => {
                if (!miniMap) return;

                const origen = [pos.coords.longitude, pos.coords.latitude];
                const destinos = waypointsSeleccionados.map(wp => [wp.lng, wp.lat]);

                const body = {
                    coordinates: [origen, ...destinos]
                };

                // implementación específica dependiente del servicio de ruteo (dejé el cuerpo preparado)
            });

        });
    }

    // ------------------ Agregar pedidos desde lista principal ------------------
    btnAgregarRuta.addEventListener('click', async () => {
        if (!selectAlmacenEl.value) {
            showAlertRuta("Selecciona un Almacén Primero");
            return;
        }

        const checkboxes = Array.from(document.querySelectorAll('input[name="pedidos[]"]:checked'));
        if (!checkboxes.length) {
            showAlertRuta("Debes seleccionar al menos un pedido.");
            return;
        }

        checkboxes.forEach(cb => {
            const index = parseInt(cb.value);
            if (isNaN(index)) return;

            if (!pedidosSeleccionados.includes(index)) {
                pedidosSeleccionados.push(index);

                // 🔹 Remover visualmente el pedido de la lista
                const label = cb.closest('label');
                if (label) label.remove();
            }
        });

        // 🔹 Mostrar animación de carga con SweetAlert
        Swal.fire({
            title: 'Cargando pedidos...',
            text: 'Estamos agregando los pedidos al mapa',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        try {
            // Asegúrate de que renderPedidosEnRuta sea async
            await renderPedidosEnRuta();

            // 🔹 Cerrar el loading
            Swal.close();

            // 🔹 Confirmación opcional
            Swal.fire({
                icon: 'success',
                title: 'Pedidos cargados',
                text: 'Todos los pedidos se marcaron en el mapa',
                timer: 2000,
                showConfirmButton: false
            });

        } catch (err) {
            console.error("Error al renderizar pedidos:", err);

            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Hubo un problema al cargar los pedidos'
            });
        }
    });

    // ------------------ Abrir ruta en Google Maps / Confirmar ruta (sin cambios importantes) ------------------
    btnConfirmarRuta.addEventListener("click", async () => {
        if (!pedidosSeleccionados.length) return alert("No hay pedidos seleccionados.");
        if (!selectRepartidor.value) return alert("Selecciona un repartidor.");
        if (!selectAuto.value) return alert("Selecciona un auto.");

        // Validar repartidor
        try {
            const resValidarRep = await fetch("validar_repartidor.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `repartidor_id=${encodeURIComponent(selectRepartidor.value)}`
            });
            const dataValidarRep = await resValidarRep.json();
            if (!dataValidarRep.success) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: dataValidarRep.msg
                });
                return;
            }
        } catch (e) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo validar el repartidor: ' + e.message
            });
            return;
        }

        // Validar auto
        try {
            const resValidarAuto = await fetch("validar_auto.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `auto_id=${encodeURIComponent(selectAuto.value)}`
            });
            const dataValidarAuto = await resValidarAuto.json();
            if (!dataValidarAuto.success) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: dataValidarAuto.msg
                });
                return;
            }
        } catch (e) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo validar el auto: ' + e.message
            });
            return;
        }

        Swal.fire({
            title: 'Procesando ruta…',
            html: 'Por favor, espera...',
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading(),
            backdrop: true
        });

        try {
            const optAlmacen = selectAlmacenEl.selectedOptions[0];
            const latAlm = optAlmacen ? parseFloat(optAlmacen.dataset.lat) : 0;
            const lonAlm = optAlmacen ? parseFloat(optAlmacen.dataset.lng) : 0;

            // Filtrar pedidos válidos antes de enviar
            const pedidosParaGuardar = pedidosOrdenadosParaMaps
                .filter(p => p && (p.pedido || p.CVE_DOC)) // <-- filtrar vacíos
                .map((p, index) => ({
                    pedido_id: p.pedido || p.CVE_DOC,
                    lat: p.lat || 0,
                    lon: p.lon || 0,
                    lat_alm: latAlm,
                    lon_alm: lonAlm,
                    direccion: `${p.calle || ''}${p.colonia ? ', ' + p.colonia : ''}${p.localidad || p.municipio ? ', ' + (p.localidad || p.municipio) : ''}${p.estado ? ', ' + p.estado : ''}${p.pais ? ', ' + p.pais : ''}`,
                    orden: index + 1
                }));

            if (!pedidosParaGuardar.length) throw new Error("No hay pedidos válidos para guardar.");

            // Guardar ruta en el servidor
            const resGuardar = await fetch("guardar_ruta.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `repartidor_id=${encodeURIComponent(selectRepartidor.value)}&auto_id=${encodeURIComponent(selectAuto.value)}&pedidos=${encodeURIComponent(JSON.stringify(pedidosParaGuardar))}`
            });

            const dataGuardar = await resGuardar.json();
            if (!dataGuardar.success) throw new Error(dataGuardar.msg || "Error al guardar la ruta");

            // Preparar URL de Google Maps
            const mapsUrl = generarMapsUrl();
            const tramosTexto = Array.from(ulTramos.querySelectorAll("li")).map(li => li.innerText).join("\n");

            // Enviar correo al repartidor
            const resCorreo = await fetch("enviar_logistica.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `repartidor_id=${encodeURIComponent(selectRepartidor.value)}&auto_id=${encodeURIComponent(selectAuto.value)}&ruta=${encodeURIComponent(mapsUrl)}&tramos=${encodeURIComponent(tramosTexto)}`
            });

            const dataCorreo = await resCorreo.json();

            limpiarMapa();
            Swal.close();

            Swal.fire({
                icon: 'success',
                title: '¡Ruta guardada!',
                html: 'El correo fue enviado correctamente al repartidor.'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Redirige al inicio sin mostrar la recarga
                    window.location.href =
                        'http://localhost/trax/html/logistica.php'; // o la URL inicial que quieras
                }
            });

            const modalEl = document.getElementById('modalRuta');
            const modalBootstrap = new bootstrap.Modal(modalEl);
            modalBootstrap.hide();

        } catch (e) {
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: e.message
            });
        }
    });

    // ------------------ Cargar almacenes ------------------
    selectAlmacenEl.innerHTML = '<option value="">Cargando almacenes...</option>';

    document.addEventListener("DOMContentLoaded", function () {

        // CARGAR ALMACENES DESDE almacenes.php
        fetch("almacenes.php")
            .then(res => res.json())
            .then(data => {
                selectAlmacenEl.innerHTML = '<option value="" disabled selected>Todos</option>';
                data.forEach(a => {
                    const opt = document.createElement('option');
                    opt.value = a.CVE_ALM;
                    opt.textContent = a.DESCR;
                    opt.dataset.lat = a.lat;
                    opt.dataset.lng = a.lng;
                    selectAlmacenEl.appendChild(opt);
                });
                window.listaAlmacenes = data; // 🔹 Guardar en memoria global

            })
            .catch(err => {
                console.error("Error al cargar almacenes:", err);
                selectAlmacenEl.innerHTML = '<option value="">Error al cargar almacenes</option>';
            });

        // SELECCIONAR ALMACÉN EN EL MAPA PRINCIPAL
        selectAlmacenEl.addEventListener('change', () => {
            const opt = selectAlmacenEl.selectedOptions[0];
            if (!opt || !opt.value) return;

            const lat = parseFloat(opt.dataset.lat);
            const lng = parseFloat(opt.dataset.lng);

            if (!map) { // usar la variable global
                console.warn("⚠️ El mapa principal no está inicializado aún.");
                return;
            }

            if (puntoPartida) map.removeLayer(puntoPartida);

            puntoPartida = L.marker([lat, lng], {
                title: "Punto de partida"
            })
                .addTo(map)
                .bindPopup(`Almacén: ${opt.textContent}`)
                .openPopup();

            map.setView([lat, lng], 14);
        });

        //EDITAR UBICACIÓN DE ALMACEN
        document.getElementById("editarUbicacionLink").addEventListener("click", function (e) {
            e.preventDefault();

            Swal.fire({
                html: '<p style="font-size: 1.2rem; font-weight:600;">¿Deseas editar la ubicación manualmente?</p>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí',
                cancelButtonText: 'No',
                reverseButtons: true,
                focusCancel: true
            }).then((result) => {
                if (!result.isConfirmed) return;

                const selected = selectAlmacenEl.selectedOptions[0];
                const nombre = selected?.textContent.trim();
                const lat = parseFloat(selected?.dataset.lat) || 0;
                const lng = parseFloat(selected?.dataset.lng) || 0;

                if (!nombre) {
                    Swal.fire('Error', 'Selecciona primero un almacén', 'error');
                    return;
                }

                // 🔹 Guardamos temporalmente la ubicación seleccionada
                window.tempUbicacion = { lat, lng };

                // 🔹 Mostramos el modal (el mapa se creará cuando esté visible)
                $('#modalMapa').modal('show');
            });
        });

        // 🧩 Inicializar o actualizar el mapa SOLO cuando el modal esté visible
        $('#modalMapa').on('shown.bs.modal', function () {
            const { lat, lng } = window.tempUbicacion || { lat: 0, lng: 0 };

            // Si ya existe el mapa, solo actualizar vista y marcador
            if (window.mapModalInitialized && window.mapModal) {
                window.mapModal.invalidateSize();
                window.mapModal.setView([lat, lng], lat && lng ? 14 : 2);
                if (window.marker) window.marker.setLatLng([lat, lng]);
                return;
            }

            // Crear mapa nuevo
            window.mapModal = L.map('AlmacenMap').setView([lat, lng], lat && lng ? 14 : 2);
            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                attribution: '&copy; CARTO',
            }).addTo(window.mapModal);

            window.marker = L.marker([lat, lng], { draggable: true }).addTo(window.mapModal);

            // Marcar como inicializado
            window.mapModalInitialized = true;

            // Forzar render correcto (por si la animación aún no terminó)
            setTimeout(() => {
                window.mapModal.invalidateSize();
                window.mapModal.setView([lat, lng], lat && lng ? 14 : 2);
            }, 300);
        });

        // GUARDAR NUEVA UBICACIÓN DE ALMACEN
        document.getElementById("btnEditarMapa").addEventListener("click", async function () {
            const opt = selectAlmacenEl.selectedOptions[0];
            if (!opt || !opt.value) {
                Swal.fire('Error', 'Selecciona primero un almacén', 'error');
                return;
            }

            const nombre = opt.textContent.trim();
            const pos = window.marker.getLatLng(); // coordenadas del modal

            try {
                const body = `nombre=${encodeURIComponent(nombre)}&lat=${pos.lat}&lng=${pos.lng}`;
                const res = await fetch('guardar_nuevaubicacion.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body
                });

                const data = await res.json();
                if (!data.success) throw new Error(data.msg || 'Error desconocido');

                // Actualizar marcador principal
                if (puntoPartida && map) map.removeLayer(puntoPartida);
                if (map) {
                    puntoPartida = L.marker([pos.lat, pos.lng], {
                        title: "Punto de partida"
                    })
                        .addTo(map)
                        .bindPopup(`Almacén: ${nombre}`)
                        .openPopup();
                    map.setView([pos.lat, pos.lng], 14);
                }

                // 🔹 Actualizar dataset del <option>
                opt.dataset.lat = pos.lat;
                opt.dataset.lng = pos.lng;

                Swal.fire('Guardado', data.msg, 'success');
                $('#modalMapa').modal('hide');

            } catch (err) {
                console.error(err);
                Swal.fire('Error', err.message, 'error');
            }
        });
        // REGRESAR A UBICACIÓN PREDETERMINADA DE ALMACEN
        document.getElementById('btnRegresarUbicacion').addEventListener('click', async function () {
            const opt = selectAlmacenEl.selectedOptions[0];

            if (!opt || !opt.value) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'Selecciona un almacén primero.',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            const nombre = opt.textContent.trim();

            const confirmar = await Swal.fire({
                title: '¿Deseas borrar la ubicación guardada?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí',
                cancelButtonText: 'No',
                confirmButtonColor: '#d33'
            });

            if (!confirmar.isConfirmed) return;

            // cerrar modal inmediatamente para que la animación sea fluida
            $('#modalMapa').modal('hide');

            try {
                // mostrar spinner mientras se ejecuta la eliminación y la revalidación
                Swal.fire({
                    title: 'Borrando y revalidando ubicación...',
                    text: 'Por favor espera un momento.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => Swal.showLoading()
                });

                // 1) borrar la ubicación en la BD
                const res = await fetch('eliminarUbicacion.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: `nombre=${encodeURIComponent(nombre)}`
                });

                const data = await res.json(); // <-- data disponible en este scope

                if (!data.success) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error al eliminar',
                        text: data.msg || 'No se pudo eliminar la ubicación.'
                    });
                    return;
                }

                // 2) eliminar marcador actual (dar sensación de inmediatez)
                if (puntoPartida && map) {
                    map.removeLayer(puntoPartida);
                    puntoPartida = null;
                }

                //    esto asegura que si el registro fue removido, obtenemos la coordenada "predeterminada"
                const almacenesRes = await fetch('almacenes.php');
                const almacenesData = await almacenesRes.json();

                // actualizar lista en memoria (opcional)
                window.listaAlmacenes = almacenesData;

                // buscar el almacén por nombre en la lista recién obtenida
                const nuevoAlmacen = almacenesData.find(a => a.DESCR.trim() === nombre);

                if (!nuevoAlmacen) {
                    // Si no se encontró, avisar pero no romper la app
                    Swal.fire({
                        icon: 'info',
                        title: 'Revalidación incompleta',
                        text: `No se encontró el almacén "${nombre}" en la recarga.`
                    });
                    return;
                }

                // parsear coords seguras
                const lat = parseFloat(nuevoAlmacen.lat) || 0;
                const lng = parseFloat(nuevoAlmacen.lng) || 0;

                // 4) actualizar dataset del <option> y crear el nuevo marcador predeterminado
                opt.dataset.lat = lat;
                opt.dataset.lng = lng;

                if (map && lat && lng) {
                    puntoPartida = L.marker([lat, lng], { title: "Punto de partida (predeterminado)" })
                        .addTo(map)
                        .bindPopup(`Almacén: ${nombre}`)
                        .openPopup();

                    map.setView([lat, lng], 14);
                }

                // 5) actualizar marcador dentro del modal si está inicializado
                if (window.mapModal && window.marker) {
                    try {
                        window.mapModal.removeLayer(window.marker);
                    } catch (e) { /* ignorar si ya fue removido */ }
                    window.marker = L.marker([lat, lng], { draggable: true }).addTo(window.mapModal);
                    window.mapModal.setView([lat, lng], lat && lng ? 14 : 2);
                }

                // Mostrar éxito con botón OK
                Swal.fire({
                    icon: 'success',
                    title: 'Ubicación restablecida',
                    text: `La ubicación de "${nombre}" se ha restablecido a la predeterminada.`,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#3085d6'
                });

            } catch (err) {
                console.error('Error en btnRegresarUbicacion:', err);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error al intentar revalidar la ubicación.'
                });
            }
        });

    });

    // ------------------ Mini mapa en modal ------------------
    modalRuta.addEventListener('shown.bs.modal', async () => {
        if (!miniMap) {
            if (!puntoPartida) {
                miniMap = L.map("miniMapa").setView([19.4326, -99.1332], 13);
            } else {
                const {
                    lat,
                    lng
                } = puntoPartida.getLatLng();
                miniMap = L.map("miniMapa").setView([lat, lng], 13);
            }

            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                attribution: '&copy; CARTO',
                maxZoom: 19
            }).addTo(miniMap);
        }

        // Mostrar almacén en miniMapa
        if (puntoPartida) {
            const {
                lat,
                lng
            } = puntoPartida.getLatLng();
            L.marker([lat, lng], {
                title: "Almacén seleccionado"
            }).addTo(miniMap).bindPopup("Almacén seleccionado");
        }

        // Mostrar pedidos seleccionados
        const bounds = [];
        if (puntoPartida) {
            const {
                lat,
                lng
            } = puntoPartida.getLatLng();
            bounds.push([lat, lng]);
        }

        pedidosSeleccionados.forEach(i => {
            const p = pedidos[i];
            if (p && p.lat && p.lon) {
                L.marker([p.lat, p.lon], {
                    icon: pedidoIconRojo
                }).addTo(miniMap);
                bounds.push([p.lat, p.lon]);
            }
        });

        if (bounds.length) miniMap.fitBounds(bounds);

        if (pedidosSeleccionados.length > 1) {
            await calcularRutaOptimizadaModal();
        }

        await renderListaCercanas();
    });

    // ------------------ Inicializar mapa ------------------
    window.onload = () => {
        initMap();
    };

    // Toggle orden manual (Sortable)
    document.getElementById("btnToggleOrden").addEventListener("click", function () {
        ordenManualActivo = !ordenManualActivo;
        const textoAyuda = document.getElementById("textoAyuda");
        const lista = document.getElementById("tramosRuta");

        if (ordenManualActivo) {
            this.textContent = "Desactivar orden manual";
            this.classList.remove("btn-primary");
            this.classList.add("btn-danger");
            textoAyuda.style.display = "block";

            sortable = new Sortable(lista, {
                animation: 150,
                ghostClass: "bg-light",
                onEnd: function () {
                    pedidosOrdenadosParaMaps = [];
                    document.querySelectorAll("#tramosRuta li").forEach(li => {
                        const idx = parseInt(li.dataset.index);
                        pedidosOrdenadosParaMaps.push(pedidos[idx]);
                    });
                }
            });

        } else {
            this.textContent = "Activar orden manual";
            this.classList.remove("btn-danger");
            this.classList.add("btn-primary");
            textoAyuda.style.display = "none";

            if (sortable) {
                sortable.destroy();
                sortable = null;
            }
        }
    });

    // Escuchar cambios en el select repartidor
    selectRepartidor.addEventListener("change", () => {
        const opt = selectRepartidor.selectedOptions[0];
        if (!opt || !opt.value) {
            nombreRepartidorEl.textContent = "-";
            telefonoRepartidorEl.textContent = "-";
            correoRepartidorEl.textContent = "-";
            edadEl.textContent = "-";
            return;
        }

        nombreRepartidorEl.textContent = opt.dataset.nombre || "-";
        telefonoRepartidorEl.textContent = opt.dataset.telefono || "-";
        correoRepartidorEl.textContent = opt.dataset.correo || "-";
        edadEl.textContent = opt.dataset.edad || "-";
    });

    // Autos
    selectAuto.addEventListener("change", () => {
        const opt = selectAuto.selectedOptions[0];
        if (!opt || !opt.value) {
            autoSeleccionado = null;
            marcaAutoEl.textContent = "-";
            modeloAutoEl.textContent = "-";
            placasAutoEl.textContent = "-";
            colorAutoEl.textContent = "-";
            combustibleAutoEl.textContent = "-";
            pesoAutoEl.textContent = "-";
            anioAutoEl.textContent = "-";
            tipoAutoEl.textContent = "-";
            return;
        }
        autoSeleccionado = opt.value;
        marcaAutoEl.textContent = opt.dataset.marca || "-";
        modeloAutoEl.textContent = opt.dataset.modelo || "-";
        placasAutoEl.textContent = opt.dataset.placas || "-";
        colorAutoEl.textContent = opt.dataset.color || "-";
        combustibleAutoEl.textContent = opt.dataset.combustible || "-";
        pesoAutoEl.textContent = opt.dataset.peso || "-";
        anioAutoEl.textContent = opt.dataset.anio || "-";
        tipoAutoEl.textContent = opt.dataset.tipo || "-";
    });

    // Cargar atrasados cada vez que se abre la modal
    modalAtrasadosEl.addEventListener('show.bs.modal', cargarPedidosAtrasados);
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {

        // ------------------ FUNCIÓN PRINCIPAL: RENDERIZAR PEDIDOS EN RUTA ------------------
        async function renderPedidosEnRuta() {
            ulPedidosRuta.innerHTML = ''; // Limpiar lista

            for (let idx of pedidosSeleccionados) {
                const p = pedidos[idx];
                await geocodePedido(p); // Geocodificar dirección si falta

                // Crear marcador si no existe
                if (!markers[idx]) {
                    markers[idx] = L.marker([p.lat, p.lon], {
                        icon: pedidoIconRojo
                    })
                        .addTo(map)
                        .bindPopup(`<b>${p.cliente} Pedido: ${p.pedido}</b> <br> ${p.direccion}`);
                }

                // Crear elemento <li>
                const li = document.createElement('li');
                li.className = 'list-group-item d-flex justify-content-between align-items-center';
                li.innerHTML = `
                <span>
                <input type="checkbox" name="pedidos[]" style="display: none !important;" value="${idx}"> ${p.pedido || p.CVE_DOC} - ${p.cliente || 'Sin cliente'} - ${p.direccion || p.CALLE_ENVIO || 'Sin dirección'}
                    <a href="#" class="text-primary d-block mt-1 abrir-modal"
                       data-pedido-idx="${idx}"
                       style="text-decoration: underline; font-size: 0.9em;">
                       ¿Tu pedido no aparece correctamente?
                    </a>
                </span>
                <button class="btn btn-sm btn-danger btn-eliminar">Eliminar</button>
            `;

                // Evento para eliminar pedido
                li.querySelector('.btn-eliminar').addEventListener('click', () => {
                    const i = pedidosSeleccionados.indexOf(idx);
                    if (i !== -1) pedidosSeleccionados.splice(i, 1);

                    // Quitar marcador del mapa
                    if (markers[idx]) {
                        map.removeLayer(markers[idx]);
                        markers[idx] = null;
                    }

                    // 🔹 Volver a agregar el pedido a la lista principal
                    const p = pedidos[idx];
                    if (typeof listaPedidosEl !== 'undefined' && listaPedidosEl) {
                        const label = document.createElement('label');
                        label.className = "list-group-item";
                        label.innerHTML = `
            <div class="pedido-item" style="display: flex; justify-content: space-between; align-items: center; padding: 5px 0;">
                <div>
                    <strong>${p.pedido || p.CVE_DOC}:</strong> 
                    ${p.cliente || p.NOMBRE_CLIENTE || 'Sin cliente'} <br> 
                    ${p.direccion || p.CALLE_ENVIO || 'Sin dirección'}
                </div>
                <input type="checkbox" name="pedidos[]" value="${idx}" style="transform: scale(1.5);">
            </div>
        `;
                        listaPedidosEl.appendChild(label);
                    }

                    // 🔹 Re-renderizar lista de rutas y actualizar botones
                    renderPedidosEnRuta();
                    actualizarEstadoBotones();
                });


                ulPedidosRuta.appendChild(li);
            }

            // Actualizar waypoints
            waypointsSeleccionados = pedidosSeleccionados.map(i => L.latLng(pedidos[i].lat || 0, pedidos[i].lon || 0));
            actualizarEstadoBotones();
        }

        // ------------------ EVENTO GLOBAL: ABRIR MODAL PARA EDITAR PEDIDO ------------------
        document.addEventListener('click', async function (e) {
            if (e.target && e.target.classList.contains('abrir-modal')) {
                e.preventDefault();

                const pedidoIdx = parseInt(e.target.dataset.pedidoIdx);
                const p = pedidos[pedidoIdx];

                // Validar existencia
                if (!p) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pedido no disponible',
                        text: 'Este pedido ya fue eliminado o no existe.'
                    });
                    return;
                }

                // Confirmación
                const result = await Swal.fire({
                    html: '<p style="font-size: 1.2rem; font-weight:600;">¿Deseas editar la ubicación manualmente?</p>',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sí',
                    cancelButtonText: 'No',
                    reverseButtons: true,
                    focusCancel: true
                });

                if (!result.isConfirmed) return;

                // Mostrar modal
                $('#modalPedidos').modal('show');

                // Inicializar mapa cuando el modal se muestre
                $('#modalPedidos').one('shown.bs.modal', function () {
                    const lat = p.lat || 19.4326;
                    const lon = p.lon || -99.1332;

                    // Eliminar mapa previo
                    if (window.pedidosMap) window.pedidosMap.remove();

                    // Crear nuevo mapa
                    window.pedidosMap = L.map('PedidosMap').setView([lat, lon], 14);
                    console.log("Mapa de pedidos inicializado correctamente con coordenadas:", lat, lon);

                    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                        attribution: '&copy; CARTO',
                    }).addTo(window.pedidosMap);

                    // Crear marcador arrastrable
                    const markerPedido = L.marker([lat, lon], {
                        draggable: true,
                        icon: pedidoIconRojo // ✅ tu icono rojo personalizado
                    })
                        .addTo(window.pedidosMap)
                        .bindPopup(`<b>${p.cliente}   Pedido: ${p.pedido}</b> <br> ${p.direccion}`)
                        .openPopup();
                    ;

                    // Botón guardar
                    document.getElementById('btnEditarPedidos').onclick = async function () {
                        const pos = markerPedido.getLatLng();
                        p.lat = pos.lat;
                        p.lon = pos.lng;
                        // 🔹 ACTUALIZAR MARCADOR EN MAPA PRINCIPAL EN TIEMPO REAL
                        if (markers[pedidoIdx]) {
                            markers[pedidoIdx].setLatLng([p.lat, p.lon]);
                            map.setView([p.lat, p.lon], 14);
                        }


                        try {
                            const respuesta = await fetch('guardar_nuevaubicacion.php', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                body: new URLSearchParams({
                                    nombre: p.cliente || 'SIN_CLIENTE', // <-- ahora guardamos el cliente
                                    lat: pos.lat,
                                    lng: pos.lng
                                })
                            });

                            const data = await respuesta.json();

                            // Cerrar modal antes de mostrar SweetAlert
                            $('#modalPedidos').modal('hide');

                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Ubicación guardada',
                                    text: data.msg
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error al guardar',
                                    text: data.msg
                                });
                            }
                        } catch (error) {
                            console.error('Error en la solicitud:', error);
                            $('#modalPedidos').modal('hide'); // cerrar modal también en caso de error
                            Swal.fire({
                                icon: 'error',
                                title: 'Error de red',
                                text: 'No se pudo conectar con el servidor.'
                            });
                        }
                    };
                    document.getElementById('btnRegresarPedidos').onclick = async function () {
                        const confirmar = await Swal.fire({
                            title: '¿Deseas borrar la ubicación guardada?',
                            text: `Esto regresará "${p.cliente || 'SIN_CLIENTE'}" a su ubicación predeterminada.`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Sí, borrar',
                            cancelButtonText: 'Cancelar',
                            reverseButtons: true,
                            focusCancel: true
                        });

                        if (!confirmar.isConfirmed) return;

                        try {
                            // 🔹 Cerrar modal antes de mostrar la animación
                            $('#modalPedidos').modal('hide');

                            // 🔹 Mostrar spinner mientras se borra
                            Swal.fire({
                                title: 'Borrando ubicación...',
                                text: 'Por favor espera unos segundos.',
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                didOpen: () => Swal.showLoading()
                            });

                            // 🔸 1️⃣ Eliminar de la base de datos
                            const respuesta = await fetch('eliminarUbicacion.php', {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                                body: new URLSearchParams({ nombre: p.cliente || 'SIN_CLIENTE' })
                            });
                            const data = await respuesta.json();

                            if (!data.success) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error al eliminar',
                                    text: data.msg || 'No se pudo eliminar la ubicación.'
                                });
                                return;
                            }

                            // 🔹 2️⃣ Borrar marcador actual del mapa principal
                            if (markers[pedidoIdx]) {
                                map.removeLayer(markers[pedidoIdx]);
                                markers[pedidoIdx] = null;
                            }

                            // 🔸 3️⃣ Cargar nuevos marcadores (en segundo plano)
                            fetch('marcadores.php')
                                .then(r => r.json())
                                .then(nuevosMarcadores => {
                                    const nuevo = nuevosMarcadores.find(m =>
                                        m.cliente === (p.cliente || 'SIN_CLIENTE') ||
                                        m.pedido === p.CVE_DOC
                                    );

                                    if (nuevo && nuevo.lat && nuevo.lon) {
                                        const marker = L.marker([nuevo.lat, nuevo.lon], { icon: pedidoIconRojo })
                                            .addTo(map)
                                            .bindPopup(`<b>${nuevo.cliente}</b><br>${nuevo.direccion || ''}`);

                                        markers[pedidoIdx] = marker;
                                        map.setView([nuevo.lat, nuevo.lon], 14);
                                    }
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Ubicación restaurada',
                                        text: 'La ubicación predeterminada se cargó correctamente.',
                                        confirmButtonText: 'OK',
                                        confirmButtonColor: '#3085d6'
                                    });

                                })
                                .catch(err => {
                                    console.error(err);
                                    Swal.fire('Error', 'No se pudo obtener la nueva ubicación.', 'error');
                                });

                        } catch (error) {
                            console.error('Error al eliminar ubicación:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error de red',
                                text: 'No se pudo conectar con el servidor.'
                            });
                        }
                    };

                    // Ajustar render
                    setTimeout(() => window.pedidosMap.invalidateSize(), 200);
                });
            }
        });

        // Hacer pública la función si se llama desde otros lugares
        window.renderPedidosEnRuta = renderPedidosEnRuta;
    });
</script>

<script>
    document.getElementById('iconSelect').addEventListener('click', function () {
        const select = document.getElementById('selectAlmacen');
        select.focus(); // enfocamos el select
        select.click(); // simulamos click
    });
</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>