<?php
session_start();
require_once 'includes/db.php';
require_once 'includes/theme_only.php'; 


$db = new Database();
$cliente_preseleccionado = null;

// Verificar si hay ventas en curso del usuario actual
$stmt = $db->prepare("
    SELECT DISTINCT
        c.id_cliente,
        CONCAT(c.nombre, ' ', c.apellidos) as nombre_completo,
        v.grupo_id,
        v.estado,
        v.id as venta_id
    FROM venta_items v
    JOIN clientes c ON v.cliente_id = c.id_cliente
    WHERE v.vendedor_id = ? 
    AND v.estado = 'EN_CURSO'
    ORDER BY v.id DESC
    LIMIT 1
");
$stmt->execute([$_SESSION['usuario_id']]);
$venta_activa = $stmt->fetch(PDO::FETCH_ASSOC);

if ($venta_activa) {
    $_SESSION['venta_activa'] = [
        'cliente_id' => $venta_activa['id_cliente'],
        'cliente_nombre' => $venta_activa['nombre_completo'],
        'grupo_id' => $venta_activa['grupo_id']
    ];
    $cliente_preseleccionado = [
        'id' => $venta_activa['id_cliente'],
        'nombre' => $venta_activa['nombre_completo'],
        'grupo_id' => $venta_activa['grupo_id']
    ];
    
    // Guardar en sessionStorage
    echo "<script>
        sessionStorage.setItem('cliente_actual', JSON.stringify({
            id: '{$venta_activa['id_cliente']}',
            nombre: '" . addslashes($venta_activa['nombre_completo']) . "'
        }));
    </script>";
}

// Si viene un venta_id específico, verificar que coincida con el usuario
elseif (isset($_GET['venta_id'])) {
    $stmt = $db->prepare("
        SELECT 
            c.id_cliente,
            CONCAT(c.nombre, ' ', c.apellidos) as nombre_completo,
            v.grupo_id,
            v.estado
        FROM venta_items v
        JOIN clientes c ON v.cliente_id = c.id_cliente
        WHERE v.id = ? 
        AND v.vendedor_id = ?
        AND v.estado = 'EN_CURSO'
        LIMIT 1
    ");
    $stmt->execute([$_GET['venta_id'], $_SESSION['usuario_id']]);
    $venta = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($venta) {
        $_SESSION['venta_activa'] = [
            'cliente_id' => $venta['id_cliente'],
            'cliente_nombre' => $venta['nombre_completo'],
            'grupo_id' => $venta['grupo_id']
        ];
        $cliente_preseleccionado = [
            'id' => $venta['id_cliente'],
            'nombre' => $venta['nombre_completo'],
            'grupo_id' => $venta['grupo_id']
        ];
    }
}

// Verificar si hay ventas en curso a crédito y obtener información del tipo de pago
$hayVentasCredito = false;
$hayVentasContado = false;
$tiposCuotasActivas = [];

// Si hay una venta activa, verificar si hay productos a crédito y qué tipo de cuotas tienen
if (isset($_SESSION['venta_activa']) && isset($_SESSION['venta_activa']['cliente_id'])) {
    // Consultar los items de venta en curso para el cliente activo y determinar el tipo de cuota
    $stmt = $db->prepare("
        SELECT grupo_id, tipo_venta
        FROM venta_items
        WHERE cliente_id = ? 
        AND vendedor_id = ?
        AND estado = 'EN_CURSO'
    ");
    $stmt->execute([$_SESSION['venta_activa']['cliente_id'], $_SESSION['usuario_id']]);
    $itemsVenta = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    foreach ($itemsVenta as $item) {
        // Determinar tipo de venta
        if (isset($item['tipo_venta'])) {
            if ($item['tipo_venta'] == 'contado') {
                $hayVentasContado = true;
            } else if ($item['tipo_venta'] == 'credito') {
                $hayVentasCredito = true;
            }
        }
        
        // Determinar tipo de cuotas si hay grupo_id (crédito)
        if (!empty($item['grupo_id'])) {
            // Verificar si es semanal basado en el grupo_id
            // El grupo_id incluye 'venta_sem_' para cuotas semanales
            $esSemanal = strpos($item['grupo_id'], 'venta_sem_') !== false;
            $tiposCuotasActivas[] = $esSemanal ? 'semanal' : 'mensual';
        }
    }
}

// Variable para controlar la visualización de las opciones
$mostrarSoloMensuales = in_array('mensual', $tiposCuotasActivas);
$mostrarSoloSemanales = in_array('semanal', $tiposCuotasActivas);

// Si hay cuotas de ambos tipos, priorizar mostrar las del mismo tipo
if ($mostrarSoloMensuales && $mostrarSoloSemanales) {
    // Si hay ambos tipos, no restringir
    $mostrarSoloMensuales = false;
    $mostrarSoloSemanales = false;
}

// Variables para controlar la visualización entre crédito y contado
$deshabilitarContado = $hayVentasCredito;
$deshabilitarCredito = $hayVentasContado;

// Segundo - Si no hay venta_id pero hay venta activa en sesión
if (isset($_SESSION['venta_activa']['cliente_id'])) {
    $stmt = $db->prepare("
        SELECT 
            id_cliente,
            CONCAT(nombre, ' ', apellidos) as nombre_completo
        FROM clientes 
        WHERE id_cliente = ?
    ");
    $stmt->execute([$_SESSION['venta_activa']['cliente_id']]);
    $cliente = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($cliente) {
        $cliente_preseleccionado = [
            'id' => $cliente['id_cliente'],
            'nombre' => $cliente['nombre_completo'],
            'grupo_id' => $_SESSION['venta_activa']['grupo_id'] ?? null
        ];
        
        // Guardar en sessionStorage
        echo "<script>
            sessionStorage.setItem('cliente_actual', JSON.stringify({
                id: '{$cliente['id_cliente']}',
                nombre: '" . addslashes($cliente['nombre_completo']) . "'
            }));
        </script>";
    }
}

// Verificar si hay una venta activa o cliente en sesión
$venta_activa = isset($_SESSION['venta_activa']);

// Añadir parámetro para forzar la limpieza de cliente
if (isset($_GET['reset_cliente']) && $_GET['reset_cliente'] == 1) {
    unset($_SESSION['venta_activa']['cliente_id']);
    unset($_SESSION['venta_activa']['cliente_nombre']);
    unset($_SESSION['venta_activa']['grupo_id']);
    unset($_SESSION['ultimo_cliente']);
    
    // Redirigir para limpiar la URL
    $redirect_url = $_SERVER['PHP_SELF'];
    if (isset($_GET['producto_id'])) {
        $redirect_url .= '?producto_id=' . intval($_GET['producto_id']);
    }
    header('Location: ' . $redirect_url);
    exit();
}

if ($venta_activa) {
    $cliente_preseleccionado = [
        'id' => $_SESSION['venta_activa']['cliente_id'],
        'nombre' => $_SESSION['venta_activa']['cliente_nombre'],
        'grupo_id' => $_SESSION['venta_activa']['grupo_id'] ?? null  // Usar operador de fusión null
    ];
} elseif (isset($_SESSION['ultimo_cliente'])) {
    // Usar cliente de la sesión si existe
    $cliente_preseleccionado = $_SESSION['ultimo_cliente'];
}

// Si hay un cliente preseleccionado, registrarlo en el log de depuración
if ($cliente_preseleccionado && file_exists('logs')) {
    $debug_info = "Cliente preseleccionado: " . print_r($cliente_preseleccionado, true);
    file_put_contents('logs/debug.log', date('Y-m-d H:i:s') . ': ' . $debug_info . PHP_EOL, FILE_APPEND);
}
?>

<?php
if (isset($_GET['producto_id'])) {
    // Limpiar datos de venta anterior si existe
    unset($_SESSION['venta_activa']);
    unset($_SESSION['cliente_id']);
    unset($_SESSION['cliente_nombre']);
    unset($_SESSION['grupo_id']);  // Cambiar borrador_id por grupo_id
    
    // Limpiar almacenamiento del navegador
    echo "<script>
        sessionStorage.clear();
        localStorage.removeItem('ultimo_cliente');
        localStorage.removeItem('cliente_actual');
        if (typeof limpiarDatosVentaActual === 'function') {
            limpiarDatosVentaActual();
        }
    </script>";
}

if (!isset($_SESSION['usuario_id'])) {
    header('Location: login.php');
    exit();
}

require_once 'includes/db.php';

$db = new Database();

// Obtener configuración - sin filtrar por ID ya que podría ser otra columna
$config = $db->query("SELECT * FROM configuracion")->fetch(PDO::FETCH_ASSOC);

// Si no hay configuración, usar valores por defecto
if (!$config) {
    $config = array(
        'nombre_comercio' => 'Mi Tienda',
        'razon_social' => 'Razón Social',
        'ruc' => 'RUC',
        'direccion' => 'Dirección',
        'telefono' => 'Teléfono',
        'correo' => 'correo@example.com',
        'sitio_web' => 'www.example.com',
        'facebook_url' => '',
        'instagram_url' => '',
        'whatsapp' => '',
        'logo' => 'default-logo.png',
        'favicon' => 'favicon.ico',
        'color_principal' => '#ff2b1c',
        'con_decimales' => 0,
        'moneda' => 'Gs.'
    );
}

$producto_id = isset($_GET['producto_id']) ? intval($_GET['producto_id']) : 0;

// Obtener nombre del operador desde la sesión
$operador = $db->query("SELECT nombre FROM usuarios WHERE id = " . $_SESSION['usuario_id'])->fetch(PDO::FETCH_ASSOC);

// Obtener datos del producto
$stmt = $db->prepare("SELECT id, codigo, titulo, descripcion, stock,
    precio_venta1, precio_venta2, precio_venta3,
    cuota2, cuota3, cuota4, cuota5, cuota6, cuota7, cuota8, cuota9, cuota10, 
    cuota11, cuota12, cuota13, cuota14, cuota15, cuota16, cuota17, cuota18, 
    cuota19, cuota20, cuota21, cuota22, cuota23, cuota24, cuota25, cuota26, 
    cuota27, cuota28, cuota29, cuota30, cuota31, cuota32, cuota33, cuota34, 
    cuota35, cuota36
    FROM productos WHERE id = ?");
$stmt->execute([$producto_id]);
$producto = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$producto) {
    die('Producto no encontrado');
}

// Obtener lista de clientes - usando el nombre correcto de la columna
$clientes = $db->query("SELECT id_cliente as id, nombre FROM clientes WHERE estado = 1");

// Después de la conexión a la base de datos, agregar:
$cliente = null;
$grupo_id = null;

// Si viene de una venta en curso, obtener el grupo_id
if (isset($_GET['venta_id'])) {
    $venta_id = intval($_GET['venta_id']);
    $stmt = $db->prepare("
        SELECT 
            c.id_cliente, 
            CONCAT(c.nombre, ' ', c.apellidos) as nombre_completo,
            v.grupo_id
        FROM venta_items v 
        JOIN clientes c ON v.cliente_id = c.id_cliente 
        WHERE v.id = ? AND v.estado = 'EN_CURSO'
        LIMIT 1
    ");
    $stmt->execute([$venta_id]);
    $cliente = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($cliente) {
        $_SESSION['venta_activa'] = [
            'cliente_id' => $cliente['id_cliente'],
            'cliente_nombre' => $cliente['nombre_completo'],
            'grupo_id' => $cliente['grupo_id']
        ];
        $cliente_preseleccionado = [
            'id' => $cliente['id_cliente'],
            'nombre' => $cliente['nombre_completo'],
            'grupo_id' => $cliente['grupo_id']
        ];
    }
}
echo getThemeCSS();
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Venta de Producto</title>
    <link rel="stylesheet" href="admin/css/bootstrap.min.css">
    <link rel="shortcut icon" href="uploads/config/<?php echo $config['favicon']; ?>">
    <meta name="color-scheme" content="light dark">
    <?php 
    require_once 'includes/dark_mode.php';
    echo getDarkModeStyles();
    ?>
    <style>
        :root {
            --color-primary: <?php echo $config['color_principal']; ?>;
        }

        /* Aplicar colores de la configuración */
        body, 
        .bg-light,
        .content-wrapper {
            background-color: <?php echo $config['color_fondo']; ?> !important;
            color: <?php echo $config['color_texto']; ?> !important;
        }

        .card,
        .modal-content,
        .form-control,
        .table {
            background-color: <?php echo $config['color_fondo']; ?> !important;
            color: <?php echo $config['color_texto']; ?> !important;
            border-color: rgba(<?php echo $config['color_texto']; ?>, 0.125);
        }

        /* Asegurar texto visible */
        p, h1, h2, h3, h4, h5, h6, span, label {
            color: <?php echo $config['color_texto']; ?> !important;
        }

        /* Mantener colores específicos para elementos interactivos */
        .btn-primary {
            background-color: var(--color-primary) !important;
            border-color: var(--color-primary) !important;
        }

        /* Ajustes para modo móvil */
        @media (max-width: 767.98px) {
            .producto-info {
                background-color: var(--color-primary) !important;
                color: #ffffff !important;
            }
            
            .content-wrapper {
                background-color: <?php echo $config['color_fondo']; ?> !important;
            }
        }

        /* Mantener los estilos existentes pero ajustados al tema */
        .form-check {
            border-bottom-color: rgba(<?php echo $config['color_texto']; ?>, 0.1);
        }

        .modal-header,
        .card-header {
            background-color: var(--color-primary) !important;
            color: #ffffff !important;
            border-bottom-color: rgba(<?php echo $config['color_texto']; ?>, 0.1);
        }

        /* Ajustes para inputs y controles de formulario */
        .form-control {
            background-color: <?php echo $config['color_fondo']; ?> !important;
            color: <?php echo $config['color_texto']; ?> !important;
            border-color: rgba(<?php echo $config['color_texto']; ?>, 0.2);
        }

        .form-control:focus {
            background-color: <?php echo $config['color_fondo']; ?> !important;
            color: <?php echo $config['color_texto']; ?> !important;
            border-color: var(--color-primary);
        }

        /* Estilos para la tabla en el modal */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(<?php echo $config['color_texto']; ?>, 0.05) !important;
        }

        /* Mantener legibilidad en el modal */
        .modal-body .table td,
        .modal-body .table th {
            color: <?php echo $config['color_texto']; ?> !important;
            border-color: rgba(<?php echo $config['color_texto']; ?>, 0.1);
        }

        /* Crear variable RGB del color principal para opacidad */
        <?php
        $hex = str_replace('#', '', $config['color_principal']);
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
        echo "--color-primary-rgb: {$r}, {$g}, {$b};";
        ?>

        /* Estilos base compartidos */
        .precios-container {
            margin-bottom: 1rem;
        }
        .form-check {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            margin: 0;
        }
        .codigo-stock {
            display: flex;
            justify-content: space-between;
            align-items: center;
            opacity: 0.8;
            margin: 0;
        }
        .producto-codigo, .stock {
            font-size: 0.9rem;
            margin: 0;
        }
        
        /* Estilo para el botón principal */
        .btn-primary {
            background-color: var(--color-primary) !important;
            border-color: var(--color-primary) !important;
        }
        .btn-primary:hover, 
        .btn-primary:focus, 
        .btn-primary:active {
            background-color: var(--color-primary) !important;
            border-color: var(--color-primary) !important;
            opacity: 0.9;
        }

        /* Estilos móviles */
        @media (max-width: 767.98px) {
            body {
                margin: 0;
                padding: 0;
                background: #f5f5f5;
            }
            .container {
                padding: 0;
                margin: 0;
                width: 100%;
            }
            .producto-info {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: var(--color-primary);
                color: white;
                padding: 1rem;
                padding-bottom: 1.5rem; /* Padding adicional abajo */
                z-index: 1000;
                max-height: 160px; /* Aumentado para acomodar 3 líneas */
                overflow: hidden;
            }
            .producto-meta {
                display: flex;
                justify-content: space-between;
                font-size: 0.9rem;
                margin-bottom: 0.5rem;
                opacity: 0.9;
            }
            .producto-titulo {
                font-size: 1rem; /* Reducido de 1.2rem */
                margin: 0.5rem 0;
                color: white;
                font-weight: bold;
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 2; /* Limitar a 2 líneas *//
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .codigo-stock {
                display: flex;
                justify-content: space-between;
                align-items: center;
                opacity: 0.8;
                margin: 0;
            }
            .producto-codigo, .stock {
                font-size: 0.9rem;
                margin: 0;
            }
            .content-wrapper {
                margin-top: 150px; /* Aumentado de 130px */
                padding: 1rem;
                padding-bottom: 80px;
            }
            .precios-container {
                display: block !important;
                margin-bottom: 1rem;
                background: white;
            }
            .precio-bloque {
                margin-bottom: 1rem;
                width: 100%;
            }
            #credito.precios-container {
                display: block !important;
            }
            .card {
                margin-bottom: 1rem;
            }
            .content-wrapper {
                padding: 1rem;
                padding-bottom: 80px;
            }
            .form-check {
                padding: 1rem;
                border-bottom: 1px solid #eee;
                margin: 0;
            }
            .row {
                margin: 1rem 0;
                padding: 1rem;
                background: white;
            }
            .btn-primary {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0;
                border-radius: 0;
                padding: 1rem;
                z-index: 1000;
                background-color: var(--color-primary) !important;
                border-color: var(--color-primary) !important;
            }

            /* Estilos para el modal en móvil */
            .modal-dialog {
                margin: 0;
                height: 100vh;
                max-width: 100%;
            }

            .modal-content {
                height: 100%;
                border: 0;
                border-radius: 0;
                display: flex;
                flex-direction: column;
            }

            .modal-header {
                padding: 1rem;
                background: var(--color-primary);
                color: white;
            }

            .modal-header .close {
                color: white;
                opacity: 1;
            }

            .modal-body {
                flex: 1;
                overflow-y: auto;
                padding: 0;
            }

            .modal-body .form-group {
                position: sticky;
                top: 0;
                z-index: 1;
                padding: 1rem;
                background: white;
                margin: 0;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .modal-body .table-responsive {
                margin-top: 0;
            }

            .modal-body .table {
                margin-bottom: 0;
            }

            .modal-body .table td, 
            .modal-body .table th {
                padding: 0.75rem 1rem;
            }

            /* Ajustar botón seleccionar en móvil */
            .modal-body .btn-sm {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }

            /* Ajustes de tabla en modal para móvil */
            .modal-body .table {
                font-size: 0.9rem;
                width: 100%;
                min-width: 100%;
            }

            .modal-body .table th,
            .modal-body .table td {
                padding: 0.75rem 0.5rem;
                white-space: normal;
                vertical-align: middle;
            }

            .modal-body .table th:last-child,
            .modal-body .table td:last-child {
                width: 80px;
                min-width: 80px;
                text-align: center;
                padding-right: 0.5rem;
            }

            .modal-body .btn-sm {
                padding: 0.375rem 0.5rem;
                font-size: 0.875rem;
                width: 100%;
            }

            .modal-body .table-responsive {
                border: none;
                margin: 0;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Ajustes específicos para la tabla del modal */
            .modal-body .table td:last-child {
                width: 60px;
                min-width: 60px;
                padding: 0.5rem;
            }

            .modal-body .table .btn {
                padding: 0.375rem;
                line-height: 1;
                width: 100%;
                white-space: nowrap;
                font-size: 0.875rem;
                display: block;
                border-radius: 0.25rem;
            }

            /* Hacer las columnas de la tabla más compactas */
            .modal-body .table th,
            .modal-body .table td {
                padding: 0.75rem 0.25rem;
                font-size: 0.875rem;
            }

            /* Ocultar texto largo en columnas */
            .modal-body .table td {
                max-width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* La última columna (acciones) siempre visible */
            .modal-body .table td:last-child {
                position: sticky;
                right: 0;
                background: white;
                box-shadow: -2px 0 4px rgba(0,0,0,0.1);
            }

            /* Estilos específicos para la tabla en modal */
            .modal-body .table {
                display: table;
                width: 100%;
                min-width: 100%;
                margin: 0;
            }

            .modal-body .table thead {
                background: #f8f9fa;
            }

            .modal-body .table th,
            .modal-body .table td {
                display: table-cell;
                vertical-align: middle;
                padding: 8px;
                font-size: 0.875rem;
                border-bottom: 1px solid #dee2e6;
            }

            .modal-body .table td:last-child {
                width: 50px;
                padding: 4px;
                text-align: center;
                position: static;
            }

            /* Ajustes del botón OK */
            .modal-body .table .btn {
                padding: 4px 8px;
                line-height: 1.2;
                height: auto;
                min-width: 40px;
                margin: 0;
                font-size: 0.875rem;
                border-radius: 3px;
            }

            /* Ajustes específicos para la tabla en modal móvil */
            .modal-body .table th:nth-child(3),
            .modal-body .table td:nth-child(3) {
                display: none; /* Ocultar columna de teléfono */
            }

            .modal-body .table {
                font-size: 0.875rem;
            }

            .modal-body .table td {
                padding: 8px 4px;
            }

            /* Ajustar anchos de columnas */
            .modal-body .table td:first-child {
                width: 50%;
            }
            
            .modal-body .table td:nth-child(2) {
                width: 30%;
            }

            .modal-body .table td:last-child {
                width: 20%;
                padding: 4px;
                position: relative;
            }

            /* Reset de estilos que puedan interferir */
            .modal-body .table td {
                position: static;
                display: table-cell;
            }

            /* Estilo específico para el botón */
            .modal-body .table .btn {
                padding: 4px;
                font-size: 12px;
                line-height: 1.2;
                width: auto;
                display: inline-block;
                margin: 0;
            }

            /* Ajustes para tabla en móvil */
            @media (max-width: 767.98px) {
                // ...existing mobile styles...

                /* Estilos para la tabla en móvil */
                .modal-body .table th:last-child,
                .modal-body .table td:last-child {
                    display: none; /* Ocultar columna de acción */
                }

                .modal-body .table tr {
                    cursor: pointer;
                }

                .modal-body .table tr:active {
                    background-color: rgba(var(--color-primary-rgb), 0.1);
                }

                /* Ajustar anchos sin la columna de acción */
                .modal-body .table td:first-child {
                    width: 60%;
                }
                
                .modal-body .table td:nth-child(2) {
                    width: 40%;
                }
            }

            /* Estilos para el selector de cliente en móvil */
            .btn-buscar-cliente-texto {
                display: none;
            }
            
            .btn-buscar-cliente {
                padding: 0.375rem 0.75rem;
                min-width: 42px;
            }

            .input-group-append {
                margin-left: -1px;
            }
        }

        /* Estilos desktop */
        @media (min-width: 768px) {
            .container {
                max-width: 960px;
                margin: 2rem auto;
                padding: 2rem;
            }
            .row-precios {
                display: flex;
                gap: 1rem;
                margin: 0 -0.5rem;
            }
            .precio-bloque {
                flex: 1;
                padding: 0 0.5rem;
                min-width: 0; /* Previene desbordamiento */
            }
            .card {
                height: 100%;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .producto-info {
                background: var(--color-primary);
                color: white;
                padding: 1.5rem;
                border-radius: 8px;
                margin-bottom: 2rem;
            }
            .producto-titulo {
                font-size: 1.5rem;
                margin: 0.5rem 0;
                font-weight: bold;
            }
            .producto-meta {
                margin-bottom: 0.5rem;
            }
            .codigo-stock {
                margin-top: 0.5rem;
            }

            .btn-buscar-cliente-texto {
                display: inline;
            }
        }

        /* Estilos para la sección de cliente */
        .input-group {
            margin-bottom: 1rem;
        }

        .btn-buscar-cliente {
            white-space: nowrap;
        }

        /* Estilos para el checkbox de primera cuota */
        .custom-control-input:checked ~ .custom-control-label::before {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }
        
        .custom-control-input:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
        }
        
        /* Estilos para la sección de cliente */

        /* Estilo para el botón de reset */
        .btn-reset-cliente {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            margin-left: 0.5rem;
            background-color: #f8f9fa;
            border-color: #ddd;
        }

        /* Agregar dentro de la sección de <style> */
        .form-check + .form-check.ml-4 {
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
            margin-top: -0.5rem;
        }

        @media (max-width: 767.98px) {
            .form-check.ml-4 {
                margin-left: 1rem !important;
                background-color: rgba(0,0,0,0.02);
            }
        }
    </style>
    
    <!-- Modal modificado para mejor visualización móvil -->
    <div class="modal fade" id="modalCliente" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buscar Cliente</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" id="buscarCliente" class="form-control form-control-lg" 
                               placeholder="Buscar por nombre, apellido o documento..."
                               autocomplete="off">
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Cliente</th>
                                    <th>Documento</th>
                                    <th class="d-none d-md-table-cell">Teléfono</th>
                                    <th class="d-none d-md-table-cell">Acción</th>
                                </tr>
                            </thead>
                            <tbody id="resultadosClientes">
                                <tr>
                                    <td colspan="4" class="text-center py-3">
                                        Ingrese un término de búsqueda
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</head>
<body class="bg-light">
    <div class="container">
        <script>
        // Función para guardar datos del cliente
        function guardarDatosCliente(id, nombre) {
            sessionStorage.setItem('cliente_actual', JSON.stringify({
                id: id,
                nombre: nombre
            }));
        }

        // Función para obtener datos del cliente
        function obtenerDatosCliente() {
            const datos = sessionStorage.getItem('cliente_actual');
            return datos ? JSON.parse(datos) : null;
        }
        
        // Función para limpiar datos del cliente
        function limpiarDatosCliente() {
            sessionStorage.removeItem('cliente_actual');
            localStorage.removeItem('cliente_actual');
            localStorage.removeItem('ultimo_cliente');
            console.log('Datos del cliente limpiados del almacenamiento local');
        }
        
        // Limpiar cualquier cliente almacenado al cargar la página
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Storage al cargar:', {
                sessionStorage: sessionStorage.getItem('cliente_actual'),
                localStorage_cliente: localStorage.getItem('cliente_actual'),
                localStorage_ultimo: localStorage.getItem('ultimo_cliente')
            });
        });
        </script>
        
        <div class="content-wrapper">
            <!-- Reorganización del header para móvil y desktop -->
            <div class="producto-info">
                <div class="producto-meta">
                    <div class="d-flex align-items-center gap-3">
                        <span class="operador">Operador: <?php echo htmlspecialchars($operador['nombre']); ?></span>
                        <?php if ($cliente_preseleccionado): ?>
                        <span class="separador">|</span>
                        <span class="cliente">
                            Cliente: <?php echo htmlspecialchars($cliente_preseleccionado['nombre']); ?>
                            <a href="?producto_id=<?php echo $producto_id; ?>&reset_cliente=1" 
                               class="btn btn-sm btn-reset-cliente" title="Cambiar cliente">
                                <small>✖</small>
                            </a>
                        </span>
                        <?php endif; ?>
                    </div>
                </div>
                <h2 class="producto-titulo"><?php echo htmlspecialchars($producto['titulo']); ?></h2>
                <div class="codigo-stock">
                    <p class="producto-codigo">Código: <?php echo htmlspecialchars($producto['codigo']); ?></p>
                    <p class="stock">Stock: <?php echo number_format($producto['stock'], 0, ',', '.'); ?></p>
                </div>
            </div>

            <form id="formVenta" method="POST">
                <div class="mb-3">
                    <div class="input-group">
                        <input type="text" class="form-control" id="cliente_nombre" 
                               value="<?php echo $cliente_preseleccionado ? htmlspecialchars($cliente_preseleccionado['nombre']) : ''; ?>" 
                               placeholder="Seleccione un cliente"
                               readonly required>
                        <input type="hidden" name="cliente_id" id="cliente_id" 
                               value="<?php echo $cliente_preseleccionado ? htmlspecialchars($cliente_preseleccionado['id']) : ''; ?>" 
                               required>
                        <div class="input-group-append" id="btn-buscar-container" 
                             <?php echo $cliente_preseleccionado ? 'style="display:none;"' : ''; ?>>
                            <button type="button" class="btn btn-outline-secondary btn-buscar-cliente" 
                                    onclick="$('#modalCliente').modal('show')">
                                <img src="admin/icons/search.svg" width="16" height="16" alt="buscar">
                                <span class="btn-buscar-cliente-texto">Buscar Cliente</span>
                            </button>
                        </div>
                        <?php if ($cliente_preseleccionado): ?>
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-secondary" 
                                    onclick="location.href='?producto_id=<?php echo $producto_id; ?>&reset_cliente=1'">
                                <span>Cambiar</span>
                            </button>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>

                <input type="hidden" name="producto_id" value="<?php echo $producto_id; ?>">
                <input type="hidden" name="tipo_venta" id="tipo_venta" value="contado">

                <!-- Contenedores de precios -->
                <div class="row-precios">
                    <div class="precio-bloque">
                        <div class="precios-container active" id="contado">
                            <div class="card <?php echo $deshabilitarContado ? 'bg-light' : ''; ?>">
                                <div class="card-header <?php echo $deshabilitarContado ? 'bg-secondary' : 'bg-primary'; ?> text-white">
                                    <h5 class="mb-0">Precios de Contado 
                                    <?php if ($deshabilitarContado): ?>
                                        <small>(No disponible - Ya hay artículos a crédito)</small>
                                    <?php endif; ?>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <?php for($i = 1; $i <= 3; $i++): ?>
                                        <div class="form-check">
                                            <input type="radio" id="precio<?php echo $i; ?>" 
                                                name="tipo_precio" value="contado_<?php echo $i; ?>" 
                                                data-tipo="contado"
                                                data-precio="<?php echo $producto['precio_venta'.$i]; ?>"
                                                <?php echo $deshabilitarContado ? 'disabled' : ''; ?>>
                                            <label class="form-check-label <?php echo $deshabilitarContado ? 'text-muted' : ''; ?>" for="precio<?php echo $i; ?>">
                                                <strong>Precio <?php echo $i; ?>:</strong> 
                                                <?php echo $config['moneda'] . ' ' . number_format($producto['precio_venta'.$i], 0, ',', '.'); ?>
                                            </label>
                                        </div>
                                    <?php endfor; ?>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="precio-bloque">
                        <div class="precios-container" id="credito">
                            <div class="card <?php echo $deshabilitarCredito ? 'bg-light' : ''; ?>">
                                <div class="card-header <?php echo $deshabilitarCredito ? 'bg-secondary' : 'bg-success'; ?> text-white">
                                    <h5 class="mb-0">Precios en Cuotas
                                    <?php if ($deshabilitarCredito): ?>
                                        <small>(No disponible - Ya hay artículos al contado)</small>
                                    <?php endif; ?>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <?php 
                                    // Generar dinámicamente las cuotas disponibles (2 a 36)
                                    for($c = 2; $c <= 36; $c++): 
                                        if(isset($producto['cuota'.$c]) && $producto['cuota'.$c] > 0): 
                                            $monto_cuota = $producto['cuota'.$c];
                                            $monto_total = $monto_cuota * $c;
                                            // Calcular valores para cuotas semanales
                                            $cuotas_semanales = $c * 4;
                                            $monto_cuota_semanal = round($monto_cuota / 4);
                                    ?>
                                        <div class="form-check">
                                            <input type="radio" id="cuota<?php echo $c; ?>" 
                                                name="tipo_precio" value="credito_<?php echo $c; ?>" 
                                                data-tipo="credito"
                                                data-cuotas="<?php echo $c; ?>"
                                                data-monto-cuota="<?php echo $monto_cuota; ?>"
                                                data-precio="<?php echo $monto_total; ?>"
                                                <?php echo ($mostrarSoloSemanales || $deshabilitarCredito) ? 'disabled' : ''; ?>>
                                            <label class="form-check-label <?php echo ($mostrarSoloSemanales || $deshabilitarCredito) ? 'text-muted' : ''; ?>" for="cuota<?php echo $c; ?>">
                                                <strong><?php echo $c; ?> Cuotas mensuales de 
                                                    <?php echo $config['moneda'] . ' ' . 
                                                    number_format($monto_cuota, 0, ',', '.'); ?></strong><br>
                                                <small>Total: <?php echo $config['moneda'] . ' ' . 
                                                    number_format($monto_total, 0, ',', '.'); ?></small>
                                                <?php if ($mostrarSoloSemanales): ?>
                                                <br><small class="text-danger">No disponible - Ya hay artículos con cuotas semanales</small>
                                                <?php elseif ($deshabilitarCredito): ?>
                                                <br><small class="text-danger">No disponible - Ya hay artículos al contado</small>
                                                <?php endif; ?>
                                            </label>
                                        </div>
                                        <!-- Agregar opción semanal -->
                                        <div class="form-check ml-4">
                                            <input type="radio" id="cuota<?php echo $c; ?>_semanal" 
                                                name="tipo_precio" value="credito_<?php echo $c; ?>_semanal" 
                                                data-tipo="credito"
                                                data-cuotas="<?php echo $cuotas_semanales; ?>"
                                                data-monto-cuota="<?php echo $monto_cuota_semanal; ?>"
                                                data-precio="<?php echo $monto_total; ?>"
                                                <?php echo ($mostrarSoloMensuales || $deshabilitarCredito) ? 'disabled' : ''; ?>>
                                            <label class="form-check-label <?php echo ($mostrarSoloMensuales || $deshabilitarCredito) ? 'text-muted' : ''; ?>" for="cuota<?php echo $c; ?>_semanal">
                                                <strong><?php echo $cuotas_semanales; ?> Cuotas semanales de 
                                                    <?php echo $config['moneda'] . ' ' . 
                                                    number_format($monto_cuota_semanal, 0, ',', '.'); ?></strong><br>
                                                <small>Total: <?php echo $config['moneda'] . ' ' . 
                                                    number_format($monto_total, 0, ',', '.'); ?></small>
                                                <?php if ($mostrarSoloMensuales): ?>
                                                <br><small class="text-danger">No disponible - Ya hay artículos con cuotas mensuales</small>
                                                <?php elseif ($deshabilitarCredito): ?>
                                                <br><small class="text-danger">No disponible - Ya hay artículos al contado</small>
                                                <?php endif; ?>
                                            </label>
                                        </div>
                                    <?php 
                                        endif; 
                                    endfor; 
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cantidad y precio -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="font-weight-bold">Cantidad:</label>
                            <input type="number" name="cantidad" class="form-control form-control-lg" required min="1" value="1">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="font-weight-bold">Precio Unitario:</label>
                            <input type="text" class="form-control form-control-lg precio-unitario" readonly>
                            <input type="hidden" name="precio_unitario" id="precio_unitario_hidden">
                        </div>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <button type="button" class="btn btn-primary btn-lg px-5" id="btnProcesarVenta">
                        <img src="admin/icons/check.svg" class="mr-2" width="16" height="16" alt="procesar">
                        Procesar Venta
                    </button>
                    <a href="index.php" class="btn btn-secondary btn-lg px-5 ml-2">
                        <img src="admin/icons/arrow-left.svg" class="mr-2" width="16" height="16" alt="volver">
                        Volver
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Scripts con rutas corregidas -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="js/modal-clientes.js"></script>
    <script>
        $(document).ready(function() {
            // Información de debug sobre restricciones de cuotas
            console.log('Estado de restricciones de cuotas:', {
                hayVentasCredito: <?php echo $hayVentasCredito ? 'true' : 'false' ?>,
                hayVentasContado: <?php echo $hayVentasContado ? 'true' : 'false' ?>,
                mostrarSoloMensuales: <?php echo $mostrarSoloMensuales ? 'true' : 'false' ?>,
                mostrarSoloSemanales: <?php echo $mostrarSoloSemanales ? 'true' : 'false' ?>,
                tiposCuotasActivas: <?php echo json_encode($tiposCuotasActivas) ?>
            });
            
            // Verificar si hay cliente guardado
            const clienteGuardado = obtenerDatosCliente();
            console.log('Cliente guardado en storage:', clienteGuardado);
            
            // Seleccionar automáticamente una opción de precio disponible al cargar
            if (<?php echo $hayVentasContado ? 'true' : 'false' ?>) {
                // Si hay ventas al contado, seleccionar el primer precio al contado disponible
                const primerPrecioContado = $('input[data-tipo="contado"]:not(:disabled)').first();
                if (primerPrecioContado.length) {
                    primerPrecioContado.prop('checked', true);
                    primerPrecioContado.trigger('click');
                }
            } else if (<?php echo $hayVentasCredito ? 'true' : 'false' ?>) {
                // Si hay ventas a crédito, seleccionar el primer precio a crédito disponible
                const primerPrecioCredito = $('input[data-tipo="credito"]:not(:disabled)').first();
                if (primerPrecioCredito.length) {
                    primerPrecioCredito.prop('checked', true);
                    primerPrecioCredito.trigger('click');
                }
            }
            
            // Si hay cliente preseleccionado, establecer sus datos
            <?php if ($cliente_preseleccionado): ?>
            console.log('Cliente preseleccionado desde PHP:', {
                id: '<?= $cliente_preseleccionado['id'] ?>',
                nombre: '<?= htmlspecialchars($cliente_preseleccionado['nombre']) ?>',
                grupo_id: '<?= $cliente_preseleccionado['grupo_id'] ?? "" ?>'
            });
            <?php else: ?>
            // Si no hay cliente preseleccionado pero hay uno guardado en sessionStorage
            if (clienteGuardado) {
                $('#cliente_id').val(clienteGuardado.id);
                $('#cliente_nombre').val(clienteGuardado.nombre);
                $('#btn-buscar-container').hide(); // Ocultar botón de búsqueda
            } else {
                console.log('No hay cliente preseleccionado ni guardado');
                $('#btn-buscar-container').show(); // Mostrar botón de búsqueda
            }
            <?php endif; ?>

            // AJAX para procesar la venta - Implementación corregida
            $('#btnProcesarVenta').on('click', function(e) {
                e.preventDefault();
                console.log("Botón Procesar Venta clickeado");

                // Deshabilitar el botón temporalmente
                const $btn = $(this);
                $btn.prop('disabled', true);

                // Validaciones iniciales
                let errores = [];
                if (!$('#cliente_id').val()) errores.push('Seleccione un cliente');
                if (!$('input[name="tipo_precio"]:checked').val()) errores.push('Seleccione un tipo de precio');
                const cantidad = $('input[name="cantidad"]').val();
                if (!cantidad || parseInt(cantidad) <= 0) errores.push('Ingrese una cantidad válida');

                if (errores.length > 0) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de validación',
                        html: errores.join('<br>')
                    });
                    $btn.prop('disabled', false);
                    return;
                }

                // Obtener el radio button seleccionado
                const radioSeleccionado = $('input[name="tipo_precio"]:checked');
                
                // Preparar datos de la venta
                const datosVenta = {
                    producto_id: <?php echo $producto_id; ?>,
                    cliente_id: $('#cliente_id').val(),
                    tipo_precio: radioSeleccionado.val(),
                    es_semanal: radioSeleccionado.val().includes('_semanal'),
                    cantidad_cuotas: radioSeleccionado.data('cuotas'),
                    tipo_venta: $('#tipo_venta').val(),
                    cantidad: cantidad,
                    precio_unitario: $('#precio_unitario_hidden').val(),
                    cliente_nombre: $('#cliente_nombre').val(),
                    // Agregar datos adicionales para cuotas
                    cuotas: radioSeleccionado.data('cuotas'),
                    monto_cuota: radioSeleccionado.data('monto-cuota'),
                    es_semanal: radioSeleccionado.val().includes('_semanal')
                };

                console.log('Enviando datos:', datosVenta);

                // Mostrar loading
                Swal.fire({
                    title: 'Procesando venta...',
                    text: 'Por favor espere',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Realizar petición AJAX
                $.ajax({
                    url: 'guardar_datos_venta.php',
                    type: 'POST',
                    data: datosVenta,
                    dataType: 'json',
                    success: function(response) {
                        console.log('Respuesta del servidor:', response);
                        
                        if (response.success) {
                            // Limpiar datos almacenados
                            sessionStorage.removeItem('cliente_actual');
                            localStorage.removeItem('ultimo_cliente');
                            
                            // Redirigir a ventas_en_curso.php con el ID de venta
                            if (response.venta_id) {
                                window.location.href = `ventas_en_curso.php?venta_id=${response.venta_id}`;
                            } else {
                                window.location.href = 'index.php';
                            }
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Error al procesar la venta'
                            });
                            $btn.prop('disabled', false);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error AJAX:', {xhr, status, error});
                        let errorMsg = 'Error al procesar la venta';
                        try {
                            const response = JSON.parse(xhr.responseText);
                            errorMsg = response.message || errorMsg;
                        } catch(e) {
                            console.error('Error al parsear respuesta:', e);
                        }
                        
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg
                        });
                        $btn.prop('disabled', false);
                    }
                });
            });

            // Seleccionar el primer precio por defecto
            // Actualizar tipo de venta y mostrar/ocultar opción de primera cuota
            $('input[name="tipo_precio"]').on('click', function() {
                const tipo = $(this).data('tipo');
                $('#tipo_venta').val(tipo);

                // Actualizar precio unitario mostrado
                const precio = $(this).data('precio');
                $('.precio-unitario').val(precio.toLocaleString('es-PY'));
                $('#precio_unitario_hidden').val(precio);
                
                // Mostrar u ocultar opción de primera cuota
                if (tipo === 'credito') {
                    $('#divPrimeraCuota').show();
                } else {
                    $('#divPrimeraCuota').hide();
                    $('#primera_cuota').prop('checked', false);
                }
            });

            // Verificar estado de los radio buttons
            console.log('Estado de los radio buttons:');
            $('input[name="tipo_precio"]').each(function() {
                console.log($(this).attr('id'), {
                    tipo: $(this).data('tipo'),
                    value: $(this).val(),
                    disabled: $(this).prop('disabled'),
                    checked: $(this).prop('checked')
                });
            });
            
            // Seleccionar el primer precio por defecto
            $('input[name="tipo_precio"]').on('click', function() {
                const tipo = $(this).data('tipo');
                $('#tipo_venta').val(tipo);

                // Actualizar precio unitario mostrado
                const precio = $(this).data('precio');
                $('.precio-unitario').val(precio.toLocaleString('es-PY'));
                $('#precio_unitario_hidden').val(precio);
            });
        });
    </script>
    
    <!-- Banner de Métodos de Pago -->
    <?php include 'includes/payment_methods_banner.php'; ?>
    
</body>
</html>
