<?php
include_once 'config/database.php';
include_once 'includes/header.php';

$database = new Database();
$conn = $database->getConnection();

try {
    // Obtener la empresa del usuario logueado
    $codempresaUsuario = null;
    $stmt_empresa = $conn->prepare("SELECT codempresa FROM templeado WHERE codempleado = ?");
    $stmt_empresa->execute([$_SESSION['user']['codempleado']]);
    $resultado_empresa = $stmt_empresa->fetch(PDO::FETCH_ASSOC);
    if ($resultado_empresa) {
        $codempresaUsuario = $resultado_empresa['codempresa'];
    }
    
    $search = isset($_GET['search']) ? trim($_GET['search']) : '';
    $fecha_inicio = isset($_GET['fecha_inicio']) ? trim($_GET['fecha_inicio']) : '';
    $fecha_final = isset($_GET['fecha_final']) ? trim($_GET['fecha_final']) : '';
    $page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
    $records_per_page = isset($_GET['per_page']) ? max(10, min(100, intval($_GET['per_page']))) : 20;
    $offset = ($page - 1) * $records_per_page;
    
    // Parámetros de ordenamiento
    $sort = isset($_GET['sort']) ? trim($_GET['sort']) : 'fecha_creacion';
    $order = isset($_GET['order']) && strtoupper($_GET['order']) === 'ASC' ? 'ASC' : 'DESC';
    
    // Columnas permitidas para ordenar (seguridad)
    $allowed_sort_columns = [
        'id', 'codigodepago', 'nombres_ap_raz_soc', 'nro_documento', 
        'tipo_documento', 'agente', 'estado', 'paquete_contratado', 
        'fecha_edicion', 'fecha_creacion', 'fecha_instalacion'
    ];
    
    // Validar que la columna de ordenamiento sea válida
    if (!in_array($sort, $allowed_sort_columns)) {
        $sort = 'fecha_creacion';
    }
    
    // Count total records for pagination
    $count_query = "SELECT COUNT(*) as total FROM timportventas WHERE 1=1 AND estado <> 'ACTIVO'";
    $count_params = [];
    
    // Filtrar por empresa del usuario logueado
    if ($codempresaUsuario) {
        $count_query .= " AND codempresa = ?";
        $count_params[] = $codempresaUsuario;
    }
    
    if ($search) {
        $count_query .= " AND (nro_documento LIKE ? OR nombres_ap_raz_soc LIKE ?)";
        $searchTerm = "%{$search}%";
        $count_params[] = $searchTerm;
        $count_params[] = $searchTerm;
    }
    
    // Filtrar por rango de fechas de edición
    if ($fecha_inicio && $fecha_final) {
        $count_query .= " AND DATE(fecha_edicion) BETWEEN ? AND ?";
        $count_params[] = $fecha_inicio;
        $count_params[] = $fecha_final;
    } elseif ($fecha_inicio) {
        $count_query .= " AND DATE(fecha_edicion) >= ?";
        $count_params[] = $fecha_inicio;
    } elseif ($fecha_final) {
        $count_query .= " AND DATE(fecha_edicion) <= ?";
        $count_params[] = $fecha_final;
    }
    
    $count_stmt = $conn->prepare($count_query);
    $count_stmt->execute($count_params);
    $total_records = $count_stmt->fetch(PDO::FETCH_ASSOC)['total'];
    $total_pages = ceil($total_records / $records_per_page);
    
    // Ensure page is within valid range
    if ($page > $total_pages && $total_pages > 0) {
        $page = $total_pages;
        $offset = ($page - 1) * $records_per_page;
    }
    
    // Fetch sales records for current page
    $query = "SELECT * FROM timportventas WHERE 1=1 AND estado <> 'ACTIVO'";
    $params = [];
    
    // Filtrar por empresa del usuario logueado
    if ($codempresaUsuario) {
        $query .= " AND codempresa = ?";
        $params[] = $codempresaUsuario;
    }
    
    if ($search) {
        $query .= " AND (nro_documento LIKE ? OR nombres_ap_raz_soc LIKE ?)";
        $searchTerm = "%{$search}%";
        $params[] = $searchTerm;
        $params[] = $searchTerm;
    }
    
    // Filtrar por rango de fechas de edición
    if ($fecha_inicio && $fecha_final) {
        $query .= " AND DATE(fecha_edicion) BETWEEN ? AND ?";
        $params[] = $fecha_inicio;
        $params[] = $fecha_final;
    } elseif ($fecha_inicio) {
        $query .= " AND DATE(fecha_edicion) >= ?";
        $params[] = $fecha_inicio;
    } elseif ($fecha_final) {
        $query .= " AND DATE(fecha_edicion) <= ?";
        $params[] = $fecha_final;
    }
    
    // Aplicar ordenamiento
    $query .= " ORDER BY " . $sort . " " . $order . ", id DESC LIMIT " . intval($records_per_page) . " OFFSET " . intval($offset);
    
    $stmt = $conn->prepare($query);
    $stmt->execute($params);
    $ventas = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al obtener los datos: " . $e->getMessage();
    $ventas = [];
    $total_records = 0;
    $total_pages = 0;
    $page = 1;
    $sort = isset($_GET['sort']) ? trim($_GET['sort']) : 'fecha_creacion';
    $order = isset($_GET['order']) && strtoupper($_GET['order']) === 'ASC' ? 'ASC' : 'DESC';
}

