<?php
session_start();
require_once 'db/config.php';
require_once 'includes/callcenter_test_helpers.php';
require_once 'includes/drive_test_orders.php';
require_once 'includes/contraentrega_cobertura.php';

$provinciasPorDepartamentoContraentrega = contraentregaProvinciasPorDepartamento();
$distritosPorProvinciaContraentrega = contraentregaDistritosPorProvincia();
$departamentosContraentrega = array_keys($provinciasPorDepartamentoContraentrega);

$pageTitle = 'Call Center de Prueba | Bandejas de gestión';
$pageDescription = 'Bandejas diarias de Call Center con estados reales, próxima llamada, fecha de entrega, historial y edición de datos del pedido importado desde Drive.';

function cc_test_parse_datetime(?string $value): ?DateTimeImmutable
{
    $value = trim((string) $value);
    if ($value === '') {
        return null;
    }

    try {
        return new DateTimeImmutable($value);
    } catch (Throwable $exception) {
        return null;
    }
}

function cc_test_format_datetime(?string $value, string $fallback = 'Sin programar'): string
{
    $date = cc_test_parse_datetime($value);
    return $date ? $date->format('d/m/Y h:i A') : $fallback;
}

function cc_test_format_datetime_input(?string $value): string
{
    $date = cc_test_parse_datetime($value);
    return $date ? $date->format('Y-m-d\TH:i') : '';
}

function cc_test_format_date(?string $value, string $fallback = 'Sin fecha'): string
{
    $date = cc_test_parse_datetime($value);
    return $date ? $date->format('d/m/Y') : $fallback;
}

function cc_test_format_date_input(?string $value): string
{
    $date = cc_test_parse_datetime($value);
    return $date ? $date->format('Y-m-d') : '';
}

function cc_test_format_price(?string $value): string
{
    $value = trim((string) $value);
    return $value !== '' ? 'S/ ' . $value : 'No registrado';
}

function cc_test_display_value(?string $value, string $fallback = 'No registrado'): string
{
    $value = trim((string) $value);
    return $value !== '' ? $value : $fallback;
}

function cc_test_order_label(array $order): string
{
    $codigo = trim((string) ($order['codigo'] ?? ''));
    if ($codigo !== '') {
        return '#' . ltrim($codigo, '#');
    }

    return 'Sin número';
}

function cc_test_badge_class(string $estado): string
{
    return match (cc_test_normalize_state($estado)) {
        'CONFIRMADO CONTRAENTREGA', 'CONFIRMADO ENVIO' => 'bg-success-subtle text-success-emphasis',
        'DEVOLVER LLAMADA' => 'bg-info-subtle text-info-emphasis',
        'OBSERVADO' => 'bg-warning-subtle text-warning-emphasis',
        'CANCELADO' => 'bg-danger-subtle text-danger-emphasis',
        'REPETIDO' => 'bg-secondary-subtle text-secondary-emphasis',
        'SE ENVIO NUMERO DE CUENTA' => 'bg-primary-subtle text-primary-emphasis',
        default => 'bg-dark-subtle text-dark-emphasis',
    };
}

function cc_test_order_time(array $order): int
{
    foreach (['proxima_llamada_at', 'numero_cuenta_enviado_at', 'ultima_gestion_at', 'seguimiento_actualizado', 'import_id'] as $field) {
        $date = cc_test_parse_datetime($order[$field] ?? null);
        if ($date) {
            return $date->getTimestamp();
        }
    }

    return 0;
}

function cc_test_followup_semaforo(array $order): ?array
{
    if (cc_test_normalize_state((string) ($order['estado'] ?? '')) !== 'SE ENVIO NUMERO DE CUENTA') {
        return null;
    }

    return cc_test_account_followup_semaforo($order['numero_cuenta_enviado_at'] ?? null);
}

$view = $_GET['view'] ?? 'pendientes_hoy';
$allowedViews = [
    'pendientes_hoy' => 'Pendientes de hoy',
    'nuevos_hoy' => 'Nuevos de hoy',
    'confirmados' => 'Confirmados',
    'seguimiento' => 'Seguimiento',
    'observados' => 'Observados',
    'cerrados' => 'Cerrados / descartados',
    'todos' => 'Todos los pedidos cargados',
];
if (!isset($allowedViews[$view])) {
    $view = 'pendientes_hoy';
}

$errorMessage = null;
$orders = [];
$visibleOrders = [];
$modalsHtml = [];
$totalRows = 0;
$loadLimit = 10;
$catalogoProductos = [];
$stats = [
    'total' => 0,
    'pendientes_hoy' => 0,
    'nuevos_hoy' => 0,
    'confirmados' => 0,
    'seguimiento' => 0,
    'observados' => 0,
    'cerrados' => 0,
];

try {
    $pdo = db();
    cc_test_ensure_tracking_table($pdo);
    cc_test_ensure_historial_llamadas_table($pdo);

    try {
        $stmtProductos = $pdo->query("SELECT id, nombre FROM products ORDER BY nombre ASC");
        $catalogoProductos = $stmtProductos->fetchAll(PDO::FETCH_ASSOC);
    } catch (Throwable $exception) {
        $catalogoProductos = [];
    }

    $preview = drive_test_fetch_orders($loadLimit);
    $totalRows = (int) ($preview['total_rows'] ?? 0);
    $orders = $preview['orders'] ?? [];

    $tracking = drive_test_fetch_tracking($pdo, array_column($orders, 'source_key'));
    $orders = drive_test_merge_tracking($orders, $tracking);

    $sourceKeys = array_column($orders, 'source_key');
    $callCounts = [];
    if (!empty($sourceKeys)) {
        $placeholders = implode(',', array_fill(0, count($sourceKeys), '?'));
        $stmtCalls = $pdo->prepare("SELECT pedido_id, COUNT(*) as total FROM historial_llamadas WHERE pedido_id IN ($placeholders) GROUP BY pedido_id");
        $stmtCalls->execute($sourceKeys);
        $callCounts = $stmtCalls->fetchAll(PDO::FETCH_KEY_PAIR);
    }

    $todayStart = new DateTimeImmutable('today');
    $todayEnd = $todayStart->setTime(23, 59, 59);
    $openStates = cc_test_open_states();
    $closedStates = cc_test_closed_states();

    foreach ($orders as &$order) {
        $order['estado'] = cc_test_normalize_state((string) ($order['estado'] ?? ''));
        $order['total_llamadas'] = (int) ($callCounts[$order['source_key']] ?? 0);
        $importDate = cc_test_parse_datetime($order['import_id'] ?? null);
        $proximaDate = cc_test_parse_datetime($order['proxima_llamada_at'] ?? null);

        $order['es_nuevo_hoy'] = $importDate ? $importDate->format('Y-m-d') === $todayStart->format('Y-m-d') : false;
        $order['es_pendiente_hoy'] = in_array($order['estado'], $openStates, true)
            && ($proximaDate === null || $proximaDate <= $todayEnd);
        $order['es_cerrado'] = in_array($order['estado'], $closedStates, true);

        $stats['total']++;
        if ($order['es_nuevo_hoy']) {
            $stats['nuevos_hoy']++;
        }
        if ($order['es_pendiente_hoy']) {
            $stats['pendientes_hoy']++;
        }
        if (in_array($order['estado'], cc_test_confirmed_states(), true)) {
            $stats['confirmados']++;
        }
        if ($order['estado'] === 'SE ENVIO NUMERO DE CUENTA') {
            $stats['seguimiento']++;
        }
        if ($order['estado'] === 'OBSERVADO') {
            $stats['observados']++;
        }
        if ($order['es_cerrado']) {
            $stats['cerrados']++;
        }
    }
    unset($order);

    $visibleOrders = array_values(array_filter($orders, static function (array $order) use ($view): bool {
        return match ($view) {
            'pendientes_hoy' => (bool) ($order['es_pendiente_hoy'] ?? false),
            'nuevos_hoy' => (bool) ($order['es_nuevo_hoy'] ?? false),
            'confirmados' => in_array(($order['estado'] ?? ''), cc_test_confirmed_states(), true),
            'seguimiento' => ($order['estado'] ?? '') === 'SE ENVIO NUMERO DE CUENTA',
            'observados' => ($order['estado'] ?? '') === 'OBSERVADO',
            'cerrados' => (bool) ($order['es_cerrado'] ?? false),
            default => true,
        };
    }));

    usort($visibleOrders, static function (array $a, array $b) use ($view): int {
        if ($view === 'pendientes_hoy') {
            $aDue = cc_test_parse_datetime($a['proxima_llamada_at'] ?? null);
            $bDue = cc_test_parse_datetime($b['proxima_llamada_at'] ?? null);
            if ($aDue && $bDue && $aDue != $bDue) {
                return $aDue <=> $bDue;
            }
            if ($aDue && !$bDue) {
                return 1;
            }
            if (!$aDue && $bDue) {
                return -1;
            }
        }

        return cc_test_order_time($b) <=> cc_test_order_time($a);
    });
} catch (Throwable $exception) {
    $errorMessage = $exception->getMessage();
}

