<?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']) : '';
    $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;
    
    // 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;
    }
    
    $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 con información de morosidad
    $query = "SELECT v.*, 
                     c.codcronogramaventas as primer_pendiente_id,
                     c.fechapago as primer_pendiente_fecha,
                     c.estado as primer_pendiente_estado,
                     CASE 
                         WHEN c.fechapago IS NOT NULL AND c.fechapago <= CURDATE() THEN DATEDIFF(CURDATE(), c.fechapago)
                         WHEN c.fechapago IS NOT NULL AND c.fechapago > CURDATE() THEN DATEDIFF(CURDATE(), c.fechapago)
                         ELSE NULL
                     END as dias_morosidad
              FROM timportventas v
              LEFT JOIN (
                  SELECT cv1.id, 
                         cv1.codcronogramaventas, 
                         cv1.fechapago, 
                         cv1.estado
                  FROM tcronogramaventas cv1
                  INNER JOIN (
                      SELECT id, 
                             MIN(CASE 
                                 WHEN fechapago IS NOT NULL THEN fechapago 
                                 ELSE '9999-12-31' 
                             END) as min_fecha
                      FROM tcronogramaventas
                      WHERE (estado = 'PENDIENTE' OR estado IS NULL OR estado = '')
                        AND fechapago IS NOT NULL
                      GROUP BY id
                  ) cv2 ON cv1.id = cv2.id 
                      AND CASE 
                          WHEN cv1.fechapago IS NOT NULL THEN cv1.fechapago 
                          ELSE '9999-12-31' 
                      END = cv2.min_fecha
                  WHERE (cv1.estado = 'PENDIENTE' OR cv1.estado IS NULL OR cv1.estado = '')
                      AND cv1.fechapago IS NOT NULL
              ) c ON v.id = c.id
              WHERE 1=1 AND v.estado = 'ACTIVO'";
    $params = [];
    
    // Filtrar por empresa del usuario logueado
    if ($codempresaUsuario) {
        $query .= " AND v.codempresa = ?";
        $params[] = $codempresaUsuario;
    }
    
    if ($search) {
        $query .= " AND (v.nro_documento LIKE ? OR v.nombres_ap_raz_soc LIKE ?)";
        $searchTerm = "%{$search}%";
        $params[] = $searchTerm;
        $params[] = $searchTerm;
    }
    
    $query .= " ORDER BY v.fecha_creacion DESC, v.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;
}
?>

<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> Cobranza Fija
            </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>
            <button type="button" class="btn me-2" onclick="openNuevoVentaModal()" 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-plus"></i> Nuevo
            </button>
            <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="combranzaventas.php" class="row g-3 align-items-end">
                <div class="col-md-6">
                    <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">
                    <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'])): ?>
                        <a href="combranzaventas.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>

    <!-- Barra de Acciones Masivas -->
    <div class="card mb-4" id="bulkActionsBar" style="background: linear-gradient(135deg, #ffc107, #ff9800); border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: none;">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <span class="badge bg-dark fs-6" id="selectedCount">0</span>
                    <span class="ms-2 text-white fw-bold">registros seleccionados</span>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-warning" onclick="openBulkEstadoModal()" id="bulkEstadoBtn" disabled>
                        <i class="fas fa-flag"></i> Actualizar Estado
                    </button>
                    <button type="button" class="btn btn-secondary" onclick="clearSelection()">
                        <i class="fas fa-times"></i> Limpiar Selección
                    </button>
                </div>
            </div>
        </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;"><i class="fas fa-hashtag"></i> ID</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-barcode"></i> Código Pago</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-user"></i> Cliente</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-id-card"></i> Documento</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-user-tie"></i> Agente</th>
                            <th style="border: none; padding: 15px;">
                                <div class="d-flex align-items-center justify-content-between">
                                    <span><i class="fas fa-flag"></i> Estado</span>
                                    <input type="checkbox" id="selectAll" class="form-check-input" style="transform: scale(1.2);">
                                </div>
                            </th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-exclamation-triangle"></i> Morosidad</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-box"></i> Paquete</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-calendar"></i> Fecha Creación</th>
                            <th style="border: none; padding: 15px;"><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">
                                        <input type="checkbox" class="form-check-input row-checkbox" value="<?php echo $venta['id']; ?>" style="transform: scale(1.1);">
                                        <?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>
                                    <?php
                                    $diasMorosidad = isset($venta['dias_morosidad']) ? (int)$venta['dias_morosidad'] : null;
                                    $tienePendiente = isset($venta['primer_pendiente_fecha']) && $venta['primer_pendiente_fecha'] !== null;
                                    
                                    if ($tienePendiente && $diasMorosidad !== null) {
                                        // Calcular porcentaje de morosidad (máximo 60 días para 100%)
                                        $porcentaje = min(100, max(0, ($diasMorosidad / 60) * 100));
                                        
                                        // Determinar color según días de morosidad
                                        $colorBarra = '';
                                        $colorTexto = '';
                                        $textoEstado = '';
                                        
                                        if ($diasMorosidad < 0) {
                                            // Al día (fecha futura)
                                            $colorBarra = '#28a745'; // Verde
                                            $colorTexto = '#155724';
                                            $diasFaltantes = abs($diasMorosidad);
                                            $textoEstado = 'Al día (' . $diasFaltantes . ' día' . ($diasFaltantes > 1 ? 's' : '') . ')';
                                            $porcentaje = 0;
                                        } elseif ($diasMorosidad == 0) {
                                            // Vence hoy
                                            $colorBarra = '#ffc107'; // Amarillo
                                            $colorTexto = '#856404';
                                            $textoEstado = 'Vence hoy';
                                            $porcentaje = 10;
                                        } elseif ($diasMorosidad <= 7) {
                                            // Morosidad leve (1-7 días)
                                            $colorBarra = '#ffc107'; // Amarillo
                                            $colorTexto = '#856404';
                                            $textoEstado = $diasMorosidad . ' día' . ($diasMorosidad > 1 ? 's' : '');
                                            $porcentaje = min(30, ($diasMorosidad / 7) * 30);
                                        } elseif ($diasMorosidad <= 30) {
                                            // Morosidad moderada (8-30 días)
                                            $colorBarra = '#fd7e14'; // Naranja
                                            $colorTexto = '#7c2d12';
                                            $textoEstado = $diasMorosidad . ' días';
                                            $porcentaje = min(70, 30 + (($diasMorosidad - 7) / 23) * 40);
                                        } else {
                                            // Morosidad alta (>30 días)
                                            $colorBarra = '#dc3545'; // Rojo
                                            $colorTexto = '#721c24';
                                            $textoEstado = $diasMorosidad . ' días';
                                            $porcentaje = min(100, 70 + (($diasMorosidad - 30) / 30) * 30);
                                        }
                                        
                                        // Mostrar barra de progreso
                                        echo '<div style="min-width: 120px;">';
                                        echo '<div class="progress" style="height: 25px; margin-bottom: 5px;">';
                                        echo '<div class="progress-bar" role="progressbar" style="width: ' . $porcentaje . '%; background-color: ' . $colorBarra . '; color: ' . $colorTexto . '; font-weight: bold; font-size: 11px; display: flex; align-items: center; justify-content: center;" ';
                                        echo 'title="' . htmlspecialchars($textoEstado . ' de morosidad') . '">';
                                        echo htmlspecialchars($textoEstado);
                                        echo '</div>';
                                        echo '</div>';
                                        echo '<small style="color: ' . $colorTexto . '; font-weight: bold;">';
                                        echo 'Vence: ' . ($venta['primer_pendiente_fecha'] ? date('d/m/Y', strtotime($venta['primer_pendiente_fecha'])) : '-');
                                        echo '</small>';
                                        echo '</div>';
                                    } else {
                                        // Sin pendientes o al día
                                        echo '<div style="min-width: 120px;">';
                                        echo '<div class="progress" style="height: 25px;">';
                                        echo '<div class="progress-bar" role="progressbar" style="width: 100%; background-color: #28a745; color: #fff; font-weight: bold; font-size: 11px; display: flex; align-items: center; justify-content: center;" title="Sin morosidad">';
                                        echo 'Al día';
                                        echo '</div>';
                                        echo '</div>';
                                        echo '</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_creacion'] ? date('d/m/Y', strtotime($venta['fecha_creacion'])) : '-'; ?>
                                </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_creacion'] ? date('d/m/Y', strtotime($venta['fecha_creacion'])) : ''; ?>', '<?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>

