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

function comprimirImagen($rutaOrigen, $rutaDestino, $calidad = 75) {
    // Obtener información de la imagen
    $info = getimagesize($rutaOrigen);
    if ($info === false) return false;

    // Crear imagen basada en el tipo de archivo
    switch ($info[2]) {
        case IMAGETYPE_JPEG:
            $imagen = imagecreatefromjpeg($rutaOrigen);
            break;
        case IMAGETYPE_PNG:
            $imagen = imagecreatefrompng($rutaOrigen);
            break;
        case IMAGETYPE_GIF:
            $imagen = imagecreatefromgif($rutaOrigen);
            break;
        default:
            return false;
    }

    // Obtener dimensiones originales
    $ancho = imagesx($imagen);
    $alto = imagesy($imagen);
    
    // Establecer dimensiones máximas
    $maxAncho = 1200;
    $maxAlto = 1200;
    
    // Calcular nuevas dimensiones manteniendo proporción
    if ($ancho > $maxAncho || $alto > $maxAlto) {
        $ratio = min($maxAncho/$ancho, $maxAlto/$alto);
        $nuevoAncho = round($ancho * $ratio);
        $nuevoAlto = round($alto * $ratio);
        
        // Crear nueva imagen con las dimensiones calculadas
        $nuevaImagen = imagecreatetruecolor($nuevoAncho, $nuevoAlto);
        
        // Preservar transparencia para PNG
        if ($info[2] === IMAGETYPE_PNG) {
            imagealphablending($nuevaImagen, false);
            imagesavealpha($nuevaImagen, true);
        }
        
        // Redimensionar
        imagecopyresampled(
            $nuevaImagen, $imagen,
            0, 0, 0, 0,
            $nuevoAncho, $nuevoAlto,
            $ancho, $alto
        );
    } else {
        $nuevaImagen = $imagen;
    }

    // Guardar imagen comprimida
    switch ($info[2]) {
        case IMAGETYPE_JPEG:
            return imagejpeg($nuevaImagen, $rutaDestino, $calidad);
        case IMAGETYPE_PNG:
            // Para PNG, calidad es de 0-9, convertir de 0-100 a 0-9
            $calidadPNG = round(($calidad * 9) / 100);
            return imagepng($nuevaImagen, $rutaDestino, $calidadPNG);
        case IMAGETYPE_GIF:
            return imagegif($nuevaImagen, $rutaDestino);
    }

    // Liberar memoria
    imagedestroy($imagen);
    if ($nuevaImagen !== $imagen) {
        imagedestroy($nuevaImagen);
    }

    return false;
}

session_start();
// Verificar si el usuario está logueado y es admin
//if (!isset($_SESSION['usuario_id']) || empty($_SESSION['usuario_id']) || $_SESSION['rol'] !== 'admin') {
//    header('Location: ../login.php');
 //   exit;
//}

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

$db = new Database();

// Obtener configuración del sitio
$config = $db->query("SELECT favicon, logo, color_principal, color_secundario, con_decimales FROM configuracion WHERE id = 1")->fetch();
$favicon = $config['favicon'] ? '../uploads/config/' . $config['favicon'] : '';
$logo = $config['logo'] ? '../uploads/config/' . $config['logo'] : '';
$colorPrincipal = $config['color_principal'] ?? '#28a745';
$colorSecundario = $config['color_secundario'] ?? '#6c757d';
$conDecimales = (int)$config['con_decimales'];

// Obtener el ID del producto
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

if (!$id) {
    header('Location: productos.php');
    exit;
}

// Obtener datos del producto
$producto = $db->query("SELECT * FROM productos WHERE id = ?", [$id])->fetch();
if (!$producto) {
    header('Location: productos.php');
    exit;
}

// Decodificar el array de imágenes
$imagenes = json_decode($producto['imagenes'] ?? '[]', true);

