<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

require_once 'db/config.php';

function getStatusStyle($status) {
    $style = 'color: white;'; // Default text color
    $bgColor = '#0dcaf0'; // Default info blue

    switch (strtoupper(trim($status))) {
        case 'ROTULADO':
            $bgColor = '#ffc107'; // yellow
            $style = 'color: black;';
            break;
        case 'EN TRANSITO':
            $bgColor = '#90EE90'; // light green
            $style = 'color: black;';
            break;
        case 'EN DESTINO':
            $bgColor = '#800080'; // purple
            break;
        case 'COMPLETADO':
        case 'COMPLETADO ✅':
            $bgColor = '#198754'; // dark green
            break;
        case 'GESTION':
            $bgColor = '#6c757d'; // secondary grey
            break;
        case 'RUTA_CONTRAENTREGA':
            $bgColor = '#007bff'; // primary blue
            break;
        case 'PENDIENTE':
            $bgColor = '#fff3cd'; // cream
            $style = 'color: #5f4700;';
            break;
        case 'ENTREGA EXITOSA':
            $bgColor = '#198754'; // dark green
            break;
        case 'RETORNADO':
            $bgColor = '#dc3545'; // red
            break;
        case 'NO CONTESTO, DEVOLVER LLAMADA':
        case 'NO CONTESTO, VOLVER A LLAMAR':
            $bgColor = '#fd7e14'; // orange
            break;
        case 'CANCELADO':
        case 'CANCELAR':
            $bgColor = '#8b1e2d'; // guinda/red for cancelled
            break;
        case 'REPROGRAMADO':
            $bgColor = '#6f42c1'; // indigo/purple
            break;
    }
    return "background-color: {$bgColor} !important; {$style}";
}

function getPaqueteStyle($paquete) {
    if ($paquete === 'RUTA') return 'background-color: #0dcaf0; color: black;'; // Info cyan
    if ($paquete === 'CONTRAENTREGA') return 'background-color: #ffc107; color: black;'; // Warning yellow
    if ($paquete === 'NO CONTESTA, VOLVER A LLAMAR') return 'background-color: #fd7e14; color: white;'; // Orange
    if ($paquete === 'PENDIENTE A RETORNO') return 'background-color: #dc3545; color: white;'; // Red
    if ($paquete === 'COMPLETADO') return 'background-color: #198754; color: white;'; // Success green
    if ($paquete === 'RETORNADO') return 'background-color: #dc3545; color: white;'; // Same red as PENDIENTE A RETORNO
    if ($paquete === 'ANULADO') return 'background-color: #212529; color: white;'; // Dark
    return 'background-color: #6c757d; color: white;'; // Secondary grey
}

function getFechaEntregaStyle($fecha) {
    if (empty($fecha) || $fecha === '0000-00-00') {
        return 'background-color: #f8f9fa; color: #6c757d;'; // Light grey for N/A
    }
    // Check if the date is in the past
    if (strtotime($fecha) < time()) {
        return 'background-color: #f8d7da; color: #721c24;'; // Light red for past dates
    }
    return 'background-color: #e0f7fa; color: black;'; // Light cyan background for upcoming dates
}

$pdo = db();

$user_id = $_SESSION['user_id'];
$user_role = $_SESSION['user_role'] ?? 'Asesor';

// Fetch years for the filter
$years_query = "SELECT DISTINCT YEAR(created_at) as year FROM pedidos";
if ($user_role === 'Asesor') {
    $years_query .= " WHERE asesor_id = ?";
    $years_stmt = $pdo->prepare($years_query);
    $years_stmt->execute([$user_id]);
} else {
    $years_stmt = $pdo->query($years_query);
}
$years = $years_stmt->fetchAll(PDO::FETCH_COLUMN);


// Filter logic
$selected_month = $_GET['mes'] ?? '';
$selected_year = $_GET['año'] ?? '';
$search_query = $_GET['q'] ?? '';

