<?php
include('dist/db.php');
function check_company_name_exist($pass_name){
    global $conn;
    $qry = mysqli_query($conn, "SELECT * FROM db_users where type='company' and LOWER(username)='".$pass_name."'");

    return $qry->num_rows;
}
if(isset($_POST['check_company_name_exist']) && !empty($_POST['pass_name'])){
    
    if(check_company_name_exist($_POST['pass_name']) == 0){
        echo "<span style='color:green;'>Domain name is availble.</span>";

    } else {
            echo "<span style='color:red;'>Domain already exist.</span><span style='color: black;'> Use Below company names:</span><br><ul class='avlbl-names'>";
            $str_result = $_POST['pass_name'];
            $total = 3;
            for($i=1; $i<=$total; $i++){
               
                $random_position = rand(0,strlen($str_result)-1);
                $chars = "0123456789-_";
                $random_char = $chars[rand(0,strlen($chars)-1)];
                $newString = substr($str_result,0,$random_position).$random_char.substr($str_result,$random_position);
               
                if(check_company_name_exist($newString) == 0){
                    echo "<li>".$newString."</li>";
                } else {
                    if($total < 8){
                       $total++; 
                    }
                }
            }
            echo '</ul>';
 
        
    }
    die;
}
$error = '';
if(isset($_POST['login'])){
    $email = $_POST['email'];
    $pass = md5($_POST['password']);
    $emp_list = mysqli_fetch_assoc(mysqli_query($conn, "select * from db_users where email='$email' and password='$pass' "));
  
    if($emp_list){
        $_SESSION['loggedin_user'] = $emp_list['id'];
        echo "<script>window.location.href='dist/employee.php';</script>";
    } else {
        $error = 'Email or password are mismatched.';
    }
}
$error_msg = '';
$full_name = '';
$username = '';
$email = '';
$phone = '';
$time = '';
$type_select = '';
if(isset($_POST['create_account'])){

        $full_name     =  $_POST['full_name'];
        $username      =  $_POST['company_domain'];
        $email         =  $_POST['email'];
        $phone         =  $_POST['phone'];
        $time          =  date('Y-m-d h:i:s');
        $type_select   =  $_POST['type_select'];
        $password      =  md5($_POST['password']);

        $email_exist = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM db_users WHERE email='".$email."'")); 

        $username_exist = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM db_users WHERE type='company' and username='".$username."'"));  
        if(empty($email_exist) && empty($username_exist)){
            $query = "insert into  db_users(full_name, username, email, phone, password, type, date_time) values ('$full_name', '$username', '$email', '$phone', '$password', '$type_select', '$time' )";   
    
            $sql=mysqli_query($conn,$query);
            if($sql){
                $error_msg = '<b style="color:green;" class="success-msg">Account Created Successfully.!! You can <a href="/login.php" style="text-decoration: underline;color: green;">Login here</a>.</b>';
        
                $headers = "Content-Type: text/html; charset=UTF-8\r\n";
                //mail($email,"Register Successfully", "Hello ".$full_name.",<br><br> You are successfully register with us as <b>".$_POST['type_select']."</b>.  You can login here : <a href='".$site_url."login.php'><u>".$site_url."login.php</u></a><br><br> <b>Best Regards,</b><br> Timesheet.",$headers);
                send_zoho_mail($email,"Register Successfully", "Hello ".$full_name.",<br><br> You are successfully register with us as <b>".$_POST['type_select']."</b>.  You can login here : <a href='".$site_url."login.php'><u>".$site_url."login.php</u></a><br><br> Regards,<br> Timesheethub.");
                $full_name     =  '';
                $username      =  '';
                $email         =  '';
                $phone         =  '';
                $time          =  '';
                $type_select   =  '';
                $password      =  '';
            } else {
                $error_msg = 'There are something error.';
            }
            

        } else {
            if(!empty($username_exist)){
                $error_msg = 'Company name already exist.';
            } else {
                $error_msg = 'Email already exist.';
            }
            
        }
        
}


?>





<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Register | Timesheethub</title>
    <link rel="icon" href="<?= $site_url; ?>favicon.ico" type="image/x-icon"> <!-- Favicon-->

    <!-- project css file  -->
    <link rel="stylesheet" href="<?= $site_url; ?>/assets/css/timetracker.style.min.css">
