@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $draft = $draft ?? [];
    $parcelStep = 'pickup';
@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 1</span>
                    <h1>Pickup Address</h1>
                    <p>Search, detect your location, or move the map pin to set the pickup point.</p>
                </div>
                <a href="{{ route('pwa.parcel.index') }}" 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="pickup" aria-label="Pickup map">
            <div class="fm-parcel-map-pin"><span>P</span></div>
            <div class="fm-parcel-map-chip">
                <span>Pickup map</span>
                <span>Search or pin</span>
            </div>
        </div>

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

                @if(($addresses ?? collect())->isNotEmpty())
                    <div class="fm-parcel-field">
                        <label for="saved_pickup">Saved address</label>
                        <select id="saved_pickup" class="fm-parcel-saved" onchange="fillSavedAddress(this, 'pickup')">
                            <option value="">Select saved pickup</option>
                            @foreach($addresses ?? [] as $address)
                                <option data-address="{{ $address->address }}" data-city="{{ $address->city }}" data-lat="{{ $address->latitude }}" data-lng="{{ $address->longitude }}">
                                    {{ $address->name }} - {{ $address->address }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

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

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

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

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

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

            <div class="fm-parcel-actions">
                <a href="{{ route('pwa.parcel.index') }}" class="fm-parcel-btn fm-parcel-btn--secondary">Cancel</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