@csrf
<style>
    .login-toggle-pass {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        font-size: 14px;
        color: #6b7280;
    }

    .login-toggle-pass:hover {
        color: var(--green-500);
    }
</style>
<div class="row g-3">

    {{-- Informasi Akun --}}
    <div class="col-md-6">
        <label class="form-label">
            <i class="fas fa-user" style="color:var(--green-500); width:14px;"></i>
            Nama Lengkap <span style="color:var(--red-card)">*</span>
        </label>
        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
            value="{{ old('name', $user->name ?? '') }}" placeholder="Masukkan nama lengkap" required>
        @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">
            <i class="fas fa-envelope" style="color:var(--green-500); width:14px;"></i>
            Email <span style="color:var(--red-card)">*</span>
        </label>
        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
            value="{{ old('email', $user->email ?? '') }}" placeholder="contoh@email.com" required>
        @error('email')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">
            <i class="fas fa-shield-alt" style="color:var(--green-500); width:14px;"></i>
            Role <span style="color:var(--red-card)">*</span>
        </label>
        <select name="role" class="form-select @error('role') is-invalid @enderror" required>
            <option value="" disabled {{ old('role', $user->role ?? '') === '' ? 'selected' : '' }}>
                Pilih role...
            </option>
            <option value="admin" {{ old('role', $user->role ?? '') === 'admin' ? 'selected' : '' }}>
                Admin
            </option>
            <option value="pembeli" {{ old('role', $user->role ?? '') === 'pembeli' ? 'selected' : '' }}>
                Pembeli
            </option>
        </select>
        @error('role')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">
            <i class="fas fa-map-marker-alt" style="color:var(--green-500); width:14px;"></i>
            Alamat
        </label>
        <textarea name="alamat" class="form-control @error('alamat') is-invalid @enderror" rows="3"
            placeholder="Masukkan alamat lengkap (opsional)">{{ old('alamat', $user->alamat ?? '') }}</textarea>
        @error('alamat')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    {{-- Password — hanya tampil saat create --}}
    @if (!isset($user))
        <div class="col-12">
            <hr style="border-color:var(--border); margin:.25rem 0 .5rem;">
            <p
                style="font-size:.75rem; font-weight:700; text-transform:uppercase;
                      letter-spacing:1px; color:var(--text-light); margin-bottom:.75rem;">
                <i class="fas fa-lock me-1"></i> Keamanan Akun
            </p>
        </div>

        <div class="col-md-6">
            <label class="form-label">
                <i class="fas fa-key" style="color:var(--green-500); width:14px;"></i>
                Password <span style="color:var(--red-card)">*</span>
            </label>
            <div style="position:relative;">
                <input type="password" name="password" id="inputPassword"
                    class="form-control @error('password') is-invalid @enderror" placeholder="Minimal 8 karakter"
                    style="padding-right:2.6rem !important;" required>
                <button type="button" class="login-toggle-pass" onclick="togglePass('inputPassword', 'iconPass')">
                    <i class="fas fa-eye" id="iconPass"></i>
                </button>
            </div>
            @error('password')
                <div class="invalid-feedback" style="display:block;">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6">
            <label class="form-label">
                <i class="fas fa-key" style="color:var(--green-500); width:14px;"></i>
                Konfirmasi Password <span style="color:var(--red-card)">*</span>
            </label>
            <div style="position:relative;">
                <input type="password" name="password_confirmation" id="inputPasswordConfirm" class="form-control"
                    placeholder="Ulangi password" style="padding-right:2.6rem !important;" required>
                <button type="button" class="login-toggle-pass"
                    onclick="togglePass('inputPasswordConfirm', 'iconConfirm')">
                    <i class="fas fa-eye" id="iconConfirm"></i>
                </button>
            </div>
        </div>
    @endif

    <div class="col-12">
        <hr style="border-color:var(--border); margin:.25rem 0 .5rem;">
    </div>

    <div class="col-12 d-flex align-items-center gap-3">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i>
            {{ isset($user) ? 'Update Data' : 'Simpan Data' }}
        </button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
            <i class="fas fa-times me-1"></i> Batal
        </a>
    </div>

</div>

@once
    <script>
        function togglePass(inputId, iconId) {
            const input = document.getElementById(inputId);
            const icon = document.getElementById(iconId);
            const isPass = input.type === 'password';
            input.type = isPass ? 'text' : 'password';
            icon.classList.toggle('fa-eye', !isPass);
            icon.classList.toggle('fa-eye-slash', isPass);
        }
    </script>
@endonce