// Función para generar enlace de ordenamiento
function getSortLink($column, $label, $current_sort, $current_order) {
    $params = $_GET;
    $params['sort'] = $column;
    
    // Si se hace clic en la misma columna, alternar el orden
    if ($current_sort === $column) {
        $params['order'] = ($current_order === 'ASC') ? 'DESC' : 'ASC';
    } else {
        $params['order'] = 'ASC';
    }
    
    $params['page'] = 1; // Resetear a página 1 al ordenar
    
    $url = 'liquidadosfijas.php?' . http_build_query($params);
    
    // Icono de ordenamiento
    $icon = '';
    if ($current_sort === $column) {
        $icon = $current_order === 'ASC' 
            ? '<i class="fas fa-sort-up ms-1" style="color: white !important;"></i>' 
            : '<i class="fas fa-sort-down ms-1" style="color: white !important;"></i>';
    } else {
        $icon = '<i class="fas fa-sort ms-1" style="opacity: 0.7; color: white !important;"></i>';
    }
    
    return '<a href="' . htmlspecialchars($url) . '" style="color: white !important; text-decoration: none !important; display: flex; align-items: center; justify-content: space-between; width: 100%; font-weight: 500;">' . 
           '<span style="color: white !important;">' . $label . '</span>' . $icon . 
           '</a>';
}
?>

