{% extends 'master3.html' %}
{% load static %}

{% block mycontent %}
<title>Registeration</title>

<style>
 table,tr,td{
     border: solid;
     border-color: black;
     background-color:rgb(240, 221, 206);
     color:black
 }
</style>
<!--Register Section-->
<section class="page-title" style="background-image:url(static/User/images/background/51.jpg)">
    <div class="auto-container">
        <div class="clearfix">
            <div class="pull-left">
                <h2>Register</h2>
                <div class="text">Fitness is not a destination it is a way of life.</div>
            </div>
            <div class="pull-right">
                <ul class="page-breadcrumb">
                    <li><a href="index-2.html">home</a></li>
                    <li>Register</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<br>
<div>
    <center>
    <table>
        <tr>
            <td>
            <center><h4><b>How to Apply for GYM Membership?</b></h4></center>
             <br>
                Step 1: Register with us by filling below form.<br>
                Step 2: After submitting the form, you will be redirected to the payment confirmation page.<br>
                Step 3: On payment confirmation page, Select the payment method, upload the payment receipt, enter the transaction no. and 
                submit the form.<br>
                Step 4: After successfull submission of all the details asked above, your request to join the Gym will be sent to our management.<br>
                Step 5: Now you can login with your Email id and Password and check your Membership Status.    
            </td>        
        </tr>      
    </table>
</center>
</div>

<section class="register-section">
    <div class="auto-container">
        <div class="row clearfix">

            
                
         
            
            <!--Form Column-->
            
            <!--Form Column-->
            <div class="form-column column col-lg-6 col-md-12 col-sm-12">
            
                <div class="sec-title">
                    <h2>Register Here</h2>
                    <div class="separate"></div>
                </div>
                
                <!--Login Form-->
                <div class="styled-form register-form">
                    <form method="POST" action="/registerprocess" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group">
                            
                            <h5 style="color:black">Name:</h5>
                            <input type="text" name="mname" style="border: solid;border-color: black;border-width: thin;" value="" placeholder="Your Name*" pattern="^[A-Za-z -]+$"  title="Please Enter Only Characters" minlength="3" required>
                        </div>
                        <div class="form-group">
                            
                            <h5 style="color:black">Gender:</h5><br/>
                            <input type="radio" name="gender" value="M" required> Male
                            <br>
                            <input type="radio" name="gender" value="F"> Female
                        </div>
                        <div class="form-group">
                            <span class="adon-icon"><span class="fa fa-envelope-o"></span></span>
                            <h5 style="color:black">Email:</h5>
                            <input type="email" name="email" style="border: solid;border-color: black;border-width: thin;" value="" placeholder="Email Address*" required>
                        </div>
                        <div class="form-group">
                            
                            <h5 style="color:black">Address:</h5>
                            <input type="text" name="address" value="" placeholder="Your Address*" style="border: solid;border-color: black;border-width: thin;" required>
                        </div>
                        <div class="form-group">
                            
                            <h5 style="color:black">Mobile:</h5>
                            <input type="text" maxlength="10" name="mobile" minlength="10" pattern="[0-9]{10}" value="" title="please enter valid Mobile Number" style="border: solid;border-color: black;border-width: thin;" placeholder="Your Mobile No..*" required>
                        </div>
                        <div class="form-group">
                            
                            <h5 style="color:black">Photo:</h5><br>
                            <input type="file" name="photo" accept="image/*" style="border: solid;border-color: black;border-width: thin;" required>
                        </div>
                       <div class="form-group">
                            
                            <h5 style="color:black">ID Proof:</h5><br>
                            <input type="file" name="id_proof" accept=".pdf" style="border: solid;border-color: black;border-width: thin;" required>
                        </div>
                        <div class="form-group">
                            <span class="adon-icon"><span class="fa fa-unlock-alt"></span></span>
                            <h5 style="color:black">Password:</h5>
                            <input type="password" name="password" maxlength="8" minlength="6" id="password" value="" style="border: solid;border-color: black;border-width: thin;" placeholder="Enter Password*" required>
                        </div>
                        <div class="form-group">
                            <span class="adon-icon"><span class="fa fa-unlock-alt"></span></span>
                            <h5 style="color:black">Confirm Password:</h5>
                            <input type="password" name="cnfrmpassword" maxlength="8" minlength="6" id="confirm_password" style="border: solid;border-color: black;border-width: thin;" value="" placeholder="Confirm Password*" required>
                        </div>
                        <div class="form-group">
                            
                            <h5 style="color:black">Choose Plan:</h5><br/>
                            <input type="radio" name="plan" value="1" required> Basic Plan (1 Month ₹1200)
                            <br>
                            <input type="radio" name="plan" value="2"> Standard Plan (6 Month ₹6000)
                            <br>
                            <input type="radio" name="plan" value="3"> Ultimate Plan (12 Month ₹10000)
                        </div>
                        <h6 style="color:black">I Agree Terms & Conditions</h6><input type="checkbox" id="term" name="term" required>
                        <br><br>
                        <div class="clearfix">
                            <div class="form-group pull-left">
                                <input type="submit" value="submit" style="color: white;background-color: black;" class="theme-btn btn-style-three">
                            </div>
                           
                        </div>
                    </form>
                    <script>
                        var password = document.getElementById("password")
                      , confirm_password = document.getElementById("confirm_password");
                    
                    function validatePassword(){
                      if(password.value != confirm_password.value) {
                        confirm_password.setCustomValidity("Password Don't Match");
                      } else {
                        confirm_password.setCustomValidity('');
                      }
                    }
                    
                    password.onchange = validatePassword;
                    confirm_password.onkeyup = validatePassword;
                        </script>
                </div>
                
            </div>
            
        </div>
    </div>

</section>
<!--End Register Section-->

{% endblock %}