<section>

    {{-- ================= HEADER ================= --}}
    <header>
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            Profile Information
        </h2>

        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
            Update your account information.
        </p>
    </header>


    {{-- ================= FORM ================= --}}
    <form method="POST"
          action="{{ route('profile.update') }}"
          class="mt-6 space-y-6">

        @csrf
        @method('patch')

        @php
            $defAddr = $user->defaultAddress;
            $currPhone = old('phone', $defAddr->phone ?? $user->phone);
            $currAddress = old('address', $defAddr->address ?? $user->address);
            $currProvince = old('province', $defAddr->province ?? $user->province);
            $currCity = old('city', $defAddr->city ?? $user->city);
            $currDistrict = old('district', $defAddr->district ?? $user->district);
            $currVillage = old('village', $defAddr->village ?? $user->village);
        @endphp


        {{-- ================= NAME ================= --}}
        <div>
            <x-input-label for="name" value="Name" />

            <x-text-input
                id="name"
                name="name"
                type="text"
                class="mt-1 block w-full"
                :value="old('name', $user->name)"
                required
                autofocus
                autocomplete="name"
            />

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


        {{-- ================= EMAIL ================= --}}
        <div>
            <x-input-label for="email" value="Email" />

            <x-text-input
                id="email"
                name="email"
                type="email"
                class="mt-1 block w-full"
                :value="old('email', $user->email)"
                required
                autocomplete="username"
            />

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


        {{-- ================= PHONE ================= --}}
        <div>
            <x-input-label for="phone" value="Nomor HP" />

            <x-text-input
                id="phone"
                name="phone"
                type="text"
                class="mt-1 block w-full"
                :value="$currPhone"
                placeholder="08xxxxxxxxxx"
            />
        </div>


        {{-- ================= ADDRESS ================= --}}
        <div>
            <x-input-label for="address" value="Alamat Lengkap" />

            <textarea
                id="address"
                name="address"
                rows="3"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
            >{{ $currAddress }}</textarea>
        </div>


        {{-- ================= PROVINCE ================= --}}
        <div>
            <x-input-label for="province" value="Provinsi" />

            <select
                id="province"
                name="province"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
            >

                <option value="">Pilih Provinsi</option>

                @foreach(\Laravolt\Indonesia\Models\Province::all() as $province)

                    <option
                        value="{{ $province->code }}"
                        {{ $currProvince == $province->code ? 'selected' : '' }}
                    >

                        {{ $province->name }}

                    </option>

                @endforeach

            </select>
        </div>


        {{-- ================= CITY ================= --}}
        <div>
            <x-input-label for="city" value="Kota / Kabupaten" />

            <select
                id="city"
                name="city"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
            >
                <option value="">Pilih Kota</option>
                @if($currProvince)
                    @foreach(\Laravolt\Indonesia\Models\City::where('province_code', $currProvince)->get() as $c)
                        <option value="{{ $c->code }}" {{ $currCity == $c->code ? 'selected' : '' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                @endif
            </select>
        </div>


        {{-- ================= DISTRICT ================= --}}
        <div>
            <x-input-label for="district" value="Kecamatan" />

            <select
                id="district"
                name="district"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
            >
                <option value="">Pilih Kecamatan</option>
                @if($currCity)
                    @foreach(\Laravolt\Indonesia\Models\District::where('city_code', $currCity)->get() as $d)
                        <option value="{{ $d->code }}" {{ $currDistrict == $d->code ? 'selected' : '' }}>
                            {{ $d->name }}
                        </option>
                    @endforeach
                @endif
            </select>
        </div>


        {{-- ================= VILLAGE ================= --}}
        <div>
            <x-input-label for="village" value="Kelurahan" />

            <select
                id="village"
                name="village"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
            >
                <option value="">Pilih Kelurahan</option>
                @if($currDistrict)
                    @foreach(\Laravolt\Indonesia\Models\Village::where('district_code', $currDistrict)->get() as $v)
                        <option value="{{ $v->code }}" {{ $currVillage == $v->code ? 'selected' : '' }}>
                            {{ $v->name }}
                        </option>
                    @endforeach
                @endif
            </select>
        </div>


        {{-- ================= SAVE BUTTON ================= --}}
        <div class="flex items-center gap-4">

            <x-primary-button>
                Save
            </x-primary-button>

            @if (session('status') === 'profile-updated')

                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="text-sm text-gray-600 dark:text-gray-400"
                >
                    Saved.
                </p>

            @endif

        </div>

    </form>

</section>



{{-- ================= SCRIPT WILAYAH ================= --}}
<script>

document.getElementById('province').addEventListener('change', function () {

    let province = this.value

    fetch(`/api/wilayah/cities/${province}`)
        .then(res => res.json())
        .then(data => {

            let city = document.getElementById('city')

            city.innerHTML = '<option value="">Pilih Kota</option>'

            data.forEach(item => {

                city.innerHTML += `
                    <option value="${item.code}">
                        ${item.name}
                    </option>
                `

            })

        })

})


document.getElementById('city').addEventListener('change', function () {

    let city = this.value

    fetch(`/api/wilayah/districts/${city}`)
        .then(res => res.json())
        .then(data => {

            let district = document.getElementById('district')

            district.innerHTML = '<option value="">Pilih Kecamatan</option>'

            data.forEach(item => {

                district.innerHTML += `
                    <option value="${item.code}">
                        ${item.name}
                    </option>
                `

            })

        })

})


document.getElementById('district').addEventListener('change', function () {

    let district = this.value

    fetch(`/api/wilayah/villages/${district}`)
        .then(res => res.json())
        .then(data => {

            let village = document.getElementById('village')

            village.innerHTML = '<option value="">Pilih Kelurahan</option>'

            data.forEach(item => {

                village.innerHTML += `
                    <option value="${item.code}">
                        ${item.name}
                    </option>
                `

            })

        })

})

</script>