@extends('layouts.app')

@section('title', 'Finaliser la commande')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4 max-w-4xl">
        <!-- Header -->
        <div class="mb-6">
            <nav class="text-sm text-gray-500 mb-2">
                <a href="{{ route('food.cart', $prestataire) }}" class="hover:text-orange-500">
                    <i class="bi bi-arrow-left me-1"></i>Retour au panier
                </a>
            </nav>
            <h1 class="text-2xl font-bold text-gray-800">
                <i class="bi bi-credit-card text-orange-500 me-2"></i>Finaliser la commande
            </h1>
        </div>

        {{-- Bannière d'explication pour le client --}}
        <div class="mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl">
            <div class="flex items-start gap-3">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="bi bi-info-circle text-blue-600 text-lg"></i>
                </div>
                <div>
                    <h4 class="font-semibold text-blue-900">📋 Comment ça marche ?</h4>
                    <ul class="text-sm text-blue-700 mt-2 space-y-1.5">
                        <li class="flex items-start gap-2">
                            <span class="bg-blue-200 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">1</span>
                            <span><strong>Choisissez</strong> votre mode de récupération (emporter ou livraison)</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="bg-blue-200 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">2</span>
                            <span><strong>Confirmez</strong> votre commande - le prestataire reçoit une notification</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="bg-blue-200 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">3</span>
                            <span><strong>Suivez</strong> en temps réel la préparation de votre commande</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="bg-blue-200 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">4</span>
                            <span><strong>Payez</strong> à la réception (espèces ou carte selon le prestataire)</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <form action="{{ route('food.place-order', $prestataire) }}" method="POST" id="checkoutForm">
            @csrf
            
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Formulaire -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Type de livraison -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h3 class="font-bold text-lg mb-4">
                            <i class="bi bi-truck text-orange-500 me-2"></i>Mode de récupération
                        </h3>
                        
                        <div class="grid sm:grid-cols-2 gap-4">
                            @if($prestataire->food_pickup_enabled ?? true)
                            <label class="delivery-option relative cursor-pointer">
                                <input type="radio" name="delivery_type" value="pickup" class="sr-only" checked>
                                <div class="border-2 rounded-xl p-4 transition hover:border-orange-300 delivery-card">
                                    <div class="flex items-center gap-3">
                                        <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
                                            <i class="bi bi-bag text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold">À emporter</h4>
                                            <p class="text-sm text-gray-500">Récupérer sur place</p>
                                        </div>
                                    </div>
                                    <p class="text-green-600 text-sm mt-3 font-medium">Gratuit</p>
                                    @if($prestataire->food_min_order_pickup)
                                        <p class="text-xs text-gray-400 mt-1">Min. {{ number_format($prestataire->food_min_order_pickup, 2) }} €</p>
                                    @endif
                                </div>
                            </label>
                            @endif
                            
                            @if($prestataire->food_delivery_enabled ?? false)
                            <label class="delivery-option relative cursor-pointer">
                                <input type="radio" name="delivery_type" value="delivery" class="sr-only" {{ !($prestataire->food_pickup_enabled ?? true) ? 'checked' : '' }}>
                                <div class="border-2 rounded-xl p-4 transition hover:border-orange-300 delivery-card">
                                    <div class="flex items-center gap-3">
                                        <div class="w-12 h-12 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center">
                                            <i class="bi bi-truck text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold">Livraison</h4>
                                            <p class="text-sm text-gray-500">À domicile ({{ $prestataire->food_delivery_radius_km ?? 5 }} km max)</p>
                                        </div>
                                    </div>
                                    <p class="text-orange-600 text-sm mt-3 font-medium">
                                        @if($prestataire->food_free_delivery_above && $totals['subtotal'] >= $prestataire->food_free_delivery_above)
                                            <span class="text-green-600">Livraison gratuite !</span>
                                        @else
                                            À partir de {{ number_format($prestataire->food_delivery_base_fee ?? 3, 2) }} €
                                        @endif
                                    </p>
                                    @if($prestataire->food_min_order_delivery)
                                        <p class="text-xs text-gray-400 mt-1">Min. {{ number_format($prestataire->food_min_order_delivery, 2) }} €</p>
                                    @endif
                                    @if($prestataire->food_free_delivery_above && $totals['subtotal'] < $prestataire->food_free_delivery_above)
                                        <p class="text-xs text-green-500 mt-1">
                                            <i class="bi bi-gift me-1"></i>
                                            Gratuite dès {{ number_format($prestataire->food_free_delivery_above, 2) }} €
                                        </p>
                                    @endif
                                </div>
                            </label>
                            @endif
                        </div>
                        
                        @if(!($prestataire->food_pickup_enabled ?? true) && !($prestataire->food_delivery_enabled ?? false))
                            <div class="text-center py-4 text-red-500">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                Ce prestataire n'accepte pas de commandes pour le moment.
                            </div>
                        @endif
                        
                        @error('delivery_type')
                            <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Adresse de livraison -->
                    <div class="bg-white rounded-xl shadow-sm p-6" id="deliveryAddressSection" style="display: none;">
                        <h3 class="font-bold text-lg mb-4">
                            <i class="bi bi-geo-alt text-orange-500 me-2"></i>Adresse de livraison
                        </h3>
                        
                        @if($prestataire->food_delivery_instructions)
                            <div class="mb-4 p-3 bg-orange-50 border border-orange-200 rounded-lg text-sm text-orange-700">
                                <i class="bi bi-info-circle me-2"></i>
                                {{ $prestataire->food_delivery_instructions }}
                            </div>
                        @endif
                        
                        <!-- Contact -->
                        <div class="grid sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    <i class="bi bi-person me-1 text-gray-400"></i>Nom du destinataire
                                </label>
                                <input type="text" 
                                       name="delivery_contact_name" 
                                       value="{{ old('delivery_contact_name', auth()->user()->name ?? '') }}"
                                       class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 @error('delivery_contact_name') border-red-500 @enderror"
                                       placeholder="Votre nom complet">
                                @error('delivery_contact_name')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    <i class="bi bi-telephone me-1 text-gray-400"></i>Téléphone <span class="text-red-500">*</span>
                                </label>
                                <input type="tel" 
                                       name="delivery_phone" 
                                       value="{{ old('delivery_phone', auth()->user()->phone ?? '') }}"
                                       class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 @error('delivery_phone') border-red-500 @enderror"
                                       placeholder="06 XX XX XX XX"
                                       required>
                                @error('delivery_phone')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                <p class="text-xs text-gray-400 mt-1">Le livreur vous appellera à ce numéro</p>
                            </div>
                        </div>
                        
                        <!-- Bouton Géolocalisation -->
                        <div class="mb-4">
                            <button type="button" 
                                    id="geolocateBtn"
                                    onclick="useMyLocation()"
                                    class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold rounded-xl shadow-md transition-all">
                                <svg id="geolocateIcon" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                                <span id="geolocateBtnText">📍 Utiliser ma position actuelle</span>
                            </button>
                            <p class="text-xs text-gray-400 mt-1.5 text-center">
                                <i class="bi bi-shield-check me-1"></i>
                                Votre position est utilisée uniquement pour la livraison
                            </p>
                        </div>
                        
                        <div class="relative flex items-center my-4">
                            <div class="flex-grow border-t border-gray-200"></div>
                            <span class="flex-shrink mx-3 text-gray-400 text-sm">ou saisissez manuellement</span>
                            <div class="flex-grow border-t border-gray-200"></div>
                        </div>
                        
                        <!-- Adresse avec autocomplete -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                <i class="bi bi-geo-alt-fill me-1 text-gray-400"></i>Adresse complète <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="text" 
                                       id="delivery_address_input"
                                       name="delivery_address" 
                                       value="{{ old('delivery_address', auth()->user()->address ?? '') }}"
                                       class="w-full border rounded-lg p-3 pl-10 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 @error('delivery_address') border-red-500 @enderror"
                                       placeholder="Commencez à taper votre adresse..."
                                       autocomplete="off">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <i class="bi bi-search text-gray-400"></i>
                                </div>
                                <!-- Suggestions dropdown -->
                                <div id="address_suggestions" class="hidden absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-60 overflow-y-auto"></div>
                            </div>
                            <input type="hidden" name="delivery_lat" id="delivery_lat" value="{{ old('delivery_lat') }}">
                            <input type="hidden" name="delivery_lng" id="delivery_lng" value="{{ old('delivery_lng') }}">
                            @error('delivery_address')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-gray-400 mt-1">
                                <i class="bi bi-info-circle me-1"></i>
                                Tapez au moins 3 caractères puis sélectionnez votre adresse
                            </p>
                        </div>
                        
                        <!-- Détails immeuble -->
                        <div class="grid sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    <i class="bi bi-building me-1 text-gray-400"></i>Étage / Appartement
                                </label>
                                <input type="text" 
                                       name="delivery_floor" 
                                       value="{{ old('delivery_floor') }}"
                                       class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
                                       placeholder="Ex: 3ème étage, Apt 12">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    <i class="bi bi-key me-1 text-gray-400"></i>Code d'accès
                                </label>
                                <input type="text" 
                                       name="delivery_door_code" 
                                       value="{{ old('delivery_door_code') }}"
                                       class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
                                       placeholder="Ex: A1234, 5678#">
                            </div>
                        </div>
                        
                        <!-- Instructions pour le livreur -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                <i class="bi bi-signpost-2 me-1 text-gray-400"></i>Instructions pour le livreur
                            </label>
                            <textarea name="delivery_building_info" 
                                      class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500" 
                                      rows="2" 
                                      placeholder="Ex: Bâtiment B, sonner chez Dupont, porte bleue...">{{ old('delivery_building_info') }}</textarea>
                        </div>
                        
                        <!-- Carte de prévisualisation (optionnel) -->
                        <div id="delivery_map_preview" class="h-40 rounded-lg bg-gray-100 mb-4 hidden overflow-hidden">
                            <div class="w-full h-full flex items-center justify-center text-gray-400">
                                <i class="bi bi-map text-3xl"></i>
                            </div>
                        </div>
                        
                        <p class="text-xs text-gray-400">
                            <i class="bi bi-shield-check me-1"></i>
                            Zone de livraison : {{ $prestataire->food_delivery_radius_km ?? 5 }} km autour de {{ $prestataire->city ?? 'l\'établissement' }}
                        </p>
                    </div>
                    
                    <!-- Notes -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h3 class="font-bold text-lg mb-4">
                            <i class="bi bi-chat-text text-orange-500 me-2"></i>Instructions spéciales
                        </h3>
                        
                        <textarea name="notes" 
                                  class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-orange-500 focus:border-orange-500" 
                                  rows="2" 
                                  placeholder="Allergies, préférences, instructions pour la livraison...">{{ old('notes') }}</textarea>
                        <p class="text-gray-400 text-sm mt-2">Optionnel - Le prestataire verra ce message</p>
                    </div>
                    
                    <!-- Récapitulatif des articles -->
                    <div class="bg-white rounded-xl shadow-sm p-6">
                        <h3 class="font-bold text-lg mb-4">
                            <i class="bi bi-list-check text-orange-500 me-2"></i>Récapitulatif
                        </h3>
                        
                        <div class="space-y-3">
                            @foreach($cartItems as $item)
                                <div class="flex justify-between items-center py-2 border-b last:border-0">
                                    <div class="flex items-center gap-3">
                                        <span class="bg-orange-100 text-orange-600 rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">
                                            {{ $item['quantity'] }}
                                        </span>
                                        <span>{{ $item['product']->name }}</span>
                                    </div>
                                    <span class="font-semibold">{{ number_format($item['total'], 2) }} €</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                
                <!-- Sidebar Total -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-sm p-6 sticky top-4">
                        <h3 class="font-bold text-lg mb-4">Total</h3>
                        
                        <div class="space-y-3 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-500">Sous-total</span>
                                <span>{{ number_format($totals['subtotal'], 2) }} €</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Frais de service</span>
                                <span>{{ number_format($totals['service_fee'], 2) }} €</span>
                            </div>
                            <div class="flex justify-between" id="deliveryFeeRow">
                                <span class="text-gray-500">
                                    Frais de livraison
                                    <span id="distanceInfo" class="hidden text-xs text-gray-400 block"></span>
                                </span>
                                <span id="deliveryFeeAmount">0.00 €</span>
                            </div>
                            @if($prestataire->food_delivery_fee_per_km > 0)
                            <div class="text-xs text-gray-400 -mt-2" id="feeBreakdown">
                                <span>Base: {{ number_format($prestataire->food_delivery_base_fee ?? 3, 2) }}€ + {{ number_format($prestataire->food_delivery_fee_per_km, 2) }}€/km</span>
                            </div>
                            @endif
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="flex justify-between font-bold text-xl">
                            <span>Total</span>
                            <span class="text-orange-600" id="totalAmount">{{ number_format($totals['total'], 2) }} €</span>
                        </div>
                        
                        <button type="submit" 
                                class="block w-full bg-orange-500 hover:bg-orange-600 text-white text-center py-4 rounded-lg font-bold mt-6 transition">
                            <i class="bi bi-check-circle me-2"></i>Confirmer la commande
                        </button>
                        
                        <p class="text-xs text-gray-400 text-center mt-4">
                            En confirmant, vous acceptez nos conditions générales
                        </p>
                        
                        <div class="mt-4 p-3 bg-orange-50 rounded-lg text-center">
                            <p class="text-sm text-orange-700">
                                <i class="bi bi-info-circle me-1"></i>
                                Le paiement se fait à la réception
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const baseTotal = {{ $totals['subtotal'] + $totals['service_fee'] }};
const deliveryBaseFee = {{ $prestataire->food_delivery_base_fee ?? 3 }};
const deliveryFeePerKm = {{ $prestataire->food_delivery_fee_per_km ?? 0 }};
const freeDeliveryAbove = {{ $prestataire->food_free_delivery_above ?? 0 }};
const subtotal = {{ $totals['subtotal'] }};
const prestataireLocation = {
    lat: {{ $prestataire->lat ?? 0 }},
    lng: {{ $prestataire->lng ?? 0 }}
};
let map = null;
let marker = null;
let searchTimeout = null;
let currentDeliveryDistance = 0;

// Initialize address autocomplete with OpenStreetMap Nominatim
function initAddressAutocomplete() {
    const input = document.getElementById('delivery_address_input');
    const suggestionsDiv = document.getElementById('address_suggestions');
    
    if (!input) return;
    
    input.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length < 3) {
            suggestionsDiv.classList.add('hidden');
            return;
        }
        
        searchTimeout = setTimeout(() => {
            searchAddress(query);
        }, 300);
    });
    
    // Hide suggestions when clicking outside
    document.addEventListener('click', function(e) {
        if (!input.contains(e.target) && !suggestionsDiv.contains(e.target)) {
            suggestionsDiv.classList.add('hidden');
        }
    });
}

