<?php

session_start();

/* Prevent old login page files from being cached */
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Pragma: no-cache");
header("Expires: 0");

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        Member Login | Complete Bliss Solutions
    </title>


    <!-- FONTS -->
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap"
        rel="stylesheet"
    >


    <!-- FONT AWESOME -->
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
    >


    <!-- LOGIN CSS -->
    <link
        rel="stylesheet"
        href="assets/css/login.css"
    >

</head>


<body>


<div class="cbx-login-page">


    <!-- =====================================================
         LEFT VISUAL
    ====================================================== -->

    <section class="cbx-login-visual">


        <!-- BACKGROUND -->

        <div class="cbx-login-bg">

            <img
                src="public-site/assets/images/how-it-works.png"
                alt=""
            >

        </div>


        <div class="cbx-login-overlay"></div>



        <!-- BRAND -->

        <div class="cbx-login-brand">


            <a href="index.php">

                <img
                    src="public-site/assets/images/logo.png"
                    alt="Complete Bliss Solutions"
                >

            </a>


        </div>



        <!-- CENTER CONTENT -->

        <div class="cbx-login-visual-content">


            <div class="cbx-login-visual-badge">

                <i class="fa-solid fa-sparkles"></i>

                <span>
                    WELCOME TO COMPLETE BLISS
                </span>

            </div>


            <h1>

                Plan today.

                <span>
                    Enjoy tomorrow.
                </span>

            </h1>


            <p>
                Stay connected to your contribution journey,
                monitor your schemes and keep track of your
                progress from one convenient dashboard.
            </p>



            <!-- TRUST POINTS -->

            <div class="cbx-login-benefits">


                <div>

                    <span>

                        <i class="fa-solid fa-chart-line"></i>

                    </span>

                    <div>

                        <strong>
                            Clear Tracking
                        </strong>

                        <small>
                            See your contributions and progress.
                        </small>

                    </div>

                </div>



                <div>

                    <span>

                        <i class="fa-solid fa-wallet"></i>

                    </span>

                    <div>

                        <strong>
                            Your Wallet
                        </strong>

                        <small>
                            Keep your account activity in one place.
                        </small>

                    </div>

                </div>



                <div>

                    <span>

                        <i class="fa-solid fa-layer-group"></i>

                    </span>

                    <div>

                        <strong>
                            Your Schemes
                        </strong>

                        <small>
                            Follow every scheme you've joined.
                        </small>

                    </div>

                </div>


            </div>


        </div>



        <!-- BOTTOM -->

        <div class="cbx-login-visual-bottom">

            <span>

                <i class="fa-solid fa-shield-halved"></i>

                Your contribution journey, clearly tracked.

            </span>

        </div>


    </section>



    <!-- =====================================================
         RIGHT SIDE
    ====================================================== -->

    <section class="cbx-login-form-side">


        <!-- MOBILE HEADER -->

        <div class="cbx-login-mobile-header">


            <a href="index.php">

                <img
                    src="public-site/assets/images/logo.png"
                    alt="Complete Bliss Solutions"
                >

            </a>


            <a
                href="index.php"
                class="cbx-login-home-mobile"
            >

                <i class="fa-solid fa-arrow-left"></i>

                Home

            </a>


        </div>



        <div class="cbx-login-form-wrap">


            <!-- BACK LINK -->

            <a
                href="index.php"
                class="cbx-login-back"
            >

                <i class="fa-solid fa-arrow-left"></i>

                Back to Website

            </a>



            <!-- FORM HEADING -->

            <div class="cbx-login-heading">


                <div class="cbx-login-icon">

                    <i class="fa-solid fa-user"></i>

                </div>


                <span>
                    MEMBER ACCESS
                </span>


                <h2>
                    Welcome back
                </h2>


                <p>
                    Enter your phone number and password
                    to continue to your Complete Bliss dashboard.
                </p>


            </div>



            <!-- =================================================
                 FORM
            ================================================== -->

            <form
                action="auth/login_process.php"
                method="POST"
                class="cbx-login-form"
            >


                <!-- PHONE -->

                <div class="cbx-form-group">


                    <label for="phone">

                        Phone Number

                    </label>


                    <div class="cbx-input-wrap">


                        <div class="cbx-input-icon">

                            <i class="fa-solid fa-phone"></i>

                        </div>


                        <input
                            type="tel"
                            id="phone"
                            name="phone"
                            placeholder="Enter your phone number"
                            value="<?= htmlspecialchars($_SESSION['old']['phone'] ?? '') ?>"
                            autocomplete="tel"
                            required
                        >


                    </div>


                </div>



                <!-- PASSWORD -->

                <div class="cbx-form-group">


                    <div class="cbx-label-row">


                        <label for="password">

                            Password

                        </label>


                        <a href="forgot-password.php">
                            Forgot Password?
                        </a>


                    </div>


                    <div class="cbx-input-wrap">


                        <div class="cbx-input-icon">

                            <i class="fa-solid fa-lock"></i>

                        </div>


                        <input
                            type="password"
                            id="password"
                            name="password"
                            placeholder="Enter your password"
                            autocomplete="current-password"
                            required
                        >


                        <button
                            type="button"
                            class="toggle-password"
                            id="togglePassword"
                            aria-label="Show password"
                        >

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

                        </button>


                    </div>


                </div>



                <!-- OPTIONS -->

                <div class="cbx-login-options">


                    <label class="cbx-remember">


                        <input
                            type="checkbox"
                            name="remember"
                        >


                        <span class="cbx-checkbox"></span>


                        <span>
                            Remember me
                        </span>


                    </label>


                </div>



                <!-- LOGIN BUTTON -->

                <button
                    type="submit"
                    class="cbx-login-btn"
                >

                    <span>
                        Sign In
                    </span>

                    <i class="fa-solid fa-arrow-right"></i>

                </button>



                <!-- REGISTER -->

                <div class="cbx-login-register">


                    <span>
                        New to Complete Bliss?
                    </span>


                    <a href="register.php">

                        Create an Account

                        <i class="fa-solid fa-arrow-right"></i>

                    </a>


                </div>


            </form>



            <!-- FOOTER -->

            <div class="cbx-login-form-footer">


                <i class="fa-solid fa-lock"></i>

                <span>
                    Secure member access
                </span>


                <span class="cbx-login-dot"></span>


                <a href="index.php#contact">
                    Need help?
                </a>


            </div>


        </div>


    </section>


