{% extends 'base.html' %}

{% load static %}
{% block mycontent %}
    <script src="{% static 'Admin/js/jquery.js' %}"></script>
    <script src="{% static 'Admin/js/jquery.validate.js' %}"></script>
    <script src="{% static 'Admin/js/additional-methods.js' %}"></script>
    <script>
    $(document).ready(function() {
        $("#myform").validate({
            messages: {
                type_id:"*Please Choose Type Id",
                name:"*Please Enter Name of the user",
                email:"*Please Enter a Email Id",
                address:"*Please Enter Address",
                mobile:"*Please Enter Valid 10 Digit Mobile Number",
                gender:"*Please Select Gender",
                photo:"*Please Select Valid jpg image file",
                id_proof:"*Please Select Valid pdf ID Proof file",
                password:"*Please Enter Password",
                cnfrmpassword:"*Please Confirm Password",
            }
        });
    });
    </script>
    <style>
        .error{
            color:red;
            margin: 2px;
        }
    </style>

    <div id="page-wrapper">
        <div class="main-page">
            <div class="forms">
                <div class=" form-grids row form-grids-right">
                    <div class="widget-shadow " data-example-id="basic-forms"> 
                        <div class="form-title">
                            <h4>Add User:</h4>
                        </div>
                        <div class="form-body">
                            <form class="form-horizontal" id="myform" enctype="multipart/form-data"  action="/myadmin/Useraddprocess" method="POST">
                                {% csrf_token %}
        
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Type Id:</label> 
                                    <div class="col-sm-9"> 
                                        <select name="type_id" class="form-control" style="color: black;" required>
                                            <option value="">Select</option>
                                            {% for i in mydata %}
                                            <option value="{{i.0}}">{{i.0}} ({{i.1}})</option>
                                            {% endfor %}
                                        </select>
                                    </div> 
                                </div> 
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Name:</label> 
                                    <div class="col-sm-9"> 
                                        <input type="text" name="name" class="form-control" placeholder="Name of the User" required> 
                                    </div> 
                                </div>
                                <div class="form-group">
									<label class="col-sm-2 control-label">*Gender:</label>
									<div class="col-sm-9">
                                        <select name="gender" class="form-control"  required>
                                            <option value="">Select</option>
                                            <option style="color: black;">Male</option>
                                            <option style="color: black;">Female</option>
                                        </select>
                                    </div>
								</div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Email:</label> 
                                    <div class="col-sm-9"> 
                                        <input type="email" class="form-control" name="email" placeholder="Email Address of the User" required> 
                                    </div> 
                                </div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Address:</label> 
                                    <div class="col-sm-9"> 
                                        <input type="text" class="form-control" name="address" placeholder="Address of the User" required> 
                                    </div> 
                                </div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Mobile:</label> 
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="mobile" placeholder="Mobile No. of the User"  maxlength="10" minlength="10" pattern="[0-9]{10}" required> 
                                        <p class="help-block">Provide a Valid 10 Digit Mobile No.</p>
                                    </div> 
                                </div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Photo:</label>
                                    <div class="col-sm-9"> 
                                        <input type="file" class="form-control" name="photo" accept="image/jpeg" required> 
                                        <p class="help-block">Format must be JPG.</p>
                                        <p class="help-block">Maximum File Size Limit is 1MB.</p>
                                    </div> 
                                </div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*ID Proof:</label>
                                    <div class="col-sm-9"> 
                                        <input type="file" class="form-control" name="id_proof" accept="application/pdf" required>
                                        <p class="help-block">Format must be PDF.</p>
                                        <p class="help-block">Maximum File Size Limit is 1MB.</p> 
                                    </div> 
                                </div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Password:</label> 
                                    <div class="col-sm-9"> 
                                        <input type="password" maxlength="8" minlength="6" id="password" class="form-control" name="password" placeholder="Enter Password" required> 
                                    </div> 
                                </div>
                                <div class="form-group"> 
                                    <label class="col-sm-2 control-label">*Confirm Password:</label> 
                                    <div class="col-sm-9"> 
                                        <input type="password" maxlength="8" minlength="6" id="confirm_password" class="form-control" name="cnfrmpassword" placeholder="Confirm Password" required> 
                                    </div> 
                                </div>
                                <br>
                                <div class="col-sm-offset-2"> 
                                    <input type="submit" class="btn btn-success" value="Add">
                                    <input type="reset" class="btn btn-primary" value="Reset"> 
                                </div> 
                                {% if messages %}
                                   <ul class="messages">
                                   {% for message in messages %}
                                       <li {% if message.tags %} class=" {{ message.tags }} " {% endif %} >
                                          <script>alert('{{ message }}')</script>
                                       </li>
                                   {% endfor %}
                                   </ul>
                                {% endif %}
                            </form> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>
    {% endblock %}