// Procesar formulario POST
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Verificar si es una petición AJAX
    $isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
              strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
              
    if ($isAjax) {
        header('Content-Type: application/json');
    }
    // Obtener el stock actual de la base de datos
    $stockActual = $db->query("SELECT stock FROM productos WHERE id = ?", [$id])->fetchColumn();
    
    try {
        // Procesar imágenes existentes y nuevas
        $imagenes_finales = [];
        
        // Mantener imágenes existentes seleccionadas
        if (isset($_POST['imagenes_existentes']) && is_array($_POST['imagenes_existentes'])) {
            $imagenes_finales = $_POST['imagenes_existentes'];
        }

        // Procesar nuevas imágenes
        $uploadDir = '../uploads/productos/';
        if (!file_exists($uploadDir)) {
            mkdir($uploadDir, 0777, true);
        }

        // Reemplazar el bloque de procesamiento de imágenes existente

if (isset($_FILES['imagenes']) && is_array($_FILES['imagenes']['name'])) {
    foreach ($_FILES['imagenes']['tmp_name'] as $key => $tmp_name) {
        if ($_FILES['imagenes']['error'][$key] === UPLOAD_ERR_OK) {
            $fileName = $_FILES['imagenes']['name'][$key];
            $fileType = $_FILES['imagenes']['type'][$key];
            $fileTmpName = $_FILES['imagenes']['tmp_name'][$key];
            
            // Validar tipo de archivo
            $allowed = ['image/jpeg', 'image/png', 'image/gif'];
            if (!in_array($fileType, $allowed)) {
                continue;
            }

            // Generar nombre único
            $extension = pathinfo($fileName, PATHINFO_EXTENSION);
            $newFileName = uniqid('prod_') . '.' . $extension;
            $uploadPath = $uploadDir . $newFileName;

            // Comprimir y guardar la imagen
            if (comprimirImagen($fileTmpName, $uploadPath)) {
                $imagenes_finales[] = $newFileName;
            }
        }
    }
}

        // Verificar límite de imágenes
        if (count($imagenes_finales) > 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_finales);
        
        // Validar y limpiar datos
        $nuevoStock = intval($_POST['stock']);
        if ($nuevoStock != $stockActual) {
            $stockFinal = $stockActual + $nuevoStock;
        } else {
            $stockFinal = $stockActual;
        }

        $datos = [
            'codigo' => $_POST['codigo'],
            'titulo' => trim($_POST['titulo']),
            'descripcion' => trim($_POST['descripcion']),
            'precio_compra' => floatval(str_replace(',', '.', $_POST['precio_compra'])),
            'iva' => intval($_POST['iva']),
            'stock' => $stockFinal, // Usamos el stock acumulado
            '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']),
        ];

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

        $visible = isset($_POST['visible']) ? 1 : 0;

        // Procesar el campo oferta
        $oferta = null;
        if (isset($_POST['precio_oferta'])) {
            $precioOfertaSeleccionado = intval($_POST['precio_oferta']);
            switch ($precioOfertaSeleccionado) {
                case 1:
                    $oferta = $datos['precio_venta1'];
                    break;
                case 2:
                    $oferta = $datos['precio_venta2'];
                    break;
                case 3:
                    $oferta = $datos['precio_venta3'];
                    break;
            }
        }

        // Actualizar el producto incluyendo las imágenes y oferta
        // Construir campos de cuotas dinámicamente
        $cuotas_campos = [];
        for ($i = 1; $i <= 36; $i++) {
            $cuotas_campos[] = "cuota$i = ?";
        }
        
        $sql = "UPDATE productos SET 
                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 = ?, oferta = ?
                WHERE id = ?";
        
        // Preparar parámetros para la consulta de actualización
        $parametros = [
            $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 1 a 36)
        for ($i = 1; $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, $visible, $oferta, $id
        ]);

        // Después de la actualización exitosa, en lugar de redireccionar:
        if($db->query($sql, $parametros)) {
            if ($isAjax) {
                echo json_encode([
                    'success' => true,
                    'message' => 'Producto actualizado correctamente',
                    'redirect' => 'productos.php'
                ]);
            } else {
                $_SESSION['mensaje'] = "Producto actualizado correctamente.";
                $_SESSION['tipo_mensaje'] = "success";
                header('Location: productos.php');
            }
            exit;
        } else {
            http_response_code(400);
            echo json_encode([
                'success' => false,
                'message' => 'Error al actualizar el producto'
            ]);
            exit;
        }
        
    } catch (Exception $e) {
        http_response_code(400);
        echo json_encode([
            'success' => false,
            'message' => "Error al actualizar el producto: " . $e->getMessage()
        ]);
        exit;
    }
}

// Obtener datos del producto
$producto = $db->query("SELECT * FROM productos WHERE id = ?", [$id])->fetch(PDO::FETCH_ASSOC);
if (!$producto) {
    header('Location: productos.php');
    exit;
}

// Modificar la función PHP de formateo
function formatearNumero($numero, $esRecargo = false) {
    global $conDecimales;
    $numero = floatval($numero);
    
    if ($esRecargo) {
        // Los recargos siempre con 2 decimales
        return number_format($numero, 2, '.', '');
    }
    
    // Para precios y otros valores
    return number_format($numero, $conDecimales ? 2 : 0, '.', '');
}

// Agregar esta función de utilidad antes del HTML
function adjustBrightness($hex, $steps) {
    // Convertir hex a RGB
    $hex = str_replace('#', '', $hex);
    $r = hexdec(substr($hex, 0, 2));
    $g = hexdec(substr($hex, 2, 2));
    $b = hexdec(substr($hex, 4, 2));

    // Ajustar brillo
    $r = max(0, min(255, $r + $steps));
    $g = max(0, min(255, $g + $steps));
    $b = max(0, min(255, $b + $steps));

    // Convertir de vuelta a hex
    return sprintf("#%02x%02x%02x", $r, $g, $b);
}

// Determinar qué precio está en oferta
$precioOfertaActual = 0;
if (!is_null($producto['oferta'])) {
    $ofertaValue = floatval($producto['oferta']);
    $precio1 = floatval($producto['precio_venta1']);
    $precio2 = floatval($producto['precio_venta2']);
    $precio3 = floatval($producto['precio_venta3']);
    
    if (abs($ofertaValue - $precio1) < 0.01) {
        $precioOfertaActual = 1;
    } elseif (abs($ofertaValue - $precio2) < 0.01) {
        $precioOfertaActual = 2;
    } elseif (abs($ofertaValue - $precio3) < 0.01) {
        $precioOfertaActual = 3;
    }
}