<div class="col-md-10 p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 style="background: linear-gradient(135deg, #4CAF50, #45a049); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold;">
                <i class="fas fa-hand-holding-usd" style="color: #4CAF50;"></i> Liquidados Fijas
            </h2>
            <?php if ($total_records > 0): ?>
                <small class="text-muted" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 8px 12px; border-radius: 20px; border-left: 4px solid #4CAF50;">
                    <i class="fas fa-chart-bar" style="color: #4CAF50;"></i>
                    Total: <strong><?php echo number_format($total_records); ?></strong> registros encontrados | 
                    Página <strong><?php echo $page; ?></strong> de <strong><?php echo $total_pages; ?></strong>
                </small>
            <?php endif; ?>
        </div>
        <div>
            <a href="#" class="btn" onclick="exportVentas(event)" style="background: linear-gradient(135deg, #4CAF50, #45a049); border: none; color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);">
                <i class="fas fa-file-excel"></i> Exportar
            </a>
        </div>
    </div>

    <?php if (isset($_SESSION['success'])): ?>
        <div class="alert alert-success">
            <?php 
            echo $_SESSION['success']; 
            unset($_SESSION['success']);
            ?>
        </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert alert-danger">
            <?php 
            echo $_SESSION['error']; 
            unset($_SESSION['error']);
            ?>
        </div>
    <?php endif; ?>

    <!-- Search form -->
    <div class="card mb-4" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div class="card-body">
            <form method="GET" action="liquidadosfijas.php" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label" style="color: #4CAF50; font-weight: bold;"><i class="fas fa-search"></i> Buscar</label>
                    <input type="text" class="form-control" name="search" 
                           placeholder="Buscar por número de documento o nombre del cliente..."
                           value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>"
                           style="border: 2px solid #e9ecef; border-radius: 10px; transition: all 0.3s ease;">
                </div>
                <div class="col-md-2">
                    <label class="form-label" style="color: #4CAF50; font-weight: bold;"><i class="fas fa-calendar"></i> Fecha Inicio</label>
                    <input type="date" class="form-control" name="fecha_inicio" id="fecha_inicio_input"
                           value="<?php echo isset($_GET['fecha_inicio']) ? htmlspecialchars($_GET['fecha_inicio']) : ''; ?>"
                           style="border: 2px solid #e9ecef; border-radius: 10px; transition: all 0.3s ease;">
                </div>
                <div class="col-md-2">
                    <label class="form-label" style="color: #4CAF50; font-weight: bold;"><i class="fas fa-calendar"></i> Fecha Final</label>
                    <input type="date" class="form-control" name="fecha_final" id="fecha_final_input"
                           value="<?php echo isset($_GET['fecha_final']) ? htmlspecialchars($_GET['fecha_final']) : ''; ?>"
                           style="border: 2px solid #e9ecef; border-radius: 10px; transition: all 0.3s ease;">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn w-100" style="background: linear-gradient(135deg, #2196F3, #1976D2); border: none; color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                </div>
                <div class="col-md-2">
                    <label class="form-label" style="color: #4CAF50; font-weight: bold;"><i class="fas fa-list"></i> Registros por página</label>
                    <select name="per_page" class="form-select" onchange="this.form.submit()" style="border: 2px solid #e9ecef; border-radius: 10px;">
                        <option value="10" <?php echo (isset($_GET['per_page']) && $_GET['per_page'] == '10') ? 'selected' : ''; ?>>10</option>
                        <option value="20" <?php echo (!isset($_GET['per_page']) || $_GET['per_page'] == '20') ? 'selected' : ''; ?>>20</option>
                        <option value="50" <?php echo (isset($_GET['per_page']) && $_GET['per_page'] == '50') ? 'selected' : ''; ?>>50</option>
                        <option value="100" <?php echo (isset($_GET['per_page']) && $_GET['per_page'] == '100') ? 'selected' : ''; ?>>100</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn w-100" onclick="showDuplicadosVentas()" style="background: linear-gradient(135deg, #FF9800, #F57C00); border: none; color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);">
                        <i class="fas fa-users"></i> Ver Duplicados
                    </button>
                </div>
                <div class="col-md-2">
                    <?php if (isset($_GET['search']) || isset($_GET['per_page']) || isset($_GET['fecha_inicio']) || isset($_GET['fecha_final'])): ?>
                        <a href="liquidadosfijas.php" class="btn w-100" style="background: linear-gradient(135deg, #6c757d, #5a6268); border: none; color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);">
                            <i class="fas fa-times"></i> Limpiar
                        </a>
                    <?php endif; ?>
                </div>
            </form>
        </div>
    </div>

    <!-- Sales List -->
    <div class="card mb-4" style="border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <div class="card-header" style="background: linear-gradient(135deg, #4CAF50, #45a049); color: white; border: none;">
            <h5 class="mb-0"><i class="fas fa-hand-holding-usd"></i> Registros Encontrados</h5>
        </div>
        <div class="card-body" style="background: linear-gradient(135deg, #f8f9fa, #ffffff);">
            <div class="table-responsive">
                <table class="table table-striped" style="border-radius: 10px; overflow: hidden;">
                    <thead style="background: linear-gradient(135deg, #2196F3, #1976D2); color: white;">
                        <tr>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('id', '<i class="fas fa-hashtag"></i> ID', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('codigodepago', '<i class="fas fa-barcode"></i> Código Pago', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('nombres_ap_raz_soc', '<i class="fas fa-user"></i> Cliente', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('nro_documento', '<i class="fas fa-id-card"></i> Documento', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('agente', '<i class="fas fa-user-tie"></i> Agente', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('estado', '<i class="fas fa-flag"></i> Estado', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('paquete_contratado', '<i class="fas fa-box"></i> Paquete', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px;">
                                <?php echo getSortLink('fecha_edicion', '<i class="fas fa-calendar"></i> Fecha Edición', $sort, $order); ?>
                            </th>
                            <th style="border: none; padding: 15px; color: white !important;"><i class="fas fa-cogs"></i> Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($ventas as $venta): ?>
                            <tr>
                                <td><?php echo $venta['id']; ?></td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-secondary" id="cp_txt_<?php echo $venta['id']; ?>"><?php echo htmlspecialchars($venta['codigodepago'] ?: '-'); ?></span>
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="openCodigoPagoModal(<?php echo $venta['id']; ?>, '<?php echo htmlspecialchars($venta['codigodepago']); ?>')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <strong><?php echo htmlspecialchars($venta['nombres_ap_raz_soc'] ?: '-'); ?></strong>
                                    <?php if ($venta['celular']): ?>
                                        <br><small class="text-muted">📱 <?php echo htmlspecialchars($venta['celular']); ?></small>
                                    <?php endif; ?>
                                    <?php if ($venta['direccion']): ?>
                                        <br><small class="text-muted">🏠 <?php echo htmlspecialchars(strlen($venta['direccion']) > 50 ? substr($venta['direccion'], 0, 50) . '...' : $venta['direccion']); ?></small>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php echo htmlspecialchars($venta['tipo_documento'] ?: '-'); ?>
                                    <br><strong><?php echo htmlspecialchars($venta['nro_documento'] ?: '-'); ?></strong>
                                </td>
                                <td>
                                    <span class="badge bg-info"><?php echo htmlspecialchars($venta['agente'] ?: '-'); ?></span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <?php 
                                        $estadoClass = '';
                                        switch(strtoupper($venta['estado'])) {
                                            case 'ATENDIDA':
                                                $estadoClass = 'bg-success';
                                                break;
                                            case 'ACTIVO':
                                                $estadoClass = 'bg-warning';
                                                break;
                                            default:
                                                $estadoClass = 'bg-secondary';
                                        }
                                        ?>
                                        <span class="badge <?php echo $estadoClass; ?>" id="estado_txt_<?php echo $venta['id']; ?>">
                                            <?php echo htmlspecialchars($venta['estado'] ?: '-'); ?>
                                        </span>
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="openEstadoModal(<?php echo $venta['id']; ?>, '<?php echo htmlspecialchars($venta['estado']); ?>')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <small><?php echo htmlspecialchars($venta['paquete_contratado'] ?: '-'); ?></small>
                                    <?php if ($venta['tecnologia']): ?>
                                        <br><span class="badge bg-primary"><?php echo htmlspecialchars($venta['tecnologia']); ?></span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php echo $venta['fecha_edicion'] ? date('d/m/Y', strtotime($venta['fecha_edicion'])) : '-'; ?>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-info" 
                                                onclick="openVerModal(<?php echo $venta['id']; ?>, '<?php echo htmlspecialchars($venta['nombres_ap_raz_soc']); ?>', '<?php echo htmlspecialchars($venta['nro_documento']); ?>', '<?php echo htmlspecialchars($venta['tipo_documento']); ?>', '<?php echo htmlspecialchars($venta['direccion']); ?>', '<?php echo htmlspecialchars($venta['celular']); ?>', '<?php echo htmlspecialchars($venta['agente']); ?>', '<?php echo htmlspecialchars($venta['estado']); ?>', '<?php echo htmlspecialchars($venta['paquete_contratado']); ?>', '<?php echo htmlspecialchars($venta['tecnologia']); ?>', '<?php echo htmlspecialchars($venta['tipo_venta']); ?>', '<?php echo htmlspecialchars($venta['ugis']); ?>', '<?php echo htmlspecialchars($venta['total_decos']); ?>', '<?php echo htmlspecialchars($venta['full_claro']); ?>', '<?php echo htmlspecialchars($venta['cargo_fijo']); ?>', '<?php echo htmlspecialchars($venta['departamento']); ?>', '<?php echo htmlspecialchars($venta['provincia']); ?>', '<?php echo htmlspecialchars($venta['distrito']); ?>', '<?php echo htmlspecialchars($venta['direccion']); ?>', '<?php echo htmlspecialchars($venta['sec']); ?>', '<?php echo $venta['fecha_sec'] ? date('d/m/Y', strtotime($venta['fecha_sec'])) : ''; ?>', '<?php echo htmlspecialchars($venta['sot']); ?>', '<?php echo $venta['fecha_instalacion'] ? date('d/m/Y', strtotime($venta['fecha_instalacion'])) : ''; ?>', '<?php echo htmlspecialchars($venta['estado_sot']); ?>', '<?php echo $venta['fecha_edicion'] ? date('d/m/Y', strtotime($venta['fecha_edicion'])) : ''; ?>', '<?php echo $venta['fecha_edicion'] ? date('d/m/Y', strtotime($venta['fecha_edicion'])) : ''; ?>')">
                                            <i class="fas fa-eye"></i> Ver
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary" 
                                                onclick="viewCronogramaVentas(<?php echo $venta['id']; ?>)">
                                            <i class="fas fa-calendar-check"></i> Ver Cronograma
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            
            <?php if (empty($ventas)): ?>
                <div class="text-center py-4">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No se encontraron registros con los criterios de búsqueda</p>
                </div>
            <?php endif; ?>
            
            <!-- Pagination -->
            <?php if ($total_pages > 1): ?>
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted">
                        Mostrando <?php echo ($offset + 1); ?> - <?php echo min($offset + $records_per_page, $total_records); ?> 
                        de <?php echo $total_records; ?> registros
                    </div>
                    
                    <nav aria-label="Navegación de páginas">
                        <ul class="pagination pagination-sm mb-0">
                            <?php if ($page > 1): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => 1])); ?>" aria-label="Primera página">
                                        <i class="fas fa-angle-double-left"></i>
                                    </a>
                                </li>
                            <?php endif; ?>
                            <?php if ($page > 1): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $page - 1])); ?>" aria-label="Página anterior">
                                        <i class="fas fa-angle-left"></i>
                                    </a>
                                </li>
                            <?php endif; ?>
                            <?php
                            $start_page = max(1, $page - 2);
                            $end_page = min($total_pages, $page + 2);
                            if ($start_page > 1): ?>
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            <?php endif; ?>
                            <?php for ($i = $start_page; $i <= $end_page; $i++): ?>
                                <li class="page-item <?php echo ($i == $page) ? 'active' : ''; ?>">
                                    <a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $i])); ?>">
                                        <?php echo $i; ?>
                                    </a>
                                </li>
                            <?php endfor; ?>
                            <?php if ($end_page < $total_pages): ?>
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            <?php endif; ?>
                            <?php if ($page < $total_pages): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $page + 1])); ?>" aria-label="Página siguiente">
                                        <i class="fas fa-angle-right"></i>
                                    </a>
                                </li>
                            <?php endif; ?>
                            <?php if ($page < $total_pages): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?<?php echo http_build_query(array_merge($_GET, ['page' => $total_pages])); ?>" aria-label="Última página">
                                        <i class="fas fa-angle-double-right"></i>
                                    </a>
                                </li>
                            <?php endif; ?>
                        </ul>
                    </nav>
                </div>
            <?php endif; ?>
        </div>
    </div>
    
