@extends(Auth::user()->int_role == 'superadmin' ? 'layouts.superadmin' : 'layouts.admin')

@section('title', 'Edit User')
@section('topbar_title', 'Kelola User')

@section('content')

<div class="page-header">
    <div class="page-header-left">
        <h1>Edit Pengguna</h1>
    </div>
    <a href="{{ url('/admin/user') }}" class="btn-outline">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
</div>

<div class="card" style="padding: 28px; max-width: 680px;">
    @if($errors->any())
        <div style="background:#fee2e2; border:1px solid #fca5a5; border-radius:8px; padding:12px 16px; margin-bottom:20px; font-size:13.5px; color:#dc2626;">
            <ul style="margin:0; padding-left:16px;">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ url('/admin/user/update/' . $user->id_user) }}" method="POST">
        @csrf

        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;">
            <div>
                <label class="form-label-styled">Nama Lengkap <span style="color:#ef4444;">*</span></label>
                <input type="text" name="nama_user" class="form-ctrl"
                    placeholder="Nama lengkap petugas"
                    value="{{ old('nama_user', $user->nama_user) }}" required>
            </div>
            <div>
                <label class="form-label-styled">No. HP <span style="color:#ef4444;">*</span></label>
                <input type="text" name="no_hp" class="form-ctrl"
                    placeholder="Contoh: 0812-3456-7890"
                    value="{{ old('no_hp', $user->no_hp) }}" required>
            </div>
        </div>

        <div style="margin-bottom:16px;">
            <label class="form-label-styled">Role / Jabatan <span style="color:#ef4444;">*</span></label>
            <div class="select-wrap">
                <select name="int_role" class="form-ctrl" required onchange="toggleWilayah(this.value)">
                    <option value="">— Pilih Jabatan —</option>
                    <option value="amil" {{ old('int_role', $user->int_role) == 'amil' ? 'selected' : '' }}>Amil Zakat</option>
                    <option value="rt"   {{ old('int_role', $user->int_role) == 'rt'   ? 'selected' : '' }}>Ketua RT</option>
                </select>
            </div>
        </div>

        <div id="wilayahField" style="margin-bottom:16px; display:{{ old('int_role', $user->int_role) == 'rt' ? 'block' : 'none' }};">
            <label class="form-label-styled">Wilayah RT yang Ditugaskan</label>
            <div class="select-wrap">
                <select name="id_wilayah" class="form-ctrl">
                    <option value="">— Pilih Wilayah —</option>
                    @foreach($wilayah as $w)
                        <option value="{{ $w->id_wilayah }}"
                            {{ old('id_wilayah', $user->id_wilayah) == $w->id_wilayah ? 'selected' : '' }}>
                            RT {{ $w->rt }} / RW {{ $w->rw }} — {{ $w->nama_wilayah }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div style="border-top:1px solid var(--border-color); margin:20px 0; padding-top:20px;">
            <div style="font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:14px; text-transform:uppercase; letter-spacing:.5px;">
                Akses Login Sistem
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;">
                <div>
                    <label class="form-label-styled">Username <span style="color:#ef4444;">*</span></label>
                    <input type="text" name="username" class="form-ctrl"
                        placeholder="Tanpa spasi, huruf kecil"
                        value="{{ old('username', $user->username) }}" required>
                    <span style="font-size:11px; color:#9ca3af; margin-top:4px; display:block;">
                        <i class="bi bi-info-circle"></i> Bebas, unik, dan mudah diingat. Tanpa spasi.
                    </span>
                </div>
                <div>
                    <label class="form-label-styled">Email <span style="color:#ef4444;">*</span></label>
                    <input type="email" name="email" class="form-ctrl"
                        placeholder="petugas@masjid.id"
                        value="{{ old('email', $user->email) }}" required>
                    <span style="font-size:11px; color:#9ca3af; margin-top:4px; display:block;">
                        <i class="bi bi-envelope"></i> Digunakan untuk login ke sistem.
                    </span>
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <div>
                    <label class="form-label-styled">
                        Password Baru
                        <span style="font-weight:400; color:#6b7280; font-size:11px;">(Kosongkan jika tidak ingin diubah)</span>
                    </label>
                    <div style="position:relative;">
                        <input type="password" name="password" id="inputPassword" class="form-ctrl"
                            placeholder="Isi untuk ganti password"
                            style="padding-right:42px;">
                        <button type="button" onclick="togglePass('inputPassword', 'togglePasswordIcon')"
                            style="position:absolute; right:10px; top:50%; transform:translateY(-50%);
                                   background:none; border:none; cursor:pointer; color:#6b7280; padding:4px;
                                   display:flex; align-items:center; font-size:16px;"
                            title="Tampilkan / Sembunyikan password">
                            <i class="bi bi-eye-slash" id="togglePasswordIcon"></i>
                        </button>
                    </div>
                    <span style="font-size:11px; color:#9ca3af; margin-top:4px; display:block;">
                        <i class="bi bi-shield-lock"></i> Password lama tetap berlaku jika kolom ini dikosongkan.
                    </span>
                </div>
                <div>
                    <label class="form-label-styled">
                        Konfirmasi Password Baru
                        <span style="font-weight:400; color:#6b7280; font-size:11px;">(Isi jika mengganti password)</span>
                    </label>
                    <div style="position:relative;">
                        <input type="password" name="password_confirmation" id="inputPasswordConfirm" class="form-ctrl"
                            placeholder="Ulangi password baru"
                            style="padding-right:42px;">
                        <button type="button" onclick="togglePass('inputPasswordConfirm', 'togglePasswordConfirmIcon')"
                            style="position:absolute; right:10px; top:50%; transform:translateY(-50%);
                                   background:none; border:none; cursor:pointer; color:#6b7280; padding:4px;
                                   display:flex; align-items:center; font-size:16px;"
                            title="Tampilkan / Sembunyikan password">
                            <i class="bi bi-eye-slash" id="togglePasswordConfirmIcon"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn-primary-green" style="width:100%; justify-content:center; padding:11px;">
            <i class="bi bi-check-lg"></i> Simpan Perubahan
        </button>
    </form>
</div>

@endsection

@push('scripts')
<script>
function toggleWilayah(val) {
    document.getElementById('wilayahField').style.display = val === 'rt' ? 'block' : 'none';
}

function togglePass(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    if (!input || !icon) return;
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    }
}
</script>
@endpush
