@extends('layouts.app')

@section('title', 'Paramètres de livraison - Food')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-amber-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Bannière d'aide --}}
        <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-5 border border-blue-100">
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-blue-900 mb-1">Comment configurer vos livraisons ?</h3>
                    <p class="text-blue-700 text-sm leading-relaxed">
                        Cette page vous permet de définir <strong>comment vos clients reçoivent leurs commandes</strong>. 
                        Vous pouvez proposer le retrait sur place, la livraison, ou les deux. 
                        Configurez vos zones, tarifs et horaires pour offrir la meilleure expérience à vos clients.
                    </p>
                </div>
            </div>
        </div>
        
        {{-- En-tête --}}
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                    <i class="fas fa-truck text-orange-500 mr-3"></i>
                    Paramètres de livraison
                </h1>
                <p class="text-gray-600 mt-1">Configurez vos options de livraison et de retrait</p>
            </div>
            <a href="{{ route('prestataire.food-products.index') }}" 
               class="inline-flex items-center text-gray-600 hover:text-orange-600 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux produits
            </a>
        </div>

        {{-- Messages --}}
        @if(session('success'))
            <div class="mb-6 bg-green-100 border-l-4 border-green-500 p-4 rounded-r-lg">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <p class="text-green-700">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        @if($errors->any())
            <div class="mb-6 bg-red-100 border-l-4 border-red-500 p-4 rounded-r-lg">
                <div class="flex items-center mb-2">
                    <i class="fas fa-exclamation-circle text-red-500 mr-3"></i>
                    <p class="text-red-700 font-medium">Erreurs de validation</p>
                </div>
                <ul class="list-disc list-inside text-red-600 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('prestataire.food-delivery.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            {{-- Modes de récupération --}}
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 mb-2 flex items-center">
                    <i class="fas fa-toggle-on text-orange-500 mr-2"></i>
                    Modes de récupération
                </h2>
                <p class="text-sm text-gray-500 mb-4">
                    <i class="fas fa-info-circle text-gray-400 mr-1"></i>
                    Choisissez comment vos clients peuvent récupérer leurs commandes. Vous pouvez activer les deux options.
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {{-- Retrait sur place --}}
                    <label class="relative flex items-start p-4 border-2 rounded-xl cursor-pointer transition-all
                                  {{ $prestataire->food_pickup_enabled ? 'border-orange-500 bg-orange-50' : 'border-gray-200 hover:border-gray-300' }}">
                        <input type="checkbox" 
                               name="food_pickup_enabled" 
                               value="1"
                               {{ $prestataire->food_pickup_enabled ? 'checked' : '' }}
                               class="sr-only peer"
                               onchange="toggleModeStyle(this)">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-store text-orange-500 text-xl"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">Retrait sur place</p>
                                <p class="text-sm text-gray-500">Le client vient chercher sa commande</p>
                            </div>
                        </div>
                        <div class="absolute top-4 right-4">
                            <div class="w-6 h-6 border-2 rounded-full flex items-center justify-center
                                        {{ $prestataire->food_pickup_enabled ? 'border-orange-500 bg-orange-500' : 'border-gray-300' }}">
                                @if($prestataire->food_pickup_enabled)
                                    <i class="fas fa-check text-white text-xs"></i>
                                @endif
                            </div>
                        </div>
                    </label>

                    {{-- Livraison --}}
                    <label class="relative flex items-start p-4 border-2 rounded-xl cursor-pointer transition-all
                                  {{ $prestataire->food_delivery_enabled ? 'border-orange-500 bg-orange-50' : 'border-gray-200 hover:border-gray-300' }}">
                        <input type="checkbox" 
                               name="food_delivery_enabled" 
                               value="1"
                               {{ $prestataire->food_delivery_enabled ? 'checked' : '' }}
                               class="sr-only peer"
                               onchange="toggleModeStyle(this); toggleDeliverySettings()">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-motorcycle text-orange-500 text-xl"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">Livraison</p>
                                <p class="text-sm text-gray-500">Vous livrez à domicile</p>
                            </div>
                        </div>
                        <div class="absolute top-4 right-4">
                            <div class="w-6 h-6 border-2 rounded-full flex items-center justify-center
                                        {{ $prestataire->food_delivery_enabled ? 'border-orange-500 bg-orange-500' : 'border-gray-300' }}">
                                @if($prestataire->food_delivery_enabled)
                                    <i class="fas fa-check text-white text-xs"></i>
                                @endif
                            </div>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Mode de livraison (Interne vs Externe) --}}
            <div id="deliveryModeSection" class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 {{ $prestataire->food_delivery_enabled ? '' : 'hidden' }}">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-users-cog text-orange-500 mr-2"></i>
                    Qui effectue vos livraisons ?
                </h2>
                <div class="mb-6 p-4 bg-amber-50 rounded-xl border border-amber-100">
                    <div class="flex items-start gap-3">
                        <i class="fas fa-question-circle text-amber-500 mt-0.5"></i>
                        <div class="text-sm">
                            <p class="font-medium text-amber-800 mb-1">Quelle option choisir ?</p>
                            <ul class="text-amber-700 space-y-1">
                                <li><strong>Interne :</strong> Vous gérez vos propres livreurs (salariés ou sous contrat)</li>
                                <li><strong>Externe :</strong> Des livreurs indépendants de la plateforme prennent vos commandes</li>
                                <li><strong>Les deux :</strong> Vos livreurs en priorité, externes en renfort si besoin</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {{-- Livraison interne --}}
                    <label class="relative flex flex-col p-4 border-2 rounded-xl cursor-pointer transition-all hover:shadow-md
                                  {{ ($prestataire->delivery_mode ?? 'both') === 'internal' ? 'border-orange-500 bg-orange-50' : 'border-gray-200' }}">
                        <input type="radio" 
                               name="delivery_mode" 
                               value="internal"
                               {{ ($prestataire->delivery_mode ?? 'both') === 'internal' ? 'checked' : '' }}
                               class="sr-only peer"
                               onchange="toggleDeliveryMode()">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-building text-blue-600 text-lg"></i>
                            </div>
                            <span class="font-semibold text-gray-900">Interne</span>
                        </div>
                        <p class="text-sm text-gray-600">Je livre moi-même ou avec mon équipe</p>
                        <div class="absolute top-3 right-3">
                            <div class="w-5 h-5 border-2 rounded-full flex items-center justify-center
                                        {{ ($prestataire->delivery_mode ?? 'both') === 'internal' ? 'border-orange-500 bg-orange-500' : 'border-gray-300' }}">
                                @if(($prestataire->delivery_mode ?? 'both') === 'internal')
                                    <i class="fas fa-check text-white text-xs"></i>
                                @endif
                            </div>
                        </div>
                    </label>

                    {{-- Livreurs externes --}}
                    <label class="relative flex flex-col p-4 border-2 rounded-xl cursor-pointer transition-all hover:shadow-md
                                  {{ ($prestataire->delivery_mode ?? 'both') === 'external' ? 'border-orange-500 bg-orange-50' : 'border-gray-200' }}">
                        <input type="radio" 
                               name="delivery_mode" 
                               value="external"
                               {{ ($prestataire->delivery_mode ?? 'both') === 'external' ? 'checked' : '' }}
                               class="sr-only peer"
                               onchange="toggleDeliveryMode()">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-motorcycle text-green-600 text-lg"></i>
                            </div>
                            <span class="font-semibold text-gray-900">Externe</span>
                        </div>
                        <p class="text-sm text-gray-600">Livreurs indépendants de la plateforme</p>
                        <div class="absolute top-3 right-3">
                            <div class="w-5 h-5 border-2 rounded-full flex items-center justify-center
                                        {{ ($prestataire->delivery_mode ?? 'both') === 'external' ? 'border-orange-500 bg-orange-500' : 'border-gray-300' }}">
                                @if(($prestataire->delivery_mode ?? 'both') === 'external')
                                    <i class="fas fa-check text-white text-xs"></i>
                                @endif
                            </div>
                        </div>
                    </label>

                    {{-- Les deux --}}
                    <label class="relative flex flex-col p-4 border-2 rounded-xl cursor-pointer transition-all hover:shadow-md
                                  {{ ($prestataire->delivery_mode ?? 'both') === 'both' ? 'border-orange-500 bg-orange-50' : 'border-gray-200' }}">
                        <input type="radio" 
                               name="delivery_mode" 
                               value="both"
                               {{ ($prestataire->delivery_mode ?? 'both') === 'both' ? 'checked' : '' }}
                               class="sr-only peer"
                               onchange="toggleDeliveryMode()">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-random text-purple-600 text-lg"></i>
                            </div>
                            <span class="font-semibold text-gray-900">Les deux</span>
                        </div>
                        <p class="text-sm text-gray-600">Interne + livreurs externes en renfort</p>
                        <div class="absolute top-3 right-3">
                            <div class="w-5 h-5 border-2 rounded-full flex items-center justify-center
                                        {{ ($prestataire->delivery_mode ?? 'both') === 'both' ? 'border-orange-500 bg-orange-500' : 'border-gray-300' }}">
                                @if(($prestataire->delivery_mode ?? 'both') === 'both')
                                    <i class="fas fa-check text-white text-xs"></i>
                                @endif
                            </div>
                        </div>
                    </label>
                </div>

                {{-- Options avancées pour livreurs externes --}}
                <div id="externalDriverOptions" class="mt-6 pt-6 border-t border-gray-100 {{ in_array($prestataire->delivery_mode ?? 'both', ['external', 'both']) ? '' : 'hidden' }}">
                    <h3 class="text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-sliders-h text-gray-400 mr-2"></i>
                        Options livreurs externes
                    </h3>
                    <p class="text-xs text-gray-500 mb-4">
                        Configurez les critères pour les livreurs externes qui livreront vos commandes.
                    </p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {{-- Attribution automatique --}}
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" title="Si activé, un livreur sera automatiquement assigné à vos commandes. Sinon, vous devrez choisir manuellement.">
                            <div>
                                <p class="text-sm font-medium text-gray-700">Attribution auto</p>
                                <p class="text-xs text-gray-500">Le système choisit le meilleur livreur</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" 
                                       name="auto_assign_drivers" 
                                       value="1"
                                       {{ ($prestataire->auto_assign_drivers ?? true) ? 'checked' : '' }}
                                       class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-orange-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
                            </label>
                        </div>

                        {{-- Note minimum --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Note minimum livreur
                            </label>
                            <select name="min_driver_rating" class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 text-sm">
                                <option value="">Aucun minimum</option>
                                <option value="3" {{ ($prestataire->min_driver_rating ?? '') == 3 ? 'selected' : '' }}>3+ étoiles</option>
                                <option value="3.5" {{ ($prestataire->min_driver_rating ?? '') == 3.5 ? 'selected' : '' }}>3.5+ étoiles</option>
                                <option value="4" {{ ($prestataire->min_driver_rating ?? '') == 4 ? 'selected' : '' }}>4+ étoiles</option>
                                <option value="4.5" {{ ($prestataire->min_driver_rating ?? '') == 4.5 ? 'selected' : '' }}>4.5+ étoiles</option>
                            </select>
                        </div>

                        {{-- Commission livreur --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Commission livreur
                            </label>
                            <div class="relative">
                                <input type="number" 
                                       name="driver_commission_rate" 
                                       value="{{ old('driver_commission_rate', $prestataire->driver_commission_rate ?? 15) }}"
                                       step="0.5"
                                       min="0" 
                                       max="50"
                                       class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 text-sm pr-8">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">%</span>
                            </div>
                        </div>
                    </div>

                    {{-- Lien vers gestion livreurs --}}
                    <div class="mt-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border border-orange-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user-cog text-orange-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-900">Gérer vos livreurs</p>
                                    <p class="text-sm text-gray-500">Noter, choisir vos favoris, ou bloquer des livreurs</p>
                                </div>
                            </div>
                            <a href="{{ route('prestataire.drivers.index') }}" class="inline-flex items-center px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg text-sm font-medium transition-colors">
                                <i class="fas fa-cog mr-2"></i>
                                Gérer
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Paramètres de livraison --}}
            <div id="deliverySettings" class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 {{ $prestataire->food_delivery_enabled ? '' : 'hidden' }}">
                <h2 class="text-lg font-semibold text-gray-900 mb-2 flex items-center">
                    <i class="fas fa-cog text-orange-500 mr-2"></i>
                    Paramètres de livraison
                </h2>
                <p class="text-sm text-gray-500 mb-4">
                    <i class="fas fa-info-circle text-gray-400 mr-1"></i>
                    Définissez votre zone de couverture et vos tarifs. Ces paramètres s'afficheront aux clients lors de leur commande.
                </p>
                
                {{-- Info box calcul frais --}}
                <div class="mb-6 p-4 bg-green-50 rounded-xl border border-green-100">
                    <div class="flex items-start gap-3">
                        <i class="fas fa-calculator text-green-600 mt-0.5"></i>
                        <div class="text-sm">
                            <p class="font-medium text-green-800 mb-1">Comment sont calculés les frais de livraison ?</p>
                            <p class="text-green-700">
                                <strong>Frais totaux = Frais de base + (Distance × Frais par km)</strong><br>
                                <span class="text-xs">Exemple : Si base = 3€ et 0.50€/km, une livraison à 4km coûtera 3€ + (4 × 0.50€) = <strong>5€</strong></span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Zone de livraison --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-map-marker-alt text-orange-400 mr-1"></i>
                            Zone de livraison (rayon en km)
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_delivery_radius_km" 
                                   value="{{ old('food_delivery_radius_km', $prestataire->food_delivery_radius_km ?? 5) }}"
                                   min="1" 
                                   max="50"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-12">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">km</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Distance maximale depuis votre adresse</p>
                    </div>

                    {{-- Frais de base --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-euro-sign text-orange-400 mr-1"></i>
                            Frais de livraison de base
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_delivery_base_fee" 
                                   value="{{ old('food_delivery_base_fee', $prestataire->food_delivery_base_fee ?? 3.00) }}"
                                   step="0.50"
                                   min="0" 
                                   max="50"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-8">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                        </div>
                    </div>

                    {{-- Frais par km --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-route text-orange-400 mr-1"></i>
                            Frais supplémentaires par km
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_delivery_fee_per_km" 
                                   value="{{ old('food_delivery_fee_per_km', $prestataire->food_delivery_fee_per_km ?? 0.50) }}"
                                   step="0.10"
                                   min="0" 
                                   max="5"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-12">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">€/km</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Ajouté aux frais de base</p>
                    </div>

                    {{-- Temps de préparation --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-clock text-orange-400 mr-1"></i>
                            Temps de préparation moyen
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_estimated_prep_time" 
                                   value="{{ old('food_estimated_prep_time', $prestataire->food_estimated_prep_time ?? 30) }}"
                                   min="5" 
                                   max="180"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-12">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">min</span>
                        </div>
                    </div>
                </div>

                {{-- Minimums et livraison gratuite --}}
                <div class="mt-6 pt-6 border-t border-gray-100">
                    <h3 class="text-sm font-semibold text-gray-700 mb-2">Minimums de commande & Livraison gratuite</h3>
                    <p class="text-xs text-gray-500 mb-4">
                        <i class="fas fa-lightbulb text-amber-400 mr-1"></i>
                        <strong>Astuce :</strong> Un minimum de commande réduit les petites commandes non rentables. La livraison gratuite encourage les clients à commander plus.
                    </p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {{-- Minimum livraison --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-shopping-basket text-orange-400 mr-1"></i>
                            Min. commande livraison
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_min_order_delivery" 
                                   value="{{ old('food_min_order_delivery', $prestataire->food_min_order_delivery) }}"
                                   step="0.50"
                                   min="0"
                                   placeholder="Aucun"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-8">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Laisser vide = pas de minimum</p>
                    </div>

                    {{-- Minimum retrait --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-store text-orange-400 mr-1"></i>
                            Min. commande retrait
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_min_order_pickup" 
                                   value="{{ old('food_min_order_pickup', $prestataire->food_min_order_pickup) }}"
                                   step="0.50"
                                   min="0"
                                   placeholder="Aucun"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-8">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                        </div>
                    </div>

                    {{-- Livraison gratuite --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-gift text-orange-400 mr-1"></i>
                            Livraison gratuite à partir de
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="food_free_delivery_above" 
                                   value="{{ old('food_free_delivery_above', $prestataire->food_free_delivery_above) }}"
                                   step="1"
                                   min="0"
                                   placeholder="Non applicable"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 pr-8">
                            <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Horaires de livraison --}}
            <div id="deliverySchedule" class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 {{ $prestataire->food_delivery_enabled ? '' : 'hidden' }}">
                <h2 class="text-lg font-semibold text-gray-900 mb-2 flex items-center">
                    <i class="fas fa-calendar-alt text-orange-500 mr-2"></i>
                    Horaires de livraison
                </h2>
                <p class="text-sm text-gray-500 mb-2">Définissez vos créneaux de livraison pour chaque jour</p>
                <div class="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-100">
                    <p class="text-xs text-blue-700">
                        <i class="fas fa-info-circle mr-1"></i>
                        <strong>Important :</strong> Les clients ne pourront commander en livraison que pendant ces horaires. 
                        Décochez un jour pour ne pas livrer ce jour-là.
                    </p>
                </div>

                @php
                    $days = [
                        'lundi' => 'Lundi',
                        'mardi' => 'Mardi',
                        'mercredi' => 'Mercredi',
                        'jeudi' => 'Jeudi',
                        'vendredi' => 'Vendredi',
                        'samedi' => 'Samedi',
                        'dimanche' => 'Dimanche',
                    ];
                    $schedule = $prestataire->food_delivery_schedule ?? [];
                @endphp

                <div class="space-y-3">
                    @foreach($days as $key => $day)
                        @php
                            $daySchedule = $schedule[$key] ?? ['enabled' => true, 'start' => '11:00', 'end' => '22:00'];
                        @endphp
                        <div class="flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
                            <label class="flex items-center cursor-pointer min-w-[140px]">
                                <input type="checkbox" 
                                       name="delivery_schedule[{{ $key }}][enabled]" 
                                       value="1"
                                       {{ $daySchedule['enabled'] ?? true ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-orange-500 focus:ring-orange-500">
                                <span class="ml-2 text-sm font-medium text-gray-700">{{ $day }}</span>
                            </label>
                            <div class="flex items-center gap-2 flex-1">
                                <input type="time" 
                                       name="delivery_schedule[{{ $key }}][start]" 
                                       value="{{ $daySchedule['start'] ?? '11:00' }}"
                                       class="border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 text-sm">
                                <span class="text-gray-400">à</span>
                                <input type="time" 
                                       name="delivery_schedule[{{ $key }}][end]" 
                                       value="{{ $daySchedule['end'] ?? '22:00' }}"
                                       class="border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 text-sm">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Instructions de livraison --}}
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 mb-2 flex items-center">
                    <i class="fas fa-info-circle text-orange-500 mr-2"></i>
                    Instructions pour les clients
                </h2>
                <p class="text-sm text-gray-500 mb-3">
                    Ces instructions aideront vos clients à récupérer leur commande facilement.
                </p>
                <div class="mb-3 p-3 bg-gray-50 rounded-lg">
                    <p class="text-xs text-gray-600 mb-2"><strong>Exemples d'instructions utiles :</strong></p>
                    <ul class="text-xs text-gray-500 space-y-1">
                        <li>• "Sonnez au portail, nous vous apportons la commande"</li>
                        <li>• "Appelez au 06 XX XX XX XX à votre arrivée"</li>
                        <li>• "Livraison sans contact possible sur demande"</li>
                        <li>• "Stationnement gratuit devant le restaurant"</li>
                    </ul>
                </div>
                <textarea name="food_delivery_instructions" 
                          rows="3"
                          placeholder="Ex: Sonnez au portail, appelez à l'arrivée, livraison sans contact possible..."
                          class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500">{{ old('food_delivery_instructions', $prestataire->food_delivery_instructions) }}</textarea>
                <p class="text-xs text-gray-500 mt-2">Ces instructions seront affichées au client lors de la commande</p>
            </div>

            {{-- Aperçu des frais --}}
            <div class="bg-gradient-to-r from-orange-500 to-amber-500 rounded-2xl shadow-lg p-6 text-white">
                <h2 class="text-lg font-semibold mb-2 flex items-center">
                    <i class="fas fa-calculator mr-2"></i>
                    Aperçu des frais de livraison
                </h2>
                <p class="text-white/80 text-sm mb-4">
                    Voici ce que paieront vos clients selon la distance. Les valeurs se mettent à jour automatiquement.
                </p>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <p class="text-2xl font-bold" id="preview1km">{{ number_format($prestataire->food_delivery_base_fee + (1 * $prestataire->food_delivery_fee_per_km), 2) }} €</p>
                        <p class="text-sm opacity-80">à 1 km</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <p class="text-2xl font-bold" id="preview3km">{{ number_format($prestataire->food_delivery_base_fee + (3 * $prestataire->food_delivery_fee_per_km), 2) }} €</p>
                        <p class="text-sm opacity-80">à 3 km</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <p class="text-2xl font-bold" id="preview5km">{{ number_format($prestataire->food_delivery_base_fee + (5 * $prestataire->food_delivery_fee_per_km), 2) }} €</p>
                        <p class="text-sm opacity-80">à 5 km</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur rounded-lg p-3">
                        <p class="text-2xl font-bold" id="preview10km">{{ number_format($prestataire->food_delivery_base_fee + (10 * $prestataire->food_delivery_fee_per_km), 2) }} €</p>
                        <p class="text-sm opacity-80">à 10 km</p>
                    </div>
                </div>
            </div>

            {{-- Bouton de sauvegarde --}}
            <div class="flex justify-end">
                <button type="submit" 
                        class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-semibold rounded-xl shadow-lg hover:from-orange-600 hover:to-amber-600 transition-all transform hover:scale-105">
                    <i class="fas fa-save mr-2"></i>
                    Enregistrer les paramètres
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function toggleModeStyle(checkbox) {
        const label = checkbox.closest('label');
        const checkIcon = label.querySelector('.w-6.h-6');
        
        if (checkbox.checked) {
            label.classList.remove('border-gray-200', 'hover:border-gray-300');
            label.classList.add('border-orange-500', 'bg-orange-50');
            checkIcon.classList.remove('border-gray-300');
            checkIcon.classList.add('border-orange-500', 'bg-orange-500');
            checkIcon.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
        } else {
            label.classList.add('border-gray-200', 'hover:border-gray-300');
            label.classList.remove('border-orange-500', 'bg-orange-50');
            checkIcon.classList.add('border-gray-300');
            checkIcon.classList.remove('border-orange-500', 'bg-orange-500');
            checkIcon.innerHTML = '';
        }
    }

    function toggleDeliverySettings() {
        const deliveryEnabled = document.querySelector('input[name="food_delivery_enabled"]').checked;
        const settingsDiv = document.getElementById('deliverySettings');
        const scheduleDiv = document.getElementById('deliverySchedule');
        const modeSection = document.getElementById('deliveryModeSection');
        
        if (deliveryEnabled) {
            settingsDiv.classList.remove('hidden');
            scheduleDiv.classList.remove('hidden');
            if (modeSection) modeSection.classList.remove('hidden');
        } else {
            settingsDiv.classList.add('hidden');
            scheduleDiv.classList.add('hidden');
            if (modeSection) modeSection.classList.add('hidden');
        }
    }

    function toggleDeliveryMode() {
        const mode = document.querySelector('input[name="delivery_mode"]:checked')?.value || 'both';
        const externalOptions = document.getElementById('externalDriverOptions');
        
        // Update radio button styles
        document.querySelectorAll('input[name="delivery_mode"]').forEach(radio => {
            const label = radio.closest('label');
            const checkIcon = label.querySelector('.w-5.h-5');
            
            if (radio.checked) {
                label.classList.add('border-orange-500', 'bg-orange-50');
                label.classList.remove('border-gray-200');
                if (checkIcon) {
                    checkIcon.classList.add('border-orange-500', 'bg-orange-500');
                    checkIcon.classList.remove('border-gray-300');
                    checkIcon.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
                }
            } else {
                label.classList.remove('border-orange-500', 'bg-orange-50');
                label.classList.add('border-gray-200');
                if (checkIcon) {
                    checkIcon.classList.remove('border-orange-500', 'bg-orange-500');
                    checkIcon.classList.add('border-gray-300');
                    checkIcon.innerHTML = '';
                }
            }
        });
        
        // Show/hide external driver options
        if (externalOptions) {
            if (mode === 'external' || mode === 'both') {
                externalOptions.classList.remove('hidden');
            } else {
                externalOptions.classList.add('hidden');
            }
        }
    }

    // Mise à jour de l'aperçu des frais en temps réel
    function updateFeePreview() {
        const baseFee = parseFloat(document.querySelector('input[name="food_delivery_base_fee"]').value) || 0;
        const feePerKm = parseFloat(document.querySelector('input[name="food_delivery_fee_per_km"]').value) || 0;
        
        document.getElementById('preview1km').textContent = (baseFee + 1 * feePerKm).toFixed(2) + ' €';
        document.getElementById('preview3km').textContent = (baseFee + 3 * feePerKm).toFixed(2) + ' €';
        document.getElementById('preview5km').textContent = (baseFee + 5 * feePerKm).toFixed(2) + ' €';
        document.getElementById('preview10km').textContent = (baseFee + 10 * feePerKm).toFixed(2) + ' €';
    }

    // Écouter les changements
    document.querySelector('input[name="food_delivery_base_fee"]').addEventListener('input', updateFeePreview);
    document.querySelector('input[name="food_delivery_fee_per_km"]').addEventListener('input', updateFeePreview);
</script>
@endpush
@endsection