@extends('themes.classic.layouts.app')

@section('title', $product->name.' - Boutique - '.($site_name ?? 'Mon Site'))

@section('content')
@php
    $gallery = $product->galleryPaths();
    $slides = [];
    if ($product->image) {
        $slides[] = $product->image;
    }
    foreach ($gallery as $g) {
        if ($g !== $product->image) {
            $slides[] = $g;
        }
    }
@endphp
<div class="max-w-4xl mx-auto px-6 py-16">
    <nav class="mb-8">
        <a href="{{ route('ecommerce.index') }}" class="text-slate-500 hover:text-slate-900">← Boutique</a>
        @if($product->category)
        <span class="text-slate-400 mx-2">/</span>
        <a href="{{ route('ecommerce.category', $product->category->slug) }}" class="text-slate-500 hover:text-slate-900">{{ $product->category->name }}</a>
        @endif
        <span class="text-slate-400 mx-2">/</span>
        <span class="text-slate-900 font-medium">{{ $product->name }}</span>
    </nav>

    <div class="grid md:grid-cols-2 gap-12">
        <div>
            @if(count($slides) > 0)
                <div class="space-y-3">
                    <div class="rounded-2xl border border-slate-200 overflow-hidden bg-slate-50 aspect-square flex items-center justify-center">
                        <img id="product-main-photo" src="{{ asset('storage/'.$slides[0]) }}" alt="{{ $product->name }}" class="w-full h-full object-contain max-h-[min(80vh,520px)]">
                    </div>
                    @if(count($slides) > 1)
                    <div class="flex flex-wrap gap-2">
                        @foreach($slides as $i => $path)
                        <button type="button" class="product-thumb rounded-lg border-2 overflow-hidden w-16 h-16 shrink-0 transition {{ $i === 0 ? 'border-primary-500 ring-2 ring-primary-200' : 'border-slate-200 hover:border-slate-300' }}" data-src="{{ asset('storage/'.$path) }}" aria-label="Photo {{ $i + 1 }}">
                            <img src="{{ asset('storage/'.$path) }}" alt="" class="w-full h-full object-cover">
                        </button>
                        @endforeach
                    </div>
                    @endif
                </div>
            @else
                <div class="w-full aspect-square rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 text-8xl">📦</div>
            @endif
        </div>
        <div>
            <h1 class="text-3xl font-bold text-slate-900">{{ $product->name }}</h1>
            <p class="text-3xl font-bold text-primary-500 mt-4">{{ number_format($product->price, 2, ',', ' ') }} €</p>
            @if($product->description)
            <div class="mt-6 text-slate-600 prose prose-slate max-w-none">{!! \App\Support\SafeHtml::richText($product->description) !!}</div>
            @endif
            @if($product->inStock())
            <form method="POST" action="{{ route('ecommerce.add-to-cart') }}" class="mt-8 flex gap-4 items-center">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <input type="number" name="qty" value="1" min="1" max="{{ $product->stock ?? 99 }}" class="w-20 px-4 py-2 border border-slate-200 rounded-xl">
                <button type="submit" class="px-8 py-3 bg-primary-500 text-white rounded-xl font-semibold hover:bg-primary-600 transition">Ajouter au panier</button>
            </form>
            @else
            <p class="mt-6 text-amber-600 font-medium">Rupture de stock</p>
            @endif
        </div>
    </div>
</div>
@if(count($slides) > 1)
<script>
document.querySelectorAll('.product-thumb').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var main = document.getElementById('product-main-photo');
        if (main) main.src = this.getAttribute('data-src');
        document.querySelectorAll('.product-thumb').forEach(function(b) {
            b.classList.remove('border-primary-500', 'ring-2', 'ring-primary-200');
            b.classList.add('border-slate-200');
        });
        this.classList.add('border-primary-500', 'ring-2', 'ring-primary-200');
        this.classList.remove('border-slate-200');
    });
});
</script>
@endif
@endsection
