{% extends 'foodcounter/layout.html' %}

{% block title %}Food counter Index{% endblock %}
{% block style %}
 <style type="text/css">

    .error{
      color: red;
    }
    
   
  </style>
{% endblock %}
{% block content %}
   

<div class="container" style="background-color:#f4f3f3;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 %}


<!-- Modal -->
<div class="modal fade" id="exampleModal" 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 mail-id(s) to send food counter report </label></h5>
      
      </div>
    <form class=" form-control" method="POST" id="enter_email" action ="{{url_for('fc.SendFCReportMail')}}" >

      <div class="modal-body ">
                <span style="font-size: 13px;color: #e5310d;">Example: <i>yourid1@gmail.com,yourid2@gmail.com</i></span>
                <input class="form-control"  type="text" name="mail_id" id="mail_id" value=""  placeholder="Enter Mail"/>
      </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">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">
        <h5 class="modal-title" id="exampleModalLabel"><label>Enter whatsapp number to send food counter report</label>
</h5>
      
      </div>
    <form class=" form-control" method="POST" id="enter_whatsapp" action ="{{url_for('fc.SendFCReportWhaatsapp')}}" >
      <div class="modal-body">
                <input class="form-control"  type="text" name="mobile_no" id="mobile_no" value=""  placeholder="Enter whatsapp Number"
                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" minlenght="10" maxlength="10"/>
      </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">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  token details </label></h5>
      
      </div>
    <form class=" form-control" method="POST" id="token" action ="{{url_for('fc.SaveFCToken')}}" >
      <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-body row col-lg-12 col-md-12 col-sm-12">
              <div class="col-lg-4 col-md-4 col-sm-12">
                  <label id="no_of_mebers" name="no_of_mebers">No of Members</label>
              </div> 
              <div class="col-lg-8 col-md-8 col-sm-12">      
                  <input class="form-control"  type="text" name="no_of_mebers" id="no_of_mebers" value=""  placeholder="No of Members"/>
              </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="fc_scan_form"  action="{{url_for('fc.PostFCScanData')}}" class="mt-2" >
          <div class="row mt-2">
             
              <div class="col-lg-12 col-md-12 col-sm-12" style="background-color: #FFFFFF;min-height: 140px;">
                      <input type="number" class="form-control text-align-right mt-2" id="delegate_no"  name="delegate_no" placeholder="DELEGATE NO"
              autofocus="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="fc_del_session_table_name" id="fc_del_session_table_name" value="{{fc_del_session_table_name}}">
                        <input type="hidden" name="fc_session_entry_table_name" id="fc_session_entry_table_name" value="{{fc_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}}" />
                 <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-4 col-md-12 col-sm-12 text-center" style="background-color:#5c160a;color: white;"> -->
                  <!-- <input type="submit" class="form-control btn btn-success" id="submit_btn" value="submit"> -->
                   <!-- <a class="btn btn-secondary " href="{{url_for('fc.FcLogout',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> -->
                    <!-- <h5 id="total_count_1" style="margin-top: 5px;">Total count 0</h5> -->
                <!-- </div> -->
        </div>
        
        </form>

             
     
        <!-- <div class="row" style="background-color: #bc2b26; color: white;font-family: 'Trocchi', serif;">
          <div class="col-lg-5 col-md-5 col-sm-12 text-center mt-4" ><h5><span><i class="fa fa-map-marker" aria-hidden="true"></i>
          <div class="col-lg-2 col-md-2 col-sm-12 text-center"><img width="auto" height="105" src="/static/images/clock_2.png"></div>
          <div class="col-lg-5 col-md-5 col-sm-12 text-center mt-4" ><h5><span><i class="fa fa-clock-o" aria-hidden="true"></i>
</span> {{start_time}} 
<br/><span><i class="fa fa-clock-o" aria-hidden="true"></i>
</span> {{end_time}} </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:#5f48bd;color: #036e">
          
          
          <div class="col-lg-3 col-md-3 col-sm-12 mt-3"> 
             <span  class="bi bi-arrow-repeat icon-red " id="report_count_btn" title="Refresh"  style="font-size:30px; color: #15feb3;display:none;"></span> &nbsp;&nbsp;
             <i title="Send Report via mail" data-toggle="modal" data-target="#exampleModal" class="fa fa-paper-plane fa-2x ml-3" aria-hidden="true" style="color:white;"></i>
              <!--   &nbsp;&nbsp;
              <i title="Send Report via whatsapp" data-toggle="modal" data-target="#whatsappmodal"class="fa fa-whatsapp fa-2x ml-3"  style="color:#1df71d;"  aria-hidden="true"></i> -->
              &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>
              &nbsp;&nbsp;
            </div>
            <div class="col-lg-4 col-md-34 col-sm-12 mt-3" style="display:none;"> 
                 <select class = "form-control w-100" id = "report_download_role" name = "report_download_role"></select>

          </div>
          <div class="col-lg-5 col-md-5 col-sm-12 mt-2 text-right"> 
            <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/fc_ajax_loading_image.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">
             <!--  {% if completed_sessions :%}
                  {% for row in completed_sessions : %}
                  <input type="radio" id="{{row.session_id}}" class="view_completed_session_report" name="view_completed_session_report" value="{{row.session_id}}">&nbsp; <b>{{row.session_name}}</b><br/>
    
                    {% endfor %}  
              {% endif %}        -->
            </div>
            <div class="col-lg--10 col-md-10 col-sm-12" style="font-size: 12px;">
             <table class="table table-striped">
              <thead  style="color:#bc2b26;">
                <tr>
                <th>ROLE</th>
                <!--<th>SCANNED SYSTEM NAME</th>-->
                <th>SCANNED COUNT</th>
              </tr>
              </thead>
              <tbody id="report_table" style="color: #036e">
            </tbody>
            </table>
            </div>
          </div>
        </div>