</div>



<!-- =========================================================
     SWEETALERT
========================================================= -->

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


<script
    src="assets/js/login.js?v=<?= filemtime(__DIR__ . '/assets/js/login.js') ?>">
</script>



<!-- =========================================================
     LOGIN ERROR
========================================================= -->

<?php if (isset($_SESSION['error'])): ?>


<script>

document.addEventListener(
    "DOMContentLoaded",
    function () {

        Swal.fire({

            icon: "error",

            title: "Login Failed",

            text:
                <?= json_encode($_SESSION['error']); ?>,

            confirmButtonText:
                "Try Again",

            confirmButtonColor:
                "#2563eb"

        });

    }
);

</script>


<?php

unset($_SESSION['error']);

endif;

?>



<!-- =========================================================
     REGISTRATION SUCCESS
========================================================= -->

<?php if (isset($_SESSION['success'])): ?>


<script>

document.addEventListener(
    "DOMContentLoaded",
    function () {

        Swal.fire({

            icon:
                "success",

            title:
                "Account Created!",

            html:
                `
                <b>Your account has been created successfully.</b>
                <br><br>
                You can now sign in with your phone number
                and password.
                `,

            confirmButtonText:
                "Login Now",

            confirmButtonColor:
                "#2563eb",

            allowOutsideClick:
                false,

            allowEscapeKey:
                false

        });

    }
);

</script>


<?php

unset($_SESSION['success']);

endif;

?>


<?php
unset($_SESSION['old']);
?>


</body>

</html>