<x-app-layout>

    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200">
            My Profile
        </h2>
    </x-slot>
    @php
        $address = $user->defaultAddress; 
        
        // Ambil nama wilayah dari ID yang ada di tabel addresses
        $province = $address ? \Laravolt\Indonesia\Models\Province::find($address->province_id) : null;
        $city = $address ? \Laravolt\Indonesia\Models\City::find($address->city_id) : null;
        $district = $address ? \Laravolt\Indonesia\Models\District::find($address->district_id) : null;
        $village = $address ? \Laravolt\Indonesia\Models\Village::find($address->village_id) : null;
    @endphp

    <div class="mt-6">
        <span class="font-medium">Alamat Lengkap (Utama)</span>
        <p class="mt-1 text-gray-700">
            {{ $address->address ?? 'Alamat belum diatur' }}
        </p>
    </div>

    <div class="py-12">

        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white dark:bg-gray-800 shadow rounded-xl p-8">


                {{-- ================= PROFILE HEADER ================= --}}
                <div class="flex items-center gap-6">

                    {{-- Avatar --}}
                    <img
                        src="{{ $user->avatar ? asset('storage/'.$user->avatar) : 'https://ui-avatars.com/api/?name='.urlencode($user->name).'&background=6366f1&color=fff&size=128' }}"
                        class="w-24 h-24 rounded-full shadow object-cover"
                    >

                    <div>

                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white">
                            {{ $user->name }}
                        </h3>

                        <p class="text-gray-500">
                            {{ $user->email }}
                        </p>

                        <p class="text-gray-500">
                            {{ $user->phone ?? '-' }}
                        </p>
                    </div>
                </div>


                {{-- ================= ADDRESS ================= --}}
                <hr class="my-6">


                <h4 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-200">
                    Alamat
                </h4>


                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-700 dark:text-gray-300">

                    <div>
                        <span class="font-medium">Provinsi</span><br>
                        {{ $province->name ?? '-' }}
                    </div>

                    <div>
                        <span class="font-medium">Kota / Kabupaten</span><br>
                        {{ $city->name ?? '-' }}
                    </div>

                    <div>
                        <span class="font-medium">Kecamatan</span><br>
                        {{ $district->name ?? '-' }}
                    </div>

                    <div>
                        <span class="font-medium">Kelurahan</span><br>
                        {{ $village->name ?? '-' }}
                    </div>
                </div>


                {{-- ================= FULL ADDRESS ================= --}}
                <div class="mt-6 text-gray-700 dark:text-gray-300">
                    <span class="font-medium">Alamat Lengkap</span>
                    <p class="mt-1">
                        {{ $user->address ?? '-' }}
                    </p>
                </div>


                {{-- ================= BUTTON ================= --}}
                <div class="mt-8 flex gap-3">
                    <a
                        href="{{ route('profile.edit') }}"
                        class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-lg">
                        Edit Profile
                    </a>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>