@extends('layouts.store')
@section('title',$product->name)
@section('description',Str::limit($product->description,155))
@section('content')<section class="container page-section"><div class="breadcrumb"><a href="/">Inicio</a><x-icon name="chevron" size="12"/><a href="{{ route('catalog') }}">Colección</a><x-icon name="chevron" size="12"/><span>{{ $product->name }}</span></div>
<div class="product-detail"><div><div class="detail-photo {{ $product->slug==='pantalon-clara'?'trouser-photo':'' }}"><img id="product-photo" src="{{ $product->image_url }}" alt="{{ $product->name }}" width="560" height="700"></div>@if($product->gallery)<div class="thumbnail-row"><button type="button" data-photo="{{ $product->image_url }}" aria-label="Ver imagen principal"><img src="{{ $product->image_url }}" alt="Principal"></button>@foreach($product->gallery as $photo)<button type="button" data-photo="{{ asset($photo) }}" aria-label="Ver imagen {{ $loop->iteration+1 }}"><img src="{{ asset($photo) }}" alt="Vista {{ $loop->iteration+1 }}"></button>@endforeach</div>@endif</div>
<div class="product-info"><div class="eyebrow">{{ $product->category->name }}</div><h1>{{ $product->name }}</h1><div class="detail-price">@money($product->price) @if($product->compare_price>$product->price)<del>@money($product->compare_price)</del>@endif</div><p class="product-description">{{ $product->description }}</p>
<form action="{{ route('cart.add') }}" method="post" data-once>@csrf
@foreach($product->variants->where('active',true)->groupBy('color') as $color=>$variants)<fieldset class="variant-group"><legend>Color: <strong>{{ $color }}</strong> · Elegí tu talle</legend><div class="size-options">@foreach($variants as $variant)<label class="size-choice"><input type="radio" name="variant_id" value="{{ $variant->id }}" required @disabled($variant->available<1) @checked(old('variant_id')==$variant->id) aria-label="{{ $variant->size }}, {{ $color }}, {{ $variant->available }} disponibles"><span>{{ $variant->size }}</span></label>@endforeach</div></fieldset>@endforeach
<details><summary>Guía de talles</summary><p>Elegí el talle que usás habitualmente. El calce puede variar según la prenda. Para confirmar medidas exactas, consultanos antes de comprar.</p><a class="text-link" href="{{ route('contact') }}">Consultar medidas <x-icon name="arrow" size="16"/></a></details>
<div class="purchase-row"><label><span class="sr-only">Cantidad</span><input name="quantity" type="number" min="1" max="99" value="1" required></label><button class="button primary" @disabled($product->variants->where('active',true)->sum(fn($v)=>$v->available)<1)>{{ $product->variants->where('active',true)->sum(fn($v)=>$v->available)>0?'Agregar a mi bolsa':'Sin stock' }} <x-icon name="bag"/></button></div></form>
<div class="detail-meta"><x-icon name="truck" size="18"/> Envío a domicilio o retiro coordinado</div><details open><summary>Composición y cuidados</summary><p>{{ $product->composition ?: 'Consultanos por los cuidados recomendados de esta prenda.' }}</p></details><details><summary>Envíos, cambios y devoluciones</summary><p>Elegí la entrega al finalizar tu compra. Podés seguir el estado con tu número de pedido.</p><a class="text-link" href="{{ route('returns') }}">Consultar cambios y devoluciones</a></details>
</div></div></section>@endsection