@extends('layouts.app')
@section('content')
    <section class="relative about-banner">
        <div
            class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] md:px-20 md:pt-[8rem] md:pb-[8rem] w-[90%] mx-auto rounded-3xl">
            <div class="container">
                <div class="md:flex md:items-center md:justify-center">
                    <h1 class="text-3xl md:text-6xl text-black font-extrabold relative max-[991px]:text-center">
                        Add New Address
                    </h1>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container mx-auto px-4 py-8">
            <div class="max-w-2xl mx-auto">
                <!-- Back Button -->
                <div class="mb-6">
                    <a href="{{ route('user.settings') }}" 
                       class="inline-flex items-center text-blue-600 hover:text-blue-800">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                        Back to Settings
                    </a>
                </div>

                <!-- Success/Error Messages -->
                @if($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                        <ul class="list-disc list-inside">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Address Form -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <form action="{{ route('user.addresses.store') }}" method="POST" id="addressForm">
                        @csrf
                        
                        <!-- Address Type -->
                        <div class="mb-6">
                            <label class="block font-medium text-md mb-2">Address Type</label>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                                    <input type="radio" name="type" value="billing" class="mr-3" required>
                                    <div>
                                        <div class="font-medium">Billing Address</div>
                                        <div class="text-sm text-gray-500">For payment processing</div>
                                    </div>
                                </label>
                                <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                                    <input type="radio" name="type" value="shipping" class="mr-3" required>
                                    <div>
                                        <div class="font-medium">Shipping Address</div>
                                        <div class="text-sm text-gray-500">For delivery</div>
                                    </div>
                                </label>
                                <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                                    <input type="radio" name="type" value="both" class="mr-3" required>
                                    <div>
                                        <div class="font-medium">Both</div>
                                        <div class="text-sm text-gray-500">For billing and shipping</div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- Address Search (OpenStreetMap Nominatim) -->
                        <div class="mb-6">
                            <label for="address_search" class="block font-medium text-md mb-2">
                                Search Address (Optional)
                            </label>
                            <div class="relative">
                                <input type="text" id="address_search" placeholder="Start typing your address..."
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                <div id="address_suggestions" class="absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg hidden max-h-60 overflow-y-auto"></div>
                            </div>
                          
                        </div>

                        <!-- Personal Information -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <div>
                                <label for="first_name" class="block font-medium text-md mb-1">First Name *</label>
                                <input type="text" id="first_name" name="first_name" placeholder="First Name"
                                       value="{{ old('first_name') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                       required>
                            </div>
                            <div>
                                <label for="last_name" class="block font-medium text-md mb-1">Last Name *</label>
                                <input type="text" id="last_name" name="last_name" placeholder="Last Name"
                                       value="{{ old('last_name') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                       required>
                            </div>
                        </div>

                        <!-- Company (Optional) -->
                        <div class="mb-6">
                            <label for="company" class="block font-medium text-md mb-1">Company (Optional)</label>
                            <input type="text" id="company" name="company" placeholder="Company Name"
                                   value="{{ old('company') }}"
                                   class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                        </div>

                        <!-- Address Fields -->
                        <div class="mb-6">
                            <label for="address_line_1" class="block font-medium text-md mb-1">Address Line 1 *</label>
                            <input type="text" id="address_line_1" name="address_line_1" placeholder="Street Address"
                                   value="{{ old('address_line_1') }}"
                                   class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                   required>
                        </div>

                        <div class="mb-6">
                            <label for="address_line_2" class="block font-medium text-md mb-1">Address Line 2 (Optional)</label>
                            <input type="text" id="address_line_2" name="address_line_2" placeholder="Apartment, suite, unit, etc."
                                   value="{{ old('address_line_2') }}"
                                   class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                            <div>
                                <label for="city" class="block font-medium text-md mb-1">City *</label>
                                <input type="text" id="city" name="city" placeholder="City"
                                       value="{{ old('city') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                       required>
                            </div>
                            <div>
                                <label for="state" class="block font-medium text-md mb-1">State *</label>
                                <input type="text" id="state" name="state" placeholder="State"
                                       value="{{ old('state') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                       required>
                            </div>
                            <div>
                                <label for="zip_code" class="block font-medium text-md mb-1">ZIP Code *</label>
                                <input type="text" id="zip_code" name="zip_code" placeholder="ZIP Code"
                                       value="{{ old('zip_code') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                       required>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <div>
                                <label for="phone" class="block font-medium text-md mb-1">Phone Number (Optional)</label>
                                <input type="tel" id="phone" name="phone" placeholder="Phone Number"
                                       value="{{ old('phone') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>
                            <div>
                                <label for="email" class="block font-medium text-md mb-1">Email (Optional)</label>
                                <input type="email" id="email" name="email" placeholder="Email Address"
                                       value="{{ old('email') }}"
                                       class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            </div>
                        </div>

                        <!-- Default Address Option -->
                        <div class="mb-6">
                            <label class="flex items-center">
                                <input type="checkbox" name="is_default" value="1" class="mr-3">
                                <span class="font-medium">Set as default address for this type</span>
                            </label>
                            <p class="text-sm text-gray-500 mt-1">This will make this address the default for billing/shipping based on the type selected above.</p>
                        </div>

                        <!-- Hidden fields for selected place data -->
                        <input type="hidden" id="google_place_id" name="google_place_id">
                        <input type="hidden" id="formatted_address" name="formatted_address">
                        <input type="hidden" id="latitude" name="latitude">
                        <input type="hidden" id="longitude" name="longitude">

                        <!-- Submit Button -->
                        <div class="flex justify-end gap-4">
                            <a href="{{ route('user.settings') }}" 
                               class="group px-4 py-2 border-solid border rounded-full border-secondary text-black bg-primary inline-flex items-center justify-center gap-2 hover:bg-secondary hover:text-white transition-all">
                                Cancel
                            </a>
                            <button type="submit" 
                                    class="group px-4 py-2 border-solid border rounded-full border-secondary text-white bg-secondary inline-flex items-center justify-center gap-2 hover:bg-primary hover:text-black transition-all">
                                Save Address
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const addressSearch = document.getElementById('address_search');
    const suggestions = document.getElementById('address_suggestions');
    let searchTimeout;

    // Nominatim search functionality
    addressSearch.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (query.length < 3) {
            suggestions.classList.add('hidden');
            suggestions.innerHTML = '';
            return;
        }

        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            searchPlaces(query);
        }, 300);
    });

    // Hide suggestions when clicking outside
    document.addEventListener('click', function(e) {
        if (!addressSearch.contains(e.target) && !suggestions.contains(e.target)) {
            suggestions.classList.add('hidden');
        }
    });

    function searchPlaces(query) {
        fetch('https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&limit=8&countrycodes=us&q=' + encodeURIComponent(query), {
            headers: {
                'Accept-Language': 'en'
            }
        })
            .then(response => response.json())
            .then(data => {
                displaySuggestions(data || []);
            })
            .catch(() => {
                suggestions.classList.add('hidden');
                suggestions.innerHTML = '';
            });
    }

    function displaySuggestions(places) {
        if (!places || places.length === 0) {
            suggestions.classList.add('hidden');
            suggestions.innerHTML = '';
            return;
        }

        suggestions.innerHTML = '';
        places.forEach(place => {
            const item = document.createElement('div');
            item.className = 'p-3 hover:bg-gray-100 cursor-pointer border-b border-gray-200 last:border-b-0';
            item.textContent = place.display_name;
            
            item.addEventListener('click', function() {
                selectPlace(place);
            });
            
            suggestions.appendChild(item);
        });
        
        suggestions.classList.remove('hidden');
    }

    function selectPlace(place) {
        const addr = place.address || {};
        const street = [addr.house_number, addr.road].filter(Boolean).join(' ');
        const city = addr.city || addr.town || addr.village || addr.hamlet || '';
        const state = addr.state || addr.region || addr.province || '';
        const postcode = addr.postcode || '';

        // Fill address fields directly
        document.getElementById('address_line_1').value = street || (place.name || '');
        document.getElementById('city').value = city;
        document.getElementById('state').value = state;
        document.getElementById('zip_code').value = postcode;

        // Store selected data
        document.getElementById('google_place_id').value = place.place_id || '';
        document.getElementById('formatted_address').value = place.display_name || '';
        document.getElementById('latitude').value = place.lat || '';
        document.getElementById('longitude').value = place.lon || '';

        // Update search box and hide list
        addressSearch.value = place.display_name || '';
        suggestions.classList.add('hidden');
    }

    // fillAddressFields no longer needed with direct Nominatim selection
});
</script>
@endpush