<?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>
    <!-- ========================================== -->


    <!-- ================= App Header ================= -->
    <div class="appHeader bg-dark text-light" style="position: relative; z-index: 0;">
        <div id="Btnback" style="display:none;" class="left">
            <ion-icon name="chevron-back-outline" class="text-light"></ion-icon>
        </div>

        <div class="pageTitle">Appsale</div>

        <div class="right"></div>
    </div>
    <!-- ================================================= -->


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

        <!-- -------- Titles -------- -->
        <div id="login" class="section mt-2 text-center">
            <h1>Log in</h1>
        </div>

        <div id="signup" style="display:none;" class="section mt-2 text-center">
            <h1>Sign up</h1>
        </div>

        <div id="user_reg_title" style="display:none;" class="section mt-2 text-center">
            <h3>User Registration</h3>
        </div>


        <!-- ================= LOGIN FORM ================= -->
        <div class="section mt-2 mb-5 p-3">

            <form id="loginForm">

                <!-- Username -->
                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label">Username/Email</label>
                        <input type="email" class="form-control"
                               name="email"
                               placeholder="Your Username or email"
                               required>
                        <i class="clear-input">
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>

                <!-- Password -->
                <div class="form-group basic">
                    <div class="input-wrapper">
                        <label class="label">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>

                <!-- Links -->
                <div id="reg_sec" class="form-links mt-2">
                    <div id="reg">
                        <a href="#">Register Now</a>
                    </div>

                    <div>
                        <a href="app-forgot-password.php" class="text-muted">
                            Forgot Password?
                        </a>
                    </div>
                </div>

                <!-- Login Loader -->
                <div id="loginLoader" class="text-center mt-3" style="display:none;">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>

                <!-- Login Button -->
                <button type="button"
                        id="loginBtn2"
                        class="btn btn-success btn-block mt-3">
                    Log in
                </button>

            </form>


            <!-- ================= FIRST TIME VERIFY ================= -->
            <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 business 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>

                <div id="signin" style="display:none;" class="form-links mt-2">
                    <div>
                        <a href="#">Sign in</a>
                    </div>
                </div>

                <button type="button"
                        id="verifyBtn"
                        class="btn btn-warning btn-block mt-3">
                    Submit
                </button>

            </div>
            <!-- ================================================ -->


            <!-- ================= USER REGISTRATION ================= -->
            <div id="user_reg" style="display:none;">
                <form id="registerForm">

                    <!-- Business Info -->
                    <div class="col-9">
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">Business Name</label>
                                <input type="text" class="form-control"
                                       name="business" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-10">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Location</label>
                                    <input type="text"
                                           class="form-control"
                                           name="country"
                                           readonly>
                                </div>
                            </div>
                        </div>

                        <div class="col-7">
                            <input type="hidden" name="id">
                        </div>
                    </div>

                    <!-- Names -->
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">First Name*</label>
                                    <input type="text"
                                           class="form-control"
                                           name="fname"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Second Name*</label>
                                    <input type="text"
                                           class="form-control"
                                           name="sname"
                                           required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="col-9">
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">E-mail</label>
                                <input type="email"
                                       class="form-control"
                                       name="email"
                                       required>
                            </div>
                        </div>
                    </div>

                    <!-- Phone -->
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Phone Number*</label>
                                    <input type="text"
                                           class="form-control"
                                           name="phone"
                                           required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Username -->
                    <div class="row">
                        <div class="col-8">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Username*</label>
                                    <input type="text"
                                           class="form-control"
                                           name="username"
                                           required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Password -->
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Password</label>
                                    <input type="password"
                                           class="form-control"
                                           name="password"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Password Again</label>
                                    <input type="password"
                                           class="form-control"
                                           name="password2"
                                           required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Terms -->
                    <div class="custom-control custom-checkbox mt-2">
                        <input type="checkbox"
                               class="custom-control-input"
                               id="customChecka1"
                               name="terms">
                        <label class="custom-control-label"
                               for="customChecka1">
                            I agree
                            <a href="#" data-toggle="modal" data-target="#termsModal">
                                terms and conditions
                            </a>
                        </label>
                    </div>

                    <!-- Loader -->
                    <div id="formLoader"
                         class="text-center mt-3"
                         style="display:none;">
                        <div class="spinner-border text-primary"></div>
                    </div>
                     <div id="loginLoader3" class="text-center mt-3" style="display:none;">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>

                    <!-- Register Button -->
                    <button type="button"
                            id="registerBtn"
                            class="btn btn-warning btn-block mt-3">
                        Register
                    </button>

                </form>
            </div>
            <!-- ================================================== -->

        </div>
    </div>
    <!-- ================================================= -->


    <!-- ================= Bottom Scripts ================= -->
    <?php require '../includes/js-bottom-scripts.php'; ?>
    <!-- ================================================= -->
    
        <!-- ================= Modal popups ================= -->
   
    <!-- ================================================= -->
    
                <div class="modal fade dialogbox" id="userexists" 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">Registration Failed</h5>
                    </div>
                    <div class="modal-body">
                        Email or username already exists
                    </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="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="loginBlockedModal" 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">Blocked</h5>
                    </div>
                    <div class="modal-body">
                        Too many login attempts. Try again in 15 minutes.
                    </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 created successfully. 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>

        /* =========================================================
           Helper Functions
        ========================================================= */
        
        // Show element
        function show(id) {
            document.getElementById(id).style.display = "block";
        }
        
        // Hide element
        function hide(id) {
            document.getElementById(id).style.display = "none";
        }
        
        // Enable password field
        function enablePassword() {
            document.querySelector("input[name='password']").disabled = false;
        }
        
        // Disable password field
        function disablePassword() {
            document.querySelector("input[name='password']").disabled = true;
        }
        
        // Reset to Login View
        function resetToLogin() {
            hide("firstimeverifySection");
            hide("signup");
            hide("signin");
            hide("Btnback");
            hide("user_reg");
            hide("user_reg_title");
        
            show("login");
            show("loginForm");
            show("reg_sec");
        
            enablePassword();
        }
        
        
        /* =========================================================
           Back Button
        ========================================================= */
        
        document.getElementById("Btnback").addEventListener("click", function (e) {
            e.preventDefault();
            resetToLogin();
        });
        
        
        /* =========================================================
           Sign In (from verify section)
        ========================================================= */
        
        document.getElementById("signin").addEventListener("click", function (e) {
            e.preventDefault();
            resetToLogin();
        });
        
        
        /* =========================================================
           Login Submit
        ========================================================= */
        
        document.getElementById("loginBtn2").addEventListener("click", function () {
        
            let form     = document.getElementById("loginForm");
            let formData = new FormData(form);
        
            this.disabled = true;
            hide("reg_sec");
            show("loginLoader");
        
            fetch("../includes/login-verify.php", {
                method: "POST",
                body: formData
            })
            .then(res => res.json())
            .then(data => {
        
                hide("loginLoader");
                
                 if (data.status === "blocked") {
                    $('#loginBlockedModal').modal('show');
                    this.disabled = false;
                }
        
               else if (data.status === "success") {
                    window.location.href = "app-canvas.php#pages";
                }
        
                else if (data.status === "unverified") {
        
                    hide("loginForm");
                    show("firstimeverifySection");
        
                    disablePassword();
        
                    this.disabled = false;
                    show("reg_sec");
                }
        
                else {
                    $('#loginErrorModal').modal('show');
                    this.disabled = false;
                    show("reg_sec");
                }
            });
        
        });
        
        
        /* =========================================================
           Verify Business Code
        ========================================================= */
        
        document.getElementById("verifyBtn").addEventListener("click", function () {
        
            let code = document.querySelector("input[name='code']").value;
        
            show("loginLoader2");
        
            fetch("../includes/biz-code-user-verify.php", {
                method: "POST",
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `code=${encodeURIComponent(code)}`
            })
            .then(res => res.json())
            .then(data => {
        
                hide("loginLoader2");
        
                if (data.status === "success") {
        
                    // Hide verify area
                    hide("firstimeverifySection");
                    hide("signup");
                    hide("signin");
        
                    // Show registration form
                    show("user_reg");
                    show("user_reg_title");
        
                    // Auto populate
                    document.querySelector("input[name='business']").value = data.org_name;
                    document.querySelector("input[name='country']").value  = data.address;
                    document.querySelector("input[name='id']").value       = data.id;
                }
                else {
                    $('#verifyErrorModal').modal('show');
                }
        
            });
        
        });
        
            /* =========================================================
               User Registration
            ========================================================= */
            
            document.getElementById("registerBtn").addEventListener("click", function () {
            
                let form = document.getElementById("registerForm");
                let formData = new FormData(form);
            
                this.disabled = true;
                show("loginLoader3");
            
                fetch("../includes/user-registration.php", {
                    method: "POST",
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
            
                    hide("loginLoader3");
                    this.disabled = false;
            
                    if (data.status === "success") {
            
                        $('#loginSuccessModal').modal('show');
            
                        resetToLogin();
                        form.reset();
                    }
                else if (data.status === "exists") {
                    
                     $('#userexists').modal('show');
        
                }
                
                    else {
                        $('#verifyErrorModal').modal('show');
                    }
                })
                .catch(() => {
                    hide("loginLoader3");
                    this.disabled = false;
                });
            
            });

        /* =========================================================
           Register Now Click
        ========================================================= */
        
        document.getElementById("reg").addEventListener("click", function (e) {
        
            e.preventDefault();
        
            hide("loginForm");
            hide("login");
        
            show("firstimeverifySection");
            show("signup");
            show("Btnback");
            show("signin");
        
            disablePassword();
        
        });

</script>



</body>
