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

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

@section('content')
<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($product->image)
                <img src="{{ asset('storage/'.$product->image) }}" alt="{{ $product->name }}" class="w-full rounded-2xl border border-slate-200">
            @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>
@endsection