<!-- 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>

<!-- 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_creacion" 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 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 Actualización Masiva de Estado -->
<div class="modal fade" id="bulkEstadoModal" tabindex="-1" aria-labelledby="bulkEstadoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkEstadoModalLabel">
                    <i class="fas fa-flag"></i> Actualizar Estado Masivamente
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bulkEstadoForm">
                    <div class="mb-3">
                        <label class="form-label">Nuevo Estado</label>
                        <select class="form-select" name="estado" id="bulk_estado" required>
                            <option value="">Seleccionar...</option>
                            <option value="ATENDIDA">ATENDIDA</option>
                            <option value="ACTIVO">ACTIVO</option>
                            <option value="BAJA">BAJA</option>
                        </select>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Información:</strong> Se actualizará el estado de <span id="bulkEstadoCount">0</span> registros seleccionados.
                    </div>
                </form>
                <div id="bulkEstadoAlert" 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> Cancelar
                </button>
                <button type="button" class="btn btn-warning" id="bulkEstadoSaveBtn">
                    <i class="fas fa-save"></i> Actualizar Estado
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Cronograma Ventas -->
<div class="modal fade" id="cronogramaEditVentasModal" tabindex="-1" aria-labelledby="cronogramaEditVentasModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cronogramaEditVentasModalLabel"><i class="fas fa-edit"></i> Cobrar Mensualidad</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="cronogramaEditVentasForm">
                    <input type="hidden" name="codcronogramaventas" id="edit_ventas_codcronogramaventas">
                    <input type="hidden" name="venta_id" id="edit_ventas_venta_id">
                    <div class="mb-3">
                        <label class="form-label">Monto (S/)</label>
                        <input type="number" step="0.01" min="0" class="form-control" name="monto" id="edit_ventas_monto" placeholder="Monto a cobrar">
                        <div class="form-text">Se carga por defecto el cargo fijo del cliente</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Fecha pagada</label>
                        <input type="date" class="form-control" name="pagadofecha" id="edit_ventas_pagadofecha">
                        <div class="form-text">Se carga por defecto la fecha actual</div>
                    </div>
                </form>
                <div id="cronogramaEditVentasAlert" 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="cronogramaEditVentasSaveBtn"><i class="fas fa-save"></i> Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Notas Cronograma Ventas -->
