@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $banner = $banners->first();
    $currency = \App\Support\StorefrontPresenter::currencySymbol();
@endphp

<div class="fm-parcel-flow">
    <div class="fm-container">
        <section class="fm-parcel-hero-panel">
            <div class="fm-parcel-topbar">
                <div>
                    <span class="fm-parcel-eyebrow">Parcel delivery</span>
                    <h1>{{ $banner?->title ?: 'Deliver your parcel' }}</h1>
                    <p>{{ $banner?->description ?: 'Fast, safe, reliable pickup and live tracking for normal parcels.' }}</p>
                </div>
                <div class="fm-parcel-box" aria-hidden="true">
                    <img class="fm-parcel-asset fm-parcel-asset--hero" src="{{ asset('assets/customer/services/parcel.svg') }}" alt="">
                </div>
            </div>
        </section>

        @if(! $parcelEnabled)
            <div class="fm-parcel-alert">Parcel delivery is currently unavailable.</div>
        @endif

        <section class="fm-parcel-card">
            <h2>Book a parcel</h2>
            <p>Pickup, drop, details, fare and payment in the same flow as the app.</p>
            <div class="fm-parcel-action-grid">
                <a class="fm-parcel-mini-action" href="{{ Auth::check() ? route('pwa.parcel.create') : route('login') }}">
                    <span class="fm-parcel-mini-icon">P</span>
                    <span><strong>Book parcel</strong><small>Start with pickup location</small></span>
                </a>
                <a class="fm-parcel-mini-action" href="{{ route('pwa.parcel.rate') }}">
                    <span class="fm-parcel-mini-icon">{{ $currency }}</span>
                    <span><strong>Rate calculator</strong><small>Real admin fare by distance</small></span>
                </a>
                <a class="fm-parcel-mini-action" href="{{ Auth::check() ? route('pwa.parcel.bookings') : route('login') }}">
                    <span class="fm-parcel-mini-icon">O</span>
                    <span><strong>My orders</strong><small>Track active parcels</small></span>
                </a>
            </div>
        </section>

        <section class="fm-parcel-card">
            <h2>Why LocalGo parcel?</h2>
            <div style="display:grid;gap:10px;">
                <div class="fm-parcel-feature-row">
                    <span class="fm-parcel-feature-icon">1</span>
                    <span><strong>Doorstep pickup</strong><small>We collect from your location.</small></span>
                </div>
                <div class="fm-parcel-feature-row">
                    <span class="fm-parcel-feature-icon">2</span>
                    <span><strong>Live tracking</strong><small>Track your parcel in real time.</small></span>
                </div>
                <div class="fm-parcel-feature-row">
                    <span class="fm-parcel-feature-icon">3</span>
                    <span><strong>Safe delivery</strong><small>Fragile notes go to the driver.</small></span>
                </div>
            </div>
        </section>

        <section class="fm-parcel-card">
            <h2>Recent bookings</h2>
            <p>Your latest parcel orders and live status.</p>
            @forelse($bookings as $booking)
                @include('services.parcel.components.parcel-card', ['order' => $booking])
            @empty
                <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>
                </div>
            @endforelse
        </section>

        <nav class="fm-parcel-bottom-nav" aria-label="Parcel navigation">
            <a class="is-active" href="{{ route('pwa.parcel.index') }}"><span>H</span>Home</a>
            <a href="{{ Auth::check() ? route('pwa.parcel.bookings') : route('login') }}"><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