require_once 'layout_header.php';
?>

<main class="container-fluid py-4">
    <section class="mb-4">
        <div class="d-flex flex-column flex-xl-row justify-content-between align-items-xl-center gap-3">
            <div>
                <h1 class="h2 fw-bold mb-1"><i class="bi bi-headset text-primary"></i> Call Center de prueba</h1>
                <p class="text-muted mb-0">Ahora el panel trabaja por <strong>bandejas</strong>: <strong>Nuevos de hoy</strong>, <strong>Pendientes de hoy</strong>, <strong>Seguimiento</strong>, <strong>Confirmados</strong>, <strong>Observados</strong> y <strong>Cerrados</strong>. Así no se mezcla todo cuando entran pedidos diarios.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <span class="badge rounded-pill text-bg-light border px-3 py-2">Drive detectado: <?php echo (int) $totalRows; ?> filas</span>
                <span class="badge rounded-pill text-bg-light border px-3 py-2">Carga operativa: últimos <?php echo (int) $loadLimit; ?> registros</span>
                <a href="test_importar_drive.php" class="btn btn-outline-primary btn-sm">Ver vista previa Drive</a>
            </div>
        </div>
    </section>

    <?php if ($errorMessage !== null): ?>
        <section class="alert alert-danger" role="alert">
            <strong>No se pudo cargar el panel.</strong><br>
            <?php echo htmlspecialchars($errorMessage); ?>
        </section>
    <?php else: ?>
        <section class="alert alert-primary border-0 shadow-sm mb-4">
            <div class="row g-3 align-items-center">
                <div class="col-lg-8">
                    <h2 class="h5 fw-bold mb-2">Flujo recomendado ya listo para prueba</h2>
                    <p class="mb-0">Los pedidos nuevos entran desde Drive. Luego tú gestionas cada cliente con estado, próxima llamada y observaciones internas. Los casos abiertos siguen apareciendo en <strong>Pendientes de hoy</strong>, <strong>Seguimiento</strong> o <strong>Observados</strong> hasta que los cierres o confirmes.</p>
                </div>
                <div class="col-lg-4">
                    <div class="small text-muted">Campos editables del módulo</div>
                    <div class="fw-semibold">Dirección, referencia, departamento, provincia, distrito, DNI y observaciones</div>
                </div>
            </div>
        </section>

        <section class="row g-3 mb-4">
            <div class="col-md-6 col-xl-2">
                <a href="?view=pendientes_hoy" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'pendientes_hoy' ? 'bg-dark text-white' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase opacity-75 mb-2">Pendientes de hoy</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['pendientes_hoy']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
            <div class="col-md-6 col-xl-2">
                <a href="?view=nuevos_hoy" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'nuevos_hoy' ? 'bg-primary-subtle border border-primary' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase text-muted mb-2">Nuevos de hoy</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['nuevos_hoy']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
            <div class="col-md-6 col-xl-2">
                <a href="?view=confirmados" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'confirmados' ? 'bg-success-subtle border border-success' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase text-muted mb-2">Confirmados</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['confirmados']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
            <div class="col-md-6 col-xl-2">
                <a href="?view=seguimiento" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'seguimiento' ? 'bg-primary-subtle border border-primary' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase text-muted mb-2">Seguimiento</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['seguimiento']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
            <div class="col-md-6 col-xl-2">
                <a href="?view=observados" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'observados' ? 'bg-warning-subtle border border-warning' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase text-muted mb-2">Observados</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['observados']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
            <div class="col-md-6 col-xl-2">
                <a href="?view=cerrados" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'cerrados' ? 'bg-secondary-subtle border border-secondary' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase text-muted mb-2">Cerrados</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['cerrados']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
            <div class="col-md-6 col-xl-2">
                <a href="?view=todos" class="text-decoration-none">
                    <article class="card border-0 shadow-sm h-100 <?php echo $view === 'todos' ? 'bg-light border' : 'bg-white'; ?>">
                        <div class="card-body">
                            <div class="small text-uppercase text-muted mb-2">Todos</div>
                            <div class="display-6 fw-bold mb-0"><?php echo (int) $stats['total']; ?></div>
                        </div>
                    </article>
                </a>
            </div>
        </section>

        <section class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2">
                <div>
                    <h2 class="h5 fw-bold mb-1"><?php echo htmlspecialchars($allowedViews[$view]); ?></h2>
                    <p class="text-muted small mb-1">Estados disponibles: Por llamar, Devolver llamada, Observado, Se envió número de cuenta, Confirmado contraentrega, Confirmado envío, Cancelado y Repetido.</p>
                    <p class="small text-primary mb-0"><i class="bi bi-phone"></i> El botón <strong>Llamar / AirDroid</strong> registra el intento, copia el número y muestra la ayuda visual para pegar en tu app de AirDroid.</p>
                </div>
                <span class="badge bg-light text-dark border"><?php echo count($visibleOrders); ?> pedidos en esta bandeja</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>N° Pedido</th>
                                <th>Cliente</th>
                                <th>Ubicación editable</th>
                                <th>Pedido</th>
                                <th>Gestión</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($visibleOrders)): ?>
                                <tr>
                                    <td colspan="6" class="text-center py-5 text-muted">
                                        <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                        No hay pedidos en esta bandeja por ahora.
                                    </td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($visibleOrders as $order): ?>
                                    <?php
                                        $departamentoSeleccionado = trim((string) ($order['sede'] ?? ''));
                                        $provinciaSeleccionada = trim((string) ($order['ciudad'] ?? ''));
                                        $distritoSeleccionado = trim((string) ($order['distrito'] ?? ''));
                                        $provinciasSeleccionadas = $provinciasPorDepartamentoContraentrega[$departamentoSeleccionado] ?? [];
                                        $distritosSeleccionados = $distritosPorProvinciaContraentrega[$provinciaSeleccionada] ?? [];
                                        $modalId = 'modalDriveTest' . $order['source_key'];
                                        $badgeClass = cc_test_badge_class($order['estado']);
                                        $semaforoCuenta = cc_test_followup_semaforo($order);
                                        $historial = cc_test_fetch_historial(db(), $order['source_key']);
                                        ob_start();
                                    ?>
                                    <tr data-source-key="<?php echo htmlspecialchars($order['source_key']); ?>">
                                        <td>
                                            <div class="fw-bold fs-6"><?php echo htmlspecialchars(cc_test_order_label($order)); ?></div>
                                            <div class="small text-muted">ID Drive: <?php echo htmlspecialchars(cc_test_display_value($order['import_id'] ?? null, 'Sin ID')); ?></div>
                                        </td>
                                        <td>
                                            <div class="fw-semibold"><?php echo htmlspecialchars(cc_test_display_value($order['nombre'], 'Sin nombre')); ?></div>
                                            <div class="small text-muted mb-1">Celular: <?php echo htmlspecialchars(cc_test_display_value($order['celular'], 'Sin número')); ?></div>
                                            <div class="small text-muted">DNI: <?php echo htmlspecialchars(cc_test_display_value($order['dni'], 'Sin DNI')); ?></div>
                                        </td>
                                        <td>
                                            <div class="small"><strong>Dirección:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['direccion'])); ?></div>
                                            <div class="small"><strong>Referencia:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['referencia'])); ?></div>
                                            <div class="small"><strong>Departamento:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['sede'])); ?></div>
                                            <div class="small"><strong>Provincia:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['ciudad'])); ?></div>
                                            <div class="small"><strong>Distrito:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['distrito'])); ?></div>
                                            <?php if (!empty(trim((string) ($order['distrito_drive'] ?? '')))): ?>
                                                <div class="small"><strong>DISTRITO 1:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['distrito_drive'])); ?></div>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <div class="fw-semibold"><?php echo htmlspecialchars(cc_test_display_value($order['producto'], 'Sin producto')); ?></div>
                                            <div class="small text-muted">Cantidad: <?php echo htmlspecialchars(cc_test_display_value($order['cantidad'])); ?> · <?php echo htmlspecialchars(cc_test_format_price($order['precio'])); ?></div>
                                            <div class="small text-muted">Ingreso Drive: <?php echo htmlspecialchars(cc_test_format_datetime($order['import_id'] ?? null, 'Sin fecha en Drive')); ?></div>
                                            <div class="small text-muted">Observación Drive: <?php echo htmlspecialchars(cc_test_display_value($order['observaciones'], 'Sin observaciones')); ?></div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-wrap gap-2 mb-2">
                                                <span class="badge rounded-pill <?php echo htmlspecialchars($badgeClass); ?>"><?php echo htmlspecialchars(cc_test_state_label($order['estado'])); ?></span>
                                                <span class="badge rounded-pill bg-light text-dark border"><span class="js-call-count-number" data-source-key="<?php echo htmlspecialchars($order['source_key']); ?>"><?php echo (int) $order['total_llamadas']; ?></span> llamadas</span>
                                                <?php if ($semaforoCuenta !== null): ?>
                                                    <span class="badge rounded-pill <?php echo htmlspecialchars($semaforoCuenta['class']); ?>">Seguimiento <?php echo htmlspecialchars($semaforoCuenta['label']); ?></span>
                                                <?php endif; ?>
                                            </div>
                                            <?php if ($semaforoCuenta !== null): ?>
                                                <div class="small text-muted mb-1">Número de cuenta enviado hace <?php echo (int) $semaforoCuenta['days']; ?> día<?php echo ((int) $semaforoCuenta['days'] === 1) ? '' : 's'; ?> · <?php echo htmlspecialchars($semaforoCuenta['range']); ?></div>
                                            <?php endif; ?>
                                            <div class="small text-muted">Próxima llamada: <?php echo htmlspecialchars(cc_test_format_datetime($order['proxima_llamada_at'] ?? null)); ?></div>
                                            <?php if (!empty($order['fecha_entrega_programada'])): ?>
                                                <div class="small text-muted">Entrega programada: <?php echo htmlspecialchars(cc_test_format_date($order['fecha_entrega_programada'] ?? null)); ?></div>
                                            <?php endif; ?>
                                            <div class="small text-muted">Última gestión: <?php echo htmlspecialchars(cc_test_format_datetime($order['ultima_gestion_at'] ?? ($order['seguimiento_actualizado'] ?? null), 'Aún no gestionado')); ?></div>
                                            <div class="small text-muted mt-1">Nota: <?php echo htmlspecialchars(cc_test_display_value($order['nota_seguimiento'], 'Sin nota interna')); ?></div>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex flex-column gap-2 align-items-stretch">
                                                <?php if (!empty($order['telefono_url'])): ?>
                                                    <button
                                                        type="button"
                                                        class="btn btn-sm btn-primary"
                                                        data-source-key="<?php echo htmlspecialchars($order['source_key']); ?>"
                                                        data-modal-id="<?php echo htmlspecialchars($modalId); ?>"
                                                        data-phone="<?php echo htmlspecialchars((string) ($order['celular'] ?? '')); ?>"
                                                        data-order-label="<?php echo htmlspecialchars(cc_test_order_label($order)); ?>"
                                                        data-client-name="<?php echo htmlspecialchars(cc_test_display_value($order['nombre'], 'Cliente sin nombre')); ?>"
                                                        onclick="return registrarLlamada(event, this)">
                                                        <i class="bi bi-telephone-outbound"></i> Llamar / Gestionar
                                                    </button>
                                                <?php else: ?>
                                                    <button type="button" class="btn btn-sm btn-primary" disabled>Sin teléfono</button>
                                                <?php endif; ?>
                                                <?php if (!empty($order['whatsapp_url'])): ?>
                                                    <a href="<?php echo htmlspecialchars($order['whatsapp_url']); ?>" target="_blank" rel="noopener" class="btn btn-sm btn-outline-success">
                                                        <i class="bi bi-whatsapp"></i> WhatsApp
                                                    </a>
                                                <?php endif; ?>
                                                <button type="button" class="btn btn-sm btn-outline-dark" data-bs-toggle="modal" data-bs-target="#<?php echo htmlspecialchars($modalId); ?>">
                                                    <i class="bi bi-sliders"></i> Gestionar
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <?php $rowHtml = ob_get_clean(); echo $rowHtml; ?>

                                    <?php ob_start(); ?>
                                    <div class="modal fade" id="<?php echo htmlspecialchars($modalId); ?>" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <div>
                                                        <div class="small text-primary fw-semibold mb-1"><?php echo htmlspecialchars(cc_test_order_label($order)); ?></div>
                                                        <h3 class="modal-title h5 mb-1"><?php echo htmlspecialchars(cc_test_display_value($order['nombre'], 'Cliente sin nombre')); ?></h3>
                                                        <div class="small text-muted"><?php echo htmlspecialchars(cc_test_display_value($order['producto'], 'Sin producto')); ?> · <?php echo htmlspecialchars(cc_test_display_value($order['celular'], 'Sin celular')); ?></div>
                                                    </div>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="border border-primary-subtle rounded-4 bg-primary-subtle p-2 mb-3" id="airDroidModalCard-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                                            <div>
                                                                <div class="small text-muted mb-1">Llamar / Gestionar</div>
                                                                <h4 class="h6 fw-bold mb-2">Número listo para copiar</h4>
                                                                <div class="fs-4 fw-semibold lh-sm text-primary" id="airDroidPhoneNumber-<?php echo htmlspecialchars($order['source_key']); ?>"><?php echo htmlspecialchars(cc_test_display_value($order['celular'], 'Sin celular')); ?></div>
                                                            </div>
                                                            <div class="d-flex flex-column gap-2">
                                                                <button type="button" class="btn btn-outline-primary btn-sm" id="airDroidCopyButton-<?php echo htmlspecialchars($order['source_key']); ?>" data-phone="<?php echo htmlspecialchars((string) ($order['celular'] ?? '')); ?>" onclick="copyPhoneToClipboard(this.dataset.phone); return false;">Copiar número</button>
                                                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="openAirDroidWeb()">Abrir AirDroid Web</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="border border-success-subtle rounded-4 bg-white p-3 mb-4 shadow-sm cc-readonly-block" aria-disabled="true" style="user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;">
                                                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                                                            <div>
                                                                <div class="small text-muted mb-1">Origen del cliente</div>
                                                                <h4 class="h6 fw-bold mb-0">Pedido del cliente</h4>
                                                            </div>
                                                            <span class="badge bg-success-subtle text-success-emphasis">Solo lectura / origen</span>
                                                        </div>
                                                        <div class="row g-3">
                                                            <div class="col-12">
                                                                <label for="producto-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Producto</label>
                                                                <textarea class="form-control bg-light text-muted" id="producto-<?php echo htmlspecialchars($order['source_key']); ?>" readonly tabindex="-1" aria-readonly="true" spellcheck="false" rows="2" style="pointer-events:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; caret-color:transparent; resize:none; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.35;"><?php echo htmlspecialchars((string) ($order['producto'] ?? '')); ?></textarea>
                                                            </div>
                                                            <div class="col-sm-6 col-lg-3">
                                                                <label for="cantidad-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Cantidad</label>
                                                                <input type="text" class="form-control bg-light text-muted" id="cantidad-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars((string) ($order['cantidad'] ?? '')); ?>" placeholder="Cantidad" readonly tabindex="-1" aria-readonly="true" style="pointer-events:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; caret-color:transparent;">
                                                            </div>
                                                            <div class="col-sm-6 col-lg-3">
                                                                <label for="precio-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Precio</label>
                                                                <input type="text" class="form-control bg-light text-muted" id="precio-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars((string) ($order['precio'] ?? '')); ?>" placeholder="S/ 0.00" inputmode="decimal" readonly tabindex="-1" aria-readonly="true" style="pointer-events:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; caret-color:transparent;">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="border border-info-subtle rounded-4 bg-white p-3 mb-4 shadow-sm">
                                                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                                                            <div>
                                                                <div class="small text-muted mb-1">Se confirma después</div>
                                                                <h4 class="h6 fw-bold mb-0">Confirmación de pedido</h4>
                                                            </div>
                                                            <span class="badge bg-info-subtle text-info-emphasis">Producto del sistema, cantidad y precio</span>
                                                        </div>
                                                        <div class="row g-3">
                                                            <div class="col-12">
                                                                <label for="confirmacion_producto-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Producto</label>
                                                                <select class="form-select w-100" id="confirmacion_producto-<?php echo htmlspecialchars($order['source_key']); ?>" title="Seleccione un producto del sistema">
                                                                    <option value="">Seleccione un producto del sistema</option>
                                                                    <?php foreach ($catalogoProductos as $catalogoProducto): ?>
                                                                        <option value="<?php echo htmlspecialchars((string) ($catalogoProducto['nombre'] ?? '')); ?>" <?php echo ((string) ($order['confirmacion_producto'] ?? '') === (string) ($catalogoProducto['nombre'] ?? '')) ? 'selected' : ''; ?>><?php echo htmlspecialchars((string) ($catalogoProducto['nombre'] ?? '')); ?></option>
                                                                    <?php endforeach; ?>
                                                                </select>
                                                                <div class="form-text text-break" id="confirmacion_producto_resumen-<?php echo htmlspecialchars($order['source_key']); ?>">Producto seleccionado: <?php echo htmlspecialchars((string) ($order['confirmacion_producto'] ?? 'Sin producto seleccionado')); ?></div>
                                                            </div>
                                                            <div class="col-sm-6 col-lg-3">
                                                                <label for="confirmacion_cantidad-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Cantidad</label>
                                                                <input type="text" class="form-control" id="confirmacion_cantidad-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars((string) ($order['confirmacion_cantidad'] ?? '')); ?>" placeholder="Cantidad">
                                                            </div>
                                                            <div class="col-sm-6 col-lg-3">
                                                                <label for="confirmacion_precio-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Precio</label>
                                                                <input type="text" class="form-control" id="confirmacion_precio-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars((string) ($order['confirmacion_precio'] ?? '')); ?>" placeholder="S/ 0.00" inputmode="decimal">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row g-3 mb-4">
                                                        <div class="col-lg-3 col-md-6">
                                                            <div class="border rounded p-3 h-100 bg-light-subtle">
                                                                <div class="small text-muted">Estado actual</div>
                                                                <div class="fw-semibold"><?php echo htmlspecialchars(cc_test_state_label($order['estado'])); ?></div>
                                                                <?php if ($semaforoCuenta !== null): ?>
                                                                    <div class="mt-2">
                                                                        <span class="badge rounded-pill <?php echo htmlspecialchars($semaforoCuenta['class']); ?>">Seguimiento <?php echo htmlspecialchars($semaforoCuenta['label']); ?></span>
                                                                    </div>
                                                                    <div class="small text-muted mt-2">Enviado hace <?php echo (int) $semaforoCuenta['days']; ?> día<?php echo ((int) $semaforoCuenta['days'] === 1) ? '' : 's'; ?> · <?php echo htmlspecialchars($semaforoCuenta['description']); ?></div>
                                                                <?php else: ?>
                                                                    <div class="small text-muted mt-2">El semáforo se activa cuando marques “Se envió número de cuenta”.</div>
                                                                <?php endif; ?>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-6">
                                                            <div class="border rounded p-3 h-100 bg-light-subtle">
                                                                <div class="small text-muted">Total llamadas</div>
                                                                <div class="fw-semibold"><span class="js-call-count-number" data-source-key="<?php echo htmlspecialchars($order['source_key']); ?>"><?php echo (int) $order['total_llamadas']; ?></span></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-6">
                                                            <div class="border rounded p-3 h-100 bg-light-subtle">
                                                                <div class="small text-muted"><?php echo cc_test_requires_delivery_date($order['estado']) ? 'Entrega programada' : 'Próxima llamada'; ?></div>
                                                                <div class="fw-semibold"><?php echo htmlspecialchars(cc_test_requires_delivery_date($order['estado']) ? cc_test_format_date($order['fecha_entrega_programada'] ?? null) : cc_test_format_datetime($order['proxima_llamada_at'] ?? null)); ?></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-6">
                                                            <div class="border rounded p-3 h-100 bg-light-subtle">
                                                                <div class="small text-muted">Ingreso en Drive</div>
                                                                <div class="fw-semibold"><?php echo htmlspecialchars(cc_test_format_datetime($order['import_id'] ?? null, 'Sin fecha')); ?></div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row g-4">
                                                        <div class="col-lg-7">
                                                            <h4 class="h6 fw-bold mb-3">Gestión comercial</h4>
                                                            <div class="row g-3">
                                                                <div class="col-md-4">
                                                                    <label for="estado-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Estado</label>
                                                                    <select class="form-select" id="estado-<?php echo htmlspecialchars($order['source_key']); ?>" onchange="toggleAgendaFields('<?php echo htmlspecialchars($order['source_key']); ?>')">
                                                                        <?php foreach (cc_test_valid_states() as $estadoOption): ?>
                                                                            <option value="<?php echo htmlspecialchars($estadoOption); ?>" <?php echo $order['estado'] === $estadoOption ? 'selected' : ''; ?>>
                                                                                <?php echo htmlspecialchars(cc_test_state_label($estadoOption)); ?>
                                                                            </option>
                                                                        <?php endforeach; ?>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-4 js-next-call-group" id="next-call-group-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                                    <label for="proxima-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Próxima llamada</label>
                                                                    <input type="datetime-local" class="form-control" id="proxima-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars(cc_test_format_datetime_input($order['proxima_llamada_at'] ?? null)); ?>">
                                                                </div>
                                                                <div class="col-md-4 js-delivery-group <?php echo cc_test_requires_delivery_date($order['estado']) ? '' : 'd-none'; ?>" id="delivery-group-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                                    <label for="fecha-entrega-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Fecha de entrega</label>
                                                                    <input type="date" class="form-control" id="fecha-entrega-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars(cc_test_format_date_input($order['fecha_entrega_programada'] ?? null)); ?>">
                                                                    <div class="form-text">Úsalo cuando el cliente quede en Confirmado fecha.</div>
                                                                </div>
                                                                <div class="col-12">
                                                                    <label for="nota-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Nota interna</label>
                                                                    <textarea class="form-control" id="nota-<?php echo htmlspecialchars($order['source_key']); ?>" rows="3" placeholder="Ejemplo: cliente pidió volver a llamar después de las 5 pm."><?php echo htmlspecialchars($order['nota_seguimiento']); ?></textarea>
                                                                </div>
                                                            </div>

                                                            <hr>

                                                            <h4 class="h6 fw-bold mb-3">Datos editables del pedido</h4>
                                                            <div class="row g-3">
                                                                <div class="col-md-6">
                                                                    <label for="direccion-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Dirección</label>
                                                                    <textarea class="form-control" id="direccion-<?php echo htmlspecialchars($order['source_key']); ?>" rows="2"><?php echo htmlspecialchars((string) ($order['direccion'] ?? '')); ?></textarea>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label for="referencia-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Referencia</label>
                                                                    <textarea class="form-control" id="referencia-<?php echo htmlspecialchars($order['source_key']); ?>" rows="2"><?php echo htmlspecialchars((string) ($order['referencia'] ?? '')); ?></textarea>
                                                                </div>
                                                                <?php $agenciaSeleccionada = strtoupper(trim((string) ($order['agencia'] ?? ''))); ?>
                                                                <?php $sedeAgenciaSeleccionada = trim((string) ($order['sede_agencia'] ?? '')); ?>
                                                                <div class="col-md-4">
                                                                    <label for="sede-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Departamento</label>
                                                                    <select class="form-select js-location-department" id="sede-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                                        <option value="">Seleccione departamento</option>
                                                                        <?php foreach ($departamentosContraentrega as $departamentoOption): ?>
                                                                            <option value="<?php echo htmlspecialchars($departamentoOption); ?>" <?php echo $departamentoSeleccionado === $departamentoOption ? 'selected' : ''; ?>>
                                                                                <?php echo htmlspecialchars($departamentoOption); ?>
                                                                            </option>
                                                                        <?php endforeach; ?>
                                                                        <?php if ($departamentoSeleccionado !== '' && !in_array($departamentoSeleccionado, $departamentosContraentrega, true)): ?>
                                                                            <option value="<?php echo htmlspecialchars($departamentoSeleccionado); ?>" selected>
                                                                                <?php echo htmlspecialchars($departamentoSeleccionado); ?>
                                                                            </option>
                                                                        <?php endif; ?>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="ciudad-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Provincia</label>
                                                                    <select class="form-select js-location-province" id="ciudad-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                                        <option value="">Seleccione provincia</option>
                                                                        <?php foreach ($provinciasSeleccionadas as $provinciaOption): ?>
                                                                            <option value="<?php echo htmlspecialchars($provinciaOption); ?>" <?php echo $provinciaSeleccionada === $provinciaOption ? 'selected' : ''; ?>>
                                                                                <?php echo htmlspecialchars($provinciaOption); ?>
                                                                            </option>
                                                                        <?php endforeach; ?>
                                                                        <?php if ($provinciaSeleccionada !== '' && !in_array($provinciaSeleccionada, $provinciasSeleccionadas, true)): ?>
                                                                            <option value="<?php echo htmlspecialchars($provinciaSeleccionada); ?>" selected>
                                                                                <?php echo htmlspecialchars($provinciaSeleccionada); ?>
                                                                            </option>
                                                                        <?php endif; ?>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="distrito_select-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Distrito</label>
                                                                    <select class="form-select js-location-district <?php echo empty($distritosSeleccionados) ? 'd-none' : ''; ?>" id="distrito_select-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                                        <option value="">Seleccione primero provincia</option>
                                                                        <?php foreach ($distritosSeleccionados as $distritoOption): ?>
                                                                            <option value="<?php echo htmlspecialchars($distritoOption); ?>" <?php echo $distritoSeleccionado === $distritoOption ? 'selected' : ''; ?>>
                                                                                <?php echo htmlspecialchars($distritoOption); ?>
                                                                            </option>
                                                                        <?php endforeach; ?>
                                                                        <?php if ($distritoSeleccionado !== '' && !in_array($distritoSeleccionado, $distritosSeleccionados, true)): ?>
                                                                            <option value="<?php echo htmlspecialchars($distritoSeleccionado); ?>" selected>
                                                                                <?php echo htmlspecialchars($distritoSeleccionado); ?>
                                                                            </option>
                                                                        <?php endif; ?>
                                                                    </select>
                                                                    <input type="text" class="form-control mt-2 js-location-district-manual <?php echo empty($distritosSeleccionados) ? '' : 'd-none'; ?>" id="distrito_manual-<?php echo htmlspecialchars($order['source_key']); ?>" placeholder="Escriba el distrito si aún no está en cobertura" value="<?php echo htmlspecialchars($distritoSeleccionado); ?>">
                                                                    <input type="hidden" id="distrito-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars($distritoSeleccionado); ?>">
                                                                    <div class="form-text">Si la provincia aún no tiene cobertura cargada, podrás escribir el distrito manualmente.</div>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="agencia-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Agencia</label>
                                                                    <select class="form-select" id="agencia-<?php echo htmlspecialchars($order['source_key']); ?>">
                                                                        <option value="">Seleccione agencia</option>
                                                                        <?php foreach (['SHALOM', 'OLVA COURIER', 'OTROS'] as $agenciaOption): ?>
                                                                            <option value="<?php echo htmlspecialchars($agenciaOption); ?>" <?php echo $agenciaSeleccionada === $agenciaOption ? 'selected' : ''; ?>>
                                                                                <?php echo htmlspecialchars($agenciaOption); ?>
                                                                            </option>
                                                                        <?php endforeach; ?>
                                                                        <?php if ($agenciaSeleccionada !== '' && !in_array($agenciaSeleccionada, ['SHALOM', 'OLVA COURIER', 'OTROS'], true)): ?>
                                                                            <option value="<?php echo htmlspecialchars($agenciaSeleccionada); ?>" selected>
                                                                                <?php echo htmlspecialchars($agenciaSeleccionada); ?>
                                                                            </option>
                                                                        <?php endif; ?>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="sede_agencia-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Sede</label>
                                                                    <input type="text" class="form-control" id="sede_agencia-<?php echo htmlspecialchars($order['source_key']); ?>" placeholder="Escriba la sede para envío por agencia" value="<?php echo htmlspecialchars($sedeAgenciaSeleccionada); ?>">
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <label for="dni-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">DNI</label>
                                                                    <input type="text" class="form-control" id="dni-<?php echo htmlspecialchars($order['source_key']); ?>" value="<?php echo htmlspecialchars((string) ($order['dni'] ?? '')); ?>">
                                                                </div>
                                                                <div class="col-12">
                                                                    <label for="observaciones-<?php echo htmlspecialchars($order['source_key']); ?>" class="form-label">Observaciones del pedido</label>
                                                                    <textarea class="form-control" id="observaciones-<?php echo htmlspecialchars($order['source_key']); ?>" rows="2"><?php echo htmlspecialchars((string) ($order['observaciones'] ?? '')); ?></textarea>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-5">
                                                            <div class="mb-4 border rounded p-4 bg-light-subtle">
                                                                <div class="fw-semibold mb-3 fs-5">Origen vs edición</div>
                                                                <div class="mb-1"><strong>Dirección Drive:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['direccion_drive'] ?? null)); ?></div>
                                                                <div class="mb-1"><strong>Referencia Drive:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['referencia_drive'] ?? null)); ?></div>
                                                                <div class="mb-1"><strong>Distrito 1:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['distrito_drive'] ?? null)); ?></div>
                                                                <div class="mb-1"><strong>Distrito:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['distrito'] ?? null)); ?></div>
                                                                <div><strong>Observación Drive:</strong> <?php echo htmlspecialchars(cc_test_display_value($order['observaciones_drive'] ?? null)); ?></div>
                                                            </div>

                                                            <h4 class="h6 fw-bold mb-3">Historial de llamadas</h4>
                                                            <?php if (empty($historial)): ?>
                                                                <div class="border rounded p-3 text-muted small">Aún no hay llamadas registradas para este cliente.</div>
                                                            <?php else: ?>
                                                                <div class="list-group list-group-flush border rounded overflow-hidden">
                                                                    <?php foreach ($historial as $h): ?>
                                                                        <div class="list-group-item small py-3">
                                                                            <div class="d-flex justify-content-between gap-2">
                                                                                <span class="fw-semibold"><?php echo htmlspecialchars($h['asesor'] ?? 'Asesor'); ?></span>
                                                                                <span class="text-muted"><?php echo htmlspecialchars(date('d/m/Y H:i', strtotime($h['fecha_llamada']))); ?></span>
                                                                            </div>
                                                                            <div class="text-primary fw-semibold mt-1"><?php echo htmlspecialchars($h['resultado']); ?></div>
                                                                            <?php if (!empty($h['observacion'])): ?>
                                                                                <div class="text-muted mt-1"><?php echo htmlspecialchars($h['observacion']); ?></div>
                                                                            <?php endif; ?>
                                                                        </div>
                                                                    <?php endforeach; ?>
                                                                </div>
                                                            <?php endif; ?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer d-flex justify-content-between">
                                                    <div class="small text-muted">Los cambios se guardan en la base local del módulo de prueba.</div>
                                                    <div class="d-flex gap-2">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                                        <button type="button" class="btn btn-primary" onclick="guardarGestion('<?php echo htmlspecialchars($order['source_key']); ?>', this)">Guardar gestión</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php $modalsHtml[] = ob_get_clean(); ?>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <?php if (!empty($modalsHtml)): ?>
            <?php echo implode("
", $modalsHtml); ?>
        <?php endif; ?>

        <div class="position-fixed bottom-0 end-0 p-3" id="airDroidAssistPanel" style="z-index: 1080; max-width: 26rem; width: min(26rem, calc(100vw - 1.5rem));">
            <div class="card border-primary shadow-lg d-none" id="airDroidAssistCard">
                <div class="card-header bg-primary text-white d-flex align-items-start justify-content-between gap-3">
                    <div>
                        <div class="small opacity-75">Llamada preparada para AirDroid</div>
                        <h3 class="h5 mb-0">Número listo para copiar</h3>
                    </div>
                    <button type="button" class="btn-close btn-close-white" id="airDroidHideButton" aria-label="Ocultar"></button>
                </div>
                <div class="card-body">
                    <div class="rounded-4 border bg-light-subtle p-2">
                        <div class="small text-muted">Pedido</div>
                        <div class="fw-semibold" id="airDroidOrderLabel">-</div>
                        <div class="small text-muted mt-2">Cliente</div>
                        <div class="fw-semibold" id="airDroidClientName">-</div>
                        <div class="small text-muted mt-2">Número</div>
                        <div class="fs-5 fw-semibold lh-sm text-primary" id="airDroidPhoneNumber">-</div>
                    </div>
                </div>
                <div class="card-footer d-flex flex-wrap justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="airDroidCopyButton">Copiar número</button>
                    <button type="button" class="btn btn-outline-primary btn-sm" id="airDroidOpenButton">Abrir AirDroid Web</button>
                </div>
            </div>
        </div>
    <?php endif; ?>
</main>

<script>
const provinciasPorDepartamento = <?php echo json_encode($provinciasPorDepartamentoContraentrega, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
const distritosPorProvincia = <?php echo json_encode($distritosPorProvinciaContraentrega, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;

function getLocationControls(sourceKey) {
    return {
        department: document.getElementById('sede-' + sourceKey),
        province: document.getElementById('ciudad-' + sourceKey),
        districtSelect: document.getElementById('distrito_select-' + sourceKey),
        districtManual: document.getElementById('distrito_manual-' + sourceKey),
        districtHidden: document.getElementById('distrito-' + sourceKey)
    };
}

function syncDistrictHidden(sourceKey, value) {
    const controls = getLocationControls(sourceKey);
    if (controls.districtHidden) {
        controls.districtHidden.value = value || '';
    }
}

function renderDistrictOptions(sourceKey, preserveSelection = true) {
    const controls = getLocationControls(sourceKey);
    if (!controls.province || !controls.districtSelect || !controls.districtManual || !controls.districtHidden) {
        return;
    }

    const province = controls.province.value || '';
    const currentValue = preserveSelection ? (controls.districtHidden.value || controls.districtSelect.value || controls.districtManual.value || '') : '';
    const districts = province ? (distritosPorProvincia[province] || []) : [];

    controls.districtSelect.innerHTML = '';

    const emptyOption = document.createElement('option');
    emptyOption.value = '';
    emptyOption.textContent = province ? (districts.length ? 'Seleccione distrito' : 'Sin cobertura registrada') : 'Seleccione primero provincia';
    controls.districtSelect.appendChild(emptyOption);

    if (!province) {
        controls.districtSelect.classList.remove('d-none');
        controls.districtSelect.disabled = true;
        controls.districtManual.classList.add('d-none');
        controls.districtManual.value = '';
        syncDistrictHidden(sourceKey, '');
        return;
    }

    if (districts.length > 0) {
        districts.forEach(function(distrito) {
            const option = document.createElement('option');
            option.value = distrito;
            option.textContent = distrito;
            if (distrito === currentValue) {
                option.selected = true;
            }
            controls.districtSelect.appendChild(option);
        });

        if (currentValue && !districts.includes(currentValue)) {
            const legacyOption = document.createElement('option');
            legacyOption.value = currentValue;
            legacyOption.textContent = currentValue + ' (actual)';
            legacyOption.selected = true;
            controls.districtSelect.appendChild(legacyOption);
        }

        controls.districtSelect.classList.remove('d-none');
        controls.districtSelect.disabled = false;
        controls.districtManual.classList.add('d-none');
        controls.districtManual.value = '';
        controls.districtSelect.value = currentValue || controls.districtSelect.value || '';
        syncDistrictHidden(sourceKey, controls.districtSelect.value);
        return;
    }

    controls.districtSelect.classList.add('d-none');
    controls.districtSelect.disabled = true;
    controls.districtManual.classList.remove('d-none');
    controls.districtManual.value = currentValue;
    syncDistrictHidden(sourceKey, currentValue);
}

function renderProvinceOptions(sourceKey, preserveSelection = true) {
    const controls = getLocationControls(sourceKey);
    if (!controls.department || !controls.province) {
        return;
    }

    const department = controls.department.value || '';
    const currentValue = preserveSelection ? (controls.province.value || '') : '';
    const provinces = department ? (provinciasPorDepartamento[department] || []) : [];

    controls.province.innerHTML = '';

    const emptyOption = document.createElement('option');
    emptyOption.value = '';
    emptyOption.textContent = department ? (provinces.length ? 'Seleccione provincia' : 'Sin cobertura registrada') : 'Seleccione primero departamento';
    controls.province.appendChild(emptyOption);

    provinces.forEach(function(provincia) {
        const option = document.createElement('option');
        option.value = provincia;
        option.textContent = provincia;
        if (provincia === currentValue) {
            option.selected = true;
        }
        controls.province.appendChild(option);
    });

    if (currentValue && !provinces.includes(currentValue)) {
        const legacyOption = document.createElement('option');
        legacyOption.value = currentValue;
        legacyOption.textContent = currentValue + ' (actual)';
        legacyOption.selected = true;
        controls.province.appendChild(legacyOption);
    }

    controls.province.disabled = !department && currentValue === '';
    controls.province.value = currentValue || controls.province.value || '';
    renderDistrictOptions(sourceKey, preserveSelection);
}

function toggleAgendaFields(sourceKey) {
    const estado = document.getElementById('estado-' + sourceKey)?.value || '';
    const nextCallGroup = document.getElementById('next-call-group-' + sourceKey);
    const deliveryGroup = document.getElementById('delivery-group-' + sourceKey);
    const nextCallInput = document.getElementById('proxima-' + sourceKey);
    const deliveryInput = document.getElementById('fecha-entrega-' + sourceKey);
    const needsDeliveryDate = estado === 'CONFIRMADO CONTRAENTREGA';
    const needsNextCall = ['POR LLAMAR', 'DEVOLVER LLAMADA', 'OBSERVADO'].includes(estado);

    if (nextCallGroup) {
        nextCallGroup.classList.toggle('d-none', !needsNextCall);
    }
    if (deliveryGroup) {
        deliveryGroup.classList.toggle('d-none', !needsDeliveryDate);
    }
    if (!needsNextCall && nextCallInput) {
        nextCallInput.value = '';
    }
    if (!needsDeliveryDate && deliveryInput) {
        deliveryInput.value = '';
    }
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('select[id^="estado-"]').forEach(select => {
        toggleAgendaFields(select.id.replace('estado-', ''));
    });

    document.querySelectorAll('select[id^="sede-"]').forEach(select => {
        const sourceKey = select.id.replace('sede-', '');
        renderProvinceOptions(sourceKey, true);
        select.addEventListener('change', () => {
            renderProvinceOptions(sourceKey, false);
        });
    });

    document.querySelectorAll('select[id^="ciudad-"]').forEach(select => {
        const sourceKey = select.id.replace('ciudad-', '');
        select.addEventListener('change', () => {
            renderDistrictOptions(sourceKey, false);
        });
    });

    document.querySelectorAll('select[id^="distrito_select-"]').forEach(select => {
        const sourceKey = select.id.replace('distrito_select-', '');
        select.addEventListener('change', () => {
            syncDistrictHidden(sourceKey, select.value);
        });
    });

    document.querySelectorAll('input[id^="distrito_manual-"]').forEach(input => {
        const sourceKey = input.id.replace('distrito_manual-', '');
        input.addEventListener('input', () => {
            syncDistrictHidden(sourceKey, input.value);
        });
    });

    document.querySelectorAll('select[id^="confirmacion_producto-"]').forEach(select => {
        const sourceKey = select.id.replace('confirmacion_producto-', '');
        const resumen = document.getElementById('confirmacion_producto_resumen-' + sourceKey);
        const syncResumen = () => {
            const selectedOption = select.selectedOptions && select.selectedOptions[0] ? select.selectedOptions[0] : null;
            const label = selectedOption && selectedOption.textContent ? selectedOption.textContent.trim() : (select.value || 'Sin producto seleccionado');
            if (resumen) {
                resumen.textContent = 'Producto seleccionado: ' + label;
            }
            select.title = label;
        };
        syncResumen();
        select.addEventListener('change', syncResumen);
    });
});

function guardarGestion(sourceKey, trigger) {
    const body = new URLSearchParams({
        source_key: sourceKey,
        estado: document.getElementById('estado-' + sourceKey)?.value || 'POR LLAMAR',
        proxima_llamada_at: document.getElementById('proxima-' + sourceKey)?.value || '',
        fecha_entrega_programada: document.getElementById('fecha-entrega-' + sourceKey)?.value || '',
        nota_seguimiento: document.getElementById('nota-' + sourceKey)?.value || '',
        direccion: document.getElementById('direccion-' + sourceKey)?.value || '',
        referencia: document.getElementById('referencia-' + sourceKey)?.value || '',
        agencia: document.getElementById('agencia-' + sourceKey)?.value || '',
        sede_agencia: document.getElementById('sede_agencia-' + sourceKey)?.value || '',
        sede: document.getElementById('sede-' + sourceKey)?.value || '',
        ciudad: document.getElementById('ciudad-' + sourceKey)?.value || '',
        distrito: document.getElementById('distrito-' + sourceKey)?.value || '',
        dni: document.getElementById('dni-' + sourceKey)?.value || '',
        observaciones: document.getElementById('observaciones-' + sourceKey)?.value || '',
        producto: document.getElementById('producto-' + sourceKey)?.value || '',
        cantidad: document.getElementById('cantidad-' + sourceKey)?.value || '',
        precio: document.getElementById('precio-' + sourceKey)?.value || '',
        confirmacion_producto: document.getElementById('confirmacion_producto-' + sourceKey)?.value || '',
        confirmacion_cantidad: document.getElementById('confirmacion_cantidad-' + sourceKey)?.value || '',
        confirmacion_precio: document.getElementById('confirmacion_precio-' + sourceKey)?.value || ''
    });

    if (trigger) {
        trigger.disabled = true;
    }

    fetch('update_callcenter_test_tracking.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body: body.toString()
    })
    .then(response => response.json())
    .then(data => {
        if (!data.success) {
            throw new Error(data.message || 'No se pudo guardar la gestión');
        }
        window.location.reload();
    })
    .catch(error => {
        alert(error.message || 'Ocurrió un error al guardar la gestión.');
    })
    .finally(() => {
        if (trigger) {
            trigger.disabled = false;
        }
    });
}

function actualizarContadorLlamadas(sourceKey, total) {
    document.querySelectorAll('.js-call-count-number[data-source-key="' + sourceKey + '"]').forEach(node => {
        node.textContent = String(total);
    });
}

function normalizarNumeroTelefono(value) {
    return String(value || '').replace(/\D+/g, '');
}

function copyTextLegacy(text) {
    const input = document.createElement('input');
    input.type = 'text';
    input.value = text;
    input.setAttribute('readonly', 'readonly');
    input.style.position = 'fixed';
    input.style.opacity = '0';
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length);
    let copied = false;

    try {
        copied = document.execCommand('copy');
    } catch (error) {
        copied = false;
    }

    document.body.removeChild(input);
    return copied;
}