</div>

<!-- Ver Venta Modal -->
<div class="modal fade" id="verModal" tabindex="-1" aria-labelledby="verModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #1e5631, #2d7a3d); color: white;">
                <h5 class="modal-title" id="verModalLabel">
                    <i class="fas fa-hand-holding-usd"></i> Detalles de Venta
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- Información del Cliente -->
                    <div class="col-md-6">
                        <div class="card mb-3" style="border: 1px solid #1e5631;">
                            <div class="card-header text-white" style="background: linear-gradient(135deg, #1e5631, #2d7a3d);">
                                <h6 class="mb-0"><i class="fas fa-user"></i> Información del Cliente</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-2">
                                    <strong><i class="fas fa-id-card" style="color: #1e5631;"></i> Nombre:</strong>
                                    <span id="ver_nombre" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-id-badge" style="color: #1e5631;"></i> Documento:</strong>
                                    <span id="ver_documento" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-home" style="color: #1e5631;"></i> Dirección:</strong>
                                    <span id="ver_direccion" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-phone" style="color: #1e5631;"></i> Celular:</strong>
                                    <span id="ver_celular" class="ms-2"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Información del Servicio -->
                    <div class="col-md-6">
                        <div class="card mb-3" style="border: 1px solid #2d7a3d;">
                            <div class="card-header text-white" style="background: linear-gradient(135deg, #2d7a3d, #3d8b4d);">
                                <h6 class="mb-0"><i class="fas fa-cogs"></i> Información del Servicio</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-2">
                                    <strong><i class="fas fa-user-tie" style="color: #2d7a3d;"></i> Agente:</strong>
                                    <span id="ver_agente" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-chart-line" style="color: #2d7a3d;"></i> Estado:</strong>
                                    <span id="ver_estado" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-box" style="color: #2d7a3d;"></i> Paquete:</strong>
                                    <span id="ver_paquete" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-wifi" style="color: #2d7a3d;"></i> Tecnología:</strong>
                                    <span id="ver_tecnologia" class="ms-2"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Información de Ubicación -->
                    <div class="col-md-6">
                        <div class="card mb-3" style="border: 1px solid #3d8b4d;">
                            <div class="card-header text-white" style="background: linear-gradient(135deg, #3d8b4d, #4d9b5d);">
                                <h6 class="mb-0"><i class="fas fa-map-marker-alt"></i> Ubicación</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-2">
                                    <strong><i class="fas fa-map" style="color: #3d8b4d;"></i> Departamento:</strong>
                                    <span id="ver_departamento" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-map-pin" style="color: #3d8b4d;"></i> Provincia:</strong>
                                    <span id="ver_provincia" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-map-signs" style="color: #3d8b4d;"></i> Distrito:</strong>
                                    <span id="ver_distrito" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-home" style="color: #3d8b4d;"></i> Dirección:</strong>
                                    <span id="ver_direccion" class="ms-2"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Información de Venta -->
                    <div class="col-md-6">
                        <div class="card mb-3" style="border: 1px solid #4d9b5d;">
                            <div class="card-header text-white" style="background: linear-gradient(135deg, #4d9b5d, #5dab6d);">
                                <h6 class="mb-0"><i class="fas fa-shopping-cart"></i> Información de Venta</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-2">
                                    <strong><i class="fas fa-tag" style="color: #4d9b5d;"></i> Tipo Venta:</strong>
                                    <span id="ver_tipo_venta" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-satellite-dish" style="color: #4d9b5d;"></i> UGIS:</strong>
                                    <span id="ver_ugis" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-tv" style="color: #4d9b5d;"></i> Total Decos:</strong>
                                    <span id="ver_total_decos" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-money-bill" style="color: #4d9b5d;"></i> Cargo Fijo:</strong>
                                    <span id="ver_cargo_fijo" class="ms-2"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fechas -->
                    <div class="col-md-12">
                        <div class="card" style="border: 1px solid #5dab6d;">
                            <div class="card-header text-white" style="background: linear-gradient(135deg, #5dab6d, #6dbb7d);">
                                <h6 class="mb-0"><i class="fas fa-calendar-alt"></i> Fechas</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mb-2">
                                            <strong><i class="fas fa-calendar-plus" style="color: #5dab6d;"></i> Creación:</strong>
                                            <span id="ver_fecha_edicion" class="ms-2"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-2">
                                            <strong><i class="fas fa-calendar-edit" style="color: #5dab6d;"></i> Edición:</strong>
                                            <span id="ver_fecha_edicion" class="ms-2"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-2">
                                            <strong><i class="fas fa-calendar-check" style="color: #5dab6d;"></i> SEC:</strong>
                                            <span id="ver_fecha_sec" class="ms-2"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-2">
                                            <strong><i class="fas fa-calendar-day" style="color: #5dab6d;"></i> Instalación:</strong>
                                            <span id="ver_fecha_instalacion" class="ms-2"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Ver Cronograma (Ventas) -->
