@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $activeTab = request('tab', 'all');
    $tabs = [
        'all' => 'All',
        'ongoing' => 'Ongoing',
        'completed' => 'Completed',
        'cancelled' => 'Cancelled',
    ];
@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">Orders</span>
                    <h1>My Bookings</h1>
                    <p>Track active parcels and review completed deliveries.</p>
                </div>
                <a href="{{ route('pwa.parcel.index') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        <div class="fm-parcel-tabs" role="tablist">
            @foreach($tabs as $key => $label)
                <a href="{{ route('pwa.parcel.bookings', ['tab' => $key]) }}" class="fm-parcel-tab {{ $activeTab === $key ? 'is-active' : '' }}">{{ $label }}</a>
            @endforeach
        </div>

        @forelse($bookings as $booking)
            @include('services.parcel.components.parcel-card', ['order' => $booking])
        @empty
            <div class="fm-parcel-card">
                <div class="fm-parcel-empty">
                    <div class="fm-parcel-icon-badge">
                        <img class="fm-parcel-asset fm-parcel-asset--badge" src="{{ asset('assets/customer/services/parcel.svg') }}" alt="">
                    </div>
                    <h2>No bookings yet</h2>
                    <p>Send your first parcel and it will appear here.</p>
                    <a href="{{ route('pwa.parcel.create') }}" class="fm-parcel-btn fm-parcel-btn--primary" style="margin-top:12px;">Send Parcel</a>
                </div>
            </div>
        @endforelse

        @if(method_exists($bookings, 'links'))
            <div class="fm-pagination">
                {{ $bookings->withQueryString()->links() }}
            </div>
        @endif

        <nav class="fm-parcel-bottom-nav" aria-label="Parcel navigation">
            <a href="{{ route('pwa.parcel.index') }}"><span>H</span>Home</a>
            <a class="is-active" href="{{ route('pwa.parcel.bookings') }}"><span>O</span>Orders</a>
            <a href="{{ route('pwa.parcel.rate') }}"><span>R</span>Rate</a>
            <a href="{{ route('pwa.parcel.help') }}"><span>S</span>Support</a>
        </nav>
    </div>
</div>
@endsection