@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">Notez, choisissez vos favoris ou bloquez des livreurs</p>
            </div>
            <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>

        {{-- 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

        {{-- 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">
                            {{-- 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">
                    Les livreurs externes disponibles dans votre zone apparaîtront ici. 
                    Vous pourrez les noter, les ajouter à vos favoris ou les bloquer.
                </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>
                        Les livreurs s'inscrivent sur la plateforme et deviennent disponibles automatiquement.
                    </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