<?php

/* =========================================================
   EXISTING LOGIN LOGIC - DO NOT CHANGE
   ========================================================= */

require_once("public/auth.php");
require_once("public/forget_pw.php");
require_once("public/functions.php");
require_once("public/school_config.php");
require_once("public/connection.php");

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);


/* =========================================================
   FETCH LOGIN SLIDES
   ========================================================= */

$slides = false;

$slides_query = "
    SELECT
        id,
        image,
        title,
        description,
        status,
        sort_order
    FROM login_slides
    WHERE status = 1
    ORDER BY sort_order ASC, id DESC
";

$slides = $connection->query($slides_query);


/* =========================================================
   BUILD SLIDE ARRAY
   ========================================================= */

$login_slides = [];

if ($slides && $slides->num_rows > 0) {

    while ($row = $slides->fetch_assoc()) {

        if (!empty($row['image'])) {

            $login_slides[] = $row;

        }
    }
}


/* =========================================================
   FALLBACK
   ========================================================= */

if (empty($login_slides)) {

    $login_slides[] = [
        'image'       => 'assets/images/login-bg.jpg',
        'title'       => $school_name,
        'description' => 'Welcome to our school portal. Sign in to access your account and continue.',
        'status'      => 1,
        'sort_order'  => 0
    ];
}

?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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


<!-- =====================================================
     EXISTING CSS
     ===================================================== -->

<link
    rel="stylesheet"
    href="assets/login_css/font-awesome-4.7.0/css/font-awesome.css"
>

<link
    rel="stylesheet"
    type="text/css"
    href="assets/login_css/login.css"
>

<link
    rel="icon"
    href="<?php echo htmlspecialchars($school_favicon); ?>"
    type="image/png"
>

<link
    href="assets/SweetAlerts/sweetalert.css"
    rel="stylesheet"
>

<link
    rel="stylesheet"
    type="text/css"
    href="assets/loader/waitMe.css"
>


<title>
    <?php echo htmlspecialchars($school_name); ?> - Login
</title>


<style>

/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

}


body {

    background: #f5f7fb;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.portal-shell {

    min-height: 100vh;

    width: 100%;

}


/* =========================================================
   LEFT IMAGE PANEL
   ========================================================= */

.brand-panel {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #111;

}


.brand-slider {

    position: absolute;

    inset: 0;

}


.brand-slide {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 1.2s ease-in-out,
        transform 6s ease;

}


.brand-slide.active {

    opacity: 1;

    transform: scale(1);

}


/* =========================================================
   DARK IMAGE OVERLAY
   ========================================================= */

.brand-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.15) 0%,
            rgba(0,0,0,0.40) 50%,
            rgba(0,0,0,0.80) 100%
        );

    z-index: 2;

}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.brand-content {

    position: relative;

    z-index: 3;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px;

    text-align: center;

}


.brand-content-inner {

    width: 100%;

    max-width: 560px;

    color: #fff;

}


.hero-logo {

    width: 135px;

    height: 135px;

    object-fit: contain;

    background: rgba(255,255,255,0.96);

    padding: 10px;

    border-radius: 50%;

    box-shadow:
        0 15px 45px rgba(0,0,0,0.30);

    margin-bottom: 28px;

}


.brand-content h1 {

    font-size: 38px;

    line-height: 1.2;

    font-weight: 700;

    margin: 0 0 15px;

    color: #fff;

}


.brand-content p {

    font-size: 16px;

    line-height: 1.7;

    color: rgba(255,255,255,0.92);

    margin: 0 auto;

    max-width: 500px;

}


/* =========================================================
   SLIDER DOTS
   ========================================================= */

.brand-dots {

    position: absolute;

    z-index: 5;

    bottom: 35px;

    left: 0;

    right: 0;

    display: flex;

    justify-content: center;

    gap: 8px;

}


.brand-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: rgba(255,255,255,0.45);

    transition: all .3s ease;

}


.brand-dot.active {

    width: 28px;

    border-radius: 10px;

    background: #ffffff;

}


/* =========================================================
   RIGHT LOGIN PANEL
   ========================================================= */

.login-panel {

    min-height: 100vh;

    display: flex;

    align-items: center;

    background: #ffffff;

    padding: 50px 30px;

}


.login-container {

    width: 100%;

    max-width: 570px;

    margin: auto;

}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.login-card {

    background: #fff;

    padding: 45px;

    border-radius: 18px;

    box-shadow:
        0 15px 50px rgba(0,0,0,0.08);

    border: 1px solid #edf0f5;

}


/* =========================================================
   MOBILE LOGO
   ========================================================= */

.login-card-logo {

    display: none;

    text-align: center;

    margin-bottom: 20px;

}


