<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<%-include('navbar.ejs')%>

<div class="pbmit-title-bar-wrapper login-title-bar">
    <div class="container">
        <div class="pbmit-title-bar-content">
            <div class="pbmit-title-bar-content-inner">
                <div class="pbmit-tbar">
                    <div class="pbmit-tbar-inner container">
                        <h1 class="pbmit-tbar-title">Login / Register</h1>
                    </div>
                </div>
                <div class="pbmit-breadcrumb">
                    <div class="pbmit-breadcrumb-inner">
                        <span><a href="/" class="home">Home</a></span>
                        <span class="sep"><i class="pbmit-base-icon-angle-right"></i></span>
                        <span>Login / Register</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --primary: #0F172A;
        --primary-accent: #2563EB;
        --primary-hover: #1D4ED8;
        --accent-gold: #F59E0B;
        --accent-emerald: #10B981;
        --bg-gradient: radial-gradient(100% 100% at 50% 0%, #1E293B 0%, #0F172A 100%);
        --glass-bg: rgba(255, 255, 255, 0.75);
        --glass-border: rgba(255, 255, 255, 0.4);
        --glass-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
        --text-main: #0F172A;
        --text-muted: #64748B;
        --input-bg: rgba(248, 250, 252, 0.8);
        --input-border: #E2E8F0;
        --radius-xl: 32px;
        --radius-lg: 16px;
        --radius-md: 10px;
    }



    /* ----- MAIN CONTAINER ----- */
    .auth-card {
        position: relative;
        z-index: 1;
        max-width: 1080px;
        width: 100%;
        margin: 20px auto 40px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px) saturate(190%);
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        border-radius: var(--radius-xl);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        border: 1px solid var(--glass-border);
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .auth-grid {
        display: flex;
        width: 100%;
    }

    /* ----- LEFT BRAND PANEL (40%) ----- */
    .brand-panel {
        flex: 0 0 44%;
        background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
        padding: 2rem 3rem;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
    }

    .brand-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

    .brand-panel::after {
        content: '';
        position: absolute;
        top: -30%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .brand-header {
        position: relative;
        z-index: 1;
    }

    .brand-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #FFFFFF;
        margin-bottom: 2rem;
    }

    .brand-logo-icon {
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, var(--primary-accent), #60A5FA);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.35);
    }

    .brand-title {
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.03em;
        margin-bottom: 1rem;
        color: #EC6126;
    }

    .brand-title span {
        background: linear-gradient(135deg, #60A5FA, #93C5FD);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .brand-desc {
        color: #94A3B8;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .feature-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        position: relative;
        z-index: 1;
    }

    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        font-size: 0.9rem;
        color: #E2E8F0;
        font-weight: 500;
    }

    .feature-item-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.2);
        color: #60A5FA;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-top: 1px;
        border: 1px solid rgba(96, 165, 250, 0.3);
    }

    .brand-footer {
        position: relative;
        z-index: 1;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .trust-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: #94A3B8;
        font-weight: 500;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: rgba(16, 185, 129, 0.12);
        color: #34D399;
        padding: 0.35rem 0.8rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid rgba(52, 211, 153, 0.2);
    }

    .status-dot {
        width: 6px;
        height: 6px;
        background: #34D399;
        border-radius: 50%;
        box-shadow: 0 0 8px #34D399;
        animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    /* ----- RIGHT FORM PANEL (56%) ----- */
    .form-panel {
        flex: 0 0 56%;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: rgba(255, 255, 255, 0.4);
    }

    /* Segmented Control Switcher */
    .segmented-control {
        display: flex;
        background: #E2E8F0;
        padding: 4px;
        border-radius: 12px;
        margin-bottom: 2rem;
        position: relative;
    }

    .tab-btn {
        flex: 1;
        padding: 0.65rem 1rem;
        border: none;
        background: transparent;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-muted);
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1;
    }

    .tab-btn.active {
        color: var(--text-main);
        background: #FFFFFF;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .form-title {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--text-main);
        letter-spacing: -0.02em;
        margin-bottom: -5px;
        margin-top: -15px;
    }

    .form-subtitle {
        font-size: 0.88rem;
        color: var(--text-muted);
        margin-bottom: 1.8rem;
    }

    /* Form Controls */
    .auth-form {
        display: none;
        flex-direction: column;
        gap: 1.15rem;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .auth-form.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .form-row {
        display: flex;
        gap: 1rem;
    }

    .form-row .input-group {
        flex: 1;
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .input-group label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #334155;
        letter-spacing: 0.01em;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .input-group label i {
        color: var(--primary-accent);
        font-size: 0.75rem;
        opacity: 0.7;
    }

    .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-icon {
        position: absolute;
        left: 1rem;
        color: #94A3B8;
        font-size: 0.95rem;
        transition: color 0.2s ease;
        pointer-events: none;
    }

    .input-wrapper input {
        width: 100%;
        padding: 0.8rem 1rem 0.8rem 2.6rem;
        border: 1px solid var(--input-border);
        border-radius: var(--radius-md);
        background: var(--input-bg);
        font-size: 0.92rem;
        color: var(--text-main);
        font-weight: 500;
        outline: none;
        transition: all 0.2s ease;
    }

    .input-wrapper input::placeholder {
        color: #94A3B8;
        font-weight: 400;
    }

    .input-wrapper input:focus {
        border-color: var(--primary-accent);
        background: #FFFFFF;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .input-wrapper input:focus ~ .input-icon,
    .input-wrapper:focus-within .input-icon {
        color: var(--primary-accent);
    }

    /* Password Toggle Button */
    .toggle-pwd {
        position: absolute;
        right: 0.8rem;
        background: none;
        border: none;
        color: #94A3B8;
        cursor: pointer;
        padding: 0.4rem;
        font-size: 0.9rem;
        border-radius: 6px;
        transition: color 0.2s ease;
    }

    .toggle-pwd:hover {
        color: var(--text-main);
    }

    /* Options area */
    .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.83rem;
        margin-top: 0.2rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .checkbox-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #475569;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
    }

.checkbox-container input[type="checkbox"]{
    width:18px;
    height:18px;
    cursor:pointer;
    accent-color: var(--primary-accent);
    border:2px solid #cbd5e1;
    border-radius:4px;
    appearance:auto;
}

    .forgot-link {
        color: var(--primary-accent);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .forgot-link:hover {
        color: var(--primary-hover);
        text-decoration: underline;
    }

    /* Buttons */
    .btn-submit {
        background: linear-gradient(135deg, #245CFF, #4E7BFF);
        color: white;
        border: none;
        padding: 0.85rem 1.5rem;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(36, 92, 255, 0.3);
        margin-top: 0.4rem;
    }

    .btn-submit:hover {
        background: linear-gradient(135deg, #ff6b00, #ff8c42);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
    }

    .btn-submit:active {
        transform: translateY(0);
    }

    .divider {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: #94A3B8;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0.5rem 0;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #E2E8F0;
    }

    .btn-google {
        background: #FFFFFF;
        color: var(--text-main);
        border: 1px solid var(--input-border);
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        transition: all 0.2s ease;
    }

    .btn-google:hover {
        background: #F8FAFC;
        border-color: #CBD5E1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* RESPONSIVE DESIGN */
    @media (max-width: 992px) {
        .auth-grid {
            flex-direction: column;
        }
        .brand-panel {
            flex: 0 0 auto;
            padding: 2.5rem 2rem;
        }
        .form-panel {
            flex: 0 0 auto;
            padding: 2.5rem 2rem;
        }
        .auth-card {
            max-width: 520px;
            margin: 30px auto;
        }
    }

    @media (max-width: 480px) {
        .auth-card {
            border-radius: 20px;
            margin: 20px auto;
        }
        .form-row {
            flex-direction: column;
            gap: 1.15rem;
        }
        .brand-title {
            font-size: 1.8rem;
        }
        .brand-panel {
            padding: 2rem 1.5rem;
        }
        .form-panel {
            padding: 2rem 1.5rem;
        }
        .segmented-control {
            flex-direction: row;
        }
        .tab-btn {
            font-size: 0.8rem;
            padding: 0.5rem 0.8rem;
        }
    }
    .topspacelogin{
      margin-top: -15px;
    }
</style>

<div class="auth-card">
    <div class="auth-grid">

        <!-- LEFT PANEL: Branding & Trust Elements (44%) -->
        <div class="brand-panel">
            <div class="brand-header">

                <div class="brand-logo">
                    <div class="brand-logo-icon">
                        <i class="fas fa-shield-halved"></i>
                    </div>
                    VSearch BGV
                </div>

                <h1 class="brand-title">
                    Trusted <span>Background Verification</span>
                </h1>

                <p class="brand-desc">
                    Simplify hiring with secure background verification solutions. Verify identity, education, employment, address, and criminal records through one trusted platform.
                </p>

                <ul class="feature-list">

                    <li class="feature-item">
                        <div class="feature-item-icon">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <span>Identity & Document Verification</span>
                    </li>

                    <li class="feature-item">
                        <div class="feature-item-icon">
                            <i class="fas fa-user-check"></i>
                        </div>
                        <span>Employment, Education & Address Verification</span>
                    </li>

                    <li class="feature-item">
                        <div class="feature-item-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <span>Real-time Candidate Tracking & Status Updates</span>
                    </li>

                </ul>

            </div>

            <div class="brand-footer">

                <div class="status-pill">
                    <span class="status-dot"></span>
                    Trusted Verification Platform
                </div>

                <div class="trust-badge">
                    <i class="fas fa-lock"></i>
                    Secure & Encrypted
                </div>

            </div>
        </div>

        <!-- RIGHT PANEL: Auth Forms (56%) -->
        <div class="form-panel">
            
            <!-- Segmented Control Tab Navigation -->
            <div class="segmented-control">
                <button class="tab-btn active" id="tabLogin" onclick="switchTab('login')">Sign In</button>
                <button class="tab-btn" id="tabRegister" onclick="switchTab('register')">Create Account</button>
            </div>
            <form id="loginForm" class="auth-form active" onsubmit="handleLogin(event)">

                <div>
                    <h2 class="form-title">Welcome Back</h2>

                    <p class="form-subtitle">
                        Enter your credentials to securely access your dashboard.
                    </p>
                </div>


                <!-- Email / Mobile -->
                <div class="input-group topspacelogin">

                    <label for="loginEmail">
                        <i class="fas fa-envelope"></i>
                        Email or Mobile
                    </label>

                    <div class="input-wrapper">

                        <input type="text"
                            id="loginEmail"
                            name="loginEmail"
                            placeholder="name@company.com or 9876543210"
                            required>

                        <i class="far fa-envelope input-icon"></i>

                    </div>

                </div>


                <!-- Password -->
                <div class="input-group">

                    <label for="loginPassword">
                        <i class="fas fa-lock"></i>
                        Password
                    </label>

                    <div class="input-wrapper">

                        <input type="password"
                            id="loginPassword"
                            name="loginPassword"
                            placeholder="••••••••"
                            required>

                        <i class="fas fa-lock input-icon"></i>

                        <button type="button"
                                class="toggle-pwd"
                                onclick="togglePasswordVisibility('loginPassword', this)">

                            <i class="far fa-eye"></i>

                        </button>

                    </div>

                </div>


                <!-- Remember / Forgot -->
                <div class="form-actions">

                    <label class="checkbox-container">

                        <input type="checkbox"
                            id="rememberMe"
                            name="rememberMe">

                        Remember this device

                    </label>


                    <a href="#"
                    class="forgot-link"
                    onclick="handleForgotPassword(event)">

                        Forgot password?

                    </a>

                </div>


                <!-- Submit -->
                <button type="submit" class="btn-submit">

                    Sign In
                    <i class="fas fa-arrow-right"></i>

                </button>


                <!-- Divider -->
                <!-- <div class="divider">
                    OR
                </div>


          
                <button type="button"
                        class="btn-google"
                        onclick="handleGoogleAuth()">

                    <i class="fa fa-google"
                    style="color: #4285F4;"></i>

                    Continue with Google

                </button> -->

            </form>

            <!-- FORM 2: REGISTER -->
            <form id="registerForm" class="auth-form" onsubmit="handleRegister(event)">

                <div>
                    <h2 class="form-title">Create an Account</h2>
                    <p class="form-subtitle">
                        Register to securely manage your background verification process.
                    </p>
                </div>

                <div class="form-row topspacelogin">

                    <div class="input-group">
                        <label for="regFirstName">
                            <i class="fas fa-user"></i> First Name
                        </label>

                        <div class="input-wrapper">
                            <input type="text" id="regFirstName" placeholder="John" name="firstName" required>
                            <i class="far fa-user input-icon"></i>
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="regLastName">
                            <i class="fas fa-user"></i> Last Name
                        </label>

                        <div class="input-wrapper">
                            <input type="text" id="regLastName" placeholder="Doe" name="lastName" required>
                            <i class="far fa-user input-icon"></i>
                        </div>
                    </div>

                </div>

                <div class="input-group">
                    <label for="regEmail">
                        <i class="fas fa-envelope"></i> Email Address
                    </label>

                    <div class="input-wrapper">
                        <input type="email" id="regEmail" placeholder="john@example.com" name="email" required>
                        <i class="far fa-envelope input-icon"></i>
                    </div>
                </div>

                <div class="input-group">
                    <label for="regMobile">
                        <i class="fas fa-phone"></i> Mobile Number
                    </label>

                    <div class="input-wrapper">
                        <input type="tel"
                            id="regMobile"
                            placeholder="9876543210"
                            maxlength="10" name="mobile"
                            required>

                        <i class="fas fa-phone input-icon"></i>
                    </div>
                </div>

                <div class="form-row">

                    <div class="input-group">
                        <label for="regPassword">
                            <i class="fas fa-lock"></i> Password
                        </label>

                        <div class="input-wrapper">
                            <input type="password"
                                id="regPassword"
                                placeholder="••••••••"
                                minlength="8"  name="password"
                                required>

                            <i class="fas fa-lock input-icon"></i>

                            <button type="button"
                                    class="toggle-pwd"
                                    onclick="togglePasswordVisibility('regPassword', this)">
                                <i class="far fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="regConfirmPassword">
                            <i class="fas fa-lock"></i> Confirm Password
                        </label>

                        <div class="input-wrapper">
                            <input type="password"
                                id="regConfirmPassword"
                                placeholder="••••••••"
                                minlength="8" name="confirmPassword"
                                required>

                            <i class="fas fa-lock input-icon"></i>

                            <button type="button"
                                    class="toggle-pwd"
                                    onclick="togglePasswordVisibility('regConfirmPassword', this)">
                                <i class="far fa-eye"></i>
                            </button>
                        </div>
                    </div>

                </div>

                <div class="form-actions">
                    <label class="checkbox-container">
                        <input type="checkbox" id="agreeTerms" required>

                        I agree to the
                        <a href="#" class="forgot-link"
                        onclick="event.preventDefault();">
                            Terms &amp; Conditions
                        </a>
                        and
                        <a href="#" class="forgot-link"
                        onclick="event.preventDefault();">
                            Privacy Policy
                        </a>
                    </label>
                </div>

                <button type="submit" class="btn-submit">
                    Create My Account
                    <i class="fas fa-user-plus"></i>
                </button>

                <!-- <div class="divider">OR</div>

                <button type="button"
                        class="btn-google"
                        onclick="handleGoogleAuth()">

                    <i class="fa fa-google" style="color: #4285F4;"></i>

                    Continue with Google

                </button> -->

            </form>

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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

    // ==============================
    // LOGIN / REGISTER TAB SWITCH
    // ==============================

    function switchTab(type) {

        const loginForm = document.getElementById("loginForm");
        const registerForm = document.getElementById("registerForm");

        const tabLogin = document.getElementById("tabLogin");
        const tabRegister = document.getElementById("tabRegister");


        if (type === "login") {

            tabLogin.classList.add("active");
            tabRegister.classList.remove("active");

            registerForm.classList.remove("active");

            setTimeout(() => {
                loginForm.classList.add("active");
            }, 50);

        } else {

            tabRegister.classList.add("active");
            tabLogin.classList.remove("active");

            loginForm.classList.remove("active");

            setTimeout(() => {
                registerForm.classList.add("active");
            }, 50);

        }

    }


    // ==============================
    // PASSWORD SHOW / HIDE
    // ==============================

    function togglePasswordVisibility(inputId, btn) {

        const input = document.getElementById(inputId);
        const icon = btn.querySelector("i");

        if (input.type === "password") {

            input.type = "text";
            icon.className = "far fa-eye-slash";

        } else {

            input.type = "password";
            icon.className = "far fa-eye";

        }

    }


    // ==============================
    // REGISTER
    // ==============================

    async function handleRegister(event) {

        event.preventDefault();

        const form = document.getElementById("registerForm");

        const password = document.getElementById("regPassword").value;
        const confirmPassword = document.getElementById("regConfirmPassword").value;


        // Password Match
        if (password !== confirmPassword) {

            Swal.fire({
                icon: "warning",
                title: "Password Mismatch",
                text: "Password and Confirm Password do not match.",
                confirmButtonColor: "#2563eb"
            });

            return;
        }


        const formData = new FormData(form);


        try {

            const response = await fetch("/register", {

                method: "POST",

                body: new URLSearchParams(formData)

            });


            const result = await response.json();


            if (result.status) {

                Swal.fire({

                    icon: "success",
                    title: "Thank You! 🎉",
                    text: result.message,
                    confirmButtonText: "Continue",
                    confirmButtonColor: "#2563eb"

                }).then(() => {

                    switchTab("login");

                    form.reset();

                });

            } else {

                Swal.fire({

                    icon: "error",
                    title: "Registration Failed",
                    text: result.message,
                    confirmButtonColor: "#dc2626"

                });

            }


        } catch (error) {

            console.error("Registration Error:", error);

            Swal.fire({

                icon: "error",
                title: "Something Went Wrong",
                text: "Unable to connect with the server. Please try again.",
                confirmButtonColor: "#dc2626"

            });

        }

    }


    // ==============================
    // LOGIN
    // ==============================

async function handleLogin(event) {

    event.preventDefault();

    const form = document.getElementById("loginForm");

    const formData = new FormData(form);

    const data = Object.fromEntries(formData.entries());

    try {

        const response = await fetch("/login", {

            method: "POST",

            headers: {
                "Content-Type": "application/json"
            },

            body: JSON.stringify(data)

        });

        const result = await response.json();

        if (result.status) {

            Swal.fire({

                icon: "success",
                title: "Login Successful!",
                text: result.message,
                confirmButtonColor: "#f97316"

            }).then(() => {

                // -----------------------------------------
                // Check URL redirect parameter
                // -----------------------------------------

                const params = new URLSearchParams(
                    window.location.search
                );

                const redirectUrl = params.get("redirect");


                // -----------------------------------------
                // If user came from checkout
                // -----------------------------------------

                if (redirectUrl) {

                    window.location.href = redirectUrl;

                } else {

                    // Normal login
                    window.location.href = "/candidate_admin";

                }

            });

        } else {

            Swal.fire({

                icon: "error",
                title: "Login Failed",
                text: result.message,
                confirmButtonColor: "#f97316"

            });

        }

    } catch (error) {

        console.log("Login Error:", error);

        Swal.fire({

            icon: "error",
            title: "Something went wrong",
            text: "Please try again later.",
            confirmButtonColor: "#f97316"

        });

    }

}
// ==============================
    // FORGOT PASSWORD
    // ==============================

    async function handleForgotPassword(event) {

        event.preventDefault();

        const { value: email } = await Swal.fire({

            title: "Forgot Password?",

            text: "Enter your registered email address.",

            input: "email",

            inputPlaceholder: "name@company.com",

            inputAttributes: {
                autocapitalize: "off",
                autocomplete: "email"
            },

            showCancelButton: true,

            confirmButtonText: "Send Reset Link",

            confirmButtonColor: "#2563eb",

            cancelButtonText: "Cancel",

            inputValidator: (value) => {

                if (!value) {
                    return "Please enter your email address.";
                }

            }

        });


        if (!email) {
            return;
        }


        try {

            const response = await fetch("/forgot-password", {

                method: "POST",

                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },

                body: new URLSearchParams({
                    email: email
                })

            });


            const result = await response.json();


            if (result.status) {

                Swal.fire({

                    icon: "success",

                    title: "Email Sent! 📧",

                    text: result.message,

                    confirmButtonColor: "#2563eb"

                });

            } else {

                Swal.fire({

                    icon: "error",

                    title: "Unable to Reset Password",

                    text: result.message,

                    confirmButtonColor: "#dc2626"

                });

            }


        } catch (error) {

            console.error("Forgot Password Error:", error);

            Swal.fire({

                icon: "error",

                title: "Something Went Wrong",

                text: "Please try again later.",

                confirmButtonColor: "#dc2626"

            });

        }

    }


</script>

<%-include('footer.ejs')%>