97 lines
5.7 KiB
PHP
97 lines
5.7 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 Tambah 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">
|
|
<div class="card-body">
|
|
<form action="{{ route('admin.pengguna.store') }}" method="POST">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<label for="nama_lengkap" class="form-label">Nama Lengkap</label>
|
|
<input type="text" name="nama_lengkap" class="form-control" id="nama_lengkap"
|
|
placeholder="Masukkan nama lengkap" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" name="email" class="form-control" id="email"
|
|
placeholder="Masukkan alamat email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Masukkan alamat email yang valid">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="nomor_induk" class="form-label">Nomor Induk (NISN/NUPTK)</label>
|
|
<input type="text" name="nomor_induk" class="form-control numeric-only" id="nomor_induk"
|
|
placeholder="Masukkan NISN atau NUPTK" inputmode="numeric">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="role" class="form-label">Role</label>
|
|
<select name="role" class="form-select" id="role" required>
|
|
<option value="" selected>Pilih role...</option>
|
|
<option value="siswa">Siswa</option>
|
|
<option value="guru">Guru</option>
|
|
<option value="penjaga perpus">Penjaga Perpus</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3" id="kelas-container" style="display: none;">
|
|
<label for="kelas" class="form-label">Kelas (jika siswa)</label>
|
|
<input type="text" name="kelas" class="form-control" id="kelas" placeholder="Contoh: X IPA 1">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="phone" class="form-label">Nomor HP</label>
|
|
<input type="text" name="phone" class="form-control numeric-only" id="phone" placeholder="Masukkan nomor HP" inputmode="numeric">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<input type="password" name="password" class="form-control" id="password" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="password_confirmation" class="form-label">Konfirmasi Password</label>
|
|
<input type="password" name="password_confirmation" class="form-control" id="password_confirmation" required>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary">Simpan Pengguna</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Numeric only input
|
|
document.querySelectorAll('.numeric-only').forEach(function(input) {
|
|
input.addEventListener('input', function(e) {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
});
|
|
});
|
|
|
|
// Dynamic Kelas Input
|
|
const roleSelect = document.getElementById('role');
|
|
const kelasContainer = document.getElementById('kelas-container');
|
|
|
|
function toggleKelas() {
|
|
if (roleSelect.value === 'siswa') {
|
|
kelasContainer.style.display = 'block';
|
|
} else {
|
|
kelasContainer.style.display = 'none';
|
|
document.getElementById('kelas').value = ''; // Reset value
|
|
}
|
|
}
|
|
|
|
roleSelect.addEventListener('change', toggleKelas);
|
|
toggleKelas(); // Run on load
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|