@extends('layouts.app')

@section('title', 'Mes tarifs - Livreur')

@push('styles')
<style>
    :root {
        --driver-primary: #10b981;
        --driver-secondary: #059669;
    }
    
    /* Fix z-index pour le menu */
    .dropdown-menu, .mobile-menu, [class*="dropdown"], nav, header {
        z-index: 9999 !important;
    }
    
    /* Bottom navigation */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 0.5rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        z-index: 45;
    }

    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        color: #9ca3af;
        text-decoration: none;
        font-size: 0.7rem;
    }

    .bottom-nav a.active {
        color: var(--driver-primary);
    }

    .bottom-nav a .icon {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    /* Padding pour la bottom nav */
    .pricing-container {
        padding-bottom: 80px;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-emerald-50 via-white to-teal-50 py-6 pricing-container">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Section d'aide --}}
        <x-help-section page="driver.pricing" />
        
        {{-- En-tête --}}
        <div class="flex items-center justify-between mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">
                    <i class="fas fa-euro-sign text-emerald-500 mr-2"></i>
                    Mes tarifs
                </h1>
                <p class="text-gray-600">Configurez vos tarifs de livraison</p>
            </div>
            <a href="{{ route('driver.dashboard') }}" 
               class="inline-flex items-center text-gray-600 hover:text-emerald-600 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                Dashboard
            </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">
                <ul class="list-disc list-inside text-red-700 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            {{-- Tarifs de base --}}
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
                    <i class="fas fa-coins text-emerald-500 mr-2"></i>
                    Tarification de base
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Frais de base --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-tag text-emerald-400 mr-1"></i>
                            Frais de prise en charge
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="base_fee" 
                                   value="{{ old('base_fee', $pricing->base_fee ?? 3.00) }}"
                                   step="0.50"
                                   min="0" 
                                   max="20"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-500 pr-8"
                                   required>
                            <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">Montant fixe pour chaque livraison</p>
                    </div>

                    {{-- Frais par km --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-route text-emerald-400 mr-1"></i>
                            Tarif au kilomètre
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="fee_per_km" 
                                   value="{{ old('fee_per_km', $pricing->fee_per_km ?? 0.50) }}"
                                   step="0.10"
                                   min="0" 
                                   max="5"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-500 pr-12"
                                   required>
                            <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">Montant par kilomètre parcouru</p>
                    </div>

                    {{-- Commande minimum --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-shopping-basket text-emerald-400 mr-1"></i>
                            Valeur min. commande
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="min_order_value" 
                                   value="{{ old('min_order_value', $pricing->min_order_value) }}"
                                   step="1"
                                   min="0"
                                   placeholder="Aucun"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-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>

                    {{-- Pourboires --}}
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <p class="font-medium text-gray-700">Accepter les pourboires</p>
                            <p class="text-xs text-gray-500">Les clients pourront vous donner un pourboire</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" 
                                   name="accepts_tips" 
                                   value="1"
                                   {{ ($pricing->accepts_tips ?? 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-emerald-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-emerald-500"></div>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Heures de pointe --}}
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-bolt text-amber-500 mr-2"></i>
                    Tarifs heures de pointe
                </h2>
                <p class="text-sm text-gray-500 mb-6">Appliquez un multiplicateur pendant les heures de forte demande</p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {{-- Multiplicateur --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Multiplicateur de prix
                        </label>
                        <div class="relative">
                            <input type="number" 
                                   name="surge_multiplier" 
                                   value="{{ old('surge_multiplier', $pricing->surge_multiplier ?? 1.0) }}"
                                   step="0.1"
                                   min="1" 
                                   max="3"
                                   class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-emerald-500 focus:border-emerald-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">1.0 = pas de majoration, 1.5 = +50%</p>
                    </div>

                    {{-- Créneaux heures de pointe --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Créneaux de pointe
                        </label>
                        <div class="space-y-2">
                            @php
                                $surgeHours = $pricing->surge_hours ?? [
                                    ['start' => 12, 'end' => 14],
                                    ['start' => 19, 'end' => 21]
                                ];
                            @endphp
                            @foreach($surgeHours as $index => $range)
                                <div class="flex items-center gap-2">
                                    <input type="number" 
                                           name="surge_hours[{{ $index }}][start]" 
                                           value="{{ $range['start'] }}"
                                           min="0" max="23"
                                           placeholder="Début"
                                           class="w-20 border-gray-300 rounded-lg text-sm focus:ring-emerald-500 focus:border-emerald-500">
                                    <span class="text-gray-400">h à</span>
                                    <input type="number" 
                                           name="surge_hours[{{ $index }}][end]" 
                                           value="{{ $range['end'] }}"
                                           min="0" max="23"
                                           placeholder="Fin"
                                           class="w-20 border-gray-300 rounded-lg text-sm focus:ring-emerald-500 focus:border-emerald-500">
                                    <span class="text-gray-400">h</span>
                                </div>
                            @endforeach
                        </div>
                        <p class="text-xs text-gray-500 mt-1">12-14h = déjeuner, 19-21h = dîner</p>
                    </div>
                </div>
            </div>

            {{-- Aperçu des gains --}}
            <div class="bg-gradient-to-r from-emerald-500 to-teal-500 rounded-2xl shadow-lg p-6 text-white">
                <h2 class="text-lg font-semibold mb-4 flex items-center">
                    <i class="fas fa-calculator mr-2"></i>
                    Aperçu de vos gains
                </h2>
                <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">-</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">-</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">-</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">-</p>
                        <p class="text-sm opacity-80">10 km</p>
                    </div>
                </div>
                <p class="text-sm text-white/70 mt-4 text-center">
                    <i class="fas fa-info-circle mr-1"></i>
                    Estimation hors pourboires et majorations heures de pointe
                </p>
            </div>

            {{-- Paramètres de paiement --}}
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-credit-card text-emerald-500 mr-2"></i>
                    Modes de paiement acceptés
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <label class="flex items-center justify-between p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-money-bill-wave text-green-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-700">Espèces</p>
                                <p class="text-xs text-gray-500">Paiement en liquide</p>
                            </div>
                        </div>
                        <input type="checkbox" 
                               name="accepts_cash" 
                               value="1"
                               {{ ($driver->accepts_cash ?? true) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-emerald-500 focus:ring-emerald-500">
                    </label>

                    <label class="flex items-center justify-between p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-credit-card text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-700">Carte bancaire</p>
                                <p class="text-xs text-gray-500">Paiement par CB</p>
                            </div>
                        </div>
                        <input type="checkbox" 
                               name="accepts_card" 
                               value="1"
                               {{ ($driver->accepts_card ?? true) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-emerald-500 focus:ring-emerald-500">
                    </label>
                </div>
            </div>

            {{-- Activer/Désactiver --}}
            <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="font-semibold text-gray-900">Tarification active</h3>
                        <p class="text-sm text-gray-500">Désactivez pour utiliser les tarifs par défaut de la plateforme</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" 
                               name="is_active" 
                               value="1"
                               {{ ($pricing->is_active ?? true) ? 'checked' : '' }}
                               class="sr-only peer">
                        <div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-emerald-500"></div>
                    </label>
                </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-emerald-500 to-teal-500 text-white font-semibold rounded-xl shadow-lg hover:from-emerald-600 hover:to-teal-600 transition-all transform hover:scale-105">
                    <i class="fas fa-save mr-2"></i>
                    Enregistrer mes tarifs
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('driver.dashboard') }}">
        <span class="icon">🏠</span>
        Dashboard
    </a>
    <a href="{{ route('driver.map') }}">
        <span class="icon">🗺️</span>
        Carte
    </a>
    <a href="{{ route('driver.deliveries') }}">
        <span class="icon">📦</span>
        Historique
    </a>
    <a href="{{ route('driver.pricing') }}" class="active">
        <span class="icon">💰</span>
        Tarifs
    </a>
    <a href="{{ route('driver.stats') }}">
        <span class="icon">📊</span>
        Stats
    </a>
</div>

@push('scripts')
<script>
    function updatePreview() {
        const baseFee = parseFloat(document.querySelector('input[name="base_fee"]').value) || 0;
        const feePerKm = parseFloat(document.querySelector('input[name="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) + ' €';
    }

    // Initial update
    updatePreview();

    // Listen for changes
    document.querySelector('input[name="base_fee"]').addEventListener('input', updatePreview);
    document.querySelector('input[name="fee_per_km"]').addEventListener('input', updatePreview);
</script>
@endpush
@endsection