@extends('layouts.app')

@section('title', 'Finaliser votre commande | OraFresh Beauty')

@section('content')
    <div class="bg-gradient-to-b from-rose-50/30 to-white min-h-screen">
        <div class="max-w-6xl mx-auto px-6 py-12 pt-4">
            <div class="text-center mb-12">
                <span class="text-rose-600 uppercase tracking-[0.4em] text-[10px] mb-3 block">Commande</span>
                <h1 class="font-serif text-4xl md:text-5xl italic text-gray-900">Finaliser votre commande</h1>
            </div>

            <form action="{{ route('checkout.store') }}" method="POST">
                @csrf
                
                      

                <!-- Code de Parrainage (nouveaux clients uniquement) -->
                @auth
                    @if(!auth()->user()->loyaltyPoints()->where('action_type', 'referral_receiver')->exists())
                    <div class="mb-8 bg-gradient-to-r from-amber-50 to-orange-50 rounded-3xl p-6 border border-amber-200">
                        <div class="flex items-start gap-4">
                            <div class="bg-amber-500 rounded-full p-3 flex-shrink-0">
                                <i data-lucide="gift" class="w-6 h-6 text-white"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-sm font-bold text-gray-900 mb-2">Avez-vous un code de parrainage ?</h3>
                                <p class="text-xs text-gray-600 leading-relaxed mb-4">
                                    Entrez le code d'un ami et recevez {{ \App\Models\LoyaltyPoint::POINTS_REFERRAL_GIVER }} points bonus ! 🎁
                                </p>
                                <div class="flex gap-2">
                                    <div class="relative flex-1">
                                        <i data-lucide="users" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-amber-400"></i>
                                        <input type="text" name="referral_code" id="referral-code-input"
                                               placeholder="Ex: ABC12345" 
                                               class="w-full bg-white border border-amber-200 rounded-full py-3 pl-10 pr-4 text-sm focus:border-amber-400 focus:ring-2 focus:ring-amber-100 outline-none transition-all uppercase">
                                    </div>
                                    <button type="button" onclick="verifyReferralCode()" 
                                            class="px-6 py-3 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xs uppercase tracking-wider rounded-full hover:shadow-lg transition-all duration-300 font-semibold whitespace-nowrap">
                                        Vérifier
                                    </button>
                                </div>
                                <div id="referral-message" class="mt-2 text-xs"></div>
                            </div>
                        </div>
                    </div>
                    @endif
                @endauth

                <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
                    <!-- Formulaire -->
                    <div class="lg:col-span-3 space-y-8">
                        <section class="bg-white rounded-3xl p-8 shadow-sm border border-rose-100">
                            <h3
                                class="uppercase text-[11px] tracking-widest font-bold pb-4 mb-8 flex items-center gap-2 border-b border-rose-200 text-gray-900">
                                <i data-lucide="truck" class="w-5 h-5 text-rose-500"></i> Informations de livraison
                            </h3>
                            <div class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="relative group">
                                        <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Prénom</label>
                                        <div class="relative">
                                            <i data-lucide="user"
                                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                            <input type="text" name="first_name" placeholder="Prénom"
                                                value="{{ auth()->user()->name ?? '' }}"
                                                class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                                required>
                                        </div>
                                    </div>
                                    <div class="relative group">
                                        <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Nom</label>
                                        <div class="relative">
                                            <i data-lucide="user"
                                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                            <input type="text" name="last_name" placeholder="Nom"
                                                class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                                required>
                                        </div>
                                    </div>
                                </div>
                                <div class="relative group">
                                    <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Email</label>
                                    <div class="relative">
                                        <i data-lucide="mail"
                                            class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                        <input type="email" name="email" placeholder="votre@email.com"
                                            value="{{ auth()->user()->email ?? '' }}"
                                            class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                            required>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="relative group">
                                        <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Gouvernorat</label>
                                        <div class="relative">
                                            <i data-lucide="map-pin"
                                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                            <select name="city"
                                                class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-10 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none appearance-none transition-all"
                                                required>
                                                <option value="" disabled selected>Sélectionnez...</option>
                                                <option value="ariana">Ariana</option>
                                                <option value="beja">Béja</option>
                                                <option value="ben_arous">Ben Arous</option>
                                                <option value="bizerte">Bizerte</option>
                                                <option value="gabes">Gabès</option>
                                                <option value="gafsa">Gafsa</option>
                                                <option value="jendouba">Jendouba</option>
                                                <option value="kairouan">Kairouan</option>
                                                <option value="kasserine">Kasserine</option>
                                                <option value="kebili">Kébili</option>
                                                <option value="kef">Le Kef</option>
                                                <option value="mahdia">Mahdia</option>
                                                <option value="manouba">La Manouba</option>
                                                <option value="medenine">Médenine</option>
                                                <option value="monastir">Monastir</option>
                                                <option value="nabeul">Nabeul</option>
                                                <option value="sfax">Sfax</option>
                                                <option value="sidi_bouzid">Sidi Bouzid</option>
                                                <option value="siliana">Siliana</option>
                                                <option value="sousse">Sousse</option>
                                                <option value="tataouine">Tataouine</option>
                                                <option value="tozeur">Tozeur</option>
                                                <option value="tunis">Tunis</option>
                                                <option value="zaghouan">Zaghouan</option>
                                            </select>
                                            <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
                                                <i data-lucide="chevron-down" class="w-4 h-4 text-rose-400"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="relative group">
                                        <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Téléphone</label>
                                        <div class="relative">
                                            <i data-lucide="phone"
                                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                            <input type="text" name="phone" placeholder="+216 XX XXX XXX"
                                                value="{{ auth()->user()->phone ?? '' }}"
                                                class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all"
                                                required>
                                        </div>
                                    </div>
                                </div>

                                <div class="relative group">
                                    <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Adresse de livraison</label>
                                    <div class="relative">
                                        <i data-lucide="home"
                                            class="absolute left-4 top-6 w-4 h-4 text-rose-400"></i>
                                        <textarea name="address" placeholder="Adresse complète" rows="3"
                                            class="w-full bg-rose-50/30 border border-rose-100 rounded-2xl py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all resize-none"
                                            required>{{ auth()->user()->address ?? '' }}</textarea>
                                    </div>
                                </div>

                                @guest
                                <!-- Option pour créer un compte -->
                                <div class="pt-6 border-t border-rose-100">
                                    <label class="flex items-start gap-3 cursor-pointer group">
                                        <input type="checkbox" id="create-account-checkbox" name="create_account" value="1"
                                               class="mt-1 w-5 h-5 text-rose-500 border-rose-300 rounded focus:ring-rose-500">
                                        <div class="flex-1">
                                            <span class="text-sm font-semibold text-gray-900 group-hover:text-rose-600 transition">
                                                Créer un compte pour profiter des avantages
                                            </span>
                                            <p class="text-xs text-gray-500 mt-1">
                                                Programme de fidélité, historique de commandes, suivi en temps réel
                                            </p>
                                        </div>
                                    </label>
                                    
                                    <div id="password-fields" class="mt-4 space-y-4 hidden">
                                        <div class="relative group">
                                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Mot de passe</label>
                                            <div class="relative">
                                                <i data-lucide="lock"
                                                    class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                                <input type="password" name="password" id="password-input" placeholder="Minimum 8 caractères"
                                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                            </div>
                                        </div>
                                        <div class="relative group">
                                            <label class="text-[10px] uppercase tracking-wider text-gray-500 mb-2 block">Confirmer le mot de passe</label>
                                            <div class="relative">
                                                <i data-lucide="lock"
                                                    class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                                <input type="password" name="password_confirmation" id="password-confirmation-input" placeholder="Confirmer votre mot de passe"
                                                    class="w-full bg-rose-50/30 border border-rose-100 rounded-full py-4 pl-12 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endguest
                            </div>
                        </section>

                        <section class="bg-white rounded-3xl p-8 shadow-sm border border-rose-100">
                            <h3
                                class="uppercase text-[11px] tracking-widest font-bold pb-4 mb-8 flex items-center gap-2 border-b border-rose-200 text-gray-900">
                                <i data-lucide="credit-card" class="w-5 h-5 text-rose-500"></i> Mode de paiement
                            </h3>
                            <div class="space-y-4">
                                <label class="flex items-center p-6 border-2 border-rose-500 bg-gradient-to-r from-rose-50 to-pink-50 rounded-2xl shadow-sm cursor-pointer hover:shadow-md transition-all">
                                    <div
                                        class="w-6 h-6 rounded-full border-4 border-rose-500 mr-4 flex items-center justify-center flex-shrink-0">
                                        <div class="w-2.5 h-2.5 bg-rose-500 rounded-full"></div>
                                    </div>
                                    <div class="flex-1">
                                        <span class="text-sm font-bold uppercase tracking-wider text-gray-900">Paiement à la livraison</span>
                                        <span class="block text-[10px] text-gray-500 mt-1">Réglez en espèces lors de la réception</span>
                                    </div>
                                    <i data-lucide="banknote" class="w-6 h-6 text-rose-500"></i>
                                    <input type="hidden" name="payment_method" value="cod">
                                </label>
                            </div>
                        </section>
                    </div>

                    <!-- Récapitulatif -->
                    <div class="lg:col-span-2">
                        <div class="bg-gradient-to-br from-rose-50 via-pink-50 to-rose-50 rounded-3xl p-8 shadow-lg border border-rose-200 sticky top-32">
                            <h3
                                class="uppercase text-[11px] tracking-widest font-bold mb-8 flex items-center justify-between text-gray-900">
                                <span class="flex items-center gap-2">
                                    <i data-lucide="shopping-bag" class="w-5 h-5 text-rose-500"></i>
                                    Résumé de la commande
                                </span> 
                                <span class="bg-rose-500 text-white px-3 py-1 rounded-full text-[10px]">{{ count($cart) }}</span>
                            </h3>

                            <div class="space-y-4 mb-8">
                                @php $subtotal = 0; @endphp
                                @foreach($cart as $id => $item)
                                    @php $subtotal += $item['price'] * $item['quantity']; @endphp
                                    <div class="flex gap-4 bg-white/60 backdrop-blur-sm rounded-2xl p-3 hover:bg-white/80 transition">
                                        <div class="w-16 h-16 bg-gradient-to-br from-rose-100 to-pink-100 overflow-hidden rounded-xl flex-shrink-0">
                                            <img src="{{ $item['image'] ? asset('uploads/' . $item['image']) : 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&q=80&w=200' }}"
                                                class="w-full h-full object-cover">
                                        </div>
                                        <div class="flex-1 flex flex-col justify-center min-w-0">
                                            <span class="text-xs font-semibold text-gray-900 truncate mb-1">{{ $item['name'] }}</span>
                                            <div class="flex items-center gap-1">
                                                <form action="{{ route('cart.update') }}" method="POST" class="inline">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $id }}">
                                                    <input type="hidden" name="action" value="decrease">
                                                    <button class="w-5 h-5 flex items-center justify-center bg-rose-100 text-rose-600 rounded-full hover:bg-rose-200 transition">
                                                        <i data-lucide="minus" class="w-3 h-3"></i>
                                                    </button>
                                                </form>
                                                <span class="text-[10px] font-semibold text-gray-700 w-8 text-center">{{ $item['quantity'] }}</span>
                                                <form action="{{ route('cart.update') }}" method="POST" class="inline">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $id }}">
                                                    <input type="hidden" name="action" value="increase">
                                                    <button class="w-5 h-5 flex items-center justify-center bg-rose-100 text-rose-600 rounded-full hover:bg-rose-200 transition">
                                                        <i data-lucide="plus" class="w-3 h-3"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-sm font-bold text-rose-600">{{ number_format($item['price'] * $item['quantity'], 2) }} DT</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="border-t border-rose-200 pt-6 space-y-4 mb-6">
                                <!-- Points de Fidélité (uniquement pour les clients connectés) -->
                                @auth
                                    @php
                                        $availablePoints = auth()->user()->total_loyalty_points ?? 0;
                                        $pointsValue = $availablePoints; // 1 point = 1 DT
                                    @endphp
                                    @if($availablePoints > 0)
                                    <div class="mb-4 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-4 border border-purple-200">
                                        <div class="flex items-center justify-between mb-3">
                                            <label class="text-[10px] uppercase tracking-wider text-purple-700 font-bold flex items-center gap-2">
                                                <i data-lucide="sparkles" class="w-4 h-4"></i>
                                                Points de Fidélité
                                            </label>
                                            <span class="text-xs font-bold text-purple-600">
                                                {{ $availablePoints }} points disponibles ({{ number_format($availablePoints * 0.01, 2) }} DT)
                                            </span>
                                        </div>
                                        <div class="flex gap-2">
                                            <div class="relative flex-1">
                                                <i data-lucide="gift" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-purple-400"></i>
                                                <input type="number" id="points-to-use" 
                                                       min="0" 
                                                       max="{{ $availablePoints }}" 
                                                       placeholder="Nombre de points"
                                                       class="w-full bg-white border border-purple-200 rounded-full py-3 pl-10 pr-4 text-sm focus:border-purple-400 focus:ring-2 focus:ring-purple-100 outline-none transition-all">
                                            </div>
                                            <button type="button" onclick="applyPoints()" 
                                                    class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 text-white text-xs uppercase tracking-wider rounded-full hover:shadow-lg transition-all duration-300 font-semibold whitespace-nowrap">
                                                Utiliser
                                            </button>
                                        </div>
                                        <p class="text-[10px] text-purple-600 mt-2">
                                            💎 10 pts = 0.1 DT | 100 pts = 1 DT
                                        </p>
                                        <div id="points-message" class="mt-2 text-xs"></div>
                                    </div>
                                    @endif
                                @endauth

                                <!-- Code Promo -->
                                <div class="mb-4">
                                    <label class="text-[10px] uppercase tracking-wider text-gray-600 mb-2 block font-semibold">Code promo</label>
                                    <div class="flex gap-2">
                                        <div class="relative flex-1">
                                            <i data-lucide="tag" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-rose-400"></i>
                                            <input type="text" id="coupon-code" 
                                                   value="{{ session('coupon_code') }}" 
                                                   placeholder="Entrez votre code"
                                                   class="w-full bg-white border border-rose-200 rounded-full py-3 pl-10 pr-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all uppercase">
                                        </div>
                                        <button type="button" onclick="applyCoupon()" 
                                                class="px-6 py-3 bg-gradient-to-r from-rose-500 to-pink-600 text-white text-xs uppercase tracking-wider rounded-full hover:shadow-lg transition-all duration-300 font-semibold whitespace-nowrap">
                                            Appliquer
                                        </button>
                                    </div>
                                    <div id="coupon-message" class="mt-2 text-xs"></div>
                                </div>

                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">Sous-total</span>
                                    <span class="font-semibold text-gray-900" id="subtotal-amount">{{ number_format($subtotal, 2) }} DT</span>
                                </div>
                                
                                @if(session('coupon'))
                                    <div class="flex justify-between text-sm text-green-600">
                                        <span class="flex items-center gap-1">
                                            <i data-lucide="tag" class="w-3 h-3"></i>
                                            Réduction ({{ session('coupon')['code'] }})
                                        </span>
                                        <span class="font-semibold">-{{ number_format(session('coupon')['discount'], 2) }} DT</span>
                                    </div>
                                @endif
                                <div id="discount-row" style="display: none;" class="flex justify-between text-sm text-green-600">
                                    <span class="flex items-center gap-1">
                                        <i data-lucide="tag" class="w-3 h-3"></i>
                                        Réduction <span id="discount-code"></span>
                                    </span>
                                    <span class="font-semibold">-<span id="discount-amount">0.00</span> DT</span>
                                </div>
                                
                                <!-- Points de fidélité utilisés -->
                                <div id="points-discount-row" style="display: none;" class="flex justify-between text-sm text-purple-600">
                                    <span class="flex items-center gap-1">
                                        <i data-lucide="sparkles" class="w-3 h-3"></i>
                                        Points Fidélité (<span id="points-used">0</span> pts)
                                    </span>
                                    <span class="font-semibold">-<span id="points-discount-amount">0.00</span> DT</span>
                                </div>
                                
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">Livraison</span>
                                    <div class="text-right">
                                        <span class="font-semibold text-gray-900" id="shipping-amount">7,00 DT</span>
                                        <span class="block text-[9px] text-rose-500 italic">Gratuite dès 60 DT</span>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="flex justify-between items-center font-bold text-xl mb-8 pt-6 border-t-2 border-rose-300">
                                <span class="text-gray-900">Total</span>
                                <span class="text-rose-600" id="total-amount">{{ number_format($subtotal + 7 - (session('coupon')['discount'] ?? 0), 2) }} DT</span>
                            </div>

                            <input type="hidden" name="coupon_code" id="hidden-coupon-code" value="{{ session('coupon_code') }}">
                            <input type="hidden" name="discount_amount" id="hidden-discount-amount" value="{{ session('coupon')['discount'] ?? 0 }}">
                            <input type="hidden" name="points_used" id="hidden-points-used" value="0">
                            <input type="hidden" name="points_discount" id="hidden-points-discount" value="0">
                            <input type="hidden" name="referral_code_verified" id="hidden-referral-code" value="">

                            <script>
                                let baseSubtotal = {{ $subtotal }};
                                let shippingCost = 7.00;
                                let currentDiscount = {{ session('coupon')['discount'] ?? 0 }};
                                let currentPointsDiscount = 0;
                                let currentPointsUsed = 0;
                                let availablePoints = {{ auth()->check() ? (auth()->user()->total_loyalty_points ?? 0) : 0 }};

                                function verifyReferralCode() {
                                    const codeInput = document.getElementById('referral-code-input');
                                    const code = codeInput.value.trim().toUpperCase();
                                    const messageDiv = document.getElementById('referral-message');

                                    if (!code) {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Veuillez entrer un code de parrainage</span>';
                                        return;
                                    }

                                    messageDiv.innerHTML = '<span class="text-gray-500">Vérification en cours...</span>';

                                    fetch('/referral/verify', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                                        },
                                        body: JSON.stringify({ code: code })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            document.getElementById('hidden-referral-code').value = code;
                                            codeInput.disabled = true;
                                            messageDiv.innerHTML = '<span class="text-green-600">✓ Code valide ! Vous recevrez ' + data.points + ' points après votre commande 🎉</span>';
                                        } else {
                                            messageDiv.innerHTML = '<span class="text-red-500">⚠️ ' + data.message + '</span>';
                                        }
                                    })
                                    .catch(error => {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Erreur lors de la vérification</span>';
                                    });
                                }

                                function updateTotal() {
                                    const total = baseSubtotal + shippingCost - currentDiscount - currentPointsDiscount;
                                    document.getElementById('total-amount').textContent = total.toFixed(2) + ' DT';
                                }

                                function applyPoints() {
                                    const pointsInput = document.getElementById('points-to-use');
                                    const points = parseInt(pointsInput.value) || 0;
                                    const messageDiv = document.getElementById('points-message');

                                    if (points <= 0) {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Veuillez entrer un nombre de points valide</span>';
                                        return;
                                    }

                                    if (points > availablePoints) {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Vous n\'avez que ' + availablePoints + ' points disponibles</span>';
                                        return;
                                    }

                                    const maxPointsForOrder = Math.floor((baseSubtotal + shippingCost - currentDiscount) * 100); // 100 points = 1 DT
                                    if (points > maxPointsForOrder) {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Maximum ' + maxPointsForOrder + ' points pour cette commande</span>';
                                        return;
                                    }

                                    // 100 points = 1 DT
                                    currentPointsDiscount = points * 0.01;
                                    currentPointsUsed = points;

                                    // Mettre à jour les champs cachés
                                    document.getElementById('hidden-points-used').value = points;
                                    document.getElementById('hidden-points-discount').value = currentPointsDiscount;

                                    // Afficher la ligne de réduction
                                    document.getElementById('points-used').textContent = points;
                                    document.getElementById('points-discount-amount').textContent = currentPointsDiscount.toFixed(2);
                                    document.getElementById('points-discount-row').style.display = 'flex';

                                    updateTotal();

                                    messageDiv.innerHTML = '<span class="text-green-600">✓ ' + points + ' points appliqués avec succès !</span>';

                                    // Réinitialiser lucide icons
                                    if (typeof lucide !== 'undefined') {
                                        setTimeout(() => lucide.createIcons(), 100);
                                    }
                                }

                                function applyCoupon() {
                                    const code = document.getElementById('coupon-code').value.trim().toUpperCase();
                                    const messageDiv = document.getElementById('coupon-message');

                                    if (!code) {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Veuillez entrer un code promo</span>';
                                        return;
                                    }

                                    messageDiv.innerHTML = '<span class="text-gray-500">Vérification en cours...</span>';

                                    fetch('/coupon/apply', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                                        },
                                        body: JSON.stringify({ code: code, subtotal: baseSubtotal })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            currentDiscount = data.discount;
                                            document.getElementById('hidden-coupon-code').value = code;
                                            document.getElementById('hidden-discount-amount').value = data.discount;
                                            
                                            // Afficher la réduction
                                            document.getElementById('discount-code').textContent = '(' + code + ')';
                                            document.getElementById('discount-amount').textContent = data.discount.toFixed(2);
                                            document.getElementById('discount-row').style.display = 'flex';
                                            
                                            // Mettre à jour le total
                                            updateTotal();
                                            
                                            messageDiv.innerHTML = '<span class="text-green-600">✓ Code promo appliqué avec succès !</span>';
                                        } else {
                                            messageDiv.innerHTML = '<span class="text-red-500">⚠️ ' + data.message + '</span>';
                                        }
                                    })
                                    .catch(error => {
                                        messageDiv.innerHTML = '<span class="text-red-500">⚠️ Erreur lors de la vérification</span>';
                                    });
                                }

                                // Initialiser lucide icons après ajout dynamique
                                if (typeof lucide !== 'undefined') {
                                    setTimeout(() => lucide.createIcons(), 100);
                                }

                                // Gestion de l'affichage des champs de mot de passe
                                const createAccountCheckbox = document.getElementById('create-account-checkbox');
                                const passwordFields = document.getElementById('password-fields');
                                const passwordInput = document.getElementById('password-input');
                                const passwordConfirmInput = document.getElementById('password-confirmation-input');

                                if (createAccountCheckbox) {
                                    createAccountCheckbox.addEventListener('change', function() {
                                        if (this.checked) {
                                            passwordFields.classList.remove('hidden');
                                            passwordInput.setAttribute('required', 'required');
                                            passwordConfirmInput.setAttribute('required', 'required');
                                        } else {
                                            passwordFields.classList.add('hidden');
                                            passwordInput.removeAttribute('required');
                                            passwordConfirmInput.removeAttribute('required');
                                            passwordInput.value = '';
                                            passwordConfirmInput.value = '';
                                        }
                                        // Réinitialiser les icônes
                                        if (typeof lucide !== 'undefined') {
                                            setTimeout(() => lucide.createIcons(), 50);
                                        }
                                    });
                                }
                            </script>

                            <button type="submit"
                                class="w-full bg-gradient-to-r from-rose-500 to-pink-600 text-white py-6 text-[11px] uppercase tracking-[0.3em] hover:shadow-2xl hover:scale-105 transition-all duration-300 rounded-full flex items-center justify-center gap-2">
                                <i data-lucide="check-circle" class="w-5 h-5"></i>
                                Confirmer la commande
                            </button>
                            
                            <div class="mt-6 flex items-center justify-center gap-4 text-[9px] text-gray-500">
                                <div class="flex items-center gap-1">
                                    <i data-lucide="shield-check" class="w-3 h-3 text-rose-400"></i>
                                    <span>Paiement sécurisé</span>
                                </div>
                                <span>•</span>
                                <div class="flex items-center gap-1">
                                    <i data-lucide="truck" class="w-3 h-3 text-rose-400"></i>
                                    <span>Livraison rapide</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection