@props(['order' => null])

@php
    $steps = ['Pending' => ['Order placed', 'bi-receipt'], 'Processing' => ['Processing', 'bi-box-seam'], 'Completed' => ['Completed', 'bi-check2-circle']];
    $reached = $order ? array_search($order->status, array_keys($steps), true) : false;
@endphp

<section class="sm-form-card" aria-labelledby="trackOrderHeading">
    <h2 id="trackOrderHeading" class="sm-summary-title">Track Your Order</h2>
    <p class="text-body-secondary">Enter the order number from your order confirmation.</p>

    <form method="POST" action="{{ route('storefront.track-order.lookup') }}" class="row g-3">
        @csrf
        <div class="col-12 col-md-8 col-lg-6">
            <label class="form-label" for="trackOrderNumber">Order Number <span aria-hidden="true">*</span></label>
            <input id="trackOrderNumber" name="order_number" type="text" value="{{ old('order_number', request('order')) }}" placeholder="SM-20261109-AB12" maxlength="16" pattern="{{ \App\Http\Requests\Storefront\TrackOrderRequest::NUMBER_HTML_PATTERN }}" title="An order number such as SM-20261109-AB12" required autocomplete="off" @class(['form-control rounded-pill', 'is-invalid' => $errors->has('order_number')]) @error('order_number') aria-describedby="trackOrderNumberError" @enderror>
            @error('order_number')
                <div id="trackOrderNumberError" class="invalid-feedback" role="alert">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-12">
            <button class="btn sm-btn-primary rounded-pill px-4" type="submit"><i class="bi bi-truck" aria-hidden="true"></i> Track Order</button>
        </div>
    </form>
</section>

@if ($order)
    <section class="sm-form-card mt-4" aria-labelledby="trackedOrderHeading" role="status">
        <h2 id="trackedOrderHeading" class="sm-summary-title">Order {{ $order->order_number }}</h2>
        <p class="text-body-secondary mb-3">Placed on {{ $order->created_at->format('j F Y') }} · {{ collect($order->items_json)->sum('quantity') }} {{ Str::plural('item', collect($order->items_json)->sum('quantity')) }} · ৳ {{ number_format($order->total_amount, 2) }}</p>

        @if ($order->status === 'Cancelled')
            <p class="sm-summary-warning mb-0">This order was cancelled. Please contact us if you have a question about it.</p>
        @else
            <ol class="sm-track-steps">
                @foreach ($steps as $status => [$label, $icon])
                    <li @class(['sm-track-step', 'is-done' => $reached !== false && $loop->index <= $reached]) @if ($order->status === $status) aria-current="step" @endif>
                        <span class="sm-track-dot"><i class="bi {{ $icon }}" aria-hidden="true"></i></span>
                        <span>{{ $label }}</span>
                    </li>
                @endforeach
            </ol>
        @endif

        @if ($order->delivery_area)
            <p class="mt-3 mb-0"><i class="bi bi-geo-alt" aria-hidden="true"></i> Delivering to {{ $order->delivery_area }}, {{ $order->delivery_district }}</p>
        @endif
    </section>
@endif