@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $draft = $draft ?? [];
    $parcelStep = 'details';
    $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],
    ];
    $selectedBand = old('weight_band', $draft['weight_band'] ?? '0-2');
    $selectedCategory = old('package_type', $draft['package_type'] ?? 'Documents');
@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 3</span>
                    <h1>Parcel Details</h1>
                    <p>Select what you are sending, weight band and special care instructions.</p>
                </div>
                <a href="{{ route('pwa.parcel.drop') }}" 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

        <form method="POST" action="{{ route('pwa.parcel.details.store') }}">
            @csrf
            <section class="fm-parcel-card">
                <h2>What are you sending?</h2>
                <p>Normal parcel delivery only. Vehicle selection is not required.</p>

                <div class="fm-parcel-field">
                    <label for="package_type">Parcel Category</label>
                    <select id="package_type" name="package_type" required>
                        @foreach($categories as $category)
                            <option value="{{ $category }}" {{ $selectedCategory === $category ? 'selected' : '' }}>{{ $category }}</option>
                        @endforeach
                    </select>
                    <input id="content" name="content" type="hidden" value="{{ old('content', $draft['content'] ?? $selectedCategory) }}">
                </div>

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

                <div class="fm-parcel-grid-3">
                    <div class="fm-parcel-field">
                        <label for="length_cm">L</label>
                        <input id="length_cm" type="number" step="0.1" min="0" name="length_cm" value="{{ old('length_cm', $draft['length_cm'] ?? '') }}" placeholder="cm">
                    </div>
                    <div class="fm-parcel-field">
                        <label for="width_cm">W</label>
                        <input id="width_cm" type="number" step="0.1" min="0" name="width_cm" value="{{ old('width_cm', $draft['width_cm'] ?? '') }}" placeholder="cm">
                    </div>
                    <div class="fm-parcel-field">
                        <label for="height_cm">H</label>
                        <input id="height_cm" type="number" step="0.1" min="0" name="height_cm" value="{{ old('height_cm', $draft['height_cm'] ?? '') }}" placeholder="cm">
                    </div>
                </div>
            </section>

            <section class="fm-parcel-card">
                <h2>Care Options</h2>
                <p>Fragile instructions are sent to the driver after acceptance.</p>

                <div class="fm-parcel-payment-grid">
                    <label class="fm-parcel-payment-option">
                        <input type="checkbox" name="is_fragile" value="1" {{ old('is_fragile', $draft['is_fragile'] ?? false) ? 'checked' : '' }}>
                        <span><strong>Fragile Item</strong><small>Driver receives careful handling instruction</small></span>
                    </label>
                    <label class="fm-parcel-payment-option">
                        <input type="checkbox" name="insurance_requested" value="1" {{ old('insurance_requested', $draft['insurance_requested'] ?? false) ? 'checked' : '' }}>
                        <span><strong>Add Insurance</strong><small>Optional admin configured insurance charge</small></span>
                    </label>
                </div>

                <div class="fm-parcel-field" style="margin-top:12px;">
                    <label for="package_value">Package Value</label>
                    <input id="package_value" type="number" min="0" step="1" name="package_value" value="{{ old('package_value', $draft['package_value'] ?? '') }}" placeholder="Optional">
                </div>

                <div class="fm-parcel-field">
                    <label for="special_instruction">Special Instruction</label>
                    <textarea id="special_instruction" name="special_instruction" placeholder="Handle carefully, call before pickup, etc.">{{ old('special_instruction', $draft['special_instruction'] ?? '') }}</textarea>
                </div>
            </section>

            <div class="fm-parcel-actions">
                <a href="{{ route('pwa.parcel.drop') }}" class="fm-parcel-btn fm-parcel-btn--secondary">Back</a>
                <button type="submit" class="fm-parcel-btn fm-parcel-btn--primary" @disabled(!($parcelEnabled ?? true))>View Fare</button>
            </div>
        </form>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const category = document.getElementById('package_type');
    const content = document.getElementById('content');
    const band = document.getElementById('weight_band');
    const weight = document.getElementById('weight_kg');

    category?.addEventListener('change', function() {
        if (content) content.value = this.value;
    });

    band?.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        if (weight && option?.dataset.weight) weight.value = option.dataset.weight;
    });
});
</script>
@endsection