<?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 class="left">
            <a href="" class=" text-primary" >
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </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>Log in</h1>
            <h4>Fill the form to 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 class="form-links mt-2">
                    <div>
                        <a href="app-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>

                <div class="form-button-group">
                   <button type="button" id="loginBtn" class="btn btn-primary btn-block btn-lg">Log in</button>
                </div>

            </form>
        </div>

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

    <!-- ///////////// Js Files ////////////////////  -->
    <!-- Jquery -->
    <script src="assets/js/lib/jquery-3.4.1.min.js"></script>
    <!-- Bootstrap-->
    <script src="assets/js/lib/popper.min.js"></script>
    <script src="assets/js/lib/bootstrap.min.js"></script>
    <!-- Ionicons -->
    <script src="../../../../unpkg.com/ionicons%405.0.0/dist/ionicons.js"></script>
    <!-- Owl Carousel -->
    <script src="assets/js/plugins/owl-carousel/owl.carousel.min.js"></script>
    <!-- Base Js File -->
    <script src="assets/js/base.js"></script>
    
    
<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>

<script>
$("#loginBtn").click(function () {

    $("#loginLoader").show();
    $("#loginBtn").prop("disabled", true);

    $.ajax({
        url: "../includes/login.php",
        type: "POST",
        data: $("#loginForm").serialize(),
        dataType: "json",

        success: function (response) {
            $("#loginLoader").hide();
            $("#loginBtn").prop("disabled", false);

            if (response.status === "error") {
                $('#loginErrorModal').modal('show');
            }

            if (response.status === "success") {
                window.location.href = "app-index.php";
            }
        },

        error: function () {
            $("#loginLoader").hide();
            $("#loginBtn").prop("disabled", false);
            alert("Server error");
        }
    });

});
</script>




</body>