<div class="modal fade" id="notasVentasModal" tabindex="-1" aria-labelledby="notasVentasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="notasVentasModalLabel">
                    <i class="fas fa-comment"></i> Notas de Cuota <span id="notasVentasCuotaNumero"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Área para mostrar notas existentes -->
                <div id="notasVentasContainer">
                    <div class="text-center py-4">
                        <i class="fas fa-spinner fa-spin fa-2x"></i><br>
                        <p class="text-muted">Cargando notas...</p>
                    </div>
                </div>
                
                <!-- Formulario para agregar nueva nota -->
                <hr>
                <form id="nuevaNotaVentasForm">
                    <input type="hidden" id="nota_ventas_codcronogramaventas" name="codcronogramaventas">
                    <input type="hidden" id="nota_ventas_venta_id" name="venta_id">
                    <div class="mb-3">
                        <label class="form-label">Nueva Nota</label>
                        <textarea class="form-control" name="nota" id="nueva_nota_ventas" rows="3" 
                                  placeholder="Escriba su nota aquí..." maxlength="300" required></textarea>
                        <div class="form-text">Máximo 300 caracteres</div>
                    </div>
                </form>
                <div id="notaVentasAlert" 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="guardarNotaVentasBtn">
                    <i class="fas fa-save"></i> Guardar Nota
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nuevo Venta -->
<div class="modal fade" id="nuevoVentaModal" tabindex="-1" aria-labelledby="nuevoVentaModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #2196F3, #1976D2); color: white;">
                <h5 class="modal-title" id="nuevoVentaModalLabel">
                    <i class="fas fa-plus"></i> Nueva Venta
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="nuevoVentaForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef);">
                                    <h6 class="mb-0"><i class="fas fa-user"></i> Información del Cliente</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">Nombres/Apellidos/Razón Social *</label>
                                        <input type="text" class="form-control" name="nombres_ap_raz_soc" id="nuevo_nombres_ap_raz_soc" maxlength="300" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tipo de Documento *</label>
                                        <select class="form-select" name="tipo_documento" id="nuevo_tipo_documento" required>
                                            <option value="">Seleccionar...</option>
                                            <option value="DNI">DNI</option>
                                            <option value="RUC">RUC</option>
                                            <option value="CE">CE</option>
                                            <option value="PASAPORTE">PASAPORTE</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Número de Documento *</label>
                                        <input type="text" class="form-control" name="nro_documento" id="nuevo_nro_documento" maxlength="20" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Correo</label>
                                        <input type="email" class="form-control" name="correo" id="nuevo_correo" maxlength="200">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Celular</label>
                                        <input type="text" class="form-control" name="celular" id="nuevo_celular" maxlength="20">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef);">
                                    <h6 class="mb-0"><i class="fas fa-cogs"></i> Información del Servicio</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">Agente</label>
                                        <input type="text" class="form-control" name="agente" id="nuevo_agente" maxlength="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Estado</label>
                                        <select class="form-select" name="estado" id="nuevo_estado">
                                            <option value="">Seleccionar...</option>
                                            <option value="ATENDIDA">ATENDIDA</option>
                                            <option value="ACTIVO">ACTIVO</option>
                                            <option value="BAJA">BAJA</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Paquete Contratado</label>
                                        <input type="text" class="form-control" name="paquete_contratado" id="nuevo_paquete_contratado" maxlength="300">
                                    </div>
                                    

                                    <div class="mb-3">
                                        <label class="form-label">Tipo de Venta</label>
                                        <select class="form-select" name="tipo_venta" id="nuevo_tipo_venta">
                                            <option value="">Seleccionar...</option>
                                            <option value="ALTA">ALTA</option>
                                            <option value="PORTABILIDAD">PORTABILIDAD</option>
                                            
                                        </select>
                                    </div>


                                   
                                    <div class="mb-3">
                                        <label class="form-label">Tecnología</label>
                                        <select class="form-select" name="tecnologia" id="nuevo_tecnologia">
                                            <option value="">Seleccionar...</option>
                                            <option value="FTTH">FTTH</option>
                                            <option value="IFI">IFI</option>
                                            <option value="HFC">HFC</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef);">
                                    <h6 class="mb-0"><i class="fas fa-map-marker-alt"></i> Ubicación</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">Departamento</label>
                                        <input type="text" class="form-control" name="departamento" id="nuevo_departamento" maxlength="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Provincia</label>
                                        <input type="text" class="form-control" name="provincia" id="nuevo_provincia" maxlength="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Distrito</label>
                                        <input type="text" class="form-control" name="distrito" id="nuevo_distrito" maxlength="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Dirección</label>
                                        <textarea class="form-control" name="direccion" id="nuevo_direccion" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef);">
                                    <h6 class="mb-0"><i class="fas fa-shopping-cart"></i> Información de Venta</h6>
                                </div>
                                <div class="card-body">
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Total Decos</label>
                                        <input type="number" class="form-control" name="total_decos" id="nuevo_total_decos" min="0">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Cargo Fijo (S/)</label>
                                        <input type="number" step="0.01" min="0" class="form-control" name="cargo_fijo" id="nuevo_cargo_fijo">
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa, #e9ecef);">
                                    <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-3">
                                                <label class="form-label">Fecha Atendida</label>
                                                <input type="date" class="form-control" name="fecha_instalacion" id="nuevo_fecha_instalacion">
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label class="form-label">Código de Pago</label>
                                                <input type="text" class="form-control" name="codigodepago" id="nuevo_codigodepago" maxlength="25">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div id="nuevoVentaAlert" 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> Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="nuevoVentaSaveBtn">
                    <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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar funcionalidad de selección múltiple
    initializeBulkSelection();
});