<div class="modal fade" id="cronogramaVentasViewModal" tabindex="-1" aria-labelledby="cronogramaVentasViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cronogramaVentasViewModalLabel">
                    <i class="fas fa-calendar-check"></i> Cronograma de Pagos
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="cronogramaVentasViewModalBody">
                <!-- Contenido dinámico -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Código de Pago -->
<div class="modal fade" id="codigoPagoModal" tabindex="-1" aria-labelledby="codigoPagoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="codigoPagoModalLabel"><i class="fas fa-barcode"></i> Actualizar Código de Pago</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="codigoPagoForm">
                    <input type="hidden" name="venta_id" id="cp_venta_id">
                    <div class="mb-3">
                        <label class="form-label">Código de pago</label>
                        <input type="text" class="form-control" name="codigodepago" id="cp_input" maxlength="25" placeholder="Ej. 123456">
                    </div>
                </form>
                <div id="cp_alert" class="alert d-none" role="alert"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times"></i> Cerrar</button>
                <button type="button" class="btn btn-primary" id="cp_save_btn"><i class="fas fa-save"></i> Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Estado -->
<div class="modal fade" id="estadoModal" tabindex="-1" aria-labelledby="estadoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="estadoModalLabel"><i class="fas fa-flag"></i> Actualizar Estado</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="estadoForm">
                    <input type="hidden" name="venta_id" id="est_venta_id">
                    <div class="mb-3">
                        <label class="form-label">Estado</label>
                        <select class="form-select" name="estado" id="est_input" required>
                            <option value="">Seleccionar...</option>
                            <option value="ATENDIDA">ATENDIDA</option>
                            <option value="ACTIVO">ACTIVO</option>
                            <option value="BAJA">BAJA</option>
                            <option value="LIQUIDADO">LIQUIDADO</option>
                        </select>
                    </div>
                </form>
                <div id="est_alert" class="alert d-none" role="alert"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times"></i> Cerrar</button>
                <button type="button" class="btn btn-primary" id="est_save_btn"><i class="fas fa-save"></i> Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Mostrar Clientes Duplicados -->
<div class="modal fade" id="duplicadosVentasModal" tabindex="-1" aria-labelledby="duplicadosVentasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" style="border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
            <div class="modal-header" style="background: linear-gradient(135deg, #FF9800, #F57C00); color: white; border: none;">
                <h5 class="modal-title" id="duplicadosVentasModalLabel">
                    <i class="fas fa-users"></i> Clientes con Documentos Duplicados
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="duplicadosVentasModalBody" style="background: linear-gradient(135deg, #f8f9fa, #ffffff);">
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin fa-2x" style="color: #FF9800;"></i><br>
                    <p style="color: #666;">Cargando clientes duplicados...</p>
                </div>
            </div>
            <div class="modal-footer" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: none;">
                <button type="button" class="btn" onclick="exportarDuplicadosVentas()" id="exportDuplicadosVentasBtn" style="background: linear-gradient(135deg, #4CAF50, #45a049); border: none; color: white; box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3); display: none;">
                    <i class="fas fa-file-excel"></i> Exportar Excel
                </button>
                <button type="button" class="btn" data-bs-dismiss="modal" style="background: linear-gradient(135deg, #6c757d, #5a6268); border: none; color: white; box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);">
                    <i class="fas fa-times"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Estilos para las cabeceras ordenables */
