<?php
/*  ──────────────────────────────────────────────────────────────
    analisis_envio.php
    Visualizador, edición en vivo y calculadora de paquetes
    URL: analisis_envio.php?id=123
    ────────────────────────────────────────────────────────────── */
session_start();
include '../includes/session_control.php';
include '../db/db.php';


$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if (!$id) die('ID inválido');

// 1) Producto principal
$sql = "
SELECT
    p.id,
    p.referenciaCPN,
    p.nombre,
    p.largoCmCaja,
    p.anchoCmCaja,
    p.altoCmCaja,
    p.undsCaja,
    p.pesoKgCaja,
    p.pesoKgProducto,
    p.largoProductoEnvioAjustado,
    p.anchoProductoEnvioAjustado,
    p.altoProductoEnvioAjustado,
    p.largoProductoEnvio,
    p.anchoProductoEnvio,
    p.altoProductoEnvio,
    p.volumenCm3ProductoAjustado,
    p.pesoVolumetricoProducto,
    p.pesoEnvioUnidadKG,
    p.acomodacion,
    p.txtMedidas,
    p.txtEmpaque
FROM tb_productos p
WHERE p.id = ?
";
$stmt = $conn->prepare($sql);
$stmt->bind_param('i', $id);
$stmt->execute();
$prod = $stmt->get_result()->fetch_assoc() ?: die('Producto no encontrado');
$stmt->close();

// 2) Características filtradas
$sqlC = "
SELECT cp.id, cp.idCaracteristica, lc.nombre, cp.valor
FROM tb_caracteristicas_productos cp
JOIN tb_lista_caracteristica lc
  ON cp.idCaracteristica = lc.id
WHERE cp.idProducto = ?
  AND (lc.nombre LIKE '%ancho%' OR lc.nombre LIKE '%largo%' OR lc.nombre LIKE '%alto%' OR lc.nombre LIKE '%medida%')
ORDER BY lc.nombre
";
$stmt = $conn->prepare($sqlC);
$stmt->bind_param('i', $id);
$stmt->execute();
$chars = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// 3) Opciones para selector de característica
$listOpts = $conn->query("SELECT id, nombre FROM tb_lista_caracteristica");
$opts = $listOpts->fetch_all(MYSQLI_ASSOC);
?>
<?php include '../templates/header.php'; ?>

