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

// (Removed) Cobranza AJAX endpoint

include_once 'includes/header.php';

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

// (Cobranza legacy removed)

// Fetch equipment records with search
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 equipment records for pagination
    $count_query = "SELECT COUNT(*) as total FROM timportequipos 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 equipment records for current page con información de morosidad
    $query = "SELECT e.*, 
                     c.codcronogramaequipo 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 timportequipos e
              LEFT JOIN (
                  SELECT ce1.ID, 
                         ce1.codcronogramaequipo, 
                         ce1.fechapago, 
                         ce1.estado
                  FROM tcronogramaequipo ce1
                  INNER JOIN (
                      SELECT ID, 
                             MIN(CASE 
                                 WHEN fechapago IS NOT NULL THEN fechapago 
                                 ELSE '9999-12-31' 
                             END) as min_fecha
                      FROM tcronogramaequipo
                      WHERE (estado = 'PENDIENTE' OR estado IS NULL OR estado = '')
                        AND fechapago IS NOT NULL
                      GROUP BY ID
                  ) ce2 ON ce1.ID = ce2.ID 
                      AND CASE 
                          WHEN ce1.fechapago IS NOT NULL THEN ce1.fechapago 
                          ELSE '9999-12-31' 
                      END = ce2.min_fecha
                  WHERE (ce1.estado = 'PENDIENTE' OR ce1.estado IS NULL OR ce1.estado = '')
                      AND ce1.fechapago IS NOT NULL
              ) c ON e.id = c.ID
              WHERE 1=1 AND e.estado ='ACTIVO'";
    $params = [];
    
    // Filtrar por empresa del usuario logueado
    if ($codempresaUsuario) {
        $query .= " AND e.codempresa = ?";
        $params[] = $codempresaUsuario;
    }
    
    if ($search) {
        $query .= " AND (
            e.nro_documento LIKE ? OR 
            e.nombres_ap_raz_soc LIKE ?
        )";
        $searchTerm = "%{$search}%";
        $params[] = $searchTerm;
        $params[] = $searchTerm;
    }
    
    $query .= " ORDER BY e.fecha_creacion DESC, e.id DESC LIMIT " . intval($records_per_page) . " OFFSET " . intval($offset);
    
    $stmt = $conn->prepare($query);
    $stmt->execute($params);
    $equipos = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // (Cobranza legacy removed)
    
} catch(PDOException $e) {
    $_SESSION['error'] = "Error al obtener los datos: " . $e->getMessage();
    $equipos = [];
    $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-mobile-alt" style="color: #4CAF50;"></i> Cobranza Móvil
            </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" onclick="openNuevoModal()" style="background: linear-gradient(135deg, #4CAF50, #45a049); border: none; color: white; box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);">
                <i class="fas fa-plus"></i> Nuevo 
            </button>
        </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="cobrarmoviles.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 d-flex align-items-end gap-2">
                    <a href="#" class="btn w-100" onclick="exportEquipos(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 class="col-md-2 d-flex align-items-end gap-2">
                    <button type="button" class="btn w-100" onclick="showDuplicados()" 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="cobrarmoviles.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>

    <!-- Equipment 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-mobile-alt"></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;">
                                <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-clipboard-check"></i> Evaluación</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-building"></i> Operador</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-calendar"></i> Fecha Atendida</th>
                            <th style="border: none; padding: 15px;"><i class="fas fa-cogs"></i> Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($equipos as $equipo): ?>
                            <tr>
                                <td><?php echo $equipo['id']; ?></td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-secondary" id="cp_txt_<?php echo $equipo['id']; ?>"><?php echo htmlspecialchars($equipo['codigodepago'] ?: '-'); ?></span>
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="openCodigoPagoModal(<?php echo $equipo['id']; ?>, '<?php echo htmlspecialchars($equipo['codigodepago']); ?>')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <strong><?php echo htmlspecialchars($equipo['nombres_ap_raz_soc'] ?: '-'); ?></strong>
                                    <?php if ($equipo['numero_celular']): ?>
                                        <br><small class="text-muted">📱 <?php echo htmlspecialchars($equipo['numero_celular']); ?></small>
                                    <?php endif; ?>
                                    <?php if ($equipo['correo']): ?>
                                        <br><small class="text-muted">✉ <?php echo htmlspecialchars($equipo['correo']); ?></small>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php echo htmlspecialchars($equipo['tipo_documento'] ?: '-'); ?>
                                    <br><strong><?php echo htmlspecialchars($equipo['nro_documento'] ?: '-'); ?></strong>
                                </td>
                               
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="checkbox" class="form-check-input row-checkbox" value="<?php echo $equipo['id']; ?>" style="transform: scale(1.1);">
                                        <?php 
                                        $estadoClass = '';
                                        switch(strtoupper($equipo['estado'])) {
                                            case 'ACTIVO':
                                                $estadoClass = 'bg-success';
                                                break;
                                            case 'BAJA':
                                                $estadoClass = 'bg-warning';
                                                break;
                                            
                                            default:
                                                $estadoClass = 'bg-secondary';
                                        }
                                        ?>
                                        <span class="badge <?php echo $estadoClass; ?>" id="estado_txt_<?php echo $equipo['id']; ?>">
                                            <?php echo htmlspecialchars($equipo['estado'] ?: '-'); ?>
                                        </span>
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="openEstadoModal(<?php echo $equipo['id']; ?>, '<?php echo htmlspecialchars($equipo['estado']); ?>')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <?php
                                    $diasMorosidad = isset($equipo['dias_morosidad']) ? (int)$equipo['dias_morosidad'] : null;
                                    $tienePendiente = isset($equipo['primer_pendiente_fecha']) && $equipo['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: ' . ($equipo['primer_pendiente_fecha'] ? date('d/m/Y', strtotime($equipo['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($equipo['tipo_evaluacion'] ?: '-'); ?></small>
                                    <?php if ($equipo['plan_a_evaluar']): ?>
                                        <br><span class="badge bg-primary"><?php echo htmlspecialchars($equipo['plan_a_evaluar']); ?></span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <span class="badge bg-dark"><?php echo htmlspecialchars($equipo['operador_actual'] ?: '-'); ?></span>
                                    <?php if ($equipo['modalidad_venta']): ?>
                                        <br><small class="text-muted"><?php echo htmlspecialchars($equipo['modalidad_venta']); ?></small>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php echo $equipo['fecha_entrega'] ? date('d/m/Y', strtotime($equipo['fecha_entrega'])) : '-'; ?>
                                   
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-info" 
                                                onclick="openVerModal(<?php echo $equipo['id']; ?>, '<?php echo htmlspecialchars($equipo['nombres_ap_raz_soc']); ?>', '<?php echo htmlspecialchars($equipo['nro_documento']); ?>', '<?php echo htmlspecialchars($equipo['tipo_documento']); ?>', '<?php echo htmlspecialchars($equipo['correo']); ?>', '<?php echo htmlspecialchars($equipo['numero_celular']); ?>', '<?php echo htmlspecialchars($equipo['agente']); ?>', '<?php echo htmlspecialchars($equipo['estado']); ?>', '<?php echo htmlspecialchars($equipo['tipo_evaluacion']); ?>', '<?php echo htmlspecialchars($equipo['plan_a_evaluar']); ?>', '<?php echo htmlspecialchars($equipo['operador_actual']); ?>', '<?php echo htmlspecialchars($equipo['modalidad_venta']); ?>', '<?php echo htmlspecialchars($equipo['origen']); ?>', '<?php echo htmlspecialchars($equipo['departamento']); ?>', '<?php echo htmlspecialchars($equipo['provincia']); ?>', '<?php echo htmlspecialchars($equipo['distrito']); ?>', '<?php echo htmlspecialchars($equipo['direccion']); ?>', '<?php echo htmlspecialchars($equipo['referencias']); ?>', '<?php echo htmlspecialchars($equipo['numero_contacto']); ?>', '<?php echo htmlspecialchars($equipo['tipo_entrega']); ?>', '<?php echo htmlspecialchars($equipo['tipo_pago']); ?>', '<?php echo htmlspecialchars($equipo['sec']); ?>', '<?php echo $equipo['fecha_sec'] ? date('d/m/Y', strtotime($equipo['fecha_sec'])) : ''; ?>', '<?php echo $equipo['fecha_entrega'] ? date('d/m/Y', strtotime($equipo['fecha_entrega'])) : ''; ?>', '<?php echo htmlspecialchars($equipo['estado_final']); ?>', '<?php echo htmlspecialchars($equipo['acciones']); ?>', '<?php echo $equipo['fecha_creacion'] ? date('d/m/Y', strtotime($equipo['fecha_creacion'])) : ''; ?>', '<?php echo $equipo['fecha_edicion'] ? date('d/m/Y', strtotime($equipo['fecha_edicion'])) : ''; ?>')">
                                            <i class="fas fa-eye"></i> Ver
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary" 
                                                onclick="viewCronograma(<?php echo $equipo['id']; ?>)">
                                            <i class="fas fa-calendar-check"></i> Ver Cronograma
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            
            <?php if (empty($equipos)): ?>
                <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">
                            <!-- First Page -->
                            <?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; ?>
                            
                            <!-- Previous Page -->
                            <?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; ?>
                            
                            <!-- Page Numbers -->
                            <?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; ?>
                            
                            <!-- Next Page -->
                            <?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; ?>
                            
                            <!-- Last Page -->
                            <?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 -->
<div class="modal fade" id="cronogramaViewModal" tabindex="-1" aria-labelledby="cronogramaViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cronogramaViewModalLabel">
                    <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="cronogramaViewModalBody">
                <!-- El contenido se carga dinámicamente -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="exportarCronograma()" id="exportCronogramaBtn" style="display: none;">
                    <i class="fas fa-file-excel"></i> Exportar Excel
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar
                </button>
            </div>
        </div>
    </div>
    </div>

<!-- Ver Equipo Modal -->
<div class="modal fade" id="verModal" tabindex="-1" aria-labelledby="verModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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-mobile-alt"></i> Detalles
                </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-envelope" style="color: #1e5631;"></i> Correo:</strong>
                                    <span id="ver_correo" 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 class="mb-2">
                                    <strong><i class="fas fa-phone-alt" style="color: #1e5631;"></i> Contacto:</strong>
                                    <span id="ver_contacto" 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-clipboard-check" style="color: #2d7a3d;"></i> Evaluación:</strong>
                                    <span id="ver_evaluacion" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-list-alt" style="color: #2d7a3d;"></i> Plan:</strong>
                                    <span id="ver_plan" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-building" style="color: #2d7a3d;"></i> Operador:</strong>
                                    <span id="ver_operador" 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 class="mb-2">
                                    <strong><i class="fas fa-info-circle" style="color: #3d8b4d;"></i> Referencias:</strong>
                                    <span id="ver_referencias" 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> Modalidad:</strong>
                                    <span id="ver_modalidad" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-route" style="color: #4d9b5d;"></i> Origen:</strong>
                                    <span id="ver_origen" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-truck" style="color: #4d9b5d;"></i> Entrega:</strong>
                                    <span id="ver_entrega" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-credit-card" style="color: #4d9b5d;"></i> Pago:</strong>
                                    <span id="ver_pago" class="ms-2"></span>
                                </div>
                                <div class="mb-2">
                                    <strong><i class="fas fa-hashtag" style="color: #4d9b5d;"></i> SEC:</strong>
                                    <span id="ver_sec" 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> Entrega:</strong>
                                            <span id="ver_fecha_entrega" class="ms-2"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Estado Final y Acciones -->
                    <div class="col-md-12 mt-3">
                        <div class="card" style="border: 1px solid #6dbb7d;">
                            <div class="card-header text-white" style="background: linear-gradient(135deg, #6dbb7d, #7dcb8d);">
                                <h6 class="mb-0"><i class="fas fa-clipboard-list"></i> Estado Final y Acciones</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-2">
                                            <strong><i class="fas fa-flag-checkered" style="color: #6dbb7d;"></i> Estado Final:</strong>
                                            <span id="ver_estado_final" class="ms-2"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-2">
                                            <strong><i class="fas fa-tasks" style="color: #6dbb7d;"></i> Acciones:</strong>
                                            <span id="ver_acciones" 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="equipo_id" id="cp_equipo_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="equipo_id" id="est_equipo_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="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 Editar Cronograma -->
<div class="modal fade" id="cronogramaEditModal" tabindex="-1" aria-labelledby="cronogramaEditModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cronogramaEditModalLabel"><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="cronogramaEditForm">
                    <input type="hidden" name="codcronogramaequipo" id="edit_codcronogramaequipo">
                    <input type="hidden" name="equipo_id" id="edit_equipo_id">
                    <input type="hidden" id="edit_default_monto" value="">
                    <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_monto" placeholder="Monto a cobrar">
                        <div class="form-text">Si lo dejas vacío, se tomará del plan del equipo.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Fecha pagada</label>
                        <input type="date" class="form-control" name="pagadofecha" id="edit_pagadofecha">
                        <div class="form-text">Si lo dejas vacío, se usará la fecha actual de Lima.</div>
                    </div>
                </form>
                <div id="cronogramaEditAlert" 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="cronogramaEditSaveBtn"><i class="fas fa-save"></i> Guardar</button>
            </div>
        </div>
    </div>
    </div>

<!-- Modal Notas Cronograma -->
<div class="modal fade" id="notasModal" tabindex="-1" aria-labelledby="notasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="notasModalLabel">
                    <i class="fas fa-comment"></i> Notas de Cuota <span id="notasCuotaNumero"></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="notasContainer">
                    <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="nuevaNotaForm">
                    <input type="hidden" id="nota_codcronogramaequipo" name="codcronogramaequipo">
                    <input type="hidden" id="nota_equipo_id" name="equipo_id">
                    <div class="mb-3">
                        <label class="form-label">Nueva Nota</label>
                        <textarea class="form-control" name="nota" id="nueva_nota" rows="3" 
                                  placeholder="Escriba su nota aquí..." maxlength="300" required></textarea>
                        <div class="form-text">Máximo 300 caracteres</div>
                    </div>
                </form>
                <div id="notaAlert" 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="guardarNotaBtn">
                    <i class="fas fa-save"></i> Guardar Nota
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nuevo Equipo -->
<div class="modal fade" id="nuevoModal" tabindex="-1" aria-labelledby="nuevoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #28a745, #20c997); color: white;">
                <h5 class="modal-title" id="nuevoModalLabel">
                    <i class="fas fa-plus"></i> Nuevo 
                </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="nuevoForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header text-white" style="background: linear-gradient(135deg, #28a745, #20c997);">
                                    <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="200" 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="150">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Número de Celular</label>
                                        <input type="text" class="form-control" name="numero_celular" id="nuevo_numero_celular" maxlength="20">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Número de Contacto</label>
                                        <input type="text" class="form-control" name="numero_contacto" id="nuevo_numero_contacto" maxlength="20">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header text-white" style="background: linear-gradient(135deg, #20c997, #17a2b8);">
                                    <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="ACTIVO">ACTIVO</option>
                                            
                                            <option value="BAJA">BAJA</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tipo de Evaluación</label>
                                        <input type="text" class="form-control" name="tipo_evaluacion" id="nuevo_tipo_evaluacion" maxlength="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Plan a Evaluar</label>
                                        <input type="text" class="form-control" name="plan_a_evaluar" id="nuevo_plan_a_evaluar" maxlength="150">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Operador Actual</label>
                                        <select class="form-select" name="operador_actual" id="nuevo_operador_actual">
                                            <option value="">Seleccionar operador...</option>
                                            <option value="MOVISTAR">MOVISTAR</option>
                                            <option value="CLARO">CLARO</option>
                                            <option value="ENTEL">ENTEL</option>
                                            <option value="BITEL">BITEL</option>
                                        </select>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header text-white" style="background: linear-gradient(135deg, #17a2b8, #6f42c1);">
                                    <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 class="mb-3">
                                        <label class="form-label">Referencias</label>
                                        <textarea class="form-control" name="referencias" id="nuevo_referencias" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header text-white" style="background: linear-gradient(135deg, #6f42c1, #e83e8c);">
                                    <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">Fecha Atendida</label>
                                        <input type="date" class="form-control" name="fecha_entrega" id="nuevo_fecha_entrega">
                                    </div>
                                    
                                    <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>
                </form>
                <div id="nuevoAlert" 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-success" id="nuevoSaveBtn">
                    <i class="fas fa-save"></i> Guardar 
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Mostrar Clientes Duplicados -->
<div class="modal fade" id="duplicadosModal" tabindex="-1" aria-labelledby="duplicadosModalLabel" 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="duplicadosModalLabel">
                    <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="duplicadosModalBody" 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="exportarDuplicados()" id="exportDuplicadosBtn" 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>

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

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Event listener para guardar nuevo equipo
    document.getElementById('nuevoSaveBtn').addEventListener('click', function() {
        const form = document.getElementById('nuevoForm');
        const formData = new FormData(form);
        const alertBox = document.getElementById('nuevoAlert');
        
        // Limpiar alertas
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');
        
        // Validar campos requeridos
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        
        fetch('ajax/save_equipo.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alertBox.textContent = 'Equipo creado correctamente';
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-success');
                
                // Cerrar modal y recargar página después de un breve delay
                setTimeout(() => {
                    const modalEl = document.getElementById('nuevoModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                    window.location.reload();
                }, 1000);
            } else {
                alertBox.textContent = data.message || 'Error al crear el equipo';
                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');
        });
    });
    
    // 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();
}

// Event listeners para los botones de guardar masivo
document.addEventListener('click', function(e) {
    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.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');
                
                // Cerrar modal y recargar la página para mostrar solo los registros correspondientes
                setTimeout(() => {
                    const modalEl = document.getElementById('bulkEstadoModal');
                    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();
                }, 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');
        });
    }
});

// (Cobranza legacy removed)

// Variable global para almacenar el ID del equipo actual
let currentEquipmentId = null;

function viewCronograma(equipmentId) {
    currentEquipmentId = equipmentId;
    // Mostrar loading en el modal
    const modalBody = document.getElementById('cronogramaViewModalBody');
    modalBody.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-2x"></i><br>Cargando cronograma...</div>';

    // Mostrar el modal
    const modal = new bootstrap.Modal(document.getElementById('cronogramaViewModal'));
    modal.show();

    // Cargar el cronograma via AJAX
    fetch(`ajax/get_cronograma.php?id=${equipmentId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                modalBody.innerHTML = data.html;
                // Mostrar botón de exportar si hay cronograma
                const exportBtn = document.getElementById('exportCronogramaBtn');
                if (exportBtn) {
                    exportBtn.style.display = 'inline-block';
                }
            } else {
                modalBody.innerHTML = `<div class=\"alert alert-danger\">Error: ${data.message}</div>`;
                // Ocultar botón de exportar si hay error
                const exportBtn = document.getElementById('exportCronogramaBtn');
                if (exportBtn) {
                    exportBtn.style.display = 'none';
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            modalBody.innerHTML = '<div class=\"alert alert-danger\">Error al cargar el cronograma</div>';
            // Ocultar botón de exportar si hay error
            const exportBtn = document.getElementById('exportCronogramaBtn');
            if (exportBtn) {
                exportBtn.style.display = 'none';
            }
        });
}

// Función para exportar cronograma a Excel
function exportarCronograma() {
    if (!currentEquipmentId) {
        alert('No hay cronograma seleccionado para exportar');
        return;
    }
    
    window.location.href = `export_cronograma.php?id=${currentEquipmentId}`;
}

function openCodigoPagoModal(equipoId, codigoActual) {
    document.getElementById('cp_equipo_id').value = equipoId;
    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();
}

function openEstadoModal(equipoId, estadoActual) {
    document.getElementById('est_equipo_id').value = equipoId;
    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();
}

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.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_equipo_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.php', { method: 'POST', body: formData })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alertBox.textContent = 'Estado actualizado correctamente';
                    alertBox.classList.remove('d-none');
                    alertBox.classList.add('alert-success');
                    
                    // Cerrar modal y recargar la página para mostrar solo los registros correspondientes
                    setTimeout(() => {
                        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();
                    }, 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');
            });
    }
});

function openEditCronogramaModal(codcronogramaequipo, equipoId, currentMonto = null, currentFecha = null, defaultMonto = null, defaultFecha = null) {
    document.getElementById('edit_codcronogramaequipo').value = codcronogramaequipo;
    document.getElementById('edit_equipo_id').value = equipoId;
    // Prefiere valores actuales; si no existen, usar defaults
    const monto = (currentMonto !== null && currentMonto !== undefined && currentMonto !== '') ? currentMonto : (defaultMonto || '');
    const fecha = (currentFecha !== null && currentFecha !== undefined && currentFecha !== '') ? currentFecha : (defaultFecha || '');
    document.getElementById('edit_monto').value = monto;
    document.getElementById('edit_pagadofecha').value = fecha;
    document.getElementById('edit_default_monto').value = (defaultMonto || '');
    new bootstrap.Modal(document.getElementById('cronogramaEditModal')).show();
}

document.addEventListener('click', function(e){
    if (e.target && e.target.id === 'cronogramaEditSaveBtn') {
        const alertBox = document.getElementById('cronogramaEditAlert');
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');

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

        // Validación: monto >= default
        const defaultMontoStr = document.getElementById('edit_default_monto').value || '';
        const inputMontoStr = document.getElementById('edit_monto').value || '';
        // Si el usuario ha ingresado monto, validar contra default si existe
        if (inputMontoStr !== '' && defaultMontoStr !== '') {
            const toNumber = (s) => {
                const t = (s + '').replace(',', '.');
                const n = parseFloat(t);
                return isNaN(n) ? null : n;
            };
            const defaultMonto = toNumber(defaultMontoStr);
            const inputMonto = toNumber(inputMontoStr);
            if (defaultMonto !== null && inputMonto !== null && inputMonto < defaultMonto) {
                alertBox.textContent = `El monto ingresado (S/ ${inputMonto.toFixed(2)}) no puede ser menor al monto por defecto (S/ ${defaultMonto.toFixed(2)}).`;
                alertBox.classList.remove('d-none');
                alertBox.classList.add('alert-danger');
                return;
            }
        }

        fetch('ajax/update_cronograma.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 equipoId = document.getElementById('edit_equipo_id').value;
                fetch(`ajax/get_cronograma.php?id=${equipoId}`)
                    .then(res => res.json())
                    .then(d => {
                        if (d.success) {
                            document.getElementById('cronogramaViewModalBody').innerHTML = d.html;
                        }
                    });

                // Cerrar el modal de edición después de un breve delay
                setTimeout(() => {
                    const modalEl = document.getElementById('cronogramaEditModal');
                    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');
        });
    }
});

// (Cobranza legacy removed)

function openVerModal(equipmentId, nombre, documento, tipoDocumento, correo, celular, agente, estado, evaluacion, plan, operador, modalidad, origen, departamento, provincia, distrito, direccion, referencias, contacto, entrega, pago, sec, fechaSec, fechaEntrega, estadoFinal, acciones, fechaCreacion, fechaEdicion) {
    // Populate modal fields
    document.getElementById('ver_nombre').textContent = nombre || '-';
    document.getElementById('ver_documento').textContent = (tipoDocumento ? tipoDocumento + ': ' : '') + (documento || '-');
    document.getElementById('ver_correo').textContent = correo || '-';
    document.getElementById('ver_celular').textContent = celular || '-';
    document.getElementById('ver_contacto').textContent = contacto || '-';
    
    document.getElementById('ver_agente').textContent = agente || '-';
    document.getElementById('ver_estado').textContent = estado || '-';
    document.getElementById('ver_evaluacion').textContent = evaluacion || '-';
    document.getElementById('ver_plan').textContent = plan || '-';
    document.getElementById('ver_operador').textContent = operador || '-';
    
    document.getElementById('ver_departamento').textContent = departamento || '-';
    document.getElementById('ver_provincia').textContent = provincia || '-';
    document.getElementById('ver_distrito').textContent = distrito || '-';
    document.getElementById('ver_direccion').textContent = direccion || '-';
    document.getElementById('ver_referencias').textContent = referencias || '-';
    
    document.getElementById('ver_modalidad').textContent = modalidad || '-';
    document.getElementById('ver_origen').textContent = origen || '-';
    document.getElementById('ver_entrega').textContent = entrega || '-';
    document.getElementById('ver_pago').textContent = pago || '-';
    document.getElementById('ver_sec').textContent = sec || '-';
    
    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_entrega').textContent = fechaEntrega || '-';
    
    document.getElementById('ver_estado_final').textContent = estadoFinal || '-';
    document.getElementById('ver_acciones').textContent = acciones || '-';
    
    // Show modal
    new bootstrap.Modal(document.getElementById('verModal')).show();
}

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

function exportEquipos(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_equipos.php?' + params.toString();
    window.location.href = url;
}

// Función para abrir modal de nuevo equipo
function openNuevoModal() {
    // Limpiar formulario
    document.getElementById('nuevoForm').reset();
    // Limpiar alertas
    const alertBox = document.getElementById('nuevoAlert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    // Mostrar modal
    new bootstrap.Modal(document.getElementById('nuevoModal')).show();
}

// Función para mostrar clientes duplicados
function showDuplicados() {
    const modalBody = document.getElementById('duplicadosModalBody');
    const exportBtn = document.getElementById('exportDuplicadosBtn');
    
    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('duplicadosModal'));
    modal.show();
    
    // Cargar los duplicados via AJAX
    fetch('ajax/get_duplicados.php')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                modalBody.innerHTML = data.html;
                // Mostrar botón de exportar si hay datos
                if (exportBtn && data.html && !data.html.includes('No se encontraron')) {
                    exportBtn.style.display = 'inline-block';
                }
            } else {
                modalBody.innerHTML = `<div class="alert alert-danger">Error: ${data.message}</div>`;
                // Ocultar botón de exportar si hay error
                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 exportarDuplicados() {
    window.location.href = 'export_duplicados.php';
}

// Función para ver el detalle de un registro específico
function verDetalleRegistro(equipoId) {
    // Cerrar el modal de duplicados
    const duplicadosModal = bootstrap.Modal.getInstance(document.getElementById('duplicadosModal'));
    if (duplicadosModal) duplicadosModal.hide();
    
    // Buscar el registro en la tabla principal
    const filas = document.querySelectorAll('tbody tr');
    let registroEncontrado = null;
    
    filas.forEach(fila => {
        const primeraCelda = fila.querySelector('td:first-child');
        if (primeraCelda && primeraCelda.textContent.trim() === equipoId.toString()) {
            registroEncontrado = fila;
        }
    });
    
    if (registroEncontrado) {
        registroEncontrado.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // Resaltar temporalmente el registro
        registroEncontrado.style.backgroundColor = '#fff3cd';
        registroEncontrado.style.border = '2px solid #ffc107';
        setTimeout(() => {
            registroEncontrado.style.backgroundColor = '';
            registroEncontrado.style.border = '';
        }, 3000);
    } else {
        // Si no se encuentra en la página actual, mostrar mensaje
        alert('El registro con ID ' + equipoId + ' no está visible en la página actual. Use la búsqueda para encontrarlo.');
    }
}

// Función para abrir el modal de aumento de meses desde el cronograma
function openAumentarMesesModal(equipoId, clienteNombre, fechaEntrega) {
    // Crear un modal temporal para aumentar meses
    const modalHtml = `
        <div class="modal fade" id="tempAumentarMesesModal" tabindex="-1" aria-labelledby="tempAumentarMesesModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="tempAumentarMesesModalLabel">
                            <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="tempCronogramaForm">
                            <input type="hidden" id="temp_equipo_id" name="equipo_id" value="${equipoId}">
                            <input type="hidden" id="temp_dias_inicio_cobro_hidden" name="dias_inicio_cobro" value="0">
                            <input type="hidden" id="temp_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" id="temp_cliente_nombre" value="${clienteNombre}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Fecha de Entrega:</label>
                                    <input type="date" class="form-control" id="temp_fecha_entrega" value="${fechaEntrega}" 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="temp_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" onclick="aumentarMesesTemporal()">
                            <i class="fas fa-plus"></i> Aumentar Meses
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Agregar el modal al DOM
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Mostrar el modal
    const modal = new bootstrap.Modal(document.getElementById('tempAumentarMesesModal'));
    modal.show();
    
    // Limpiar el modal cuando se cierre
    document.getElementById('tempAumentarMesesModal').addEventListener('hidden.bs.modal', function() {
        this.remove();
    });
}

// Función para aumentar meses al cronograma existente (modal temporal)
function aumentarMesesTemporal() {
    const form = document.getElementById('tempCronogramaForm');
    if (!form) {
        alert('Formulario no encontrado. Por favor, recargue la página.');
        return;
    }
    
    const formData = new FormData(form);
    
    // Validar que se haya ingresado un número de meses válido
    const cantidadMeses = parseInt(document.getElementById('temp_cantidad_meses').value);
    if (!cantidadMeses || cantidadMeses < 1 || cantidadMeses > 120) {
        alert('Por favor ingrese un número válido de meses (1-120)');
        return;
    }
    
    // Mostrar loading en el botón
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Aumentando...';
    btn.disabled = true;
    
    fetch('ajax/aumentar_meses_cronograma.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Se agregaron ${data.meses_agregados} meses al cronograma existente`);
            // Cerrar el modal temporal
            const modal = bootstrap.Modal.getInstance(document.getElementById('tempAumentarMesesModal'));
            if (modal) modal.hide();
            // Recargar el cronograma en el modal principal
            if (currentEquipmentId) {
                viewCronograma(currentEquipmentId);
            }
        } else {
            alert('Error al aumentar meses: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al aumentar meses al cronograma');
    })
    .finally(() => {
        // Restaurar el botón
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

// Función para aumentar meses al cronograma existente
function aumentarMeses() {
    const form = document.getElementById('cronogramaForm');
    if (!form) {
        alert('Formulario no encontrado. Por favor, recargue la página.');
        return;
    }
    
    const formData = new FormData(form);
    
    // Validar que se haya ingresado un número de meses válido
    const cantidadMeses = parseInt(document.getElementById('cantidad_meses').value);
    if (!cantidadMeses || cantidadMeses < 1 || cantidadMeses > 120) {
        alert('Por favor ingrese un número válido de meses (1-120)');
        return;
    }
    
    // Mostrar loading en el botón
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Aumentando...';
    btn.disabled = true;
    
    fetch('ajax/aumentar_meses_cronograma.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Se agregaron ${data.meses_agregados} meses al cronograma existente`);
            // Cerrar el modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('cronogramaModal'));
            if (modal) modal.hide();
            // Recargar la página para mostrar los cambios
            location.reload();
        } else {
            alert('Error al aumentar meses: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al aumentar meses al cronograma');
    })
    .finally(() => {
        // Restaurar el botón
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

// Función para eliminar la última cuota pendiente
function eliminarUltimaCuota(equipoId, cuotaId) {
    if (!confirm('¿Está seguro de eliminar la última cuota pendiente? Esta acción no se puede deshacer.')) {
        return;
    }
    
    fetch('ajax/eliminar_ultima_cuota.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'equipo_id=' + encodeURIComponent(equipoId) + '&cuota_id=' + encodeURIComponent(cuotaId)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Última cuota eliminada correctamente');
            // Recargar el cronograma
            viewCronograma(equipoId);
        } else {
            alert('Error al eliminar la cuota: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al eliminar la cuota');
    });
}

// Función para abrir modal de notas
function openNotasModal(codcronogramaequipo, equipoId, cuotaNumero) {
    // Configurar el modal
    document.getElementById('nota_codcronogramaequipo').value = codcronogramaequipo;
    document.getElementById('nota_equipo_id').value = equipoId;
    document.getElementById('notasCuotaNumero').textContent = cuotaNumero;
    document.getElementById('nueva_nota').value = '';
    
    // Limpiar alertas
    const alertBox = document.getElementById('notaAlert');
    alertBox.classList.add('d-none');
    alertBox.classList.remove('alert-success', 'alert-danger');
    
    // Mostrar loading
    const notasContainer = document.getElementById('notasContainer');
    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>';
    
    // Mostrar el modal
    new bootstrap.Modal(document.getElementById('notasModal')).show();
    
    // Cargar las notas existentes
    cargarNotas(codcronogramaequipo);
}

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

// Event listener para guardar nota
document.addEventListener('click', function(e) {
    if (e.target && e.target.id === 'guardarNotaBtn') {
        const form = document.getElementById('nuevaNotaForm');
        const formData = new FormData(form);
        const alertBox = document.getElementById('notaAlert');
        
        // Limpiar alertas
        alertBox.classList.add('d-none');
        alertBox.classList.remove('alert-success', 'alert-danger');
        
        // Validar que hay texto
        const nota = document.getElementById('nueva_nota').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.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').value = '';
                
                // Recargar las notas
                const codcronogramaequipo = document.getElementById('nota_codcronogramaequipo').value;
                cargarNotas(codcronogramaequipo);
                
                // Recargar el cronograma para actualizar los iconos
                const equipoId = document.getElementById('nota_equipo_id').value;
                if (currentEquipmentId) {
                    viewCronograma(currentEquipmentId);
                }
            } 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;
        });
    }
});

</script>

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