@extends('layouts.app')

@section('title', $producto->nombre . ' | ' . $comercio->nombre)

@push('styles')
<style>
    .producto-main-img{
        max-height: 420px;
        object-fit: cover;
    }
    .thumbs-row{
        gap: .5rem;
        flex-wrap: wrap;
    }
    .thumb-btn{
        border: 0;
        background: transparent;
        padding: 0;
        border-radius: .5rem;
        overflow: hidden;
    }
    .thumb-btn img{
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: .5rem;
        opacity: .75;
        transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .thumb-btn:hover img,
    .thumb-btn:focus img{
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 0.3rem 1rem rgba(0,0,0,.18);
    }
</style>
@endpush

@section('content')
<div class="container py-5">

    <a href="{{ route('public.comercios.productos.index', $comercio->slug) }}"
       class="btn btn-outline-secondary mb-3">
        ← Volver a productos de {{ $comercio->nombre }}
    </a>

    <div class="row g-4">
        {{-- Columna imágenes --}}
        <div class="col-md-6">

            <div id="productoCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">

                    {{-- Imagen principal --}}
                    <div class="carousel-item active">
                        <img src="{{ asset($producto->imagen) }}"
                             class="d-block w-100 rounded producto-main-img"
                             alt="Imagen principal de {{ $producto->nombre }}">
                    </div>

                    {{-- Galería --}}
                    @foreach($galeria as $img)
                        <div class="carousel-item">
                            <img src="{{ asset($img->ruta) }}"
                                 class="d-block w-100 rounded producto-main-img"
                                 alt="Imagen adicional de {{ $producto->nombre }}">
                        </div>
                    @endforeach

                </div>

                @if($galeria->count() > 0)
                    <button class="carousel-control-prev" type="button"
                            data-bs-target="#productoCarousel" 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="#productoCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Siguiente</span>
                    </button>
                @endif
            </div>

            {{-- Miniaturas --}}
            @if($galeria->count() > 0)
                <div class="mt-3 d-flex thumbs-row">
                    {{-- Thumb principal (slide 0) --}}
                    <button type="button"
                            class="thumb-btn"
                            data-bs-target="#productoCarousel"
                            data-bs-slide-to="0"
                            aria-label="Imagen principal">
                        <img src="{{ asset($producto->imagen) }}"
                             alt="Miniatura principal de {{ $producto->nombre }}">
                    </button>

                    {{-- Thumbs galería (slides 1..N) --}}
                    @foreach($galeria as $index => $img)
                        <button type="button"
                                class="thumb-btn"
                                data-bs-target="#productoCarousel"
                                data-bs-slide-to="{{ $index + 1 }}"
                                aria-label="Imagen {{ $index + 1 }} de {{ $producto->nombre }}">
                            <img src="{{ asset($img->ruta) }}"
                                 alt="Miniatura adicional {{ $index + 1 }} de {{ $producto->nombre }}"> 
                        </button>
                    @endforeach
                </div>
            @endif

        </div>

        {{-- Columna info --}}
        <div class="col-md-6">
            <h1 class="text-primary mb-3">{{ $producto->nombre }}</h1>

            @if(!is_null($producto->precio))
                <h3 class="fw-bold mb-3 text-success">
                    ${{ number_format($producto->precio, 0, ',', '.') }}
                </h3>
            @else
                <p class="text-muted">Precio a consultar</p>
            @endif

            <p class="text-muted mb-2">
                <strong>Comercio:</strong>
                <a href="{{ route('comercios.show', $comercio->slug) }}">
                    {{ $comercio->nombre }}
                </a>
            </p>

            @if($producto->tipo)
                <p class="text-muted mb-2">
                    <strong>Tipo:</strong> {{ ucfirst($producto->tipo) }}
                </p>
            @endif

            <hr>

            @if($producto->descripcion)
                <h5 class="mb-2">Descripción</h5>
                <p class="mt-2">{!! nl2br(e($producto->descripcion)) !!}</p>
            @endif
        </div>
    </div>

</div>
@endsection