$sql = "SELECT p.*, u.nombre_asesor as asesor_nombre FROM pedidos p LEFT JOIN users u ON p.asesor_id = u.id WHERE p.estado IN ('RUTA_CONTRAENTREGA', 'PENDIENTE', 'NO CONTESTO, VOLVER A LLAMAR', 'NO CONTESTO, DEVOLVER LLAMADA', 'CANCELADO', 'REPROGRAMADO', 'ENTREGA EXITOSA', 'RETORNADO')";
$params = [];

if ($user_role === 'Asesor') {
    $sql .= " AND p.asesor_id = ?";
    $params[] = $user_id;
}

if (!empty($search_query)) {
    $sql .= " AND (p.nombre_completo LIKE ? OR p.dni_cliente LIKE ? OR p.celular LIKE ?)";
    $params[] = "%$search_query%";
    $params[] = "%$search_query%";
    $params[] = "%$search_query%";
}

if (!empty($selected_month)) {
    $sql .= " AND MONTH(p.created_at) = ?";
    $params[] = $selected_month;
}
if (!empty($selected_year)) {
    $sql .= " AND YEAR(p.created_at) = ?";
    $params[] = $selected_year;
}

$sql .= " ORDER BY p.created_at DESC";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$pedidos = $stmt->fetchAll();

// Obtener el template de WhatsApp para contraentrega
$stmt_template = db()->prepare('SELECT valor FROM configuracion WHERE clave = ?');
$stmt_template->execute(['whatsapp_template_contraentrega']);
$whatsapp_template = $stmt_template->fetchColumn();
if ($whatsapp_template === false) {
    // Fallback to a default message if not set in DB
    $whatsapp_template = 'Hola, te escribo para confirmar que tu pedido ya llegó a destino. El monto que debes es {monto} y la dirección de entrega será {direccion}.';
}

$months = [
    1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril', 5 => 'Mayo', 6 => 'Junio',
    7 => 'Julio', 8 => 'Agosto', 9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre', 12 => 'Diciembre'
];

function splitProvinciaDistrito($value) {
    $value = trim((string)($value ?? ''));
    if ($value === '') {
        return ['N/A', 'N/A'];
    }

    $parts = preg_split('/\s*(?:\/|\||,|-)\s*/', $value, 2);
    $provincia = trim($parts[0] ?? '');
    $distrito = trim($parts[1] ?? '');

    return [
        $provincia !== '' ? $provincia : 'N/A',
        $distrito !== '' ? $distrito : 'N/A',
    ];
}

?>
<?php 
$pageTitle = "Ruta Contraentrega";
include 'layout_header.php'; 
?>

<?php if (isset($_SESSION['flash_message'])):
    $flash = $_SESSION['flash_message'];
    unset($_SESSION['flash_message']);
?>
<div class="alert alert-<?php echo htmlspecialchars($flash['type']); ?> alert-dismissible fade show" role="alert">
    <?php echo htmlspecialchars($flash['message']); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?>

<style>
    /* Ajustes puntuales para Ruta Contraentrega: opciones largas sin invadir columnas vecinas */
    #pedidos-table {
        min-width: 1850px;
    }
    #pedidos-table th:nth-child(3),
    #pedidos-table td:nth-child(3) {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
    #pedidos-table th:nth-child(4),
    #pedidos-table td:nth-child(4) {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
    #pedidos-table .editable-paquete .badge,
    #pedidos-table .editable-estado .badge {
        display: inline-block;
        width: 100%;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
        padding: 0.45rem 0.55rem;
    }
    #pedidos-table .editable-paquete select,
    #pedidos-table .editable-estado select {
        width: 100%;
        min-width: 100%;
        white-space: normal;
        font-size: 0.82rem;
    }
