<?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="javascript:;" class="headerButton goBack">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle"></div>
        <div class="right">
            <a href="app-login.php" class="headerButton">
                Login
            </a>
        </div>
    </div>
    <!-- * App Header -->

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

        <div class="section mt-2 text-center">
            <h1>Register now</h1>
            <h4>Fill the form to register</h4>
        </div>
        <div class="section mt-2 mb-5 p-3">
            <form id="registerForm">
                <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-group basic">
                    <div class="input-wrapper">
                        <label class="label" for="password2">Password Again</label>
                       <input type="password" class="form-control" name="password2" placeholder="Type password again" required>
                        <i class="clear-input">
                            <ion-icon name="close-circle"></ion-icon>
                        </i>
                    </div>
                </div>

                <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>
                
                   <div id="formLoader" 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="registerBtn" class="btn btn-primary btn-block btn-lg"> Register</button>

                </div>

            </form>
        </div>

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

<!-- DialogIconedPasswords do not match--> <div class="modal fade dialogbox" id="Dialogpasswordmismatch" data-backdrop="static" tabindex="-1" role="dialog"> 
<div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-icon text-danger"> <ion-icon name="checkmark-circle"></ion-icon> </div> <div class="modal-header"> 
<h5 class="modal-title">Passwords do not match</h5> </div> <div class="modal-body"> Check your password </div> <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div> </div> </div> </div> <!-- * DialogIconedPasswords do not match-->

<!-- DialogIconedPasswords do not match--> <div class="modal fade dialogbox" id="Dialogemailreadyregistered" data-backdrop="static" tabindex="-1" role="dialog"> 
<div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-icon text-danger"> <ion-icon name="checkmark-circle"></ion-icon> </div> <div class="modal-header"> 
<h5 class="modal-title">Email already registered</h5> </div> <div class="modal-body"> <a href="app-login.html" >Please Log in </div> <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div> </div> </div> </div> <!-- * DialogIconedPasswords do not match-->

<!-- DialogIconedPasswords do not match--> <div class="modal fade dialogbox" id="Dialogempty" data-backdrop="static" tabindex="-1" role="dialog"> 
<div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-icon text-danger"> <ion-icon name="checkmark-circle"></ion-icon> </div> <div class="modal-header"> 
<h5 class="modal-title">Empty Fields</h5> </div> <div class="modal-body"> Please fill all fields </div> <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div> </div> </div> </div> <!-- * DialogIconedPasswords do not match-->



    <!-- ///////////// 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>
    
<script>
$("#registerBtn").click(function () {

    $("#formLoader").show();        // 🔄 Show loader
    $("#registerBtn").prop("disabled", true); // Prevent double click

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

        success: function (response) {

            $("#formLoader").hide();       // ❌ Hide loader
            $("#registerBtn").prop("disabled", false);

            if (response.status === "error") {

                if (response.type === "password_mismatch") {
                    $('#Dialogpasswordmismatch').modal('show');
                }

                if (response.type === "exists") {
                    $('#Dialogemailreadyregistered').modal('show');
                }

                if (response.type === "empty") {
                     $('#Dialogempty').modal('show');
                }
            }

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

        error: function () {
            $("#formLoader").hide();
            $("#registerBtn").prop("disabled", false);
            alert("Server error. Try again.");
        }
    });

});
</script>


</body>