thead th {
    user-select: none;
    cursor: pointer;
    position: relative;
    background: linear-gradient(135deg, #2196F3, #1976D2) !important;
    color: white !important;
}

thead th,
thead th * {
    color: white !important;
}

thead th a {
    color: white !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: all 0.2s ease;
    padding: 0;
}

thead th a span {
    color: white !important;
}

thead th a:hover {
    opacity: 0.9;
    text-decoration: underline !important;
}

thead th a:hover span {
    color: white !important;
}

thead th a:visited {
    color: white !important;
}

thead th a:link {
    color: white !important;
}

thead th a i {
    color: white !important;
    margin-left: 5px;
}

thead th a:hover i {
    color: white !important;
}

/* Asegurar que el fondo de la cabecera sea visible */
thead {
    background: linear-gradient(135deg, #2196F3, #1976D2) !important;
}
</style>

<script>
// Función para abrir modal de código de pago
function openCodigoPagoModal(ventaId, codigoActual) {
    document.getElementById('cp_venta_id').value = ventaId;
    document.getElementById('cp_input').value = (codigoActual && codigoActual !== '-') ? codigoActual : '';
    const alertBox = document.getElementById('cp_alert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    new bootstrap.Modal(document.getElementById('codigoPagoModal')).show();
}

// Función para abrir modal de estado
function openEstadoModal(ventaId, estadoActual) {
    document.getElementById('est_venta_id').value = ventaId;
    document.getElementById('est_input').value = (estadoActual && estadoActual !== '-') ? estadoActual : '';
    const alertBox = document.getElementById('est_alert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    new bootstrap.Modal(document.getElementById('estadoModal')).show();
}

// Función para ver cronograma de ventas
function viewCronogramaVentas(ventaId) {
    const modalBody = document.getElementById('cronogramaVentasViewModalBody');
    modalBody.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-2x"></i><br>Cargando cronograma...</div>';
    const modal = new bootstrap.Modal(document.getElementById('cronogramaVentasViewModal'));
    modal.show();
    fetch(`ajax/get_cronograma_ventas.php?id=${ventaId}`)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            modalBody.innerHTML = data.html;
            // Wire up buttons inside loaded content
            const exportBtn = document.getElementById('ventasExportCronogramaBtn');
            if (exportBtn) {
                exportBtn.addEventListener('click', function(){
                    const id = this.getAttribute('data-venta-id');
                    window.location.href = `ajax/export_cronograma_ventas.php?id=${id}`;
                });
            }
            const aumentarBtn = document.getElementById('ventasAumentarMesesBtn');
            if (aumentarBtn) {
                aumentarBtn.addEventListener('click', function(){
                    openAumentarMesesVentasModal(
                        this.getAttribute('data-venta-id'),
                        this.getAttribute('data-cliente'),
                        this.getAttribute('data-fecha-instalacion')
                    );
                });
            }
            const eliminarBtn = document.getElementById('ventasEliminarUltimaBtn');
            if (eliminarBtn) {
                eliminarBtn.addEventListener('click', function(){
                    eliminarUltimaCuotaVentas(this.getAttribute('data-venta-id'));
                });
            }
        } else {
            modalBody.innerHTML = `<div class="alert alert-danger">Error: ${data.message}</div>`;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        modalBody.innerHTML = '<div class="alert alert-danger">Error al cargar el cronograma</div>';
    });
}

// Modal temporal para aumentar meses (Ventas)
function openAumentarMesesVentasModal(ventaId, clienteNombre, fechaInstalacion) {
    const modalHtml = `
        <div class="modal fade" id="ventasAumentarMesesModal" tabindex="-1" aria-labelledby="ventasAumentarMesesModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ventasAumentarMesesModalLabel">
                            <i class="fas fa-plus"></i> Aumentar Meses al Cronograma
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="ventasCronogramaForm">
                            <input type="hidden" name="venta_id" value="${ventaId}">
                            <input type="hidden" id="ventas_dias_inicio_cobro_hidden" name="dias_inicio_cobro" value="0">
                            <input type="hidden" id="ventas_dias_ultimo_hidden" name="dias_ultimo" value="0">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Cliente:</label>
                                    <input type="text" class="form-control" value="${clienteNombre || ''}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Fecha de Instalación:</label>
                                    <input type="date" class="form-control" id="ventas_fecha_instalacion" value="${fechaInstalacion || ''}" readonly>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Cantidad de Meses a Agregar:</label>
                                    <input type="number" class="form-control" id="ventas_cantidad_meses" name="cantidad_meses" value="12" min="1" max="120" required>
                                    <div class="form-text">Número de meses para agregar al cronograma existente</div>
                                </div>
                            </div>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                <strong>Información:</strong> Se agregarán los meses al final del cronograma existente.
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                        <button type="button" class="btn btn-warning" id="ventasAumentarMesesSaveBtn">
                            <i class="fas fa-plus"></i> Aumentar Meses
                        </button>
                    </div>
                </div>
            </div>
        </div>`;
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    const modal = new bootstrap.Modal(document.getElementById('ventasAumentarMesesModal'));
    modal.show();
    document.getElementById('ventasAumentarMesesModal').addEventListener('hidden.bs.modal', function(){ this.remove(); });
    document.getElementById('ventasAumentarMesesSaveBtn').addEventListener('click', function(){
        const form = document.getElementById('ventasCronogramaForm');
        const formData = new FormData(form);
        const meses = parseInt(document.getElementById('ventas_cantidad_meses').value);
        if (!meses || meses < 1 || meses > 120) {
            alert('Por favor ingrese un número válido de meses (1-120)');
            return;
        }
        const btn = this;
        const original = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Aumentando...';
        btn.disabled = true;
        fetch('ajax/aumentar_meses_cronograma_ventas.php', { method: 'POST', body: formData })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alert(`Se agregaron ${data.meses_agregados} meses al cronograma`);
                    modal.hide();
                    // Refrescar cronograma
                    const ventaIdStr = formData.get('venta_id');
                    if (ventaIdStr) { viewCronogramaVentas(ventaIdStr); }
                } else {
                    alert('Error: ' + (data.message || 'No se pudo aumentar meses'));
                }
            })
            .catch(err => { console.error(err); alert('Error de red'); })
            .finally(() => { btn.innerHTML = original; btn.disabled = false; });
    });
}

