@extends('layouts.app')

@section('title', 'Choose address — ' . $service->name)

@section('header')
    <h2 class="h5 fw-semibold mb-0">{{ __('Book :service', ['service' => $service->name]) }}</h2>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaIm+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .cb-addr-card { border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: 1rem; }
        .cb-addr-card.is-selected { border-color: var(--bs-primary); background: var(--hp-primary-softer); }
        .cb-addr-icon {
            width: 2.25rem; height: 2.25rem; border-radius: .65rem; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--hp-primary-soft); color: var(--hp-primary);
        }

        .cb-loc-btn { background: var(--hp-primary); border-color: var(--hp-primary); font-weight: 600; }
        .cb-loc-btn:hover, .cb-loc-btn:focus { background: var(--hp-primary-strong); border-color: var(--hp-primary-strong); }
        .cb-divider { display: flex; align-items: center; gap: .75rem; color: var(--bs-secondary-color); font-size: .78rem; margin: 1rem 0; }
        .cb-divider::before, .cb-divider::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color); }

        .cb-search-wrap { position: relative; }
        .cb-suggestions {
            position: absolute; z-index: 2000; top: calc(100% + 2px); left: 0; right: 0;
            background: var(--hp-surface); border: 1px solid var(--bs-border-color); border-radius: .5rem;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .12); max-height: 16rem; overflow-y: auto; display: none;
        }
        .cb-suggestions.has-results { display: block; }
        .cb-suggestions button {
            display: block; width: 100%; text-align: left; padding: .55rem .75rem; border: 0; background: none;
            font-size: .82rem; border-bottom: 1px solid var(--bs-border-color-translucent, var(--hp-border));
        }
        .cb-suggestions button:last-child { border-bottom: 0; }
        .cb-suggestions button:hover { background: var(--hp-neutral); }

        .cb-map-wrap { position: relative; border-radius: .75rem; overflow: hidden; }
        #leaflet-map { width: 100%; height: 340px; background: var(--hp-neutral); }
        .cb-pin {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
            font-size: 2rem; line-height: 1; pointer-events: none; z-index: 500;
            filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
        }
        .cb-gps-btn {
            position: absolute; left: .75rem; bottom: .75rem; z-index: 500;
            background: var(--hp-surface); border: 1px solid var(--bs-border-color); border-radius: 999px;
            padding: .4rem .85rem; font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
        }
        .cb-deliver-card {
            border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .85rem;
            display: flex; align-items: flex-start; gap: .65rem; margin-top: .75rem;
        }

        .cb-label-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
        .cb-label-btn {
            display: flex; flex-direction: column; align-items: center; gap: .3rem;
            border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .25rem;
            font-size: .75rem; font-weight: 600; background: var(--hp-surface); color: var(--bs-body-color);
        }
        .cb-label-btn.is-active { border-color: var(--hp-primary); color: var(--hp-primary); background: var(--hp-primary-soft); }

        .cb-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin: 1rem 0 .5rem; }
        .cb-readonly { background: var(--hp-neutral); }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-3 px-lg-4 py-4" style="max-width: 42rem;">
        <div class="hp-flow-steps mb-4">
            <span class="is-active">Address</span>
            <span>Provider</span>
            <span>Confirm</span>
        </div>

        @if (session('status') === 'address-added')
            <div class="alert alert-success py-2">Address saved.</div>
        @elseif (session('status') === 'address-updated')
            <div class="alert alert-success py-2">Address updated.</div>
        @elseif (session('status') === 'address-removed')
            <div class="alert alert-secondary py-2">Address removed.</div>
        @endif

        <form method="POST" action="{{ route('customer.book.address.choose', $service) }}">
            @csrf

            <div class="card shadow-sm mb-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3 class="h6 fw-semibold mb-0">Where do you need this service?</h3>
                        @if ($addresses->isNotEmpty())
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modal-change-location">
                                + Add new
                            </button>
                        @endif
                    </div>

                    @forelse ($addresses as $address)
                        @php
                            $icon = match (strtolower($address->label)) {
                                'work' => '🏢',
                                'hotel' => '🏨',
                                'other' => '📍',
                                default => '🏠',
                            };
                        @endphp
                        <div class="cb-addr-card mb-2 {{ $selectedId == $address->id ? 'is-selected' : '' }}">
                            <div class="form-check d-flex gap-2">
                                <input class="form-check-input mt-2" type="radio" name="address_id"
                                    id="address-{{ $address->id }}" value="{{ $address->id }}"
                                    @checked($selectedId == $address->id)>
                                <span class="cb-addr-icon">{{ $icon }}</span>
                                <label class="form-check-label flex-grow-1" for="address-{{ $address->id }}">
                                    <span class="fw-semibold">
                                        {{ $address->label }}
                                        @if ($address->contact_name)
                                            <span class="text-muted fw-normal">&middot; {{ $address->contact_name }}</span>
                                        @endif
                                    </span>
                                    <span class="d-block small text-muted">{{ $address->full_line }}</span>
                                </label>
                            </div>

                            <div class="d-flex gap-3 mt-2 ps-5">
                                <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none"
                                    data-bs-toggle="collapse" data-bs-target="#edit-address-{{ $address->id }}">
                                    Edit
                                </button>
                                <button type="submit" form="delete-address-{{ $address->id }}"
                                    class="btn btn-link btn-sm p-0 text-decoration-none text-danger"
                                    onclick="return confirm('Remove this address?')">
                                    Delete
                                </button>
                            </div>

                            <div class="collapse mt-3 ps-5" id="edit-address-{{ $address->id }}">
                                <div class="row g-2">
                                    @include('customer.book._address-fields', [
                                        'address' => $address,
                                        'idPrefix' => 'edit'.$address->id.'_',
                                        'formId' => 'update-address-'.$address->id,
                                    ])
                                    <div class="col-12">
                                        <button type="submit" form="update-address-{{ $address->id }}"
                                            class="btn btn-sm btn-primary mt-1">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="hp-empty">
                            <span class="hp-empty-icon">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.1-7-11a7 7 0 1 1 14 0c0 4.9-7 11-7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>
                            </span>
                            <p class="mb-3 small">You don't have a saved address yet.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-change-location">
                                Add delivery address
                            </button>
                        </div>
                    @endforelse

                    <x-input-error :messages="$errors->get('address_id')" class="mb-2" />
                </div>
            </div>

            <button class="btn btn-primary w-100 btn-lg mb-4" @disabled($addresses->isEmpty())>
                Continue to providers
            </button>
        </form>

        {{-- Bare edit/delete forms; the fields and buttons above target these by id --}}
        @foreach ($addresses as $address)
            <form method="POST" action="{{ route('customer.addresses.update', $address) }}" id="update-address-{{ $address->id }}">
                @csrf
                @method('PATCH')
            </form>
            <form method="POST" action="{{ route('customer.addresses.destroy', $address) }}" id="delete-address-{{ $address->id }}">
                @csrf
                @method('DELETE')
            </form>
        @endforeach
    </div>

    {{-- Step 1: Change Location --}}
    <x-modal name="change-location" maxWidth="sm">
        <div class="modal-header">
            <h5 class="modal-title">Change Location</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <button type="button" id="cb-detect-btn" class="btn cb-loc-btn text-white w-100 py-2">
                &#128205; Detect my location
            </button>
            <div class="cb-divider">OR</div>
            <div class="cb-search-wrap">
                <input type="text" id="cb-change-search" class="form-control" placeholder="Search delivery location" autocomplete="off">
                <div class="cb-suggestions" id="cb-change-suggestions"></div>
            </div>
            <p class="small text-danger mt-2 mb-0 d-none" id="cb-detect-error"></p>
        </div>
    </x-modal>

    {{-- Step 2: Enter complete address --}}
    <div class="modal fade" id="modal-address-details" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-lg-down">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Enter complete address</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="cb-search-wrap mb-2">
                                <input type="text" id="cb-map-search" class="form-control" placeholder="Search for area, street, landmark…" autocomplete="off">
                                <div class="cb-suggestions" id="cb-map-suggestions"></div>
                            </div>

                            <div class="cb-map-wrap">
                                <div id="leaflet-map"></div>
                                <div class="cb-pin">📍</div>
                                <button type="button" id="cb-gps-btn" class="cb-gps-btn">
                                    &#8982; Go to current location
                                </button>
                            </div>

                            <div class="cb-deliver-card">
                                <span class="cb-addr-icon">📍</span>
                                <div>
                                    <p class="small fw-semibold mb-0">Delivering your order to</p>
                                    <p class="small text-muted mb-0" id="cb-deliver-readout">Move the map to locate your address</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <form method="POST" action="{{ route('customer.addresses.store') }}" id="new-address-form">
                                @csrf
                                <input type="hidden" name="latitude" id="add-lat">
                                <input type="hidden" name="longitude" id="add-lng">
                                <input type="hidden" name="address_line" id="add_address_line">
                                <input type="hidden" name="city" id="add_city">
                                <input type="hidden" name="state" id="add_state">
                                <input type="hidden" name="country" id="add_country" value="India">
                                <input type="hidden" name="pincode" id="add_pincode">
                                <input type="hidden" name="label" id="add_label" value="Home">

                                <p class="cb-section-title mt-0">Save address as *</p>
                                <div class="cb-label-group mb-3">
                                    <button type="button" class="cb-label-btn is-active" data-label="Home"><span>🏠</span>Home</button>
                                    <button type="button" class="cb-label-btn" data-label="Work"><span>🏢</span>Work</button>
                                    <button type="button" class="cb-label-btn" data-label="Hotel"><span>🏨</span>Hotel</button>
                                    <button type="button" class="cb-label-btn" data-label="Other"><span>📍</span>Other</button>
                                </div>

                                <div class="mb-3">
                                    <x-input-label for="add_flat_no" value="Flat / House no / Building name *" />
                                    <x-text-input id="add_flat_no" name="flat_no" required />
                                    <x-input-error :messages="$errors->get('flat_no')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label for="add_floor" value="Floor (optional)" />
                                    <x-text-input id="add_floor" name="floor" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Area / Sector / Locality *" />
                                    <input type="text" class="form-control cb-readonly" id="cb-locality-readout" readonly value="Move the map to locate your address">
                                </div>

                                <div class="mb-3">
                                    <x-input-label for="add_landmark" value="Nearby landmark (optional)" />
                                    <x-text-input id="add_landmark" name="landmark" />
                                </div>

                                <p class="cb-section-title">Enter your details for seamless delivery experience</p>

                                <div class="mb-3">
                                    <x-input-label for="add_contact_name" value="Your name *" />
                                    <x-text-input id="add_contact_name" name="contact_name" required :value="auth()->user()->name" />
                                </div>

                                <div class="mb-4">
                                    <x-input-label for="add_phone" value="Your phone number (optional)" />
                                    <x-text-input id="add_phone" name="phone" :value="auth()->user()->phone" />
                                </div>

                                <button type="submit" class="btn cb-loc-btn text-white w-100 py-2">Save Address</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            (function () {
                const FALLBACK_CENTER = [26.7606, 83.3732]; // Gorakhpur
                let map, changeModalEl, detailsModalEl, searchTimer, mapReady = false;

                function addressFromNominatim(a) {
                    return {
                        line: [a.road, a.suburb || a.neighbourhood].filter(Boolean).join(', '),
                        city: a.city || a.town || a.village || a.county || '',
                        state: a.state || '',
                        country: a.country || 'India',
                        pincode: a.postcode || '',
                    };
                }

                function applyAddress(parsed, label) {
                    document.getElementById('add_address_line').value = parsed.line;
                    document.getElementById('add_city').value = parsed.city;
                    document.getElementById('add_state').value = parsed.state;
                    document.getElementById('add_country').value = parsed.country || 'India';
                    document.getElementById('add_pincode').value = parsed.pincode;

                    const locality = [parsed.city, parsed.state].filter(Boolean).join(', ') || label;
                    document.getElementById('cb-locality-readout').value = locality || 'Unknown area';
                    document.getElementById('cb-deliver-readout').textContent = label || locality || 'Unknown area';
                }

                function setCoords(lat, lng) {
                    document.getElementById('add-lat').value = lat.toFixed(7);
                    document.getElementById('add-lng').value = lng.toFixed(7);
                }

                function reverseGeocode(lat, lng) {
                    fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}&addressdetails=1`)
                        .then((r) => r.json())
                        .then((data) => {
                            setCoords(lat, lng);
                            applyAddress(addressFromNominatim(data.address || {}), data.display_name);
                        })
                        .catch(() => {});
                }

                function ensureMap() {
                    if (mapReady) {
                        return;
                    }
                    map = L.map('leaflet-map', { zoomControl: true }).setView(FALLBACK_CENTER, 14);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; OpenStreetMap contributors',
                    }).addTo(map);
                    map.on('moveend', () => {
                        const c = map.getCenter();
                        reverseGeocode(c.lat, c.lng);
                    });
                    mapReady = true;
                }

                function openDetailsAt(lat, lng, zoom) {
                    detailsModalEl.addEventListener('shown.bs.modal', function onShown() {
                        detailsModalEl.removeEventListener('shown.bs.modal', onShown);
                        ensureMap();
                        map.invalidateSize();
                        map.setView([lat, lng], zoom || 16);
                    });
                    bootstrap.Modal.getOrCreateInstance(detailsModalEl).show();
                }

                function renderSuggestions(container, results, onPick) {
                    container.innerHTML = '';
                    if (!results.length) {
                        container.classList.remove('has-results');
                        return;
                    }
                    results.forEach((place) => {
                        const btn = document.createElement('button');
                        btn.type = 'button';
                        btn.textContent = place.display_name;
                        btn.addEventListener('click', () => onPick(place));
                        container.appendChild(btn);
                    });
                    container.classList.add('has-results');
                }

                function wireSearch(inputId, containerId, onPick) {
                    const input = document.getElementById(inputId);
                    const container = document.getElementById(containerId);

                    input.addEventListener('input', () => {
                        clearTimeout(searchTimer);
                        const q = input.value.trim();
                        if (q.length < 3) {
                            container.classList.remove('has-results');
                            return;
                        }
                        searchTimer = setTimeout(() => {
                            fetch(`https://nominatim.openstreetmap.org/search?format=jsonv2&addressdetails=1&countrycodes=in&limit=6&q=${encodeURIComponent(q)}`)
                                .then((r) => r.json())
                                .then((results) => renderSuggestions(container, results, onPick))
                                .catch(() => {});
                        }, 500);
                    });

                    document.addEventListener('click', (e) => {
                        if (!container.contains(e.target) && e.target !== input) {
                            container.classList.remove('has-results');
                        }
                    });
                }

                function detectLocation(onSuccess) {
                    const errorEl = document.getElementById('cb-detect-error');
                    if (errorEl) {
                        errorEl.classList.add('d-none');
                    }
                    if (!navigator.geolocation) {
                        if (errorEl) {
                            errorEl.textContent = 'Your browser does not support location detection.';
                            errorEl.classList.remove('d-none');
                        }
                        return;
                    }
                    navigator.geolocation.getCurrentPosition(
                        (pos) => onSuccess(pos.coords.latitude, pos.coords.longitude),
                        () => {
                            if (errorEl) {
                                errorEl.textContent = "Couldn't detect your location. Please allow location access or search instead.";
                                errorEl.classList.remove('d-none');
                            }
                        },
                        { enableHighAccuracy: true, timeout: 10000 }
                    );
                }

                document.addEventListener('DOMContentLoaded', () => {
                    changeModalEl = document.getElementById('modal-change-location');
                    detailsModalEl = document.getElementById('modal-address-details');

                    document.getElementById('cb-detect-btn').addEventListener('click', () => {
                        detectLocation((lat, lng) => {
                            changeModalEl.addEventListener('hidden.bs.modal', function onHidden() {
                                changeModalEl.removeEventListener('hidden.bs.modal', onHidden);
                                openDetailsAt(lat, lng, 16);
                            });
                            bootstrap.Modal.getOrCreateInstance(changeModalEl).hide();
                        });
                    });

                    document.getElementById('cb-gps-btn').addEventListener('click', () => {
                        detectLocation((lat, lng) => {
                            ensureMap();
                            map.setView([lat, lng], 16);
                        });
                    });

                    wireSearch('cb-change-search', 'cb-change-suggestions', (place) => {
                        changeModalEl.addEventListener('hidden.bs.modal', function onHidden() {
                            changeModalEl.removeEventListener('hidden.bs.modal', onHidden);
                            openDetailsAt(parseFloat(place.lat), parseFloat(place.lon), 16);
                        });
                        bootstrap.Modal.getOrCreateInstance(changeModalEl).hide();
                    });

                    wireSearch('cb-map-search', 'cb-map-suggestions', (place) => {
                        ensureMap();
                        map.setView([parseFloat(place.lat), parseFloat(place.lon)], 16);
                    });

                    document.querySelectorAll('.cb-label-btn').forEach((btn) => {
                        btn.addEventListener('click', () => {
                            document.querySelectorAll('.cb-label-btn').forEach((b) => b.classList.remove('is-active'));
                            btn.classList.add('is-active');
                            document.getElementById('add_label').value = btn.dataset.label;
                        });
                    });
                });
            })();
        </script>
    @endpush
@endsection