.login-card-logo img {

    width: 90px;

    height: 90px;

    object-fit: contain;

}


/* =========================================================
   LOGIN TITLE
   ========================================================= */

.login-head {

    text-align: left;

    font-size: 28px;

    font-weight: 700;

    color: #20242b;

    margin: 0 0 8px;

}


.login-subtitle {

    color: #7a808a;

    font-size: 14px;

    margin-bottom: 30px;

}


/* =========================================================
   FORM
   ========================================================= */

.login-form .form-label,
.forget-form .form-label {

    font-size: 13px;

    font-weight: 600;

    color: #363b44;

    margin-bottom: 8px;

    text-transform: uppercase;

}


.login-form .form-control,
.forget-form .form-control {

    height: 52px;

    border: 1px solid #dfe3e8;

    border-radius: 9px;

    padding: 0 15px;

    font-size: 14px;

    color: #252a31;

    background: #fff;

    box-shadow: none;

    transition: all .25s ease;

}


.login-form .form-control:focus,
.forget-form .form-control:focus {

    border-color: #198754;

    box-shadow:
        0 0 0 3px rgba(25,135,84,0.10);

}


.login-form .form-control::placeholder,
.forget-form .form-control::placeholder {

    color: #a0a5ad;

}


/* =========================================================
   LINKS
   ========================================================= */

.semibold-text {

    font-size: 13px;

    font-weight: 600;

}


.semibold-text a {

    color: #198754;

    text-decoration: none;

    transition: color .2s ease;

}


.semibold-text a:hover {

    color: #146c43;

}


/* =========================================================
   GREEN LOGIN BUTTON
   ========================================================= */

.app_btn {

    width: 100%;

    min-height: 52px;

    border: none !important;

    border-radius: 9px !important;

    background:
        linear-gradient(
            135deg,
            #198754,
            #20a464
        ) !important;

    color: #fff !important;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .3px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.app_btn:hover {

    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #157347,
            #198754
        ) !important;

    box-shadow:
        0 8px 20px rgba(25,135,84,0.25);

}


.app_btn:focus {

    box-shadow:
        0 0 0 4px rgba(25,135,84,0.15) !important;

}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {

    text-align: center;

    margin-top: 22px;

    font-size: 12px;

    color: #888;

}


.login-footer a {

    color: #198754;

    text-decoration: none;

    font-weight: 600;

}


.login-footer a:hover {

    color: #146c43;

}


/* =========================================================
   FORGOT PASSWORD FLIP
   ========================================================= */

.login-box {

    position: relative;

    width: 100%;

}


.login-box .forget-form {

    display: none;

}


.login-box.flipped .login-form {

    display: none;

}