function copyPhoneToClipboard(phone) {
    if (!phone) {
        return Promise.resolve(false);
    }

    if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(phone)
            .then(() => true)
            .catch(() => copyTextLegacy(phone));
    }

    return Promise.resolve(copyTextLegacy(phone));
}

function openAirDroidWeb() {
    return window.open('https://web.airdroid.com/', '_blank', 'noopener');
}

function showAirDroidHelper(details) {
    const sourceKey = details.sourceKey || '';
    const phone = details.phone || '-';
    const orderLabel = details.orderLabel || 'Sin número';
    const clientName = details.clientName || 'Cliente sin nombre';
    const registered = !!details.registered;
    const copied = !!details.copied;
    const modalId = details.modalId || '';

    if (modalId) {
        const modalElement = document.getElementById(modalId);
        if (modalElement && window.bootstrap && window.bootstrap.Modal) {
            window.bootstrap.Modal.getOrCreateInstance(modalElement).show();
        }
    }

    const orderNode = document.getElementById('airDroidOrderLabel-' + sourceKey);
    const clientNode = document.getElementById('airDroidClientName-' + sourceKey);
    const phoneNode = document.getElementById('airDroidPhoneNumber-' + sourceKey);
    const copyButton = document.getElementById('airDroidCopyButton-' + sourceKey);
    const openButton = document.getElementById('airDroidOpenButton-' + sourceKey);

    if (orderNode) orderNode.textContent = orderLabel;
    if (clientNode) clientNode.textContent = clientName;
    if (phoneNode) phoneNode.textContent = phone;

    if (copyButton) {
        copyButton.dataset.phone = phone !== '-' ? phone : '';
    }

    if (openButton) {
        openButton.onclick = function () {
            openAirDroidWeb();
        };
    }
}

