@extends('layouts.app')

@section('title', 'Dashboard Livreur')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    :root {
        --driver-primary: #10b981;
        --driver-secondary: #059669;
        --driver-dark: #047857;
    }

    /* Fix z-index hierarchy - navigation must be on top */
    nav, .nav-container, [x-data*="open"] > nav {
        z-index: 9999 !important;
    }
    
    /* Mobile menu backdrop and drawer */
    .fixed.inset-0.bg-black\/40 {
        z-index: 9998 !important;
    }

    .driver-header {
        background: linear-gradient(135deg, var(--driver-primary) 0%, var(--driver-secondary) 100%);
        padding: 1.5rem;
        color: white;
        position: sticky;
        top: 48px; /* Under main nav */
        z-index: 40; /* Below main nav z-50 */
    }
    
    @media (min-width: 640px) {
        .driver-header {
            top: 64px; /* Taller nav on desktop */
        }
    }

    .driver-status-toggle {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: rgba(255,255,255,0.2);
        padding: 0.5rem 1rem;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .driver-status-toggle:hover {
        background: rgba(255,255,255,0.3);
    }

    .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .status-dot.available { background: #22c55e; }
    .status-dot.offline { background: #ef4444; }
    .status-dot.busy { background: #f59e0b; }

    @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.1); }
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 1rem;
        margin-top: -2rem;
    }

    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .stat-card .icon {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .stat-card .value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--driver-primary);
    }

    .stat-card .label {
        font-size: 0.75rem;
        color: #6b7280;
    }

    .section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        font-weight: 600;
        color: #1f2937;
    }

    .section-title .badge {
        background: var(--driver-primary);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
    }

    .order-card {
        background: white;
        margin: 0 1rem 1rem;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        overflow: hidden;
        transition: all 0.3s;
    }

    .order-card:active {
        transform: scale(0.98);
    }

    .order-card-header {
        display: flex;
        align-items: center;
        padding: 1rem;
        gap: 1rem;
        border-bottom: 1px solid #f3f4f6;
    }

    .restaurant-logo {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .restaurant-info h4 {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .restaurant-info .distance {
        font-size: 0.75rem;
        color: #6b7280;
    }

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

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

    .route-point {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
    }

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

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

    .route-point .text {
        font-size: 0.8rem;
        color: #374151;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .route-arrow {
        color: #9ca3af;
    }

    .order-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
        color: #6b7280;
    }

    .order-amount {
        font-weight: 600;
        color: var(--driver-primary);
    }

    .order-card-actions {
        display: flex;
        border-top: 1px solid #f3f4f6;
    }

    .order-card-actions button {
        flex: 1;
        padding: 0.75rem;
        border: none;
        background: none;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .order-card-actions .accept-btn {
        background: var(--driver-primary);
        color: white;
    }

    .order-card-actions .accept-btn:hover {
        background: var(--driver-secondary);
    }

    .order-card-actions .details-btn {
        color: #6b7280;
    }

    .active-order-card {
        border-left: 4px solid var(--driver-primary);
    }

    .active-order-card .status-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-assigned { background: #dbeafe; color: #1d4ed8; }
    .status-picked_up { background: #fef3c7; color: #d97706; }
    .status-in_transit { background: #d1fae5; color: #059669; }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .action-buttons button {
        flex: 1;
        padding: 0.75rem;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-pickup {
        background: #fbbf24;
        color: #1f2937;
    }

    .btn-start {
        background: #3b82f6;
        color: white;
    }

    .btn-deliver {
        background: var(--driver-primary);
        color: white;
    }

    .btn-navigate {
        background: #1f2937;
        color: white;
    }

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

    .empty-state .icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .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;
        transition: color 0.2s;
    }

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

    .bottom-nav a .icon {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .content-wrapper {
        padding-bottom: 80px;
    }

    /* Loading overlay */
    .loading-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255,255,255,0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 48; /* Above content but below nav */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }

    .loading-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #e5e7eb;
        border-top-color: var(--driver-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>
@endpush

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

<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
</div>

<!-- Header -->
<div class="driver-header">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h5 class="mb-0">{{ $driver->vehicle_icon }} {{ $driver->full_name }}</h5>
            <small class="opacity-75">Livreur</small>
        </div>
        <div class="driver-status-toggle" onclick="toggleStatus()">
            <span class="status-dot {{ $driver->status }}"></span>
            <span id="statusText">
                @if($driver->status === 'available') En ligne
                @elseif($driver->status === 'busy') Occupé
                @else Hors ligne
                @endif
            </span>
        </div>
    </div>
</div>

<!-- Stats -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="icon">📦</div>
        <div class="value">{{ $todayStats['completed'] }}</div>
        <div class="label">Livrées</div>
    </div>
    <div class="stat-card">
        <div class="icon">⏳</div>
        <div class="value">{{ $todayStats['pending'] }}</div>
        <div class="label">En cours</div>
    </div>
    <div class="stat-card">
        <div class="icon">💰</div>
        <div class="value">{{ number_format($todayStats['earnings'], 2) }}€</div>
        <div class="label">Gains</div>
    </div>
</div>

<div class="content-wrapper">
    <!-- Active Orders -->
    @if($activeOrders->count() > 0)
    <div class="section-title">
        <span>🚀 Livraisons en cours</span>
        <span class="badge">{{ $activeOrders->count() }}</span>
    </div>

    @foreach($activeOrders as $order)
    <div class="order-card active-order-card">
        <div class="order-card-header">
            <div class="restaurant-logo">🍽️</div>
            <div class="restaurant-info">
                <h4>{{ $order->prestataire->company_name ?? 'Restaurant' }}</h4>
                <div class="distance">
                    <span class="status-badge status-{{ $order->delivery_status }}">
                        {{ $order->delivery_status_label }}
                    </span>
                </div>
            </div>
            <div class="ms-auto text-end">
                <div class="order-amount">+{{ number_format($order->driver_commission ?? 2, 2) }}€</div>
                <small class="text-muted">#{{ $order->id }}</small>
            </div>
        </div>

        <div class="order-card-body">
            <div class="delivery-route">
                <div class="route-point pickup">
                    <span class="dot"></span>
                    <span class="text">{{ $order->prestataire->address ?? 'Restaurant' }}</span>
                </div>
                <span class="route-arrow">→</span>
                <div class="route-point delivery">
                    <span class="dot"></span>
                    <span class="text">{{ Str::limit($order->delivery_address, 30) }}</span>
                </div>
            </div>

            <div class="order-details">
                <span>{{ $order->items->count() }} article(s)</span>
                <span>~{{ $order->estimated_delivery_time ?? 15 }} min</span>
                <span>{{ $order->delivery_distance ?? '?' }} km</span>
            </div>

            <div class="action-buttons">
                @if($order->delivery_status === 'assigned')
                    <button class="btn-navigate" onclick="navigate('{{ $order->prestataire->latitude ?? 0 }}', '{{ $order->prestataire->longitude ?? 0 }}')">
                        🗺️ GPS
                    </button>
                    <button class="btn-pickup" onclick="pickupOrder({{ $order->id }})">
                        ✅ Récupérée
                    </button>
                @elseif($order->delivery_status === 'picked_up')
                    <button class="btn-navigate" onclick="navigate('{{ $order->delivery_lat }}', '{{ $order->delivery_lng }}')">
                        🗺️ GPS
                    </button>
                    <button class="btn-start" onclick="startDelivery({{ $order->id }})">
                        🚗 En route
                    </button>
                @elseif($order->delivery_status === 'in_transit')
                    <button class="btn-navigate" onclick="navigate('{{ $order->delivery_lat }}', '{{ $order->delivery_lng }}')">
                        🗺️ GPS
                    </button>
                    <button class="btn-deliver" onclick="deliverOrder({{ $order->id }})">
                        🎉 Livrée !
                    </button>
                @endif
            </div>
        </div>
    </div>
    @endforeach
    @endif

    <!-- Pending Orders -->
    @if($driver->status === 'available')
    <div class="section-title">
        <span>📋 Commandes disponibles</span>
        <span class="badge">{{ $pendingOrders->count() }}</span>
    </div>

    @forelse($pendingOrders as $order)
    <div class="order-card" id="pending-{{ $order->id }}">
        <div class="order-card-header">
            <div class="restaurant-logo">🍽️</div>
            <div class="restaurant-info">
                <h4>{{ $order->prestataire->company_name ?? 'Restaurant' }}</h4>
                <div class="distance">
                    📍 {{ $order->prestataire->address ?? '' }}
                </div>
            </div>
        </div>

        <div class="order-card-body">
            <div class="delivery-route">
                <div class="route-point pickup">
                    <span class="dot"></span>
                    <span class="text">{{ Str::limit($order->prestataire->address ?? 'Restaurant', 25) }}</span>
                </div>
                <span class="route-arrow">→</span>
                <div class="route-point delivery">
                    <span class="dot"></span>
                    <span class="text">{{ Str::limit($order->delivery_address, 25) }}</span>
                </div>
            </div>

            <div class="order-details">
                <span>{{ $order->items->count() }} article(s)</span>
                <span>{{ number_format($order->total, 2) }}€</span>
                <span>
                    @if($order->status === 'ready')
                        <span class="text-success">✅ Prête</span>
                    @elseif($order->status === 'preparing')
                        <span class="text-warning">🍳 En prépa</span>
                    @else
                        <span class="text-info">⏳ Acceptée</span>
                    @endif
                </span>
            </div>
        </div>

        <div class="order-card-actions">
            <button class="details-btn" onclick="viewOrderDetails({{ $order->id }})">
                Voir détails
            </button>
            <button class="accept-btn" onclick="acceptOrder({{ $order->id }})">
                ✓ Accepter
            </button>
        </div>
    </div>
    @empty
    <div class="empty-state">
        <div class="icon">☕</div>
        <p>Aucune commande disponible<br>pour le moment</p>
    </div>
    @endforelse
    @else
    <div class="empty-state">
        <div class="icon">🔴</div>
        <p>Passez en ligne pour voir<br>les commandes disponibles</p>
    </div>
    @endif
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('driver.dashboard') }}" class="active">
        <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') }}">
        <span class="icon">💰</span>
        Tarifs
    </a>
    <a href="{{ route('driver.stats') }}">
        <span class="icon">📊</span>
        Stats
    </a>
</div>
@endsection

@push('scripts')
<script>
const csrfToken = '{{ csrf_token() }}';

function showLoading() {
    document.getElementById('loadingOverlay').classList.add('active');
}

function hideLoading() {
    document.getElementById('loadingOverlay').classList.remove('active');
}

// Toggle disponibilité
async function toggleStatus() {
    showLoading();
    try {
        const response = await fetch('{{ route("driver.toggle-availability") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        });
        const data = await response.json();
        if (data.success) {
            location.reload();
        }
    } catch (error) {
        console.error('Erreur:', error);
        alert('Erreur lors du changement de statut');
    } finally {
        hideLoading();
    }
}

// Accepter une commande
async function acceptOrder(orderId) {
    if (!confirm('Accepter cette livraison ?')) return;
    
    showLoading();
    try {
        const response = await fetch(`/driver/deliveries/${orderId}/accept`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        });
        const data = await response.json();
        if (data.success) {
            document.getElementById(`pending-${orderId}`)?.remove();
            location.reload();
        } else {
            alert(data.message || 'Erreur');
        }
    } catch (error) {
        console.error('Erreur:', error);
        alert('Erreur lors de l\'acceptation');
    } finally {
        hideLoading();
    }
}

// Marquer comme récupérée
async function pickupOrder(orderId) {
    showLoading();
    try {
        const response = await fetch(`/driver/deliveries/${orderId}/pickup`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        });
        const data = await response.json();
        if (data.success) {
            location.reload();
        }
    } catch (error) {
        console.error('Erreur:', error);
    } finally {
        hideLoading();
    }
}

// Démarrer la livraison
async function startDelivery(orderId) {
    showLoading();
    try {
        const response = await fetch(`/driver/deliveries/${orderId}/start`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        });
        const data = await response.json();
        if (data.success) {
            location.reload();
        }
    } catch (error) {
        console.error('Erreur:', error);
    } finally {
        hideLoading();
    }
}

// Marquer comme livrée
async function deliverOrder(orderId) {
    if (!confirm('Confirmer la livraison ?')) return;
    
    showLoading();
    try {
        const response = await fetch(`/driver/deliveries/${orderId}/deliver`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        });
        const data = await response.json();
        if (data.success) {
            alert(`Livraison terminée ! 🎉\nGains: +${data.earnings}€`);
            location.reload();
        }
    } catch (error) {
        console.error('Erreur:', error);
    } finally {
        hideLoading();
    }
}

