{% extends 'badge/badge_layout.html' %}
  <title>{% block title %}Delegate Badge{% endblock %}</title>
 {% block content %} 
   {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %} 
  <div class="row"> 
      <div class="col-lg-4 col-sm-4 col-sm-12"></div>
        <div class="col-lg-4 col-sm-4 col-sm-12">
    <div class=" text-center" id="successMsg" >
      <h6 class="alert alert-success  alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
    </div>
     <div class="col-lg-4 col-sm-4 col-sm-12"></div>
      </div>
    </div>
  {% endfor %} 
  {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %} 
     <div class="row"> 
      <div class="col-lg-4 col-sm-4 col-sm-12"></div>
        <div class="col-lg-4 col-sm-4 col-sm-12">
          <div class="text-center" id="successMsg" >
          <h6 class="alert alert-danger  alert-dismissible">
           <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
          </div>
          <div class="col-lg-4 col-sm-4 col-sm-12"></div>
      </div>
    </div>
  {% endfor %}
<form id="delegate_badge"  action="{{url_for('badge.DelegateBatchPrint')}}" method="POST" >
      
<div class="container  mt-3">
  <h5>DELEGATE BADGE</h5>
  <div class="row">
    <div class="col-md-12">
      <div class="card">
          <div class="card-header">
              <h4 class="panel-title" >
                <a  data-parent="#accordion" href="#collapseOne"  aria-expanded="true">
                <span class="glyphicon glyphicon-filter" ></span>  Filter
                </a>
              </h4>
         </div> 
        <div class="card-body">
        
                 <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12">
                         <label >Badge Type:</label><br>
                         <div class="input-group ">
                            <select class = "form-control" id = "role" name = "role" >
                              <option value = "" id = "select"  selected>--ALL--</option>
                                {% if role_data %}
                                  {% for row in role_data %}
                                     <option value = "{{row.b_role}}"> {{row.b_role or '' }} </option>
                                  {% endfor %}
                                {% endif %}
                            </select>
                          </div>
                        </div>



                        <div class="col-lg-4 col-md-4 col-sm-12">
                         <label >Counter:</label><br>
                         <div class="input-group ">
                            <select class = "form-control" id = "counter" name = "counter" >
                              <option value = "" id = "select"  selected>--ALL--</option>
                                {% if counter_data %}
                                  {% for row in counter_data %}
                                     <option value = "{{row.counter}}"> {{row.counter or '' }} </option>
                                     
                                  {% endfor %}
                                {% endif %}
                            </select>
                          </div>
                        </div>

                        <div class="col-lg-4 col-md-4 col-sm-12">
                         <label >Badge:</label><br>
                         <div class="input-group ">
                            <select class = "form-control" id = "batch" name = "batch" >
                              <option value = "" id = "select"  selected>--ALL--</option>
                                {% if batch_data %}
                                  {% for row in batch_data %}
                                     <option value = "{{row.batch}}"> {{row.batch or  '' }} </option>
                                     
                                  {% endfor %}
                                {% endif %}
                            </select>
                          </div>
                        </div>
                    </div><br>
            
                <div class="row">
                  <div class="col-lg-4 col-md-4 col-sm-12">
                    <label>Del. No From</label><br>
                    <input type="text"  name="del_no_from" id="del_no_from"  class="form-control" >

                    <input type="hidden" name="del_table_name" id="del_table_name" value="{{del_table_name}}">
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-12">
                      <label>Del. No To</label><br>
                    <input type="text"  name="del_no_to" id="del_no_to"  class="form-control" >
                    <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}">
                    <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}">
                  </div>
                  {% if conf_id != 55%}
                  <div class="col-lg-4 col-md-4 col-sm-12">
                        <label>Delegate Badge Type</label><br>
                        <select class="form-control  " id="badge_type" name="badge_type" >
                                 <!-- <option value="" id="select"> Badge Type</option> -->
                               <option id="select" value="Delegate Badge" selected> Delegate Badge</option>
                               <option value="Empty Badge"> Empty Badge </option>
                        </select>
               
                    </div>
                     <!-- Code start on Step 20,2023 start -->
                     
                  <div class="col-lg-8 col-md-8 col-sm-6 mt-2 pl-4">
                     <div class="row">
                       <div class="col-lg-10 col-md-10 col-sm-12">
                         <button type="button" class="btn btn-secondary mb-2" id="get_long_name_btn" style="background-color: gray !important;color:white;">Get Longest name for badge print alignment testing purpose</button>
                        <button type="button" class="btn btn-danger " id="get_long_commetment_btn" style="background-color: #872341; !important;color:white;">Get Longest commetment for badge print alignment testing purpose</button>

                         <div id="long_name_div"   class="mt-1 mb-1"></div>
                       </div>
                       <div class="col-lg-2 col-md-2 col-sm-12" >
                         <button type="button" class="btn btn-danger" id="large_name_clear_btn">Clear</button>
                       </div>
                     </div>
                  </div> 
                  
                  <!--  End -->
                 <div class="col-lg-2 col-md-2 col-sm-6">
                   <label>Print on both side</label> <br/>
                   <div class="form-check">
                    <label class="form-check-label">
                      <input type="radio" class="form-check-input" name="print_both_side" value="Yes" checked>Yes
                    </label>
                    <label class="form-check-label ml-4">
                      <input type="radio" class="form-check-input" name="print_both_side" value="No" >No
                    </label>
                  </div> 

                  </div> 
                  {% endif %} 
                </div><br>

               <!--  <div class="row">
                  <div class="col-md-12">
                   <input type="checkbox"  name="qr_code" id="qr_code"  value="1" checked> &nbsp;<label class="bold text text-danger"   >QR Code </label> -->
                   <!--<input type="checkbox"  name="static_qr_code" id="static_qr_code"  value="1" checked> &nbsp;<label class="bold text text-danger">Static QR Code </label>-->
                  <!--  </div>
                </div><br> -->
                
              <!--   <div class="row">
                  <div class="col-md-4">
                   <label class="bold text text-danger"><input type="checkbox"  name="print_center" id="print_center"  value="1" checked> &nbsp;Center Print</label>
                   </div>
                   <div class="col-md-4">
                    <label>
                     <label class="bold text text-danger"><input type="radio" id="is_commitment" name="is_commitment" value="">&nbsp;All </label> <br/>
                     <label class="bold text text-danger"><input type="radio" id="is_commitment" name="is_commitment" value="1">&nbsp;Only Commitment badges</label><br/>
                     <label class="bold text text-danger"><input type="radio" id="is_commitment" name="is_commitment" value="0">&nbsp;Non Commitment badges</label>
                    </label>
                  </div>
                </div><br> -->
                {% if conf_id in [55] :%}
                   <div class="row">
                     <div class="col-lg-3 col-md-3 col-sm-12">
                        <label style="color:blue;"> BADGE SIZE</label><br>
                       <label class="bold text text-danger"><input type="radio" id="small_badge" name="badge_size" value="small_badge" checked>&nbsp;SMALL SIZE BADGE</label> <br/>
                       <label class="bold text text-danger"><input type="radio" id="big_badge" name="badge_size" value="big_badge">&nbsp;BIG SIZE BADGE</label><br/>


                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <label style="color:blue;"> PHOTO OPTION</label><br>
                       <label class="bold text text-danger"><input type="radio" id="with_photo" name="badge_photo" value="with_photo" checked>&nbsp;WITH PHOTO </label> <br/>
                       <label class="bold text text-danger"><input type="radio" id="without_photo" name="badge_photo" value="without_photo">&nbsp;WITHOUT PHOTO</label><br/>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <label style="color:blue;"> BACKGROUND OPTION </label><br>
                       <label class="bold text text-danger"><input type="radio" id="with_background" name="badge_background" value="with_photo" checked>&nbsp;WITH BACKGROUND IMAGE </label> <br/>
                       <label class="bold text text-danger"><input type="radio" id="without_background" name="badge_background" value="without_background">&nbsp;WITHOUT BACKGROUND IMAGE</label><br/>
                    </div>
                  </div>
                {% endif %}
               <br>

                 <!-- <div class="row">
                  <div class="col-lg-4 col-sm-4 col-sm-12">
                   <input type="radio"  name="normal_print" id="normal_print" > &nbsp;<label class="bold text text-danger">Normal Print</label>
                  </div>
                  <div class="col-lg-4 col-sm-4 col-sm-12">
                    
                      <input type="radio"  name="pendrive_print" id="pendrive_print"checked > &nbsp;<label class="bold text text-danger">Pendrive Print</label>
                  </div>
                   <div class="col-lg-4 col-sm-4 col-sm-12"></div>
                </div><br> -->

                
                    <div class="row">
                       <div class="col-lg-12 text-left">
                        <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}">
                        <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}">


                          <button type="submit" name="pdf" class="btn btn-md btn-info">Download Badge Pdf</button>

                            <button type="submit" name="print" value="print" class="btn btn-md btn-info"><i class="fa fa-light fa-print p-1"> </i>Print Badge</button>
                         <!-- <button type="submit" class="btn btn-md btn-info"><i class="glyphicon glyphicon-filter" title="Filter"></i>  Filter</button> -->
                        <input type="button" class="btn btn-danger"  name="close" id="close" value="Close"  title="Close">
                      </div>
                    </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