function eliminarUltimaCuotaVentas(ventaId) {
    if (!confirm('¿Está seguro de eliminar la última cuota pendiente? Esta acción no se puede deshacer.')) return;
    const form = new FormData();
    form.append('venta_id', ventaId);
    fetch('ajax/eliminar_ultima_cuota_ventas.php', { method: 'POST', body: form })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('Última cuota eliminada correctamente');
                viewCronogramaVentas(ventaId);
            } else {
                alert('Error al eliminar la cuota: ' + (data.message || ''));
            }
        })
        .catch(err => { console.error(err); alert('Error de red'); });
}

// Función para mostrar clientes duplicados
function showDuplicadosVentas() {
    const modalBody = document.getElementById('duplicadosVentasModalBody');
    const exportBtn = document.getElementById('exportDuplicadosVentasBtn');
    
    modalBody.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-2x" style="color: #FF9800;"></i><br><p style="color: #666;">Cargando clientes duplicados...</p></div>';
    
    // Ocultar botón de exportar mientras carga
    if (exportBtn) {
        exportBtn.style.display = 'none';
    }
    
    // Mostrar el modal
    const modal = new bootstrap.Modal(document.getElementById('duplicadosVentasModal'));
    modal.show();
    
    // Cargar los duplicados via AJAX
    fetch('ajax/get_duplicados_ventas.php')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                modalBody.innerHTML = data.html;
                // Mostrar botón de exportar si hay duplicados
                if (exportBtn && data.total > 0) {
                    exportBtn.style.display = 'inline-block';
                }
            } else {
                modalBody.innerHTML = '<div class="alert alert-danger">Error: ' + data.message + '</div>';
                if (exportBtn) {
                    exportBtn.style.display = 'none';
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            modalBody.innerHTML = '<div class="alert alert-danger">Error al cargar los clientes duplicados</div>';
            // Ocultar botón de exportar si hay error
            if (exportBtn) {
                exportBtn.style.display = 'none';
            }
        });
}

// Función para exportar duplicados a Excel
function exportarDuplicadosVentas() {
    window.location.href = 'export_duplicados_ventas.php';
}

// Función para ver el detalle de un registro específico
function verDetalleRegistroVenta(ventaId) {
    // Cerrar el modal de duplicados
    const duplicadosModal = bootstrap.Modal.getInstance(document.getElementById('duplicadosVentasModal'));
    if (duplicadosModal) duplicadosModal.hide();
    
    // Buscar el registro en la tabla principal
    const filas = document.querySelectorAll('tbody tr');
    for (let fila of filas) {
        const idCell = fila.querySelector('td:first-child');
        if (idCell && idCell.textContent.trim() === ventaId.toString()) {
            // Resaltar la fila
            fila.style.backgroundColor = '#fff3cd';
            fila.style.border = '2px solid #ffc107';
            
            // Scroll a la fila
            fila.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            // Quitar el resaltado después de 3 segundos
            setTimeout(() => {
                fila.style.backgroundColor = '';
                fila.style.border = '';
            }, 3000);
            break;
        }
    }
}

// Función para abrir modal de ver detalles
function openVerModal(ventaId, nombre, documento, tipoDocumento, direccion, celular, agente, estado, paquete, tecnologia, tipoVenta, ugis, totalDecos, fullClaro, cargoFijo, departamento, provincia, distrito, direccionCompleta, sec, fechaSec, sot, fechaInstalacion, estadoSot, fechaCreacion, fechaEdicion) {
    // Populate modal fields
    document.getElementById('ver_nombre').textContent = nombre || '-';
    document.getElementById('ver_documento').textContent = (tipoDocumento ? tipoDocumento + ': ' : '') + (documento || '-');
    document.getElementById('ver_direccion').textContent = direccion || '-';
    document.getElementById('ver_celular').textContent = celular || '-';
    
    document.getElementById('ver_agente').textContent = agente || '-';
    document.getElementById('ver_estado').textContent = estado || '-';
    document.getElementById('ver_paquete').textContent = paquete || '-';
    document.getElementById('ver_tecnologia').textContent = tecnologia || '-';
    
    document.getElementById('ver_departamento').textContent = departamento || '-';
    document.getElementById('ver_provincia').textContent = provincia || '-';
    document.getElementById('ver_distrito').textContent = distrito || '-';
    document.getElementById('ver_direccion').textContent = direccionCompleta || '-';
    
    document.getElementById('ver_tipo_venta').textContent = tipoVenta || '-';
    document.getElementById('ver_ugis').textContent = ugis || '-';
    document.getElementById('ver_total_decos').textContent = totalDecos || '-';
    document.getElementById('ver_cargo_fijo').textContent = cargoFijo ? 'S/ ' + cargoFijo : '-';
    
    document.getElementById('ver_fecha_creacion').textContent = fechaCreacion || '-';
    document.getElementById('ver_fecha_edicion').textContent = fechaEdicion || '-';
    document.getElementById('ver_fecha_sec').textContent = fechaSec || '-';
    document.getElementById('ver_fecha_instalacion').textContent = fechaInstalacion || '-';
    
    // Show modal
    new bootstrap.Modal(document.getElementById('verModal')).show();
}

