{{--
    This partial view is used by create.blade.php and edit.blade.php for Users.
    It expects:
    - $roles: Collection of roles (e.g., from Spatie/Laravel-Permission).
    - $user (optional): User model instance for edit mode.
--}}
<div class="space-y-6">
    {{-- 1. Nama --}}
    <div>
        <label for="name" class="block text-gray-700 font-bold ">Nama</label>
        <input type="text" name="name" id="name" 
               class="shadow-sm border border-gray-300 w-full py-2 px-3 text-gray-700 leading-tight 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 @error('name') border-red-500 @enderror" 
               value="{{ old('name', $user->name ?? '') }}" required>
        @error('name')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>

    {{-- 2. Email --}}
    <div>
        <label for="email" class="block text-gray-700 font-bold ">Email</label>
        <input type="email" name="email" id="email" 
               class="shadow-sm border border-gray-300 w-full py-2 px-3 text-gray-700 leading-tight 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 @error('email') border-red-500 @enderror" 
               value="{{ old('email', $user->email ?? '') }}" required>
        @error('email')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>

    {{-- 3. Password --}}
    <div>
        <label for="password" class="block text-gray-700 font-bold ">
            Password @if(isset($user)) (kosongkan jika tidak diubah) @endif
        </label>
        <input type="password" name="password" id="password" 
               class="shadow-sm border border-gray-300 w-full py-2 px-3 text-gray-700 leading-tight 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 @error('password') border-red-500 @enderror">
        @error('password')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>

    {{-- 4. Role --}}
    <div>
        <label for="role" class="block text-gray-700 font-bold ">Role</label>
        <select name="role" id="role" 
                class="shadow-sm border border-gray-300 w-full py-2 px-3 text-gray-700 leading-tight 
                       focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 @error('role') border-red-500 @enderror" 
                required>
            <option value="">Pilih Role</option>
            @foreach($roles as $role)
                @php
                    $isSelected = old('role') == $role->name || (isset($user) && $user->roles->pluck('name')->contains($role->name));
                @endphp
                <option value="{{ $role->name }}" {{ $isSelected ? 'selected' : '' }}>
                    {{ $role->name }}
                </option>
            @endforeach
        </select>
        @error('role')<p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>@enderror
    </div>
</div>