<div class="container-fluid">

    <!-- ========== Fila superior: 3 columnas ========== -->
    <div class="row gx-2">
        <!-- 1: Caja (Medidas al por mayor) -->
        <div class="col-md-4">
            <fieldset class="border p-2">
                <legend class="w-auto small text-secondary">Caja (Medidas al por mayor)</legend>
                <?php // LargoCmCaja 
                ?>
                <div class="mb-1">
                    <label class="form-label small">Largo</label>
                    <input type="number" id="largoCmCaja" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['largoCmCaja'] ?>">
                </div>
                <?php // AnchoCmCaja 
                ?>
                <div class="mb-1">
                    <label class="form-label small">Ancho</label>
                    <input type="number" id="anchoCmCaja" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['anchoCmCaja'] ?>">
                </div>
                <?php // AltoCmCaja 
                ?>
                <div class="mb-1">
                    <label class="form-label small">Alto</label>
                    <input type="number" id="altoCmCaja" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['altoCmCaja'] ?>">
                </div>
                <?php // UndsCaja 
                ?>
                <div class="mb-1">
                    <label class="form-label small">Unid/caja</label>
                    <input type="number" id="undsCaja" class="form-control form-control-sm"
                        step="1" min="1" value="<?= $prod['undsCaja'] ?>">
                </div>
                <?php // PesoKgCaja 
                ?>
                <div class="mb-1">
                    <label class="form-label small">Peso (kg)</label>
                    <input type="number" id="pesoKgCaja" class="form-control form-control-sm"
                        step="0.001" min="0" value="<?= $prod['pesoKgCaja'] ?>">
                </div>
                <?php // Volumen Caja 
                ?>
                <div>
                    <label class="form-label small">Volumen Caja (cm³)</label>
                    <div><span id="volumenCaja"><?= round($prod['largoCmCaja'] * $prod['anchoCmCaja'] * $prod['altoCmCaja'], 1) ?></span></div>
                </div>
                <div class="mb-1">
                    <label class="form-label small">Acomodación</label>
                    <div>
                        <?php
                        $ac = $prod['acomodacion'];          // e.g. "3x24x14"
                        $total = array_product(explode('x', $ac));
                        ?>
                        <?= htmlspecialchars($ac) ?> (<?= $total ?>)
                    </div>
                </div>
            </fieldset>
        </div>

        <!-- 2: Unidad ajustada + Datos del producto -->
        <div class="col-md-4">
            <fieldset class="border p-2 mb-2">
                <legend class="w-auto small text-secondary">Unidad ajustada (cm)</legend>
                <div class="mb-1">
                    <label class="form-label small">Largo</label>
                    <input type="number" id="largoProductoEnvioAjustado" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['largoProductoEnvioAjustado'] ?>">
                </div>
                <div class="mb-1">
                    <label class="form-label small">Ancho</label>
                    <input type="number" id="anchoProductoEnvioAjustado" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['anchoProductoEnvioAjustado'] ?>">
                </div>
                <div class="mb-1">
                    <label class="form-label small">Alto</label>
                    <input type="number" id="altoProductoEnvioAjustado" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['altoProductoEnvioAjustado'] ?>">
                </div>
            </fieldset>
            <fieldset class="border p-2">
                <legend class="w-auto small text-secondary">Datos del producto</legend>
                <div class="mb-1">
                    <label class="form-label small">Peso Und (kg)</label>
                    <div><span id="pesoReal"><?= $prod['pesoKgProducto'] ?></span></div>
                </div>
                <div class="mb-1">
                    <label class="form-label small">Peso Vol. Und (kg)</label>
                    <div><span id="pesoVolumetricoProducto"><?= $prod['pesoVolumetricoProducto'] ?></span></div>
                </div>
                <div class="mb-1">
                    <label class="form-label small">Peso Env. Und (kg)</label>
                    <div>
                        <span id="pesoEnvioUnidadKG" style="color:#006400;"><?= $prod['pesoEnvioUnidadKG'] ?></span>
                        <span id="envioMetodo" style="color:#006400;"></span>
                    </div>
                </div>

            </fieldset>
        </div>

        <!-- 3: Canvas pequeño + Revisión debajo -->
        <div class="col-md-4">
            <canvas id="boxCanvasSmall" width="300" height="200" style="border:1px solid #ccc; display:block; margin-bottom:1rem;"></canvas>
            <fieldset class="border p-2">
                <legend class="w-auto small text-secondary">Revisión</legend>
                <div class="mb-1">
                    <label class="form-label small">Vol Caja (cm³)</label>
                    <div><span id="revVolCaja"><?= round($prod['largoCmCaja'] * $prod['anchoCmCaja'] * $prod['altoCmCaja'], 1) ?></span></div>
                </div>
                <div class="mb-1">
                    <label class="form-label small">Vol Cálculo (cm³)</label>
                    <div><span id="revVolCal"><?= $prod['volumenCm3ProductoAjustado'] ?></span></div>
                </div>
                <?php
                $diff = round(
                    $prod['volumenCm3ProductoAjustado'] * $prod['undsCaja']
                        - ($prod['largoCmCaja'] * $prod['anchoCmCaja'] * $prod['altoCmCaja']),
                    1
                );
                ?>
                <div>
                    <label class="form-label small">Diferencia (cm³)</label>
                    <div>
                        <span id="revDiferencia" class="<?= $diff > 0 ? 'text-success' : 'text-danger' ?>">
                            <?= $diff ?>
                        </span>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

    <!-- ========== Fila siguiente: Producto, Características, Paquetes ========== -->
    <div class="row gx-2 mt-3">
        <!-- Producto (txtMedidas + txtEmpaque) -->
        <div class="col-md-4">
            <fieldset class="border p-2 mb-3">
                <legend class="w-auto small text-secondary">Producto</legend>
                <div class="mb-2">
                    <label class="form-label small">Medidas</label>
                    <input type="text" id="txtMedidas" class="form-control form-control-sm"
                        value="<?= htmlspecialchars($prod['txtMedidas']) ?>">
                </div>
                <div class="mb-2">
                    <label class="form-label small">Empaque</label>
                    <textarea id="txtEmpaque" class="form-control form-control-sm" rows="3"><?= htmlspecialchars($prod['txtEmpaque']) ?></textarea>
                </div>
                <button id="btnRedimensionar" class="btn btn-sm btn-outline-secondary">
                    Redimensionar
                </button>
            </fieldset>
        </div>

        <!-- Características -->
        <div class="col-md-3">
            <fieldset class="border p-2 mb-3">
                <legend class="w-auto small text-secondary">Envío original (cm)</legend>

                <!-- Largo -->
                <div class="mb-1">
                    <label class="form-label small">Largo</label>
                    <input type="number" id="largoProductoEnvio" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['largoProductoEnvio'] ?>">
                </div>

                <!-- Swap Largo ↔ Ancho -->
                <div class="text-center mb-2">
                    <button type="button" id="swapLA" class="btn btn-sm btn-outline-secondary">↔ Largo/Ancho</button>
                </div>

                <!-- Ancho -->
                <div class="mb-1">
                    <label class="form-label small">Ancho</label>
                    <input type="number" id="anchoProductoEnvio" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['anchoProductoEnvio'] ?>">
                </div>

                <!-- Swap Ancho ↔ Alto -->
                <div class="text-center mb-2">
                    <button type="button" id="swapAH" class="btn btn-sm btn-outline-secondary">↔ Ancho/Alto</button>
                </div>

                <!-- Alto -->
                <div class="mb-1">
                    <label class="form-label small">Alto</label>
                    <input type="number" id="altoProductoEnvio" class="form-control form-control-sm"
                        step="0.1" min="0" value="<?= $prod['altoProductoEnvio'] ?>">
                </div>

            </fieldset>
        </div>



        <!-- Calculadora de paquetes -->
        <div class="col-md-5">
            <fieldset class="border p-2 mb-3">
                <legend class="w-auto small text-secondary">Calculadora de paquetes</legend>
                <div class="mb-2">
                    <label class="form-label small">Cant. unidades</label>
                    <input type="number" id="cantidad" class="form-control form-control-sm"
                        value="1" min="1" step="1">
                </div>
                <div style="overflow-x:auto">
                    <table class="table table-sm table-bordered mb-0" id="packagesTable">
                        <thead>
                            <tr>
                                <th>No Caja</th>
                                <th>Unidades</th>
                                <th>Largo</th>
                                <th>Ancho</th>
                                <th>Alto</th>
                                <th>Volumen</th>
                                <th>Peso</th>
                                <th>Dibujo</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                            <tr>
                                <th colspan="6" class="text-end">Total Cajas:</th>
                                <th id="totalCajas"></th>
                                <th></th>
                            </tr>
                            <tr>
                                <th colspan="6" class="text-end">Volumen Total:</th>
                                <th id="totalVolumen"></th>
                                <th></th>
                            </tr>
                            <tr>
                                <th colspan="6" class="text-end">Peso Total:</th>
                                <th id="totalPeso"></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // — Datos iniciales desde PHP —
    const datos = <?= json_encode([
                        'largoCaja'               => (float)$prod['largoCmCaja'],
                        'anchoCaja'               => (float)$prod['anchoCmCaja'],
                        'altoCaja'                => (float)$prod['altoCmCaja'],
                        'unds'                    => (int)$prod['undsCaja'],
                        'pesoReal'                => (float)$prod['pesoKgProducto'],
                        'largo'                   => (float)$prod['largoProductoEnvioAjustado'],
                        'ancho'                   => (float)$prod['anchoProductoEnvioAjustado'],
                        'alto'                    => (float)$prod['altoProductoEnvioAjustado'],
                        'volumenUnidad'           => (float)$prod['volumenCm3ProductoAjustado'],
                        'pesoVolumetricoProducto' => (float)$prod['pesoVolumetricoProducto'],
                        'pesoEnvioUnidadKG'       => (float)$prod['pesoEnvioUnidadKG'],
                        'acomodacion'             => $prod['acomodacion']
                    ], JSON_NUMERIC_CHECK) ?>;

    // — Función AJAX genérica —
    /**
     * Función AJAX genérica.
     * @param {string} url      — URL de endpoint.
     * @param {object} data     — Objeto con los campos a enviar.
     * @param {function} onDone — Callback a ejecutar si todo OK.
     * @param {boolean} isProd  — true si es update_producto.php (inyecta idProducto), false si no.
     */
    function ajaxUpdate(url, data, onDone, isProd = true) {
        if (isProd) {
            // sólo inyectamos aquí el id del producto
            data.id = <?= $id ?>;
        }
        $.ajax({
                url: url,
                type: 'POST',
                data: data,
                dataType: 'json'
            })
            .done(function(res) {
                if (res.ok) {
                    if (typeof onDone === 'function') onDone();
                } else {
                    alert('Error al guardar: ' + (res.error || 'respuesta inválida'));
                }
            })
            .fail(function(xhr, status, err) {
                console.error('AJAX Error:', status, err, xhr.responseText);
                alert('Error de red al guardar');
            });
    }


    // — Dibuja la caja pequeña + interior 1 und —
    function drawBoxSmall() {
        const cv = document.getElementById('boxCanvasSmall'),
            ctx = cv.getContext('2d');
        ctx.clearRect(0, 0, cv.width, cv.height);

        // escala
        const iso = (x, y, z) => ({
                x: x - y,
                y: (x + y) / 2 - z
            }),
            maxD = Math.max(datos.largoCaja, datos.anchoCaja, datos.altoCaja),
            s = Math.min((cv.height * 0.5) / maxD, (cv.width * 0.5) / maxD),
            Lc = datos.largoCaja * s,
            Ac = datos.anchoCaja * s,
            Hc = datos.altoCaja * s;

        // vértices exterior
        let [A, B, C, D, E, F, G, H] = [
            iso(0, 0, 0), iso(Lc, 0, 0), iso(Lc, Ac, 0), iso(0, Ac, 0),
            iso(0, 0, Hc), iso(Lc, 0, Hc), iso(Lc, Ac, Hc), iso(0, Ac, Hc)
        ];
        const pts = [A, B, C, D, E, F, G, H],
            xs = pts.map(p => p.x),
            ys = pts.map(p => p.y),
            offX = (cv.width - (Math.max(...xs) - Math.min(...xs))) / 2 - Math.min(...xs),
            offY = (cv.height - (Math.max(...ys) - Math.min(...ys))) / 2 + Math.max(...ys),
            mv = p => [p.x + offX, offY - p.y];

        // dibujar exterior
        ctx.strokeStyle = '#444';
        ctx.fillStyle = 'rgba(173,216,230,0.15)';
        [
            [A, B, C, D],
            [E, F, G, H],
            [A, E, H, D],
            [B, F, G, C]
        ].forEach((face, i) => {
            ctx.beginPath();
            face.map(mv).forEach((pt, j) => j ? ctx.lineTo(...pt) : ctx.moveTo(...pt));
            ctx.closePath();
            ctx.stroke();
            if (i === 0) ctx.fill();
        });

        // dibujar 1 unidad interior
        drawPackage(cv, 1);
    }

    // — Dibuja un paquete dentro de cualquier canvas —
    function drawPackage(canvas, units) {
        const iso = (x, y, z) => ({
                x: x - y,
                y: (x + y) / 2 - z
            }),
            [n1, n2, n3] = datos.acomodacion.split('x').map(Number),
            ctx = canvas.getContext('2d'),
            maxD = Math.max(datos.largoCaja, datos.anchoCaja, datos.altoCaja),
            s = Math.min((canvas.height * 0.4) / maxD, (canvas.width * 0.4) / maxD),
            Lc = datos.largoCaja * s,
            Ac = datos.anchoCaja * s,
            Hc = datos.altoCaja * s;
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        let [A, B, C, D, E, F, G, H] = [
            iso(0, 0, 0), iso(Lc, 0, 0), iso(Lc, Ac, 0), iso(0, Ac, 0),
            iso(0, 0, Hc), iso(Lc, 0, Hc), iso(Lc, Ac, Hc), iso(0, Ac, Hc)
        ];
        const pts = [A, B, C, D, E, F, G, H],
            xs = pts.map(p => p.x),
            ys = pts.map(p => p.y),
            offX = (canvas.width - (Math.max(...xs) - Math.min(...xs))) / 2 - Math.min(...xs),
            offY = (canvas.height - (Math.max(...ys) - Math.min(...ys))) / 2 + Math.max(...ys),
            mv = p => [p.x + offX, offY - p.y];

        // exterior
        ctx.strokeStyle = '#444';
        ctx.fillStyle = 'rgba(173,216,230,0.1)';
        [
            [A, B, C, D],
            [E, F, G, H],
            [A, E, H, D],
            [B, F, G, C]
        ].forEach(face => {
            ctx.beginPath();
            face.map(mv).forEach((pt, i) => i ? ctx.lineTo(...pt) : ctx.moveTo(...pt));
            ctx.closePath();
            ctx.stroke();
        });

        // interior units
        const uL = datos.largo * s,
            uA = datos.ancho * s,
            uH = datos.alto * s,
            zSh = (datos.altoCaja - datos.alto) * s;
        let drawn = 0;
        for (let z = 0; z < n3 && drawn < units; z++) {
            for (let y = 0; y < n2 && drawn < units; y++) {
                for (let x = 0; x < n1 && drawn < units; x++) {
                    drawn++;
                    const P = iso(x * uL, y * uA, z * uH + zSh),
                        Q = iso((x + 1) * uL, y * uA, z * uH + zSh),
                        R = iso((x + 1) * uL, (y + 1) * uA, z * uH + zSh),
                        S = iso(x * uL, (y + 1) * uA, z * uH + zSh),
                        U = iso(x * uL, y * uA, z * uH + uH + zSh),
                        V = iso((x + 1) * uL, y * uA, z * uH + uH + zSh),
                        W = iso((x + 1) * uL, (y + 1) * uA, z * uH + uH + zSh),
                        X = iso(x * uL, (y + 1) * uA, z * uH + uH + zSh);
                    ctx.strokeStyle = '#c00';
                    ctx.fillStyle = 'rgba(232,62,140,0.6)';
                    [
                        [P, Q, R, S],
                        [U, V, W, X],
                        [P, U, X, S],
                        [Q, V, W, R]
                    ].forEach(face => {
                        ctx.beginPath();
                        face.map(mv).forEach((pt, i) => i ? ctx.lineTo(...pt) : ctx.moveTo(...pt));
                        ctx.closePath();
                        ctx.stroke();
                        ctx.fill();
                    });
                }
            }
        }
        if (units === datos.unds) {
            ctx.font = '12px sans-serif';
            ctx.fillStyle = 'rgba(0,0,0,0.5)';
            ctx.fillText('×1', 5, 12);
        }
    }

    // — Genera la tabla de paquetes —
    function recalcPackages() {
        const cnt = parseInt($('#cantidad').val(), 10) || 1,
            perBox = datos.unds,
            full = Math.floor(cnt / perBox),
            rem = cnt % perBox,
            $tb = $('#packagesTable tbody');
        let totalVol = 0,
            totalPeso = 0,
            cajaNo = 1;

        $tb.empty();

        function addRow(units) {
            // 1) Si está completa, usamos dimensiones de caja entera
            let boxL, boxA, boxH;
            if (units === perBox) {
                boxL = datos.largoCaja;
                boxA = datos.anchoCaja;
                boxH = datos.altoCaja;
            } else {
                // 2) paquete parcial: calculamos cuántas en X e Y
                const [n1, n2 /*, n3*/ ] = datos.acomodacion.split('x').map(Number);
                const xCount = Math.min(n1, units);
                const yCount = Math.ceil(units / xCount);
                const zCount = 1;
                boxL = xCount * datos.largo;
                boxA = yCount * datos.ancho;
                boxH = zCount * datos.alto;
            }

            const vol = +((boxL * boxA * boxH) / 5000).toFixed(4),
                peso = +(units * datos.pesoEnvioUnidadKG).toFixed(4);

            totalVol += vol;
            totalPeso += peso;

            const $tr = $(`
      <tr>
        <td>${cajaNo}</td>
        <td>${units}</td>
        <td>${boxL.toFixed(1)}</td>
        <td>${boxA.toFixed(1)}</td>
        <td>${boxH.toFixed(1)}</td>
        <td>${vol}</td>
        <td>${peso}</td>
        <td><canvas width="120" height="80"></canvas></td>
      </tr>
    `);
            $tb.append($tr);
            drawPackage($tr.find('canvas')[0], units);
            cajaNo++;
        }

        // filas completas
        for (let i = 0; i < full; i++) addRow(perBox);
        // fila parcial
        if (rem > 0) addRow(rem);

        $('#totalCajas').text(cajaNo - 1);
        $('#totalVolumen').text(totalVol.toFixed(1));
        $('#totalPeso').text(totalPeso.toFixed(1));
    }


    // — Redibuja todo —
    function recalcUI() {
        const volCaja = +(datos.largoCaja * datos.anchoCaja * datos.altoCaja).toFixed(4);
        $('#volumenCaja').text(volCaja);
        $('#revVolCaja').text(volCaja);

        const volUni = +(datos.largo * datos.ancho * datos.alto).toFixed(4);
        $('#revVolCal').text(volUni);

        const volTotal = +(volUni * datos.unds).toFixed(1);
        const diff = +(volTotal - volCaja).toFixed(4)
        $('#revDiferencia')
            .text(diff)
            .toggleClass('text-success', diff > 0)
            .toggleClass('text-danger', diff < 0);

        // 2) pesos
        // 2) pesos
        const pesoVol = +((volUni / 5000).toFixed(4));
        datos.pesoVolumetricoProducto = pesoVol;
        $('#pesoVolumetricoProducto').text(pesoVol.toFixed(4));

        const pesoEnv = +(Math.max(datos.pesoReal, pesoVol).toFixed(4));
        datos.pesoEnvioUnidadKG = pesoEnv;
        $('#pesoEnvioUnidadKG').text(pesoEnv.toFixed(4));

        // etiqueta condicional:
        const metodo = (pesoEnv === datos.pesoReal) ?
            ' (Envio por Peso)' :
            ' (Envio por Volumen)';
        $('#envioMetodo').text(metodo);


        drawBoxSmall();
        recalcPackages();
    }

    $(function() {
        // live-edit producto
        $('#largoCmCaja, #anchoCmCaja, #altoCmCaja, #undsCaja, #pesoKgCaja')
            .on('change', function() {
                datos.largoCaja = parseFloat($('#largoCmCaja').val()) || 0;
                datos.anchoCaja = parseFloat($('#anchoCmCaja').val()) || 0;
                datos.altoCaja = parseFloat($('#altoCmCaja').val()) || 0;
                datos.unds = parseInt($('#undsCaja').val(), 10) || 1;

                // recalcula peso real por unidad = pesoKgCaja / undsCaja
                let pCaja = parseFloat($('#pesoKgCaja').val()) || 0;
                datos.pesoReal = pCaja / datos.unds;
                $('#pesoReal').text(datos.pesoReal.toFixed(4));
                ajaxUpdate('update_producto.php', {
                    largoCmCaja: $('#largoCmCaja').val(),
                    anchoCmCaja: $('#anchoCmCaja').val(),
                    altoCmCaja: $('#altoCmCaja').val(),
                    undsCaja: $('#undsCaja').val(),
                    pesoKgCaja: $('#pesoKgCaja').val()
                }, recalcUI);
            });


        // live-edit: dimensiones ajustadas de la unidad
        $('#largoProductoEnvioAjustado, #anchoProductoEnvioAjustado, #altoProductoEnvioAjustado').on('change', function() {
            datos.largo = parseFloat($('#largoProductoEnvioAjustado').val()) || 0;
            datos.ancho = parseFloat($('#anchoProductoEnvioAjustado').val()) || 0;
            datos.alto = parseFloat($('#altoProductoEnvioAjustado').val()) || 0;

            // mandamos también unidades y peso de caja
            ajaxUpdate('update_producto.php', {
                largoProductoEnvioAjustado: $('#largoProductoEnvioAjustado').val(),
                anchoProductoEnvioAjustado: $('#anchoProductoEnvioAjustado').val(),
                altoProductoEnvioAjustado: $('#altoProductoEnvioAjustado').val(),
                undsCaja: $('#undsCaja').val(),
                pesoKgCaja: $('#pesoKgCaja').val()
            }, recalcUI);
        });

        // live-edit: envío original
        $('#largoProductoEnvio, #anchoProductoEnvio, #altoProductoEnvio').on('change', function() {
            ajaxUpdate('update_producto.php', {
                largoProductoEnvio: $('#largoProductoEnvio').val(),
                anchoProductoEnvio: $('#anchoProductoEnvio').val(),
                altoProductoEnvio: $('#altoProductoEnvio').val()
            }, function() {
                /* opcional: recalcUI(); */
            });
        });

        // botones de swap
        // swap valores, sin reordenar DOM
        // swap Largo↔Ancho
        $('#swapLA').on('click', function() {
            const l = $('#largoProductoEnvio').val();
            const a = $('#anchoProductoEnvio').val();

            // intercambia y dispara el change para que tu live-edit haga AJAX
            $('#largoProductoEnvio').val(a).trigger('change');
            $('#anchoProductoEnvio').val(l).trigger('change');

            // luego redimensiona y recarga
            $('#btnRedimensionar').click();
            setTimeout(() => location.reload(), 500);
        });

        // swap Ancho↔Alto
        $('#swapAH').on('click', function() {
            const a = $('#anchoProductoEnvio').val();
            const h = $('#altoProductoEnvio').val();

            $('#anchoProductoEnvio').val(h).trigger('change');
            $('#altoProductoEnvio').val(a).trigger('change');

            $('#btnRedimensionar').click();
            setTimeout(() => location.reload(), 500);
        });





        // txtMedidas / txtEmpaque
        $('#txtMedidas,#txtEmpaque').on('change', function() {
            ajaxUpdate('update_producto.php', {
                txtMedidas: $('#txtMedidas').val(),
                txtEmpaque: $('#txtEmpaque').val()
            }, () => {});
        });

        // Redimensionar button: AJAX then refresh
        $('#btnRedimensionar').on('click', function() {
            $.getJSON('/productos/dimensiones_envios.php', {
                id: <?= $id ?>
            }, () => {
                setTimeout(() => location.reload(), 500);
            });
        });

        // Características live-edit
        $('.selChar, .valChar').on('change', function() {
            const $tr = $(this).closest('tr'),
                cid = parseInt($tr.attr('data-char-id'), 10),
                newC = $tr.find('.selChar').val(),
                newV = $tr.find('.valChar').val();

            ajaxUpdate(
                'update_caracteristica.php', {
                    id: cid, // id de tb_caracteristicas_productos
                    idCaracteristica: newC,
                    valor: newV
                },
                () => {
                    console.log('Característica actualizada');
                },
                false // ¡IMPORTANTE! no inyectar aquí idProducto
            );
        });

        // paquetes
        $('#cantidad').on('input', recalcPackages);

        // inicial
        recalcUI();
    });
</script>

<?php include '../templates/footer.php'; ?>