</style>

            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="ruta_contraentrega.php" class="row g-3 align-items-center">
                        <div class="col-auto">
                            <label for="q" class="form-label">Buscar</label>
                            <input type="text" name="q" id="q" class="form-control" value="<?php echo htmlspecialchars($search_query); ?>" placeholder="Nombre, DNI o Celular">
                        </div>
                        <div class="col-auto">
                            <label for="mes" class="form-label">Mes</label>
                            <select name="mes" id="mes" class="form-select">
                                <option value="">Todos</option>
                                <?php foreach ($months as $num => $name): ?>
                                    <option value="<?php echo $num; ?>" <?php echo $selected_month == $num ? 'selected' : ''; ?>><?php echo $name; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-auto">
                            <label for="año" class="form-label">Año</label>
                            <select name="año" id="año" class="form-select">
                                <option value="">Todos</option>
                                <?php foreach ($years as $year): ?>
                                    <option value="<?php echo $year; ?>" <?php echo $selected_year == $year ? 'selected' : ''; ?>><?php echo $year; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-auto mt-4">
                            <button type="submit" class="btn btn-info">Filtrar</button>
                            <a href="ruta_contraentrega.php" class="btn btn-secondary">Limpiar</a>
                            <?php
                            $excelParams = array_filter([
                                'q' => $search_query,
                                'mes' => $selected_month,
                                'año' => $selected_year,
                            ], static function ($value) {
                                return $value !== '' && $value !== null;
                            });
                            $excelUrl = 'download_ruta_contraentrega.php' . (!empty($excelParams) ? '?' . http_build_query($excelParams) : '');
                            ?>
                            <a href="<?php echo htmlspecialchars($excelUrl); ?>" class="btn btn-success">
                                <i class="fas fa-file-excel me-1"></i> Descargar Excel
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-body p-0">
                    <div class="excel-container">
                        <table id="pedidos-table" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 35px;">ID</th>
                                    <th style="width: 120px;">Seguimiento</th>
                                    <th style="width: 130px;">Paquete</th>
                                    <th style="width: 180px;">Estado</th>
                                    <th style="width: 180px;">Cliente</th>
                                    
                                    <th style="width: 120px;">Celular</th>
                                    <th style="width: 250px;">Dirección</th>
                                    <th style="width: 200px;">Referencia</th>
                                    <th style="width: 140px;">Departamento</th>
                                    <th style="width: 140px;">Provincia</th>
                                    <th style="width: 140px;">Distrito</th>
                                    <th style="width: 150px;">Coordenadas</th>
                                    <th style="width: 200px;">Producto</th>
                                    <th style="width: 80px;">Cant.</th>
                                    <?php if ($user_role !== 'Logistica'): ?>
                                        <th style="width: 100px;">Total</th>
                                        <th style="width: 100px;">Debe</th>
                                    <?php endif; ?>
                                    <th style="width: 120px;">F. Entrega</th>
                                    <?php if ($user_role !== 'Asesor'): ?><th style="width: 120px;">Asesor</th><?php endif; ?>
                                    <th style="width: 150px;">F. Creación</th>
                                    <th style="width: 120px;">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($pedidos as $pedido): ?>
                                    <tr>
                                        <td><?php echo htmlspecialchars($pedido['id']); ?></td>
                                        <td class="editable" data-id="<?php echo $pedido['id']; ?>" data-field="seguimiento"><?php echo htmlspecialchars($pedido['seguimiento'] ?? ''); ?></td>
                                        <td class="editable-paquete" data-id="<?php echo $pedido['id']; ?>" data-value="<?php echo htmlspecialchars($pedido['tipo_paquete'] ?? ''); ?>" style="cursor: pointer;">
                                            <span class="badge" style="<?php echo getPaqueteStyle($pedido['tipo_paquete'] ?? ''); ?>">
                                                <?php echo htmlspecialchars(!empty($pedido['tipo_paquete']) ? $pedido['tipo_paquete'] : 'Seleccionar'); ?>
                                            </span>
                                        </td>
                                        <td class="editable-estado" data-id="<?php echo $pedido['id']; ?>" data-value="<?php echo htmlspecialchars($pedido['estado'] ?? ''); ?>" style="cursor: pointer;">
                                            <span class="badge" style="<?php echo getStatusStyle($pedido['estado'] ?? ''); ?>">
                                                <?php echo htmlspecialchars(!empty($pedido['estado']) ? $pedido['estado'] : 'Seleccionar'); ?>
                                            </span>
                                        </td>
                                        <td><?php echo htmlspecialchars($pedido['nombre_completo']); ?></td>
                                        
                                        <td>
                                            <?php 
                                            $celular = htmlspecialchars($pedido['celular']);
                                            // Basic validation to ensure it's a potential number
                                            if (!empty($celular)) {
                                                // Prepend country code if missing (assuming Peru's country code '51')
                                                $whatsapp_number = $celular;
                                                if (strlen($celular) == 9 && substr($celular, 0, 1) == '9') {
                                                    $whatsapp_number = '51' . $celular;
                                                }

                                                $monto_debe = htmlspecialchars($pedido['monto_debe']);
                                                $monto_formateado = 'S/' . $monto_debe;
                                                $direccion = htmlspecialchars($pedido['direccion_exacta'] ?? 'N/A');
                                                $cliente = htmlspecialchars($pedido['nombre_completo']);

                                                // Reemplazar placeholders en la plantilla
                                                $mensaje = str_replace(
                                                    ['{cliente}', '{monto}', '{direccion}'],
                                                    [$cliente, $monto_formateado, $direccion],
                                                    $whatsapp_template
                                                );
                                                $mensaje_encoded = urlencode($mensaje);
                                                
                                                $whatsapp_url = 'https://wa.me/' . $whatsapp_number . '?text=' . $mensaje_encoded;

                                                echo $celular;
                                                echo ' <a href="' . $whatsapp_url . '" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">';
                                                echo '<i class="fab fa-whatsapp" style="color: green; font-size: 1.5em; vertical-align: middle;"></i>';
                                                echo '</a>';
                                            } else {
                                                echo 'N/A';
                                            }
                                            ?>
                                        </td>
                                        <td><?php echo htmlspecialchars($pedido['direccion_exacta'] ?? 'N/A'); ?></td>
                                        <td><?php echo htmlspecialchars($pedido['referencia_domicilio'] ?? 'N/A'); ?></td>
                                        <?php [$provinciaPedido, $distritoPedido] = splitProvinciaDistrito($pedido['codigo_rastreo'] ?? ''); ?>
                                        <td><?php echo htmlspecialchars($pedido['sede_envio'] ?? 'N/A'); ?></td>
                                        <td><?php echo htmlspecialchars($provinciaPedido); ?></td>
                                        <td><?php echo htmlspecialchars($distritoPedido); ?></td>
                                        <td><?php echo htmlspecialchars($pedido['coordenadas'] ?? 'N/A'); ?></td>
                                        <td><?php echo htmlspecialchars($pedido['producto']); ?></td>
                                        <td><?php echo htmlspecialchars($pedido['cantidad']); ?></td>
                                        <?php if ($user_role !== 'Logistica'): ?>
                                            <td><?php echo htmlspecialchars($pedido['monto_total']); ?></td>
                                            <td><?php echo htmlspecialchars($pedido['monto_debe']); ?></td>
                                        <?php endif; ?>
                                        <td><span class="badge" style="<?php echo getFechaEntregaStyle($pedido['fecha_entrega']); ?>"><?php echo htmlspecialchars(!empty($pedido['fecha_entrega']) && $pedido['fecha_entrega'] != '0000-00-00' ? date('d/m/Y', strtotime($pedido['fecha_entrega'])) : 'N/A'); ?></span></td>
                                        <?php if ($user_role !== 'Asesor'): ?><td><?php echo htmlspecialchars($pedido['asesor_nombre'] ?? 'N/A'); ?></td><?php endif; ?>
                                        <td><?php echo htmlspecialchars($pedido['created_at']); ?></td>
                                        <td>
                                            <a href="pedidos_contraentrega.php?id=<?php echo $pedido['id']; ?>" class="btn btn-sm btn-warning">Editar</a>
                                            <?php if ($user_role === 'Administrador'): ?>
                                                <a href="delete_pedido.php?id=<?php echo $pedido['id']; ?>" class="btn btn-sm btn-danger" onclick="return confirm('¿Estás seguro de que quieres eliminar este pedido?');">Eliminar</a>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        <?php if (empty($pedidos)): ?>
                            <p class="text-center">No hay pedidos que coincidan con el filtro.</p>
                        <?php endif; ?>
                        </table>
                    </div>
                </div>
            </div>


