<?php
// envios/lista_envios.php

session_start();
require __DIR__ . '/../includes/session_control.php';
require __DIR__ . '/../cotizaciones/api/_node.php';

// -----------------------------------------------------------------------------
// 1) Recuperar parámetros de filtro y paginación (por GET)
// -----------------------------------------------------------------------------
$page         = isset($_GET['page'])        ? max(1, intval($_GET['page'])) : 1;
$perPage      = 50; // 50 envíos por página en listado principal

$filterInfo   = trim($_GET['filterInfo']   ?? '');
$filterGuia   = trim($_GET['filterGuia']   ?? '');
$filterEmp    = intval($_GET['filterEmp']  ?? 0);
$filterPaga   = intval($_GET['filterPaga'] ?? 0);
$filterTrans  = intval($_GET['filterTrans'] ?? 0);
$filterEstado = intval($_GET['filterEstado'] ?? 0);

// -----------------------------------------------------------------------------
// 2) Cargar listado y metadatos desde Node
// -----------------------------------------------------------------------------
$token = cpn_node_token_or_fail();
$base = cpn_node_api_base();

$listUrl = $base . '/api/envios?' . http_build_query([
    'page' => $page,
    'limit' => $perPage,
    'filterInfo' => $filterInfo,
    'filterGuia' => $filterGuia,
    'filterEmp' => $filterEmp > 0 ? $filterEmp : null,
    'filterPaga' => $filterPaga > 0 ? $filterPaga : null,
    'filterTrans' => $filterTrans > 0 ? $filterTrans : null,
    'filterEstado' => $filterEstado > 0 ? $filterEstado : null,
]);
$resp = cpn_node_request('GET', $listUrl, $token);
if (!isset($resp['ok']) || $resp['ok'] !== true) {
    http_response_code($resp['_http'] ?? 500);
    die('Error consultando envíos en Node');
}

$resultados = $resp['data']['items'] ?? [];
if (!is_array($resultados)) $resultados = [];
$totalRows = (int)($resp['data']['totalCount'] ?? 0);
$totalPages = (int)($resp['data']['totalPages'] ?? 1);

$metaResp = cpn_node_request('GET', $base . '/api/envios/meta', $token);
if (!isset($metaResp['ok']) || $metaResp['ok'] !== true) {
    http_response_code($metaResp['_http'] ?? 500);
    die('Error consultando metadatos de envíos en Node');
}

$empresas = $metaResp['data']['empresas'] ?? [];
$formasEntrega = $metaResp['data']['formasEntrega'] ?? [];
$proveedoresEnvio = $metaResp['data']['proveedoresEnvio'] ?? [];
$transportadoras = $metaResp['data']['transportadoras'] ?? [];
$estadosEnvio = $metaResp['data']['estadosEnvio'] ?? [];

?>
<?php include __DIR__ . '/../templates/header.php'; ?>

<style>
    /* Compacto (solo esta pantalla) */
    #content .container-fluid .table {
        font-size: 12px;
    }

    #content .container-fluid .table th,
    #content .container-fluid .table td {
        padding: .25rem .35rem;
        line-height: 1.15;
    }

    #content .container-fluid .form-control,
    #content .container-fluid .custom-select,
    #content .container-fluid .form-select {
        font-size: 12px !important;
        padding: .2rem .4rem;
        height: calc(1.2em + .5rem + 2px);
    }

    #content .container-fluid .btn {
        font-size: 12px;
        padding: .25rem .5rem;
    }

    #content .container-fluid h1.h3,
    #content .container-fluid .h3 {
        font-size: 1.1rem;
    }

    #content .container-fluid .pagination .page-link {
        font-size: 12px;
        padding: .25rem .5rem;
    }
</style>

