@extends('layouts.app')

@section('title', 'Mes Livraisons - Prestataire')

@push('styles')
<style>
    .delivery-container {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        min-height: 100vh;
    }
    
    .delivery-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border: 1px solid rgba(59, 130, 246, 0.1);
        transition: all 0.3s ease;
    }
    
    .delivery-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    .timeline-step {
        position: relative;
        padding-left: 2rem;
    }
    
    .timeline-step::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 1.5rem;
        bottom: -1rem;
        width: 2px;
        background: #e5e7eb;
    }
    
    .timeline-step:last-child::before {
        display: none;
    }
    
    .timeline-step .dot {
        position: absolute;
        left: 0;
        top: 0.25rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border: 2px solid;
    }
    
    .timeline-step.completed .dot {
        background: #10b981;
        border-color: #10b981;
    }
    
    .timeline-step.current .dot {
        background: #3b82f6;
        border-color: #3b82f6;
        animation: pulse 2s infinite;
    }
    
    .timeline-step.pending .dot {
        background: white;
        border-color: #d1d5db;
    }
    
    @keyframes pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
        50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    }
</style>
@endpush

@section('content')
<div class="delivery-container py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Section d'aide --}}
        <x-help-section page="prestataire.delivery.index" />
        
        <!-- Header -->
        <div class="mb-6 sm:mb-8">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        <i class="fas fa-truck text-blue-500 mr-2"></i>Mes Livraisons
                    </h1>
                    <p class="text-sm sm:text-base text-gray-600 mt-1">Gérez les expéditions de vos commandes</p>
                </div>
                <a href="{{ route('prestataire.delivery.create') }}" class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 sm:px-6 py-3 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2">
                    <i class="fas fa-plus"></i>
                    <span>Nouvelle expédition</span>
                </a>
            </div>
        </div>
        
        <!-- Stats -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
            <div class="stat-card">
                <div class="flex items-center gap-2 sm:gap-3">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-box text-yellow-600 text-lg sm:text-xl"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs sm:text-sm text-gray-500">À expédier</p>
                        <p class="text-xl sm:text-2xl font-bold text-gray-900">{{ $stats['to_ship'] ?? 5 }}</p>
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="flex items-center gap-2 sm:gap-3">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-shipping-fast text-blue-600 text-lg sm:text-xl"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs sm:text-sm text-gray-500">En transit</p>
                        <p class="text-xl sm:text-2xl font-bold text-gray-900">{{ $stats['in_transit'] ?? 8 }}</p>
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="flex items-center gap-2 sm:gap-3">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-check-circle text-green-600 text-lg sm:text-xl"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs sm:text-sm text-gray-500">Livrées ce mois</p>
                        <p class="text-xl sm:text-2xl font-bold text-gray-900">{{ $stats['delivered'] ?? 42 }}</p>
                    </div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="flex items-center gap-2 sm:gap-3">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-percentage text-purple-600 text-lg sm:text-xl"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs sm:text-sm text-gray-500">Taux de succès</p>
                        <p class="text-xl sm:text-2xl font-bold text-gray-900">{{ $stats['success_rate'] ?? '98.5' }}%</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Deliveries List -->
        <div class="space-y-4">
            @forelse($deliveries ?? [] as $delivery)
            <div class="delivery-card p-4 sm:p-6">
                <div class="flex flex-col lg:flex-row gap-4 sm:gap-6">
                    <!-- Main Info -->
                    <div class="flex-1 min-w-0">
                        <div class="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4 mb-4">
                            <div class="w-14 h-14 sm:w-16 sm:h-16 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-box text-gray-400 text-xl sm:text-2xl"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex flex-wrap items-start gap-2 mb-1">
                                    <h3 class="font-semibold text-base sm:text-lg text-gray-900 truncate">
                                        Commande #{{ $delivery->order_id ?? rand(1000, 9999) }}
                                    </h3>
                                    @php
                                        $status = $delivery->status ?? 'in_transit';
                                        $statusClass = match($status) {
                                            'preparing' => 'bg-yellow-100 text-yellow-700',
                                            'shipped' => 'bg-blue-100 text-blue-700',
                                            'in_transit' => 'bg-indigo-100 text-indigo-700',
                                            'out_for_delivery' => 'bg-purple-100 text-purple-700',
                                            'delivered' => 'bg-green-100 text-green-700',
                                            default => 'bg-gray-100 text-gray-700'
                                        };
                                        $statusLabel = match($status) {
                                            'preparing' => 'Préparation',
                                            'shipped' => 'Expédiée',
                                            'in_transit' => 'En transit',
                                            'out_for_delivery' => 'En livraison',
                                            'delivered' => 'Livrée',
                                            default => 'Inconnu'
                                        };
                                    @endphp
                                    <span class="px-2 py-1 rounded text-xs font-medium {{ $statusClass }}">
                                        {{ $statusLabel }}
                                    </span>
                                </div>
                                <p class="text-xs sm:text-sm text-gray-500 truncate">
                                    N° suivi: <code class="bg-gray-100 px-1.5 py-0.5 rounded text-xs">{{ substr($delivery->tracking_number ?? 'TRK-' . strtoupper(substr(md5(rand()), 0, 10)), 0, 20) }}</code>
                                </p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 text-xs sm:text-sm">
                            <div>
                                <p class="text-gray-500 mb-1">Destinataire</p>
                                <p class="font-medium text-gray-900 truncate">{{ $delivery->recipient_name ?? 'Jean Dupont' }}</p>
                                <p class="text-gray-600 truncate">{{ $delivery->destination ?? 'Paris, 75001' }}</p>
                            </div>
                            <div>
                                <p class="text-gray-500 mb-1">Transporteur</p>
                                <p class="font-medium text-gray-900">{{ $delivery->carrier ?? 'Colissimo' }}</p>
                                <p class="text-gray-600">Livr. est: {{ $delivery->estimated_delivery ?? now()->addDays(2)->format('d/m/Y') }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Timeline - Hidden on mobile, visible on lg -->
                    <div class="hidden lg:block lg:w-64 border-l border-gray-200 pl-6">
                        <p class="text-sm font-medium text-gray-700 mb-3">Suivi</p>
                        <div class="space-y-3">
                            <div class="timeline-step completed">
                                <div class="dot"></div>
                                <p class="text-sm font-medium text-gray-900">Commande confirmée</p>
                                <p class="text-xs text-gray-500">{{ now()->subDays(3)->format('d/m H:i') }}</p>
                            </div>
                            <div class="timeline-step completed">
                                <div class="dot"></div>
                                <p class="text-sm font-medium text-gray-900">Colis préparé</p>
                                <p class="text-xs text-gray-500">{{ now()->subDays(2)->format('d/m H:i') }}</p>
                            </div>
                            <div class="timeline-step current">
                                <div class="dot"></div>
                                <p class="text-sm font-medium text-gray-900">En transit</p>
                                <p class="text-xs text-gray-500">{{ now()->subDay()->format('d/m H:i') }}</p>
                            </div>
                            <div class="timeline-step pending">
                                <div class="dot"></div>
                                <p class="text-sm text-gray-400">Livré</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="flex gap-2 mt-4 pt-4 border-t border-gray-100 flex-wrap">
                    <button class="flex-1 min-w-[100px] sm:flex-none bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors whitespace-nowrap">
                        <i class="fas fa-eye mr-1 hidden sm:inline"></i><span class="sm:hidden">Détails</span><span class="hidden sm:inline">Détails</span>
                    </button>
                    <button class="flex-1 min-w-[100px] sm:flex-none bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors whitespace-nowrap">
                        <i class="fas fa-print mr-1 hidden sm:inline"></i><span class="sm:hidden">Étiquette</span><span class="hidden sm:inline">Étiquette</span>
                    </button>
                    <button class="flex-1 min-w-[100px] sm:flex-none bg-green-100 hover:bg-green-200 text-green-700 px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors whitespace-nowrap">
                        <i class="fas fa-share mr-1 hidden sm:inline"></i><span class="sm:hidden">Partager</span><span class="hidden sm:inline">Partager</span>
                    </button>
                </div>
            </div>
            @empty
            <div class="text-center py-12 bg-white rounded-xl shadow-sm">
                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-truck text-blue-500 text-3xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Aucune livraison</h3>
                <p class="text-gray-500 mb-4">Vous n'avez pas encore de livraisons en cours</p>
            </div>
            @endforelse
        </div>
    </div>
</div>
@endsection