182 lines
9.7 KiB
PHP
182 lines
9.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">
|
|
<form action="{{ route('admin.pengguna.store') }}" method="POST">
|
|
@csrf
|
|
|
|
<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" required onchange="toggleFields()">
|
|
<option value="" selected disabled>Pilih role terlebih dahulu...</option>
|
|
<option value="siswa" {{ old('role') == 'siswa' ? 'selected' : '' }}>Siswa</option>
|
|
<option value="guru" {{ old('role') == 'guru' ? 'selected' : '' }}>Guru</option>
|
|
<option value="penjaga perpus" {{ old('role') == 'penjaga perpus' ? 'selected' : '' }}>
|
|
Penjaga Perpustakaan</option>
|
|
</select>
|
|
@error('role')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Bagian Form Dinamis --}}
|
|
<div id="dynamic-form" class="d-none">
|
|
|
|
{{-- Nama Lengkap --}}
|
|
<div class="mb-3">
|
|
<label for="nama_lengkap" class="form-label">Nama Lengkap</label>
|
|
<input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
|
|
id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap') }}" required>
|
|
</div>
|
|
|
|
{{-- Identitas Unik (NISN/NIP) --}}
|
|
<div class="mb-3">
|
|
<label for="nomor_induk" class="form-label" id="label_nomor_induk">NISN / NIP</label>
|
|
<input type="number" class="form-control @error('nomor_induk') is-invalid @enderror"
|
|
id="nomor_induk" name="nomor_induk" value="{{ old('nomor_induk') }}"
|
|
placeholder="Masukkan Nomor Induk">
|
|
@error('nomor_induk')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Kontak (Email & HP) --}}
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control @error('email') is-invalid @enderror"
|
|
id="email" name="email" value="{{ old('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" id="no_hp" name="no_hp"
|
|
value="{{ old('no_hp') }}" placeholder="Contoh: 08123456789">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Field Khusus Siswa (Kelas & Golongan) --}}
|
|
<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" id="kelas" name="kelas"
|
|
value="{{ old('kelas') }}" placeholder="Contoh: XII RPL 1">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="golongan" class="form-label">Golongan</label>
|
|
<input type="text" class="form-control" id="golongan" name="golongan"
|
|
value="{{ old('golongan') }}" placeholder="Contoh: A/B">
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
{{-- Keamanan (Password) --}}
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="password" class="form-label">
|
|
Password
|
|
</label>
|
|
<div class="input-group has-validation">
|
|
<input type="password"
|
|
class="form-control @error('password') is-invalid @enderror" id="password"
|
|
name="password">
|
|
<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</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="password_confirmation"
|
|
name="password_confirmation">
|
|
<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 Pengguna</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleFields() {
|
|
const role = document.getElementById('role').value;
|
|
const dynamicForm = document.getElementById('dynamic-form');
|
|
const labelInduk = document.getElementById('label_nomor_induk');
|
|
const inputInduk = document.getElementById('nomor_induk');
|
|
|
|
const fieldSiswaOnly = document.getElementById('field_siswa_only');
|
|
|
|
// Tampilkan form
|
|
if (role) {
|
|
dynamicForm.classList.remove('d-none');
|
|
}
|
|
|
|
// Atur Label & Field berdasarkan Role
|
|
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', function() {
|
|
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.remove('bi-eye');
|
|
icon.classList.add('bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('bi-eye-slash');
|
|
icon.classList.add('bi-eye');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</x-app-layout>
|