// Funciones para manejo de selección múltiple
function initializeBulkSelection() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const rowCheckboxes = document.querySelectorAll('.row-checkbox');
    const bulkActionsBar = document.getElementById('bulkActionsBar');
    const selectedCountSpan = document.getElementById('selectedCount');
    const bulkEstadoBtn = document.getElementById('bulkEstadoBtn');
    
    if (!selectAllCheckbox) return;
    
    // Event listener para "Seleccionar todo"
    selectAllCheckbox.addEventListener('change', function() {
        rowCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateBulkActions();
    });
    
    // Event listeners para checkboxes individuales
    rowCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectAllState();
            updateBulkActions();
        });
    });
    
    function updateSelectAllState() {
        const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
        const totalBoxes = rowCheckboxes.length;
        
        if (checkedBoxes.length === 0) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = false;
        } else if (checkedBoxes.length === totalBoxes) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = true;
        } else {
            selectAllCheckbox.indeterminate = true;
            selectAllCheckbox.checked = false;
        }
    }
    
    function updateBulkActions() {
        const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
        const count = checkedBoxes.length;
        
        selectedCountSpan.textContent = count;
        
        if (count > 0) {
            bulkActionsBar.style.display = 'block';
            bulkEstadoBtn.disabled = false;
        } else {
            bulkActionsBar.style.display = 'none';
            bulkEstadoBtn.disabled = true;
        }
    }
}

// Función para limpiar selección
function clearSelection() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const rowCheckboxes = document.querySelectorAll('.row-checkbox');
    const bulkActionsBar = document.getElementById('bulkActionsBar');
    const selectedCountSpan = document.getElementById('selectedCount');
    const bulkEstadoBtn = document.getElementById('bulkEstadoBtn');
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = false;
        selectAllCheckbox.indeterminate = false;
    }
    
    rowCheckboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    
    if (selectedCountSpan) selectedCountSpan.textContent = '0';
    if (bulkActionsBar) bulkActionsBar.style.display = 'none';
    if (bulkEstadoBtn) bulkEstadoBtn.disabled = true;
}

// Función para obtener IDs seleccionados
function getSelectedIds() {
    const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
    return Array.from(checkedBoxes).map(checkbox => checkbox.value);
}

