@extends('layouts.app')

@section('title', 'Gestion des livreurs')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-amber-50 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- 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-users text-orange-500 mr-3"></i>
                    Gestion des livreurs
                </h1>
                <p class="text-gray-600 mt-1">Equipe interne uniquement</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('prestataire.food-orders.internal-map') }}"
                   class="inline-flex items-center px-3 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors text-sm font-medium">
                    <i class="fas fa-route mr-2"></i>
                    Carte interne pro
                </a>
                <a href="{{ route('prestataire.food-delivery.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 paramètres
                </a>
            </div>
        </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(session('error'))
            <div class="mb-6 bg-red-100 border-l-4 border-red-500 p-4 rounded-r-lg">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle text-red-500 mr-3"></i>
                    <p class="text-red-700">{{ session('error') }}</p>
                </div>
            </div>
        @endif

        {{-- Creation rapide d'un livreur interne (sans compte prestataire) --}}
        <div class="mb-6 bg-white rounded-2xl shadow-lg border border-purple-100 p-5">
            <div class="flex items-start justify-between gap-4 mb-4">
                <div>
                    <h2 class="text-lg font-bold text-gray-900">
                        <i class="fas fa-user-plus text-purple-600 mr-2"></i>
                        Ajouter un livreur interne
                    </h2>
                    <p class="text-sm text-gray-600 mt-1">
                        Votre collègue n'a pas besoin d'un compte prestataire ni d'un abonnement séparé.
                    </p>
                    <p class="text-xs text-gray-500 mt-1">
                        Après création, ouvrez son profil pour lier son compte client, puis il se connecte sur <code>{{ url('/driver/dashboard') }}</code>.
                    </p>
                </div>
                <span class="inline-flex items-center px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-semibold">
                    Interne uniquement
                </span>
            </div>

            <form action="{{ route('prestataire.drivers.store-internal') }}" method="POST" class="grid grid-cols-1 md:grid-cols-4 gap-3">
                @csrf
                <input type="text" name="first_name" value="{{ old('first_name') }}" placeholder="Prénom" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
                <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder="Nom" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
                <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Téléphone" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
                <select name="vehicle_type" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
                    <option value="scooter" {{ old('vehicle_type') === 'scooter' ? 'selected' : '' }}>Scooter</option>
                    <option value="bike" {{ old('vehicle_type') === 'bike' ? 'selected' : '' }}>Vélo</option>
                    <option value="car" {{ old('vehicle_type') === 'car' ? 'selected' : '' }}>Voiture</option>
                    <option value="van" {{ old('vehicle_type') === 'van' ? 'selected' : '' }}>Van</option>
                    <option value="truck" {{ old('vehicle_type') === 'truck' ? 'selected' : '' }}>Camion</option>
                </select>
                <input type="email" name="email" value="{{ old('email') }}" placeholder="Email (optionnel)"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 md:col-span-2">
                <input type="text" name="city" value="{{ old('city') }}" placeholder="Ville (optionnel)"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
                <input type="text" name="postal_code" value="{{ old('postal_code') }}" placeholder="Code postal (optionnel)"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
                <input type="text" name="address" value="{{ old('address') }}" placeholder="Adresse (optionnel)"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500 md:col-span-3">
                <button type="submit"
                        class="w-full px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-semibold transition-colors md:col-span-1">
                    <i class="fas fa-plus mr-1"></i>
                    Créer en interne
                </button>
            </form>
        </div>

        {{-- Stats Cards --}}
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
            <div class="bg-white rounded-2xl p-5 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Total disponibles</p>
                        <p class="text-3xl font-bold text-gray-900">{{ $stats['total'] ?? 0 }}</p>
                    </div>
                    <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-users text-gray-500 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-2xl p-5 shadow-lg border border-blue-100 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Travaillé avec</p>
                        <p class="text-3xl font-bold text-blue-600">{{ $stats['worked'] ?? 0 }}</p>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-handshake text-blue-500 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-2xl p-5 shadow-lg border border-green-100 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Favoris</p>
                        <p class="text-3xl font-bold text-green-600">{{ $stats['preferred'] ?? 0 }}</p>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-star text-green-500 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-2xl p-5 shadow-lg border border-red-100 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Bloqués</p>
                        <p class="text-3xl font-bold text-red-600">{{ $stats['blocked'] ?? 0 }}</p>
                    </div>
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-ban text-red-500 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-2xl p-5 shadow-lg border border-purple-100 hover:shadow-xl transition-shadow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Internes</p>
                        <p class="text-3xl font-bold text-purple-600">{{ $stats['internal'] ?? 0 }}</p>
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-id-badge text-purple-500 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filtres --}}
        <div class="bg-white rounded-2xl shadow-lg p-5 mb-6 border border-gray-100">
            <div class="flex flex-col md:flex-row items-start md:items-center gap-4">
                <div class="flex items-center gap-2 text-gray-700">
                    <i class="fas fa-filter text-orange-500"></i>
                    <span class="font-medium">Filtrer :</span>
                </div>
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('prestataire.drivers.index') }}" 
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                              {{ !request('filter') ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                        Tous
                    </a>
                    <a href="{{ route('prestataire.drivers.index', ['filter' => 'available']) }}" 
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                              {{ request('filter') === 'available' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                        <i class="fas fa-circle text-xs mr-1"></i> Disponibles
                    </a>
                    <a href="{{ route('prestataire.drivers.index', ['filter' => 'preferred']) }}" 
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                              {{ request('filter') === 'preferred' ? 'bg-yellow-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                        <i class="fas fa-star text-xs mr-1"></i> Favoris
                    </a>
                    <a href="{{ route('prestataire.drivers.index', ['filter' => 'blocked']) }}" 
                       class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                              {{ request('filter') === 'blocked' ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                        <i class="fas fa-ban text-xs mr-1"></i> Bloqués
                    </a>
                </div>
                <div class="flex-1"></div>
                <div class="relative w-full md:w-64">
                    <input type="text" 
                           id="search-drivers" 
                           placeholder="Rechercher un livreur..." 
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
        </div>

        {{-- Liste des livreurs --}}
        @if($drivers->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5" id="drivers-grid">
                @foreach($drivers as $driver)
                    @php
                        $vehicleIcons = [
                            'scooter' => '🛵',
                            'moto' => '🏍️',
                            'motorcycle' => '🏍️',
                            'velo' => '🚴',
                            'bike' => '🚴',
                            'voiture' => '🚗',
                            'car' => '🚗',
                            'van' => '🚐',
                        ];
                        $vehicleType = $driver->vehicle_type ?? 'scooter';
                        $vehicleIcon = $vehicleIcons[strtolower($vehicleType)] ?? '🛵';
                    @endphp
                    <div class="driver-card bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
                         data-name="{{ strtolower($driver->full_name ?? $driver->first_name . ' ' . $driver->last_name) }}">
                        {{-- Header avec gradient --}}
                        <div class="bg-gradient-to-r from-orange-500 to-amber-500 p-4 relative">
                            <div class="flex items-center gap-4">
                                <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg">
                                    @if($driver->photo)
                                        <img src="{{ asset('storage/' . $driver->photo) }}" 
                                             alt="{{ $driver->full_name ?? $driver->first_name }}" 
                                             class="w-16 h-16 rounded-full object-cover">
                                    @else
                                        <span class="text-xl font-bold text-orange-600">
                                            {{ strtoupper(substr($driver->first_name ?? '', 0, 1) . substr($driver->last_name ?? '', 0, 1)) }}
                                        </span>
                                    @endif
                                </div>
                                <div class="flex-1 text-white">
                                    <h3 class="font-bold text-lg truncate">
                                        {{ $driver->full_name ?? $driver->first_name . ' ' . $driver->last_name }}
                                    </h3>
                                    <div class="flex items-center gap-2 text-white/80 text-sm">
                                        <span class="text-lg">{{ $vehicleIcon }}</span>
                                        <span class="capitalize">{{ $vehicleType }}</span>
                                    </div>
                                </div>
                            </div>
                            {{-- Badge disponibilité --}}
                            @if($driver->is_available ?? false)
                                <span class="absolute top-2 right-2 w-3 h-3 bg-green-400 rounded-full border-2 border-white animate-pulse"></span>
                            @endif
                        </div>

                        {{-- Body --}}
                        <div class="p-4">
                            @if((int) ($driver->employer_prestataire_id ?? 0) === (int) ($prestataire->id ?? 0))
                                <div class="mb-3 inline-flex items-center px-2.5 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-semibold">
                                    <i class="fas fa-user-tie mr-1"></i>
                                    Interne
                                </div>
                            @endif

                            {{-- Note et stats --}}
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center gap-1">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fas fa-star text-sm {{ $i <= ($driver->rating ?? 0) ? 'text-yellow-400' : 'text-gray-200' }}"></i>
                                    @endfor
                                    <span class="text-sm text-gray-600 ml-1">{{ number_format($driver->rating ?? 0, 1) }}</span>
                                </div>
                                <span class="text-sm text-gray-500">
                                    <i class="fas fa-box text-gray-400 mr-1"></i>
                                    {{ $driver->completed_deliveries ?? $driver->total_deliveries ?? 0 }} livraisons
                                </span>
                            </div>

                            {{-- Infos rapides --}}
                            <div class="space-y-2 mb-4">
                                @if($driver->phone)
                                    <div class="flex items-center text-sm text-gray-600">
                                        <i class="fas fa-phone w-5 text-gray-400"></i>
                                        <span>{{ $driver->phone }}</span>
                                    </div>
                                @endif
                                <div class="flex items-center text-sm text-gray-600">
                                    <i class="fas fa-route w-5 text-gray-400"></i>
                                    <span>Max {{ $driver->max_distance ?? 10 }} km</span>
                                </div>
                            </div>

                            {{-- Actions rapides --}}
                            <div class="flex items-center gap-2 mb-4">
                                <button type="button" 
                                        onclick="quickAction('preferred', {{ $driver->id }})"
                                        class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-green-50 hover:border-green-500 hover:text-green-600 transition-all"
                                        title="Ajouter aux favoris">
                                    <i class="fas fa-star"></i>
                                </button>
                                <button type="button" 
                                        onclick="quickAction('blocked', {{ $driver->id }})"
                                        class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-red-50 hover:border-red-500 hover:text-red-600 transition-all"
                                        title="Bloquer">
                                    <i class="fas fa-ban"></i>
                                </button>
                                @if($driver->phone)
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $driver->phone) }}" 
                                       target="_blank"
                                       class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm text-center hover:bg-green-50 hover:border-green-500 hover:text-green-600 transition-all"
                                       title="WhatsApp">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                @endif
                                <a href="tel:{{ $driver->phone }}" 
                                   class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm text-center hover:bg-blue-50 hover:border-blue-500 hover:text-blue-600 transition-all"
                                   title="Appeler">
                                    <i class="fas fa-phone"></i>
                                </a>
                            </div>

                            {{-- Bouton voir profil --}}
                            <a href="{{ route('prestataire.drivers.show', $driver) }}" 
                               class="block w-full px-4 py-3 bg-gradient-to-r from-orange-500 to-amber-500 text-white text-center rounded-xl font-medium hover:from-orange-600 hover:to-amber-600 transition-all">
                                <i class="fas fa-user mr-2"></i>
                                Voir le profil complet
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
            
            {{-- Pagination --}}
            <div class="mt-8">
                @if(method_exists($drivers, 'links'))
                    {{ $drivers->links() }}
                @endif
            </div>
        @else
            {{-- Empty state --}}
            <div class="bg-white rounded-2xl shadow-lg p-12 text-center">
                <div class="w-24 h-24 bg-orange-100 rounded-full mx-auto flex items-center justify-center mb-6">
                    <i class="fas fa-users text-orange-500 text-4xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-700 mb-2">Aucun livreur disponible</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                    Aucun livreur interne dans votre équipe pour le moment.
                </p>
                <div class="mt-6 p-4 bg-blue-50 rounded-xl inline-block">
                    <p class="text-blue-700 text-sm">
                        <i class="fas fa-info-circle mr-2"></i>
                        Utilisez "Ajouter un livreur interne" pour créer votre équipe.
                    </p>
                </div>
            </div>
        @endif

        {{-- Légende --}}
        <div class="mt-8 bg-white rounded-2xl shadow-lg p-5 border border-gray-100">
            <h4 class="font-semibold text-gray-900 mb-3">
                <i class="fas fa-info-circle text-orange-500 mr-2"></i>
                Comment ça marche ?
            </h4>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-star text-green-500"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">Livreurs favoris</p>
                        <p class="text-gray-500">Ils seront proposés en priorité pour vos livraisons</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-ban text-red-500"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">Livreurs bloqués</p>
                        <p class="text-gray-500">Ils ne recevront plus vos demandes de livraison</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-id-badge text-purple-500"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">Livreurs internes</p>
                        <p class="text-gray-500">Vos propres livreurs salariés ou sous contrat</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Recherche en temps réel
    document.getElementById('search-drivers')?.addEventListener('input', function(e) {
        const search = e.target.value.toLowerCase();
        document.querySelectorAll('.driver-card').forEach(card => {
            const name = card.dataset.name || '';
            if (name.includes(search)) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    });

    // Actions rapides
    function quickAction(action, driverId) {
        const labels = {
            'preferred': 'Ajouter aux favoris',
            'blocked': 'Bloquer ce livreur'
        };
        
        if (confirm(labels[action] + ' ?')) {
            // Afficher confirmation
            alert(action === 'preferred' ? 'Livreur ajouté aux favoris !' : 'Livreur bloqué.');
        }
    }
</script>
@endpush
@endsection