207 lines
12 KiB
PHP
207 lines
12 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>
|
|
|
|
@if($prefilledData)
|
|
<div class="alert alert-success border-0 shadow-sm d-flex align-items-center mb-4" role="alert">
|
|
<i class="bi bi-person-check-fill fs-4 me-3"></i>
|
|
<div>
|
|
Mendaftarkan user dari Data Induk: <strong>{{ $prefilledData->nama_pemilik }}</strong> ({{ $prefilledData->nomor_induk }})
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<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" id="formPengguna">
|
|
@csrf
|
|
|
|
<div class="mb-3">
|
|
<label for="role" class="form-label">Role <span class="text-danger">*</span></label>
|
|
@if($prefilledData)
|
|
<input type="hidden" name="role" value="{{ $prefilledData->role }}">
|
|
<select class="form-select @error('role') is-invalid @enderror" id="role" disabled>
|
|
<option value="siswa" {{ $prefilledData->role == 'siswa' ? 'selected' : '' }}>Siswa</option>
|
|
<option value="guru" {{ $prefilledData->role == 'guru' ? 'selected' : '' }}>Guru</option>
|
|
<option value="penjaga perpus" {{ $prefilledData->role == 'penjaga perpus' ? 'selected' : '' }}>Penjaga Perpustakaan</option>
|
|
</select>
|
|
@else
|
|
<select class="form-select @error('role') is-invalid @enderror" id="role" name="role"
|
|
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>
|
|
@endif
|
|
@error('role')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Bagian Form Dinamis --}}
|
|
<div id="dynamic-form" class="{{ ($prefilledData || old('role')) ? '' : 'd-none' }}">
|
|
|
|
<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', $prefilledData->nama_pemilik ?? '') }}"
|
|
{{ $prefilledData ? 'readonly' : '' }} 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>
|
|
@if($prefilledData)
|
|
<input type="hidden" name="nomor_induk" value="{{ $prefilledData->nomor_induk }}">
|
|
@endif
|
|
<input type="text" class="form-control @error('nomor_induk') is-invalid @enderror"
|
|
id="nomor_induk" name="{{ $prefilledData ? '' : 'nomor_induk' }}" value="{{ old('nomor_induk', $prefilledData->nomor_induk ?? '') }}"
|
|
placeholder="Masukkan Nomor Induk" {{ $prefilledData ? 'readonly' : '' }} 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') }}" 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">Nomor Telepon</label>
|
|
<input type="text" class="form-control @error('phone') is-invalid @enderror" id="no_hp" name="phone"
|
|
value="{{ old('phone') }}" placeholder="Contoh: 08123456789"
|
|
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="{{ ($prefilledData && $prefilledData->role == 'siswa') || old('role') == 'siswa' ? 'display: flex;' : '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') }}" placeholder="Contoh: XII RPL 1" 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') }}" placeholder="Contoh: A/B" 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 <span class="text-danger">*</span></label>
|
|
<div class="input-group has-validation">
|
|
<input type="password"
|
|
class="form-control @error('password') is-invalid @enderror" id="password"
|
|
name="password" required 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 <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="password_confirmation"
|
|
name="password_confirmation" required 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 Pengguna</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function toggleFields() {
|
|
const roleSelect = document.getElementById('role');
|
|
if (!roleSelect) return;
|
|
|
|
const role = roleSelect.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');
|
|
|
|
if (role) dynamicForm.classList.remove('d-none');
|
|
|
|
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> |