<div class="container-fluid">

    <h1 class="h3 mb-4">Lista de Envíos</h1>

    <!-- 7) BOTONES DE ACCIÓN -->
    <div class="mb-3">
        <button id="btnAddEnvio" class="btn btn-success me-2">
            <i class="bi bi-plus-lg"></i> Agregar Envío/Diligencia
        </button>
        <button id="btnCruceFactura" class="btn btn-warning">
            <i class="bi bi-arrow-left-right"></i> Cruzar con Factura
        </button>
    </div>

    <!-- 6) FILTROS PRINCIPALES (ahora todos en la misma fila) -->
    <form id="form-filtros" method="get" class="row align-items-end mb-4">
        <div class="col-md-2">
            <label for="filterInfo" class="form-label">Info</label>
            <input type="text" name="filterInfo" id="filterInfo" class="form-control mr-1 mb-1" style="font-size: 0.875rem;"
                value="<?= htmlspecialchars($filterInfo) ?>" placeholder="Descripción u Orden">
        </div>
        <div class="col-md-1">
            <label for="filterGuia" class="form-label">Guía</label>
            <input type="text" name="filterGuia" id="filterGuia" class="form-control mr-1 mb-1" style="font-size: 0.875rem;"
                value="<?= htmlspecialchars($filterGuia) ?>">
        </div>
        <div class="col-md-2">
            <label for="filterEmp" class="form-label">Empresa</label>
            <select name="filterEmp" id="filterEmp" class="form-control mr-1 mb-1" style="font-size: 0.875rem;">
                <option value="">Todos</option>
                <?php foreach ($empresas as $e):
                    $sel = ($e['id'] == $filterEmp) ? 'selected' : ''; ?>
                    <option value="<?= $e['id'] ?>" <?= $sel ?>
                        data-color="<?= $e['colorHexa'] ?>">
                        <?= htmlspecialchars($e['nombre']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col-md-2">
            <label for="filterPaga" class="form-label">Forma Entrega</label>
            <select name="filterPaga" id="filterPaga" class="form-control mr-1 mb-1" style="font-size: 0.875rem;">
                <option value="">Todos</option>
                <?php foreach ($formasEntrega as $f):
                    $sel = ($f['id'] == $filterPaga) ? 'selected' : ''; ?>
                    <option value="<?= $f['id'] ?>" <?= $sel ?>
                        data-color="<?= $f['colorHexa'] ?>">
                        <?= htmlspecialchars($f['nombre']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col-md-2">
            <label for="filterTrans" class="form-label">Transportadora</label>
            <select name="filterTrans" id="filterTrans" class="form-control mr-1 mb-1" style="font-size: 0.875rem;">
                <option value="">Todos</option>
                <?php foreach ($transportadoras as $t):
                    $sel = ($t['id'] == $filterTrans) ? 'selected' : ''; ?>
                    <option value="<?= $t['id'] ?>" <?= $sel ?>
                        data-color="<?= $t['colorHexa'] ?>">
                        <?= htmlspecialchars($t['nombre']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col-md-1">
            <label for="filterEstado" class="form-label">Estado</label>
            <select name="filterEstado" id="filterEstado" class="form-control mr-1 mb-1" style="font-size: 0.875rem;">
                <option value="">Todos</option>
                <?php foreach ($estadosEnvio as $st):
                    $sel = ($st['id'] == $filterEstado) ? 'selected' : ''; ?>
                    <option value="<?= $st['id'] ?>" <?= $sel ?>
                        data-color="<?= $st['colorHexa'] ?>">
                        <?= htmlspecialchars($st['nombre']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col-md-1 d-grid">
            <button type="submit" class="btn btn-primary">Buscar</button>
        </div>
        <div class="col-md-1 d-grid">
            <a href="lista_envios.php" class="btn btn-secondary">Limpiar</a>
        </div>
    </form>

    <!-- =====================================================================
         8) TABLA PRINCIPAL DE ENVÍOS (PAGINADA)
         ===================================================================== -->
    <div class="table-responsive">
        <table id="tablaEnvios" class="table table-bordered table-hover align-middle">
            <thead class="table-light text-center">
                <tr>
                    <th>Sel</th>
                    <th>ID</th>
                    <th>Fecha</th>
                    <th>Info</th>
                    <th>Envio</th>
                    <th>Guía</th>
                    <th>Costo</th>
                    <th>Estado</th>
                    <th>Cruce</th>
                    <th>Acción</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($resultados as $row):
                    $isCruzado = !is_null($row['idGasto']);
                    // Info column: si idVenta es NULL muestra descripción, si no muestra "Orden - Nombre - Apellido"
                    if (is_null($row['idVenta'])) {
                        $infoText = htmlspecialchars($row['descripcion']);
                    } else {
                        $infoText = htmlspecialchars("{$row['Orden']} - {$row['UsuarioNombre']} {$row['UsuarioApellido']}");
                    }
                ?>
                    <tr data-id="<?= $row['id'] ?>" class="fila-envio text-center">
                        <!-- Sel: checkbox solo habilitado cuando estamos en modo cruce; inicialmente deshabilitado -->
                        <td class="celda-sel">
                            <input type="checkbox" class="chk-cruce" disabled>
                        </td>

                        <!-- ID (número y debajo selector de Empresa) -->
                        <td>
                            <?= $row['id'] ?>
                            <br>
                            <?php if (!$isCruzado): ?>
                                <select class="form-select form-select-sm w-auto me-1 mb-1 sel-empresa edit-field mt-1" style="font-size: 0.875rem; border-radius: 0.375rem;"
                                    data-field="idEmpresa">
                                    <?php foreach ($empresas as $e):
                                        $selected = ($e['id'] == $row['EmpID']) ? 'selected' : ''; ?>
                                        <option value="<?= $e['id'] ?>" <?= $selected ?>
                                            data-color="<?= $e['colorHexa'] ?>">
                                            <?= htmlspecialchars($e['sigla']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            <?php else: ?>
                                <small><?= htmlspecialchars($row['EmpSigla']) ?></small>
                            <?php endif; ?>
                        </td>

                        <!-- Fecha: editable si no está cruzado -->
                        <!-- Fecha: editable si no está cruzado; si cruzado, formatear a 25-Jun-25 -->
                        <td>
                            <?php if (!$isCruzado): ?>
                                <input type="date"
                                    class="form-control form-control-sm edit-field" style="font-size: 0.875rem;"
                                    data-field="fecha"
                                    value="<?= htmlspecialchars(date('Y-m-d', strtotime($row['fecha']))) ?>">
                            <?php else:
                                // Formatear: día - mes abreviado - año (2 dígitos)
                                $dt = strtotime($row['fecha']);
                                $mesesAbc = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                                $dia = date('j', $dt);
                                $mes = $mesesAbc[intval(date('n', $dt)) - 1];
                                $anio2 = date('y', $dt);
                            ?>
                                <?= "{$dia}-{$mes}-{$anio2}" ?>
                            <?php endif; ?>
                        </td>


                        <!-- Info -->
                        <td><?= $infoText ?></td>

                        <!-- Envío: tres selectores apilados con íconos -->
                        <td>
                            <?php if (!$isCruzado): ?>
                                <div class="d-flex flex-column">
                                    <!-- Selector Forma Entrega -->
                                    <div class="d-flex align-items-center mb-1">
                                        <i class="bi bi-truck me-1" title="Forma Entrega"></i>
                                        <select class="form-control mr-1 mb-1 sel-paga edit-field" style="font-size: 0.875rem;"
                                            data-field="idFormaEntrega">
                                            <?php foreach ($formasEntrega as $f):
                                                $sel = ($f['id'] == $row['PagaID']) ? 'selected' : ''; ?>
                                                <option value="<?= $f['id'] ?>" <?= $sel ?>
                                                    data-color="<?= $f['colorHexa'] ?>">
                                                    <?= htmlspecialchars($f['nombre']) ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <!-- Selector Proveedor Envío -->
                                    <div class="d-flex align-items-center mb-1">
                                        <i class="bi bi-box-seam me-1" title="Proveedor de Envío"></i>
                                        <select class="form-control mr-1 mb-1 sel-proveed edit-field" style="font-size: 0.875rem;"
                                            data-field="idMedio">
                                            <?php foreach ($proveedoresEnvio as $pr):
                                                $sel = ($pr['id'] == $row['ProveedID']) ? 'selected' : ''; ?>
                                                <option value="<?= $pr['id'] ?>" <?= $sel ?>
                                                    data-color="<?= $pr['colorHexa'] ?>"
                                                    data-escredito="<?= $pr['esCredito'] ?>"
                                                    data-origen="<?= $pr['idOrigen'] ?>"
                                                    data-idtransportadora="<?= $pr['idTransportadora'] ?>">
                                                    <?= htmlspecialchars($pr['nombre']) ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <!-- Selector Transportadora -->
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-truck-flatbed me-1" title="Transportadora"></i>
                                        <select class="form-control mr-1 mb-1 sel-transp edit-field" style="font-size: 0.875rem;"
                                            data-field="idTransportadora">
                                            <option value="">-</option>
                                            <?php foreach ($transportadoras as $tr):
                                                $sel = ($tr['id'] == $row['TranspID']) ? 'selected' : ''; ?>
                                                <option value="<?= $tr['id'] ?>" <?= $sel ?>
                                                    data-color="<?= $tr['colorHexa'] ?>">
                                                    <?= htmlspecialchars($tr['nombre']) ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                            <?php else: ?>
                                <div class="d-flex flex-column">
                                    <div><?= htmlspecialchars($row['PagaSigla']) ?></div>
                                    <div><?= htmlspecialchars($row['ProveedSigla']) ?></div>
                                    <div><?= htmlspecialchars($row['TranspSigla']) ?></div>
                                </div>
                            <?php endif; ?>
                        </td>

                        <!-- Guía: texto editable si no cruzado -->
                        <td>
                            <?php if (!$isCruzado): ?>
                                <input type="text"
                                    class="form-control form-control-sm edit-field"
                                    data-field="guiaSeguimiento"
                                    value="<?= htmlspecialchars($row['Guia']) ?>">
                            <?php else: ?>
                                <?= htmlspecialchars($row['Guia']) ?>
                            <?php endif; ?>
                        </td>

                        <!-- Costo (precioEnvio): editable si no cruzado, sin formato al editar, alineado a la derecha -->
                        <td>
                            <?php if (!$isCruzado): ?>
                                <input type="text"
                                    class="form-control form-control-sm input-costo edit-field text-right"
                                    data-field="precioEnvio"
                                    value="<?= intval($row['precioEnvio']) ?>">
                            <?php else: ?>
                                <div class="text-right">$ <?= number_format($row['precioEnvio'], 0, ',', '.') ?></div>
                            <?php endif; ?>
                        </td>

                        <!-- Estado: siempre editable -->
                        <td>
                            <select class="form-control mr-1 mb-1 sel-estado edit-field" style="font-size: 0.875rem;"
                                data-field="idEstadoEnvio">
                                <?php foreach ($estadosEnvio as $st):
                                    $sel = ($st['id'] == $row['idEstadoEnvio']) ? 'selected' : ''; ?>
                                    <option value="<?= $st['id'] ?>" <?= $sel ?>
                                        data-color="<?= $st['colorHexa'] ?>">
                                        <?= htmlspecialchars($st['nombre']) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </td>

                        <!-- Cruce: si idGasto IS NULL => "-", sino => link a detalle_gasto (misma ventana) + prefijoFactura/noFactura -->
                        <td>
                            <?php if (is_null($row['idGasto'])): ?>
                                –
                            <?php else: ?>
                                <a href="/gastos/detalle_gasto.php?id=<?= $row['idGasto'] ?>">
                                    Ver Gasto
                                </a>
                                <br>
                                <small><?= htmlspecialchars($row['prefijoFactura'] . $row['noFactura']) ?></small>
                            <?php endif; ?>
                        </td>

                        <!-- Acción: hasta 3 botones (Ver Venta, Agregar a Gasto, Eliminar) apilados -->
                        <td class="text-center">
                            <?php if (!is_null($row['idVenta'])): ?>
                                <div class="mb-1">
                                    <a href="/ventas/venta.php?id=<?= $row['idVenta'] ?>"
                                        class="btn btn-sm btn-info w-100">
                                        <i class="bi bi-eye"></i> Ver Venta
                                    </a>
                                </div>
                            <?php endif; ?>

                            <?php if (
                                is_null($row['idGasto'])
                                && $row['PagaID'] == 1
                                && floatval($row['precioEnvio']) > 0
                            ): ?>
                                <div class="mb-1">
                                    <button class="btn btn-sm btn-outline-success btn-agregar-gasto w-100"
                                        data-id="<?= $row['id'] ?>">
                                        <i class="bi bi-cash-stack"></i> Agregar a Gasto
                                    </button>
                                </div>
                            <?php endif; ?>

                            <?php if (is_null($row['idGasto'])): ?>
                                <div>
                                    <button class="btn btn-sm btn-danger btn-eliminar-envio w-100"
                                        data-id="<?= $row['id'] ?>">
                                        <i class="bi bi-trash"></i> Eliminar
                                    </button>
                                </div>
                            <?php endif; ?>
                        </td>
                    </tr>
                <?php endforeach; ?>

                <?php if (empty($resultados)): ?>
                    <tr>
                        <td colspan="10" class="text-center text-muted py-3">
                            No hay envíos que coincidan con los filtros.
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>

        </table>
    </div>

    <!-- =====================================================================
         9) PAGINACIÓN
         ===================================================================== -->
    <?php if ($totalRows > 0): ?>
        <nav aria-label="Paginación envíos">
            <ul class="pagination justify-content-center">
                <?php
                $queryBase = $_GET;
                for ($p = 1; $p <= $totalPages; $p++):
                    $queryBase['page'] = $p;
                    $urlP = "?" . http_build_query($queryBase);
                    $active = ($p === $page) ? "active" : "";
                ?>
                    <li class="page-item <?= $active ?>">
                        <a class="page-link" href="<?= $urlP ?>"><?= $p ?></a>
                    </li>
                <?php endfor; ?>
            </ul>
        </nav>
    <?php endif; ?>

</div> <!-- /.container-fluid -->

<!-- =====================================================================
     10) MODAL: AGREGAR ENVÍO/DILIGENCIA
     ===================================================================== -->
<div class="modal fade" id="modalAddEnvio" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="formAddEnvio" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Envío / Diligencia</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Campos: Fecha, Empresa, Forma Entrega, Proveedor, Transportadora, Descripción, Guía, Precio, Observaciones,
                     Largo, Alto, Ancho, Peso, No. Cajas -->
                <div class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label">Fecha (*)</label>
                        <input type="date" id="addFecha" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Empresa (*)</label>
                        <select id="addEmpresa" class="form-control mr-1 mb-1" style="font-size: 0.875rem;" required>
                            <option value="">Seleccione...</option>
                            <?php foreach ($empresas as $e): ?>
                                <option value="<?= $e['id'] ?>"
                                    data-color="<?= $e['colorHexa'] ?>">
                                    <?= htmlspecialchars($e['sigla']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Forma Entrega (*)</label>
                        <select id="addPaga" class="form-control mr-1 mb-1" style="font-size: 0.875rem;" required>
                            <option value="">Seleccione...</option>
                            <?php foreach ($formasEntrega as $f): ?>
                                <option value="<?= $f['id'] ?>"
                                    data-color="<?= $f['colorHexa'] ?>">
                                    <?= htmlspecialchars($f['nombre']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Proveedor Envío (*)</label>
                        <select id="addProveed" class="form-control mr-1 mb-1" style="font-size: 0.875rem;" required>
                            <option value="">Seleccione...</option>
                            <?php foreach ($proveedoresEnvio as $pr): ?>
                                <option value="<?= $pr['id'] ?>"
                                    data-color="<?= $pr['colorHexa'] ?>"
                                    data-escredito="<?= $pr['esCredito'] ?>"
                                    data-idtransportadora="<?= $pr['idTransportadora'] ?>">
                                    <?= htmlspecialchars($pr['nombre']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- Transportadora (oculto por defecto) -->
                    <div class="col-md-3 d-none" id="wrapAddTransp">
                        <label class="form-label">Transportadora (*)</label>
                        <select id="addTransp" class="form-control mr-1 mb-1" style="font-size: 0.875rem;">
                            <option value="">Seleccione...</option>
                            <?php foreach ($transportadoras as $tr): ?>
                                <option value="<?= $tr['id'] ?>"
                                    data-color="<?= $tr['colorHexa'] ?>">
                                    <?= htmlspecialchars($tr['nombre']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Descripción</label>
                        <input type="text" id="addDescripcion" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Guía Seguimiento</label>
                        <input type="text" id="addGuia" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Precio Envío</label>
                        <input type="number" id="addPrecio" class="form-control text-right" min="0" step="1">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Observaciones</label>
                        <input type="text" id="addObs" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Largo (cm)</label>
                        <input type="number" id="addLargo" class="form-control text-right" min="0" step="1">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Alto (cm)</label>
                        <input type="number" id="addAlto" class="form-control text-right" min="0" step="1">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Ancho (cm)</label>
                        <input type="number" id="addAncho" class="form-control text-right" min="0" step="1">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Peso (kg)</label>
                        <input type="number" id="addPeso" class="form-control text-right" min="0" step="0.1">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">No. Cajas</label>
                        <input type="number" id="addCajas" class="form-control text-right" min="1" step="1">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar Envío</button>
            </div>
        </form>
    </div>
</div>

<!-- =====================================================================
     11) MODAL: CRUZAR CON FACTURA
     ===================================================================== -->
<div class="modal fade" id="modalCruceFactura" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cruzar Envíos con Factura</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Paso 1: Selección de Factura -->
                <div id="paso-factura">
                    <div class="mb-3">
                        <label class="form-label">Seleccione Factura a Cruzar</label>
                        <select id="selectFactura" class="form-control mr-1 mb-1" style="font-size: 0.875rem;">
                            <option value="">-- Seleccione --</option>
                            <!-- Opciones cargadas vía AJAX -->
                        </select>
                    </div>
                </div>

                <!-- Paso 2: Tabla de Envíos para cruce (oculto hasta que se seleccione factura) -->
                <div id="paso-envios" class="d-none">
                    <div class="mb-2">
                        <strong>Factura Seleccionada:&nbsp;</strong>
                        <span id="factura-info"></span>
                        <button id="btnQuitarFactura" class="btn btn-sm btn-outline-danger ms-3">
                            Quitar Factura
                        </button>
                        <button id="btnMarcarCruzada" class="btn btn-sm btn-warning ms-2">
                            Marcar Factura & Cruzada
                        </button>

                    </div>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <span><strong>Total Factura:</strong> <span id="factura-total"></span></span>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <span><strong>Acumulado Seleccionado:</strong> <span id="suma-seleccion">0</span></span>
                        </div>
                        <button id="btnAgregarAFactura" class="btn btn-success" disabled>
                            Agregar a Factura
                        </button>
                    </div>
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table id="tablaCruceEnvios" class="table table-sm table-bordered align-middle">
                            <thead class="table-light text-center">
                                <tr>
                                    <th>Sel</th>
                                    <th>ID</th>
                                    <th>Fecha</th>
                                    <th>Info</th>
                                    <th>Guía</th>
                                    <th>Costo</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Se llena vía AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/../templates/footer.php'; ?>

<!-- =====================================================================
     12) SCRIPTS JAVASCRIPT / jQuery
     ===================================================================== -->
<script>
    // 12.1) Convertir a JSON las variables PHP para usarlas en JS
    const empresasData = <?= json_encode($empresas, JSON_HEX_TAG) ?>;
    const formasEntregaData = <?= json_encode($formasEntrega, JSON_HEX_TAG) ?>;
    const proveedoresEnvioData = <?= json_encode($proveedoresEnvio, JSON_HEX_TAG) ?>;
    const transportadorasData = <?= json_encode($transportadoras, JSON_HEX_TAG) ?>;
    const estadosEnvioData = <?= json_encode($estadosEnvio, JSON_HEX_TAG) ?>;

    // 12.2) Función auxiliar para obtener colorHexa dado un array de objetos y un id
    function getColorById(arrayData, id) {
        for (let it of arrayData) {
            if (parseInt(it.id) === parseInt(id)) {
                return it.colorHexa;
            }
        }
        return null;
    }

    // 12.3) Función para formatear número a "$ xx.xxx" sin decimales
    function formatMonedaSinDecimales(num) {
        const n = parseFloat(num);
        if (isNaN(n)) return '';
        return '$ ' + n.toLocaleString('es-CO', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });
    }

    // 12.4) Document Ready
    $(function() {
        // 12.4.1) Asignar colores de fondo iniciales a los selects de filtro
        $('#filterEmp option[selected]').each(function() {
            const color = $(this).data('color');
            if (color) {
                $('#filterEmp').css('background-color', color).css('color', '#fff');
            }
        });
        $('#filterPaga option[selected]').each(function() {
            const color = $(this).data('color');
            if (color) {
                $('#filterPaga').css('background-color', color).css('color', '#fff');
            }
        });
        $('#filterTrans option[selected]').each(function() {
            const color = $(this).data('color');
            if (color) {
                $('#filterTrans').css('background-color', color).css('color', '#fff');
            }
        });
        $('#filterEstado option[selected]').each(function() {
            const color = $(this).data('color');
            if (color) {
                $('#filterEstado').css('background-color', color).css('color', '#fff');
            }
        });


        $('#tablaEnvios tbody tr').each(function() {
            const $row = $(this);

            // Empresa
            const $selEmp = $row.find('.sel-empresa');
            if ($selEmp.length) {
                const colorEmp = $selEmp.find('option:selected').data('color');
                if (colorEmp) {
                    $selEmp.css('background-color', colorEmp).css('color', '#fff');
                }
            }
            // Forma Entrega
            const $selPaga = $row.find('.sel-paga');
            if ($selPaga.length) {
                const colorPaga = $selPaga.find('option:selected').data('color');
                if (colorPaga) {
                    $selPaga.css('background-color', colorPaga).css('color', '#fff');
                }
            }
            // Proveedor
            const $selProv = $row.find('.sel-proveed');
            if ($selProv.length) {
                const colorProv = $selProv.find('option:selected').data('color');
                if (colorProv) {
                    $selProv.css('background-color', colorProv).css('color', '#fff');
                }
            }
            // Transportadora
            const $selTrans = $row.find('.sel-transp');
            if ($selTrans.length) {
                const colorTrans = $selTrans.find('option:selected').data('color');
                if (colorTrans) {
                    $selTrans.css('background-color', colorTrans).css('color', '#fff');
                }
            }
            // Estado
            const $selEst = $row.find('.sel-estado');
            if ($selEst.length) {
                const colorEst = $selEst.find('option:selected').data('color');
                if (colorEst) {
                    $selEst.css('background-color', colorEst).css('color', '#fff');
                }
            }
        });

        // 12.X) Marcar Factura como Cruzada
        $('#btnMarcarCruzada').click(function() {
            if (!confirm('¿Marcar esta factura como “cruzada” sin seleccionar envíos adicionales?')) return;
            const idGasto = $('#selectFactura').val();
            if (!idGasto) {
                alert('No hay ninguna factura seleccionada.');
                return;
            }
            $.post('lista_envios_api.php', {
                action: 'marcar_factura_cruzada',
                idGasto: idGasto
            }, function(resp) {
                if (!resp.success) {
                    alert('Error al marcar factura como cruzada: ' + (resp.error || ''));
                } else {
                    // Podemos ocultar todo el modal o recargar la vista
                    alert('Factura marcada como cruzada.');
                    location.reload();
                }
            }, 'json');
        });

        // Cuando cambie alguno de los filtros de select, actualizar color de fondo
        $('#filterEmp').on('change', function() {
            const color = getColorById(empresasData, $(this).val());
            if (color) $(this).css('background-color', color).css('color', '#fff');
            else $(this).css('background-color', '').css('color', '');
        });
        $('#filterPaga').on('change', function() {
            const color = getColorById(formasEntregaData, $(this).val());
            if (color) $(this).css('background-color', color).css('color', '#fff');
            else $(this).css('background-color', '').css('color', '');
        });
        $('#filterTrans').on('change', function() {
            const color = getColorById(transportadorasData, $(this).val());
            if (color) $(this).css('background-color', color).css('color', '#fff');
            else $(this).css('background-color', '').css('color', '');
        });
        $('#filterEstado').on('change', function() {
            const color = getColorById(estadosEnvioData, $(this).val());
            if (color) $(this).css('background-color', color).css('color', '#fff');
            else $(this).css('background-color', '').css('color', '');
        });

        // 12.4.2) LIVE EDIT de campos en la tabla
        //    - Inputs / Selects con clase .edit-field
        //    - Al cambiar, enviamos AJAX a lista_envios_api.php?action=update_field&idEnvio=...
        $('#tablaEnvios').on('change', '.edit-field', function() {
            const $input = $(this);
            const fieldName = $input.data('field');
            let newValue = $input.val();
            const idEnvio = $input.closest('tr').data('id');

            // Si es campo costo, quitar puntos mientas escriben
            if (fieldName === 'precioEnvio') {
                newValue = newValue.replace(/\./g, '').trim();
                if (newValue === '') newValue = '0';
            }

            $.post('lista_envios_api.php', {
                action: 'update_field',
                idEnvio: idEnvio,
                field: fieldName,
                value: newValue
            }, function(resp) {
                if (!resp.success) {
                    alert('Error al actualizar campo: ' + (resp.error || ''));
                } else {
                    // Si era costo, re-formatear con separador de miles
                    if (fieldName === 'precioEnvio') {
                        const formatted = formatMonedaSinDecimales(newValue);
                        $input.val(formatted);
                    }
                    // Si era un select con data-color, actualizar color de fondo
                    if ($input.is('select')) {
                        const selectedOptColor = $input.find('option:selected').data('color');
                        if (selectedOptColor) {
                            $input.css('background-color', selectedOptColor).css('color', '#fff');
                        } else {
                            $input.css('background-color', '').css('color', '');
                        }
                    }
                    // Si actualizamos estado o agregamos a gasto, recargar fila completa
                    if (fieldName === 'idEstadoEnvio' || fieldName === 'precioEnvio') {
                        location.reload(); // refrescar la tabla entera (simplificación)
                    }
                }
            }, 'json');
        });

        // 12.4.3) BOTÓN: Agregar a Gasto (un solo envío)
        $('#tablaEnvios').on('click', '.btn-agregar-gasto', function() {
            const idEnvio = $(this).data('id');
            if (!confirm('¿Agregar este envío al gasto?')) return;

            $.post('lista_envios_api.php', {
                action: 'crear_gasto_envio',
                idEnvio: idEnvio
            }, function(resp) {
                if (!resp.success) {
                    alert('Error al agregar a gasto: ' + (resp.error || ''));
                } else {
                    // Recargar página para que desaparezca el botón
                    location.reload();
                }
            }, 'json');
        });

        // 12.4.4) BOTÓN: Eliminar Envío (solo si no está cruzado)
        $('#tablaEnvios').on('click', '.btn-eliminar-envio', function() {
            const idEnvio = $(this).data('id');
            if (!confirm('¿Seguro que desea eliminar este envío?')) return;

            $.post('lista_envios_api.php', {
                action: 'delete_envio',
                idEnvio: idEnvio
            }, function(resp) {
                if (!resp.success) {
                    alert('Error al eliminar el envío: ' + (resp.error || ''));
                } else {
                    // Remover fila de la tabla
                    $(`tr[data-id="${idEnvio}"]`).remove();
                }
            }, 'json');
        });

        // 12.4.5) BOTÓN: Abrir Modal Agregar Envío
        const modalAddEnvio = new bootstrap.Modal(document.getElementById('modalAddEnvio'));
        $('#btnAddEnvio').click(function() {
            // Resetear formulario
            $('#formAddEnvio')[0].reset();
            $('#wrapAddTransp').addClass('d-none');
            $('#modalAddEnvio select, #modalAddEnvio input').css('background-color', '').css('color', '');
            modalAddEnvio.show();
        });

        // 12.4.6) Cascada: en el modal Agregar, al cambiar Proveedor de Envío
        $('#addProveed').on('change', function() {
            const provId = $(this).val();
            const prov = proveedoresEnvioData.find(x => parseInt(x.id) === parseInt(provId));
            if (!prov) {
                $('#wrapAddTransp').addClass('d-none');
                $('#addTransp').val('');
                return;
            }
            if (parseInt(prov.esCredito) === 1) {
                // es proveedor agregador => mostrar todas las transportadoras visibles
                $('#wrapAddTransp').removeClass('d-none');
                $('#addTransp').prop('required', true);
            } else {
                // es transportadora en sí misma => ocultar y asignar su idTransportadora
                $('#wrapAddTransp').addClass('d-none');
                $('#addTransp').val(prov.idTransportadora);
                $('#addTransp').prop('required', false);
            }
        });

        // 12.4.7) SUBMIT: Formulario Agregar Envío
        $('#formAddEnvio').on('submit', function(e) {
            e.preventDefault();
            const fecha = $('#addFecha').val();
            const empresa = $('#addEmpresa').val();
            const paga = $('#addPaga').val();
            const proveed = $('#addProveed').val();
            let transport = $('#addTransp').val() || null;
            const desc = $('#addDescripcion').val();
            const guia = $('#addGuia').val();
            const precio = $('#addPrecio').val() || 0;
            const obs = $('#addObs').val();
            const largo = $('#addLargo').val() || null;
            const alto = $('#addAlto').val() || null;
            const ancho = $('#addAncho').val() || null;
            const peso = $('#addPeso').val() || null;
            const cajas = $('#addCajas').val() || null;

            if (!fecha || !empresa || !paga || !proveed) {
                alert('Por favor complete todos los campos obligatorios (*)');
                return;
            }

            $.post('agregar_envio.php', {
                action: 'add_envio',
                fecha: fecha,
                idEmpresa: empresa,
                idFormaEntrega: paga,
                idProveedorEnvio: proveed,
                idTransportadora: transport,
                descripcion: desc,
                guiaSeguimiento: guia,
                precioEnvio: precio,
                observaciones: obs,
                largo_paquete: largo,
                alto_paquete: alto,
                ancho_paquete: ancho,
                peso_kg: peso,
                noCajas: cajas
            }, function(resp) {
                if (!resp.success) {
                    alert('Error al agregar envío: ' + (resp.error || ''));
                } else {
                    modalAddEnvio.hide();
                    location.reload();
                }
            }, 'json');
        });

        // 12.4.8) BOTÓN: Abrir Modal Cruce con Factura
        const modalCruceFactura = new bootstrap.Modal(document.getElementById('modalCruceFactura'));
        $('#btnCruceFactura').click(function() {
            // Resetear todo
            $('#selectFactura').html('<option value="">-- Seleccione --</option>');
            $('#paso-envios').addClass('d-none');
            $('#paso-factura').removeClass('d-none');
            $('#factura-info').text('');
            $('#factura-total').text('');
            $('#suma-seleccion').text('0');
            $('#btnAgregarAFactura').prop('disabled', true);
            // Cargar facturas disponibles
            $.getJSON('lista_envios_api.php', {
                action: 'list_facturas'
            }, function(data) {
                data.forEach(f => {
                    // Construir texto: "YYYY-MM-DD | PrefijoNoFactura | RazónSocial | Total ($ xx.xxx)"
                    const razon = (f.razonSocial && f.razonSocial.trim() !== f.nombre) ?
                        `${f.nombre} ${f.apellido}` :
                        f.nombre;
                    const totalForm = formatMonedaSinDecimales(f.total);
                    const optionTxt = `${f.fecha} | ${f.prefijoFactura}${f.noFactura} | ${razon} | ${totalForm}`;
                    $('#selectFactura').append(
                        `<option value="${f.idGasto}" 
                             data-idtercero="${f.idTercero}" 
                             data-total="${f.total}">
                        ${optionTxt}
                     </option>`
                    );
                });
            });
            modalCruceFactura.show();
        });

        // 12.4.9) Cuando se elija una factura
        $('#selectFactura').on('change', function() {
            const idGasto = $(this).val();
            if (!idGasto) {
                // No seleccionado
                $('#paso-envios').addClass('d-none');
                $('#paso-factura').removeClass('d-none');
                return;
            }
            const total = parseFloat($(this).find('option:selected').data('total'));
            const idTercero = $(this).find('option:selected').data('idtercero');
            // Mostrar datos de factura
            const textoOpt = $(this).find('option:selected').text();
            $('#factura-info').text(textoOpt);
            $('#factura-total').text(formatMonedaSinDecimales(total));

            // Cargar envíos elegibles (idGasto IS NULL y idTercero coincide)
            $.getJSON('lista_envios_api.php', {
                action: 'list_envios_para_cruce',
                idTercero: idTercero
            }, function(envs) {
                const $tbody = $('#tablaCruceEnvios tbody').empty();
                envs.forEach(ev => {
                    // Formatear fecha a “25-Jun-25”
                    const dateObj = new Date(ev.fecha);
                    const mesesAbc = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                    const dia = dateObj.getDate();
                    const mes = mesesAbc[dateObj.getMonth()];
                    const anio = dateObj.getFullYear().toString().slice(-2);
                    const fechaForm = `${dia}-${mes}-${anio}`;

                    // Info
                    let infoTxt = '';
                    if (ev.idVenta === null) {
                        infoTxt = ev.descripcion;
                    } else {
                        infoTxt = `${ev.Orden} - ${ev.UsuarioNombre} ${ev.UsuarioApellido}`;
                    }
                    const guiaTxt = ev.guiaSeguimiento || '';
                    const costForm = formatMonedaSinDecimales(ev.precioEnvio);

                    $tbody.append(`
        <tr data-id="${ev.id}" data-costo="${ev.precioEnvio}">
          <td class="text-center"><input type="checkbox" class="chk-seleccion"></td>
          <td>${ev.id}</td>
          <td>${fechaForm}</td>
          <td>${infoTxt}</td>
          <td>${guiaTxt}</td>
          <td>${costForm}</td>
        </tr>
    `);


                    // Al cargar, asignar color de fondo a cada select en la tabla



                });

                // Mostrar paso-envios, ocultar paso-factura
                $('#paso-factura').addClass('d-none');
                $('#paso-envios').removeClass('d-none');
            });

        });

        // 12.4.10) Botón Quitar Factura (vuelve a paso 1)
        $('#btnQuitarFactura').click(function() {
            $('#selectFactura').val('');
            $('#paso-envios').addClass('d-none');
            $('#paso-factura').removeClass('d-none');
            $('#suma-seleccion').text('0');
            $('#tablaCruceEnvios tbody').empty();
        });

        // 12.4.11) Manejo de selección de envíos para cruce
        let sumaActual = 0;
        $('#tablaCruceEnvios').on('change', '.chk-seleccion', function() {
            const $fila = $(this).closest('tr');
            const costo = parseFloat($fila.data('costo'));
            sumaActual = parseFloat($('#suma-seleccion').text().replace(/\./g, '')) || 0;

            if ($(this).is(':checked')) {
                sumaActual += costo;
            } else {
                sumaActual -= costo;
            }

            // Obtener total de factura
            const totalFac = parseFloat(
                $('#factura-total').text().replace(/\$| |\./g, '')
            );
            // Actualizar sumatoria en pantalla (con formato)
            $('#suma-seleccion').text(formatMonedaSinDecimales(sumaActual));

            // Si supera totalFac => deshabilitar botón Agregar a Factura
            if (sumaActual > totalFac) {
                $('#btnAgregarAFactura').prop('disabled', true);
            } else {
                $('#btnAgregarAFactura').prop('disabled', false);
            }
        });

        // 12.4.12) Botón Agregar a Factura (cruce masivo)
        $('#btnAgregarAFactura').click(function() {
            if (!confirm('¿Seguro que desea cruzar los envíos seleccionados con esta factura?')) return;

            const idGasto = $('#selectFactura').val();
            const enviosSel = [];
            $('#tablaCruceEnvios tbody tr').each(function() {
                const $chk = $(this).find('.chk-seleccion');
                if ($chk.is(':checked')) {
                    enviosSel.push($(this).data('id'));
                }
            });
            if (enviosSel.length === 0) {
                alert('Debe seleccionar al menos un envío.');
                return;
            }
            // Llamada AJAX para cruzar envíos
            $.post('cruzar_envios_api.php', {
                action: 'cruzar_envios',
                idGasto: idGasto,
                envios: enviosSel
            }, function(resp) {
                if (!resp.success) {
                    alert('Error al cruzar envíos: ' + (resp.error || ''));
                } else {
                    modalCruceFactura.hide();
                    location.reload();
                }
            }, 'json');
        });

    });
</script>