<?php
include 'views/header.php'; 

// Verificar si se proporciona un ID de producto
if (!isset($_GET['id']) || empty($_GET['id'])) {
    echo '<script>window.location.href = "productos.php";</script>';
    exit;
}

$id_producto = $_GET['id'];
?>

<div class="container-div">
    <h2>Editar Producto</h2>
    <p>Modifica los detalles del producto.</p>

    <form id="editProductoForm" class="mt-4">
        <input type="hidden" id="id_producto" name="id_producto" value="<?php echo $id_producto; ?>">
        <input type="hidden" id="imagenes" name="imagenes" value="">
        <input type="hidden" id="imagen_principal" name="imagen_principal" value="">
        <input type="hidden" id="ficha_tecnica_pdf" name="ficha_tecnica_pdf" value="">
        <input type="hidden" id="ficha_seguridad_pdf" name="ficha_seguridad_pdf" value="">
        <input type="hidden" id="colores_data" name="colores_data" value="">

        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="nombre" class="form-label">Nombre del producto *</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="id_categoria" class="form-label">Categoría *</label>
                            <select class="form-select" id="id_categoria" name="id_categoria" required>
                                <option value="">Selecciona una categoría</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="id_marca" class="form-label">Marca</label>
                            <select class="form-select" id="id_marca" name="id_marca">
                                <option value="">Selecciona una marca</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="precio" class="form-label">Precio *</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" class="form-control" id="precio" name="precio" step="0.01" min="0" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="destacado" class="form-label">Destacado</label>
                            <select class="form-select" id="destacado" name="destacado">
                                <option value="0">No</option>
                                <option value="1">Sí</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- NUEVA SECCIÓN: Selección de colores -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="tiene_colores" class="form-label">¿El producto tiene colores? *</label>
                            <select class="form-select" id="tiene_colores" name="tiene_colores" required>
                                <option value="">Selecciona una opción</option>
                                <option value="0">No</option>
                                <option value="1">Sí</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- NUEVA SECCIÓN: Gestión de colores -->
                <div id="coloresSection" class="mb-3" style="display: none;">
                    <label class="form-label">Colores del producto</label>
                    <div class="row">
                        <div class="col-md-6">
                            <select class="form-select" id="colorSelect">
                                <option value="">Selecciona un color</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary" id="addColorBtn">
                                <i class="fas fa-plus"></i> Agregar Color
                            </button>
                        </div>
                    </div>
                    <div id="selectedColors" class="mt-3"></div>
                </div>

                <div class="mb-3">
                    <label for="descripcion" class="form-label">Descripción</label>
                    <textarea class="form-control" id="descripcion" name="descripcion" rows="4"></textarea>
                </div>
            </div>

            <div class="col-md-4">
                <div class="d-flex justify-content-end mb-4">
                    <a href="productos.php" class="btn btn-secondary" style="margin-right: 10px;">Cancelar</a>
                    <button type="submit" class="btn btn-primary">Actualizar Producto</button>
                </div>

                <!-- Sección de imágenes SIN COLORES -->
                <div class="mb-3" id="imagenesSection" style="display: none;">
                    <label class="form-label">Imágenes del producto (máx. 5)</label>
                    <div id="dropzoneProducto" class="dropzone">
                        <div class="dz-message needsclick">
                            Arrastra imágenes aquí o haz clic para seleccionar<br>
                            <span class="note needsclick">Máximo 5 imágenes. Marca una como principal.</span><br>
                            <span class="note needsclick">Dimensiones recomendadas: 800x800px</span>
                        </div>
                    </div>
                    <div id="imagenesCarousel" class="carousel slide" data-bs-ride="false" style="display: none;">
                        <div class="carousel-inner">
                            <!-- Las imágenes se cargarán aquí dinámicamente -->
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#imagenesCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Anterior</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#imagenesCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Siguiente</span>
                        </button>
                        <div class="carousel-indicators">
                            <!-- Los indicadores se cargarán aquí dinámicamente -->
                        </div>
                    </div>
                </div>

                <!-- Sección de imágenes CON COLORES -->
                <div class="mb-3" id="imagenesColorSection" style="display: none;">
                    <label class="form-label">Imágenes por color</label>
                    <div id="colorImagesContainer">
                        <!-- Se cargarán dinámicamente las secciones por color -->
                    </div>
                </div>

                <!-- Ficha Técnica PDF -->
                <div class="mb-3">
                    <label for="ficha_tecnica_upload" class="form-label">Ficha Técnica (PDF)</label>
                    <div class="pdf-upload-container">
                        <input type="file" class="form-control pdf-upload" id="ficha_tecnica_upload"
                            accept=".pdf" data-field="ficha_tecnica">
                        <div class="pdf-preview" id="ficha_tecnica_preview" style="display: none;">
                            <div class="pdf-info">
                                <i class="fas fa-file-pdf text-danger"></i>
                                <span class="pdf-name"></span>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-pdf"
                                    data-field="ficha_tecnica">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ficha de Seguridad PDF -->
                <div class="mb-3">
                    <label for="ficha_seguridad_upload" class="form-label">Ficha de Seguridad (PDF)</label>
                    <div class="pdf-upload-container">
                        <input type="file" class="form-control pdf-upload" id="ficha_seguridad_upload"
                            accept=".pdf" data-field="ficha_seguridad">
                        <div class="pdf-preview" id="ficha_seguridad_preview" style="display: none;">
                            <div class="pdf-info">
                                <i class="fas fa-file-pdf text-danger"></i>
                                <span class="pdf-name"></span>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-pdf"
                                    data-field="ficha_seguridad">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
.color-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.color-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.color-preview {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    display: inline-block;
    margin-right: 10px;
}

.color-images {
    margin-top: 10px;
}

.dropzone-color {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dropzone-color:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.dropzone-color.dragover {
    border-color: #007bff;
    background-color: #e3f2fd;
}

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

.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

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

.image-preview-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(220, 53, 69, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-item .preview-btn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0, 123, 255, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 10px;
    cursor: pointer;
}

.image-preview-item.is-preview {
    border-color: #28a745;
    border-width: 2px;
}

.pdf-upload-container {
    position: relative;
}

.pdf-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
}

.pdf-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pdf-name {
    margin-left: 10px;
    flex-grow: 1;
    font-size: 14px;
}
</style>

<script src="js/editarProducto.js"></script>
<?php include 'views/footer.php'; ?>