@extends('layouts.app')
@section('title', $product->name)

@section('content')

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    {{-- Breadcrumb --}}
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-blue-600">Accueil</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('products') }}" class="hover:text-blue-600">Produits</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('products', ['category' => $product->category->slug ?? '']) }}" class="hover:text-blue-600">{{ $product->category->name ?? '' }}</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-gray-800 font-medium">{{ $product->name }}</span>
    </nav>

    <div class="grid md:grid-cols-2 gap-10 bg-white rounded-3xl shadow-sm border border-gray-100 p-6 md:p-10">

        {{-- Image --}}
        <div>
            <div class="aspect-square bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl overflow-hidden shadow-inner relative group">
                @if($product->image_url)
                    <img src="{{ $product->image_url }}"
                         alt="{{ $product->name }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                         onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100\'><i class=\'fas fa-mobile-alt text-9xl text-blue-200\'></i></div>'">
                @else
                    <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
                        <i class="fas fa-mobile-alt text-9xl text-blue-200"></i>
                    </div>
                @endif
                {{-- Badge promos --}}
                @if($product->old_price)
                    <div class="absolute top-4 left-4">
                        <span class="bg-red-500 text-white font-bold px-3 py-1 rounded-full text-sm shadow">
                            -{{ $product->discount_percent }}%
                        </span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Details --}}
        <div>
            @if($product->category)
                <a href="{{ route('products', ['category' => $product->category->slug]) }}" class="inline-block bg-blue-100 text-blue-700 text-xs font-semibold px-3 py-1 rounded-full mb-3">
                    {{ $product->category->name }}
                </a>
            @endif

            <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 mb-3">{{ $product->name }}</h1>

            @if($product->brand)
                <p class="text-gray-500 text-sm mb-3"><span class="font-medium">Marque :</span> {{ $product->brand }}</p>
            @endif

            <div class="flex items-center gap-3 mb-5">
                <span class="text-3xl font-extrabold text-blue-700">{{ number_format($product->price, 2) }} FCFA</span>
                @if($product->old_price)
                    <span class="text-lg text-gray-400 line-through">{{ number_format($product->old_price, 2) }} FCFA</span>
                    <span class="bg-red-100 text-red-600 text-sm font-bold px-2 py-0.5 rounded-full">-{{ $product->discount_percent }}%</span>
                @endif
            </div>

            @if($product->short_description)
                <p class="text-gray-600 leading-relaxed mb-5">{{ $product->short_description }}</p>
            @endif

            {{-- Stock --}}
            <div class="flex items-center gap-2 mb-5">
                @if($product->stock > 0)
                    <span class="flex items-center gap-1.5 text-green-700 bg-green-100 text-sm font-semibold px-3 py-1 rounded-full">
                        <i class="fas fa-check-circle"></i> En stock ({{ $product->stock }} disponibles)
                    </span>
                @else
                    <span class="flex items-center gap-1.5 text-red-700 bg-red-100 text-sm font-semibold px-3 py-1 rounded-full">
                        <i class="fas fa-times-circle"></i> Rupture de stock
                    </span>
                @endif
            </div>

            @if($product->stock > 0)
                <form action="{{ route('cart.add', $product) }}" method="POST" x-data="{ qty: 1 }">
                    @csrf
                    <div class="flex items-center gap-3 mb-4">
                        <label class="text-sm font-semibold text-gray-700">Quantité :</label>
                        <div class="flex items-center border border-gray-200 rounded-lg overflow-hidden">
                            <button type="button" @click="qty > 1 && qty--" class="px-3 py-2 bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold transition-colors">−</button>
                            <input type="number" name="quantity" x-model="qty" min="1" max="{{ $product->stock }}" class="w-14 text-center py-2 border-x border-gray-200 text-sm font-semibold focus:outline-none">
                            <button type="button" @click="qty < {{ $product->stock }} && qty++" class="px-3 py-2 bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold transition-colors">+</button>
                        </div>
                    </div>
                    <button type="submit" class="btn-primary w-full text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2 text-base">
                        <i class="fas fa-cart-plus"></i> Ajouter au panier
                    </button>
                </form>
            @endif

            <a href="{{ route('checkout') }}" class="block mt-3 btn-accent w-full text-center text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2 text-base">
                <i class="fas fa-bolt"></i> Commander maintenant
            </a>

            {{-- SKU --}}
            @if($product->sku)
                <p class="text-xs text-gray-400 mt-4">Référence : {{ $product->sku }}</p>
            @endif
        </div>
    </div>

    {{-- Description --}}
    @if($product->description)
    <div class="mt-8 bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Description du produit</h2>
        <div class="prose prose-sm text-gray-600 max-w-none leading-relaxed">
            {!! nl2br(e($product->description)) !!}
        </div>
    </div>
    @endif

    {{-- Related Products --}}
    @if($related->isNotEmpty())
    <div class="mt-12">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">Produits similaires</h2>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
            @foreach($related as $item)
            <div class="product-card bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden group">
                <a href="{{ route('products.show', $item->slug) }}" class="block">
                    <div class="aspect-square bg-gray-50 overflow-hidden">
                        @if($item->image_url)
                            <img src="{{ $item->image_url }}"
                                 alt="{{ $item->name }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                 loading="lazy"
                                 onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100\'><i class=\'fas fa-mobile-alt text-4xl text-blue-200\'></i></div>'">
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
                                <i class="fas fa-mobile-alt text-4xl text-blue-200"></i>
                            </div>
                        @endif
                    </div>
                    <div class="p-3">
                        <h3 class="text-sm font-semibold text-gray-800 hover:text-blue-700 line-clamp-2 mb-1 transition-colors">{{ $item->name }}</h3>
                        <span class="font-bold text-blue-700 text-sm">{{ number_format($item->price, 0, ',', ' ') }} FCFA</span>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
    @endif

</div>

@push('scripts')
<script>
    // Alpine handles qty - nothing extra needed
</script>
@endpush

@endsection