@extends('layouts.app')

@section('title', 'Historique - Livreur')

@push('styles')
<style>
    :root {
        --driver-primary: #10b981;
    }

    .page-header {
        background: linear-gradient(135deg, var(--driver-primary) 0%, #059669 100%);
        padding: 1.5rem;
        color: white;
    }

    .filters {
        display: flex;
        gap: 0.5rem;
        padding: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn {
        padding: 0.5rem 1rem;
        border-radius: 50px;
        border: 1px solid #e5e7eb;
        background: white;
        white-space: nowrap;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .filter-btn.active {
        background: var(--driver-primary);
        color: white;
        border-color: var(--driver-primary);
    }

    .delivery-list {
        padding: 0 1rem 80px;
    }

    .delivery-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .delivery-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
    }

    .delivery-date {
        font-size: 0.85rem;
        color: #6b7280;
    }

    .delivery-status {
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-delivered { background: #d1fae5; color: #059669; }
    .status-failed { background: #fee2e2; color: #dc2626; }
    .status-in_transit { background: #dbeafe; color: #2563eb; }

    .delivery-card-body {
        padding: 1rem;
    }

    .delivery-route {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .route-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .route-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .route-dot.pickup { background: var(--driver-primary); }
    .route-dot.delivery { background: #ef4444; }

    .route-connector {
        width: 2px;
        height: 30px;
        background: #e5e7eb;
    }

    .route-details {
        flex: 1;
    }

    .route-point {
        margin-bottom: 0.75rem;
    }

    .route-point .label {
        font-size: 0.7rem;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .route-point .value {
        font-size: 0.9rem;
        color: #374151;
    }

    .delivery-stats {
        display: flex;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid #f3f4f6;
    }

    .delivery-stat {
        text-align: center;
    }

    .delivery-stat .value {
        font-weight: 600;
        color: #1f2937;
    }

    .delivery-stat .label {
        font-size: 0.7rem;
        color: #9ca3af;
    }

    .earnings {
        color: var(--driver-primary) !important;
    }

    .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; /* Below main nav z-50 */
    }

    .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;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #9ca3af;
    }

    .empty-state .icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    /* Fix z-index hierarchy */
    nav, .nav-container {
        z-index: 9999 !important;
    }
</style>
@endpush

@section('content')
{{-- Section d'aide --}}
<div class="px-4 pt-4">
    <x-help-section page="driver.deliveries" />
</div>

<!-- Header -->
<div class="page-header">
    <h5 class="mb-1">📦 Historique des livraisons</h5>
    <p class="mb-0 opacity-75">{{ $deliveries->total() }} livraison(s)</p>
</div>

<!-- Filters -->
<div class="filters">
    <a href="{{ route('driver.deliveries', ['status' => 'all']) }}" 
       class="filter-btn {{ $status === 'all' ? 'active' : '' }}">
        Toutes
    </a>
    <a href="{{ route('driver.deliveries', ['status' => 'delivered']) }}" 
       class="filter-btn {{ $status === 'delivered' ? 'active' : '' }}">
        ✅ Livrées
    </a>
    <a href="{{ route('driver.deliveries', ['status' => 'in_transit']) }}" 
       class="filter-btn {{ $status === 'in_transit' ? 'active' : '' }}">
        🚗 En cours
    </a>
    <a href="{{ route('driver.deliveries', ['status' => 'failed']) }}" 
       class="filter-btn {{ $status === 'failed' ? 'active' : '' }}">
        ❌ Échouées
    </a>
</div>

<!-- Delivery List -->
<div class="delivery-list">
    @forelse($deliveries as $delivery)
    <div class="delivery-card">
        <div class="delivery-card-header">
            <div>
                <strong>#{{ $delivery->id }}</strong>
                <div class="delivery-date">
                    {{ $delivery->created_at->format('d/m/Y H:i') }}
                </div>
            </div>
            <span class="delivery-status status-{{ $delivery->delivery_status }}">
                {{ $delivery->delivery_status_label }}
            </span>
        </div>

        <div class="delivery-card-body">
            <div class="delivery-route">
                <div class="route-line">
                    <div class="route-dot pickup"></div>
                    <div class="route-connector"></div>
                    <div class="route-dot delivery"></div>
                </div>
                <div class="route-details">
                    <div class="route-point">
                        <div class="label">Récupération</div>
                        <div class="value">{{ $delivery->prestataire->company_name ?? 'Restaurant' }}</div>
                    </div>
                    <div class="route-point">
                        <div class="label">Livraison</div>
                        <div class="value">{{ Str::limit($delivery->delivery_address, 40) }}</div>
                    </div>
                </div>
            </div>

            <div class="delivery-stats">
                <div class="delivery-stat">
                    <div class="value">{{ $delivery->delivery_distance ?? '-' }} km</div>
                    <div class="label">Distance</div>
                </div>
                <div class="delivery-stat">
                    <div class="value">{{ $delivery->estimated_delivery_time ?? '-' }} min</div>
                    <div class="label">Durée</div>
                </div>
                <div class="delivery-stat">
                    <div class="value earnings">+{{ number_format($delivery->driver_commission ?? 0, 2) }}€</div>
                    <div class="label">Gains</div>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="empty-state">
        <div class="icon">📭</div>
        <p>Aucune livraison trouvée</p>
    </div>
    @endforelse

    <!-- Pagination -->
    <div class="d-flex justify-content-center mt-3">
        {{ $deliveries->appends(['status' => $status])->links() }}
    </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') }}" class="active">
        <span class="icon">📦</span>
        Historique
    </a>
    <a href="{{ route('driver.pricing') }}">
        <span class="icon">💰</span>
        Tarifs
    </a>
    <a href="{{ route('driver.stats') }}">
        <span class="icon">📊</span>
        Stats
    </a>
</div>
@endsection