@extends('layouts.app')

@section('title', 'Livraison #' . $foodOrder->id)

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

    .delivery-header {
        background: linear-gradient(135deg, var(--driver-primary) 0%, #059669 100%);
        padding: 1.5rem;
        color: white;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .back-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        font-size: 1.25rem;
        cursor: pointer;
    }

    .status-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 500;
        background: rgba(255,255,255,0.2);
    }

    #miniMap {
        height: 200px;
        border-radius: 16px;
        margin: -1.5rem 1rem 1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .info-section {
        background: white;
        margin: 0 1rem 1rem;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .info-header {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .info-body {
        padding: 1rem;
    }

    .route-timeline {
        position: relative;
        padding-left: 2rem;
    }

    .route-timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: #e5e7eb;
    }

    .timeline-point {
        position: relative;
        padding-bottom: 1.5rem;
    }

    .timeline-point:last-child {
        padding-bottom: 0;
    }

    .timeline-dot {
        position: absolute;
        left: -24px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        border: 3px solid;
    }

    .timeline-dot.pickup { border-color: var(--driver-primary); }
    .timeline-dot.delivery { border-color: #ef4444; }
    .timeline-dot.done { 
        background: var(--driver-primary); 
        border-color: var(--driver-primary); 
    }

    .timeline-content .label {
        font-size: 0.75rem;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .timeline-content .name {
        font-weight: 600;
        margin: 0.25rem 0;
    }

    .timeline-content .address {
        font-size: 0.9rem;
        color: #6b7280;
    }

    .timeline-content .phone {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.5rem;
        padding: 0.25rem 0.75rem;
        background: #f3f4f6;
        border-radius: 50px;
        font-size: 0.85rem;
        text-decoration: none;
        color: #374151;
    }

    .order-items {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .order-items li {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .order-items li:last-child {
        border-bottom: none;
    }

    .item-qty {
        background: var(--driver-primary);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
    }

    .earnings-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: linear-gradient(135deg, var(--driver-primary) 0%, #059669 100%);
        color: white;
        border-radius: 12px;
        margin-top: 1rem;
    }

    .earnings-box .label {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .earnings-box .amount {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .action-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: white;
        border-top: 1px solid #e5e7eb;
        display: flex;
        gap: 0.75rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .action-buttons button {
        flex: 1;
        padding: 0.875rem;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

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

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

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

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

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

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

    .notes-box {
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .notes-box .title {
        font-weight: 600;
        color: #92400e;
        margin-bottom: 0.25rem;
    }

    .notes-box .text {
        color: #78350f;
        font-size: 0.9rem;
    }
</style>
@endpush

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

<!-- Header -->
<div class="delivery-header">
    <a href="{{ route('driver.dashboard') }}" class="back-btn">←</a>
    <div class="flex-grow-1">
        <h5 class="mb-1">Livraison #{{ $foodOrder->id }}</h5>
        <span class="status-badge">{{ $foodOrder->delivery_status_label }}</span>
    </div>
    <div class="text-end">
        <div class="fs-5 fw-bold">+{{ number_format($foodOrder->driver_commission ?? 2, 2) }}€</div>
        <small class="opacity-75">Commission</small>
    </div>
</div>

<!-- Mini Map -->
<div id="miniMap"></div>

<div class="content-wrapper">
    <!-- Route Info -->
    <div class="info-section">
        <div class="info-header">
            🛣️ Itinéraire
        </div>
        <div class="info-body">
            <div class="route-timeline">
                <!-- Pickup Point -->
                <div class="timeline-point">
                    <div class="timeline-dot pickup {{ in_array($foodOrder->delivery_status, ['picked_up', 'in_transit', 'delivered']) ? 'done' : '' }}"></div>
                    <div class="timeline-content">
                        <div class="label">Récupération</div>
                        <div class="name">{{ $foodOrder->prestataire->company_name ?? 'Restaurant' }}</div>
                        <div class="address">{{ $foodOrder->prestataire->address ?? 'Adresse non disponible' }}</div>
                        @if($foodOrder->prestataire->phone)
                        <a href="tel:{{ $foodOrder->prestataire->phone }}" class="phone">
                            📞 {{ $foodOrder->prestataire->phone }}
                        </a>
                        @endif
                    </div>
                </div>

                <!-- Delivery Point -->
                <div class="timeline-point">
                    <div class="timeline-dot delivery {{ $foodOrder->delivery_status === 'delivered' ? 'done' : '' }}"></div>
                    <div class="timeline-content">
                        <div class="label">Livraison</div>
                        <div class="name">{{ $foodOrder->client->name ?? 'Client' }}</div>
                        <div class="address">{{ $foodOrder->delivery_address }}</div>
                        @if($foodOrder->client->phone)
                        <a href="tel:{{ $foodOrder->client->phone }}" class="phone">
                            📞 {{ $foodOrder->client->phone }}
                        </a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-around mt-3 pt-3 border-top">
                <div class="text-center">
                    <div class="fw-bold">{{ $foodOrder->delivery_distance ?? '?' }} km</div>
                    <small class="text-muted">Distance</small>
                </div>
                <div class="text-center">
                    <div class="fw-bold">~{{ $foodOrder->estimated_delivery_time ?? 15 }} min</div>
                    <small class="text-muted">Durée estimée</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Details -->
    <div class="info-section">
        <div class="info-header">
            📦 Détails commande
        </div>
        <div class="info-body">
            <ul class="order-items">
                @foreach($foodOrder->items as $item)
                <li>
                    <span>
                        <span class="item-qty">{{ $item->quantity }}</span>
                        {{ $item->foodItem->name ?? $item->name ?? 'Article' }}
                    </span>
                    <span class="text-muted">{{ number_format($item->subtotal, 2) }}€</span>
                </li>
                @endforeach
            </ul>

            <div class="d-flex justify-content-between pt-3 mt-2 border-top">
                <span class="fw-bold">Total commande</span>
                <span class="fw-bold">{{ number_format($foodOrder->total, 2) }}€</span>
            </div>

            @if($foodOrder->notes)
            <div class="notes-box">
                <div class="title">📝 Notes client</div>
                <div class="text">{{ $foodOrder->notes }}</div>
            </div>
            @endif

            <div class="earnings-box">
                <div>
                    <div class="label">Vos gains</div>
                    <div class="amount">+{{ number_format($foodOrder->driver_commission ?? 2, 2) }}€</div>
                </div>
                <div class="text-end">
                    <small class="opacity-75">Payé après livraison</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="action-buttons">
    @if($foodOrder->delivery_status === 'assigned')
        <button class="btn-navigate" onclick="navigate('pickup')">🗺️ GPS Restaurant</button>
        <button class="btn-pickup" onclick="pickupOrder()">✅ Récupérée</button>
    @elseif($foodOrder->delivery_status === 'picked_up')
        <button class="btn-navigate" onclick="navigate('delivery')">🗺️ GPS Client</button>
        <button class="btn-start" onclick="startDelivery()">🚗 En route</button>
    @elseif($foodOrder->delivery_status === 'in_transit')
        <button class="btn-navigate" onclick="navigate('delivery')">🗺️ GPS</button>
        <button class="btn-call" onclick="callClient()">📞 Appeler</button>
        <button class="btn-deliver" onclick="deliverOrder()">🎉 Livrée !</button>
    @else
        <a href="{{ route('driver.dashboard') }}" class="btn-navigate" style="text-decoration:none;flex:1;text-align:center">
            ← Retour au dashboard
        </a>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const csrfToken = '{{ csrf_token() }}';
const orderId = {{ $foodOrder->id }};

// Locations
const pickupLat = {{ $foodOrder->prestataire->latitude ?? 48.8566 }};
const pickupLng = {{ $foodOrder->prestataire->longitude ?? 2.3522 }};
const deliveryLat = {{ $foodOrder->delivery_lat ?? 48.8566 }};
const deliveryLng = {{ $foodOrder->delivery_lng ?? 2.3522 }};
const clientPhone = '{{ $foodOrder->client->phone ?? "" }}';

// Initialize mini map
const map = L.map('miniMap').setView([(pickupLat + deliveryLat) / 2, (pickupLng + deliveryLng) / 2], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Markers
const pickupIcon = L.divIcon({
    className: 'custom-marker',
    html: '<div style="background:#10b981;color:white;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid white;box-shadow:0 2px 10px rgba(0,0,0,0.3)">📦</div>',
    iconSize: [30, 30],
    iconAnchor: [15, 15]
});

const deliveryIcon = L.divIcon({
    className: 'custom-marker',
    html: '<div style="background:#ef4444;color:white;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid white;box-shadow:0 2px 10px rgba(0,0,0,0.3)">🏠</div>',
    iconSize: [30, 30],
    iconAnchor: [15, 15]
});

L.marker([pickupLat, pickupLng], { icon: pickupIcon }).addTo(map);
L.marker([deliveryLat, deliveryLng], { icon: deliveryIcon }).addTo(map);

// Draw line between points
L.polyline([[pickupLat, pickupLng], [deliveryLat, deliveryLng]], {
    color: '#10b981',
    weight: 3,
    dashArray: '10, 10'
}).addTo(map);

// Fit bounds
map.fitBounds([[pickupLat, pickupLng], [deliveryLat, deliveryLng]], { padding: [30, 30] });

// Navigation functions
function navigate(type) {
    const lat = type === 'pickup' ? pickupLat : deliveryLat;
    const lng = type === 'pickup' ? pickupLng : deliveryLng;
    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');
}

function callClient() {
    if (clientPhone) {
        window.location.href = 'tel:' + clientPhone;
    } else {
        alert('Numéro non disponible');
    }
}

// Order actions
async function pickupOrder() {
    if (!confirm('Confirmer la récupération ?')) return;
    
    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) {
        alert('Erreur');
    }
}

async function startDelivery() {
    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) {
        alert('Erreur');
    }
}

async function deliverOrder() {
    if (!confirm('Confirmer la livraison ?')) return;
    
    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}€`);
            window.location.href = '{{ route("driver.dashboard") }}';
        }
    } catch (error) {
        alert('Erreur');
    }
}
</script>
@endpush