{% extends 'VenueScan/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Venue Entry Scan{% 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>


      <form id="badge_scan_form" class="del_no" method="POST" action="{{url_for('venue_scan.PostVenueEntryScanData')}}" 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;">
                      <h2 class="text-center"> Venue Scan Dashboard </h2>
                      <br>
                      <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="row">
                          <div class="col-md-3">
                              <label>Scan Date</label>
                              <input type="date" name="scan_date" id="scan_date" value="" class="form-control">
                          </div>
                          <div class="col-md-2">
                              <label>Start Time</label>
                              <input type="time" name="start_time" id="start_time" value="" class="form-control">
                          </div>
                          <div class="col-md-2">
                              <label>End Time</label>
                              <input type="time" name="end_time" id="end_time" value="" class="form-control">
                          </div>
                          <div class="col-md-3">
                                <label >Type of Count</label>
                                <select name="is_unique_count" id="is_unique_count" class="btn btn-light col-sm form-control">
                                 <option value = "1" selected="selected" >Unique Count</option>
                                 <option value = "0" >Over-all Count</option>
                                 <option value = "2" >Venue Inside Count</option>
                                 <option value = "3" >Venue Entered Count (Unique)</option>
                                 <option value = "4" >Venue Entered Count (Over-all)</option>
                                </select>
                          </div>
                          <div class="col-md-2">
                            <p align="right">
                              <button type="button" class="btn btn-primary" id="filter_btn" style="margin-top: 32px;">Filter</button>
                              <button type="button" class="btn btn-secondary " id="clear_btn" style="margin-top: 32px;">Clear</button>
                            </p>
                          </div>
                        </div>
                      </div>                  

                  </div>
                  <div class="col-lg-1 col-md-11 col-sm-12 text-center" style="background-color:#FFFFFF;color: white;">
                   {% if session.get("venue_entry_session") :%}
                     <a class="btn btn-danger" href="{{url_for('venue_scan.VenueEntryLogout' ,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>

        <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>
        <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-12 col-md-12 col-sm-12" style="font-size: 13px;" id="filter_data_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>");
            

            // Save token using ajax start
             $("#token_form").on("submit", function(event)
        {
            event.preventDefault();
            var ref_delegate_no = $("#ref_delegate_no").val();
            var ref_name        = $("#ref_name").val();
            var ref_mobile      = $("#ref_mobile").val();
            
            var conf_id         = $("#conf_id").val();
            var conf_key        = $("#conf_key").val();
            var session_id      = $("#session_id").val();

            if ( ref_delegate_no.length  > 0   ||  ref_name.length > 2  ||  ref_mobile.length > 3 )
            {
              var form = $(this);
              var actionUrl = form.attr('action')+"?conf_id="+conf_id+"&no_of_mebers=1&session_id="+session_id;

              data_1 = {"conf_id" :conf_id,"conf_key" : conf_key , "ref_delegate_no" : ref_delegate_no,
              "ref_name" : ref_name,"ref_mobile" : ref_mobile}

              $("#token_error_msg").css("display" , "none");

              $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data: data_1,
                        async:true,
                        beforeSend: function() {
                          $("#delegate_no").val('');
                          $("#loading-image").show();
                        },
                        success: function(data)
                        {
                           $("#loading-image").hide();
                           var data_1 = JSON.parse(data);
                           var status = data_1.status;
                           var msg    = data_1.msg;
                          if (status == 1)
                           {  
                              var audio = $("#thanku")[0];
                              audio.play();
                              $("#ref_delegate_no").val('');
                              $("#ref_name").val('');
                              $("#ref_mobile").val('');
                           }
                          else if(status == 4)
                          {
                            location.reload();
                            return false;
                          } 

                           else { 
                             var audio = $("#error_audio")[0];
                            audio.play();
                            alert(msg);
                           }
                           $('#token_id').modal('hide');
                          }
                    });             
            }
            else
            {
               
               $("#token_error_msg").css("display" , "block");
               $("#token_error_msg").text("Please enter delegate number or name or mobile.");
               return false;
            }
            return false;
        });

            // End
            // form submit start
      $("#badge_scan_form").submit(function(e) 
        {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var delegate_no      = $("#delegate_no").val();
            var conf_id          = $("#conf_id").val();
            if (delegate_no.length > 0)
            {
              var form = $(this);
              // var actionUrl = form.attr('action');
              var actionUrl = form.attr('action')+"?conf_id="+conf_id+"&delegate_no="+delegate_no;
            $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data: form.serialize(),
                        async:true,
                        beforeSend: function() {
                          $("#delegate_no").val('');
                          $("#loading-image").show();
                        },
                        success: function(data)
                        {
                           //   setTimeout(function() {
                           // $("#loading-image").hide();
                           // }, 1000);
                          $("#loading-image").hide();
                         $.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();
                           }
                          });
                          
                        }
                    });
            }
            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)
                    { 
                      $("#loading-image").hide();
                        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",
                  },
                },

             });



             });
       
            
      
      // form submit end   

    // Filter data from form
    $(document).on('click','#filter_btn' ,function(e)
    {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var scan_date       = $("#scan_date").val();
            var start_time      = $("#start_time").val();
            var end_time        = $("#end_time").val();
            var conf_id         = $("#conf_id").val();
            var conf_key        = $("#conf_key").val();
            var is_unique_count = $("#is_unique_count").val();
           
            $.ajax({
                    type: "GET",
                    url: BaseUrl+"/"+conf_id+"/"+conf_key+"/post_venue_scan_data",
                    data: {'scan_date':scan_date,'start_time':start_time,'end_time':end_time,'is_unique_count':is_unique_count},
                    dataType: "json", 
                    success: function(data)
                    {
                      if(data.status == 1){
                        $("#filter_data_table").show();
                        $("#filter_data_table").html(data.html_data);

                      } 
                      else{
                        alert(data.msg);
                        
                     }
                      }
                  });
                 
        });
      // this is the id of the form

      $(document).on('click','#clear_btn' ,function(e)
      {
        $("#scan_date").val('');
        $("#start_time").val('');
        $("#end_time").val('');
        $("#filter_data_table").empty();
        $("#filter_data_table").hide();
       }); 
               
      </script>
    {% endblock %}