181 lines
11 KiB
PHP
181 lines
11 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('title', 'Tambah Guru BK')
|
||
|
||
@section('content')
|
||
<div class="flex justify-between items-center mb-6">
|
||
<div>
|
||
<h2 class="text-2xl font-bold text-maroon">➕ Tambah Akun Guru BK</h2>
|
||
<p class="text-sm text-gray-500 mt-1">Buat akun baru untuk guru BK</p>
|
||
</div>
|
||
<a href="{{ route('admin.guru-bk') }}" class="bg-gray-400 text-white font-bold py-2 px-4 rounded-lg hover:bg-gray-500 transition text-sm">
|
||
← Kembali
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Error Summary Alert -->
|
||
@if($errors->any())
|
||
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<span class="text-red-600 text-xl">⚠️</span>
|
||
<span class="text-red-700 font-bold">Perbaiki kesalahan berikut:</span>
|
||
</div>
|
||
<ul class="text-red-600 text-sm space-y-1 ml-8">
|
||
@foreach($errors->all() as $error)
|
||
<li>• {{ $error }}</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="bg-white rounded-lg shadow p-6 max-w-2xl">
|
||
<form action="{{ route('admin.guru-bk.store') }}" method="POST" class="space-y-4" id="guruBKForm">
|
||
@csrf
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap * <span class="text-gray-400 text-xs">(minimal 3 karakter)</span></label>
|
||
<input type="text" name="name" required minlength="3" maxlength="255" value="{{ old('name') }}" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 transition @error('name') border-red-500 focus:ring-red-400 @else border-gray-300 focus:ring-maroon @enderror" placeholder="Nama guru BK" oninput="validateGuruBKForm()">
|
||
<div class="flex justify-between items-center mt-1">
|
||
<span id="nameError" class="text-red-500 text-xs hidden">⚠️ Nama minimal 3 karakter</span>
|
||
<span id="nameValid" class="text-green-500 text-xs hidden">✓ Nama valid</span>
|
||
</div>
|
||
@error('name') <span class="text-red-500 text-xs block mt-1">{{ $message }}</span> @enderror
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-2">Email * <span class="text-gray-400 text-xs">(format email valid)</span></label>
|
||
<input type="email" name="email" required value="{{ old('email') }}" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 transition @error('email') border-red-500 focus:ring-red-400 @else border-gray-300 focus:ring-maroon @enderror" placeholder="email@sekolah.id" oninput="validateGuruBKForm()">
|
||
<div class="flex justify-between items-center mt-1">
|
||
<span id="emailError" class="text-red-500 text-xs hidden">⚠️ Format email tidak valid</span>
|
||
<span id="emailValid" class="text-green-500 text-xs hidden">✓ Email valid</span>
|
||
</div>
|
||
@error('email') <span class="text-red-500 text-xs block mt-1">{{ $message }}</span> @enderror
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-2">Password * <span class="text-gray-400 text-xs">(minimal 8 karakter)</span></label>
|
||
<div style="position: relative; display: flex; align-items: center;">
|
||
<input type="password" id="guruBKPassword" name="password" required minlength="8" maxlength="255" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 transition @error('password') border-red-500 focus:ring-red-400 @else border-gray-300 focus:ring-blue-400 @enderror" placeholder="Minimal 8 karakter" style="padding-right: 45px;" oninput="validateGuruBKForm()">
|
||
<button type="button" style="position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: #5B7B89; font-size: 18px;" onclick="togglePasswordVisibility('guruBKPassword', this)">👁️</button>
|
||
</div>
|
||
<div id="passwordStrength" class="text-xs mt-1 font-medium hidden">
|
||
<span id="passwordStrengthText"></span>
|
||
</div>
|
||
@error('password') <span class="text-red-500 text-xs block mt-1">{{ $message }}</span> @enderror
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-gray-700 mb-2">Konfirmasi Password * <span class="text-gray-400 text-xs">(harus sama)</span></label>
|
||
<div style="position: relative; display: flex; align-items: center;">
|
||
<input type="password" id="guruBKPasswordConfirm" name="password_confirmation" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Ulangi password" style="padding-right: 45px;" oninput="validateGuruBKForm()">
|
||
<button type="button" style="position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: #5B7B89; font-size: 18px;" onclick="togglePasswordVisibility('guruBKPasswordConfirm', this)">👁️</button>
|
||
</div>
|
||
<div id="confirmError" class="text-red-500 text-xs hidden mt-1">⚠️ Password konfirmasi tidak cocok</div>
|
||
<div id="confirmValid" class="text-green-500 text-xs hidden mt-1">✓ Password cocok</div>
|
||
</div>
|
||
|
||
<div class="flex gap-4 pt-4">
|
||
<button type="submit" class="flex-1 gradient-maroon text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed" id="submitButton">
|
||
💾 Simpan
|
||
</button>
|
||
<a href="{{ route('admin.guru-bk') }}" class="flex-1 bg-gray-400 text-white font-bold py-3 px-4 rounded-lg hover:bg-gray-500 transition text-center">
|
||
Batal
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
@section('scripts')
|
||
<script>
|
||
function togglePasswordVisibility(inputId, buttonElement) {
|
||
const input = document.getElementById(inputId);
|
||
const isPassword = input.type === 'password';
|
||
input.type = isPassword ? 'text' : 'password';
|
||
}
|
||
|
||
function getPasswordStrength(password) {
|
||
let strength = 0;
|
||
if (password.length >= 8) strength++;
|
||
if (password.length >= 12) strength++;
|
||
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
||
if (/\d/.test(password)) strength++;
|
||
if (/[^a-zA-Z\d]/.test(password)) strength++;
|
||
|
||
if (strength <= 1) return { level: 'Lemah', color: 'text-red-500' };
|
||
if (strength <= 2) return { level: 'Sedang', color: 'text-yellow-500' };
|
||
if (strength <= 3) return { level: 'Baik', color: 'text-blue-500' };
|
||
return { level: 'Kuat', color: 'text-green-500' };
|
||
}
|
||
|
||
function validateGuruBKForm() {
|
||
const name = document.querySelector('input[name="name"]');
|
||
const email = document.querySelector('input[name="email"]');
|
||
const password = document.getElementById('guruBKPassword');
|
||
const passwordConfirm = document.getElementById('guruBKPasswordConfirm');
|
||
const submitButton = document.getElementById('submitButton');
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
|
||
// Validate name
|
||
if (name.value.trim().length >= 3) {
|
||
name.classList.remove('border-red-500', 'focus:ring-red-400');
|
||
name.classList.add('border-gray-300', 'focus:ring-maroon');
|
||
document.getElementById('nameError').classList.add('hidden');
|
||
document.getElementById('nameValid').classList.remove('hidden');
|
||
} else if (name.value.trim().length > 0) {
|
||
name.classList.remove('border-gray-300', 'focus:ring-maroon');
|
||
name.classList.add('border-red-500', 'focus:ring-red-400');
|
||
document.getElementById('nameError').classList.remove('hidden');
|
||
document.getElementById('nameValid').classList.add('hidden');
|
||
} else {
|
||
document.getElementById('nameError').classList.add('hidden');
|
||
document.getElementById('nameValid').classList.add('hidden');
|
||
}
|
||
|
||
// Validate email
|
||
if (!emailRegex.test(email.value)) {
|
||
email.classList.remove('border-gray-300', 'focus:ring-maroon');
|
||
email.classList.add('border-red-500', 'focus:ring-red-400');
|
||
document.getElementById('emailError').classList.remove('hidden');
|
||
document.getElementById('emailValid').classList.add('hidden');
|
||
} else {
|
||
email.classList.remove('border-red-500', 'focus:ring-red-400');
|
||
email.classList.add('border-gray-300', 'focus:ring-maroon');
|
||
document.getElementById('emailError').classList.add('hidden');
|
||
document.getElementById('emailValid').classList.remove('hidden');
|
||
}
|
||
|
||
// Show password strength
|
||
if (password.value.length > 0) {
|
||
const strength = getPasswordStrength(password.value);
|
||
document.getElementById('passwordStrengthText').textContent = `Kekuatan: ${strength.level}`;
|
||
document.getElementById('passwordStrengthText').className = strength.color;
|
||
document.getElementById('passwordStrength').classList.remove('hidden');
|
||
} else {
|
||
document.getElementById('passwordStrength').classList.add('hidden');
|
||
}
|
||
|
||
// Validate password confirmation
|
||
if (passwordConfirm.value.length > 0) {
|
||
if (password.value !== passwordConfirm.value) {
|
||
document.getElementById('confirmError').classList.remove('hidden');
|
||
document.getElementById('confirmValid').classList.add('hidden');
|
||
} else if (password.value.length >= 8) {
|
||
document.getElementById('confirmError').classList.add('hidden');
|
||
document.getElementById('confirmValid').classList.remove('hidden');
|
||
}
|
||
} else {
|
||
document.getElementById('confirmError').classList.add('hidden');
|
||
document.getElementById('confirmValid').classList.add('hidden');
|
||
}
|
||
|
||
// Enable/disable submit
|
||
const isValid = name.value.trim().length >= 3 &&
|
||
emailRegex.test(email.value) &&
|
||
password.value.length >= 8 &&
|
||
password.value === passwordConfirm.value;
|
||
submitButton.disabled = !isValid;
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
validateGuruBKForm();
|
||
});
|
||
</script>
|
||
@endsection
|
||
@endsection
|