<?php
// Initialize the session
require_once "../includes/header.php";
?>

<body class="bg-light">

    <!-- loader -->
    <div id="loader">
        <img src="assets/img/logo-icon.png" alt="icon" class="loading-icon">
    </div>
    <!-- * loader -->

    <!-- App Header -->
    <div class="appHeader no-border">
        <div id="Btnback" class="left">
           
                <ion-icon name="chevron-back-outline" class="text-primary" ></ion-icon>
          
        </div>
        <div class="pageTitle"></div>
        <div class="right">
        </div>
    </div>
    <!-- * App Header -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="section mt-2 text-center">
            <h1>Admin</h1>
            <h4>Please log in</h4>
        </div>
        <div class="section mt-2 mb-5 p-3">
            <form id="loginForm">
                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="email1">E-mail</label>
                        <input type="email" class="form-control" name="email" placeholder="Your e-mail" required>
                        <i class="clear-input"><ion-icon name="close-circle"></ion-icon></i>
                    </div>
                </div>

                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="password1">Password</label>
                       <input type="password" class="form-control" name="password" placeholder="Your password" required>
                        <i class="clear-input"><ion-icon name="close-circle"></ion-icon></i>
                    </div>
                </div>

                <div id="reg" class="form-links mt-2">
                    <div>
                        <a href="app-admin-register.php">Register Now</a>
                    </div>
                    <div><a href="app-forgot-password.php" class="text-muted">Forgot Password?</a></div>
                </div>
                
                <div id="loginLoader" class="text-center mt-3" style="display:none;">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
                
                 <button type="button" id="loginBtn2" class="btn btn-primary btn-block mt-3">Log in</button>


            </form>
            
            <div id="firstimeverifySection" style="display:none;">
     <div class="form-group basic">
                    <div class="input-wrapper">
    <input type="text" name="code" maxlength="8" class="form-control mt-2" placeholder="Enter 8 digit code" required>
   
     </div>
  </div>
  
  <div id="loginLoader2" class="text-center mt-3" style="display:none;">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
    <button type="button" id="verifyBtn" class="btn btn-success btn-block mt-3">Verify</button>
</div>

        </div>

    </div>
        </div>

    </div>
    <!-- * App Capsule -->

    <!-- ///////////// Js Files ////////////////////  -->
    <!-- Jquery -->
   <?php
   require '../includes/js-bottom-scripts.php';
   ?>
    
    
<div class="modal fade dialogbox" id="loginErrorModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-icon text-danger">
              <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">Login Failed</h5>
            </div>
            <div class="modal-body">
                Invalid email or password
            </div>
           <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div>
        </div>
    </div>
</div>

<div class="modal fade dialogbox" id="verifyErrorModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-icon text-danger">
                <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">Verify Failed</h5>
            </div>
            <div class="modal-body">
                Invalid or expired verification code
            </div>
           <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div>
        </div>
    </div>
</div>

<div class="modal fade dialogbox" id="loginSuccessModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-icon text-success">
            </div>
            <div class="modal-body">
                Account verified. You can now login.
            </div>
           <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div>
        </div>
    </div>
</div>

<script>

document.getElementById("Btnback").addEventListener("click", function () {
    
     document.getElementById("firstimeverifySection").style.display = "none";
   document.querySelector("input[name='password']").disabled = false;
    document.getElementById("loginForm").style.display = "block";
 e.preventDefault(); // stop page jump
   
});

document.getElementById("loginBtn2").addEventListener("click", function () {
    let form = document.getElementById("loginForm");
    let formData = new FormData(form);
    
     document.getElementById("loginBtn2").disabled = true;
     document.getElementById("reg").style.display = "none";
    document.getElementById("loginLoader").style.display = "block";

    fetch("../includes/login-verify.php", {
        method: "POST",
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("loginLoader").style.display = "none";

        if (data.status === "success") {
            window.location.href = "app-canvas.php";
        }

        else if (data.status === "unverified") {
            // show code input section
            document.getElementById("firstimeverifySection").style.display = "block";
            document.getElementById("loginForm").style.display = "none";
            document.querySelector("input[name='password']").disabled = true;
            
            document.getElementById("loginBtn2").disabled = false;
            document.getElementById("reg").style.display = "block";
            
        }

        else {
            $('#loginErrorModal').modal('show');
            document.getElementById("loginBtn2").disabled = false;
            document.getElementById("reg").style.display = "block";
        }
    });
});

document.getElementById("verifyBtn").addEventListener("click", function () {
    let email = document.querySelector("input[name='email']").value;
    let code  = document.querySelector("input[name='code']").value;

    document.getElementById("loginLoader2").style.display = "block";

    fetch("../includes/verify-first-time-user.php", {
        method: "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: `email=${encodeURIComponent(email)}&code=${encodeURIComponent(code)}`
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("loginLoader2").style.display = "none";

        if (data.status === "success") {
            $('#loginSuccessModal').modal('show');
            location.reload();
        } else {
            $('#verifyErrorModal').modal('show');
        }
    });
});


</script>




</body>