function registrarLlamada(event, trigger) {
    if (event) {
        event.preventDefault();
    }

    const sourceKey = trigger?.dataset?.sourceKey || '';
    const modalId = trigger?.dataset?.modalId || '';
    const phone = normalizarNumeroTelefono(trigger?.dataset?.phone || '');
    const orderLabel = trigger?.dataset?.orderLabel || '';
    const clientName = trigger?.dataset?.clientName || '';

    if (!sourceKey) {
        alert('No se encontró el pedido para registrar la llamada.');
        return false;
    }

    if (modalId) {
        const modalElement = document.getElementById(modalId);
        if (modalElement && window.bootstrap && window.bootstrap.Modal) {
            window.bootstrap.Modal.getOrCreateInstance(modalElement).show();
        }
    }

    if (trigger) {
        trigger.classList.add('disabled');
        trigger.setAttribute('aria-disabled', 'true');
    }

    const copyPromise = copyPhoneToClipboard(phone).catch(() => false);

    const body = new URLSearchParams({
        pedido_id: sourceKey,
        resultado: 'Llamada iniciada - AirDroid',
        observacion: 'Clic en botón Llamar / AirDroid desde el panel'
    });

    const savePromise = fetch('save_llamada.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body: body.toString(),
        keepalive: true
    })
    .then(response => response.json())
    .then(data => {
        if (!data.success) {
            throw new Error(data.error || 'No se pudo registrar la llamada');
        }

        if (typeof data.total_llamadas !== 'undefined') {
            actualizarContadorLlamadas(sourceKey, Number(data.total_llamadas) || 0);
        }

        return true;
    });

    Promise.allSettled([savePromise, copyPromise]).then(results => {
        const registerResult = results[0];
        const copyResult = results[1];
        const registered = registerResult.status === 'fulfilled' && registerResult.value === true;
        const copied = copyResult.status === 'fulfilled' && copyResult.value === true;

        if (!registered) {
            const error = registerResult.reason;
            console.error('Error al registrar llamada:', error);
            alert((error && error.message) || 'No se pudo registrar la llamada.');
        }

        showAirDroidHelper({
            sourceKey,
            modalId,
            phone,
            orderLabel,
            clientName,
            registered,
            copied
        });
    }).finally(() => {
        if (trigger) {
            trigger.classList.remove('disabled');
            trigger.removeAttribute('aria-disabled');
        }
    });

    return false;
}

const airDroidCopyButton = document.getElementById('airDroidCopyButton');
if (airDroidCopyButton) {
    airDroidCopyButton.addEventListener('click', function () {
        const phone = this.dataset.phone || '';
        copyPhoneToClipboard(phone).then(copied => {
            if (!copied) {
                alert('No se pudo copiar el número automáticamente.');
            }
        });
    });
}
</script>

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