<div id="loginOverlay"
     onclick="closeLogin()"
     class="fixed inset-0 z-50 hidden
            items-center justify-center
            px-4
            max-md:px-0">

    <!-- BACKDROP -->
    <div class="absolute inset-0"></div>

    <!-- CARD LOGIN -->
    <div onclick="event.stopPropagation()"
         class="
            relative bg-white shadow-2xl animate-login

            /* ===== DESKTOP & TABLET (ASLI, TIDAK BERUBAH) ===== */
            md:rounded-3xl
            md:w-full md:max-w-5xl
            md:min-h-[40rem]
            md:grid md:grid-cols-2
            md:overflow-hidden

            /* ===== MOBILE ONLY ===== */
            max-md:w-full max-md:h-full
            max-md:rounded-none
            max-md:flex max-md:flex-col
            max-md:overflow-hidden
         ">

        <!-- ❌ CLOSE BUTTON (SELALU BISA DIKLIK) -->
        <button onclick="closeLogin()"
                class="absolute top-4 right-4 z-50
                       w-10 h-10 rounded-full
                       flex items-center justify-center
                       text-gray-500 hover:text-black
                       bg-black/5 hover:bg-black/10
                       transition">
            ✕
        </button>

        <!-- LEFT IMAGE -->
        <div class="relative
                    md:h-auto
                    max-md:h-[40vh]">

            <img id="loginSideImage"
                 src="/card1.png"
                 class="w-full h-full object-cover">

            <!-- LOGO + TITLE -->
            <div class="absolute top-6 left-6 flex items-center gap-3 text-white">
                <img src="/logo.png"
                     class="w-16 h-16 md:w-20 md:h-20 drop-shadow-xl">

                <div class="leading-tight">
                    <h1 class="font-extrabold text-2xl md:text-3xl tracking-wide">
                        LMS
                    </h1>
                    <p class="text-base md:text-lg opacity-90">
                        Learning Management System
                    </p>
                </div>
            </div>
        </div>

        <!-- RIGHT FORM -->
        <div class="flex flex-col justify-center
                    p-8 md:p-12
                    text-black
                    max-md:flex-1">

            <h1 class="text-3xl font-black mb-1">
                Selamat Datang
            </h1>
            <h2 class="text-sm tracking-wide text-gray-600 mb-6">
                Silakan login untuk melanjutkan
            </h2>

            <!-- USERNAME -->
            <div class="mb-5">
                <label class="text-sm font-medium text-gray-700">
                    Username
                </label>
                <div class="relative mt-1">
                    <input id="loginIdentifier"
                           type="number"
                           placeholder="NIP / NISN"
                           class="w-full border rounded-xl px-4 py-3 pr-10
                                  focus:ring-black focus:border-black">
                    <i data-feather="user"
                       class="absolute right-3 top-1/2 -translate-y-1/2
                              text-gray-400 w-5"></i>
                </div>
            </div>

            <!-- PASSWORD -->
            <div class="mb-6">
                <label class="text-sm font-medium text-gray-700">
                    Password
                </label>
                <div class="relative mt-1">
                    <input id="loginPassword"
                           type="password"
                           placeholder="Masukkan password"
                           class="w-full border rounded-xl px-4 py-3 pr-12
                                  focus:ring-black focus:border-black">

                    <button type="button"
                            id="togglePassword"
                            class="absolute right-3 top-1/2 -translate-y-1/2
                                   text-gray-400 hover:text-black">
                        <i data-feather="eye-off" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>

            <!-- SUBMIT -->
            <button onclick="submitLogin()"
                    class="w-full bg-black text-white py-3 rounded-xl
                           font-semibold text-lg
                           hover:bg-gray-900 transition">
                Login
            </button>

            <div id="loginError"
                 class="hidden text-red-600 text-sm mt-3 text-center"></div>

            <p class="text-xs text-gray-500 text-center mt-6">
                Dengan masuk, Anda menyetujui
                <span class="font-medium text-black">
                    ketentuan & kebijakan
                </span>
                sistem sekolah
            </p>
        </div>
    </div>
</div>



<!-- ANIMATION -->
<style>
@keyframes loginIn {
    from {
        opacity: 0;
        transform: translateY(50px) scale(.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.animate-login {
    animation: loginIn .45s ease-out forwards;
}
</style>

<script>
/* ===============================
   GLOBAL LOGIN SCRIPT (DARURAT)
   =============================== */

console.log('LOGIN SCRIPT LOADED');

// ===== SUBMIT LOGIN =====
async function submitLogin() {
    console.log('=== LOGIN SUBMIT ===');

    const identifier = document.getElementById('loginIdentifier')?.value;
    const password   = document.getElementById('loginPassword')?.value;
    const errorBox   = document.getElementById('loginError');

    if (!identifier || !password) {
        errorBox.innerText = 'Username dan password wajib diisi';
        errorBox.classList.remove('hidden');
        return;
    }

    errorBox.classList.add('hidden');
    errorBox.innerText = '';

    try {
        const res = await fetch('/auth/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document
                    .querySelector('meta[name="csrf-token"]')?.content
            },
            body: JSON.stringify({
                identifier: identifier,
                password: password
            })
        });

        const data = await res.json();
        console.log('LOGIN RESPONSE:', data);

        if (!res.ok) {
            throw data;
        }

        // SIMPAN TOKEN
        localStorage.setItem('lms_token', data.token);
        localStorage.setItem('lms_role', data.role);

        // REDIRECT
        if (data.role === 'guru') {
        window.location.href =
            `http://192.168.100.108:8002/auth/consume-token?token=${encodeURIComponent(data.token)}&role=${data.role}`;
            } else {
                window.location.href =
                    `http://192.168.100.108:8003/auth/consume-token?token=${encodeURIComponent(data.token)}&role=${data.role}`;
            }


    } catch (err) {
        console.error('LOGIN ERROR:', err);

        let msg = 'Login gagal';
        if (err?.errors?.identifier?.[0]) {
            msg = err.errors.identifier[0];
        } else if (err?.message) {
            msg = err.message;
        }

        errorBox.innerText = msg;
        errorBox.classList.remove('hidden');
    }
}

// ===== CLOSE LOGIN =====
function closeLogin() {
    const login = document.getElementById('loginOverlay');
    if (!login) return;

    login.classList.add('hidden');
    login.classList.remove('flex');
}

// ===== PASSWORD TOGGLE + ICON =====
document.addEventListener('DOMContentLoaded', () => {
    if (window.feather) feather.replace();

    const toggle = document.getElementById('togglePassword');
    const input  = document.getElementById('loginPassword');

    if (toggle && input) {
        toggle.addEventListener('click', () => {
            const hidden = input.type === 'password';
            input.type = hidden ? 'text' : 'password';

            toggle.innerHTML = hidden
                ? feather.icons.eye.toSvg()
                : feather.icons['eye-off'].toSvg();
        });
    }
});
</script>
<?php /**PATH /home/baihaqie/Documents/project/project/login/resources/views/login/login.blade.php ENDPATH**/ ?>