{{-- ================= GLOBAL PASSWORD MODAL (GURU) ================= --}}
<div
    x-cloak
    x-show="showPasswordModal"
    x-transition.opacity
    class="fixed inset-0 z-[9999] flex items-center justify-center p-3 sm:p-4 md:p-6"
>

    {{-- BACKDROP --}}
    <div
        class="absolute inset-0 bg-slate-950/70 backdrop-blur-md"
        @click="closePassword()"
    ></div>

    {{-- MODAL CONTENT --}}
    <div
        class="relative w-full max-w-5xl mx-auto max-h-[95vh] overflow-y-auto rounded-3xl"
        @click.stop
    >
        {{-- CARD WRAPPER --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 shadow-2xl rounded-3xl overflow-hidden">

            {{-- ======================================================= --}}
            {{-- ================= KOLOM KIRI: PASSWORD ================= --}}
            {{-- ======================================================= --}}
            <div class="relative bg-white p-6 sm:p-8 flex flex-col gap-6">

                {{-- Dekorasi pojok --}}
                <div class="absolute top-0 left-0 w-40 h-40 bg-gradient-to-br from-indigo-50 to-transparent rounded-br-full pointer-events-none"></div>

                {{-- Header --}}
                <div class="relative flex flex-col items-center text-center gap-2 pb-4 border-b border-slate-100">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-600 to-violet-600
                                flex items-center justify-center shadow-lg shadow-indigo-200 mb-1">
                        <i class="ph ph-key text-2xl text-white"></i>
                    </div>
                    <h1 class="text-xl sm:text-2xl font-bold text-slate-800">Ganti Password</h1>
                    <p class="text-xs text-slate-400">Pastikan password baru kamu kuat & unik</p>
                </div>

                {{-- ERROR PASSWORD --}}
                <div id="passwordError"
                     class="hidden flex items-center gap-2 bg-red-50 border border-red-200
                            text-red-600 text-sm rounded-xl px-4 py-3">
                    <i class="ph ph-warning-circle text-base shrink-0"></i>
                    <span id="passwordErrorText"></span>
                </div>

                <form id="guruPasswordForm" class="flex flex-col gap-4">
                    @csrf

                    {{-- Password Lama --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Password Lama
                        </label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                                <i class="ph ph-lock-simple text-base"></i>
                            </span>
                            <input
                                type="password"
                                name="current_password"
                                placeholder="Masukkan password lama"
                                class="w-full border border-slate-200 bg-slate-50 focus:bg-white
                                       focus:border-indigo-400 focus:ring-4 focus:ring-indigo-50
                                       rounded-xl pl-10 pr-4 py-3 text-sm outline-none transition-all"
                                required
                            >
                        </div>
                    </div>

                    {{-- Password Baru --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Password Baru
                        </label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                                <i class="ph ph-lock-key text-base"></i>
                            </span>
                            <input
                                type="password"
                                id="newPassword"
                                name="password"
                                placeholder="Buat password baru"
                                class="w-full border border-slate-200 bg-slate-50 focus:bg-white
                                       focus:border-indigo-400 focus:ring-4 focus:ring-indigo-50
                                       rounded-xl pl-10 pr-4 py-3 text-sm outline-none transition-all"
                                required
                            >
                        </div>

                        {{-- Strength Bar --}}
                        <div class="mt-1 space-y-1.5">
                            <div class="flex gap-1 h-1.5">
                                <div id="bar1" class="flex-1 rounded-full bg-slate-200 transition-all duration-300"></div>
                                <div id="bar2" class="flex-1 rounded-full bg-slate-200 transition-all duration-300"></div>
                                <div id="bar3" class="flex-1 rounded-full bg-slate-200 transition-all duration-300"></div>
                                <div id="bar4" class="flex-1 rounded-full bg-slate-200 transition-all duration-300"></div>
                            </div>
                            <p id="passwordStrength" class="text-xs font-semibold text-slate-400">
                                Kekuatan password: —
                            </p>
                        </div>
                    </div>

                    {{-- Konfirmasi --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Konfirmasi Password Baru
                        </label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                                <i class="ph ph-check-circle text-base"></i>
                            </span>
                            <input
                                type="password"
                                name="password_confirmation"
                                placeholder="Ulangi password baru"
                                class="w-full border border-slate-200 bg-slate-50 focus:bg-white
                                       focus:border-indigo-400 focus:ring-4 focus:ring-indigo-50
                                       rounded-xl pl-10 pr-4 py-3 text-sm outline-none transition-all"
                                required
                            >
                        </div>
                    </div>
                </form>

                {{-- Tips --}}
                <div class="bg-indigo-50 border border-indigo-100 rounded-2xl px-4 py-3 text-xs text-indigo-600 space-y-1">
                    <p class="font-semibold mb-1 flex items-center gap-1.5">
                        <i class="ph ph-shield-check"></i> Tips Password Kuat
                    </p>
                    <p>✓ Minimal 8 karakter</p>
                    <p>✓ Kombinasi huruf besar & angka</p>
                    <p>✓ Gunakan simbol (!@#$%)</p>
                </div>
            </div>

            {{-- ========================================================= --}}
            {{-- ================= KOLOM KANAN: EMAIL OTP ================= --}}
            {{-- ========================================================= --}}
            <div class="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900
                        p-6 sm:p-8 flex flex-col gap-6">

                {{-- Dekorasi --}}
                <div class="absolute top-0 right-0 w-56 h-56 bg-violet-500/10 rounded-full blur-3xl pointer-events-none"></div>
                <div class="absolute bottom-0 left-0 w-40 h-40 bg-indigo-500/10 rounded-full blur-2xl pointer-events-none"></div>

                {{-- Tombol Tutup --}}
                <button @click="closePassword()"
                        class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center
                               text-slate-400 hover:text-white hover:bg-white/10 rounded-full transition z-10">
                    <i class="ph ph-x text-lg"></i>
                </button>

                {{-- Header --}}
                <div class="relative flex flex-col items-center text-center gap-2 pb-4 border-b border-white/10">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600
                                flex items-center justify-center shadow-lg shadow-violet-900/50 mb-1">
                        <i class="ph ph-envelope-simple text-2xl text-white"></i>
                    </div>
                    <h2 class="text-xl sm:text-2xl font-bold text-white">Verifikasi Email</h2>
                    <p class="text-xs text-slate-400">OTP dikirim ke email untuk konfirmasi perubahan</p>
                </div>

                {{-- Step 1: Email --}}
                <div class="relative flex flex-col gap-3">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-6 h-6 rounded-full bg-violet-500/20 border border-violet-500/40
                                     text-violet-400 text-xs font-bold flex items-center justify-center">1</span>
                        <label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">
                            Email Aktif
                        </label>
                    </div>

                    <div class="flex gap-2">
                        <div class="relative flex-1">
                            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">
                                <i class="ph ph-at text-base"></i>
                            </span>
                            <input
                                type="email"
                                id="emailInput"
                                placeholder="contoh@email.com"
                                class="w-full bg-white/5 border border-white/10 hover:border-white/20
                                       focus:border-violet-500 focus:ring-4 focus:ring-violet-500/20
                                       text-white placeholder-slate-500 rounded-xl pl-10 pr-4 py-3
                                       text-sm outline-none transition-all"
                                required
                            >
                        </div>
                        <button
                            type="button"
                            id="sendOtpBtn"
                            class="shrink-0 bg-violet-600 hover:bg-violet-500 active:scale-95
                                   text-white text-sm font-semibold px-4 py-3 rounded-xl
                                   transition-all shadow-lg shadow-violet-900/40">
                            Kirim OTP
                        </button>
                    </div>

                    <div id="emailStatus" class="text-xs min-h-[18px]"></div>
                </div>

                {{-- Divider --}}
                <div class="border-t border-white/5"></div>

                {{-- Step 2: OTP --}}
                <div id="otpSection" class="flex flex-col gap-3 transition-all duration-300 opacity-40 pointer-events-none">

                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-6 h-6 rounded-full bg-indigo-500/20 border border-indigo-500/40
                                     text-indigo-400 text-xs font-bold flex items-center justify-center">2</span>
                        <label class="text-xs font-semibold text-slate-300 uppercase tracking-wider">
                            Masukkan Kode OTP
                        </label>
                    </div>

                    {{-- OTP Boxes --}}
                    <div class="flex gap-2">
                        <input
                            type="text"
                            id="otpInput"
                            maxlength="6"
                            placeholder="• • • • • •"
                            class="flex-1 bg-white/5 border border-white/10 hover:border-white/20
                                   focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/20
                                   text-white placeholder-slate-600 text-center text-xl font-bold
                                   tracking-[0.5em] rounded-xl px-4 py-3 outline-none transition-all"
                        >
                        <button
                            type="button"
                            id="verifyOtpBtn"
                            class="shrink-0 bg-slate-700 text-slate-400 text-sm font-semibold
                                   px-4 py-3 rounded-xl cursor-not-allowed transition-all"
                            disabled>
                            Verifikasi
                        </button>
                    </div>

                    <div id="otpStatus" class="text-xs min-h-[18px]"></div>

                    <div class="flex items-center gap-2 bg-white/5 border border-white/8 rounded-xl px-4 py-3">
                        <i class="ph ph-clock text-slate-400 text-base shrink-0"></i>
                        <p class="text-xs text-slate-400">
                            OTP berlaku selama <span class="font-semibold text-slate-300">10 menit</span>.
                            Cek folder <span class="font-semibold text-slate-300">Spam</span> jika tidak masuk.
                        </p>
                    </div>
                </div>

                {{-- Progress visual --}}
                <div class="mt-auto pt-4 border-t border-white/5">
                    <div class="flex items-center gap-3">
                        <div class="flex-1 h-1 rounded-full bg-white/10">
                            <div id="progressBar" class="h-1 rounded-full bg-gradient-to-r from-violet-500 to-indigo-500
                                                          transition-all duration-500 w-0"></div>
                        </div>
                        <span id="progressText" class="text-[10px] text-slate-500 whitespace-nowrap">0 / 2 langkah</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

{{-- ================= SCRIPT ================= --}}
<script>
document.addEventListener('DOMContentLoaded', () => {

    const emailInput    = document.getElementById('emailInput');
    const otpInput      = document.getElementById('otpInput');
    const sendOtpBtn    = document.getElementById('sendOtpBtn');
    const verifyOtpBtn  = document.getElementById('verifyOtpBtn');
    const emailStatus   = document.getElementById('emailStatus');
    const otpStatus     = document.getElementById('otpStatus');
    const otpSection    = document.getElementById('otpSection');
    const passwordForm  = document.getElementById('guruPasswordForm');
    const passwordError = document.getElementById('passwordError');
    const passwordErrorText = document.getElementById('passwordErrorText');
    const passwordInput = document.getElementById('newPassword');
    const passwordStrength = document.getElementById('passwordStrength');
    const progressBar   = document.getElementById('progressBar');
    const progressText  = document.getElementById('progressText');

    let step = 0;
    const setProgress = (s) => {
        step = s;
        progressBar.style.width = (s / 2 * 100) + '%';
        progressText.textContent = s + ' / 2 langkah';
    };

    // ================= PASSWORD STRENGTH =================
    passwordInput.addEventListener('input', () => {
        const value = passwordInput.value;
        const bars  = [
            document.getElementById('bar1'),
            document.getElementById('bar2'),
            document.getElementById('bar3'),
            document.getElementById('bar4'),
        ];

        const hasSymbol = /[!@#$%^&*()]/.test(value);
        const hasNumber = /[0-9]/.test(value);
        const hasUpper  = /[A-Z]/.test(value);
        const minLength = value.length >= 8;

        bars.forEach(b => { b.className = 'flex-1 rounded-full bg-slate-200 transition-all duration-300'; });

        if (!value.length) {
            passwordStrength.textContent = 'Kekuatan password: —';
            passwordStrength.className = 'text-xs font-semibold text-slate-400';
            return;
        }

        if (minLength && hasSymbol && hasNumber && hasUpper) {
            bars.forEach(b => b.classList.add('bg-green-500'));
            passwordStrength.textContent = 'Kekuatan password: KUAT 💪';
            passwordStrength.className = 'text-xs font-semibold text-green-600';
        } else if (minLength && (hasNumber || hasUpper)) {
            [bars[0],bars[1],bars[2]].forEach(b => b.classList.add('bg-yellow-400'));
            passwordStrength.textContent = 'Kekuatan password: SEDANG ⚠️';
            passwordStrength.className = 'text-xs font-semibold text-yellow-500';
        } else {
            bars[0].classList.add('bg-red-500');
            passwordStrength.textContent = 'Kekuatan password: LEMAH ❌';
            passwordStrength.className = 'text-xs font-semibold text-red-500';
        }
    });

    // ================= SEND OTP =================
    sendOtpBtn.onclick = async () => {
        emailStatus.innerHTML = '<span class="text-slate-400">⏳ Mengirim OTP...</span>';
        sendOtpBtn.disabled = true;
        sendOtpBtn.textContent = '...';
        otpSection.classList.add('opacity-40','pointer-events-none');

        const res = await fetch("{{ route('guru.email.send') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: emailInput.value })
        });

        const data = await res.json();
        sendOtpBtn.disabled = false;
        sendOtpBtn.textContent = 'Kirim OTP';

        if (res.ok) {
            emailStatus.innerHTML = '<span class="text-green-400">✓ OTP berhasil dikirim ke email</span>';
            otpSection.classList.remove('opacity-40','pointer-events-none');
            setProgress(1);
        } else {
            emailStatus.innerHTML = `<span class="text-red-400">✗ ${data.message}</span>`;
        }
    };

    // ================= ENABLE VERIFY =================
    otpInput.oninput = () => {
        if (otpInput.value.length === 6) {
            verifyOtpBtn.disabled = false;
            verifyOtpBtn.className = 'shrink-0 bg-gradient-to-r from-violet-600 to-indigo-600 ' +
                'hover:from-violet-500 hover:to-indigo-500 active:scale-95 text-white ' +
                'text-sm font-semibold px-4 py-3 rounded-xl transition-all shadow-lg ' +
                'shadow-indigo-900/40 cursor-pointer';
        } else {
            verifyOtpBtn.disabled = true;
            verifyOtpBtn.className = 'shrink-0 bg-slate-700 text-slate-400 text-sm ' +
                'font-semibold px-4 py-3 rounded-xl cursor-not-allowed transition-all';
        }
    };

    // ================= VERIFY OTP =================
    verifyOtpBtn.onclick = async () => {
        otpStatus.innerHTML = '<span class="text-slate-400">⏳ Memverifikasi...</span>';
        verifyOtpBtn.disabled = true;

        const res = await fetch("{{ route('guru.email.verify') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ otp: otpInput.value })
        });

        const data = await res.json();

        if (!res.ok) {
            otpStatus.innerHTML = `<span class="text-red-400">✗ ${data.message}</span>`;
            verifyOtpBtn.disabled = false;
            return;
        }

        otpStatus.innerHTML = '<span class="text-green-400">✓ Email terverifikasi</span>';
        setProgress(2);

        // ================= SUBMIT PASSWORD =================
        const formData = new FormData(passwordForm);

        const pwRes = await fetch("{{ route('guru.password.update') }}", {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: formData
        });

        const pwData = await pwRes.json();

        if (pwRes.ok) {
            window.location.href = pwData.redirect;
        } else {
            const errMsg = Object.values(pwData.errors ?? {}).flat().join(', ');
            passwordErrorText.textContent = errMsg;
            passwordError.classList.remove('hidden');
            passwordError.classList.add('flex');
        }
    };
});
</script>