// Navigation GPS
function navigate(lat, lng) {
    // Ouvrir dans Google Maps, Waze ou Apple Maps
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    const url = isIOS 
        ? `maps://maps.apple.com/?daddr=${lat},${lng}`
        : `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}&travelmode=driving`;
    window.open(url, '_blank');
}

// Voir les détails d'une commande
function viewOrderDetails(orderId) {
    // Afficher un modal ou rediriger
    window.location.href = `/driver/deliveries/${orderId}`;
}

// Mise à jour GPS en temps réel
function startLocationTracking() {
    if ('geolocation' in navigator) {
        navigator.geolocation.watchPosition(
            async (position) => {
                try {
                    await fetch('{{ route("driver.update-location") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        })
                    });
                } catch (error) {
                    console.error('Erreur GPS:', error);
                }
            },
            (error) => console.error('GPS error:', error),
            { enableHighAccuracy: true, timeout: 10000, maximumAge: 30000 }
        );
    }
}

// Démarrer le tracking GPS
startLocationTracking();

// Rafraîchir les commandes toutes les 30 secondes
setInterval(() => {
    // Refresh silencieux - juste les données
    fetch('{{ route("driver.dashboard") }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
        .then(response => {
            if (response.ok) {
                // On pourrait mettre à jour le DOM ici
            }
        });
}, 30000);
</script>
@endpush