151 lines
9.5 KiB
PHP
151 lines
9.5 KiB
PHP
<x-app-layout>
|
|
@section('page-title', $pageTitle)
|
|
<div class="d-flex align-items-center mb-4">
|
|
<a href="{{ route('admin.pengguna.index') }}" class="btn btn-outline-secondary me-3">
|
|
<i class="bi bi-arrow-left"></i>
|
|
</a>
|
|
<h3 class="my-0 fw-bold">Formulir Edit Pengguna</h3>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-4">
|
|
<form action="{{ route('admin.pengguna.update', $pengguna->id) }}" method="POST" id="formEditPengguna">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
<div class="mb-3">
|
|
<label for="role" class="form-label">Role <span class="text-danger">*</span></label>
|
|
<select class="form-select @error('role') is-invalid @enderror" id="role" name="role" onchange="toggleFields()">
|
|
<option value="siswa" {{ old('role', $pengguna->role) == 'siswa' ? 'selected' : '' }}>Siswa</option>
|
|
<option value="guru" {{ old('role', $pengguna->role) == 'guru' ? 'selected' : '' }}>Guru</option>
|
|
<option value="penjaga perpus" {{ old('role', $pengguna->role) == 'penjaga perpus' ? 'selected' : '' }}>Penjaga Perpustakaan</option>
|
|
</select>
|
|
@error('role') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div id="dynamic-form">
|
|
<div class="mb-3">
|
|
<label for="nama_lengkap" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
|
|
id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap', $pengguna->name) }}"
|
|
required minlength="3" maxlength="50" pattern="[a-zA-Z\s.,'\']+">
|
|
@error('nama_lengkap') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="nomor_induk" class="form-label" id="label_nomor_induk">NISN / NIP <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control @error('nomor_induk') is-invalid @enderror"
|
|
id="nomor_induk" name="nomor_induk" value="{{ old('nomor_induk', $pengguna->nomor_induk) }}"
|
|
placeholder="Masukkan Nomor Induk" required maxlength="15">
|
|
@error('nomor_induk') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="email" class="form-label">Email <span class="text-danger">*</span></label>
|
|
<input type="email" class="form-control @error('email') is-invalid @enderror"
|
|
id="email" name="email" value="{{ old('email', $pengguna->email) }}" required>
|
|
@error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="no_hp" class="form-label">No. Handphone</label>
|
|
<input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone"
|
|
value="{{ old('phone', $pengguna->phone) }}"
|
|
minlength="13" maxlength="15" pattern="\+?[0-9]+">
|
|
@error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="field_siswa_only" style="display: none;">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="kelas" class="form-label">Kelas</label>
|
|
<input type="text" class="form-control @error('kelas') is-invalid @enderror" id="kelas" name="kelas" value="{{ old('kelas', $pengguna->kelas) }}" maxlength="50">
|
|
@error('kelas') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="golongan" class="form-label">Golongan</label>
|
|
<input type="text" class="form-control @error('golongan') is-invalid @enderror" id="golongan" name="golongan" value="{{ old('golongan', $pengguna->golongan) }}" maxlength="50">
|
|
@error('golongan') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="password" class="form-label">Password Baru <span class="small text-muted">(opsional)</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="Kosongkan jika tidak diubah" minlength="8">
|
|
<button class="btn btn-outline-secondary toggle-password" type="button" data-target="password">
|
|
<i class="bi bi-eye" id="icon-password"></i>
|
|
</button>
|
|
@error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="password_confirmation" class="form-label">Konfirmasi Password Baru</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Ulangi password baru" minlength="8">
|
|
<button class="btn btn-outline-secondary toggle-password" type="button" data-target="password_confirmation">
|
|
<i class="bi bi-eye" id="icon-password_confirmation"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end mt-3">
|
|
<button type="submit" class="btn btn-primary px-4">Simpan Perubahan</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function toggleFields() {
|
|
const role = document.getElementById('role').value;
|
|
const labelInduk = document.getElementById('label_nomor_induk');
|
|
const inputInduk = document.getElementById('nomor_induk');
|
|
const fieldSiswaOnly = document.getElementById('field_siswa_only');
|
|
|
|
if (role === 'siswa') {
|
|
labelInduk.innerHTML = 'NISN <span class="text-danger">*</span>';
|
|
inputInduk.placeholder = 'Masukkan NISN Siswa';
|
|
fieldSiswaOnly.style.display = 'flex';
|
|
} else if (role === 'guru') {
|
|
labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
|
|
inputInduk.placeholder = 'Masukkan NIP/NIK Guru';
|
|
fieldSiswaOnly.style.display = 'none';
|
|
} else if (role === 'penjaga perpus') {
|
|
labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
|
|
inputInduk.placeholder = 'Masukkan NIP/NIK Petugas';
|
|
fieldSiswaOnly.style.display = 'none';
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', toggleFields);
|
|
|
|
document.querySelectorAll('.toggle-password').forEach(function(button) {
|
|
button.addEventListener('click', function() {
|
|
const targetId = this.getAttribute('data-target');
|
|
const input = document.getElementById(targetId);
|
|
const icon = document.getElementById('icon-' + targetId);
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form submission listener removed to allow server-side validation
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |