<?php
// Configuración inicial
ini_set('display_errors', 0);
ini_set('log_errors', 1);
error_reporting(E_ALL);
ob_start();

// Establecer la ruta absoluta para error_log
ini_set('error_log', 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');

// Manejo de errores personalizado para capturar cualquier salida inesperada
set_error_handler(function($errno, $errstr, $errfile, $errline) {
    error_log("Error [$errno] en $errfile:$errline - $errstr", 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
    // Evitar que se muestre el error al usuario
});

// Agregar una función de apagado para capturar errores fatales
register_shutdown_function(function() {
    $error = error_get_last();
    if ($error && in_array($error['type'], [E_ERROR, E_PARSE, E_CORE_ERROR, E_COMPILE_ERROR])) {
        // Registrar el error fatal en el archivo de logs
        error_log("Fatal Error [{$error['type']}]: {$error['message']} en {$error['file']} en la línea {$error['line']}", 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        
        // Enviar una respuesta JSON válida si no se han enviado cabeceras
        if (!headers_sent()) {
            http_response_code(500);
            echo json_encode([
                'success' => false,
                'message' => 'Error del servidor. Inténtalo nuevamente más tarde.'
            ], JSON_UNESCAPED_UNICODE);
        }
    }
});

// Verificar que el directorio de logs exista y sea escribible
$logDir = '../logs/';
if (!is_dir($logDir)) {
    mkdir($logDir, 0777, true);
}
if (!is_writable($logDir)) {
    error_log("El directorio de logs no es escribible: $logDir", 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
    // Puedes optar por detener la ejecución si el log no es escribible
    http_response_code(500);
    echo json_encode([
        'success' => false,
        'message' => 'Error del servidor. Inténtalo nuevamente más tarde.'
    ], JSON_UNESCAPED_UNICODE);
    exit;
}

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

function comprimirImagen($source, $destination, $quality = 75, $maxWidth = 1200) {
    list($width, $height, $type) = getimagesize($source);
    
    // Calcular nuevas dimensiones manteniendo el aspect ratio
    if ($width > $maxWidth) {
        $newWidth = $maxWidth;
        $newHeight = ($height / $width) * $maxWidth;
    } else {
        $newWidth = $width;
        $newHeight = $height;
    }

    // Crear nueva imagen
    $thumb = imagecreatetruecolor($newWidth, $newHeight);

    // Determinar tipo de imagen y crear desde el origen
    switch ($type) {
        case IMAGETYPE_JPEG:
            $source_image = imagecreatefromjpeg($source);
            break;
        case IMAGETYPE_PNG:
            $source_image = imagecreatefrompng($source);
            // Preservar transparencia
            imagecolortransparent($thumb, imagecolorallocatealpha($thumb, 0, 0, 0, 127));
            imagealphablending($thumb, false);
            imagesavealpha($thumb, true);
            break;
        case IMAGETYPE_GIF:
            $source_image = imagecreatefromgif($source);
            break;
        default:
            return false;
    }

    // Redimensionar
    imagecopyresampled($thumb, $source_image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);

    // Guardar imagen
    switch ($type) {
        case IMAGETYPE_JPEG:
            imagejpeg($thumb, $destination, $quality);
            break;
        case IMAGETYPE_PNG:
            // Para PNG la calidad es de 0-9, convertir el rango
            $pngQuality = ($quality - 100) / 11.111111;
            $pngQuality = round(abs($pngQuality));
            imagepng($thumb, $destination, $pngQuality);
            break;
        case IMAGETYPE_GIF:
            imagegif($thumb, $destination);
            break;
    }

    // Liberar memoria
    imagedestroy($thumb);
    imagedestroy($source_image);

    return true;
}

session_start();
// Verificar si el usuario está logueado y tiene los roles permitidos
if (!isset($_SESSION['usuario_id']) || 
    empty($_SESSION['usuario_id']) || 
    !in_array($_SESSION['rol'], ['admin', 'registrador_de_productos'])) {
    header('Location: ../login.php');
    exit;
}

// Recuperar datos del formulario si hubo error
$formData = [];
if (isset($_SESSION['form_data']) && isset($_SESSION['form_error'])) {
    $formData = $_SESSION['form_data'];
    unset($_SESSION['form_data']);
    unset($_SESSION['form_error']);
}

$db = new Database();

// Obtener configuración del sitio (después de crear la instancia de Database)
$config = $db->query("SELECT favicon, logo, con_decimales, color_principal, color_secundario FROM configuracion WHERE id = 1")->fetch();
$favicon = $config['favicon'] ? '../uploads/config/' . $config['favicon'] : '';
$logo = $config['logo'] ? '../uploads/config/' . $config['logo'] : '';
$conDecimales = (int)$config['con_decimales'];
$colorPrincipal = $config['color_principal'] ?? '#28a745'; // Color por defecto si no hay valor
$colorSecundario = $config['color_secundario'] ?? '#6c757d'; // Color por defecto si no hay valor

// Obtener los datos para los combos - Agregar antes del HTML
$proveedores = $db->query("SELECT id, nombre FROM proveedores ORDER BY nombre")->fetchAll();
if ($proveedores === false) {
    error_log("Error al obtener proveedores: " . print_r($db->errorInfo(), true));
    $proveedores = [];
}

$secciones = $db->query("SELECT id, nombre FROM secciones ORDER BY nombre")->fetchAll();
if ($secciones === false) {
    error_log("Error al obtener secciones: " . print_r($db->errorInfo(), true));
    $secciones = [];
}

$subsecciones = $db->query("SELECT id, nombre FROM subsecciones ORDER BY nombre")->fetchAll();
if ($subsecciones === false) {
    error_log("Error al obtener subsecciones: " . print_r($db->errorInfo(), true));
    $subsecciones = [];
}

$marcas = $db->query("SELECT id, nombre FROM marcas ORDER BY nombre")->fetchAll();
if ($marcas === false) {
    error_log("Error al obtener marcas: " . print_r($db->errorInfo(), true));
    $marcas = [];
} // Faltaba este cierre

// Procesar solicitud POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Limpiar cualquier salida previa
    ob_clean();
    
    header('Content-Type: application/json; charset=utf-8');
    
    try {
        // Añadir un mensaje de depuración
        error_log("Inicio del bloque try", 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        
        // Validación del código
        $codigo = $_POST['codigo'] ?? '';
        if (empty($codigo)) {
            throw new Exception("El código del producto es requerido");
        }

        // Validar si el código ya existe
        $checkCodigo = $db->query("SELECT id FROM productos WHERE codigo = ?", [$codigo])->fetch();
        if ($checkCodigo) {
            throw new Exception("El código del producto ya existe en la base de datos");
        }

        // Procesar imágenes
        $imagenes = [];
        if (isset($_FILES['imagenes']) && is_array($_FILES['imagenes']['name'])) {
            $uploadDir = '../uploads/productos/';
            if (!file_exists($uploadDir)) {
                mkdir($uploadDir, 0777, true);
            }
            
            foreach ($_FILES['imagenes']['tmp_name'] as $key => $tmp_name) {
                if ($_FILES['imagenes']['error'][$key] === UPLOAD_ERR_OK) {
                    $fileName = $_FILES['imagenes']['name'][$key];
                    $extension = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
                    
                    if (in_array($extension, ['jpg', 'jpeg', 'png', 'gif'])) {
                        $newName = uniqid('prod_') . '.' . $extension;
                        $uploadPath = $uploadDir . $newName;
                        
                        if (move_uploaded_file($tmp_name, $uploadPath)) {
                            comprimirImagen($uploadPath, $uploadPath); // Comprimir imagen
                            $imagenes[] = $newName;
                        }
                    }
                }
            }
        }

        // Verificar límite de imágenes
        if (count($imagenes) > 6) {
            throw new Exception("No se pueden guardar más de 6 imágenes por producto");
        }

        // Convertir array de imágenes a JSON
        $imagenesJson = json_encode($imagenes);
        if (json_last_error() !== JSON_ERROR_NONE) {
            throw new Exception("Error al procesar las imágenes");
        }

        // Preparar datos del producto
        $datos = [
            'codigo' => $codigo,
            'titulo' => trim($_POST['titulo']),
            'descripcion' => trim($_POST['descripcion']),
            'precio_compra' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['precio_compra'])),
            'iva' => intval($_POST['iva']),
            'stock' => intval($_POST['stock']),
            'recargo1' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['recargo1'])),
            'recargo2' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['recargo2'])),
            'recargo3' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['recargo3'])),
            'precio_venta1' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['precio_venta1'])),
            'precio_venta2' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['precio_venta2'])),
            'precio_venta3' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['precio_venta3'])),
            'id_proveedor' => intval($_POST['id_proveedor']),
            'id_seccion' => intval($_POST['id_seccion']),
            'id_subseccion' => intval($_POST['id_subseccion']),
            'id_marca' => intval($_POST['id_marca']),
            'visible' => isset($_POST['visible']) ? 1 : 0
        ];

        // Agregar datos de cuotas dinámicamente (de 2 a 36)
        for ($i = 2; $i <= 36; $i++) {
            $datos["cuota$i"] = floatval(str_replace([',', '.'], ['.', '.'], $_POST["cuota$i"] ?? 0));
        }

        // Crear la consulta preparada con todas las cuotas (2 a 36)
        $cuotas_campos = [];
        $cuotas_placeholders = [];
        for ($i = 2; $i <= 36; $i++) {
            $cuotas_campos[] = "cuota$i";
            $cuotas_placeholders[] = "?";
        }
        
        $sql = "INSERT INTO productos (
            codigo, titulo, descripcion, precio_compra, 
            iva, stock, recargo1, recargo2, recargo3,
            precio_venta1, precio_venta2, precio_venta3,
            " . implode(', ', $cuotas_campos) . ",
            id_proveedor, id_seccion, id_subseccion, 
            id_marca, imagenes, visible
        ) VALUES (
            ?,?,?,?,?,?,?,?,?,?,?,?,
            " . implode(',', $cuotas_placeholders) . ",
            ?,?,?,?,?,?
        )";

        // Preparar parámetros para la consulta
        $parametros = [
            $datos['codigo'], 
            $datos['titulo'], 
            $datos['descripcion'],
            $datos['precio_compra'],
            $datos['iva'],
            $datos['stock'],
            $datos['recargo1'],
            $datos['recargo2'],
            $datos['recargo3'],
            $datos['precio_venta1'],
            $datos['precio_venta2'],
            $datos['precio_venta3']
        ];
        
        // Agregar valores de cuotas dinámicamente (de 2 a 36)
        for ($i = 2; $i <= 36; $i++) {
            $parametros[] = $datos["cuota$i"];
        }
        
        // Agregar el resto de parámetros
        $parametros = array_merge($parametros, [
            $datos['id_proveedor'],
            $datos['id_seccion'],
            $datos['id_subseccion'],
            $datos['id_marca'],
            $imagenesJson,
            $datos['visible']
        ]);

        // Ejecutar la consulta con los parámetros
        $db->query($sql, $parametros);

    // Verificar que se haya insertado correctamente
    $lastInsertId = $db->getPDO()->lastInsertId(); // Cambiado aquí
    if ($lastInsertId) {
        error_log("Producto insertado correctamente, ID: " . $lastInsertId, 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        
        // Redireccionar a exito.php con mensaje de éxito
        header('Location: exito.php?mensaje=' . urlencode('El producto se ha registrado correctamente') . '&tipo=success');
        exit;
    } else {
        error_log("Error al guardar el producto - sin ID de inserción", 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        header('Location: exito.php?mensaje=' . urlencode('Error al guardar el producto') . '&tipo=error');
        exit;
    }
} catch (PDOException $e) {

        exit;
    } catch (Exception $e) {
        error_log("Excepción capturada: " . $e->getMessage(), 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        
        // Guardar los datos del formulario en la sesión
        $_SESSION['form_data'] = $_POST;
        $_SESSION['form_error'] = true;
        
        header('Location: exito.php?mensaje=' . urlencode($e->getMessage()) . '&tipo=error');
        exit;
    }
}

//echo getThemeCSS();
require_once '../includes/header.php';
?>
<!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>Nuevo Producto</title>
    <?php if ($favicon): ?>
    <link rel="icon" type="image/x-icon" href="<?= htmlspecialchars($favicon) ?>">
    <?php endif; ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/styles.css">
    <!-- Agregar SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            align-items: center;
            padding: 1rem;
            background: #f8f9fa;
            margin-bottom: 2rem;
        }
        .btn-back {
            background: #6c757d;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .btn-back svg {
            width: 12px; /* Reducido significativamente */
            height: 12px; /* Reducido significativamente */
        }

        .btn-back span {
            font-size: 12px; /* Para el fallback del texto ← */
        }
        // ...resto de estilos necesarios...

        /* Estilos para la grid de precios */
        .precios-flex {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .precio-item {
            width: 100%;
        }

        .precio-item input {
            width: 100%;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .precios-flex {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .precios-flex {
                grid-template-columns: 1fr;
            }
        }
        /* Estilos para la grid de precios y recargos */
        .precios-grid {
            display: flex;
            flex-wrap: wrap;
            margin: -5px;
        }
        
        .precio-item {
            flex: 0 0 16.666%;
            padding: 5px;
            box-sizing: border-box;
        }
        
        @media (max-width: 768px) {
            .precio-item {
                flex: 0 0 33.333%;
            }
        }
        
        @media (max-width: 480px) {
            .precio-item {
                flex: 0 0 50%;
            }
        }

        /* Estilos para la sección de categorización */
        .form-row-2col {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }
        
        .form-col {
            flex: 1;
        }
        
        @media (max-width: 768px) {
            .form-row-2col {
                flex-direction: column;
            }
        }

        /* Mejoras para vista móvil */
        @media (max-width: 768px) {
            .main-container {
                padding: 10px;
                padding-top: 30px;
                margin-bottom: 40px;
                width: 95%; /* Reducir el ancho un 5% */
                margin-left: auto;
                margin-right: auto;
            }

            .content-section {
                width: 100%;
                margin: 0 auto;
            }

            .form-section {
                padding: 15px;
                margin-bottom: 1rem;
            }

            .header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
                padding: 1rem 0.5rem;
            }

            .header h1 {
                font-size: 1.5rem;
                margin: 0;
            }

            .btn-back {
                width: 80%; /* Cambiado de 100% a 80% */
                justify-content: center;
                margin: 0 auto; /* Centrar el botón */
            }

            /* Ajustes para campos de entrada */
            input, select, textarea {
                font-size: 16px !important; /* Prevenir zoom en iOS */
                padding: 8px !important;
            }

            /* Grids de precios */
            .precios-grid, .precios-flex {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
            }

            .price-group {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            .price-group > div {
                min-width: unset;
                width: 100%;
            }

            /* Información básica */
            .form-row {
                flex-direction: column;
                gap: 0.5rem;
            }

            .form-group[style*="flex:"] {
                width: 100% !important;
                flex: none !important;
            }

            /* Categorización */
            .form-row-2col {
                flex-direction: column;
                gap: 0.75rem;
            }

            .form-col {
                width: 100%;
            }

            /* Mejoras visuales */
            label {
                font-size: 0.9rem;
                margin-bottom: 0.25rem;
            }

            .form-section + .form-section {
                margin-top: 1.5rem;
            }

            /* Botón de guardar */
            .btn[type="submit"] {
                width: 100%;
                padding: 12px;
                font-size: 1.1rem;
                margin-top: 1.5rem;
            }

            /* Imágenes */
            .image-preview-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            .preview-item {
                aspect-ratio: 1;
            }

            .image-upload-container {
                padding: 15px;
            }

            .upload-text {
                font-size: 0.9rem;
            }

            .upload-hint {
                font-size: 0.8rem;
            }
        }

        /* Ajustes específicos para pantallas muy pequeñas */
        @media (max-width: 480px) {
            .precios-grid,
            .precios-flex {
                grid-template-columns: 1fr;
            }

            .image-preview-grid {
                grid-template-columns: 1fr;
            }

            .header h1 {
                font-size: 1.2rem;
            }
        }

        /* Estilos para información básica */
        .info-basica-grid {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .codigo-group {
            width: 100%;
        }

        .titulo-group {
            width: 100%;
        }

        /* Ajuste para móviles */
        @media (max-width: 768px) {
            .info-basica-grid {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            .codigo-group,
            .titulo-group {
                max-width: none;
            }
        }

        /* Estilos para las grids de precios y recargos */
        .precios-grid, 
        .precios-flex {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .precio-item {
            width: 100%;
        }

        /* Ajustes para móvil */
        @media (max-width: 768px) {
            .precios-grid,
            .precios-flex {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
            }

            .precio-item {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            .precio-item input,
            .precio-item select {
                width: 100%;
                min-height: 38px;
            }

            .form-section .precios-grid,
            .form-section .precios-flex {
                margin: 0.75rem 0;
            }

            /* Asegurar que todos los campos tengan el mismo ancho */
            .precio-item,
            .precio-item[style*="flex:"] {
                flex: none !important;
                max-width: none !important;
            }
        }

        /* Estilos para los botones discretos */
        .btn-add-small {
            padding: 2px 6px;
            font-size: 12px;
            color: #6c757d;
            background: transparent;
            border: 1px solid #6c757d;
            border-radius: 3px;
            margin-left: 5px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.2s;
        }

        .btn-add-small:hover {
            background: #6c757d;
            color: white;
        }

        .btn-add-small i {
            font-size: 10px;
        }

        .btn-editar {
            background-color: transparent;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0.2rem 0.5rem;
            margin-left: 0.5rem;
        }
        .btn-editar:hover {
            color: #333;
        }
        /* Reemplazar estilos del logo con estilos del menú */
        .btn-menu {
            background: none;
            border: none;
            color: #333;
            font-size: 32px; /* Tamaño del logo original menos 20% */
            padding: 0.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            margin-right: 15px;
        }

        .btn-menu:hover {
            color: <?= $colorPrincipal ?? '#28a745' ?>;
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        /* Estilos para la previsualización de imágenes */
        .image-preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .preview-item {
            position: relative;
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 5px;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* Media queries para móviles */
        @media (max-width: 768px) {
            .image-preview-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .preview-item {
                width: 100%;
                max-width: none;
                margin: 0;
            }
        }

        .image-upload-container {
            border: 2px dashed <?= $colorPrincipal ?>; /* Color principal para el borde */
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            background: <?= $colorPrincipal ? 'rgba('.implode(',', sscanf($colorPrincipal, "#%02x%02x%02x")).',0.05)' : '#f8f9fa' ?>;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            margin-bottom: 20px;
        }

        .image-upload-container:hover {
            background: <?= $colorPrincipal ? 'rgba('.implode(',', sscanf($colorPrincipal, "#%02x%02x%02x")).',0.1)' : '#e8f5e9' ?>;
        }

        .upload-text {
            color: <?= $colorPrincipal ?>; /* Color principal para el texto */
            font-size: 1.1em;
            margin: 10px 0;
        }

        .fa-cloud-upload-alt {
            color: <?= $colorPrincipal ?>; /* Color principal para el ícono */
        }

        .upload-text p {
            margin: 10px 0;
            font-size: 16px;
        }

        .upload-text small {
            color: #666;
        }

        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .preview-image-container {
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            background: white;
        }

        .preview-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .remove-image {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #mensaje-estado {
            padding: 15px;
            margin: 0 auto 20px auto;
            max-width: 800px;
            border-radius: 5px;
            display: none;
            transition: all 0.3s ease;
        }
        
        .mensaje-exito {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .mensaje-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .mensaje-resultado {
            padding: 15px;
            margin: 0 20px 20px 20px;
            border-radius: 4px;
            text-align: center;
        }
        
        .mensaje-exito {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .mensaje-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        /* Estilos para la previsualización de imágenes */
        .image-preview-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
            width: 100%;
        }

        .preview-item {
            position: relative;
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 5px;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .preview-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        @media (max-width: 768px) {
            .image-preview-container {
                grid-template-columns: 1fr;
                gap: 10px;
                margin: 10px 0;
                width: 100%;
            }

            .preview-item {
                margin: 0;
                max-width: none;
                width: 100%;
            }

            #imagePreview {
                width: 100%;
                padding: 0;
            }
        }
        /* Agregar estos estilos al final de la sección de estilos existente */
        .preview-item {
            cursor: move; /* Indicador de que es arrastrable */
            user-select: none;
        }

        .preview-item.dragging {
            opacity: 0.5;
            border: 2px dashed #007bff;
        }

        .preview-item.drag-over {
            border: 2px dashed #28a745;
        }

        .image-preview-container {
            min-height: 150px;
        }

        .preview-number {
            position: absolute;
            top: 5px;
            left: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-left">

            <h1>Registrar Nuevo Producto</h1>
        </div>
        <a href="productos.php" class="btn-back">
            <?php 
            $icon = @file_get_contents('icons/arrow-left.svg');
            echo $icon ? $icon : '<span style="margin-right:8px;">←</span>'; 
            ?> 
            Volver a Productos
        </a>
    </header>

    <!-- Agregar este div para mensajes -->
    <div id="mensaje-estado" style="display: none; padding: 15px; margin: 10px auto; max-width: 800px; border-radius: 5px; text-align: center;"></div>

    <div class="main-container">
        <div class="content-section">
            <!-- Formulario de producto -->
            <form method="POST" enctype="multipart/form-data" id="formProducto">
                <!-- Información Básica -->
                <div class="form-section">
                    <h3>Información Básica</h3>
                    <div class="info-basica-grid">
                        <div class="form-group codigo-group">
                            <label>Código</label>
                            <input type="text" name="codigo" class="form-control" required value="<?= htmlspecialchars($formData['codigo'] ?? '') ?>">
                        </div>
                        <div class="form-group titulo-group">
                            <label>Título</label>
                            <input type="text" name="titulo" class="form-control" required value="<?= htmlspecialchars($formData['titulo'] ?? '') ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Descripción</label>
                        <textarea name="descripcion" class="form-control" required rows="3"><?= htmlspecialchars($formData['descripcion'] ?? '') ?></textarea>
                    </div>
                </div>

                <!-- Precios -->
                <div class="form-section">
                    <h3>Precios</h3>
                    <div class="price-group">
                        <div>
                            <label>Precio Compra</label>
                            <input type="text" name="precio_compra" id="precio_compra" class="form-control" required value="<?= htmlspecialchars($formData['precio_compra'] ?? '') ?>">
                        </div>
                        <div>
                            <label>IVA</label>
                            <select name="iva" class="form-control" required>
                                <option value="0" <?= isset($formData['iva']) && $formData['iva'] == 0 ? 'selected' : '' ?>>Exenta (0%)</option>
                                <option value="5" <?= isset($formData['iva']) && $formData['iva'] == 5 ? 'selected' : '' ?>>IVA 5%</option>
                                <option value="10" <?= (isset($formData['iva']) && $formData['iva'] == 10) || !isset($formData['iva']) ? 'selected' : '' ?>>IVA 10%</option>
                            </select>
                        </div>
                        <div>
                            <label>Stock Inicial</label>
                            <input type="number" name="stock" class="form-control" required value="<?= htmlspecialchars($formData['stock'] ?? '0') ?>" min="0">
                        </div>
                    </div>

                    <!-- Nueva estructura grid para recargos y precios -->
                    <div class="precios-grid">
                        <div class="precio-item">
                            <label for="recargo1">Recargo 1 (%)</label>
                            <input type="text" class="form-control" id="recargo1" name="recargo1" value="<?= htmlspecialchars($formData['recargo1'] ?? '') ?>">
                        </div>
                        <div class="precio-item">
                            <label for="recargo2">Recargo 2 (%)</label>
                            <input type="text" class="form-control" id="recargo2" name="recargo2" value="<?= htmlspecialchars($formData['recargo2'] ?? '') ?>">
                        </div>
                        <div class="precio-item">
                            <label for="recargo3">Recargo 3 (%)</label>
                            <input type="text" class="form-control" id="recargo3" name="recargo3" value="<?= htmlspecialchars($formData['recargo3'] ?? '') ?>">
                        </div>
                        <div class="precio-item">
                            <label for="precio_venta1">Precio 1</label>
                            <input type="text" class="form-control" id="precio_venta1" name="precio_venta1" value="<?= htmlspecialchars($formData['precio_venta1'] ?? '') ?>">
                        </div>
                        <div class="precio-item">
                            <label for="precio_venta2">Precio 2</label>
                            <input type="text" class="form-control" id="precio_venta2" name="precio_venta2" value="<?= htmlspecialchars($formData['precio_venta2'] ?? '') ?>">
                        </div>
                        <div class="precio-item">
                            <label for="precio_venta3">Precio 3</label>
                            <input type="text" class="form-control" id="precio_venta3" name="precio_venta3" value="<?= htmlspecialchars($formData['precio_venta3'] ?? '') ?>">
                        </div>
                    </div>

                    <!-- Nueva grid para precios en cuotas (2 a 36) -->
                    <div class="precios-grid" style="margin-top: 15px;">
                        <?php 
                        // Generar campos para cuotas de 2 a 36
                        for ($i = 2; $i <= 36; $i++) {
                            echo "<div class=\"precio-item\">";
                            echo "<label for=\"cuota$i\">$i Cuotas mensuales</label>";
                            echo "<input type=\"text\" class=\"form-control\" id=\"cuota$i\" name=\"cuota$i\" value=\"" . htmlspecialchars($formData["cuota$i"] ?? '') . "\">";
                            echo "</div>";
                        }
                        ?>
                    </div>
                </div>

                <!-- Categorización -->
                <div class="form-section">
                    <h3>Información complementaria</h3>
                    <div class="form-row-2col">
                        <div class="form-col">
                            <label>Proveedor</label>
                            <div class="select-with-btn">
                                <select class="form-control" name="id_proveedor" required>
                                    <option value="">Seleccione un proveedor</option>
                                    <?php foreach ($proveedores as $proveedor): ?>
                                        <option value="<?= htmlspecialchars($proveedor['id']) ?>" <?= isset($formData['id_proveedor']) && $formData['id_proveedor'] == $proveedor['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($proveedor['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-col">
                            <label>Sección</label>
                            <div class="select-with-btn">
                                <select class="form-control" name="id_seccion" required>
                                    <option value="">Seleccione una sección</option>
                                    <?php foreach ($secciones as $seccion): ?>
                                        <option value="<?= htmlspecialchars($seccion['id']) ?>" <?= isset($formData['id_seccion']) && $formData['id_seccion'] == $seccion['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($seccion['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-row-2col">
                        <div class="form-col">
                            <label>Subsección</label>
                            <div class="select-with-btn">
                                <select class="form-control" name="id_subseccion" required>
                                    <option value="">Seleccione una subsección</option>
                                    <?php foreach ($subsecciones as $subseccion): ?>
                                        <option value="<?= htmlspecialchars($subseccion['id']) ?>" <?= isset($formData['id_subseccion']) && $formData['id_subseccion'] == $subseccion['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($subseccion['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-col">
                            <label>Marca</label>
                            <div class="select-with-btn">
                                <select class="form-control" name="id_marca" required>
                                    <option value="">Seleccione una marca</option>
                                    <?php foreach ($marcas as $marca): ?>
                                        <option value="<?= htmlspecialchars($marca['id']) ?>" <?= isset($formData['id_marca']) && $formData['id_marca'] == $marca['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($marca['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Imágenes -->
                <div class="form-section">
                    <h3>Imágenes</h3>
                    <div class="form-group">
                        <div class="image-upload-container">
                            <input type="file" name="imagenes[]" id="imageInput" multiple accept="image/*" onchange="handleImageSelect(this)">
                            <div class="upload-text">
                                <i class="fas fa-cloud-upload-alt" style="font-size: 2em;"></i>
                                <p>Haz clic aquí para seleccionar imágenes</p>
                                <small>Máximo 6 imágenes (JPG, PNG, GIF)</small>
                            </div>
                        </div>
                        <div id="imagePreview" class="image-preview-container" style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;"></div>
                    </div>
                </div>

                <!-- Nuevo checkbox de visibilidad -->
                <div class="form-section">
                    <div class="form-group">
                        <div class="form-check mt-4">
                            <input class="form-check-input" type="checkbox" name="visible" id="visible" checked>
                            <label class="form-check-label" for="visible">
                                Mostrar producto en la web
                            </label>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn">
                    <?php 
                    $icon = @file_get_contents('icons/check-circle.svg');
                    echo $icon ? $icon : '<span style="margin-right:8px;">✓</span>'; 
                    ?> 
                    Guardar Producto
                </button>

            </form>
        </div>
    </div>

    <!-- Scripts -->
    <script>
// Configuración y funciones de utilidad
const mostrarDecimales = <?php echo $conDecimales; ?>;

function parseNumber(value) {
    if (!value) return 0;
    return parseFloat(value.replace(/[^\d.]/g, '')) || 0;
}

function formatNumber(number) {
    if (!number) return '';
    number = parseFloat(number);
    if (isNaN(number)) return '';
    return mostrarDecimales ? number.toFixed(2) : Math.round(number).toString();
}

function formatRecargo(number) {
    if (!number) return '';
    number = parseFloat(number);
    if (isNaN(number)) return '';
    return number.toFixed(2);
}

// Funciones de cálculo bidireccional
function calcularPrecioVenta(precioCompra, recargo) {
    return precioCompra * (1 + (recargo/100));
}

function calcularRecargo(precioCompra, precioVenta) {
    if (!precioCompra || precioCompra <= 0) return 0;
    return ((precioVenta / precioCompra) - 1) * 100;
}

function actualizarPreciosDesdeRecargo(index) {
    const precioCompra = parseNumber(document.querySelector('input[name="precio_compra"]').value);
    const recargo = parseNumber(document.querySelectorAll('input[name^="recargo"]')[index].value);
    if (precioCompra > 0) {
        const precioCalculado = calcularPrecioVenta(precioCompra, recargo);
        document.querySelectorAll('input[name^="precio_venta"]')[index].value = formatNumber(precioCalculado);
    }
}

function actualizarRecargoDesdePrecio(index) {
    const precioCompra = parseNumber(document.querySelector('input[name="precio_compra"]').value);
    const precioVenta = parseNumber(document.querySelectorAll('input[name^="precio_venta"]')[index].value);
    if (precioCompra > 0 && precioVenta > 0) {
        const recargoCalculado = calcularRecargo(precioCompra, precioVenta);
        document.querySelectorAll('input[name^="recargo"]')[index].value = formatRecargo(recargoCalculado);
    }
}

function actualizarTodosLosPrecios() {
    const precioCompra = parseNumber(document.querySelector('input[name="precio_compra"]').value);
    const recargoInputs = document.querySelectorAll('input[name^="recargo"]');
    
    recargoInputs.forEach((input, index) => {
        const recargo = parseNumber(input.value);
        if (recargo > 0) {
            const precioCalculado = calcularPrecioVenta(precioCompra, recargo);
            document.querySelectorAll('input[name^="precio_venta"]')[index].value = formatNumber(precioCalculado);
        }
    });
}

// Inicialización y eventos
document.addEventListener('DOMContentLoaded', function() {
    const precioCompraInput = document.querySelector('input[name="precio_compra"]');
    const recargoInputs = document.querySelectorAll('input[name^="recargo"]');
    const precioVentaInputs = document.querySelectorAll('input[name^="precio_venta"]');

    // Evento para precio de compra
    precioCompraInput.addEventListener('input', function() {
        let value = this.value.replace(/[^\d.]/g, '');
        const parts = value.split('.');
        if (parts.length > 2) {
            value = parts[0] + '.' + parts.slice(1).join('');
        }
        this.value = value;
        // Actualizar todos los precios manteniendo los recargos
        actualizarTodosLosPrecios();
    });

    // Eventos para recargos
    recargoInputs.forEach((input, index) => {
        input.addEventListener('input', function() {
            let value = this.value.replace(/[^\d.]/g, '');
            const parts = value.split('.');
            if (parts.length > 2) {
                value = parts[0] + '.' + parts.slice(1).join('');
            }
            this.value = value;
            actualizarPreciosDesdeRecargo(index);
        });

        input.addEventListener('blur', function() {
            this.value = formatRecargo(parseNumber(this.value));
            actualizarPreciosDesdeRecargo(index);
        });
    });

    // Eventos para precios de venta
    precioVentaInputs.forEach((input, index) => {
        input.addEventListener('input', function() {
            let value = this.value.replace(/[^\d.]/g, '');
            const parts = value.split('.');
            if (parts.length > 2) {
                value = parts[0] + '.' + parts.slice(1).join('');
            }
            this.value = value;
            actualizarRecargoDesdePrecio(index);
        });

        input.addEventListener('blur', function() {
            this.value = formatNumber(parseNumber(this.value));
            actualizarRecargoDesdePrecio(index);
        });
    });
});
</script>

    <script>
function handleImageSelect(input) {
    const preview = document.getElementById('imagePreview');
    preview.innerHTML = '';
    preview.style.display = 'grid';
    
    if (input.files && input.files.length > 0) {
        const maxFiles = 6;
        const files = Array.from(input.files).slice(0, maxFiles);
        
        files.forEach((file, index) => {
            if (!file.type.startsWith('image/')) {
                return;
            }

            const reader = new FileReader();
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            previewItem.draggable = true;
            previewItem.dataset.index = index;
            
            // Agregar eventos de arrastre
            previewItem.addEventListener('dragstart', handleDragStart);
            previewItem.addEventListener('dragend', handleDragEnd);
            previewItem.addEventListener('dragover', handleDragOver);
            previewItem.addEventListener('drop', handleDrop);
            
            reader.onload = function(e) {
                previewItem.innerHTML = `
                    <span class="preview-number">#${index + 1}</span>
                    <img src="${e.target.result}" alt="Vista previa ${index + 1}">
                    <button type="button" class="preview-remove">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                
                const removeBtn = previewItem.querySelector('.preview-remove');
                removeBtn.addEventListener('click', () => removeImage(index, input, previewItem));
            };
            
            reader.readAsDataURL(file);
            preview.appendChild(previewItem);
        });
    }
}

// Funciones para el arrastre
let draggedItem = null;

function handleDragStart(e) {
    draggedItem = this;
    this.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
}

function handleDragEnd(e) {
    this.classList.remove('dragging');
    document.querySelectorAll('.preview-item').forEach(item => {
        item.classList.remove('drag-over');
    });
    updateImageOrder();
}

function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    this.classList.add('drag-over');
}

function handleDrop(e) {
    e.preventDefault();
    this.classList.remove('drag-over');
    
    if (this !== draggedItem) {
        const items = [...document.querySelectorAll('.preview-item')];
        const draggedIndex = items.indexOf(draggedItem);
        const droppedIndex = items.indexOf(this);
        
        if (draggedIndex < droppedIndex) {
            this.parentNode.insertBefore(draggedItem, this.nextSibling);
        } else {
            this.parentNode.insertBefore(draggedItem, this);
        }
        
        updateImageOrder();
    }
}

function updateImageOrder() {
    const preview = document.getElementById('imagePreview');
    const items = preview.querySelectorAll('.preview-item');
    const input = document.getElementById('imageInput');
    const dt = new DataTransfer();
    
    // Crear nuevo FileList con el orden actualizado
    items.forEach((item, index) => {
        const originalIndex = parseInt(item.dataset.index);
        dt.items.add(input.files[originalIndex]);
        
        // Actualizar el número visible
        const numberSpan = item.querySelector('.preview-number');
        if (numberSpan) {
            numberSpan.textContent = `#${index + 1}`;
        }
        
        // Actualizar el índice del dataset
        item.dataset.index = index;
    });
    
    input.files = dt.files;
}

function removeImage(index, input, previewItem) {
    const dt = new DataTransfer();
    const files = Array.from(input.files);
    
    files.forEach((file, i) => {
        if (i !== index) {
            dt.items.add(file);
        }
    });
    
    input.files = dt.files;
    previewItem.remove();
    
    if (input.files.length === 0) {
        document.getElementById('imagePreview').innerHTML = '';
    } else {
        updateImageOrder(); // Actualizar orden después de eliminar
    }
}
</script>

</body>
</html>

