@extends('driver.layout')

@section('title','Order Details')

@section('content')

<div class="max-w-5xl mx-auto space-y-6">

    {{-- HEADER --}}
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold">Order #{{ $order->id }}</h1>
            <p class="text-sm text-gray-500">Live delivery management</p>
        </div>

        <span class="px-4 py-2 rounded-full text-sm font-semibold
            {{ $order->status === 'delivered' ? 'bg-green-100 text-green-700'
            : ($order->status === 'picked' ? 'bg-blue-100 text-blue-700'
            : 'bg-yellow-100 text-yellow-700') }}">
            {{ ucfirst($order->status) }}
        </span>
    </div>

    {{-- MAP + TRACK --}}
    <div class="flex gap-3">
        <a href="https://www.google.com/maps/dir/?api=1&destination={{ urlencode($order->delivery_address) }}"
           target="_blank"
           class="px-4 py-2 rounded-xl bg-blue-600 text-white">
            📍 Navigate
        </a>

        <span class="px-4 py-2 rounded-xl bg-gray-100 text-gray-700">
            Tracking: LIVE
        </span>
    </div>

    {{-- CUSTOMER --}}
    <div class="p-5 rounded-2xl bg-gray-50">
        <h3 class="font-semibold mb-1">Customer</h3>
        <p>{{ $order->customer_name }}<br>{{ $order->customer_phone }}</p>
    </div>

    {{-- ADDRESS --}}
    <div class="p-5 rounded-2xl bg-gray-50">
        <h3 class="font-semibold mb-1">Delivery Address</h3>
        <p>{{ $order->delivery_address }}</p>
    </div>

    {{-- ACTIONS --}}
    <div class="p-5 rounded-2xl bg-white border space-y-4">

        @if($order->status === 'pending')
        <form method="POST" action="{{ route('driver.orders.picked', $order) }}">
            @csrf
            <button class="w-full py-3 rounded-xl bg-blue-600 text-white">
                Mark as Picked
            </button>
        </form>
        @endif

        @if($order->status === 'picked')
        <form method="POST"
              action="{{ route('driver.orders.delivered', $order) }}"
              enctype="multipart/form-data"
              class="space-y-3">
            @csrf

            <input type="text"
                   name="otp"
                   placeholder="Enter OTP"
                   class="w-full border rounded-xl px-4 py-2">

            @error('otp')
                <p class="text-red-500 text-sm">{{ $message }}</p>
            @enderror

            <input type="file"
                   name="proof"
                   accept="image/*"
                   class="block w-full text-sm">

            <button class="w-full py-3 rounded-xl bg-green-600 text-white">
                Confirm Delivery
            </button>
        </form>
        @endif

    </div>

</div>

{{-- LIVE GPS TRACKING --}}
<script>
if ("geolocation" in navigator) {
    setInterval(() => {
        navigator.geolocation.getCurrentPosition(pos => {
            fetch("{{ route('driver.orders.location', $order) }}", {
                method: "POST",
                headers: {
                    "Content-Type":"application/json",
                    "X-CSRF-TOKEN":"{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    lat: pos.coords.latitude,
                    lng: pos.coords.longitude
                })
            });
        });
    }, 15000);
}
</script>

{{-- OFFLINE SUPPORT --}}
<script>
window.addEventListener("offline", () => {
    alert("You are offline. Actions will sync when online.");
});
</script>

@endsection