@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $categories = ['Documents', 'Grocery', 'Electronics', 'Clothes', 'Medicines', 'Gifts', 'Small Packages', 'Others'];
    $bands = [
        '0-2' => ['label' => '0-2 kg', 'weight' => 1],
        '2-5' => ['label' => '2-5 kg', 'weight' => 3],
        '5-10' => ['label' => '5-10 kg', 'weight' => 7],
        '10-20' => ['label' => '10-20 kg', 'weight' => 15],
    ];
    $selectedCategory = request('package_type', 'Documents');
    $selectedBand = request('weight_band', '0-2');
    $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">Rate</span>
                    <h1>Rate Calculator</h1>
                    <p>Search pickup and drop suggestions to calculate real admin fare by distance.</p>
                </div>
                <a href="{{ route('pwa.parcel.index') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        <form method="GET" action="{{ route('pwa.parcel.rate') }}">
            <section class="fm-parcel-card">
                <h2>Route</h2>
                <p>Choose Google suggestions; address and coordinates are filled automatically.</p>

                <div class="fm-parcel-field">
                    <label for="pickup_search">Pickup Address</label>
                    <input id="pickup_search" type="text" placeholder="Search pickup address" value="{{ request('pickup_address') }}">
                    <input id="pickup_address" type="hidden" name="pickup_address" value="{{ request('pickup_address') }}">
                    <input id="pickup_city" type="hidden" name="pickup_city" value="{{ request('pickup_city') }}">
                    <input id="pickup_lat" type="hidden" name="pickup_lat" value="{{ request('pickup_lat') }}">
                    <input id="pickup_lng" type="hidden" name="pickup_lng" value="{{ request('pickup_lng') }}">
                </div>

                <div class="fm-parcel-field">
                    <label for="drop_search">Drop Address</label>
                    <input id="drop_search" type="text" placeholder="Search drop address" value="{{ request('drop_address') }}">
                    <input id="drop_address" type="hidden" name="drop_address" value="{{ request('drop_address') }}">
                    <input id="drop_city" type="hidden" name="drop_city" value="{{ request('drop_city') }}">
                    <input id="drop_lat" type="hidden" name="drop_lat" value="{{ request('drop_lat') }}">
                    <input id="drop_lng" type="hidden" name="drop_lng" value="{{ request('drop_lng') }}">
                </div>
            </section>

            <section class="fm-parcel-card">
                <h2>Parcel</h2>
                <div class="fm-parcel-field">
                    <label for="rate_package_type">What are you sending?</label>
                    <select id="rate_package_type" name="package_type">
                        @foreach($categories as $category)
                            <option value="{{ $category }}" @selected($selectedCategory === $category)>{{ $category }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="fm-parcel-field">
                    <label for="rate_weight_band">Select Weight</label>
                    <select id="rate_weight_band" name="weight_band">
                        @foreach($bands as $value => $meta)
                            <option value="{{ $value }}" data-weight="{{ $meta['weight'] }}" @selected($selectedBand === $value)>{{ $meta['label'] }}</option>
                        @endforeach
                    </select>
                    <input id="rate_weight_kg" type="hidden" name="weight_kg" value="{{ request('weight_kg', $bands[$selectedBand]['weight'] ?? 1) }}">
                </div>

                <div class="fm-parcel-field">
                    <label for="rate_delivery_option">Delivery Type</label>
                    <select id="rate_delivery_option" name="delivery_option">
                        <option value="standard" {{ request('delivery_option', 'standard') === 'standard' ? 'selected' : '' }}>Standard</option>
                        <option value="express" {{ request('delivery_option') === 'express' ? 'selected' : '' }}>Express</option>
                        <option value="same_day" {{ request('delivery_option') === 'same_day' ? 'selected' : '' }}>Same Day</option>
                    </select>
                </div>
            </section>

            <div class="fm-parcel-actions">
                <a href="{{ route('pwa.parcel.index') }}" class="fm-parcel-btn fm-parcel-btn--secondary">Back</a>
                <button type="submit" class="fm-parcel-btn fm-parcel-btn--primary">Calculate</button>
            </div>
        </form>

        @if(isset($pricing) && $pricing)
            <section class="fm-parcel-card" style="margin-top:14px;">
                <h2>Estimated Total</h2>
                <div style="text-align:center;padding:8px 0 10px;">
                    <div style="font-size:34px;font-weight:1000;color:var(--parcel-ink);">{{ $currency }}{{ number_format($pricing['total'] ?? 0, 2) }}</div>
                    <div style="font-size:12px;color:var(--parcel-muted);font-weight:900;">
                        {{ isset($pricing['distance_km']) ? $pricing['distance_km'].' km route' : 'Distance unavailable' }}
                    </div>
                </div>
                @include('services.parcel.components.fare-summary', ['pricing' => $pricing])
                <a href="{{ Auth::check() ? route('pwa.parcel.create') : route('login') }}" class="fm-parcel-btn fm-parcel-btn--primary" style="width:100%;margin-top:14px;">Book Now</a>
            </section>
        @else
            <section class="fm-parcel-card" style="margin-top:14px;">
                <div class="fm-parcel-empty">
                    <div class="fm-parcel-icon-badge">{{ $currency }}</div>
                    <h2>No estimate yet</h2>
                    <p>Select pickup and drop suggestions to fetch the real admin fare.</p>
                </div>
            </section>
        @endif
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const band = document.getElementById('rate_weight_band');
    const weight = document.getElementById('rate_weight_kg');
    band?.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        if (weight && option?.dataset.weight) weight.value = option.dataset.weight;
    });
});
</script>
@include('services.parcel._places-script')
@endsection