</form>


{% endblock %}

</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
{% block bottomscript %}

<script type="text/javascript">
  $(document).ready(function(){
      var BaseUrl = document.location.origin;
    $('#panel-body').hide();
    $('#toggle-menu').click(function(){
          $('#panel-body').show();
        });
    $('#close').click(function(){
          $('#panel-body').hide();
        });
    
    $(document).on("click" ,"#large_name_clear_btn", function(e)
      {
        e.preventDefault();
         $("#del_no_from").val("");
         $("#del_no_to").val("");
         $("#long_name_div").empty();
      });    



$(document).on("click" ,"#get_long_commetment_btn", function(e)
    {
      e.preventDefault();
      var conf_id        = $("#conf_id").val();
      var conf_key       = $("#conf_key").val();
      var role           = $("#role").val();
      var del_table_name = $("#del_table_name").val();
       $.ajax({
                      url: BaseUrl+"/"+conf_id+"/"+conf_key+"/get_longest_commetment_data",
                      type: 'GET',
                      data: {'role' : role,'conf_id' : conf_id,'conf_key' : conf_key,
                           'del_table_name' : del_table_name },                    
                      success: function(reposnse){
                             var data_1    = JSON.parse(reposnse);
                             var msg       = data_1.msg;
                             var html_data = data_1.html_data;
                             var del_nos   = data_1.del_nos;

                             if (msg == "success")
                             {  
                                
                                $("#del_no_from").val(del_nos);
                                $("#del_no_to").val(del_nos);
                                $("#long_name_div").empty();
                                $("#long_name_div").html(html_data);
                             }  
                             else
                             {
                                $("#del_no_from").val("");
                                $("#del_no_to").val("");
                                $("#long_name_div").empty();
                                alert(msg);
                                return false;
                             }
                          
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                              //location.reload();  
                            }
                    });
              });



    $(document).on("click" ,"#get_long_name_btn", function(e)
    {
      e.preventDefault();
      var conf_id        = $("#conf_id").val();
      var conf_key       = $("#conf_key").val();
      var role           = $("#role").val();
      var del_table_name = $("#del_table_name").val();
       $.ajax({
                      url: BaseUrl+"/"+conf_id+"/"+conf_key+"/get_longest_name_data",
                      type: 'GET',
                      data: {'role' : role,'conf_id' : conf_id,'conf_key' : conf_key,
                           'del_table_name' : del_table_name },                    
                      success: function(reposnse){
                             var data_1    = JSON.parse(reposnse);
                             var msg       = data_1.msg;
                             var html_data = data_1.html_data;
                             var del_nos   = data_1.del_nos;

                             if (msg == "success")
                             {  
                                $("#del_no_from").val(del_nos);
                                $("#del_no_to").val(del_nos);
                                $("#long_name_div").empty();
                                $("#long_name_div").html(html_data);
                             }  
                             else
                             {
                                $("#del_no_from").val("");
                                $("#del_no_to").val("");
                                $("#long_name_div").empty();
                                alert(msg);
                                return false;
                             }
                          
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                              //location.reload();  
                            }
                    });
              });


    });
</script>

{% endblock %}