<x-app-layout>
    @section('title', 'Edit Pengguna')

    <div class="space-y-6">
        <!-- Breadcrumb -->
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1">
                <li>
                    <a href="{{ route('user-management.index') }}" class="text-[#7A7FAE] hover:text-[#4A538F]">Kelola Pengguna</a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-[#7A7FAE]" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="ml-1 text-[#2F347A] font-medium">Edit Pengguna</span>
                    </div>
                </li>
            </ol>
        </nav>

        <h1 class="text-2xl font-bold text-[#2F347A]">Edit Pengguna: {{ $user->name }}</h1>

        <form method="POST" action="{{ route('user-management.update', $user) }}">
            @csrf
            @method('PUT')

            <x-card class="p-6 mb-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Informasi Akun</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-form-input 
                        name="name" 
                        label="Nama Lengkap" 
                        placeholder="Masukkan nama lengkap"
                        :value="old('name', $user->name)"
                        :error="$errors->first('name')"
                        required />

                    <x-form-input 
                        name="email" 
                        label="Email" 
                        type="email"
                        placeholder="Masukkan email"
                        :value="old('email', $user->email)"
                        :error="$errors->first('email')"
                        required />

                    <x-form-input 
                        name="nip" 
                        label="NIP" 
                        placeholder="Masukkan NIP (opsional)"
                        :value="old('nip', $user->nip)"
                        :error="$errors->first('nip')" />

                    <x-form-input 
                        name="phone" 
                        label="No. Telepon" 
                        placeholder="Masukkan no. telepon (opsional)"
                        :value="old('phone', $user->phone)"
                        :error="$errors->first('phone')" />

                    <x-form-select 
                        name="gender" 
                        label="Jenis Kelamin"
                        :error="$errors->first('gender')">
                        <option value="">Pilih Jenis Kelamin</option>
                        <option value="L" {{ old('gender', $user->gender) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                        <option value="P" {{ old('gender', $user->gender) == 'P' ? 'selected' : '' }}>Perempuan</option>
                    </x-form-select>

                    <x-form-select 
                        name="role" 
                        label="Role"
                        :error="$errors->first('role')"
                        required>
                        <option value="">Pilih Role</option>
                        <option value="dokter" {{ old('role', $user->role) == 'dokter' ? 'selected' : '' }}>Dokter</option>
                        <option value="apoteker" {{ old('role', $user->role) == 'apoteker' ? 'selected' : '' }}>Apoteker</option>
                    </x-form-select>
                </div>
            </x-card>

            <x-card class="p-6 mb-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Password</h3>
                <p class="text-sm text-[#7A7FAE] mb-4">Kosongkan jika tidak ingin mengubah password.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <x-form-input 
                        name="password" 
                        label="Password Baru" 
                        type="password"
                        placeholder="Masukkan password baru"
                        :error="$errors->first('password')" />

                    <x-form-input 
                        name="password_confirmation" 
                        label="Konfirmasi Password Baru" 
                        type="password"
                        placeholder="Ulangi password baru" />
                </div>
            </x-card>

            <div class="flex justify-end gap-4">
                <x-btn type="secondary" href="{{ route('user-management.index') }}">Batal</x-btn>
                <x-btn type="primary">Simpan Perubahan</x-btn>
            </div>
        </form>
    </div>
</x-app-layout>