// Event listeners para los botones de guardar
document.addEventListener('click', function(e) {
    if (e.target && e.target.id === 'cp_save_btn') {
        const alertBox = document.getElementById('cp_alert');
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');

        const form = document.getElementById('codigoPagoForm');
        const formData = new FormData(form);

        fetch('ajax/update_codigodepago_ventas.php', { method: 'POST', body: formData })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alertBox.textContent = 'Código actualizado correctamente';
                    alertBox.classList.remove('d-none');
                    alertBox.classList.add('alert-success');
                    const id = document.getElementById('cp_venta_id').value;
                    document.getElementById('cp_txt_' + id).textContent = data.codigodepago || '-';
                    setTimeout(() => {
                        const modalEl = document.getElementById('codigoPagoModal');
                        const modalInstance = bootstrap.Modal.getInstance(modalEl);
                        if (modalInstance) modalInstance.hide();
                    }, 600);
                } else {
                    alertBox.textContent = data.message || 'Error al actualizar';
                    alertBox.classList.remove('d-none');
                    alertBox.classList.add('alert-danger');
                }
            })
            .catch(err => {
                console.error(err);
                alertBox.textContent = 'Error de red';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-danger');
            });
    }
    
    if (e.target && e.target.id === 'est_save_btn') {
        const alertBox = document.getElementById('est_alert');
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');

        const form = document.getElementById('estadoForm');
        const formData = new FormData(form);

        fetch('ajax/update_estado_ventas.php', { method: 'POST', body: formData })
            .then(r => {
                // Verificar que la respuesta sea OK
                if (!r.ok) {
                    throw new Error('Error en la respuesta del servidor');
                }
                // Intentar parsear como JSON
                return r.text().then(text => {
                    try {
                        return JSON.parse(text);
                    } catch (e) {
                        // Si no es JSON válido, pero la respuesta fue OK, asumir éxito
                        console.warn('Respuesta no es JSON válido, pero el servidor respondió OK');
                        return { success: true, estado: formData.get('estado') };
                    }
                });
            })
            .then(data => {
                if (data.success) {
                    // Actualizar el badge del estado en la tabla
                    const id = document.getElementById('est_venta_id').value;
                    const estadoTxt = document.getElementById('estado_txt_' + id);
                    if (estadoTxt) {
                        estadoTxt.textContent = data.estado || formData.get('estado');
                        // Actualizar la clase del badge según el nuevo estado
                        estadoTxt.className = 'badge ';
                        switch(strtoupper(data.estado || formData.get('estado'))) {
                            case 'ATENDIDA':
                                estadoTxt.className += 'bg-success';
                                break;
                            case 'ACTIVO':
                                estadoTxt.className += 'bg-warning';
                                break;
                            default:
                                estadoTxt.className += 'bg-secondary';
                        }
                    }
                    
                    // Cerrar modal y recargar la página para mostrar solo los registros correspondientes
                    const modalEl = document.getElementById('estadoModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                    // Recargar la página para actualizar la vista con los filtros aplicados
                    window.location.reload();
                } else {
                    alertBox.textContent = data.message || 'Error al actualizar';
                    alertBox.classList.remove('d-none');
                    alertBox.classList.add('alert-danger');
                }
            })
            .catch(err => {
                console.error(err);
                // Solo mostrar error si realmente hay un problema de red
                // Si la actualización fue exitosa pero hay un problema de parseo, recargar igual
                const modalEl = document.getElementById('estadoModal');
                const modalInstance = bootstrap.Modal.getInstance(modalEl);
                if (modalInstance) modalInstance.hide();
                // Recargar la página de todas formas, ya que el usuario dice que sí actualiza
                window.location.reload();
            });
    }
    
});

// Auto-submit form when per_page changes to reset to page 1
const perPageSelect = document.querySelector('select[name="per_page"]');
if (perPageSelect) {
    perPageSelect.addEventListener('change', function() {
        const pageInput = document.createElement('input');
        pageInput.type = 'hidden';
        pageInput.name = 'page';
        pageInput.value = '1';
        this.form.appendChild(pageInput);
        this.form.submit();
    });
}

// Auto-submit form when fecha_inicio or fecha_final changes
const fechaInicioInput = document.getElementById('fecha_inicio_input');
const fechaFinalInput = document.getElementById('fecha_final_input');

if (fechaInicioInput) {
    fechaInicioInput.addEventListener('change', function() {
        // Validar que fecha_inicio no sea mayor que fecha_final
        const fechaFinal = document.getElementById('fecha_final_input').value;
        if (fechaFinal && this.value > fechaFinal) {
            alert('La fecha de inicio no puede ser mayor que la fecha final');
            this.value = '';
            return;
        }
        // Reset to page 1 when changing fecha filter
        const pageInput = document.createElement('input');
        pageInput.type = 'hidden';
        pageInput.name = 'page';
        pageInput.value = '1';
        this.form.appendChild(pageInput);
        this.form.submit();
    });
}

if (fechaFinalInput) {
    fechaFinalInput.addEventListener('change', function() {
        // Validar que fecha_final no sea menor que fecha_inicio
        const fechaInicio = document.getElementById('fecha_inicio_input').value;
        if (fechaInicio && this.value < fechaInicio) {
            alert('La fecha final no puede ser menor que la fecha de inicio');
            this.value = '';
            return;
        }
        // Reset to page 1 when changing fecha filter
        const pageInput = document.createElement('input');
        pageInput.type = 'hidden';
        pageInput.name = 'page';
        pageInput.value = '1';
        this.form.appendChild(pageInput);
        this.form.submit();
    });
}

function exportVentas(e) {
    e.preventDefault();
    const params = new URLSearchParams(window.location.search);
    // Exporta con filtros actuales pero sin paginación
    params.delete('page');
    params.delete('per_page');
    params.set('tipo', 'liquidados'); // Indicar que es exportación de liquidados
    const url = 'export_ventas_importadas.php?' + params.toString();
    window.location.href = url;
}
</script>

<?php
include_once 'includes/footer.php';
?>