// Obtener datos relacionados
$proveedores = $db->query("SELECT id, nombre FROM proveedores")->fetchAll();
$secciones = $db->query("SELECT id, nombre FROM secciones")->fetchAll();
$subsecciones = $db->query("SELECT id, nombre FROM subsecciones")->fetchAll();
$marcas = $db->query("SELECT id, nombre FROM marcas")->fetchAll();

?>
<!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, maximum-scale=1">
    <title>JKEAS - Editar Producto</title>
    <?php if ($favicon): ?>
        <link rel="icon" type="image/x-icon" href="<?= htmlspecialchars($favicon) ?>">
    <?php endif; ?>
    <!-- Aplicar el tema -->
    <?php echo getThemeCSS(); ?>
    <!-- Resto de los estilos -->
    <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">
    <style>
        .form-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .content-section {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .form-section {
            margin-bottom: 2rem;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: #f8f9fa;
            margin-bottom: 2rem;
        }
        .btn-back {
            background: <?= $colorSecundario ?>;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .btn-back:hover {
            background: <?= adjustBrightness($colorSecundario, -10) ?>;
            color: white;
        }
        .spacer {
            visibility: hidden; /* Oculta los spacers pero mantiene su espacio */
            width: 0;
            margin: 0;
            padding: 0;
        }
        
        /* Nuevos estilos unificados */
        .price-group, .precios-flex {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .price-group {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .price-group > div {
            width: calc((100% - 4rem) / 6); /* Mismo ancho que los items de precios-flex */
        }

        .precio-item {
            width: 100%;
        }

        .price-group input,
        .price-group select,
        .precio-item input {
            width: 100%;
        }

        /* Responsive: cuando la pantalla es menor a 768px */
        @media (max-width: 768px) {
            .price-group,
            .precios-flex {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .price-group > div,
            .precio-item {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }

        /* Estilos para las alertas */
        .alert {
            padding: 1rem;
            margin: 1rem auto;
            max-width: 1200px;
            border-radius: 4px;
            text-align: center;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        /* Estilos para el modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
            text-align: center;
            position: relative;
        }

        .modal-content h4 {
            margin-top: 0;
            color: #155724;
        }

        .modal-content p {
            margin: 15px 0;
        }

        .modal-content button {
            padding: 8px 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal-content button:hover {
            background-color: #218838;
        }

        /* Estilos para las notificaciones */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 4px;
            color: #fff;
            font-weight: 500;
            z-index: 9999;
            transition: 0.3s ease;
            opacity: 0;
            transform: translateY(-20px);
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }

        .notification.success {
            background-color: #28a745;
        }

        .notification.error {
            background-color: #dc3545;
        }

        /* Actualizar los estilos de la grid de precios y cuotas */
        .precios-grid, .price-group, .precios-flex {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

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

        @media (max-width: 480px) {
            .precios-grid, .price-group, .precios-flex {
                grid-template-columns: 1fr;
            }
        }

        /* Ajustar el estilo del grupo de precio compra, IVA y stock */
        .price-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .price-group > div {
            flex: 1;
            min-width: 200px; /* Asegurar un ancho mínimo */
        }

        .price-group input,
        .price-group select {
            width: 100%;
            height: 38px; /* Altura consistente para inputs y selects */
            padding: 0.375rem 0.75rem;
        }

        /* Responsive para price-group */
        @media (max-width: 768px) {
            .price-group {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }
        }

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

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

            .header {
                position: relative; /* Agregado */
                margin-bottom: 3rem; /* Aumentado el margen inferior */
                padding: 1.5rem 0.5rem; /* Aumentado el padding vertical */
            }

            .form-section {
                padding: 15px;
                margin-bottom: 1.5rem; /* Aumentado */
            }

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

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

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

            .form-row {
                flex-direction: column;
                gap: 0.5rem;
            }

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

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

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

            .precios-flex,
            .precios-grid {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
                margin-top: 0.75rem;
            }

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

            /* Ajustar tamaños de texto y campos para móvil */
            input, select, textarea {
                font-size: 16px !important; /* Prevenir zoom en iOS */
                padding: 8px !important;
            }

            label {
                font-size: 0.9rem;
                margin-bottom: 0.25rem;
            }

            /* Mejorar espaciado entre secciones */
            .form-section + .form-section {
                margin-top: 1.5rem;
            }

            /* Hacer el botón de guardar más grande y visible */
            .btn[type="submit"] {
                width: 100%;
                padding: 12px;
                font-size: 1.1rem;
                margin-top: 2rem; /* Aumentado */
                margin-bottom: 2rem; /* Agregado */
            }

            /* Ajuste del último form-section */
            .form-section:last-of-type {
                margin-bottom: 60px; /* Agregado: más espacio antes del botón */
            }

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

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

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

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

        /* Estilos para el logo */
        .header-logo {
            display: none;
        }
        
        /* Ajuste del header para incluir el logo */
        .header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        /* Agregar estilos para el botón de menú */
        .btn-menu {
            background: none;
            border: none;
            color: #333;
            font-size: 2rem;
            padding: 0.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

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

        @media (max-width: 768px) {
            .header {
                padding: 1rem;
            }
            
            .header-left {
                width: 100%;
                justify-content: flex-start;
            }
        }
        .header-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        @media (max-width: 768px) {
            .header-buttons {
                width: 90%;
                justify-content: center;
                gap: 0.5rem;
            }
            
            .btn-back {
                width: 45%;
            }
        }

        /* Estilo base del botón submit */
        .btn[type="submit"] {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: <?= $colorPrincipal ?>;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 24px;
            font-size: 1rem;
            cursor: pointer;
            margin: 2rem auto;
            max-width: 250px; /* Ancho máximo del botón */
            width: auto;
            transition: background-color 0.3s ease;
        }

        .btn[type="submit"]:hover {
            background: <?= adjustBrightness($colorPrincipal, -10) ?>;
        }

        @media (max-width: 768px) {
            /* Ajustes específicos para el botón en móvil */
            .btn[type="submit"] {
                width: auto;         /* Ancho automático en lugar de 100% */
                min-width: 200px;    /* Ancho mínimo */
                max-width: 250px;    /* Ancho máximo */
                padding: 10px 20px;  /* Padding más compacto */
                font-size: 1rem;     /* Tamaño de fuente más pequeño */
                margin: 1.5rem auto; /* Margen más compacto */
            }
        }
        /* Agregar estos estilos dentro de la sección de estilos existente */
        .image-preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .preview-item {
            position: relative;
            aspect-ratio: 1;
            border: 2px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            cursor: move;
            user-select: none;
        }

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

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

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

        .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;
            z-index: 2;
        }

        .preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(255, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .preview-remove:hover {
            background: rgba(255, 0, 0, 0.9);
        }
    </style>
    <!-- Agregar SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <header class="header">
        <div class="header-left">
            <a href="dashboard.php" class="btn-menu">
                <i class="fas fa-bars"></i>
            </a>
            <h1>Editar Producto</h1>
        </div>
        <div class="header-buttons">
            <a href="productos.php" class="btn-back">
                <i class="fas fa-arrow-left"></i> Volver
            </a>
        </div>
    </header>

    <div class="main-container">
                <form method="POST" enctype="multipart/form-data" id="formProducto">
                    <input type="hidden" name="id" value="<?= $producto['id'] ?>">
                    
                    <!-- Información Básica -->
                    <div class="form-section">
                        <h3>Información Básica</h3>
                        <div class="form-row">
                            <div class="form-group" style="flex: 0 0 200px;">
                                <label>Código</label>
                                <input type="text" name="codigo" class="form-control" required value="<?= htmlspecialchars($producto['codigo']) ?>" readonly>
                            </div>
                            <div class="form-group" style="flex: 1;">
                                <label>Título</label>
                                <input type="text" name="titulo" class="form-control" required value="<?= htmlspecialchars($producto['titulo']) ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Descripción</label>
                            <textarea name="descripcion" class="form-control" required rows="3"><?= htmlspecialchars($producto['descripcion']) ?></textarea>
                        </div>
                    </div>

                    <!-- Precios -->
                    <div class="form-section">
                        <h3>Precios</h3>
                        <!-- Grupo de precio de compra e IVA -->
                        <div class="price-group">
                            <div>
                                <label>Precio Compra</label>
                                <input type="text" name="precio_compra" id="precio_compra" class="form-control" required 
                                    value="<?= formatearNumero($producto['precio_compra']) ?>">
                            </div>
                            <div>
                                <label>IVA</label>
                                <select name="iva" class="form-control" required>
                                    <option value="0" <?= $producto['iva'] == 0 ? 'selected' : '' ?>>Exenta (0%)</option>
                                    <option value="5" <?= $producto['iva'] == 5 ? 'selected' : '' ?>>IVA 5%</option>
                                    <option value="10" <?= $producto['iva'] == 10 ? 'selected' : '' ?>>IVA 10%</option>
                                </select>
                            </div>
                            <div>
                                <label>Stock (Agregar/Quitar)</label>
                                <input type="number" name="stock" class="form-control" value="0" 
                                    data-stock-actual="<?= intval($producto['stock']) ?>">
                                <small class="stock-info">Stock actual: <?= intval($producto['stock']) ?></small>
                            </div>
                        </div>

                        <!-- Grupo unificado de recargos y precios -->
                        <div class="precios-flex">
                            <div class="precio-item">
                                <label>Recargo 1 (%)</label>
                                <input type="text" name="recargo1" id="recargo1" class="form-control" value="<?= formatearNumero($producto['recargo1'], true) ?>">
                            </div>
                            <div class="precio-item">
                                <label>Recargo 2 (%)</label>
                                <input type="text" name="recargo2" id="recargo2" class="form-control" value="<?= formatearNumero($producto['recargo2'], true) ?>">
                            </div>
                            <div class="precio-item">
                                <label>Recargo 3 (%)</label>
                                <input type="text" name="recargo3" id="recargo3" class="form-control" value="<?= formatearNumero($producto['recargo3'], true) ?>">
                            </div>
                            <div class="precio-item">
                                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
                                    <input type="checkbox" name="precio_oferta" id="precio1_ofertar" value="1" class="precio-oferta-checkbox" <?= $precioOfertaActual == 1 ? 'checked' : '' ?>>
                                    <label for="precio1_ofertar">Precio 1 (ofertar)</label>
                                </div>
                                <input type="text" name="precio_venta1" id="precio_venta1" class="form-control" value="<?= formatearNumero($producto['precio_venta1']) ?>">
                            </div>
                            <div class="precio-item">
                                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
                                    <input type="checkbox" name="precio_oferta" id="precio2_ofertar" value="2" class="precio-oferta-checkbox" <?= $precioOfertaActual == 2 ? 'checked' : '' ?>>
                                    <label for="precio2_ofertar">Precio 2 (ofertar)</label>
                                </div>
                                <input type="text" name="precio_venta2" id="precio_venta2" class="form-control" value="<?= formatearNumero($producto['precio_venta2']) ?>">
                            </div>
                            <div class="precio-item">
                                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
                                    <input type="checkbox" name="precio_oferta" id="precio3_ofertar" value="3" class="precio-oferta-checkbox" <?= $precioOfertaActual == 3 ? 'checked' : '' ?>>
                                    <label for="precio3_ofertar">Precio 3 (ofertar)</label>
                                </div>
                                <input type="text" name="precio_venta3" id="precio_venta3" class="form-control" value="<?= formatearNumero($producto['precio_venta3']) ?>">
                            </div>
                        </div>
                        <!-- Nueva grid para precios en cuotas (1 a 36) -->
                        <div class="precios-flex" style="margin-top: 15px;">
                            <?php 
                            // Generar campos para cuotas de 1 a 36
                            for ($i = 1; $i <= 36; $i++) {
                                echo "<div class=\"precio-item\">";
                                echo "<label for=\"cuota$i\">$i Cuota" . ($i > 1 ? 's' : '') . "</label>";
                                echo "<input type=\"text\" class=\"form-control\" id=\"cuota$i\" name=\"cuota$i\" value=\"" . formatearNumero($producto["cuota$i"] ?? 0) . "\">";
                                echo "</div>";
                            }
                            ?>
                        </div>
                    </div>

                    <!-- Categorización -->
                    <div class="form-section">
                        <h3>Información complementaria</h3>
                        <div class="form-row">
                            <div class="form-group" style="flex: 1;">
                                <label>Proveedor</label>
                                <select name="id_proveedor" class="form-control" required>
                                    <?php foreach ($proveedores as $proveedor): ?>
                                        <option value="<?= $proveedor['id'] ?>" 
                                            <?= $producto['id_proveedor'] == $proveedor['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($proveedor['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="form-group" style="flex: 1;">
                                <label>Sección</label>
                                <select name="id_seccion" class="form-control" required>
                                    <?php foreach ($secciones as $seccion): ?>
                                        <option value="<?= $seccion['id'] ?>"
                                            <?= $producto['id_seccion'] == $seccion['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($seccion['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="flex: 1;">
                                <label>Subsección</label>
                                <select name="id_subseccion" class="form-control" required>
                                    <?php foreach ($subsecciones as $subseccion): ?>
                                        <option value="<?= $subseccion['id'] ?>"
                                            <?= $producto['id_subseccion'] == $subseccion['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($subseccion['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="form-group" style="flex: 1;">
                                <label>Marca</label>
                                <select name="id_marca" class="form-control" required>
                                    <?php foreach ($marcas as $marca): ?>
                                        <option value="<?= $marca['id'] ?>"
                                            <?= $producto['id_marca'] == $marca['id'] ? 'selected' : '' ?>>
                                            <?= htmlspecialchars($marca['nombre']) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </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[]" multiple accept="image/*" onchange="handleImageSelect(this)">
            <?php 
            $icon = @file_get_contents('icons/cloud-upload.svg');
            echo $icon ? $icon : '<span>↑</span>'; 
            ?>
            <div class="upload-text">Arrastra las imágenes aquí o haz clic para seleccionar</div>
            <div class="upload-hint">Formatos permitidos: JPG, PNG, GIF. Máximo 6 imágenes.</div>
        </div>
        <div id="imagePreview" class="image-preview-grid">
            <?php foreach ($imagenes as $index => $imagen): ?>
            <div class="preview-item existing-image" draggable="true" data-index="<?= $index ?>">
                <span class="preview-number">#<?= $index + 1 ?></span>
                <img src="../uploads/productos/<?= htmlspecialchars($imagen) ?>" alt="Imagen del producto">
                <button type="button" class="preview-remove" onclick="removeImage(event, <?= $index ?>)">
                    <i class="fas fa-times"></i>
                </button>
                <input type="hidden" name="imagenes_existentes[]" value="<?= htmlspecialchars($imagen) ?>">
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

                    <div class="form-section">
                        <label for="visible">Mostrar producto en la web</label>
                        <input type="checkbox" id="visible" name="visible" value="1" <?php if($producto['visible'] == 1) echo 'checked'; ?>>
                    </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 Cambios
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Copiar el modal de galería y scripts de productos.php -->
    <!-- ... -->

    <!-- Scripts -->
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('formProducto');
    
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        const submitButton = this.querySelector('button[type="submit"]');
        submitButton.disabled = true;

        try {
            const formData = new FormData(this);
            const response = await fetch(window.location.href, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const result = await response.json();

            if (result.success) {
                Swal.fire({
                    icon: 'success',
                    title: '¡Éxito!',
                    text: result.message,
                    showConfirmButton: false,
                    timer: 1500,
                    didClose: () => {
                        window.location.href = result.redirect;
                    }
                });
            } else {
                submitButton.disabled = false;
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: result.message
                });
            }
        } catch (error) {
            console.error('Error:', error);
            submitButton.disabled = false;
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error al procesar la solicitud'
            });
        }
    });

    // ... resto del código JavaScript existente para cálculos y manejo de imágenes ...
});

    // Reemplazar las funciones de JavaScript para el formateo y cálculos
    const mostrarDecimales = <?php echo $conDecimales; ?>;

    function formatNumber(number, isRecargo = false) {
        if (!number) return '';
        number = parseFloat(number);
        if (isNaN(number)) return '';
        
        if (isRecargo) {
            // Los recargos siempre con 2 decimales
            return number.toFixed(2);
        }
        
        // Para precios y otros valores
        return mostrarDecimales ? number.toFixed(2) : Math.round(number).toString();
    }

    function calcularPrecioVenta(precioCompra, recargo) {
        const precio = precioCompra * (1 + (recargo/100));
        return mostrarDecimales ? precio : Math.round(precio);
    }

    // Inicializar los eventos cuando el DOM esté listo
    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"]');
        
        // Formatear valores iniciales
        precioCompraInput.value = formatNumber(parseFloat(precioCompraInput.value));
        recargoInputs.forEach(input => {
            input.value = formatNumber(parseFloat(input.value), true);
        });
        precioVentaInputs.forEach(input => {
            input.value = formatNumber(parseFloat(input.value));
        });
        
        // ... resto del código de eventos ...
    });

    // Reemplazar las funciones de JavaScript para el formateo y cálculos
    function formatNumber(number) {
        number = parseFloat(number);
        // Si es un número entero
        if (Number.isInteger(number)) {
            return number.toString();
        }
        // Si tiene decimales, mostrar siempre 2 decimales
        return number.toFixed(2);
    }

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

    function calcularPrecios() {
        const precioCompra = cleanNumber(document.getElementById('precio_compra').value);
        const recargo1 = cleanNumber(document.getElementById('recargo1').value);
        const recargo2 = cleanNumber(document.getElementById('recargo2').value);
        const recargo3 = cleanNumber(document.getElementById('recargo3').value);

        if (!isNaN(precioCompra)) {
            // Calcular precios de venta
            const precioVenta1 = precioCompra * (1 + (recargo1 / 100));
            const precioVenta2 = precioCompra * (1 + (recargo2 / 100));
            const precioVenta3 = precioCompra * (1 + (recargo3 / 100));

            // Actualizar campos
            document.getElementById('precio_venta1').value = formatNumber(precioVenta1);
            document.getElementById('precio_venta2').value = formatNumber(precioVenta2);
            document.getElementById('precio_venta3').value = formatNumber(precioVenta3);
        }
    }

    // Agregar event listeners
    document.getElementById('precio_compra').addEventListener('input', calcularPrecios);
    document.getElementById('recargo1').addEventListener('input', calcularPrecios);
    document.getElementById('recargo2').addEventListener('input', calcularPrecios);
    document.getElementById('recargo3').addEventListener('input', calcularPrecios);

    // Formatear valores iniciales
    document.addEventListener('DOMContentLoaded', function() {
        const campos = ['precio_compra', 'precio_venta1', 'precio_venta2', 'precio_venta3'];
        campos.forEach(campo => {
            const elemento = document.getElementById(campo);
            if (elemento && elemento.value) {
                elemento.value = formatNumber(cleanNumber(elemento.value));
            }
        });
    });
</script>
<script>
// ...existing code...

document.addEventListener('DOMContentLoaded', function() {
    const conDecimales = <?php echo $conDecimales ? 'true' : 'false'; ?>;
    
    function formatNumber(number, isRecargo = false) {
        if (!number) return '0';
        number = parseFloat(number);
        if (isNaN(number)) return '0';
        
        if (isRecargo) {
            // Los recargos siempre con 2 decimales
            return number.toFixed(2);
        }
        
        // Para precios y otros valores
        if (conDecimales) {
            return number.toFixed(2);
        } else {
            return Math.round(number).toString();
        }
    }

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

    function calcularPrecios() {
        const precioCompra = cleanNumber(document.getElementById('precio_compra').value);
        const recargo1 = cleanNumber(document.getElementById('recargo1').value);
        const recargo2 = cleanNumber(document.getElementById('recargo2').value);
        const recargo3 = cleanNumber(document.getElementById('recargo3').value);

        if (!isNaN(precioCompra)) {
            // Calcular precios de venta
            let precioVenta1 = precioCompra * (1 + (recargo1 / 100));
            let precioVenta2 = precioCompra * (1 + (recargo2 / 100));
            let precioVenta3 = precioCompra * (1 + (recargo3 / 100));

            // Actualizar campos con el formato correcto
            document.getElementById('precio_venta1').value = formatNumber(precioVenta1);
            document.getElementById('precio_venta2').value = formatNumber(precioVenta2);
            document.getElementById('precio_venta3').value = formatNumber(precioVenta3);

            // Actualizar campos de cuotas
            const cuotas = ['cuota2', 'cuota3', 'cuota6', 'cuota10', 'cuota12', 'cuota15', 'cuota18'];
            cuotas.forEach(cuota => {
                const elemento = document.getElementById(cuota);
                if (elemento && elemento.value) {
                    elemento.value = formatNumber(cleanNumber(elemento.value));
                }
            });
        }
    }

    // Formatear todos los campos numéricos al cargar
    window.addEventListener('load', function() {
        // Formatear precio de compra
        const precioCompraElement = document.getElementById('precio_compra');
        if (precioCompraElement) {
            precioCompraElement.value = formatNumber(cleanNumber(precioCompraElement.value));
        }

        // Formatear recargos (siempre con decimales)
        ['recargo1', 'recargo2', 'recargo3'].forEach(recargo => {
            const elemento = document.getElementById(recargo);
            if (elemento) {
                elemento.value = formatNumber(cleanNumber(elemento.value), true);
            }
        });

        // Formatear precios de venta y cuotas
        ['precio_venta1', 'precio_venta2', 'precio_venta3',
         'cuota2', 'cuota3', 'cuota6', 'cuota10', 'cuota12', 'cuota15', 'cuota18'].forEach(campo => {
            const elemento = document.getElementById(campo);
            if (elemento) {
                elemento.value = formatNumber(cleanNumber(elemento.value));
            }
        });
    });

    // Event listeners para recalcular precios
    ['precio_compra', 'recargo1', 'recargo2', 'recargo3'].forEach(id => {
        document.getElementById(id).addEventListener('input', calcularPrecios);
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const conDecimales = <?php echo $conDecimales ? 'true' : 'false'; ?>;
    
    function formatNumber(number, isRecargo = false) {
        if (!number) return '0';
        number = parseFloat(number);
        if (isNaN(number)) return '0';
        
        if (isRecargo) {
            return number.toFixed(2);
        }
        
        return conDecimales ? number.toFixed(2) : Math.round(number).toString();
    }

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

    function calcularPrecioDesdeRecargo(precioCompra, recargo) {
        return precioCompra * (1 + (recargo / 100));
    }

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

    function actualizarPrecios(sourceElement) {
        const precioCompra = cleanNumber(document.getElementById('precio_compra').value);
        const recargoInputs = ['recargo1', 'recargo2', 'recargo3'];
        const precioVentaInputs = ['precio_venta1', 'precio_venta2', 'precio_venta3'];

        // Si se modificó el precio de compra
        if (sourceElement.id === 'precio_compra') {
            recargoInputs.forEach((recargoId, index) => {
                const recargo = cleanNumber(document.getElementById(recargoId).value);
                const precioVenta = calcularPrecioDesdeRecargo(precioCompra, recargo);
                document.getElementById(precioVentaInputs[index]).value = formatNumber(precioVenta);
            });
        }
        // Si se modificó un recargo
        else if (sourceElement.id.startsWith('recargo')) {
            const index = recargoInputs.indexOf(sourceElement.id);
            const recargo = cleanNumber(sourceElement.value);
            const precioVenta = calcularPrecioDesdeRecargo(precioCompra, recargo);
            document.getElementById(precioVentaInputs[index]).value = formatNumber(precioVenta);
        }
        // Si se modificó un precio de venta
        else if (sourceElement.id.startsWith('precio_venta')) {
            const index = precioVentaInputs.indexOf(sourceElement.id);
            const precioVenta = cleanNumber(sourceElement.value);
            const recargo = calcularRecargoDesdeVenta(precioCompra, precioVenta);
            document.getElementById(recargoInputs[index]).value = formatNumber(recargo, true);
        }
    }

    // Event listeners para todos los campos
    ['precio_compra', 'recargo1', 'recargo2', 'recargo3', 'precio_venta1', 'precio_venta2', 'precio_venta3']
        .forEach(id => {
            const elemento = document.getElementById(id);
            if (elemento) {
                elemento.addEventListener('input', function() {
                    actualizarPrecios(this);
                });
            }
        });

    // Formatear valores iniciales al cargar la página
    window.addEventListener('load', function() {
        // Formatear precio de compra
        const precioCompraElement = document.getElementById('precio_compra');
        if (precioCompraElement) {
            precioCompraElement.value = formatNumber(cleanNumber(precioCompraElement.value));
            // Simular un cambio en el precio de compra para actualizar todos los valores
            actualizarPrecios(precioCompraElement);
        }
    });
});
</script>

<script>
// Añadir esta función para manejar la eliminación de imágenes
function removeExistingImage(event, index) {
    event.preventDefault(); // Prevenir el envío del formulario
    
    // Encontrar el contenedor de la imagen y eliminarlo
    const imageContainer = event.target.closest('.preview-item');
    if (imageContainer) {
        imageContainer.remove();
    }
    
    // Verificar el número de imágenes restantes
    const imageCount = document.querySelectorAll('.preview-item').length;
    
    // Si hay menos de 6 imágenes, mostrar el input de archivo
    const fileInput = document.querySelector('input[type="file"]');
    if (imageCount < 6) {
        fileInput.style.display = 'block';
    }

    // Opcional: Mostrar notificación
    Swal.fire({
        icon: 'success',
        title: 'Imagen eliminada',
        text: 'La imagen se eliminará cuando guardes los cambios',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
    });
}

// Función para previsualizar imágenes
function previewImages(input) {
    const maxImages = 6;
    const imagePreview = document.getElementById('imagePreview');
    const currentImages = imagePreview.querySelectorAll('.preview-item').length;

    if (input.files) {
        // Verificar el número total de imágenes (existentes + nuevas)
        if ((currentImages + input.files.length) > maxImages) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: `Solo se permiten ${maxImages} imágenes en total`
            });
            input.value = '';
            return;
        }

        Array.from(input.files).forEach(file => {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'preview-item new-image';
                
                div.innerHTML = `
                    <img src="${e.target.result}" alt="Preview">
                    <button class="preview-remove" onclick="removeNewImage(event, this)">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                
                imagePreview.appendChild(div);
            }
            
            reader.readAsDataURL(file);
        });

        // Ocultar input si se alcanza el límite
        if ((currentImages + input.files.length) >= maxImages) {
            input.style.display = 'none';
        }
    }
}

// Función para eliminar imágenes nuevas
function removeNewImage(event, button) {
    event.preventDefault();
    const container = button.closest('.preview-item');
    container.remove();

    // Mostrar input de archivo si hay menos de 6 imágenes
    const currentImages = document.querySelectorAll('.preview-item').length;
    const fileInput = document.querySelector('input[type="file"]');
    if (currentImages < 6) {
        fileInput.style.display = 'block';
    }
}
</script>

<script>
// Funciones para el manejo de imágenes y ordenamiento
let draggedItem = null;

function handleImageSelect(input) {
    const preview = document.getElementById('imagePreview');
    const currentImages = preview.querySelectorAll('.preview-item').length;
    const maxImages = 6;
    
    if (input.files && input.files.length > 0) {
        if ((currentImages + input.files.length) > maxImages) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: `Solo se permiten ${maxImages} imágenes en total`
            });
            input.value = '';
            return;
        }

        Array.from(input.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 = currentImages + index;

            // Agregar eventos de arrastre
            addDragListeners(previewItem);
            
            reader.onload = function(e) {
                previewItem.innerHTML = `
                    <span class="preview-number">#${currentImages + index + 1}</span>
                    <img src="${e.target.result}" alt="Vista previa">
                    <button type="button" class="preview-remove" onclick="removeImage(event, ${currentImages + index})">
                        <i class="fas fa-times"></i>
                    </button>
                `;
            };
            
            reader.readAsDataURL(file);
            preview.appendChild(previewItem);
        });

        if ((currentImages + input.files.length) >= maxImages) {
            input.style.display = 'none';
        }
    }
}

function addDragListeners(element) {
    element.addEventListener('dragstart', handleDragStart);
    element.addEventListener('dragend', handleDragEnd);
    element.addEventListener('dragover', handleDragOver);
    element.addEventListener('drop', handleDrop);
}

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 items = document.querySelectorAll('.preview-item');
    items.forEach((item, index) => {
        const numberSpan = item.querySelector('.preview-number');
        if (numberSpan) {
            numberSpan.textContent = `#${index + 1}`;
        }
        item.dataset.index = index;
    });
}

function removeImage(event, index) {
    event.preventDefault();
    const container = event.target.closest('.preview-item');
    if (container) {
        container.remove();
        updateImageOrder();
        
        // Mostrar el input de archivo si hay menos de 6 imágenes
        const currentImages = document.querySelectorAll('.preview-item').length;
        const fileInput = document.querySelector('input[type="file"]');
        if (currentImages < 6) {
            fileInput.style.display = 'block';
        }
    }
}

// Inicializar los eventos de arrastre para las imágenes existentes
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.preview-item').forEach(item => {
        addDragListeners(item);
    });
});
</script>

<script>
// Funcionalidad para los checkboxes de oferta
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.precio-oferta-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                // Desmarcar todos los otros checkboxes
                checkboxes.forEach(otherCheckbox => {
                    if (otherCheckbox !== this) {
                        otherCheckbox.checked = false;
                    }
                });
            }
        });
    });
});
</script>

</body>
</html>
