{% extends "users/layout.html" %}
{% block content %}
<div class="row mt-2">
   <div class="container">
      <form id="registration_form" method="POST" action="{{ url_for('user.PostSupport',conf_id=conf.conf_id,conf_key=conf.conf_key)}}">
         <div class="row">
            <div class="col-md-4 offset-md-4 col-sm-10 offset-sm-1 box p-4 form-container" style="background-color:white;">
               <div class="row">
                  <div class="col-md-12">
                  </div>
               </div>
               <h4 class="text-center">Support</h4>
               {% for mesg in get_flashed_messages() %}
               <div id="successMessage" style="color:red;text-align: center;">
                  <h4>{{ mesg }}</h4>
               </div>
               {% endfor %}
               <input type="hidden" class="form-control " name="conf_id" id="conf_id"  value="{{conf.conf_id}}">
               <input type="hidden" class="form-control " name="conf_key" id="conf_key"  value="{{conf.conf_key}}">
               <div class="row">
                  <div class="col-md-12">
                     <div class="form-group">
                        <label>Membership No. <span class="mand">*</span> <br> </label>
                        <input type="text" class="form-control "   name="membership_no" id="membership_no" placeholder="Enter Membership No" value="">
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12">
                     <div class="form-group">
                        <label>Full Name <span class="mand">*</span> <br> </label>
                        <input type="text" class="form-control "  name="name" id="name" placeholder="Enter name" maxlength="55" value="">
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12">
                     <div class="form-group">
                        <label>Email Id <span class="mand">*</span> <br></label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Enter email-id" value="" >
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12">
                     <div class="form-group">
                        <label>Mobile No. <span class="mand">*</span></label>
                        <input type="text" class="form-control" id="mobile" name="mobile" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value=""  maxlength="10" placeholder="Enter mobile">
                     </div>
                  </div>
               </div>
            <div class="row">
               <div class="col-md-12">
                  <div class="form-group">
                     <label>Remarks  <span class="mand">*</span></label>
                     <textarea id="remarks" class="form-control" name="remarks" rows="5" cols="40"></textarea>
                  </div>
               </div>
            </div>
               <div class="row">
                  <div class="col-md-12">
                     <div class="form-group">
                        <input type="submit" class="btn btn-success btn-lg btn-block text-uppercase submit_btn"  id="submit_btn" name="submit_btn" value="Submit">
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <a  href="{{ url_for('user.Home',conf_id=conf.conf_id,conf_key=conf.conf_key) }}" class="btn btn-danger btn-lg btn-block text-uppercase"> BACK</a>
                     </div>
                  </div>
               </div>   
            </div>
         </div>
      </form>
   </div>
</div>
{% endblock %}
{% block bottomscript %}
<script type="text/javascript">
   var BaseUrl = document.location.origin
   
   $(document).ready(function(){
   
   // $('#date-field').val(new Date().toISOString().slice(0, 10));
      $("#registration_form").validate({
             // in 'rules' user have to specify all the constraints for respective fields
             rules : {
                  membership_no: "required",
                  name : {
                         required:true,
          
                     },
                  email : {
                      required : true,
                      email : true
                  },
                  mobile :{
                     required:true,
                       
                  },
                  remarks: "required",                     
                
              },
         
              messages : {
                  membership_no: "Please enter the Membership No",
                  name : "Please enter the Name",
         
                  email : {
                      required : "Please enter the Email id",
                      email : "Please enter valid Email Id"
                  },
                  mobile : {
                      required : "Please enter Mobile number",
                      
                  },
                  remarks:"Please enter the Remarks",
                  },
   
   
             });
   
   });
      $(document).ready(function(){
    $("#name").keypress(function(event){
        var inputValue = event.charCode;
        if(!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0)){
            event.preventDefault();
        }
    });


  
});
   
</script>
<script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 2000); </script>
{% endblock %}