<head>
    <style>
    .form-group {
        position: relative;
        z-index: 0;
        margin-bottom: 20px !important;
    }
    </style>
</head>
<section class="h-100 new-bg py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 text-center mb-3">
                <h2 class="best-mobile2-title">
                    Sign Up
                </h2>
                <?php if ($this->session->flashdata('warningmessage')) { ?>
                <h6 style="color: red;">
                    <?=$this->session->flashdata('warningmessage')?>
                </h6>
                <?php } ?>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-7 col-lg-5">
                <div class="wrap">
                    <div class="login-wrap p-4 p-md-5">
                        <form action="<?=base_url('site/dosignup')?>" method="post" class="signin-form">
                            <div class="form-group mt-3 pb-3">
                                <input type="text" class="form-control" name="name" required>
                                <label class="form-control-placeholder" for="Name">Name</label>
                            </div>

                            <div class="form-group mt-3 pb-3">
                                <input type="email" class="form-control" name="email" required>
                                <label class="form-control-placeholder" for="email">Email</label>
                            </div>
                            <div class="form-group pb-3">
                                <input id="password" type="password" name="password" minlength="6" class="form-control" required>
                                <label class="form-control-placeholder" for="password">Password</label>
                                <!-- <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->
                            </div>

                            <div class="form-group pb-3">
                                <input id="cpassword" type="password" name="cpassword" class="form-control" required>
                                <label class="form-control-placeholder" for="cpassword">Confirm Password</label>
                                <!-- <span toggle="#password-field2" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->
                            </div>
                            <div class="form-group">
                                <button type="submit" class="read-more-btn send-msg signin">Sign Up Now</button>
                            </div>
                        </form>
                        <p class="text-center">Already have an Account? <a class="signup-link" data-toggle="tab" href="<?= base_url('site/login')?>">Login</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
var password = document.getElementById("password"),
    confirm_password = document.getElementById("cpassword");

function validatePassword() {
    if (password.value != confirm_password.value) {
        confirm_password.setCustomValidity("Passwords Don't Match");
    } else {
        confirm_password.setCustomValidity('');
    }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
</script>