</head>
<style type="text/css">
    @media(max-width:767px){
        .c-accout label {
            font-size: 13px !important;
        }
        .ca-btn {
            font-size: 14px !important;
        }
    }
    .create-text h1, .create-text span{
        color: #fff;
    }
    a.text-primary.already-text, a.text-primary.already-text span.text-primary {
        color: #fff !important;
    }
    ul.avlbl-names li {
        cursor: pointer;
        
    }
    ul.avlbl-names{
        padding-left: 15px;
    }
    input.loading {    
    background-color: #ffffff;
    background-image: url("/dist/assets/images/loading.gif");
    background-size: 25px 25px;
    background-position:right center;
    background-repeat: no-repeat;
}
.password-icon{
    display: flex;
}
.form-control[name="password"] {
    border-right: 0px;
    border-radius: 0.25rem 0px 0px 0.25rem;
    padding-right: 0;
}
i.pwd-toggle {
    padding: 11px 6px 9px 0px;
    cursor: pointer;
    background: #fff;
    margin-left: -5px;
    border: 1px solid #f0f0f0;
    border-left: 0px;
    border-radius: 0px 0.25rem 0.25rem 0px;
}
input.form-control:focus + i {
    border: 1px solid black;
    border-left: 0;
}
</style>
<body>
    <div id="timetracker-layout" class="theme-mist">

        <!-- main body area -->
        <div class="main p-2 py-3 p-xl-5">

            <!-- Body: Header -->
            <div class="container-xxl">
                <!-- header rightbar icon -->
                <div class="row align-items-center">
                    <div class="col">
                        <a href="index.php" class="d-flex align-item-center">
                            <i class="icofont-stopwatch fs-3"></i>
                            <h5 class="mb-0 mt-1 mx-2">Timesheethub</h5>
                        </a>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex align-item-center">
                           <!--  <div class="dropdown">
                                <a class="nav-link dropdown-toggle pulse" href="#" role="button" data-bs-toggle="dropdown">
                                    <img src="../assets/images/flag/GB.png" alt="">
                                </a>
                                <div class="dropdown-menu rounded-lg shadow border-0  dropdown-menu-md-end p-0 m-0">
                                    <div class="card border-0">
                                        <ul class="list-unstyled py-2 px-3">
                                            <li>
                                                <a href="#" class=""><img src="../assets/images/flag/GB.png" alt=""> English</a>
                                            </li>
                                            <li>
                                                <a href="#" class=""><img src="../assets/images/flag/DE.png" alt=""> German</a>
                                            </li>
                                            <li>
                                                <a href="#" class=""><img src="../assets/images/flag/FR.png" alt=""> French</a>
                                            </li>
                                            <li>
                                                <a href="#" class=""><img src="../assets/images/flag/IT.png" alt=""> Italian</a>
                                            </li>
                                            <li>
                                                <a href="#" class=""><img src="../assets/images/flag/RU.png" alt=""> Russian</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div> -->
                            <!-- <div class="setting ms-2 mt-1">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#Settingmodal">
                                    <svg xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" width="30px" height="30px" viewBox="0 0 38 38">
                                        <path   d="M19,28c-4.964,0-9-4.04-9-9c0-4.964,4.036-9,9-9c4.96,0,9,4.036,9,9  C28,23.96,23.96,28,19,28z M19,16c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S20.654,16,19,16z" style="fill:var(--primary-color);" data-st="fill:var(--chart-color4);"></path>
                                        <path class="st0" d="M19,24c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S21.757,24,19,24z M19,16c-1.654,0-3,1.346-3,3  s1.346,3,3,3s3-1.346,3-3S20.654,16,19,16z M32,19c0-1.408-0.232-2.763-0.648-4.034l3.737-1.548l-0.766-1.848l-3.743,1.551  c-1.25-2.452-3.251-4.452-5.702-5.701l1.551-3.744l-1.848-0.765l-1.548,3.737C21.762,6.232,20.409,6,19,6  c-1.409,0-2.756,0.248-4.026,0.668l-1.556-3.756L11.57,3.677l2.316,5.592C15.416,8.462,17.154,8,19,8c6.065,0,11,4.935,11,11  s-4.935,11-11,11S8,25.065,8,19c0-3.031,1.232-5.779,3.222-7.771L9.808,9.816c-0.962,0.963-1.764,2.082-2.388,3.306l-3.744-1.551  l-0.765,1.847l3.738,1.548C6.232,16.238,6,17.592,6,19c0,1.409,0.232,2.763,0.648,4.034l-3.737,1.548l0.766,1.848l3.744-1.551  c1.25,2.451,3.25,4.451,5.701,5.7l-1.551,3.744l1.848,0.766l1.548-3.737C16.237,31.768,17.591,32,19,32s2.762-0.232,4.033-0.648  l1.549,3.737l1.848-0.766l-1.552-3.743c2.451-1.25,4.451-3.25,5.701-5.701l3.744,1.551l0.765-1.848l-3.736-1.548  C31.768,21.763,32,20.409,32,19z"></path>
                                    </svg>
                                </a>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Body: Body -->
            <div class="body d-flex p-0 p-md-2 p-xl-5">
                <div class="container-xxl">
                    <div class="row g-0 border border-secondary rounded-3 mt-2 mt-md-0">
                        <div class="col-lg-6 d-flex justify-content-center align-items-center  bg-secondary py-2 py-md-0" style="padding: 2% !important;">
                            <div class="d-flex flex-column p-2 create-text" style="width: 85%;">
                                <h1>Create Your Account</h1>
                                <span>Register with your email</span>
                                
                                <div class="tab-content mt-4 mb-3 c-accout">
                                    <div class="tab-pane fade show active" id="Email">
                                        <div class="card">
                                            <div class="card-body p-4 ">
                                                <p class="error_form"><?= $error_msg; ?></p>
                                                <form method="POST" class="reg_form">
                                                    <div class="mb-3">
                                                        <label class="form-label fs-6">Full Name <span class="text-danger">*</span></label>
                                                        <input type="text" name="full_name" class="form-control" required="" value="<?= $full_name; ?>">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label fs-6">Company Name <span class="text-danger">*</span></label>
                                                        <input type="text" name="company_domain" class="form-control" required="" value="<?= $username; ?>" autocomplete="company_domain" onkeydown="return /[a-z0-9\d\-_]/i.test(event.key);" onkeyup="this.value = this.value.toLowerCase();">
                                                        <div class="suggestions" style="display: none;"></div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label fs-6">Email address <span class="text-danger">*</span></label>
                                                        <input type="email" name="email" class="form-control" required="" value="<?= $email; ?>" autocomplete="new-email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label fs-6">Password <span class="text-danger">*</span></label>
                                                        <div class="password-icon">
                                                            <input type="password" name ="password" id="password" class="form-control" required="" autocomplete="new-password" onkeyup="checkPasswordStrength();">
                                                            <i class="icofont-eye-alt text-warning pwd-toggle"></i>
                                                        </div>
                                                        <div id="password-strength-status"></div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label fs-6">Phone <span class="text-danger">*</span></label>
                                                        <input type="text" name="phone" class="form-control" value="<?= $phone; ?>" onkeypress="return onlyNumberKey(event)" maxLength="10">
                                                    </div>
                                                 <!--    <div class="mb-3">
                                                        <label class="form-label fs-6">Company Name</label>
                                                        <input type="text" name="company_name" class="form-control">
                                                    </div> -->
                                                     <div class="mb-3">
                                                        <label class="form-label fs-6">Type <span class="text-danger">*</span></label>
                                                        <select class="form-select" name="type_select" required="">
                                                            <option value="">Select Type</option>
                                                            <!-- <option value="employee" <?= ($type_select == 'employee') ? 'selected' : ''; ?> >Employee</option> -->
                                                            <option value="company" selected="" >Company</option>
                                                        </select>
                                                    </div>
                                                   <!--  <div class="mb-3">
                                                        <label class="form-label fs-6">Time</label>
                                                        <input type="date" class="form-control" id="datepickerded" name="time" required="" value="2022-07-30">
                                                    </div> -->
                                                    
                                                    <!-- <div class="mb-3">
                                                        <label class="form-label fs-6">Confirm Password </label>
                                                        <input type="password" name="confirm_password" class="form-control">
                                                    </div> -->
                                                    <!-- <div class="mb-3">
                                                        <label class="form-label fs-6">Referral ID</label>
                                                        <input type="text" class="form-control">
                                                    </div> -->
                                                  
                                                    <input type="submit" name="create_account" value="Create Account" class="btn btn-primary text-uppercase py-2 fs-5 w-100 mt-2 ca-btn">
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                                <a class="text-primary already-text" href="login.php" title="#">Already registered? <span class="text-primary text-decoration-underline">Log In</span></a>
                            </div>
                        </div>
                        <div class="col-lg-6 d-none d-lg-flex justify-content-center align-items-center ">
                            <div class="qr-block text-center">
                               <div class="col">
                                    <a href="/" class="timetracker-logo align-item-center">
                                        <i class="icofont-stopwatch fs-3" style="font-size: 70px !important;line-height: 70px !important;"></i>
                                        <h5 class="logo-text">Timesheethub</h5>
                                    </a>
                                </div>
                                
                            </div>
                        </div>
                    </div> <!-- End Row -->
                    
                </div>
            </div>

            <!-- Modal Custom Settings-->
            <div class="modal fade right" id="Settingmodal" tabindex="-1"  aria-hidden="true">
                <div class="modal-dialog  modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Custom Settings</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body custom_setting">
                            <!-- Settings: Color -->
                            <div class="setting-theme pb-3">
                                <h6 class="card-title mb-2 fs-6 d-flex align-items-center"><i class="icofont-color-bucket fs-4 me-2 text-primary"></i>Template Color Settings</h6>
                                <ul class="list-unstyled row row-cols-3 g-2 choose-skin mb-2 mt-2">
                                    <li data-theme="indigo"><div class="indigo"></div></li>
                                    <li data-theme="tradewind"><div class="tradewind"></div></li>
                                    <li data-theme="monalisa"><div class="monalisa"></div></li>
                                    <li data-theme="mist" class="active"><div class="mist"></div></li>
                                    <li data-theme="cyan"><div class="cyan"></div></li>
                                    <li data-theme="green"><div class="green"></div></li>
                                    <li data-theme="orange"><div class="orange"></div></li>
                                    <li data-theme="blush"><div class="blush"></div></li>
                                    <li data-theme="red"><div class="red"></div></li>
                                </ul>
                            </div>
                            <!-- Settings: Template dynamics -->
                            <div class="dynamic-block py-3">
                                <ul class="list-unstyled choose-skin mb-2 mt-1">
                                    <li data-theme="dynamic"><div class="dynamic"><i class="icofont-paint me-2"></i> Click to Dyanmic Setting</div></li>
                                </ul>
                                <div class="dt-setting">
                                    <ul class="list-group list-unstyled mt-1">
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label>Primary Color</label>
                                            <button id="primaryColorPicker" class="btn bg-primary avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label>Secondary Color</label>
                                            <button id="secondaryColorPicker" class="btn bg-secondary avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 1</label>
                                            <button id="chartColorPicker1" class="btn chart-color1 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 2</label>
                                            <button id="chartColorPicker2" class="btn chart-color2 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 3</label>
                                            <button id="chartColorPicker3" class="btn chart-color3 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 4</label>
                                            <button id="chartColorPicker4" class="btn chart-color4 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 5</label>
                                            <button id="chartColorPicker5" class="btn chart-color5 avatar xs border-0 rounded-0"></button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Settings: Font -->
                            <div class="setting-font py-3">
                                <h6 class="card-title mb-2 fs-6 d-flex align-items-center"><i class="icofont-font fs-4 me-2 text-primary"></i> Font Settings</h6>
                                <ul class="list-group font_setting mt-1">
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-poppins" value="font-poppins">
                                            <label class="form-check-label" for="font-poppins">
                                                Poppins Google Font
                                            </label>
                                        </div>
                                    </li>
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-opensans" value="font-opensans">
                                            <label class="form-check-label" for="font-opensans">
                                                Open Sans Google Font
                                            </label>
                                        </div>
                                    </li>
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-montserrat" value="font-montserrat">
                                            <label class="form-check-label" for="font-montserrat">
                                                Montserrat Google Font
                                            </label>
                                        </div>
                                    </li>
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-Plex" value="font-Plex" checked="">
                                            <label class="form-check-label" for="font-Plex">
                                                Plex Google Font
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!-- Settings: Light/dark -->
                            <div class="setting-mode py-3">
                                <h6 class="card-title mb-2 fs-6 d-flex align-items-center"><i class="icofont-layout fs-4 me-2 text-primary"></i>Contrast Layout</h6>
                                <ul class="list-group list-unstyled mb-0 mt-1">
                                    <li class="list-group-item d-flex align-items-center py-1 px-2">
                                        <div class="form-check form-switch theme-switch mb-0">
                                            <input class="form-check-input" type="checkbox" id="theme-switch">
                                            <label class="form-check-label" for="theme-switch">Enable Dark Mode!</label>
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex align-items-center py-1 px-2">
                                        <div class="form-check form-switch theme-high-contrast mb-0">
                                            <input class="form-check-input" type="checkbox" id="theme-high-contrast">
                                            <label class="form-check-label" for="theme-high-contrast">Enable High Contrast</label>
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex align-items-center py-1 px-2">
                                        <div class="form-check form-switch theme-rtl mb-0">
                                            <input class="form-check-input" type="checkbox" id="theme-rtl">
                                            <label class="form-check-label" for="theme-rtl">Enable RTL Mode!</label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-start">
                            <button type="button" class="btn btn-white border lift" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary lift">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

     <!-- Jquery Core Js -->
    <script src="<?= $site_url; ?>/assets/bundles/libscripts.bundle.js"></script>

    <!-- Jquery Page Js -->
    <script src="<?= $site_url; ?>/js/template.js"></script>
    <script type="text/javascript">
        function onlyNumberKey(evt) {
      
            // Only ASCII character in that range allowed
            var ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }
        jQuery(document).on("click", ".pwd-toggle", function(){
            var cur_type = jQuery(this).prev('input').attr('type');
            if(cur_type == 'password'){
                jQuery(this).prev('input').attr('type','text');
                jQuery(this).removeClass('icofont-eye');
                jQuery(this).addClass('icofont-eye-blocked');
            } else {
                jQuery(this).prev('input').attr('type','password');
                jQuery(this).removeClass('icofont-eye-blocked');
                jQuery(this).addClass('icofont-eye');
                
            }
          });
        var timeout = null;
        var is_ajax_is_running = 0;
      $(document).on("keyup","input[name='company_domain']", function(){
            var curr = this;
            $(curr).addClass('loading');
           clearTimeout(timeout);
           timeout = setTimeout(function() {
                if($(curr).val()!= ''){
                    
                    
                    $(".suggestions").show();

                    $.ajax({
                        type:"post",
                        url:window.location.href,
                        data:{check_company_name_exist:1,pass_name:$(curr).val()},
                        beforeSend: function() {
                              is_ajax_is_running = 1;
                        },
                        success:function(res){
                            is_ajax_is_running = 0;
                            $(".suggestions").html(res);
                            $(curr).removeClass('loading');
                        }

                    })

                } else {
                    $(".suggestions").hide();
                     $(curr).removeClass('loading');
                }
                   
            }, 1000);
           
            
            
        });
      $(document).on("click", "ul.avlbl-names li", function(){
            $('input[name="company_domain"]').val($(this).text());
            $('input[name="company_domain"]').keyup();
      });
      function checkPasswordStrength() {
            var number = /([0-9])/;
            var alphabets = /([a-zA-Z])/;
            var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;
            var password = $('#password').val().trim();
            if (password.length < 6) {
                $('#password-strength-status').removeClass();
                $('#password-strength-status').addClass('weak-password');
                $('#password-strength-status').html("Weak (should be atleast 6 characters.)");
            } else {
                if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
                    $('#password-strength-status').removeClass();
                    $('#password-strength-status').addClass('strong-password');
                    $('#password-strength-status').html("Strong");
                    return true;
                }
                else {
                    $('#password-strength-status').removeClass();
                    $('#password-strength-status').addClass('medium-password');
                    $('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
                }
            }
            return false;
        }
        $(document).on("submit", ".reg_form", function(e){
            
            if(!checkPasswordStrength()){
                e.preventDefault();
                alert("Password Must be strong.")
                return false;
            } else {
                return true;
            }
        })

    </script>
    <style type="text/css">
        .error_form{
            color: red;
        }
    </style>
</body>

</html>