171 lines
11 KiB
PHP
171 lines
11 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Edit Guru BK')
|
|
|
|
@section('content')
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-maroon">✏️ Edit Akun Guru BK</h2>
|
|
<p class="text-sm text-gray-500 mt-1">{{ $guruBK->name }}</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.update', $guruBK->id) }}" method="POST" class="space-y-4" id="guruBKForm">
|
|
@csrf
|
|
@method('PUT')
|
|
<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', $guruBK->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" 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">{{ $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', $guruBK->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" 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">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">Password Baru <span class="text-gray-400 font-normal">(kosongkan jika tidak diubah, minimal 8 karakter)</span></label>
|
|
<div style="position: relative; display: flex; align-items: center;">
|
|
<input type="password" id="editGuruPassword" name="password" 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('editGuruPassword', 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">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">Konfirmasi Password Baru <span class="text-gray-400 text-xs">(harus sama)</span></label>
|
|
<div style="position: relative; display: flex; align-items: center;">
|
|
<input type="password" id="editGuruPasswordConfirm" name="password_confirmation" 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 baru" 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('editGuruPasswordConfirm', 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">
|
|
💾 Update
|
|
</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('editGuruPassword');
|
|
const passwordConfirm = document.getElementById('editGuruPasswordConfirm');
|
|
const submitButton = document.getElementById('submitButton');
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
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');
|
|
}
|
|
|
|
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');
|
|
}
|
|
|
|
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');
|
|
}
|
|
|
|
if (password.value.length > 0 || passwordConfirm.value.length > 0) {
|
|
if (password.value.length >= 8 && password.value === passwordConfirm.value) {
|
|
document.getElementById('confirmError').classList.add('hidden');
|
|
document.getElementById('confirmValid').classList.remove('hidden');
|
|
} else {
|
|
document.getElementById('confirmError').classList.remove('hidden');
|
|
document.getElementById('confirmValid').classList.add('hidden');
|
|
}
|
|
} else {
|
|
document.getElementById('confirmError').classList.add('hidden');
|
|
document.getElementById('confirmValid').classList.add('hidden');
|
|
}
|
|
|
|
const passwordValid = password.value === '' || (password.value.length >= 8 && password.value === passwordConfirm.value);
|
|
submitButton.disabled = !(name.value.trim().length >= 3 && emailRegex.test(email.value) && passwordValid);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
validateGuruBKForm();
|
|
});
|
|
</script>
|
|
@endsection
|
|
@endsection
|