.login-box.flipped .forget-form {

    display: block;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .brand-panel {

        min-height: 430px;

    }


    .brand-content {

        min-height: 430px;

    }


    .brand-content h1 {

        font-size: 30px;

    }


    .hero-logo {

        width: 105px;

        height: 105px;

    }


    .login-panel {

        min-height: auto;

        padding: 45px 25px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

    .brand-panel {

        min-height: 350px;

    }


    .brand-content {

        min-height: 350px;

        padding: 30px 20px;

    }


    .brand-content h1 {

        font-size: 24px;

    }


    .brand-content p {

        font-size: 13px;

    }


    .hero-logo {

        width: 85px;

        height: 85px;

        margin-bottom: 18px;

    }


    .brand-dots {

        bottom: 18px;

    }


    .login-panel {

        padding: 25px 15px;

    }


    .login-card {

        padding: 28px 20px;

        border-radius: 14px;

        box-shadow: none;

        border: none;

    }


    .login-head {

        font-size: 23px;

    }


    .login-card-logo {

        display: block;

    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

    .brand-panel {

        min-height: 300px;

    }


    .brand-content {

        min-height: 300px;

    }


    .brand-content h1 {

        font-size: 21px;

    }


    .login-card {

        padding: 25px 16px;

    }

}

</style>

</head>


<body>


<div class="portal-shell">

    <div class="row g-0 min-vh-100">


        <!-- =================================================
             LEFT SIDE - LOGIN SLIDER
             ================================================= -->

        <div class="col-lg-5 brand-panel">


            <div class="brand-slider">


                <?php foreach ($login_slides as $index => $slide): ?>

                    <?php

                    /*
                     * Database stores:
                     *
                     * uploads/login_slides/filename.jpg
                     *
                     * Browser needs:
                     *
                     * /uploads/login_slides/filename.jpg
                     */

                    $slide_image =
                        '/' . ltrim(
                            $slide['image'],
                            '/'
                        );

                    ?>


                    <div
                        class="brand-slide <?= $index === 0 ? 'active' : ''; ?>"
                        style="background-image:url('<?= htmlspecialchars($slide_image, ENT_QUOTES, 'UTF-8'); ?>');"
                    >
                    </div>


                <?php endforeach; ?>


            </div>


            <!-- DARK OVERLAY -->

            <div class="brand-overlay"></div>


            <!-- =================================================
                 SLIDE CONTENT
                 ================================================= -->

            <div class="brand-content">

                <div class="brand-content-inner">


                    <?php if (!empty($school_logo)): ?>

                        <img
                            src="<?= htmlspecialchars($school_logo); ?>"
                            alt="<?= htmlspecialchars($school_name); ?>"
                            class="hero-logo"
                        >

                    <?php endif; ?>


                    <?php

                    /*
                     * Show first slide title/description initially.
                     */

                    $first_slide = $login_slides[0];

                    ?>


                    <h1 id="slideTitle">

                        <?= !empty($first_slide['title'])
                            ? htmlspecialchars($first_slide['title'])
                            : htmlspecialchars($school_name);
                        ?>

                    </h1>


                    <p id="slideDescription">

                        <?= !empty($first_slide['description'])
                            ? htmlspecialchars($first_slide['description'])
                            : 'Welcome to our school portal. Sign in to access your account and continue.';
                        ?>

                    </p>


                </div>

            </div>


            <!-- =================================================
                 SLIDER DOTS
                 ================================================= -->

            <?php if (count($login_slides) > 1): ?>

                <div class="brand-dots">


                    <?php foreach ($login_slides as $index => $slide): ?>

                        <span
                            class="brand-dot <?= $index === 0 ? 'active' : ''; ?>"
                        >
                        </span>

                    <?php endforeach; ?>


                </div>

            <?php endif; ?>


        </div>


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

        <div class="col-lg-7 login-panel">


            <div class="login-container">


                <div class="login-card">


                    <div class="login-box">


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

                        <form
                            class="login-form app_frm"
                            action=""
                            method="POST"
                            autocomplete="off"
                        >


                            <!-- MOBILE LOGO -->

                            <div class="login-card-logo">

                                <?php if (!empty($school_logo)): ?>

                                    <img
                                        src="<?= htmlspecialchars($school_logo); ?>"
                                        alt="<?= htmlspecialchars($school_name); ?>"
                                    >

                                <?php endif; ?>

                            </div>


                            <h4 class="login-head">
                                Welcome Back
                            </h4>


                            <p class="login-subtitle">
                                Sign in to access your school portal.
                            </p>


                            <!-- USERNAME -->

                            <div class="mb-3">

                                <label class="form-label">
                                    USERNAME/REG NO
                                </label>


                                <input
                                    class="form-control"
                                    type="text"
                                    placeholder="Username or Registration Number"
                                    required
                                    name="login_id"
                                >

                            </div>


                            <!-- PASSWORD -->

                            <div class="mb-3">

                                <label class="form-label">
                                    PASSWORD
                                </label>


                                <input
                                    class="form-control"
                                    type="password"
                                    placeholder="Password"
                                    required
                                    name="login_password"
                                >

                            </div>


                            <!-- LINKS -->

                            <div class="mb-3 d-flex justify-content-between">


                                <p class="semibold-text mb-2">

                                    <a
                                        href="cbt/"
                                        target="_blank"
                                    >
                                        CBT PORTAL
                                    </a>

                                </p>


                                <p class="semibold-text mb-2">

                                    <a
                                        href="javascript:void(0);"
                                        data-toggle="flip"
                                    >
                                        Forgot Password?
                                    </a>

                                </p>


                            </div>


                            <!-- LOGIN BUTTON -->

                            <div class="mb-3 btn-container d-grid">


                                <button
                                    type="submit"
                                    name="login_btn"
                                    class="btn btn-primary btn-block app_btn"
                                >

                                    <i class="fa fa-sign-in me-2"></i>

                                    SIGN IN

                                </button>


                            </div>


                        </form>


                        <!-- =================================================
                             FORGOT PASSWORD FORM
                             ================================================= -->

                        <form
                            class="forget-form app_frm"
                            action=""
                            method="POST"
                            autocomplete="off"
                        >


                            <!-- MOBILE LOGO -->

                            <div class="login-card-logo">

                                <?php if (!empty($school_logo)): ?>

                                    <img
                                        src="<?= htmlspecialchars($school_logo); ?>"
                                        alt="<?= htmlspecialchars($school_name); ?>"
                                    >

                                <?php endif; ?>

                            </div>


                            <h4 class="login-head">
                                Reset Password
                            </h4>


                            <p class="login-subtitle">

                                Enter your username or registration
                                number to reset your password.

                            </p>


                            <div class="mb-3">

                                <label class="form-label">
                                    USERNAME
                                </label>


                                <input
                                    class="form-control"
                                    type="text"
                                    placeholder="Email or Registration Number"
                                    required
                                    name="username"
                                >

                            </div>


                            <div class="mb-3 btn-container d-grid">


                                <button
                                    type="submit"
                                    class="btn btn-primary btn-block app_btn"
                                >

                                    <i class="fa fa-unlock me-2"></i>

                                    RESET PASSWORD

                                </button>


                            </div>


                            <div class="mb-3 mt-3">

                                <p class="semibold-text mb-0">


                                    <a
                                        href="javascript:void(0);"
                                        data-toggle="flip"
                                    >

                                        <i class="fa fa-chevron-left me-1"></i>

                                        Back to Login

                                    </a>


                                </p>

                            </div>


                        </form>


                    </div>

                </div>


                <!-- =================================================
                     FOOTER
                     ================================================= -->

                <div class="login-footer">

                    Developed by


                    <a
                        href="https://wa.me/2348165684612"
                        target="_blank"
                    >

                         Syntax Digital Tech Ltd

                    </a>


                    <br>

                    08165684612

                </div>


            </div>


        </div>


    </div>

</div>


<!-- =========================================================
     EXISTING SCRIPTS
     ========================================================= -->

<script src="assets/login_js/jquery-3.7.0.min.js"></script>

<script src="assets/login_js/bootstrap.min.js"></script>

<script src="assets/login_js/login.js"></script>

<script src="assets/loader/waitMe.js"></script>

<script src="assets/login_js/forms.js"></script>

<script src="assets/SweetAlerts/sweetalert.js"></script>


<!-- =========================================================
     FORGOT PASSWORD FLIP
     ========================================================= -->

<script>

$(document).on(
    'click',
    '[data-toggle="flip"]',
    function() {

        $('.login-box').toggleClass('flipped');

        return false;

    }
);

</script>


<!-- =========================================================
     EXISTING SWEET ALERT
     ========================================================= -->

<?php

require_once("public/alert.php");

?>


<!-- =========================================================
     LOGIN SLIDER
     ========================================================= -->

<script>

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


        const slides =
            document.querySelectorAll(
                ".brand-slide"
            );


        const dots =
            document.querySelectorAll(
                ".brand-dot"
            );


        const title =
            document.getElementById(
                "slideTitle"
            );


        const description =
            document.getElementById(
                "slideDescription"
            );


        /* =====================================================
           SLIDE DATA FROM PHP
           ===================================================== */

        const slideData = <?php

            echo json_encode(
                array_map(
                    function($slide) {

                        return [

                            'title' =>
                                !empty($slide['title'])
                                ? $slide['title']
                                : '',

                            'description' =>
                                !empty($slide['description'])
                                ? $slide['description']
                                : ''

                        ];

                    },
                    $login_slides
                ),
                JSON_HEX_TAG |
                JSON_HEX_APOS |
                JSON_HEX_QUOT |
                JSON_HEX_AMP
            );

        ?>;


        /* =====================================================
           STOP IF ONLY ONE SLIDE
           ===================================================== */

        if (slides.length <= 1) {

            return;

        }


        let current = 0;


        /* =====================================================
           SHOW SLIDE
           ===================================================== */

        function showSlide(index) {


            slides.forEach(
                function(slide, i) {

                    slide.classList.toggle(
                        "active",
                        i === index
                    );

                }
            );


            dots.forEach(
                function(dot, i) {

                    dot.classList.toggle(
                        "active",
                        i === index
                    );

                }
            );


            /* Update title */

            if (
                title &&
                slideData[index]
            ) {

                title.textContent =
                    slideData[index].title ||
                    "Welcome to our School";

            }


            /* Update description */

            if (
                description &&
                slideData[index]
            ) {

                description.textContent =
                    slideData[index].description ||
                    "Welcome to our school portal. Sign in to access your account and continue.";

            }

        }


        /* =====================================================
           AUTO SLIDE
           ===================================================== */

        setInterval(
            function() {


                current =
                    (current + 1) %
                    slides.length;


                showSlide(current);


            },
            4000
        );


        /* =====================================================
           CLICK DOT TO CHANGE SLIDE
           ===================================================== */

        dots.forEach(
            function(dot, index) {


                dot.style.cursor = "pointer";


                dot.addEventListener(
                    "click",
                    function() {


                        current = index;


                        showSlide(current);


                    }
                );


            }
        );


    }
);

</script>


</body>

</html>