@extends('storefront.layout')

@section('title', 'Track Parcel - '.config('app.name', 'FreshMart'))
@section('body_class', 'sf-no-bottom-nav')

@section('content')
@include('services.parcel._flow-style')
@php
    $parcel = $order->parcelOrder;
    $statusMap = [
        'payment_pending' => 'pending',
        'pending' => 'pending',
        'confirmed' => 'assigned',
        'ready_for_pickup' => 'assigned',
        'reached_pickup' => 'arriving',
        'picked_up' => 'picked_up',
        'on_the_way' => 'in_transit',
        'in_transit' => 'in_transit',
        'delivered' => 'delivered',
        'completed' => 'delivered',
    ];
    $timelineStatus = $statusMap[$order->status] ?? 'pending';
@endphp

<div class="fm-parcel-flow">
    <div class="fm-container">
        <section class="fm-parcel-hero-panel">
            <div class="fm-parcel-hero-panel__top">
                <div>
                    <span class="fm-parcel-eyebrow">Live Tracking</span>
                    <h1>{{ \Illuminate\Support\Str::headline($order->status) }}</h1>
                    <p>Booking #{{ $order->order_number ?? $order->id }}</p>
                </div>
                <a href="{{ route('pwa.parcel.bookings') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        <div class="fm-parcel-map-shell" id="parcelTrackMap" style="min-height:300px;margin-bottom:-28px;"
            data-pickup-lat="{{ data_get($parcel, 'pickup_address.latitude') }}"
            data-pickup-lng="{{ data_get($parcel, 'pickup_address.longitude') }}"
            data-drop-lat="{{ data_get($parcel, 'drop_address.latitude') }}"
            data-drop-lng="{{ data_get($parcel, 'drop_address.longitude') }}">
            <div class="fm-parcel-map-chip">
                <span>{{ data_get($parcel, 'pickup_address.city', 'Pickup') }}</span>
                <span>{{ data_get($parcel, 'drop_address.city', 'Drop') }}</span>
            </div>
        </div>

        @include('services.parcel.components.tracking-bottom-sheet', [
            'current' => $timelineStatus,
            'title' => 'Parcel Status',
            'subtitle' => 'Driver route, pickup OTP and delivery OTP update as the order moves.',
        ])

        @if($order->driver)
            @include('services.parcel.components.driver-card', ['driver' => $order->driver])
        @else
            <section class="fm-parcel-card">
                <h2>Driver</h2>
                <p>Driver details will appear once a delivery partner accepts the parcel.</p>
            </section>
        @endif

        <section class="fm-parcel-card">
            <h2>OTP</h2>
            <div class="fm-parcel-grid-2">
                @include('services.parcel.components.otp-modal', ['label' => 'Pickup OTP', 'otp' => $parcel->pickup_otp ?? '----'])
                @include('services.parcel.components.otp-modal', ['label' => 'Delivery OTP', 'otp' => $parcel->delivery_otp ?? $order->delivery_otp ?? '----'])
            </div>
        </section>

        <section class="fm-parcel-card">
            <h2>Route</h2>
            <div class="fm-parcel-review">
                <div class="fm-parcel-review-row"><span>Pickup</span><strong>{{ data_get($parcel, 'pickup_address.address', 'Not available') }}</strong></div>
                <div class="fm-parcel-review-row"><span>Drop</span><strong>{{ data_get($parcel, 'drop_address.address', 'Not available') }}</strong></div>
            </div>
        </section>

        <div class="fm-parcel-actions">
            <a href="{{ route('pwa.parcel.help') }}" class="fm-parcel-btn fm-parcel-btn--secondary">Support</a>
            <a href="{{ route('pwa.parcel.order-details', $order) }}" class="fm-parcel-btn fm-parcel-btn--primary">Details</a>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const initTrackMap = () => {
        const node = document.getElementById('parcelTrackMap');
        if (!node || !window.google?.maps) return false;

        const pickup = { lat: Number(node.dataset.pickupLat), lng: Number(node.dataset.pickupLng) };
        const drop = { lat: Number(node.dataset.dropLat), lng: Number(node.dataset.dropLng) };
        const validPickup = Number.isFinite(pickup.lat) && Number.isFinite(pickup.lng);
        const validDrop = Number.isFinite(drop.lat) && Number.isFinite(drop.lng);
        const center = validPickup ? pickup : (validDrop ? drop : {lat: 28.6139, lng: 77.2090});

        const map = new google.maps.Map(node, {
            center,
            zoom: validPickup && validDrop ? 12 : 14,
            mapTypeControl: false,
            streetViewControl: false,
            fullscreenControl: false,
        });
        const bounds = new google.maps.LatLngBounds();

        if (validPickup) {
            new google.maps.Marker({map, position: pickup, label: 'P'});
            bounds.extend(pickup);
        }
        if (validDrop) {
            new google.maps.Marker({map, position: drop, label: 'D'});
            bounds.extend(drop);
        }
        if (validPickup && validDrop) {
            new google.maps.Polyline({
                map,
                path: [pickup, drop],
                strokeColor: '#1976d2',
                strokeOpacity: .92,
                strokeWeight: 4,
            });
            map.fitBounds(bounds);
        }

        return true;
    };

    if (initTrackMap()) return;
    let attempts = 0;
    const timer = setInterval(() => {
        attempts += 1;
        if (initTrackMap() || attempts >= 40) clearInterval(timer);
    }, 250);
});
</script>
@endsection