// Search address using OpenStreetMap Nominatim API (FREE)
async function searchAddress(query) {
    const suggestionsDiv = document.getElementById('address_suggestions');
    
    try {
        const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&countrycodes=fr,be,ch,lu&limit=5&addressdetails=1`);
        const results = await response.json();
        
        if (results.length > 0) {
            suggestionsDiv.innerHTML = results.map(result => `
                <div class="suggestion-item p-3 hover:bg-orange-50 cursor-pointer border-b border-gray-100 last:border-0 transition-colors"
                     onclick="selectAddress('${result.display_name.replace(/'/g, "\\'")}', ${result.lat}, ${result.lon})">
                    <div class="flex items-start gap-2">
                        <svg class="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        </svg>
                        <span class="text-sm text-gray-700">${result.display_name}</span>
                    </div>
                </div>
            `).join('');
            suggestionsDiv.classList.remove('hidden');
        } else {
            suggestionsDiv.innerHTML = '<div class="p-3 text-gray-500 text-sm">Aucune adresse trouvée</div>';
            suggestionsDiv.classList.remove('hidden');
        }
    } catch (error) {
        console.error('Erreur recherche adresse:', error);
    }
}

// Select an address from suggestions
function selectAddress(address, lat, lng) {
    document.getElementById('delivery_address_input').value = address;
    document.getElementById('delivery_lat').value = lat;
    document.getElementById('delivery_lng').value = lng;
    document.getElementById('address_suggestions').classList.add('hidden');
    
    // Show map preview
    showMapPreview(lat, lng);
    
    // Validate distance and update delivery fee
    validateDeliveryDistance(lat, lng);
    updateDeliveryFee(lat, lng);
}

// Show map preview using Leaflet + OpenStreetMap
function showMapPreview(lat, lng) {
    const mapDiv = document.getElementById('delivery_map_preview');
    if (!mapDiv) return;
    
    mapDiv.classList.remove('hidden');
    mapDiv.innerHTML = '<div id="leaflet_map" class="w-full h-full"></div>';
    
    // Initialize Leaflet map
    map = L.map('leaflet_map').setView([lat, lng], 16);
    
    // Add OpenStreetMap tiles (FREE)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);
    
    // Add marker
    marker = L.marker([lat, lng]).addTo(map);
    
    // Fix map display issue
    setTimeout(() => map.invalidateSize(), 100);
}

// Validate delivery distance
function validateDeliveryDistance(lat, lng) {
    const maxRadius = {{ $prestataire->food_delivery_radius_km ?? 5 }};
    
    if (prestataireLocation.lat && prestataireLocation.lng) {
        const distance = calculateDistance(lat, lng, prestataireLocation.lat, prestataireLocation.lng);
        currentDeliveryDistance = distance;
        
        if (distance > maxRadius) {
            alert(`Cette adresse est à ${distance.toFixed(1)} km. La zone de livraison est limitée à ${maxRadius} km.`);
            return false;
        }
    }
    return true;
}

// Update delivery fee based on distance
function updateDeliveryFee(lat, lng) {
    const deliveryType = document.querySelector('input[name="delivery_type"]:checked');
    if (!deliveryType || deliveryType.value !== 'delivery') return;
    
    let fee = 0;
    
    // Check for free delivery
    if (freeDeliveryAbove > 0 && subtotal >= freeDeliveryAbove) {
        fee = 0;
    } else {
        // Calculate based on distance
        fee = deliveryBaseFee;
        if (prestataireLocation.lat && prestataireLocation.lng && lat && lng) {
            const distance = calculateDistance(lat, lng, prestataireLocation.lat, prestataireLocation.lng);
            fee += distance * deliveryFeePerKm;
        }
    }
    
    fee = Math.round(fee * 100) / 100;
    
    // Update display
    const feeText = fee === 0 ? 'Gratuit !' : fee.toFixed(2) + ' €';
    document.getElementById('deliveryFeeAmount').textContent = feeText;
    if (fee === 0) {
        document.getElementById('deliveryFeeAmount').classList.add('text-green-600', 'font-semibold');
    } else {
        document.getElementById('deliveryFeeAmount').classList.remove('text-green-600', 'font-semibold');
    }
    
    // Update total
    const total = baseTotal + fee;
    document.getElementById('totalAmount').textContent = total.toFixed(2) + ' €';
    
    // Show distance info
    const distanceInfo = document.getElementById('distanceInfo');
    if (distanceInfo && currentDeliveryDistance > 0) {
        distanceInfo.textContent = `Distance: ${currentDeliveryDistance.toFixed(1)} km`;
        distanceInfo.classList.remove('hidden');
    }
}

// Calculate distance in km using Haversine formula
function calculateDistance(lat1, lon1, lat2, lon2) {
    const R = 6371;
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
              Math.sin(dLon/2) * Math.sin(dLon/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    initAddressAutocomplete();
});

// Use geolocation to get current position
function useMyLocation() {
    const btn = document.getElementById('geolocateBtn');
    const btnText = document.getElementById('geolocateBtnText');
    const icon = document.getElementById('geolocateIcon');
    
    if (!navigator.geolocation) {
        alert('La géolocalisation n\'est pas supportée par votre navigateur.');
        return;
    }
    
    // Show loading state
    btn.disabled = true;
    btnText.textContent = 'Localisation en cours...';
    icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>';
    icon.classList.add('animate-spin');
    
    navigator.geolocation.getCurrentPosition(
        async function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            // Update hidden fields
            document.getElementById('delivery_lat').value = lat;
            document.getElementById('delivery_lng').value = lng;
            
            // Reverse geocode to get address using OpenStreetMap Nominatim (FREE)
            try {
                const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&addressdetails=1`);
                const data = await response.json();
                
                if (data && data.display_name) {
                    document.getElementById('delivery_address_input').value = data.display_name;
                    
                    // Show map preview
                    showMapPreview(lat, lng);
                    
                    // Validate distance and update fee
                    if (validateDeliveryDistance(lat, lng)) {
                        updateDeliveryFee(lat, lng);
                        btnText.textContent = '✅ Position détectée !';
                        btn.classList.remove('from-blue-500', 'to-indigo-600', 'hover:from-blue-600', 'hover:to-indigo-700');
                        btn.classList.add('from-green-500', 'to-emerald-600');
                    }
                } else {
                    throw new Error('Adresse non trouvée');
                }
            } catch (error) {
                console.error('Erreur reverse geocoding:', error);
                // Fallback: just use coordinates
                document.getElementById('delivery_address_input').value = `Position: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
                showMapPreview(lat, lng);
                btnText.textContent = '⚠️ Précisez votre adresse';
            }
            
            // Reset button state
            icon.classList.remove('animate-spin');
            icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>';
            btn.disabled = false;
            
            // Reset button after 3 seconds
            setTimeout(() => {
                btnText.textContent = '📍 Utiliser ma position actuelle';
                btn.classList.remove('from-green-500', 'to-emerald-600');
                btn.classList.add('from-blue-500', 'to-indigo-600', 'hover:from-blue-600', 'hover:to-indigo-700');
                icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>';
            }, 3000);
        },
        function(error) {
            btn.disabled = false;
            icon.classList.remove('animate-spin');
            icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>';
            
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    btnText.textContent = '❌ Accès refusé';
                    alert('Vous avez refusé l\'accès à votre position. Veuillez l\'autoriser dans les paramètres de votre navigateur ou saisir votre adresse manuellement.');
                    break;
                case error.POSITION_UNAVAILABLE:
                    btnText.textContent = '❌ Position indisponible';
                    alert('Impossible de déterminer votre position. Veuillez saisir votre adresse manuellement.');
                    break;
                case error.TIMEOUT:
                    btnText.textContent = '❌ Délai dépassé';
                    alert('La demande de géolocalisation a expiré. Veuillez réessayer.');
                    break;
                default:
                    btnText.textContent = '❌ Erreur';
                    alert('Une erreur est survenue. Veuillez saisir votre adresse manuellement.');
            }
            
            // Reset button text after 3 seconds
            setTimeout(() => {
                btnText.textContent = '📍 Utiliser ma position actuelle';
            }, 3000);
        },
        {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 60000
        }
    );
}

document.querySelectorAll('input[name="delivery_type"]').forEach(input => {
    input.addEventListener('change', function() {
        const isDelivery = this.value === 'delivery';
        
        // Show/hide delivery address
        document.getElementById('deliveryAddressSection').style.display = isDelivery ? 'block' : 'none';
        
        // Get current lat/lng if available
        const lat = parseFloat(document.getElementById('delivery_lat').value) || 0;
        const lng = parseFloat(document.getElementById('delivery_lng').value) || 0;
        
        // Calculate delivery fee
        let currentDeliveryFee = 0;
        if (isDelivery) {
            if (freeDeliveryAbove > 0 && subtotal >= freeDeliveryAbove) {
                currentDeliveryFee = 0;
            } else {
                currentDeliveryFee = deliveryBaseFee;
                // Add per-km fee if we have coordinates
                if (lat && lng && prestataireLocation.lat && prestataireLocation.lng) {
                    const distance = calculateDistance(lat, lng, prestataireLocation.lat, prestataireLocation.lng);
                    currentDeliveryFee += distance * deliveryFeePerKm;
                }
            }
        }
        
        currentDeliveryFee = Math.round(currentDeliveryFee * 100) / 100;
        
        // Update delivery fee display
        const feeText = currentDeliveryFee === 0 && isDelivery ? 'Gratuit !' : currentDeliveryFee.toFixed(2) + ' €';
        document.getElementById('deliveryFeeAmount').textContent = feeText;
        if (currentDeliveryFee === 0 && isDelivery) {
            document.getElementById('deliveryFeeAmount').classList.add('text-green-600', 'font-semibold');
        } else {
            document.getElementById('deliveryFeeAmount').classList.remove('text-green-600', 'font-semibold');
        }
        
        // Update total
        const total = baseTotal + currentDeliveryFee;
        document.getElementById('totalAmount').textContent = total.toFixed(2) + ' €';
        
        // Update card styles
        document.querySelectorAll('.delivery-card').forEach(card => {
            card.classList.remove('border-orange-500', 'bg-orange-50');
            card.classList.add('border-gray-200');
        });
        this.closest('.delivery-option').querySelector('.delivery-card').classList.remove('border-gray-200');
        this.closest('.delivery-option').querySelector('.delivery-card').classList.add('border-orange-500', 'bg-orange-50');
    });
    
    // Initialize
    if (input.checked) {
        input.dispatchEvent(new Event('change'));
    }
});

// Form validation
document.getElementById('checkoutForm').addEventListener('submit', function(e) {
    const deliveryType = document.querySelector('input[name="delivery_type"]:checked');
    if (!deliveryType) {
        e.preventDefault();
        alert('Veuillez choisir un mode de récupération.');
        return false;
    }
    
    if (deliveryType.value === 'delivery') {
        const address = document.querySelector('input[name="delivery_address"]').value.trim();
        const phone = document.querySelector('input[name="delivery_phone"]').value.trim();
        
        if (!address) {
            e.preventDefault();
            alert('Veuillez entrer votre adresse de livraison.');
            document.querySelector('input[name="delivery_address"]').focus();
            return false;
        }
        
        if (!phone) {
            e.preventDefault();
            alert('Veuillez entrer votre numéro de téléphone pour la livraison.');
            document.querySelector('input[name="delivery_phone"]').focus();
            return false;
        }
        
        // Validate phone format
        const phoneRegex = /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/;
        if (!phoneRegex.test(phone.replace(/\s/g, ''))) {
            e.preventDefault();
            alert('Veuillez entrer un numéro de téléphone valide.');
            document.querySelector('input[name="delivery_phone"]').focus();
            return false;
        }
    }
});
</script>
@endpush