{%include "../fcommon/auth-header.html"%}
{% load static %}

 
    <!-- =============  courses start =============   -->

    <section class="courses p-md-5 mt-5" id="courses">
        <div class="container">
            
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8 col-sm-12 mt-3 mb-3">
                    <div class="card card-body shadow p-5">
                        
                        <form id="registerForm">
                            <h4 class="text-center"><strong>Create An Account</strong></h4>
                            <p class="line"></p><br>
                            {% csrf_token %}
                            <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="username" class="form-label">First Name </label>
                                <input type="text" class="form-control" id="first_name" required aria-describedby="emailHelp"
                                    placeholder="">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="username" class="form-label">Last Name </label>
                                <input type="text" class="form-control" id="last_name" required aria-describedby="emailHelp"
                                    placeholder="">
                            </div>
                            <div class="mb-3">
                                <label for="username" class="form-label">Mobile Number</label>
                                <input type="tel"  minlength="10" maxlength="10" pattern="[0-9]{10}" required class="form-control" id="mobile" aria-describedby="emailHelp"
                                    placeholder="">
                            </div>
                            <div class="mb-3">
                                <label for="username" class="form-label">Whatsapp Number</label>
                                <input type="tel"  minlength="10" maxlength="10" pattern="[0-9]{10}" required class="form-control" id="whatsapp" aria-describedby="emailHelp"
                                    placeholder="">
                                    <p class="text-end" style="color: grey"><input type="checkbox" id="same_number"/> Same as mobile number</p>
                            </div>
                            <div class="mb-3">
                                <label for="Email1" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="remail" required aria-describedby="emailHelp"
                                    placeholder="">
                            </div>
                            <div class="mb-3">
                                <label for="Password" class="form-label">Password</label>
                                <input type="password" class="form-control" id="rpassword" required placeholder="**********">
                            </div>
                            <div id="register-msg"></div>
                            <button type="submit" class="login-btn mt-4">Sign Up</button>
                            
                            <p class="signup pt-4">Already have an account? <a href="/login" class="text-primary">Login</a></p>
                           </div> 
                        </form>
                        <!-- <form method="POST">
                            {% csrf_token %}<br>
                            <a class="btn login-with-google-btn" id="google-login-button">Sign Up with Google</a>
                        </form> -->
                    </div>
                </div>
            </div>


        </div>
    </section>
    <script>
//          document.getElementById('google-login-button').addEventListener('click', function() {
//     window.location.href = '/google-login/';
//   });
  $('#same_number').click(function(){
    if($(this).is(':checked')){
        $('#whatsapp').val($('#mobile').val());
        $('#whatsapp').prop('readonly', true);
    }
    else{

        $('#whatsapp').prop('readonly', false);
    }
  })
    </script>
    <!-- =============  courses start =============   -->
<!-- =============== footer start =============== -->
{%include "../fcommon/footer.html"%} 
<!-- =============== footer start =============== -->
 
</body>

</html>