{% extends 'kitcounter/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Kit Counter{% endblock %}
{% block style %}
 <style type="text/css">
    .error{
      color: red;
    }
    th,td{
        padding: 5px !important;
    }
  </style>
{% endblock %} 
{% block content %}
            
    <div class="container" style="background-color:#FFFFFF;border: 2px solid #cac1c1;border-radius: 5px;"> 
        {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
             <div class="alert alert-success text-align-center successMessage alert-dismissible" >
               <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
               <h6>{{ mesg|safe }}</h6>
             </div>
        {% endfor %}

         {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
            <div class="alert alert-danger text-align-center successMessage" id="successMessage">
               <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
               <h6>{{ mesg|safe }}</h6>  
            </div>
         {% endfor %}

            <div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                     <label>Enter Mail-id(s) to send Kit Counter</label>

                  </div>
              <form id="email" method="POST" action="{{url_for('kit.SendKcReportMail')}}">
                  <div class="modal-body">
                    <span style="font-size: 13px;color: #e5310d;">Example: <i>yourid1@gmail.com,yourid2@gmail.com</i></span>
                  <input type="text" class="form-control" name="mail_id" id="" placeholder="Enter email-id(s)" autofocus="autofocus">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                    <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" class="btn btn-primary">Send</button>
                  </div>
              </form>
                </div>
              </div>
            </div>

             <div class="modal fade" id="WhatsappModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                     <label>Enter Whatsapp Number to send Kit Counter Report</label>
                  </div>
              <form id="mobile" method="POST" action="{{url_for('kit.SendKcReportWhatsapp')}}">
                  <div class="modal-body">
                  <input type="text" class="form-control" name="mobile_no" id=""  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" placeholder="Whatsapp Number">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <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" class="btn btn-primary">Send</button>
                  </div>
              </form>
                </div>
              </div>
            </div>



      <div class="modal fade" id="token_id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id=""> <label>Enter  Coupon details </label></h5>
      
      </div>
    <form class=" form-control" method="POST" id="token" action ="{{url_for('kit.SavekCToken')}}" >
      <div class="modal-body row col-lg-12 col-md-12 col-sm-12">
              <div class="col-lg-4 col-md-4 col-sm-12">
                  <label id="ref_delegate_no" name="ref_delegate_no">Ref.Delegate.No</label>
              </div> 
              <div class="col-lg-8 col-md-8 col-sm-12">      
                  <input class="form-control"  type="text" name="ref_delegate_no" id="ref_delegate_no" value=""  placeholder="ref.delegate.no"/>
              </div>
      </div>
      <div class="modal-body row col-lg-12 col-md-12 col-sm-12">
              <div class="col-lg-4 col-md-4 col-sm-12">
                  <label id="ref_name" name="ref_name">Name</label>
              </div> 
              <div class="col-lg-8 col-md-8 col-sm-12">      
                  <input class="form-control"  type="text" name="ref_name" id="ref_name" value=""  placeholder="name"/>
              </div>
      </div>
      <div class="modal-body row col-lg-12 col-md-12 col-sm-12">
              <div class="col-lg-4 col-md-4 col-sm-12">
                  <label id="ref_mobile" name="ref_mobile">Mobile.No</label>
              </div> 
              <div class="col-lg-8 col-md-8 col-sm-12">    

                  <input class="form-control"  type="text" name="ref_mobile" id="ref_mobile" value=""  placeholder="Mobile Number"/>
                  <input type="hidden" name=conf_id id="conf_id" value="{{conf_id or 0 }}">
                  <input type="hidden" name=conf_key id="conf_key" value="{{conf_key or '' }}">
              </div>
      </div>





      <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            <!--  <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" id="modal_submit_btn" name="modal_submit_btn"  class="btn btn-primary">Save</button>
      </div>
    </form>
    </div>
  </div>
</div>



      <form id="kit_scan_form" class="del_no" method="POST" action="{{url_for('kit.PostKScanData')}}" class="mt-0" >
        <br/>
            <div class="row form-group">
                    <div class="col-lg-11 col-md-11 col-sm-12" style="background-color: #FFFFFF;min-height: 140px;">
                      <input type="number" class="form-control text-align-right" id="delegate_no"  name="delegate_no" 
                       placeholder="DELEGATE NO" autofocus>

                      <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}">
                      <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}">

                      <input type="hidden" name="del_table_name" id="del_table_name" value="{{del_table_name}}">
                      <input type="hidden" name="kc_del_session_table_name" id="kc_del_session_table_name" value="{{kc_del_session_table_name}}">
                      <input type="hidden" name="kc_session_entry_table_name" id="kc_session_entry_table_name" value="{{kc_session_entry_table_name}}">
                      <input type="hidden" name="html_data" id="html_data" value="{{html_data}}">
                    <input type="hidden" name="role_data" id="role_data" value="{{role_data}}">
        
                    <input type="hidden" name="total_count" id="total_count" value="{{total_count}}">
                    <input type="hidden" name="current_dt" id="current_dt" value="{{current_dt}}">

                      <br/>
                       <div id="msg_div" style="min-height: 110px;max-height: 250px;background-color: #ECE9E9;text-align: center;color: white;vertical-align: middle;font-weight: bold;font-size: 33px;">
                         <label id="msg_label"></label>
                      </div>
                  </div>
                  <div class="col-lg-1 col-md-11 col-sm-12 text-center" style="background-color:#FFFFFF;color: white;">
                   {% if session.get("kcsession") :%}
                     <a class="btn btn-danger" href="{{url_for('kit.KitLogout' ,conf_id = conf_id ,conf_key=conf_key)}}"
                       onclick="return confirm('Are you sure do you want to logout ?')"  title="Logout"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
                    {% endif %}

                        <!-- <a class="btn btn-danger" href="{{url_for('kit.KitLogout' ,conf_id = conf_id ,conf_key=conf_key)}}"
                        onclick="return confirm('Are you sure do you want to logout ?')"  title="Logout"><i class="fa fa-sign-out" aria-hidden="true"></i>
                        </a> -->
                        
                           
                   </div>
                </div>
                
        </form>

        <!-- <input type="hidden" name="html_data" id="html_data" value="{{html_data}}">
        <input type="hidden" name="role_data" id="role_data" value="{{role_data}}">
        
        <input type="hidden" name="total_count" id="total_count" value="{{total_count}}">
        <input type="hidden" name="current_dt" id="current_dt" value="{{current_dt}}">
        <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12" id="msg_div" style="min-height: 110px;max-height: 170px;background-color: #ECE9E9;text-align: center;color: white;vertical-align: middle;font-weight: bold;font-size: 35px;">
            <label id="msg_label"></label>
        </div>
        </div> -->
         
        <!-- <div class="row" style="background-color: #5f48bd;color: white;">
          <div class="col-lg-5 col-md-12 col-sm-12 text-center mt-2"><h5><span><i class="fa fa-map-marker" aria-hidden="true"></i>
            </span> {{session_name}}</h5></div>
          <div class="col-lg-2 col-md-12 col-sm-12 text-center"><img width="150" height="105" src="/static/images/kc_12.jfif"></div>
          <div class="col-lg-5 col-md-12 col-sm-12 text-center mt-2">
               <h5>
                    <span><i class="fa fa-clock-o" aria-hidden="true"></i>{{start_time}}<br/>
                          <i class="fa fa-clock-o" aria-hidden="true"></i>{{end_time}}
                    </span>
               </h5>
          </div>
        </div> -->
        <audio id="thanku" controls style="display:none">
        <source src="/static/images/audio.mp3" type="audio/mp3">
        
      </audio>
      <audio id="error_audio" controls style="display:none">
        <source src="/static/images/error_audio.mp3" type="audio/mp3">
        
      </audio>
         <div class="row" style="background-color:#a01b0aee;color: white;">
          <!-- <div class="col-lg-5 col-md-5 col-sm-12" ><h5 id="total_count_1">Total count 0</h5></div> -->
          <div class="col-lg-3 col-md-3 col-sm-12 mt-2"> 
              <span class="bi bi-arrow-repeat icon-red" id="report_count_btn" title="Refresh"  style="font-size:30px; color: #15feb3;">
                </span>
                <!--&nbsp;&nbsp;&nbsp;&nbsp;-->
                <i class="fa fa-paper-plane fa-2x"  title="Send Report via email" data-toggle="modal" data-target="#emailModal" aria-hidden="true"></i>
                <!--&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--<i class="fa fa-whatsapp fa-2x " title="Send Report via Whatsapp" data-toggle="modal" data-target="#WhatsappModal" style="color:#1df71d;" aria-hidden="true"></i>-->
                &nbsp;&nbsp;&nbsp;&nbsp;
                <i title="Coupon" data-toggle="modal" data-target="#token_id"class="btn btn-link"  style="color: #fcfaea;"  aria-hidden="true"><span class="fa fa-credit-card fa-2x"></span></i>
          </div>
          
          <div class="col-lg-2 col-md-2 col-sm-6 mt-2">
            <!-- start -->
            <!--  end-->
        
              <div class="form-group">
                  <select class = "form-control" id = "report_download_role" name = "report_download_role" style="display:none;">
                   </select>
                <!-- </div> -->
              </div> 

           </div>
           <div class="col-lg-6 col-md-6 col-sm-12">
             <h5 id="total_count_1" style="margin-top: 5px;">Total count 0</h5>                    
           </div>
        </div>
        <div class="row">
          <div id="myDiv" class="col-lg-12 col-md-12 col-sm-12 text-center">
              <img id="loading-image" src="/static/images/kc_ajax_loader.gif" style="display:none;max-height: 90px;width: auto;"/>
          </div>
        </div>
          <div class="card-body">
           <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-12"> </div>
  
          <div class="col-lg-10 col-md-10 col-sm-12" style="font-size: 13px;">
             <table class="table table-striped">
              <thead  style="color:#036e;">
                <tr>
                    <!-- <th>check box here </th> -->
                <th>ROLE</th>
                <th>COUNT</th>
              </tr>
              </thead>
              <tbody id="report_table" style="color: #036e">
              
            
            </tbody>
            </table>
            </div>
          </div>



        </div>
        <br>
              
</div>

{% endblock %}
{% block script %}
    <script type="text/javascript">
        var BaseUrl = document.location.origin;
         $(document).ready(function(e)
           {
             $("#msg_div").hide();
             var html_data   = $("#html_data").val();
             var current_dt  = $("#current_dt").val();
             var total_count = $("#total_count").val();
             $("#report_table").empty();
             $("#report_table").html(html_data);

             
             var role_data = $("#role_data").val();
             $("#report_download_role").empty();
             $("#report_download_role").html(role_data);
              $("#total_count_1").html("<span style ='color:#FFFFFF;font-size:15px;' >Total count is  " + total_count + "   @ " + current_dt  + "</span>");
            
            // form submit start
      $("#kit_scan_form").submit(function(e) 
        {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var delegate_no = $("#delegate_no").val();
            if (delegate_no.length > 0)
            {
              var form = $(this);
              var actionUrl = form.attr('action');
            $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data: form.serialize(), // serializes the form's elements.
                        beforeSend: function() {
                         // Clear the input field
                          $("#delegate_no").val('');
                          $("#loading-image").show();
                        },
                        success: function(data)
                        {
                             setTimeout(function() {
                           $("#loading-image").hide();
                           }, 1000);
                         $.each(data, function(key, value) {
                          var msg         = value['msg'];
                          var full_name   = value['full_name'];
                          var delegate_no = value['delegate_no'];
                          var role        = value['role'];
                          var scan_at     = value['scan_at'];
                          var status      = value['status'];
                          $("#delegate_no").val('');
                          $("#msg_div").show();
                          if (status == 1)
                           {  // successfully registered
                              $("#msg_label").html( msg);
                              $("#msg_div").css("background" ,"green" );
                              var audio = $("#thanku")[0];
                              audio.play();
                           }
                           else if(status==2)
                           { // not registered with us
                            $("#msg_label").html(msg);
                            $("#msg_div").css("background" ,"#9d2b16" );
                            var audio = $("#error_audio")[0];
                            audio.play();
                           }
                           else { // already registered
                             $("#msg_div").css("background" ,"slategrey" );
                             $("#msg_label").html(msg);
                             var audio = $("#error_audio")[0];
                            audio.play();
                           }
                          });
                          // var msg       = data["msg"];
                          // var full_name = data.full_name;
                          // var role      = data.role;
                          // var scan_at   = data.scan_at;
                          // var status    = data.status;
                          // var delegate_no  = data.delegate_no;
                          
                        }
                    });
            }
            else{
              alert("Please enter valid delegate number .");
            }
                 
        });
      // this is the id of the form

      // rerort count btn click event start
      $(document).on("click" ,"#report_count_btn" ,function(e)
      {
        var conf_id = $("#conf_id").val();
        var conf_key = $("#conf_key").val();
          e.preventDefault();
          $.ajax({
                    type: "POST",
                    url: BaseUrl+"/kit_reports",
                    data: {'conf_id':conf_id,'conf_key':conf_key},
                    beforeSend: function() {
                          $("#loading-image").show();
                      },
                    success: function(data)
                    { 
                      setTimeout(function() {
                    $("#loading-image").hide();
                    }, 1000)
                        var data_1 = JSON.parse(data);
                        var total_count = data_1.total_count;

                        var current_dt  = data_1.current_dt;

                        $("#report_table").empty();
                        $("#report_table").html(data_1.html_data);

                        $("#report_download_role").empty();
                        $("#total_count_1").html("<span style ='color:#FFFFFF;font-size:15px;' >Total count is  " + total_count + "   @ " + current_dt  + "</span>");
                        
                     }
                  });
      });
      // report count btn end

      // Report download  function start
      $(document).on("change" , "#report_download_role",function(e)
      {
        var conf_id = $("#conf_id").val();
        var conf_key = $("#conf_key").val();
        e.preventDefault();
        var role = $('select[name=report_download_role]').val() // Here we can get the value of selected item
        if(role.length  != 0)
          {
           if (confirm("Are you sure Do you want download report ?")) {
             $.ajax({
                    type: "POST",
                    url: BaseUrl+"/"+conf_id+"/"+conf_key+"/download_kc_report_1",
                    data: {'conf_id':conf_id,'conf_key':conf_key,'role':role},
                   
                    success: function(data)
                    {
                      var data_1 = JSON.parse(data);
                      if(data_1.status == 1){
                        alert(data_1.msg)
                      } 
                      else{
                        alert(data_1.msg)
                        
                     }
                      }
                  });
         }
         return false;
        }

      });

      // Report download function end

         $("#email").validate({
             // in 'rules' user have to specify all the constraints for respective fields
             rules : {
                  mail_id : {

                      required :true,
                  },
                   },
              messages : {
                   mail_id : {
                      required : "Please enter the Email id",
                  },
                },

             });

         $("#mobile").validate({
             // in 'rules' user have to specify all the constraints for respective fields
             rules : {
                  mobile_no : {

                      required :true,
                      minlength :10,
                      maxlength :10,
                  },
                   },
              messages : {
                   mobile_no : {
                      required : "Please enter the Whatsapp Number",
                  },
                },

             });

          // $("#token").validate({
          //    rules : {
          //         ref_delegate_no : {
          //           required :true,
          //         },
          //         ref_name : {
          //           required :true,
          //         },
          //         ref_mobile : {
          //           required :true,
          //         },

          //          },
          //     messages : {
          //          ref_delegate_no : {
          //             required : "Please enter the Delegate No",
          //         },
          //         ref_name : {
          //             required : "Please enter the name",
          //         },
          //         ref_mobile : {
          //             required : "Please enter the mobile number",
          //         },
          //       },
          //    });

             });
       
            
      
      // form submit end   
               
      </script>
    {% endblock %}