@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $draft = $draft ?? [];
    $pricing = $pricing ?? [];
    $paymentMethods = $paymentMethods ?? [];
    $parcelStep = 'fare';
    $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-hero-panel__top">
                <div>
                    <span class="fm-parcel-eyebrow">Step 4</span>
                    <h1>Fare Summary</h1>
                    <p>Review real admin fare and pay with enabled payment methods.</p>
                </div>
                <a href="{{ route('pwa.parcel.details') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        @include('services.parcel._flow-steps', ['parcelStep' => $parcelStep])

        @if(session('error'))
            <div class="fm-parcel-alert">{{ session('error') }}</div>
        @endif
        @if($errors->any())
            <div class="fm-parcel-alert">{{ $errors->first() }}</div>
        @endif

        <section class="fm-parcel-card">
            <h2>Route & Parcel</h2>
            <div class="fm-parcel-review">
                <div class="fm-parcel-review-row"><span>Pickup</span><strong>{{ $draft['pickup_city'] ?? 'Pickup' }}</strong></div>
                <div class="fm-parcel-review-row"><span>Drop</span><strong>{{ $draft['drop_city'] ?? 'Drop' }}</strong></div>
                <div class="fm-parcel-review-row"><span>Parcel</span><strong>{{ $draft['package_type'] ?? 'Parcel' }} - {{ $draft['weight_kg'] ?? 0 }} kg</strong></div>
                <div class="fm-parcel-review-row"><span>Distance</span><strong>{{ isset($pricing['distance_km']) ? $pricing['distance_km'].' km' : 'Calculated by route' }}</strong></div>
            </div>
        </section>

        <section class="fm-parcel-card">
            <h2>Total Amount</h2>
            <div style="text-align:center;padding:8px 0 10px;">
                <div style="font-size:12px;color:var(--parcel-muted);font-weight:900;">Payable</div>
                <div style="font-size:34px;font-weight:1000;color:var(--parcel-ink);">{{ $currency }}{{ number_format((float) ($pricing['total'] ?? 0), 2) }}</div>
            </div>
            @include('services.parcel.components.fare-summary', ['pricing' => $pricing])
        </section>

        <form method="POST" action="{{ route('pwa.parcel.store') }}">
            @csrf
            <section class="fm-parcel-card">
                <h2>Payment</h2>
                <p>Only payment methods enabled by admin are shown here.</p>

                <div class="fm-parcel-payment-grid">
                    @forelse($paymentMethods as $method => $meta)
                        <label class="fm-parcel-payment-option">
                            <input type="radio" name="payment_method" value="{{ $method }}" {{ old('payment_method', array_key_first($paymentMethods) ?: 'wallet') === $method ? 'checked' : '' }}>
                            <span><strong>{{ $meta[0] }}</strong><small>{{ $meta[1] }}</small></span>
                        </label>
                    @empty
                        <div class="fm-parcel-payment-option">
                            <span><strong>No payment methods enabled</strong><small>Ask admin to enable COD, wallet, or online gateway.</small></span>
                        </div>
                    @endforelse
                </div>

                <div class="fm-parcel-field" style="margin-top:12px;">
                    <label for="notes">Delivery Note</label>
                    <textarea id="notes" name="notes" placeholder="Optional instruction">{{ old('notes', $draft['special_instruction'] ?? '') }}</textarea>
                </div>
            </section>

            <div class="fm-parcel-actions">
                <a href="{{ route('pwa.parcel.details') }}" class="fm-parcel-btn fm-parcel-btn--secondary">Back</a>
                <button type="submit" class="fm-parcel-btn fm-parcel-btn--primary" @disabled(!($parcelEnabled ?? true))>Book Parcel</button>
            </div>
        </form>
    </div>
</div>
@endsection