@extends('layouts.main')

@section('title', 'Yeni Adres Ekle')

@section('content')
<div class="min-h-screen bg-[#b4bf9f] flex items-center">
    <div class="container mx-auto px-4 py-8 lg:mt-28">
        <div class="flex flex-wrap">
            @include('customer.partials.account-sidebar')

            <!-- Sağ İçerik -->
            <div class="w-full lg:w-3/4 lg:pl-6">
                <div class="bg-[#DBDBBC] rounded-xl shadow-lg p-8">
                    <div class="flex justify-between items-center mb-8">
                        <div>
                            <h1 class="text-3xl font-bold text-[#2C5530] mb-4">Yeni Adres Ekle</h1>
                            <div class="h-1 w-24 bg-[#2C5530] rounded"></div>
                        </div>
                    </div>

                    <form action="{{ route('customer.addresses.store') }}" method="POST" class="space-y-4">
                        @csrf
                        <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') }}"
                                       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">
                                @error('title')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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', $customer->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">
                                @error('first_name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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', $customer->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">
                                @error('last_name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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', $customer->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">
                                @error('phone')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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') == $city->id ? 'selected' : '' }}>
                                            {{ $city->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('city_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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>
                                @error('district_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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') }}</textarea>
                                @error('address')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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') }}"
                                       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">
                                @error('postal_code')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-center mt-4">
                            <input type="checkbox" name="is_default" id="is_default" 
                                   class="w-5 h-5 rounded border border-[#2C5530]/20 text-[#2C5530] 
                                          focus:ring-2 focus:ring-[#2C5530] focus:border-transparent
                                          transition duration-200 ease-in-out"
                                   {{ old('is_default') ? 'checked' : '' }}>
                            <label for="is_default" class="ml-2 text-sm font-medium text-[#2C5530]">Varsayılan adres olarak kaydet</label>
                            @error('is_default')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex justify-end space-x-4 mt-6">
                            <a href="{{ route('customer.addresses.index') }}"
                               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
                            </a>
                            <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>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const citySelect = document.getElementById('city_id');
    const districtSelect = document.getElementById('district_id');
    const currentDistrictId = '{{ old('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 seçili il varsa ilçeleri yükle
        if (citySelect.value) {
            citySelect.dispatchEvent(new Event('change'));
        }
    }
});
</script>
@endsection