<script>
function getPaqueteStyleJS(paquete) {
    if (paquete === 'RUTA') return 'background-color: #0dcaf0; color: black;';
    if (paquete === 'ANULADO') return 'background-color: #212529; color: white;';
    if (paquete === 'PENDIENTE A RETORNO') return 'background-color: #dc3545; color: white;';
    if (paquete === 'RETORNADO') return 'background-color: #dc3545; color: white;';
    if (paquete === 'COMPLETADO') return 'background-color: #198754; color: white;';
    return 'background-color: #6c757d; color: white;';
}

function getStatusStyleJS(status) {
    let bgColor = '#0dcaf0';
    let style = 'color: white;';
    
    switch (status.toUpperCase().trim()) {
        case 'RUTA_CONTRAENTREGA':
            bgColor = '#007bff';
            break;
        case 'PENDIENTE':
            bgColor = '#fff3cd';
            style = 'color: #5f4700;';
            break;
        case 'NO CONTESTO, VOLVER A LLAMAR':
            bgColor = '#fd7e14';
            break;
        case 'CANCELADO':
        case 'CANCELAR':
            bgColor = '#8b1e2d';
            break;
        case 'REPROGRAMADO':
            bgColor = '#6f42c1';
            break;
        case 'ENTREGA EXITOSA':
            bgColor = '#198754';
            break;
        case 'RETORNADO':
            bgColor = '#dc3545';
            break;
        case 'NO CONTESTO, DEVOLVER LLAMADA':
            bgColor = '#fd7e14';
            break;
        default:
            bgColor = '#6c757d';
    }
    return `background-color: ${bgColor} !important; ${style}`;
}

