@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $parcel = $order->parcelOrder;
    $subtitle = data_get($parcel, 'pickup_address.city', 'Pickup') . ' to ' . data_get($parcel, 'drop_address.city', 'Drop');
@endphp

<div class="fm-parcel-flow">
    <div class="fm-container">
        <section class="fm-parcel-hero-panel is-center">
            <span class="fm-parcel-eyebrow" style="margin:auto;">Searching Driver</span>
            <div class="fm-parcel-icon-badge">
                <img class="fm-parcel-asset fm-parcel-asset--badge" src="{{ asset('assets/customer/services/parcel.svg') }}" alt="">
            </div>
            <h1>Finding nearby drivers</h1>
            <p>We are matching your parcel with the best available delivery partner.</p>
        </section>

        <div class="fm-parcel-map-shell">
            <div class="fm-parcel-map-pin"><span>B</span></div>
            <div class="fm-parcel-map-chip">
                <span>Nearby drivers online</span>
                <span>ETA 2-5 min</span>
            </div>
        </div>

        @include('services.parcel.components.tracking-bottom-sheet', [
            'current' => $order->status === 'payment_pending' ? 'pending' : $order->status,
            'title' => 'Booking #' . ($order->order_number ?? $order->id),
            'subtitle' => $subtitle,
        ])

        <div class="fm-parcel-actions">
            <a href="{{ route('pwa.parcel.order-details', $order) }}" class="fm-parcel-btn fm-parcel-btn--secondary">Order Details</a>
            <a href="{{ route('pwa.parcel.track', $order) }}" class="fm-parcel-btn fm-parcel-btn--primary">Live Tracking</a>
        </div>
    </div>
</div>
@endsection