// Función para abrir modal de actualización masiva de estado
function openBulkEstadoModal() {
    const selectedIds = getSelectedIds();
    if (selectedIds.length === 0) {
        alert('No hay registros seleccionados');
        return;
    }
    
    document.getElementById('bulkEstadoCount').textContent = selectedIds.length;
    document.getElementById('bulk_estado').value = '';
    
    const alertBox = document.getElementById('bulkEstadoAlert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    
    new bootstrap.Modal(document.getElementById('bulkEstadoModal')).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 abrir modal de editar cronograma ventas
function openEditCronogramaVentasModal(codcronogramaventas, ventaId, currentMonto = '', currentFecha = '', cargoFijo = '') {
    document.getElementById('edit_ventas_codcronogramaventas').value = codcronogramaventas;
    document.getElementById('edit_ventas_venta_id').value = ventaId;
    
    // Si no hay monto actual, usar cargo_fijo como default
    const montoValue = currentMonto || cargoFijo || '';
    document.getElementById('edit_ventas_monto').value = montoValue;
    
    // Si no hay fecha actual, usar fecha de hoy como default
    const fechaValue = currentFecha || new Date().toISOString().split('T')[0];
    document.getElementById('edit_ventas_pagadofecha').value = fechaValue;
    
    const alertBox = document.getElementById('cronogramaEditVentasAlert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    
    new bootstrap.Modal(document.getElementById('cronogramaEditVentasModal')).show();
}

// Función para abrir modal de notas ventas
function openNotasVentasModal(codcronogramaventas, ventaId, cuotaNumero) {
    document.getElementById('nota_ventas_codcronogramaventas').value = codcronogramaventas;
    document.getElementById('nota_ventas_venta_id').value = ventaId;
    document.getElementById('notasVentasCuotaNumero').textContent = cuotaNumero;
    document.getElementById('nueva_nota_ventas').value = '';
    
    const alertBox = document.getElementById('notaVentasAlert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    
    const notasContainer = document.getElementById('notasVentasContainer');
    notasContainer.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-2x"></i><br><p class="text-muted">Cargando notas...</p></div>';
    
    new bootstrap.Modal(document.getElementById('notasVentasModal')).show();
    
    cargarNotasVentas(codcronogramaventas);
}

// Función para cargar notas existentes ventas
function cargarNotasVentas(codcronogramaventas) {
    fetch(`ajax/get_notas_cronograma_ventas.php?codcronogramaventas=${codcronogramaventas}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('notasVentasContainer').innerHTML = data.html;
            } else {
                document.getElementById('notasVentasContainer').innerHTML = 
                    '<div class="alert alert-danger">Error al cargar las notas: ' + data.message + '</div>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('notasVentasContainer').innerHTML = 
                '<div class="alert alert-danger">Error al cargar las notas</div>';
        });
}

// 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 abrir modal de nueva venta
function openNuevoVentaModal() {
    // Limpiar formulario
    document.getElementById('nuevoVentaForm').reset();
    // Limpiar alertas
    const alertBox = document.getElementById('nuevoVentaAlert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    // Mostrar modal
    new bootstrap.Modal(document.getElementById('nuevoVentaModal')).show();
}

// 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) {
                    // Cerrar modal y recargar la página inmediatamente sin mostrar mensajes
                    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();
            });
    }
    
    if (e.target && e.target.id === 'bulkEstadoSaveBtn') {
        const selectedIds = getSelectedIds();
        const estado = document.getElementById('bulk_estado').value;
        const alertBox = document.getElementById('bulkEstadoAlert');
        
        if (!estado) {
            alert('Por favor seleccione un estado');
            return;
        }
        
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');
        
        const formData = new FormData();
        formData.append('ids', JSON.stringify(selectedIds));
        formData.append('estado', estado);
        
        fetch('ajax/bulk_update_estado_ventas.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alertBox.textContent = `Estado actualizado correctamente en ${data.updated_count} registros`;
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-success');
                
                // Actualizar los estados en la tabla
                selectedIds.forEach(id => {
                    const estadoElement = document.getElementById('estado_txt_' + id);
                    if (estadoElement) {
                        estadoElement.textContent = estado;
                        estadoElement.className = 'badge ';
                        switch(estado) {
                            case 'ATENDIDA':
                                estadoElement.className += 'bg-success';
                                break;
                            case 'ACTIVO':
                                estadoElement.className += 'bg-warning';
                                break;
                            default:
                                estadoElement.className += 'bg-secondary';
                        }
                    }
                });
                
                setTimeout(() => {
                    const modalEl = document.getElementById('bulkEstadoModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                    clearSelection();
                }, 1500);
            } else {
                alertBox.textContent = data.message || 'Error al actualizar estados';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alertBox.textContent = 'Error de red o del servidor';
            alertBox.classList.remove('d-none');
            alertBox.classList.add('alert-danger');
        });
    }
    
    // Event listener para guardar cronograma ventas
    if (e.target && e.target.id === 'cronogramaEditVentasSaveBtn') {
        const alertBox = document.getElementById('cronogramaEditVentasAlert');
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');

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

        fetch('ajax/update_cronograma_ventas.php', {
            method: 'POST',
            body: formData
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alertBox.textContent = 'Actualizado correctamente';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-success');

                // Refrescar cronograma en el modal principal
                const ventaId = document.getElementById('edit_ventas_venta_id').value;
                fetch(`ajax/get_cronograma_ventas.php?id=${ventaId}`)
                    .then(res => res.json())
                    .then(d => {
                        if (d.success) {
                            document.getElementById('cronogramaVentasViewModalBody').innerHTML = d.html;
                            // Re-wire buttons after refresh
                            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'));
                                });
                            }
                        }
                    });

                // Cerrar el modal de edición después de un breve delay
                setTimeout(() => {
                    const modalEl = document.getElementById('cronogramaEditVentasModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                }, 700);
            } 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 o del servidor';
            alertBox.classList.remove('d-none');
            alertBox.classList.add('alert-danger');
        });
    }
    
    // Event listener para guardar nota ventas
    if (e.target && e.target.id === 'guardarNotaVentasBtn') {
        const form = document.getElementById('nuevaNotaVentasForm');
        const formData = new FormData(form);
        const alertBox = document.getElementById('notaVentasAlert');
        
        // Limpiar alertas
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');
        
        // Validar que hay texto
        const nota = document.getElementById('nueva_nota_ventas').value.trim();
        if (!nota) {
            alertBox.textContent = 'Por favor escriba una nota';
            alertBox.classList.remove('d-none');
            alertBox.classList.add('alert-danger');
            return;
        }
        
        // Mostrar loading en el botón
        const btn = e.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
        btn.disabled = true;
        
        fetch('ajax/save_nota_cronograma_ventas.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alertBox.textContent = 'Nota guardada correctamente';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-success');
                
                // Limpiar el formulario
                document.getElementById('nueva_nota_ventas').value = '';
                
                // Recargar las notas
                const codcronogramaventas = document.getElementById('nota_ventas_codcronogramaventas').value;
                cargarNotasVentas(codcronogramaventas);
            } else {
                alertBox.textContent = data.message || 'Error al guardar la nota';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alertBox.textContent = 'Error de red o del servidor';
            alertBox.classList.remove('d-none');
            alertBox.classList.add('alert-danger');
        })
        .finally(() => {
            // Restaurar el botón
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }
    
    // Event listener para guardar nueva venta
    if (e.target && e.target.id === 'nuevoVentaSaveBtn') {
        const form = document.getElementById('nuevoVentaForm');
        const formData = new FormData(form);
        const alertBox = document.getElementById('nuevoVentaAlert');
        
        // Limpiar alertas
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');
        
        // Validar campos requeridos
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        
        // Mostrar loading en el botón
        const btn = e.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
        btn.disabled = true;
        
        fetch('ajax/save_venta.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alertBox.textContent = 'Venta guardada correctamente';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-success');
                
                // Limpiar el formulario
                form.reset();
                
                // Cerrar modal después de un breve delay
                setTimeout(() => {
                    const modalEl = document.getElementById('nuevoVentaModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                    // Recargar la página para mostrar el nuevo registro
                    window.location.reload();
                }, 1500);
            } else {
                alertBox.textContent = data.message || 'Error al guardar la venta';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alertBox.textContent = 'Error de red o del servidor';
            alertBox.classList.remove('d-none');
            alertBox.classList.add('alert-danger');
        })
        .finally(() => {
            // Restaurar el botón
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }
});

// 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();
    });
}

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');
    const url = 'export_ventas_importadas.php?' + params.toString();
    window.location.href = url;
}
</script>

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


