@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $draft = $draft ?? [];
    $parcelStep = 'drop';
@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 2</span>
                    <h1>Drop Address</h1>
                    <p>Set the receiver location and contact details for delivery handoff.</p>
                </div>
                <a href="{{ route('pwa.parcel.create') }}" 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

        <div class="fm-parcel-map-shell" data-map-prefix="drop" aria-label="Drop map">
            <div class="fm-parcel-map-pin"><span>D</span></div>
            <div class="fm-parcel-map-chip">
                <span>Drop map</span>
                <span>Search or pin</span>
            </div>
        </div>

        <form method="POST" action="{{ route('pwa.parcel.drop.store') }}">
            @csrf
            <section class="fm-parcel-card fm-parcel-bottom-sheet">
                <h2>Drop Location</h2>
                <p>Google suggestions fill receiver address, city and map pin automatically.</p>

                <div class="fm-parcel-field">
                    <label for="drop_search">Search drop</label>
                    <input id="drop_search" type="text" placeholder="Search drop address" autocomplete="street-address">
                </div>

                <button type="button" class="fm-parcel-detect" onclick="detectLocation('drop')">Detect my location</button>

                <div class="fm-parcel-field" style="margin-top:12px;">
                    <label for="drop_address">Drop Address</label>
                    <textarea id="drop_address" name="drop_address" required>{{ old('drop_address', $draft['drop_address'] ?? '') }}</textarea>
                </div>

                <div class="fm-parcel-grid-2">
                    <div class="fm-parcel-field">
                        <label for="drop_city">Drop City</label>
                        <input id="drop_city" name="drop_city" value="{{ old('drop_city', $draft['drop_city'] ?? '') }}">
                    </div>
                    <div class="fm-parcel-field">
                        <label for="drop_landmark">Landmark</label>
                        <input id="drop_landmark" name="drop_landmark" value="{{ old('drop_landmark', $draft['drop_landmark'] ?? '') }}" placeholder="Optional">
                    </div>
                </div>

                <input id="drop_lat" name="drop_lat" type="hidden" value="{{ old('drop_lat', $draft['drop_lat'] ?? '') }}">
                <input id="drop_lng" name="drop_lng" type="hidden" value="{{ old('drop_lng', $draft['drop_lng'] ?? '') }}">
            </section>

            <section class="fm-parcel-card">
                <h2>Receiver Details</h2>
                <p>The driver uses this contact for arrival and delivery OTP.</p>

                <div class="fm-parcel-grid-2">
                    <div class="fm-parcel-field">
                        <label for="receiver_name">Receiver Name</label>
                        <input id="receiver_name" name="receiver_name" value="{{ old('receiver_name', $draft['receiver_name'] ?? '') }}" required>
                    </div>
                    <div class="fm-parcel-field">
                        <label for="receiver_phone">Receiver Phone</label>
                        <input id="receiver_phone" name="receiver_phone" value="{{ old('receiver_phone', $draft['receiver_phone'] ?? '') }}" required>
                    </div>
                </div>
            </section>

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

@include('services.parcel._places-script')
@endsection