@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