{{-- Product Card with Order Modal --}}
<div x-data="{ showModal: false }" class="bg-white rounded-2xl overflow-hidden shadow-sm border border-orange-50 card-hover group">

    {{-- Image --}}
    <div class="relative overflow-hidden h-56">
        <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.src='https://images.unsplash.com/photo-1578926288207-a90a5366a463?w=400&h=300&fit=crop'">

        @if($product->is_featured)
        <span class="absolute top-3 left-3 bg-secondary text-white text-xs font-semibold px-3 py-1 rounded-full shadow">
            <i class="fas fa-star mr-1"></i> Vedette
        </span>
        @endif

      
    </div>

    {{-- Contenu de la card --}}
    <div class="p-5">
        <div class="flex items-start justify-between mb-2">
            <div class="flex-1">
                <span class="text-xs text-secondary font-medium uppercase tracking-wider">{{ $product->category->name ?? '' }}</span>
                <h3 class="font-serif text-lg font-bold text-gray-800 mt-0.5 leading-tight">{{ $product->name }}</h3>
            </div>
            <span class="text-primary font-bold text-lg ml-2 whitespace-nowrap">
                {{ number_format($product->price, 0, ',', ' ') }} FCFA
            </span>
        </div>

        @if($product->short_description)
        <p class="text-gray-500 text-sm leading-relaxed mb-4 line-clamp-2">{{ $product->short_description }}</p>
        @endif

        <div class="flex items-center justify-end">
            <button @click="showModal = true"
                    class="inline-flex items-center gap-2 bg-primary text-white text-sm font-medium px-4 py-2 rounded-full hover:bg-primary-dark transition-all shadow-sm hover:shadow-md">
                <i class="fas fa-shopping-cart"></i> Commander
            </button>
        </div>
    </div>

    {{-- ── Modal — téléporté sur le <body> pour éviter tout conflit CSS ── --}}
    <template x-teleport="body">
        <div x-show="showModal"
             x-cloak
             class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
             style="background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);"
             @click.self="showModal = false"
             @keydown.escape.window="showModal = false">

            <div x-show="showModal"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 scale-95"
                 class="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden">

                {{-- En-tête du modal --}}
                <div class="relative text-white p-6" style="background: linear-gradient(135deg, #6B4226 0%, #8B5E3C 60%, #D4A96A 100%);">
                    <button @click="showModal = false"
                            class="absolute top-4 right-4 w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors">
                        <i class="fas fa-times text-sm"></i>
                    </button>
                    <div class="flex items-center gap-4">
                        <img src="{{ $product->image_url }}"
                             alt="{{ $product->name }}"
                             class="w-16 h-16 rounded-xl object-cover border-2 border-white/30 shadow-lg flex-shrink-0"
                             onerror="this.src='https://images.unsplash.com/photo-1578926288207-a90a5366a463?w=100&h=100&fit=crop'">
                        <div>
                            <p class="text-white/70 text-xs uppercase tracking-wider mb-0.5">Commander</p>
                            <h2 class="font-serif text-lg font-bold leading-tight">{{ $product->name }}</h2>
                            <p class="text-yellow-300 font-bold text-xl mt-1">{{ number_format($product->price, 0, ',', ' ') }} <span class="text-sm font-normal">FCFA</span></p>
                        </div>
                    </div>
                </div>

                {{-- Corps du formulaire --}}
                <div class="p-6">
                    <form action="{{ route('orders.store') }}" method="POST" class="space-y-4">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">

                        {{-- Nom complet --}}
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                                <i class="fas fa-user text-primary mr-1.5"></i> Nom complet <span class="text-red-400">*</span>
                            </label>
                            <input type="text" name="customer_name" required
                                   class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition"
                                   placeholder="Votre nom complet">
                        </div>

                        {{-- Numéro de téléphone --}}
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                                <i class="fas fa-phone text-primary mr-1.5"></i> Numéro de téléphone <span class="text-red-400">*</span>
                            </label>
                            <input type="tel" name="customer_phone" required
                                   class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition"
                                   placeholder="Ex : 06 XX XX XX XX">
                        </div>

                        {{-- Quantité --}}
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                                <i class="fas fa-hashtag text-primary mr-1.5"></i> Quantité <span class="text-red-400">*</span>
                            </label>
                            <input type="number" name="quantity" required min="1" max="100" value="1"
                                   class="w-28 border border-gray-200 rounded-xl px-4 py-3 text-sm text-center font-bold focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition">
                        </div>

                        {{-- Notes --}}
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                                <i class="fas fa-comment-dots text-primary mr-1.5"></i> Notes <span class="text-gray-400 font-normal">(optionnel)</span>
                            </label>
                            <textarea name="notes" rows="3"
                                      class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition resize-none"
                                      placeholder="Couleur souhaitée, taille, instructions spéciales..."></textarea>
                        </div>

                        {{-- Boutons --}}
                        <div class="flex gap-3 pt-1">
                            <button type="button" @click="showModal = false"
                                    class="flex-1 border-2 border-gray-200 text-gray-600 py-3 rounded-xl font-semibold hover:bg-gray-50 hover:border-gray-300 transition-all">
                                Annuler
                            </button>
                            <button type="submit"
                                    class="flex-1 bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary-dark transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                                <i class="fas fa-check-circle"></i> Confirmer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>

</div>
