@extends('layouts.empty')

@section('title', 'Adres Düzenle')

@section('content')

    <div class="min-h-screen px-4 py-8">
        <div class="relative w-full max-w-2xl mx-auto">
            <div class="relative bg-[#DBDBBC] shadow-xl rounded-2xl">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-2xl font-bold text-[#2C5530]">Adres Düzenle</h3>
                        <button onclick="closeEditAddressModal()" class="text-[#2C5530] hover:text-[#2C5530]/80">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form action="{{ route('customer.addresses.update', $address) }}" method="POST" class="space-y-4" id="editAddressForm">
                        @csrf
                        @method('PUT')
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="title" class="block text-sm font-medium text-[#2C5530] mb-2">Adres Başlığı</label>
                                <input type="text" name="title" id="title" required value="{{ old('title', $address->title) }}"
                                       class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                          focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                          transition duration-200 ease-in-out shadow-sm placeholder-gray-500">
                            </div>
                            <div>
                                <label for="first_name" class="block text-sm font-medium text-[#2C5530] mb-2">Ad</label>
                                <input type="text" name="first_name" id="first_name" required value="{{ old('first_name', $address->first_name) }}"
                                       class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                          focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                          transition duration-200 ease-in-out shadow-sm placeholder-gray-500">
                            </div>
                            <div>
                                <label for="last_name" class="block text-sm font-medium text-[#2C5530] mb-2">Soyad</label>
                                <input type="text" name="last_name" id="last_name" required value="{{ old('last_name', $address->last_name) }}"
                                       class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                          focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                          transition duration-200 ease-in-out shadow-sm placeholder-gray-500">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium text-[#2C5530] mb-2">Telefon</label>
                                <input type="tel" name="phone" id="phone" required value="{{ old('phone', $address->phone) }}"
                                       class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                          focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                          transition duration-200 ease-in-out shadow-sm placeholder-gray-500">
                            </div>
                            <div>
                                <label for="city_id" class="block text-sm font-medium text-[#2C5530] mb-2">İl</label>
                                <select name="city_id" id="city_id" required
                                        class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                           focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                           transition duration-200 ease-in-out shadow-sm">
                                    <option value="">İl Seçiniz</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->id }}" {{ old('city_id', $address->city_id) == $city->id ? 'selected' : '' }}>
                                            {{ $city->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="district_id" class="block text-sm font-medium text-[#2C5530] mb-2">İlçe</label>
                                <select name="district_id" id="district_id" required
                                        class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                           focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                           transition duration-200 ease-in-out shadow-sm">
                                    <option value="">Önce İl Seçiniz</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label for="address" class="block text-sm font-medium text-[#2C5530] mb-2">Açık Adres</label>
                                <textarea name="address" id="address" rows="3" required
                                          class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                             focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                             transition duration-200 ease-in-out shadow-sm placeholder-gray-500 resize-none">{{ old('address', $address->address) }}</textarea>
                            </div>
                            <div>
                                <label for="postal_code" class="block text-sm font-medium text-[#2C5530] mb-2">Posta Kodu</label>
                                <input type="text" name="postal_code" id="postal_code" value="{{ old('postal_code', $address->postal_code) }}"
                                       class="block w-full px-4 py-3 rounded-lg border border-[#2C5530]/20 bg-[#b4bf9f]/50
                                          focus:outline-none focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                          transition duration-200 ease-in-out shadow-sm placeholder-gray-500">
                            </div>
                        </div>

                        <div class="flex justify-end space-x-4 mt-6">
                            <button type="button" onclick="closeEditAddressModal()"
                                    class="px-6 py-3 border border-[#2C5530] text-[#2C5530] rounded-lg
                                       hover:bg-[#2C5530]/10 focus:outline-none focus:ring-2 focus:ring-[#2C5530]
                                       transition duration-200 ease-in-out shadow-sm">
                                İptal
                            </button>
                            <button type="submit"
                                    class="px-6 py-3 bg-[#2C5530] text-white rounded-lg border border-[#2C5530]
                                       hover:bg-[#2C5530]/90 focus:outline-none focus:ring-2 focus:ring-[#2C5530]
                                       transition duration-200 ease-in-out shadow-sm">
                                Kaydet
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const citySelect = document.getElementById('city_id');
            const districtSelect = document.getElementById('district_id');
            const currentDistrictId = '{{ old('district_id', $address->district_id) }}';

            if (citySelect) {
                citySelect.addEventListener('change', function() {
                    const cityId = this.value;
                    if (cityId) {
                        fetch(`/api/districts/${cityId}`)
                            .then(response => response.json())
                            .then(districts => {
                                districtSelect.innerHTML = '<option value="">İlçe Seçiniz</option>';
                                districts.forEach(district => {
                                    const option = new Option(district.name, district.id);
                                    if (district.id == currentDistrictId) {
                                        option.selected = true;
                                    }
                                    districtSelect.appendChild(option);
                                });
                            })
                            .catch(error => console.error('Error:', error));
                    } else {
                        districtSelect.innerHTML = '<option value="">Önce İl Seçiniz</option>';
                    }
                });

                // Sayfa yüklendiğinde mevcut ili seçili ise ilçeleri yükle
                if (citySelect.value) {
                    citySelect.dispatchEvent(new Event('change'));
                }
            }
        });

        document.getElementById('editAddressForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const form = this;
            const submitButton = form.querySelector('button[type="submit"]');
            const originalText = submitButton.textContent;

            // Disable submit button and show loading state
            submitButton.disabled = true;
            submitButton.innerHTML = `
        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        Kaydediliyor...
    `;

            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Show success message
                        const toast = document.createElement('div');
                        toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
                        toast.textContent = 'Adres başarıyla güncellendi';
                        document.body.appendChild(toast);

                        // Remove toast after 3 seconds
                        setTimeout(() => {
                            toast.remove();
                        }, 3000);

                        // Close modal and reload page
                        closeEditAddressModal();
                        window.location.reload();
                    } else {
                        // Re-enable submit button
                        submitButton.disabled = false;
                        submitButton.textContent = originalText;

                        // Show error message
                        const toast = document.createElement('div');
                        toast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
                        toast.textContent = data.message || 'Bir hata oluştu';
                        document.body.appendChild(toast);

                        // Remove toast after 3 seconds
                        setTimeout(() => {
                            toast.remove();
                        }, 3000);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);

                    // Re-enable submit button
                    submitButton.disabled = false;
                    submitButton.textContent = originalText;

                    // Show error message
                    const toast = document.createElement('div');
                    toast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
                    toast.textContent = 'Bir hata oluştu';
                    document.body.appendChild(toast);

                    // Remove toast after 3 seconds
                    setTimeout(() => {
                        toast.remove();
                    }, 3000);
                });
        });
    </script>
@endpush