$(document).ready(function() {
    $('#pedidos-table').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
        },
        "order": [[ 0, "desc" ]],
        "paging": false,
        "lengthChange": false,
        "info": false,
        "scrollX": false // Desactivamos scrollX de DataTables para usar nuestro excel-container
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const table = document.querySelector('.table');

    table.addEventListener('click', function(e) {
        // Handle Paquete editing
        if (e.target && (e.target.classList.contains('editable-paquete') || e.target.closest('.editable-paquete'))) {
            const cell = e.target.classList.contains('editable-paquete') ? e.target : e.target.closest('.editable-paquete');
            
            if (cell.querySelector('select')) return; // Already editing

            const currentVal = cell.dataset.value;
            const pedidoId = cell.dataset.id;

            const select = document.createElement('select');
            select.className = 'form-select form-select-sm';
            
            const options = [
                {val: '', text: 'Seleccionar'},
                {val: 'RUTA', text: 'RUTA'},
                {val: 'ANULADO', text: 'ANULADO'},
                {val: 'PENDIENTE A RETORNO', text: 'PENDIENTE A RETORNO'},
                {val: 'RETORNADO', text: 'RETORNADO'},
                {val: 'COMPLETADO', text: 'COMPLETADO'}
            ];

            options.forEach(opt => {
                const option = document.createElement('option');
                option.value = opt.val;
                option.text = opt.text;
                if (opt.val === currentVal) option.selected = true;
                select.appendChild(option);
            });

            // Save original content to restore if needed
            const originalContent = cell.innerHTML;
            
            cell.innerHTML = '';
            cell.appendChild(select);
            select.focus();

            const save = () => {
                const newVal = select.value;
                
                // Optimistic update
                cell.dataset.value = newVal;
                cell.innerHTML = `<span class="badge" style="${getPaqueteStyleJS(newVal)}">${newVal || 'Seleccionar'}</span>`;

                if (newVal === currentVal) return; // No change

                const formData = new URLSearchParams();
                formData.append('pedido_id', pedidoId);
                formData.append('tipo_paquete', newVal);

                fetch('update_paquete.php', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    body: formData
                })
                .then(r => r.json())
                .then(data => {
                    if (!data.success) {
                        alert('Error: ' + (data.message || 'No se pudo actualizar.'));
                        cell.innerHTML = originalContent; // Revert
                        cell.dataset.value = currentVal;
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Error de conexión.');
                    cell.innerHTML = originalContent; // Revert
                    cell.dataset.value = currentVal;
                });
            };

            select.addEventListener('change', save);
            select.addEventListener('blur', save);
        }

        // Handle Estado editing
        if (e.target && (e.target.classList.contains('editable-estado') || e.target.closest('.editable-estado'))) {
            const cell = e.target.classList.contains('editable-estado') ? e.target : e.target.closest('.editable-estado');
            
            if (cell.querySelector('select')) return; // Already editing

            const currentVal = cell.dataset.value;
            const pedidoId = cell.dataset.id;

            const select = document.createElement('select');
            select.className = 'form-select form-select-sm';
            
            const options = [
                {val: 'RUTA_CONTRAENTREGA', text: 'RUTA_CONTRAENTREGA'},
                {val: 'PENDIENTE', text: 'PENDIENTE'},
                {val: 'NO CONTESTO, DEVOLVER LLAMADA', text: 'NO CONTESTO, DEVOLVER LLAMADA'},
                {val: 'CANCELADO', text: 'CANCELADO'},
                {val: 'REPROGRAMADO', text: 'REPROGRAMADO'},
                {val: 'ENTREGA EXITOSA', text: 'ENTREGA EXITOSA'}
            ];

            options.forEach(opt => {
                const option = document.createElement('option');
                option.value = opt.val;
                option.text = opt.text;
                if (opt.val === 'CANCELADO') {
                    option.style.backgroundColor = '#8b1e2d';
                    option.style.color = '#ffffff';
                }
                if (opt.val === 'PENDIENTE') {
                    option.style.backgroundColor = '#fff3cd';
                    option.style.color = '#5f4700';
                }
                if (opt.val === currentVal) option.selected = true;
                select.appendChild(option);
            });

            const originalContent = cell.innerHTML;
            
            cell.innerHTML = '';
            cell.appendChild(select);
            select.focus();

            const save = () => {
                const newVal = select.value;
                
                if (newVal === currentVal) {
                    cell.innerHTML = originalContent;
                    return;
                }

                // Optimistic update
                cell.dataset.value = newVal;
                cell.innerHTML = `<span class="badge" style="${getStatusStyleJS(newVal)}">${newVal}</span>`;

                const formData = new URLSearchParams();
                formData.append('pedido_id', pedidoId);
                formData.append('estado', newVal);

                fetch('update_estado.php', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    body: formData
                })
                .then(r => r.json())
                .then(data => {
                    if (!data.success) {
                        alert('Error: ' + (data.message || 'No se pudo actualizar.'));
                        cell.innerHTML = originalContent; // Revert
                        cell.dataset.value = currentVal;
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Error de conexión.');
                    cell.innerHTML = originalContent; // Revert
                    cell.dataset.value = currentVal;
                });
            };

            select.addEventListener('change', save);
            select.addEventListener('blur', save);
        }

        if (e.target && e.target.classList.contains('editable')) {
            const cell = e.target;
            if (cell.querySelector('input')) {
                return; // Already in edit mode
            }

            const originalContent = cell.textContent.trim();
            const input = document.createElement('input');
            input.type = 'text';
            input.className = 'form-control form-control-sm';
            input.value = originalContent === 'N/A' ? '' : originalContent;
            
            cell.innerHTML = '';
            cell.appendChild(input);
            input.focus();

            const saveChanges = function() {
                const newValue = input.value.trim();
                const pedidoId = cell.dataset.id;
                const field = cell.dataset.field;

                let endpoint = 'update_tracking.php'; // Default endpoint
                if (field === 'clave') {
                    endpoint = 'update_clave.php';
                }

                // Restore original content visually
                cell.textContent = newValue === '' ? 'N/A' : newValue;

                // Send data to server
                fetch(endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ id: pedidoId, field: field, value: newValue })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        console.error('Error:', data.error);
                        // Optionally revert the change and show an error message
                        cell.textContent = originalContent; 
                    }
                })
                .catch(error => {
                    console.error('Fetch Error:', error);
                    cell.textContent = originalContent;
                });
            };

            input.addEventListener('blur', saveChanges);
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    input.blur();
                }
            });
        }
    });
});
</script>

<?php include 'layout_footer.php'; ?>