<form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
    @csrf
    @method('patch')

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Nama -->
        <div>
            <x-input-label for="name" value="Nama" class="text-[10px] font-black uppercase tracking-widest text-gray-400" />
            <x-text-input id="name" name="name" type="text" class="mt-2 block w-full rounded-xl border-gray-200 focus:border-green-700 focus:ring-green-700" :value="old('name', $user->name)" required />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>

        <!-- Email -->
        <div>
            <x-input-label for="email" value="Email" class="text-[10px] font-black uppercase tracking-widest text-gray-400" />
            <x-text-input id="email" name="email" type="email" class="mt-2 block w-full rounded-xl border-gray-200 focus:border-green-700 focus:ring-green-700" :value="old('email', $user->email)" required />
            <x-input-error class="mt-2" :messages="$errors->get('email')" />
        </div>

        <!-- Nomor HP -->
        <div>
            <x-input-label for="phone" value="Nomor HP" class="text-[10px] font-black uppercase tracking-widest text-gray-400" />
            <x-text-input id="phone" name="phone" type="text" class="mt-2 block w-full rounded-xl border-gray-200 focus:border-green-700 focus:ring-green-700" :value="old('phone', $user->phone)" />
            <x-input-error class="mt-2" :messages="$errors->get('phone')" />
        </div>

        <!-- Kota -->
        <div>
            <x-input-label for="city" value="Kota" class="text-[10px] font-black uppercase tracking-widest text-gray-400" />
            <x-text-input id="city" name="city" type="text" class="mt-2 block w-full rounded-xl border-gray-200 focus:border-green-700 focus:ring-green-700" :value="old('city', $user->city)" />
            <x-input-error class="mt-2" :messages="$errors->get('city')" />
        </div>
    </div>

    <!-- Kecamatan -->
    <div>
        <x-input-label for="district" value="Kecamatan" class="text-[10px] font-black uppercase tracking-widest text-gray-400" />
        <x-text-input id="district" name="district" type="text" class="mt-2 block w-full rounded-xl border-gray-200 focus:border-green-700 focus:ring-green-700" :value="old('district', $user->district)" placeholder="Contoh: Banjarbaru Utara" />
        <x-input-error class="mt-2" :messages="$errors->get('district')" />
    </div>

    <!-- Alamat Lengkap -->
    <div>
        <x-input-label for="address" value="Alamat Lengkap" class="text-[10px] font-black uppercase tracking-widest text-gray-400" />
        <x-text-input id="address" name="address" type="text" class="mt-2 block w-full rounded-xl border-gray-200 focus:border-green-700 focus:ring-green-700" :value="old('address', $user->address)" />
        <x-input-error class="mt-2" :messages="$errors->get('address')" />
    </div>

    <!-- Submit Section -->
    <div class="flex items-center gap-6 pt-4">
        <button type="submit" 
            class="bg-green-700 hover:bg-green-800 text-white font-black text-[10px] uppercase tracking-widest py-3 px-8 rounded-xl transition-all duration-200 shadow-lg shadow-green-200 active:scale-95">
            Simpan Perubahan
        </button>

        @if (session('status') === 'profile-updated')
            <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 2000)" 
               class="text-[10px] font-black uppercase tracking-widest text-green-600">
                Tersimpan.
            </p>
        @endif
    </div>
</form>