@push('styles')
<style>
    .swiper-thumbs .swiper-slide { opacity: .5; cursor: pointer; }
    .swiper-thumbs .swiper-slide-thumb-active { opacity:1; border:2px solid #007bff; }
</style>
@endpush

<div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        if (window.jQuery && $('#zoom-img').length) {
          $("#zoom-img").elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 200
          });
        }
      });
    </script>

    <div class="container mt-2">
        <div class="row mt-2">
            <div class="col-md-6">
                <div class="card bg-white">
                    <div class="card-body">
                        <div class="row">
                            {{-- Imagen grande --}}
                            <div class="col-12 mb-3 text-center">
                                @if(count($imagenes))
                                    <a data-fancybox="galeria" href="data:image/jpeg;base64,{{ $imagenes[0]->imagen }}">
                                        <img id="zoom-img"
                                             src="data:image/jpeg;base64,{{ $imagenes[0]->imagen }}"
                                             data-zoom-image="data:image/jpeg;base64,{{ $imagenes[0]->imagen }}"
                                             class="img-fluid border rounded"
                                             style="max-height: 400px; object-fit: contain;" />
                                    </a>
                                @else
                                    <img class="img-fluid mx-auto d-block"
                                         style="max-width: 100%; max-height: 250px; object-fit: contain;"
                                         src="{{ asset('imagenes/no-image.jpg') }}">
                                @endif
                            </div>

                            {{-- Miniaturas --}}
                            <div class="col-12 d-flex flex-wrap gap-2 justify-content-center">
                                @foreach ($imagenes as $key => $image)
                                    @continue($key == 0)
                                    <a href="data:image/jpeg;base64,{{ $image->imagen }}" data-fancybox="galeria">
                                        <img src="data:image/jpeg;base64,{{ $image->imagen }}"
                                             class="img-thumbnail"
                                             style="width:100px; height:100px; object-fit:cover;" />
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Info producto / filtros --}}
            <div class="col-md-6">
                <div class="card bg-white">
                    <div class="card-body">
                        <div>CODIGO: {{ $codigo }}</div>
                        <div class="text-uppercase">{{ $nombre }}</div>
                        <div>Marca: {{ $marca }}</div>

                        <div class="mt-2">
                            <label class="fs-3 text-dark">$ {{ $precio }}</label>
                        </div>

                        <div class="mt-4">
                            <div class="input-group input-group-sm" style="width: 120px;">
                                <button class="btn btn-dark rounded-start" wire:click="resCantidad()">-</button>
                                <input type="text" class="form-control text-center" value="{{ $cantidad }}" readonly>
                                <button class="btn btn-dark rounded-end" wire:click="sumCantidad()">+</button>
                            </div>
                        </div>

                        {{-- Tallas (sin duplicados) --}}
                        <div class="mt-3">
                            <label>Talla:</label><br>
                            @foreach($tallasUI as $t)
                                <button type="button"
                                        class="btn btn-sm {{ $selTalla === $t ? 'btn-dark' : 'btn-outline-dark' }} me-1 mb-1"
                                        wire:click="selectTalla(@js($t))">
                                    {{ $t }}
                                </button>
                            @endforeach
                        </div>

                        {{-- Colores (sin duplicados) --}}
                        <div class="mt-3">
                            <label>Color:</label><br>
                            @foreach ($coloresUI as $c)
                                @php $isSelected = $selColor === $c['color']; @endphp
                                <button type="button"
                                    class="btn btn-sm {{ $isSelected ? 'btn-dark' : 'btn-outline-dark' }} me-1 mb-1"
                                    wire:click="selectColor(@js($c['color']))"
                                    @if(!empty($c['rgb'])) style="background-color: {{ $c['rgb'] }}; color: white;" @endif
                                >
                                    {{ $c['color'] }}
                                </button>
                            @endforeach
                        </div>

                        @if($selTalla || $selColor)
                            <div class="mt-2">
                                <button class="btn btn-link p-0" wire:click="limpiarFiltros()">Limpiar filtros</button>
                            </div>
                        @endif

                        @if($muestraBotonAgregar)
                            <div class="d-grid gap-2 mt-4">
                                <button class="btn btn-dark px-5 py-2 fw-semibold mt-2" type="button" wire:click="store()">
                                    <i class="fa-solid fa-cart-plus"></i> Agregar al Carro
                                </button>
                            </div>
                        @endif

                        @if($muestraStock)
                            <div class="mt-2">
                                <label class="text-muted">Stock disponible:
                                    @if($stock > 0)
                                        <span class="text-success">{{ $stock }}</span>
                                    @else
                                        <span class="text-danger">Sin stock</span>
                                    @endif
                                </label>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Acordeones --}}
                <div class="card mt-2 bg-white">
                    <div class="card-body">
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
                                            aria-expanded="false" aria-controls="flush-collapseOne">
                                        Descripción de Producto
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse"
                                     data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        {{ $descripcion }}
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
                                            aria-expanded="false" aria-controls="flush-collapseTwo">
                                        Especificaciones / Características
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                     data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <ul>
                                            @foreach($especificaciones as $item)
                                                <li>
                                                    <label><b>{{ $item->especificacion->descripcion }} :</b>
                                                        {{ $item->descripcion }}</label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> {{-- /col-md-6 --}}
        </div> {{-- /row --}}

        {{-- Recomendados --}}
        <div class="row mt-4">
            <label class="fs-5">Productos Recomendados</label>
            @foreach($productofamilias as $producto)
                <div class="col-md-2">
                    <div class="card bg-white mt-1">
                        <div class="card-body text-center">
                            <div>
                                <label class="text-secondary" style="font-size:11px;">
                                    CODIGO: {{ $producto->codigo }}
                                </label>
                            </div>
                            <div style="height: 3rem; overflow: hidden;">
                                <a href="{{ route('carrocompras.producto', ['id' => $producto->id]) }}"
                                   class="text-dark" style="font-size:11px;">
                                    {{ $producto->nombre }}
                                </a>
                            </div>
                            <div class="mt-3" style="height:170px; display:flex; justify-content:center; align-items:center;">
                                @if ($producto->primeraImagen && $producto->primeraImagen->imagen)
                                    <img class="img-fluid" style="max-width:100%; max-height:100%; object-fit:contain;"
                                         src="data:image/jpeg;base64,{{ $producto->primeraImagen->imagen }}">
                                @else
                                    <img class="img-fluid" style="max-width:100%; max-height:100%; object-fit:contain;"
                                         src="{{ asset('imagenes/no-image.jpg') }}">
                                @endif
                            </div>
                            <div class="mt-4">
                                <label style="font-size:13px;">Valor : {{ $producto->precio }}</label>
                            </div>
                            @if(filled($producto->descripcion) && strtolower(trim($producto->descripcion)) !== 'empty')
                                <div>
                                    <label style="font-size:11px;">{{ $producto->descripcion }}</label>
                                </div>
                            @endif
                            <div class="d-grid gap-2 mt-3">
                                <button class="btn btn-dark rounded-pill px-5 py-2 fw-semibold mt-2" type="button"
                                        wire:click="verproducto({{ $producto->id }})">
                                    <i class="fa-solid fa-cart-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div> {{-- /container --}}
</div>