@extends('layouts.content')

@section('content')
    <div class="container py-4">
        {{-- Tombol Kembali di luar card, responsif --}}
        <div class="mb-3">
            <a href="{{ route('profile.index') }}?tab=address"
                class="btn btn-sm rounded-pill px-3 d-inline-flex align-items-center gap-1 border-0 bg-transparent text-secondary">
                <i class="bi bi-arrow-left"></i>
                <span>Kembali ke Profil</span>
            </a>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-8">


                @if ($errors->any())
                    <div class="alert alert-danger border-0 shadow-sm mb-4" style="border-radius: 10px;">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li class="small fw-medium">{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                    <div class="card-header bg-white border-0 pt-4 px-4">
                        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-pencil-square text-warning me-2"></i>Ubah Alamat
                        </h5>
                    </div>

                    <form action="{{ route('addresses.update', $address->address_id) }}" method="POST"
                        class="card-body p-4">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Label Alamat</label>
                                <select name="address_label" class="form-select" required>
                                    <option value="" disabled>Pilih Label Alamat</option>
                                    @php
                                        $label = old('address_label', $address->address_label);
                                        $standardLabels = ['Rumah', 'Kantor', 'Kosan'];
                                    @endphp
                                    <option value="Rumah" {{ $label == 'Rumah' ? 'selected' : '' }}>Rumah</option>
                                    <option value="Kantor" {{ $label == 'Kantor' ? 'selected' : '' }}>Kantor</option>
                                    <option value="Kosan" {{ $label == 'Kosan' ? 'selected' : '' }}>Kosan</option>
                                    @if ($label && !in_array($label, $standardLabels))
                                        <option value="{{ $label }}" selected>{{ $label }}</option>
                                    @endif
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Nama Penerima</label>
                                <input type="text" name="recipient_name" class="form-control"
                                    value="{{ old('recipient_name', $address->recipient_name) }}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Nomor Telepon Penerima</label>
                                <input type="tel" name="recipient_phone" class="form-control"
                                    value="{{ old('recipient_phone', $address->recipient_phone) }}" required
                                    data-validate="phone" placeholder="08xxxxxxxxxx">
                                <div class="form-text text-muted small">11–13 digit angka.</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Kode Pos</label>
                                <input type="text" name="postal_code" class="form-control"
                                    value="{{ old('postal_code', $address->postal_code) }}" required>
                            </div>

                            <!-- BAGIAN WILAYAH: DROPDOWN BERKASKADE -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Provinsi</label>
                                <select class="form-select no-tomselect" id="provinceSelect" required>
                                    <option value="">Pilih Provinsi</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Kota / Kabupaten</label>
                                <select class="form-select no-tomselect" id="citySelect" disabled required>
                                    <option value="">Pilih Kota/Kabupaten</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Kecamatan</label>
                                <select class="form-select no-tomselect" id="districtSelect" disabled required>
                                    <option value="">Pilih Kecamatan</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold small text-secondary">Desa / Kelurahan</label>
                                <select class="form-select no-tomselect" id="villageSelect" disabled required>
                                    <option value="">Pilih Desa/Kelurahan</option>
                                </select>
                            </div>

                            <!-- Hidden inputs untuk menyimpan ID dan Nama Wilayah -->
                            <input type="hidden" name="province" id="provinceName"
                                value="{{ old('province', $address->province) }}">
                            <input type="hidden" name="city" id="cityName" value="{{ old('city', $address->city) }}">
                            <input type="hidden" name="district" id="districtName"
                                value="{{ old('district', $address->district) }}">
                            <input type="hidden" name="village" id="villageName" value="{{ old('village', $address->village ?? $village) }}">
                            <!-- End hidden inputs -->

                            <div class="col-12">
                                <label class="form-label fw-semibold small text-secondary">Alamat Lengkap</label>
                                <textarea name="full_address" class="form-control" rows="3" required>{{ old('full_address', $cleanAddress) }}</textarea>
                            </div>

                            <div class="col-12 mt-4">
                                <div
                                    class="form-check form-switch p-3 bg-light rounded-3 d-flex align-items-center justify-content-between">
                                    <div class="ms-2">
                                        <label
                                            class="form-check-label {{ $address->is_primary ? 'text-success fw-bold' : 'fw-bold text-dark' }} d-block"
                                            for="isPrimaryCheck">
                                            {{ $address->is_primary ? 'Alamat Ini Adalah Alamat Utama' : 'Jadikan Alamat Utama' }}
                                        </label>
                                        <small class="text-muted">
                                            {{ $address->is_primary ? 'Alamat utama saat ini tidak bisa dinonaktifkan langsung.' : 'Alamat ini akan otomatis terpilih saat melakukan checkout belanja.' }}
                                        </small>
                                    </div>
                                    <input class="form-check-input fs-5 me-1" type="checkbox" name="is_primary"
                                        value="1" id="isPrimaryCheck"
                                        {{ old('is_primary', $address->is_primary) ? 'checked' : '' }}
                                        {{ $address->is_primary ? 'disabled' : '' }}>

                                    @if ($address->is_primary)
                                        <input type="hidden" name="is_primary" value="1">
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="text-end mt-4 pt-3 border-top">
                            <button type="submit"
                                class="btn btn-warning px-4 py-2 fw-medium rounded-pill text-white shadow-sm">
                                <i class="bi bi-save me-1"></i> Perbarui Alamat
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const provinceSelect = document.getElementById('provinceSelect');
        const citySelect = document.getElementById('citySelect');
        const districtSelect = document.getElementById('districtSelect');
        const villageSelect = document.getElementById('villageSelect');

        const provinceNameHidden = document.getElementById('provinceName');
        const cityNameHidden = document.getElementById('cityName');
        const districtNameHidden = document.getElementById('districtName');
        const villageNameHidden = document.getElementById('villageName');

        // Nilai awal yang tersimpan di database
        const initialProvinceName = "{{ old('province', $address->province) }}";
        const initialCityName = "{{ old('city', $address->city) }}";
        const initialDistrictName = "{{ old('district', $address->district) }}";
        const initialVillageName = "{{ old('village', $village) }}";

        let isInitializing = true;

        // Muat data provinsi
        function loadProvinces() {
            return fetch('/api/regions?type=provinces')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        provinceSelect.innerHTML = '<option value="">Pilih Provinsi</option>';
                        let selectedId = '';
                        data.data.forEach(province => {
                            const option = document.createElement('option');
                            option.value = province.id;
                            option.textContent = province.value;
                            if (isInitializing && province.value.trim().toUpperCase() === initialProvinceName
                                .trim().toUpperCase()) {
                                option.selected = true;
                                selectedId = province.id;
                            }
                            provinceSelect.appendChild(option);
                        });
                        if (window.syncTomSelect) window.syncTomSelect(provinceSelect);
                        if (isInitializing && selectedId) {
                            provinceSelect.value = selectedId;
                            return loadRegencies(selectedId);
                        }
                    }
                })
                .catch(error => console.error('Error loading provinces:', error));
        }

        // Muat data kota
        function loadRegencies(provinceId) {
            return fetch(`/api/regions?type=regencies&province_id=${provinceId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        citySelect.disabled = false;
                        citySelect.innerHTML = '<option value="">Pilih Kota/Kabupaten</option>';
                        let selectedId = '';
                        data.data.forEach(city => {
                            const option = document.createElement('option');
                            option.value = city.id;
                            option.textContent = city.value;
                            if (isInitializing && city.value.trim().toUpperCase() === initialCityName.trim()
                                .toUpperCase()) {
                                option.selected = true;
                                selectedId = city.id;
                            }
                            citySelect.appendChild(option);
                        });
                        if (window.syncTomSelect) window.syncTomSelect(citySelect);
                        if (isInitializing && selectedId) {
                            citySelect.value = selectedId;
                            return loadDistricts(provinceId, selectedId);
                        }
                    }
                })
                .catch(error => console.error('Error loading cities:', error));
        }

        // Muat data kecamatan
        function loadDistricts(provinceId, regencyId) {
            return fetch(`/api/regions?type=districts&province_id=${provinceId}&regency_id=${regencyId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        districtSelect.disabled = false;
                        districtSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
                        let selectedId = '';
                        data.data.forEach(district => {
                            const option = document.createElement('option');
                            option.value = district.id;
                            option.textContent = district.value;
                            if (isInitializing && district.value.trim().toUpperCase() === initialDistrictName
                                .trim().toUpperCase()) {
                                option.selected = true;
                                selectedId = district.id;
                            }
                            districtSelect.appendChild(option);
                        });
                        if (window.syncTomSelect) window.syncTomSelect(districtSelect);
                        if (isInitializing && selectedId) {
                            districtSelect.value = selectedId;
                            return loadVillages(provinceId, regencyId, selectedId);
                        }
                    }
                })
                .catch(error => console.error('Error loading districts:', error));
        }

        // Muat data desa
        function loadVillages(provinceId, regencyId, districtId) {
            return fetch(
                    `/api/regions?type=villages&province_id=${provinceId}&regency_id=${regencyId}&district_id=${districtId}`
                    )
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        villageSelect.disabled = false;
                        villageSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
                        let selectedId = '';
                        data.data.forEach(village => {
                            const option = document.createElement('option');
                            option.value = village.id;
                            option.textContent = village.value;
                            if (isInitializing && village.value.trim().toUpperCase() === initialVillageName
                                .trim().toUpperCase()) {
                                option.selected = true;
                                selectedId = village.id;
                            }
                            villageSelect.appendChild(option);
                        });
                        if (window.syncTomSelect) window.syncTomSelect(villageSelect);
                        if (isInitializing && selectedId) {
                            villageSelect.value = selectedId;
                        }
                    }
                })
                .then(() => {
                    isInitializing = false;
                })
                .catch(error => {
                    console.error('Error loading villages:', error);
                    isInitializing = false;
                });
        }

        // Event listener untuk perubahan provinsi
        provinceSelect.addEventListener('change', function() {
            isInitializing = false;
            const provinceId = this.value;
            const provinceName = this.options[this.selectedIndex]?.textContent;

            provinceNameHidden.value = provinceName || '';
            cityNameHidden.value = '';
            districtNameHidden.value = '';
            villageNameHidden.value = '';

            citySelect.innerHTML = '<option value="">Pilih Kota/Kabupaten</option>';
            districtSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
            villageSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
            citySelect.disabled = true;
            districtSelect.disabled = true;
            villageSelect.disabled = true;

            if (window.syncTomSelect) {
                window.syncTomSelect(citySelect);
                window.syncTomSelect(districtSelect);
                window.syncTomSelect(villageSelect);
            }

            if (provinceId) {
                loadRegencies(provinceId);
            }
        });

        // Event listener untuk perubahan kota
        citySelect.addEventListener('change', function() {
            isInitializing = false;
            const regencyId = this.value;
            const regencyName = this.options[this.selectedIndex]?.textContent;
            const provinceId = provinceSelect.value;

            cityNameHidden.value = regencyName || '';
            districtNameHidden.value = '';
            villageNameHidden.value = '';

            districtSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
            villageSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
            districtSelect.disabled = true;
            villageSelect.disabled = true;

            if (window.syncTomSelect) {
                window.syncTomSelect(districtSelect);
                window.syncTomSelect(villageSelect);
            }

            if (regencyId && provinceId) {
                loadDistricts(provinceId, regencyId);
            }
        });

        // Event listener untuk perubahan kecamatan
        districtSelect.addEventListener('change', function() {
            isInitializing = false;
            const districtId = this.value;
            const districtName = this.options[this.selectedIndex]?.textContent;
            const provinceId = provinceSelect.value;
            const regencyId = citySelect.value;

            districtNameHidden.value = districtName || '';
            villageNameHidden.value = '';

            villageSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
            villageSelect.disabled = true;

            if (window.syncTomSelect) {
                window.syncTomSelect(villageSelect);
            }

            if (districtId && regencyId && provinceId) {
                loadVillages(provinceId, regencyId, districtId);
            }
        });

        // Event listener untuk perubahan desa
        villageSelect.addEventListener('change', function() {
            const villageName = this.options[this.selectedIndex]?.textContent;
            villageNameHidden.value = villageName || '';
        });

        // Inisialisasi awal
        loadProvinces();
    </script>
@endpush