<?php
session_start();
// Modificar la validación para permitir múltiples roles
if (!isset($_SESSION['usuario_id']) || !in_array($_SESSION['rol'], ['admin', 'vendedor', 'cobrador'])) {
    header('Location: ../login.php');
    exit;
}

require_once '../includes/config.php';
require_once '../includes/db.php';

$db = new Database();
$id_cliente = isset($_GET['id']) ? (int)$_GET['id'] : 0;

// Obtener configuración
$stmt = $db->query("SELECT color_principal, color_secundario, favicon, moneda, con_decimales, pagare_clausulas FROM configuracion");
$config = $stmt->fetch(PDO::FETCH_ASSOC);

// Función para formatear montos según configuración
function formatearMonto($monto, $config) {
    // Formatear con separador de miles y decimales según configuración
    $formateado = number_format(
        $monto, 
        $config['con_decimales'] ? 2 : 0,
        '.', // Separador decimal
        ',' // Separador de miles
    );
    
    // Devolver el número formateado con el símbolo de moneda exactamente como está configurado
    return $formateado . ' ' . $config['moneda'];
}

try {
    // Obtener datos del cliente
    $stmt = $db->prepare("SELECT * FROM clientes WHERE id_cliente = ?");
    $stmt->execute([$id_cliente]);
    $cliente = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$cliente) {
        header('Location: clientes.php');
        exit;
    }

    // Obtener ventas únicas para este cliente
    $stmt = $db->prepare("SELECT DISTINCT venta_id FROM cuotas WHERE cliente_id = ? ORDER BY venta_id");
    $stmt->execute([$id_cliente]);
    $ventas_ids = $stmt->fetchAll(PDO::FETCH_COLUMN);

    // Array para almacenar ventas con sus productos y cuotas
    $ventas = [];

    // Para cada venta, obtener sus productos y cuotas
    foreach ($ventas_ids as $venta_id) {
        // Modificar la consulta de productos para incluir cuotas unificadas
        $stmt = $db->prepare("
            SELECT DISTINCT 
                CASE 
                    WHEN c.producto_id = 0 THEN 'unificada'
                    ELSE 'normal'
                END as tipo_cuota,
                CASE 
                    WHEN c.producto_id = 0 THEN c.observaciones
                    ELSE CAST(c.producto_id AS CHAR)
                END as productos_ids,
                c.producto_id,
                p.codigo as producto_codigo,
                p.titulo as producto_nombre
            FROM cuotas c 
            LEFT JOIN productos p ON c.producto_id = p.id 
            WHERE c.venta_id = ? AND c.cliente_id = ?
            ORDER BY p.titulo
        ");
        $stmt->execute([$venta_id, $id_cliente]);
        $productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

        // Procesar los productos para las cuotas unificadas
        foreach ($productos as $key => $producto) {
            if ($producto['tipo_cuota'] === 'unificada') {
                // Obtener los IDs de productos y cantidades de las observaciones
                // Procesar productos unificados
                $productos_info = array_map(function($item) {
                    $parts = explode('/', trim($item));
                    return [
                        'id' => $parts[0] ?? 0,
                        'cantidad' => $parts[1] ?? 1
                    ];
                }, explode(',', $producto['productos_ids']));

                // Extraer IDs y cantidades asegurando que tengan el mismo número de elementos
                $ids_productos = array_column($productos_info, 'id');
                $cantidades = array_column($productos_info, 'cantidad');

                // Verificar que ambos arrays tengan elementos antes de combinarlos
                if (!empty($ids_productos) && count($ids_productos) === count($cantidades)) {
                    $cantidades = array_combine($ids_productos, $cantidades);
                } else {
                    $cantidades = [];
                }
                
                // Consultar los nombres de los productos
                $placeholders = str_repeat('?,', count($ids_productos) - 1) . '?';
                $stmt = $db->prepare("
                    SELECT id, titulo, codigo
                    FROM productos 
                    WHERE id IN ($placeholders)
                ");
                $stmt->execute($ids_productos);
                $productos_detalles = $stmt->fetchAll(PDO::FETCH_ASSOC);
                
                // Crear arrays para nombres y códigos con cantidades
                $nombres_con_cantidades = [];
                $codigos = [];
                
                foreach ($productos_detalles as $prod) {
                    $cantidad = $cantidades[$prod['id']];
                    $nombres_con_cantidades[] = $prod['titulo'] . ' (x' . $cantidad . ')';
                    $codigos[] = $prod['codigo'];
                }
                
                // Actualizar la información del producto
                $productos[$key]['producto_nombre'] = implode(' + ', $nombres_con_cantidades);
                $productos[$key]['producto_codigo'] = implode(', ', $codigos);
            }
        }

        // Inicializar la venta
        $ventas[$venta_id] = [
            'venta_id' => $venta_id,
            'productos' => [],
            'fecha_venta' => null, // Se actualizará con la primera cuota
            'subtotal' => 0,
            'cancelada' => true // Asumimos que está cancelada hasta que encontremos una cuota pendiente
        ];

        // Para cada producto en esta venta
        foreach ($productos as $producto) {
            // Obtener cuotas de este producto en esta venta
            $stmt = $db->prepare("
                SELECT * 
                FROM cuotas 
                WHERE venta_id = ? AND cliente_id = ? AND producto_id = ?
                ORDER BY 
                    numero_cuota ASC,
                    CASE 
                        WHEN estado = 'PAGADO' THEN 1
                        ELSE 2 
                    END,
                    fecha_pago ASC,
                    id ASC
            ");
            $stmt->execute([$venta_id, $id_cliente, $producto['producto_id']]);
            $cuotas_producto = $stmt->fetchAll(PDO::FETCH_ASSOC);

            // Modificar el procesamiento de las cuotas
            if (!empty($cuotas_producto)) {
                $subtotal_producto = 0;
                $max_numero_cuota = 0;
                $cuotas = [];

                foreach ($cuotas_producto as $cuota) {
                    $subtotal_producto += $cuota['monto'];
                    if ($cuota['numero_cuota'] > $max_numero_cuota) {
                        $max_numero_cuota = $cuota['numero_cuota'];
                    }

                    // Agregar cada cuota al array usando un índice compuesto
                    $indice = $cuota['numero_cuota'] . '-' . $cuota['id'];
                    $cuotas[$indice] = [
                        'id' => $cuota['id'],
                        'numero_cuota' => $cuota['numero_cuota'],
                        'monto' => $cuota['monto'],
                        'fecha_vencimiento' => $cuota['fecha_vencimiento'],
                        'estado_cuota' => $cuota['estado'],
                        'fecha_pago' => $cuota['fecha_pago']
                    ];

                    // Si hay al menos una cuota pendiente, la venta no está cancelada
                    if ($cuota['estado'] === 'PENDIENTE') {
                        $ventas[$venta_id]['cancelada'] = false;
                    }
                }

                // Guardar información del producto
                $ventas[$venta_id]['productos'][] = [
                    'producto_id' => $producto['producto_id'],
                    'producto_codigo' => $producto['producto_codigo'],
                    'producto_nombre' => $producto['producto_nombre'],
                    'subtotal' => $subtotal_producto,
                    'cantidad_cuotas' => $max_numero_cuota,
                    'cuotas' => $cuotas
                ];

                // Actualizar subtotal de la venta
                $ventas[$venta_id]['subtotal'] += $subtotal_producto;
            }
        }
    }

    // Obtener conteo y totales directamente de la tabla cuotas
    $stmt = $db->prepare("
        SELECT 
            COUNT(*) as total_cuotas,
            SUM(CASE WHEN estado = 'PENDIENTE' THEN 1 ELSE 0 END) as pendientes,
            SUM(CASE WHEN estado = 'PAGADO' THEN 1 ELSE 0 END) as pagadas,
            SUM(CASE WHEN estado = 'PENDIENTE' THEN monto ELSE 0 END) as total_pendiente,
            SUM(CASE WHEN estado = 'PAGADO' THEN monto ELSE 0 END) as total_pagado
        FROM cuotas 
        WHERE cliente_id = ?
    ");
    $stmt->execute([$id_cliente]);
    $resumen = $stmt->fetch(PDO::FETCH_ASSOC);
    $total_pendiente = $resumen['total_pendiente'] ?? 0;
    $total_pagado = $resumen['total_pagado'] ?? 0;
    $conteo_cuotas = [
        'total_cuotas' => $resumen['total_cuotas'] ?? 0,
        'pendientes' => $resumen['pendientes'] ?? 0,
        'pagadas' => $resumen['pagadas'] ?? 0
    ];
} catch (PDOException $e) {
    error_log("Error en la consulta: " . $e->getMessage());
    echo "Error: " . $e->getMessage();
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>

    <?php        // Modo oscuro
        require_once '../includes/dark_mode.php';
    ?>
    <meta name="color-scheme" content="light dark">
    <?php echo getDarkModeStyles(); ?> 

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detalles del Cliente</title>
    <link rel="shortcut icon" href="../uploads/config/<?php echo $config['favicon']; ?>" type="image/x-icon">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --color-primary: <?php echo $config['color_principal']; ?>;
            --color-secondary: <?php echo $config['color_secundario']; ?>;
        }
        .venta-grupo {
            margin-bottom: 2rem;
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
        }
        .venta-header {
            background-color: #f8f9fa;
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }
        .producto-item {
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
        }
        .producto-item:last-child {
            border-bottom: none;
        }
        .producto-nombre {
            font-weight: 600;
            color: var(--color-primary);
        }
        .cuotas-lista {
            margin-top: 0.75rem;
            margin-left: 1rem;
        }
        .cuota-item {
            padding: 0.5rem;
            border-bottom: 1px solid #e9ecef;
        }
        .cuota-item:last-child {
            border-bottom: none;
        }
        .venta-cancelada {
            opacity: 0.75;
            background-color: #f8f9fa;
        }
        .badge-cancelada {
            background-color: #28a745;
        }
        .venta-filtro {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        .form-check-ventas {
            margin-left: 1rem;
        }
        .btn-group .btn + .btn {
            margin-left: 8px; /* o el espacio que prefieras */
        }
        .venta-pagada {
            opacity: 0.75;
            background-color: #f8f9fa;
        }
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .edit-icon {
            cursor: pointer;
            color: var(--color-primary);
            margin-left: 5px;
        }

        .edit-icon:hover {
            opacity: 0.8;
        }

        .loading-spinner {
            color: #fff;
            font-size: 50px;
        }
    </style>
    <!-- Agregar esto en el head de ver-cliente.php si no está ya incluido -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <div class="container-fluid mt-4">
        <!-- Mostrar mensajes de éxito o error -->
        <?php if (isset($_SESSION['success'])): ?>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i><?php echo $_SESSION['success']; ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <?php unset($_SESSION['success']); ?>
        <?php endif; ?>
        <?php if (isset($_SESSION['error'])): ?>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i><?php echo $_SESSION['error']; ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <?php unset($_SESSION['error']); ?>
        <?php endif; ?>  <!-- Cerrar el if de error -->
        </div>  <!-- Cerrar el div de los mensajes de alerta -->

        <div class="row">
            <div class="col-12">
                <div class="ver-cliente-header">
                    <h2 class="titulo-principal text-center">Detalles del Cliente</h2>
                    <div class="ver-cliente-botones">
                        <!-- Modificar el enlace de impresión -->
                        <a href="imprimir-cliente.php?id=<?php echo $id_cliente; ?>&mostrar_canceladas=<?php echo isset($_GET['mostrar_canceladas']) && $_GET['mostrar_canceladas'] == '1' ? '1' : '0'; ?>" 
                           class="btn" 
                           style="background-color: var(--color-primary); color: white;" 
                           target="_blank">
                            <i class="fas fa-print me-2"></i>Imprimir
                        </a>
                        <a href="clientes.php" class="btn" style="background-color: var(--color-secondary); color: white;">
                            <i class="fas fa-arrow-left me-2"></i>Volver al Listado
                        </a>
                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-title mb-0">Información del Cliente</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Nombre:</strong> <?php echo htmlspecialchars($cliente['nombre'] . ' ' . $cliente['apellidos']); ?></p>
                                <p><strong>Documento:</strong> <?php echo htmlspecialchars($cliente['tipo_documento'] . ': ' . $cliente['numero_documento']); ?></p>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['email'] ?? 'No especificado'); ?></p>
                                <p><strong>Teléfono:</strong> <?php echo htmlspecialchars($cliente['telefono_principal']); ?></p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Estado:</strong> <span class="badge bg-<?php echo $cliente['estado'] === 'Activo' ? 'success' : 'danger'; ?>"><?php echo $cliente['estado']; ?></span></p>
                                <p><strong>Categoría:</strong> <span class="badge bg-info"><?php echo $cliente['categoria']; ?></span></p>
                                <p><strong>Total Pendiente:</strong> <?php echo formatearMonto($total_pendiente, $config); ?></p>
                                <p><strong>Total Pagado:</strong> <?php echo formatearMonto($total_pagado, $config); ?></p>
                                <p><strong>Resumen Cuotas:</strong></p>
                                <div class="resumen-cuotas">
                                    <span class="badge bg-secondary text-white">Total: <?php echo $conteo_cuotas['total_cuotas']; ?></span>
                                    <span class="badge bg-warning text-dark">Pendientes: <?php echo $conteo_cuotas['pendientes']; ?></span>
                                    <span class="badge bg-success text-white">Pagadas: <?php echo $conteo_cuotas['pagadas']; ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">Historial de Ventas y Cuotas</h3>
                    </div>
                    <div class="card-body">
                        <?php if (empty($ventas)): ?>
                            <div class="alert alert-info">
                                No hay ventas registradas para este cliente.
                            </div>
                        <?php else: ?>
                            <!-- Filtro para ventas canceladas -->
                            <div class="venta-filtro mb-3">
                                <strong>Filtrar ventas:</strong>
                                <div class="form-check form-switch form-check-ventas">
                                    <a href="?id=<?php echo $id_cliente; ?>&mostrar_canceladas=<?php echo isset($_GET['mostrar_canceladas']) && $_GET['mostrar_canceladas'] == '1' ? '0' : '1'; ?>" 
                                       class="btn btn-link p-0 text-decoration-none">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" 
                                                   <?php echo isset($_GET['mostrar_canceladas']) && $_GET['mostrar_canceladas'] == '1' ? 'checked' : ''; ?> 
                                                   style="pointer-events: none;">
                                            <label class="form-check-label">
                                                Mostrar ventas completamente pagadas
                                            </label>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <?php foreach ($ventas as $venta): ?>
                                <?php 
                                // Determinar si se debe mostrar esta venta
                                $mostrarVenta = !$venta['cancelada'] || (isset($_GET['mostrar_canceladas']) && $_GET['mostrar_canceladas'] == '1');
                                ?>
                                <div class="venta-grupo mb-4 <?php echo $venta['cancelada'] ? 'venta-pagada' : ''; ?>" 
                                     style="display: <?php echo $mostrarVenta ? 'block' : 'none'; ?>">
                                    <div class="venta-header">
                                        <h4 class="mb-0">
                                            <i class="fas fa-shopping-cart me-2"></i> 
                                            Venta #<?php echo $venta['venta_id']; ?> 
                                            <small class="text-muted ms-2">
                                                (<?php echo date('d/m/Y', intval($venta['venta_id'])); ?> - 
                                                Total: <?php echo formatearMonto($venta['subtotal'], $config); ?>)
                                            </small>
                                            <?php if ($venta['cancelada']): ?>
                                                <span class="badge badge-cancelada text-white ms-2">
                                                    <i class="fas fa-check-circle me-1"></i>CANCELADA
                                                </span>
                                            <?php endif; ?>
                                        </h4>
                                    </div>
                                    <?php foreach ($venta['productos'] as $producto): ?>
                                        <div class="producto-item">
                                            <div class="producto-nombre">
                                                <?php if ($producto['producto_codigo']): ?>
                                                    [<?php echo htmlspecialchars($producto['producto_codigo']); ?>]
                                                <?php endif; ?>
                                                <?php 
                                                // Asegurarse de que el nombre del producto se muestre correctamente
                                                $nombre_producto = $producto['producto_nombre'];
                                                if (empty(trim($nombre_producto)) && !empty($producto['productos_ids'])) {
                                                    // Si el nombre está vacío pero tenemos IDs, intentar reconstruir el nombre
                                                    $stmt = $db->prepare("
                                                        SELECT p.codigo, p.titulo, vi.cantidad
                                                        FROM venta_items vi
                                                        JOIN productos p ON vi.producto_id = p.id
                                                        WHERE vi.venta_id = ?
                                                    ");
                                                    $stmt->execute([$venta['venta_id']]);
                                                    $productos_venta = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                                    
                                                    $nombres_productos = [];
                                                    foreach ($productos_venta as $prod) {
                                                        $nombres_productos[] = $prod['titulo'] . ' (x' . $prod['cantidad'] . ')';
                                                    }
                                                    $nombre_producto = implode(' + ', $nombres_productos);
                                                }
                                                echo htmlspecialchars($nombre_producto);
                                                ?>
                                                <small class="text-muted ms-2">
                                                    (<?php echo formatearMonto($producto['subtotal'], $config); ?> - 
                                                    <?php echo $producto['cantidad_cuotas']; ?> cuotas)
                                                </small>
                                            </div>
                                            <div class="cuotas-lista">
                                                <?php if (!empty($producto['cuotas'])): ?>
                                                    <div class="table-responsive">
                                                        <table class="table table-sm">
                                                            <thead>
                                                                <tr>
                                                                    <th>Cuota</th>
                                                                    <th>Monto</th>
                                                                    <th>Vencimiento</th>
                                                                    <th>Estado</th>
                                                                    <th>Fecha Pago</th>
                                                                    <th>Acciones</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <?php 
                                                                // Ordenar las cuotas: primero PAGADO, luego PENDIENTE
                                                                $cuotas_ordenadas = $producto['cuotas'];
                                                                uasort($cuotas_ordenadas, function($a, $b) {
                                                                    return $a['numero_cuota'] - $b['numero_cuota'];
                                                                });
                                                                
                                                                foreach ($cuotas_ordenadas as $cuota): 
                                                                    $mostrarCuota = !$venta['cancelada'] || 
                                                                                   (isset($_GET['mostrar_canceladas']) && $_GET['mostrar_canceladas'] == '1');
                                                                    
                                                                    if ($mostrarCuota):
                                                                ?>
                                                                    <tr>
                                                                        <td>Cuota <?php echo $cuota['numero_cuota']; ?>/<?php echo $producto['cantidad_cuotas']; ?></td>
                                                                        <td><?php echo formatearMonto($cuota['monto'], $config); ?></td>
                                                                        <td><?php echo date('d/m/Y', strtotime($cuota['fecha_vencimiento'])); ?></td>
                                                                        <td>
                                                                            <span class="badge <?php echo $cuota['estado_cuota'] === 'PAGADO' ? 'bg-success' : 'bg-warning text-dark'; ?>">
                                                                                <?php echo $cuota['estado_cuota']; ?>
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <?php echo $cuota['fecha_pago'] ? date('d/m/Y', strtotime($cuota['fecha_pago'])) : '-'; ?>
                                                                        </td>
                                                                        <td>
                                                                            <div class="btn-group" role="group">
                                                                <?php if ($_SESSION['rol'] === 'admin'): ?>
                                                                <button type="button" 
                                                                        class="btn btn-primary btn-sm" 
                                                                        onclick="editarCuota(<?php echo $cuota['id']; ?>, <?php echo $venta['venta_id']; ?>)"
                                                                        title="Editar cuota">
                                                                    <i class="fas fa-edit"></i>
                                                                </button>
                                                                <button type="button" 
                                                                        class="btn btn-danger btn-sm ms-1" 
                                                                        onclick="eliminarCuota(<?php echo $cuota['id']; ?>, <?php echo $venta['venta_id']; ?>)"
                                                                        title="Eliminar cuota">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                                <?php endif; ?>                                                                                <?php if (!$venta['cancelada'] && $cuota['estado_cuota'] !== 'PAGADO'): ?>
                                                                                <button type="button" 
                                                                                        class="btn btn-success btn-sm ms-1" 
                                                                                        onclick="cobrarCuota(<?php echo $cuota['id']; ?>, <?php echo $cuota['monto']; ?>)"
                                                                                        title="Cobrar cuota">
                                                                                    <i class="fas fa-cash-register"></i>
                                                                                </button>
                                                                                <a href="generar-pagare.php?cuota_id=<?php echo $cuota['id']; ?>" 
                                                                                   class="btn btn-info btn-sm ms-1"
                                                                                   target="_blank"
                                                                                   title="Generar pagaré">
                                                                                    <i class="fas fa-file-signature"></i>
                                                                                </a>
                                                                                <?php endif; ?>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                <?php
                                                                    endif;
                                                                endforeach; 
                                                                ?>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                <?php else: ?>
                                                    <div class="alert alert-warning">
                                                        No hay cuotas registradas para este producto.
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal para Cobrar Cuota -->
    <div class="modal fade" id="cobrarModal" tabindex="-1" aria-labelledby="cobrarModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background-color: var(--color-primary); color: white;">
                    <h5 class="modal-title" id="cobrarModalLabel">Registrar Cobro de Cuotas</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formCobrarCuota" method="post" action="procesar-cobro-multiple.php">
                    <div class="modal-body">
                        <input type="hidden" id="cliente_id" name="cliente_id" value="<?php echo $id_cliente; ?>">
                        <!-- Agregar el campo oculto para usuario_id -->
                        <input type="hidden" name="usuario_id" value="<?php echo $_SESSION['usuario_id']; ?>">
                        
                        <div class="mb-3">
                            <h6>Cuotas Disponibles para Cobro</h6>
                            <div id="listaCuotas" class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="seleccionarTodas" class="form-check-input"></th>
                                            <th>Producto</th>
                                            <th>Cuota</th>
                                            <th>Vencimiento</th>
                                            <th>Monto</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyCuotas">
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="monto_recibido" class="form-label">Monto Recibido</label>
                            <input type="number" step="0.01" class="form-control" id="monto_recibido" name="monto_recibido" required>
                            <div class="form-text">
                                Total a cobrar: <strong><span id="total_seleccionado">0.00</span> <?php echo $config['moneda']; ?></strong>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="metodo_pago" class="form-label">Método de Pago</label>
                            <select class="form-select" id="metodo_pago" name="metodo_pago" required>
                                <option value="Efectivo">Efectivo</option>
                                <option value="Transferencia">Transferencia</option>
                                <option value="Tarjeta">Tarjeta</option>
                                <option value="Otro">Otro</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="fecha_pago" class="form-label">Fecha y Hora de Pago</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="date" 
                                           class="form-control" 
                                           id="fecha_pago" 
                                           name="fecha_pago" 
                                           value="<?php echo date('Y-m-d'); ?>" 
                                           required>
                                </div>
                                <div class="col-md-6">
                                    <input type="time" 
                                           class="form-control" 
                                           id="hora_pago" 
                                           name="hora_pago" 
                                           value="<?php echo date('H:i'); ?>" 
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="observaciones" class="form-label">Observaciones</label>
                            <textarea class="form-control" id="observaciones" name="observaciones" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-success">Registrar Cobro</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="loading-overlay">
    <div class="loading-spinner">
        ⌛
    </div>
</div>

<!-- Modal para Editar Cuota -->
<div class="modal fade" id="editarCuotaModal" tabindex="-1" aria-labelledby="editarCuotaModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: var(--color-primary); color: white;">
                <h5 class="modal-title" id="editarCuotaModalLabel">Editar Cuota</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formEditarCuota" method="post">
                <div class="modal-body">
                    <input type="hidden" id="edit_cuota_id" name="cuota_id">
                    <input type="hidden" id="edit_venta_id" name="venta_id">
                    
                    <div class="mb-3">
                        <label for="edit_numero_cuota" class="form-label">Número de Cuota</label>
                        <input type="number" class="form-control" id="edit_numero_cuota" name="numero_cuota" required min="1">
                    </div>

                    <div class="mb-3">
                        <label for="edit_monto" class="form-label">Monto</label>
                        <input type="number" step="0.01" class="form-control" id="edit_monto" name="monto" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_fecha_vencimiento" class="form-label">Fecha de Vencimiento</label>
                        <input type="date" class="form-control" id="edit_fecha_vencimiento" name="fecha_vencimiento" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_estado" class="form-label">Estado</label>
                        <select class="form-select" id="edit_estado" name="estado" required>
                            <option value="PENDIENTE">PENDIENTE</option>
                            <option value="PAGADO">PAGADO</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_fecha_pago" class="form-label">Fecha de Pago</label>
                        <input type="date" class="form-control" id="edit_fecha_pago" name="fecha_pago">
                    </div>

                    <!-- Las fechas de aviso se calculan automáticamente basadas en la fecha de vencimiento -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>

    <!-- Scripts necesarios -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const cobrarModal = document.getElementById('cobrarModal');
    const tbodyCuotas = document.getElementById('tbodyCuotas');
    const formCobrarCuota = document.getElementById('formCobrarCuota');
    let cuotasData = [];

    // Función para cargar las cuotas al abrir el modal
    cobrarModal.addEventListener('show.bs.modal', function (event) {
        const clienteId = document.getElementById('cliente_id').value;
        
        fetch(`obtener-cuotas-pendientes.php?cliente_id=${clienteId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Error en la respuesta del servidor');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    cuotasData = data.data;
                    renderizarCuotas();
                } else {
                    throw new Error(data.message || 'Error al cargar las cuotas');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al cargar las cuotas: ' + error.message);
            });
    });

    // Reemplazar la función renderizarCuotas actual con esta versión:
function renderizarCuotas() {
    tbodyCuotas.innerHTML = '';
    let currentVentaId = null;

    cuotasData.forEach(cuota => {
        if (currentVentaId !== cuota.venta_id) {
            currentVentaId = cuota.venta_id;
            const separador = document.createElement('tr');
            separador.innerHTML = `
                <td colspan="5" class="table-secondary">
                    <strong>Venta #${cuota.venta_id}</strong>
                </td>
            `;
            tbodyCuotas.appendChild(separador);
        }

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>
                <input type="checkbox" class="form-check-input cuota-check" 
                       value="${cuota.id}" 
                       data-monto="${cuota.monto}">
            </td>
            <td>[${cuota.producto_codigo}] ${cuota.producto_nombre}</td>
            <td>Cuota ${cuota.numero_cuota}</td>
            <td>${new Date(cuota.fecha_vencimiento).toLocaleDateString()}</td>
            <td>${formatearMonto(cuota.monto)}</td>
        `;
        tbodyCuotas.appendChild(tr);
    });

    // También desmarcar el checkbox "Seleccionar todas"
    document.getElementById('seleccionarTodas').checked = false;
    
    // Inicializar el total en 0
    actualizarTotal();
}

    // Función para formatear montos
    function formatearMonto(monto) {
        return new Intl.NumberFormat('es-PY', {
            minimumFractionDigits: <?php echo $config['con_decimales'] ? 2 : 0 ?>,
            maximumFractionDigits: <?php echo $config['con_decimales'] ? 2 : 0 ?>
        }).format(monto); // Quitamos la concatenación del símbolo de moneda aquí
    }

    // Función para actualizar el total
    function actualizarTotal() {
        let total = 0;
        document.querySelectorAll('.cuota-check:checked').forEach(checkbox => {
            total += parseFloat(checkbox.dataset.monto);
        });
        document.getElementById('total_seleccionado').textContent = formatearMonto(total);
    }

    // Agregar evento para el input monto_recibido
    document.getElementById('monto_recibido').addEventListener('input', function(e) {
        // Permitir que el usuario modifique el valor libremente
        const valor = this.value;
        if (valor && !isNaN(valor)) {
            // Opcional: validar que el monto no sea negativo
            if (parseFloat(valor) < 0) {
                this.value = '0.00';
            }
        }
    });

    // Evento para checkbox "Seleccionar todas"
    document.getElementById('seleccionarTodas').addEventListener('change', function() {
        document.querySelectorAll('.cuota-check').forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        actualizarTotal();
    });

    // Delegación de eventos para checkboxes individuales
    tbodyCuotas.addEventListener('change', function(e) {
        if (e.target.classList.contains('cuota-check')) {
            actualizarTotal();
        }
    });

    // Agregar esta función después de las funciones existentes
    function combinarFechaHora(fecha, hora) {
        return `${fecha}T${hora}:00`;
    }

    // Reemplazar el evento submit actual con este código:
formCobrarCuota.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Mostrar el overlay de carga
    document.querySelector('.loading-overlay').style.display = 'flex';
    
    const cuotasSeleccionadas = Array.from(document.querySelectorAll('.cuota-check:checked'))
        .map(checkbox => ({
            id: checkbox.value,
            monto: parseFloat(checkbox.dataset.monto)
        }));

    if (cuotasSeleccionadas.length === 0) {
        document.querySelector('.loading-overlay').style.display = 'none';
        Swal.fire('Error', 'Debe seleccionar al menos una cuota para cobrar', 'error');
        return;
    }

    const formData = new FormData(this);
    const fecha = formData.get('fecha_pago');
    const hora = formData.get('hora_pago');
    formData.set('fecha_pago', combinarFechaHora(fecha, hora));
    formData.delete('hora_pago');
    formData.append('cuotas', JSON.stringify(cuotasSeleccionadas));

    try {
        const response = await fetch('procesar-cobro-multiple.php', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        
        // Cerrar el modal inmediatamente después de recibir la respuesta
        const modalElement = document.getElementById('cobrarModal');
        const modalInstance = bootstrap.Modal.getInstance(modalElement);
        modalInstance.hide();

        // Ocultar el overlay de carga
        document.querySelector('.loading-overlay').style.display = 'none';

        if (data.success) {
            // Mostrar mensaje de éxito y forzar recarga
            Swal.fire({
                title: '¡Éxito!',
                text: data.message,
                icon: 'success',
                allowOutsideClick: false,
                confirmButtonText: 'Aceptar'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = window.location.pathname + '?id=' + formData.get('cliente_id');
                }
            });
        } else {
            Swal.fire({
                title: 'Error',
                text: data.message || 'Hubo un error al procesar el cobro',
                icon: 'error'
            });
        }
    } catch (error) {
        console.error('Error:', error);
        document.querySelector('.loading-overlay').style.display = 'none';
        
        Swal.fire({
            title: 'Error',
            text: 'Hubo un error al procesar el cobro',
            icon: 'error'
        });
    }
});

    // Función para actualizar la visibilidad de las cuotas
    function actualizarVisibilidadCuotas(mostrar) {
        // Actualizar visibilidad de cuotas
        document.querySelectorAll('.table tbody tr').forEach(tr => {
            // Solo procesar filas que tengan un badge de estado
            const estadoBadge = tr.querySelector('.badge');
            if (estadoBadge) {
                const esPagada = estadoBadge.textContent.trim() === 'PAGADO';
                if (esPagada) {
                    tr.style.display = mostrar ? 'table-row' : 'none';
                }
            }
        });

        // Actualizar visibilidad de ventas canceladas
        document.querySelectorAll('.venta-pagada').forEach(venta => {
            venta.style.display = mostrar ? 'block' : 'none';
        });

        // Actualizar URL sin recargar
        const url = new URL(window.location.href);
        url.searchParams.set('mostrar_canceladas', mostrar ? '1' : '0');
        window.history.pushState({}, '', url);

        // Actualizar enlace de impresión
        const imprimirLink = document.querySelector('a[href*="imprimir-cliente.php"]');
        if (imprimirLink) {
            const imprimirUrl = new URL(imprimirLink.href);
            imprimirUrl.searchParams.set('mostrar_canceladas', mostrar ? '1' : '0');
            imprimirLink.href = imprimirUrl.toString();
        }
    }

    // Inicialización al cargar la página
    document.addEventListener('DOMContentLoaded', function() {
        const params = new URLSearchParams(window.location.search);
        const mostrarCanceladas = params.get('mostrar_canceladas') === '1';
        
        // Encontrar el checkbox y establecer su estado
        const checkbox = document.querySelector('.form-check-input[type="checkbox"]');
        if (checkbox) {
            checkbox.checked = mostrarCanceladas;
            checkbox.addEventListener('change', function() {
                actualizarVisibilidadCuotas(this.checked);
            });
        }
        
        // Aplicar visibilidad inicial
        actualizarVisibilidadCuotas(mostrarCanceladas);
    });
});

    function cobrarCuota(cuotaId, monto) {
        // Abrir el modal de cobro
        const modal = new bootstrap.Modal(document.getElementById('cobrarModal'));
        modal.show();

        // Esperar a que el modal se abra completamente
        document.getElementById('cobrarModal').addEventListener('shown.bs.modal', function () {
            // Desmarcar todas las cuotas
            document.querySelectorAll('.cuota-check').forEach(checkbox => {
                checkbox.checked = false;
            });
            
            // Actualizar el total
            actualizarTotal();
            // Establecer el foco en el campo de monto recibido
            document.getElementById('monto_recibido').focus();
        }, { once: true });
    }

    // Función para editar cuota
    function eliminarCuota(cuotaId, ventaId) {
        // Verificar si el usuario es admin
        <?php if ($_SESSION['rol'] !== 'admin'): ?>
            Swal.fire('Error', 'No tienes permisos para eliminar cuotas', 'error');
            return;
        <?php endif; ?>

        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción eliminará la cuota y todos los avisos de pago relacionados. No se puede deshacer.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Mostrar el overlay de carga
                document.querySelector('.loading-overlay').style.display = 'flex';

                // Crear FormData
                const formData = new FormData();
                formData.append('cuota_id', cuotaId);

                // Enviar solicitud para eliminar
                fetch('eliminar_cuota.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: '¡Eliminada!',
                            text: 'La cuota y sus avisos relacionados han sido eliminados correctamente.',
                            icon: 'success',
                            confirmButtonText: 'Aceptar'
                        }).then(() => {
                            // Recargar la página
                            window.location.reload();
                        });
                    } else {
                        throw new Error(data.message || 'Error al eliminar la cuota');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire('Error', error.message || 'Error al eliminar la cuota', 'error');
                })
                .finally(() => {
                    document.querySelector('.loading-overlay').style.display = 'none';
                });
            }
        });
    }

    function editarCuota(cuotaId, ventaId) {
        // Verificar si el usuario es admin
        <?php if ($_SESSION['rol'] !== 'admin'): ?>
            Swal.fire('Error', 'No tienes permisos para editar cuotas', 'error');
            return;
        <?php endif; ?>

        // Mostrar el overlay de carga
        document.querySelector('.loading-overlay').style.display = 'flex';

        // Obtener los datos de la cuota
        fetch(`obtener_datos_cuota.php?id=${cuotaId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const cuota = data.data;
                    
                    // Llenar el formulario con los datos
                    document.getElementById('edit_cuota_id').value = cuota.id;
                    document.getElementById('edit_venta_id').value = ventaId;
                    document.getElementById('edit_numero_cuota').value = cuota.numero_cuota;
                    document.getElementById('edit_monto').value = cuota.monto;
                    document.getElementById('edit_fecha_vencimiento').value = cuota.fecha_vencimiento;
                    document.getElementById('edit_estado').value = cuota.estado;
                    document.getElementById('edit_fecha_pago').value = cuota.fecha_pago || '';

                    // Mostrar el modal
                    const modal = new bootstrap.Modal(document.getElementById('editarCuotaModal'));
                    modal.show();
                } else {
                    Swal.fire('Error', data.message || 'Error al cargar los datos de la cuota', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('Error', 'Hubo un error al cargar los datos de la cuota', 'error');
            })
            .finally(() => {
                document.querySelector('.loading-overlay').style.display = 'none';
            });
    }

    // Manejar el envío del formulario de edición
    document.getElementById('formEditarCuota').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Mostrar el overlay de carga
        document.querySelector('.loading-overlay').style.display = 'flex';

        // Crear FormData con los datos del formulario
        const formData = new FormData(this);

        // Si el estado cambia a PAGADO, establecer la fecha de pago actual si no hay una fecha seleccionada
        if (formData.get('estado') === 'PAGADO' && !formData.get('fecha_pago')) {
            const today = new Date().toISOString().split('T')[0];
            formData.set('fecha_pago', today);
        }

        // Enviar los datos al servidor
        fetch('editar_cuota.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Cerrar el modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('editarCuotaModal'));
                modal.hide();

                // Mostrar mensaje de éxito
                Swal.fire({
                    title: '¡Éxito!',
                    text: 'La cuota ha sido actualizada correctamente',
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                }).then(() => {
                    // Recargar la página para mostrar los cambios
                    window.location.reload();
                });
            } else {
                throw new Error(data.message || 'Error al actualizar la cuota');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire('Error', error.message || 'Hubo un error al actualizar la cuota', 'error');
        })
        .finally(() => {
            document.querySelector('.loading-overlay').style.display = 'none';
        });
    });
</script>
</body></html>