<?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';

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

$db = new Database();

// Obtener configuración del sitio (después de crear la instancia de Database)
$config = $db->query("SELECT favicon, logo, con_decimales 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'];

// 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)) {
                            $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']),
            'cuota2' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['cuota2'] ?? 0)),
            'cuota3' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['cuota3'] ?? 0)),
            'cuota6' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['cuota6'] ?? 0)),
            'cuota12' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['cuota12'] ?? 0)),
            'cuota15' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['cuota15'] ?? 0)),
            'cuota18' => floatval(str_replace([',', '.'], ['.', '.'], $_POST['cuota18'] ?? 0)),
            'visible' => isset($_POST['visible']) ? 1 : 0
        ];

        // Crear la consulta preparada
        $sql = "INSERT INTO productos (
            codigo, titulo, descripcion, precio_compra, 
            iva, stock, recargo1, recargo2, recargo3,
            precio_venta1, precio_venta2, precio_venta3,
            cuota2, cuota3, cuota6, cuota12, cuota15, cuota18,
            id_proveedor, id_seccion, id_subseccion, 
            id_marca, imagenes, visible
        ) VALUES (
            ?,?,?,?,?,?,?,?,?,?,?,?,
            ?,?,?,?,?,?,?,?,?,?,?,?
        )";

        // Ejecutar la consulta con los parámetros
        $db->query($sql, [
            $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'],
            $datos['cuota2'],
            $datos['cuota3'],
            $datos['cuota6'],
            $datos['cuota12'],
            $datos['cuota15'],
            $datos['cuota18'],
            $datos['id_proveedor'],
            $datos['id_seccion'],
            $datos['id_subseccion'],
            $datos['id_marca'],
            $imagenesJson,
            $datos['visible']
        ]);

    // 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');
        
        // Establecer la cabecera JSON antes de enviar la respuesta
        header('Content-Type: application/json');
        
        echo json_encode([
            'success' => true,
            'message' => 'Producto guardado correctamente'
        ]);
        exit;
    } else {
        error_log("Error al guardar el producto - sin ID de inserción", 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        throw new Exception("Error al guardar el producto");
    }
} catch (PDOException $e) {

        exit;
    } catch (Exception $e) {
        error_log("Excepción capturada: " . $e->getMessage(), 3, 'C:/xampp/htdocs/jk/logs/nuevo-producto.log');
        http_response_code(500);
        echo json_encode([
            'success' => false,
            'message' => $e->getMessage()
        ]);
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JKEAS - 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;
        }
        // ...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;
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

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

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

        .image-upload-container {
            border: 2px dashed #28a745;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .image-upload-container input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .upload-text {
            color: #28a745;
            font-size: 1.1em;
            margin: 10px 0;
        }

        .upload-hint {
            color: #6c757d;
            font-size: 0.9em;
        }

        /* Estilos simplificados para la carga de imágenes */
        .image-upload-container {
            border: 2px dashed #28a745;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .image-upload-container:hover {
            background: #e8f5e9;
        }

        .upload-text {
            color: #28a745;
        }

        .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;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-left">
            <a href="dashboard.php" class="btn-menu">
                <i class="fas fa-bars"></i>
            </a>
            <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>
                        </div>
                        <div class="form-group titulo-group">
                            <label>Título</label>
                            <input type="text" name="titulo" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Descripción</label>
                        <textarea name="descripcion" class="form-control" required rows="3"></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>
                        </div>
                        <div>
                            <label>IVA</label>
                            <select name="iva" class="form-control" required>
                                <option value="0">Exenta (0%)</option>
                                <option value="5">IVA 5%</option>
                                <option value="10" selected>IVA 10%</option>
                            </select>
                        </div>
                        <div>
                            <label>Stock Inicial</label>
                            <input type="number" name="stock" class="form-control" required value="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">
                        </div>
                        <div class="precio-item">
                            <label for="recargo2">Recargo 2 (%)</label>
                            <input type="text" class="form-control" id="recargo2" name="recargo2">
                        </div>
                        <div class="precio-item">
                            <label for="recargo3">Recargo 3 (%)</label>
                            <input type="text" class="form-control" id="recargo3" name="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">
                        </div>
                        <div class="precio-item">
                            <label for="precio_venta2">Precio 2</label>
                            <input type="text" class="form-control" id="precio_venta2" name="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">
                        </div>
                    </div>

                    <!-- Nueva grid para precios en cuotas -->
                    <div class="precios-grid" style="margin-top: 15px;">
                        <div class="precio-item">
                            <label for="cuota2">2 Cuotas</label>
                            <input type="text" class="form-control" id="cuota2" name="cuota2">
                        </div>
                        <div class="precio-item">
                            <label for="cuota3">3 Cuotas</label>
                            <input type="text" class="form-control" id="cuota3" name="cuota3">
                        </div>
                        <div class="precio-item">
                            <label for="cuota6">6 Cuotas</label>
                            <input type="text" class="form-control" id="cuota6" name="cuota6">
                        </div>
                        <div class="precio-item">
                            <label for="cuota12">12 Cuotas</label>
                            <input type="text" class="form-control" id="cuota12" name="cuota12">
                        </div>
                        <div class="precio-item">
                            <label for="cuota15">15 Cuotas</label>
                            <input type="text" class="form-control" id="cuota15" name="cuota15">
                        </div>
                        <div class="precio-item">
                            <label for="cuota18">18 Cuotas</label>
                            <input type="text" class="form-control" id="cuota18" name="cuota18">
                        </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']) ?>">
                                            <?= 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']) ?>">
                                            <?= 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']) ?>">
                                            <?= 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']) ?>">
                                            <?= 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"></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 de decimales desde PHP
        const mostrarDecimales = <?php echo $conDecimales; ?>;
        
        // Función para formatear precios y cuotas
        function formatNumber(number) {
            if (!number) return '';
            number = parseFloat(number);
            if (isNaN(number)) return '';
            if (mostrarDecimales) {
                return number.toFixed(2);
            } else {
                return Math.round(number).toString();
            }
        }

        // Función específica para recargos (siempre con decimales)
        function formatRecargo(number) {
            if (!number) return '';
            number = parseFloat(number);
            if (isNaN(number)) return '';
            return number.toFixed(2); // Siempre 2 decimales para recargos
        }

        // Inicializar 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"]');
            const cuotaInputs = document.querySelectorAll('input[name^="cuota"]');

            // Para campos de precio y cuotas
            [...precioVentaInputs, precioCompraInput, ...cuotaInputs].forEach(input => {
                input.addEventListener('blur', function() {
                    const value = parseFloat(this.value.replace(/[^\d.]/g, '')) || 0;
                    this.value = formatNumber(value);
                });
            });

            // Para campos de recargo (siempre con decimales)
            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('');
                    }
                    if (parts.length === 2) {
                        value = parts[0] + '.' + parts[1].substring(0, 2);
                    }
                    this.value = value;

                    // Calcular precio de venta en tiempo real
                    const precioCompra = parseFloat(precioCompraInput.value.replace(/[^\d.]/g, '')) || 0;
                    if (precioCompra > 0) {
                        const recargo = parseFloat(value) || 0;
                        const precioCalculado = precioCompra * (1 + (recargo/100));
                        precioVentaInputs[index].value = formatNumber(precioCalculado);
                    }
                });

                // Al perder el foco, formatear CON decimales siempre
                input.addEventListener('blur', function() {
                    const value = parseFloat(this.value.replace(/[^\d.]/g, '')) || 0;
                    this.value = formatRecargo(value); // Usar formatRecargo específicamente
                });
            });

            // Modificar el cálculo de recargo desde precio de venta
            precioVentaInputs.forEach((input, index) => {
                input.addEventListener('change', function() {
                    const precioCompra = parseFloat(precioCompraInput.value.replace(/[^\d.]/g, '')) || 0;
                    const precioVenta = parseFloat(this.value.replace(/[^\d.]/g, '')) || 0;
                    
                    if (precioCompra > 0 && precioVenta > 0) {
                        const porcentajeRecargo = ((precioVenta / precioCompra) - 1) * 100;
                        recargoInputs[index].value = formatRecargo(porcentajeRecargo); // Usar formatRecargo específicamente
                    }
                });
            });

            // ... rest of the existing code ...
        });
        // ... rest of the existing code ...
    </script>

    <script>
        // Configuración de decimales desde PHP
        const mostrarDecimales = <?php echo $conDecimales; ?>;
        
        // Función para formatear números según configuración (para precios)
        function formatNumber(number) {
            if (!number) return '';
            number = parseFloat(number);
            if (isNaN(number)) return '';
            if (mostrarDecimales) {
                return number.toFixed(2);
            } else {
                return Math.round(number).toString();
            }
        }

        // Nueva función específica para formatear recargos (siempre con decimales)
        function formatRecargo(number) {
            if (!number) return '';
            number = parseFloat(number);
            if (isNaN(number)) return '';
            return number.toFixed(2);
        }

        // Función simplificada para parsear números
        function parseNumber(value) {
            if (!value) return 0;
            return parseFloat(value.replace(/[^\d.]/g, '')) || 0;
        }

        // Función para calcular precios desde recargos
        function calcularPrecios(skipIndex = -1) {
            const precioCompra = parseNumber(document.querySelector('input[name="precio_compra"]').value);
            const recargoInputs = document.querySelectorAll('input[name^="recargo"]');
            const precioVentaInputs = document.querySelectorAll('input[name^="precio_venta"]');

            recargoInputs.forEach((input, index) => {
                if (index !== skipIndex) {
                    const recargo = parseFloat(input.value) || 0;
                    const precioCalculado = precioCompra * (1 + (recargo/100));
                    precioVentaInputs[index].value = formatNumber(precioCalculado);
                }
            });
        }

        // Modificar el evento blur para los campos
        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"]');
            const cuotaInputs = document.querySelectorAll('input[name^="cuota"]');

            // Para campos de precio y cuotas (sin decimales si mostrarDecimales = 0)
            [...precioVentaInputs, precioCompraInput, ...cuotaInputs].forEach(input => {
                input.addEventListener('blur', function() {
                    const value = parseNumber(this.value);
                    this.value = formatNumber(value);
                });
            });

            // Para campos de recargo (siempre con decimales)
            recargoInputs.forEach(input => {
                input.addEventListener('blur', function() {
                    const value = parseNumber(this.value);
                    this.value = formatRecargo(value);
                });
            });

            // Modificar el cálculo de recargo desde precio de venta
            precioVentaInputs.forEach((input, index) => {
                input.addEventListener('change', function() {
                    const precioCompra = parseNumber(precioCompraInput.value);
                    const precioVenta = parseNumber(this.value);
                    
                    if (precioCompra > 0 && precioVenta > 0) {
                        const porcentajeRecargo = ((precioVenta / precioCompra) - 1) * 100;
                        recargoInputs[index].value = formatRecargo(porcentajeRecargo);
                    }
                });
            });

            // Eventos para campos numéricos
            [precioCompraInput, ...recargoInputs, ...precioVentaInputs].forEach(input => {
                input.addEventListener('input', function(e) {
                    let value = this.value.replace(/[^\d.]/g, '');
                    const parts = value.split('.');
                    if (parts.length > 2) {
                        value = parts[0] + '.' + parts.slice(1).join('');
                    }
                    if (parts.length === 2) {
                        value = parts[0] + '.' + parts[1].substring(0, 2);
                    }
                    this.value = value;
                });

                input.addEventListener('blur', function() {
                    const value = parseNumber(this.value);
                    this.value = formatNumber(value);
                });
            });

            // Evento específico para recargos
            recargoInputs.forEach((input, index) => {
                input.addEventListener('input', function() {
                    const precioCompra = parseNumber(precioCompraInput.value);
                    if (precioCompra > 0) {
                        const recargo = parseFloat(this.value) || 0;
                        const precioCalculado = precioCompra * (1 + (recargo/100));
                        precioVentaInputs[index].value = formatNumber(precioCalculado);
                    }
                });
            });

            // Evento específico para precios de venta
            precioVentaInputs.forEach((input, index) => {
                input.addEventListener('input', function() {
                    const precioCompra = parseNumber(precioCompraInput.value);
                    const precioVenta = parseNumber(this.value);
                    if (precioCompra > 0 && precioVenta > 0) {
                        const porcentajeRecargo = ((precioVenta / precioCompra) - 1) * 100;
                        recargoInputs[index].value = formatNumber(porcentajeRecargo);
                    }
                });
            });

            // ...rest of the form submission code...
        });

        // Función para previsualizar imágenes
        function previewImages(input) {
            const preview = document.getElementById('imagePreview');
            preview.innerHTML = '';
            
            if (input.files && input.files.length > 0) {
                const maxImages = 6;
                const files = Array.from(input.files).slice(0, maxImages);
                
                // Contenedor para el mensaje de carga
                const loadingMessage = document.createElement('div');
                loadingMessage.className = 'alert alert-info';
                loadingMessage.textContent = 'Cargando imágenes...';
                preview.appendChild(loadingMessage);
                
                let loadedImages = 0;
                
                files.forEach((file, index) => {
                    if (!file.type.startsWith('image/')) {
                        console.error('Archivo no válido:', file.name);
                        return;
                    }

                    const reader = new FileReader();
                    const div = document.createElement('div');
                    div.className = 'preview-item';
                    
                    reader.onload = function(e) {
                        // Crear la imagen y esperar a que se cargue
                        const img = new Image();
                        img.onload = function() {
                            loadedImages++;
                            if (loadedImages === files.length) {
                                // Remover mensaje de carga cuando todas las imágenes estén listas
                                loadingMessage.remove();
                            }
                        };
                        
                        div.innerHTML = `
                            <img src="${e.target.result}" alt="Vista previa ${index + 1}">
                            <button type="button" class="preview-remove" title="Eliminar imagen">
                                <i class="fas fa-times"></i>
                            </button>
                        `;
                        
                        // Configurar el botón de eliminar
                        const removeBtn = div.querySelector('.preview-remove');
                        removeBtn.onclick = function(ev) {
                            ev.preventDefault();
                            ev.stopPropagation();
                            removePreviewImage(index, input);
                            div.remove();
                        };
                        
                        img.src = e.target.result;
                    };
                    
                    reader.onerror = function() {
                        div.innerHTML = `
                            <div style="color: red;">Error al cargar la imagen</div>
                        `;
                    };
                    
                    preview.appendChild(div);
                    reader.readAsDataURL(file);
                });

                // Mostrar advertencia si hay más imágenes de las permitidas
                if (input.files.length > maxImages) {
                    const warning = document.createElement('div');
                    warning.className = 'alert alert-warning mt-2';
                    warning.innerHTML = `<i class="fas fa-exclamation-triangle"></i> Solo se permiten ${maxImages} imágenes. Se han seleccionado las primeras ${maxImages}.`;
                    preview.appendChild(warning);
                }
            }
        }

        // Actualizar la función removePreviewImage
        function removePreviewImage(index, input) {
            const dt = new DataTransfer();
            const { files } = input;
            
            for (let i = 0; i < files.length; i++) {
                if (i !== index) {
                    dt.items.add(files[i]);
                }
            }
            
            input.files = dt.files;
            
            // Actualizar la vista previa si es necesario
            if (input.files.length === 0) {
                document.getElementById('imagePreview').innerHTML = '';
            }
        }

        // Definir la función calcularRecargo
        function calcularRecargo(index) {
            const precioCompra = parseNumber(document.querySelector('input[name="precio_compra"]').value);
            const recargoInputs = document.querySelectorAll('input[name^="recargo"]');
            const precioVentaInputs = document.querySelectorAll('input[name^="precio_venta"]');

            const recargo = parseFloat(recargoInputs[index].value) || 0;
            const precioCalculado = precioCompra * (1 + (recargo / 100));
            precioVentaInputs[index].value = formatNumber(precioCalculado);
        }

        // Función para calcular el recargo basado en precio de venta y precio de compra
        function calcularPorcentajeRecargo(precioCompra, precioVenta) {
            if (!precioCompra || precioCompra <= 0) return 0;
            return ((precioVenta / precioCompra) - 1) * 100;
        }

        // Función para calcular recargo cuando se modifica el precio de venta
        function calcularRecargoDesdeVenta(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 porcentajeRecargo = calcularPorcentajeRecargo(precioCompra, precioVenta);
                document.querySelectorAll('input[name^="recargo"]')[index].value = formatNumber(porcentajeRecargo);
            }
        }

        // Inicializar 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"]');

            // Evento para precio de compra
            precioCompraInput.addEventListener('input', function(e) {
                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;
                calcularPrecios();
            });

            // 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('');
                    }
                    if (parts.length === 2) {
                        value = parts[0] + '.' + parts[1].substring(0, 2);
                    }
                    this.value = value;
                    const precioCompra = parseNumber(precioCompraInput.value);
                    if (precioCompra > 0) {
                        const recargo = parseFloat(value) || 0;
                        const precioCalculado = precioCompra * (1 + (recargo/100));
                        precioVentaInputs[index].value = formatNumber(precioCalculado);
                    }
                });
            });

            // Eventos para precios de venta
            precioVentaInputs.forEach((input, index) => {
                input.removeAttribute('readonly');
                input.addEventListener('input', function(e) {
                    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;
                    calcularRecargo(index);
                });
            });

            // Manejo del formulario
            document.getElementById('formProducto').addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // Mostrar indicador de carga
                const submitButton = this.querySelector('button[type="submit"]');
                const originalButtonText = submitButton.innerHTML;
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
                submitButton.disabled = true;

                try {
                    const formData = new FormData(this);
                    ['precio_compra', 'precio_venta1', 'precio_venta2', 'precio_venta3'].forEach(field => {
                        let value = formData.get(field);
                        if (value) {
                            value = value.replace(/[^\d]/g, '');
                            formData.set(field, value);
                        }
                    });

                    // Limpiar recargos
                    ['recargo1', 'recargo2', 'recargo3'].forEach(field => {
                        let value = formData.get(field);
                        if (value) {
                            value = value.replace(/[^\d.]/g, '');
                            formData.set(field, value);
                        }
                    });

                    const response = await fetch(window.location.href, {
                        method: 'POST',
                        body: formData
                    });

                    // Verificar si la respuesta es JSON válido
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        throw new Error('La respuesta del servidor no es válida');
                    }

                    const result = await response.json();
                    
                    if (result.success) {
                        // Mostrar mensaje de éxito más visual
                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: result.message,
                            showConfirmButton: true,
                            confirmButtonText: 'Ir a la lista de productos',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = 'productos.php';
                            }
                        });
                    } else {
                        throw new Error(result.message);
                    }
                } catch (error) {
                    // Mostrar error más visual
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: error.message || 'Error desconocido',
                        confirmButtonText: 'Entendido'
                    });
                    console.error('Error completo:', error);
                } finally {
                    // Restaurar el botón
                    submitButton.innerHTML = originalButtonText;
                    submitButton.disabled = false;
                }
            });
        });

        // ...existing code...

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

                // Solo calcular el recargo si el precio está completo
                // (evitar cálculos mientras se están escribiendo decimales)
                if (!value.endsWith('.')) {
                    const precioCompra = parseNumber(precioCompraInput.value);
                    const precioVenta = parseNumber(value);
                    
                    if (precioCompra > 0 && precioVenta > 0) {
                        const porcentajeRecargo = ((precioVenta / precioCompra) - 1) * 100;
                        recargoInputs[index].value = formatNumber(porcentajeRecargo);
                    }
                }
            });

            // Agregar evento blur para formatear el número cuando se pierde el foco
            input.addEventListener('blur', function() {
                const value = parseNumber(this.value);
                if (value > 0) {
                    this.value = formatNumber(value);
                }
            });
        });

        // ...rest of the existing code...
    </script>

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

            const reader = new FileReader();
            const container = document.createElement('div');
            container.className = 'preview-image-container';
            
            reader.onload = function(e) {
                container.innerHTML = `
                    <img src="${e.target.result}" class="preview-image" alt="Vista previa">
                    <button type="button" class="remove-image" onclick="removeImage(${index}, this.parentElement)">
                        <i class="fas fa-times"></i>
                    </button>
                `;
            };
            
            reader.readAsDataURL(file);
            preview.appendChild(container);
        });

        if (input.files.length > maxFiles) {
            alert(`Solo se pueden seleccionar hasta ${maxFiles} imágenes. Se mostrarán las primeras ${maxFiles}.`);
        }
    }
}

function removeImage(index, element) {
    const input = document.getElementById('imageInput');
    const dt = new DataTransfer();
    
    Array.from(input.files).forEach((file, i) => {
        if (i !== index) dt.items.add(file);
    });
    
        if (i !== index) dt.items.add(file);
    });
    
    input.files = dt.files;
    element.remove();
}

// Agregar funcionalidad de arrastrar y soltar
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.querySelector('.image-upload-container');
    
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropZone.style.backgroundColor = '#e8f5e9';
    }

    function unhighlight(e) {
        dropZone.style.backgroundColor = '#f8f9fa';
    }

    dropZone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        const input = document.getElementById('imageInput');
        
        // Crear un nuevo FileList con los archivos arrastrados
        const dataTransfer = new DataTransfer();
        Array.from(files).forEach(file => {
            if (file.type.match('image.*')) {
                dataTransfer.items.add(file);
            }
        });
        
        input.files = dataTransfer.files;
        handleImageSelect(input);
    }
});
</script>

    </script>
</body>
</html>

