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

<section class="detalle-one-section">
    <div class="dos-div">
        <p class="dos-p">Productos / categoria / nombre producto</p>

        <div class="row">
            <div class="col-md-6 cmd">
                <div class="dos-div2">
                    <!-- Las miniaturas se cargarán aquí dinámicamente -->
                </div>
                <div class="dos-div3-shadow">
                    <div class="dos-div3">
                        <img src="img/cargando.gif" alt="" class="dos-img" style="width: 80%; display: block; margin: 0 auto; object-fit: contain;">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="dos-container">
                    <p class="dos-p2">Cargando...</p>
                    <p class="dos-p3">DIAMOND</p>
                    <p class="dos-p-price" style="display: none;"></p>
                    <hr class="dos-hr">

                    <div class="dos-p4">Cargando descripción...</div>

                    <!-- Sección de selección de colores -->
                    <div class="dos-colors-section" style="display: none;">
                        <div class="dos-colors-container">
                            <label class="dos-color-label">Selecciona un color:</label>
                            <div class="custom-select-container">
                                <div class="custom-select-display" id="color-selector-display">
                                    <div class="selected-option">
                                        <img src="sistema/img/productos/default.png" alt="" class="option-image" id="selected-image">
                                        <span class="option-text" id="selected-text">Selecciona un color</span>
                                    </div>
                                    <div class="select-arrow">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                                <div class="custom-select-options" id="color-options">
                                    <!-- Las opciones se cargarán dinámicamente -->
                                </div>
                                <!-- Select oculto para mantener funcionalidad -->
                                <select id="color-selector" class="dos-color-select" style="display: none;">
                                    <option value="">Selecciona un color</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Sección de PDFs -->
                    <div class="dos-pdfs-section" style="display: none;">
                        <div class="dos-pdfs-container">
                            <div class="dos-pdf-btn-container">
                                <button id="ficha-tecnica-btn" class="dos-pdf-btn" style="display: none;">
                                    <i class="fas fa-file-pdf"></i>
                                    <span>Ficha Técnica</span>
                                </button>
                                <button id="ficha-seguridad-btn" class="dos-pdf-btn" style="display: none;">
                                    <i class="fas fa-file-pdf"></i>
                                    <span>Ficha de Seguridad</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="dos-div5">
                        <div class="dos-div6">
                            <button>-</button>
                            <input type="number" value="1">
                            <button>+</button>
                        </div>
                        <button class="dos-btn">Agregar al carrito</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="detalle-two-section">
    <div class="dts-div">
        <div class="dts-p">Productos similares</div>
        <hr class="dts-hr">
    </div>
</section>

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