</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
     // $("#fc_scan_form").submit(function(e) 
      $("#fc_scan_form").on("submit", function(event)
        {
            event.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');
            // alert(actionUrl);
            $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data: form.serialize(), // serializes the form's elements.
                        async:true,
                        
                        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" ,"rgb(252 9 60)" );
                            var audio = $("#error_audio")[0];
                            audio.play();
                           }
                           
                           else { // already registered
                             $("#msg_div").css("background" ,"rgb(252 9 60)" );
                             $("#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+"/fc_reports",
                    data: {'conf_id':conf_id,'conf_key':conf_key},
                    beforeSend: function() {
              $("#loading-image").show();
           },
                    success: function(data)
                    { 
                      setTimeout(function() {
                    $("#loading-image").hide();
                    }, 2000)
                        
                        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();
                        $("#report_download_role").html(data_1.role_data);
                        // $("#total_count_1").text("Total count is " + total_count + " @ " + current_dt );
                         $("#total_count_1").html("<span style ='color:#FFFFFF;font-size:15px;' >Total count is  " + total_count + "   @ " + current_dt  + "</span>");
                         $("#delegate_no").focus();
                    }
                    // $("#delegate_no").focus();
                    
                  });
      });



      // view completed session report start http://127.0.0.1:5001
       $('input[type="radio"]').click(function(e){
              var conf_id = $("#conf_id").val();
              var conf_key = $("#conf_key").val();
              var session_id = $(this).val();
              var id_1 = $('input[type="radio"]:checked').attr('id');
              $(id_1).prop("checked", true);
                e.preventDefault();  
                $.ajax({
                          type: "POST",
                          url: BaseUrl+"/"+conf_id+"/"+conf_key+"/"+session_id+"/"+"view_fc_completed_session_report",
                          data: {'conf_id':conf_id,'conf_key':conf_key},
                          beforeSend: function() {
                    $("#loading-image").show();
                 },
                          success: function(data)
                          { 
                            setTimeout(function() {
                          $("#loading-image").hide();
                          }, 2000)
                              
                              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();
                              $("#report_download_role").html(data_1.role_data);
                              // $("#total_count_1").text("Total count is " + total_count + " on " + current_dt );
                               $("#total_count_1").html("<span style ='color:#FFFFFF;font-size:15px;' >Total count is  " + total_count + "   @ " + current_dt  + "</span>");
                               
                          }
                        });
       });

      $('#view_completed_session_report').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            
        }
        // $('#textbox1').val(this.checked);        
    });
      // $(document).on("click" ,".view_completed_session_report" ,function(e)
      // {
      //   var conf_id = $("#conf_id").val();
      //   var conf_key = $("#conf_key").val();
      //   var session_id = $(this).val();
      //   alert(session_id);
      //     e.preventDefault();  
      //     $.ajax({
      //               type: "POST",
      //               url: BaseUrl+"/"+conf_id+"/"+conf_key+"/"+session_id+"/"+"view_fc_completed_session_report",
      //               data: {'conf_id':conf_id,'conf_key':conf_key},
      //               beforeSend: function() {
      //         $("#loading-image").show();
      //      },
      //               success: function(data)
      //               { 
      //                 setTimeout(function() {
      //               $("#loading-image").hide();
      //               }, 2000)
                        
      //                   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();
      //                   $("#report_download_role").html(data_1.role_data);
      //                   // $("#total_count_1").text("Total count is " + total_count + " on " + current_dt );
      //                   $("#total_count_1").html("Total count is " + total_count + " <span style ='color:#8b6f6d;' > on " + current_dt  + "</span>");
                         
      //               }
      //             });
      // });

      // view completed session report end



      // Report download  functi@ 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_fc_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 functi@ end
      $("#enter_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"
                       
                    },
              },

             });

       $("#enter_whatsapp").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 whatsapp number",
                      maxlength : "whatsapp number provided is too long"
                       
                    },
              },

             });            
        });
      // form submit end   

               
      </script>
    {% endblock %}