{% extends 'VenueScan/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Venue Exit 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 %}
  
  <form id="badge_scan_form" class="del_no" method="POST" action="{{url_for('venue_scan.PostVenueExitScanData')}}" class="mt-0" >
    <br/>
    <div class="row form-group">
      <div class="col-lg-12 col-md-12 col-sm-12 text-center" style="background-color:#FFFFFF;color: white;">
        {% if session.get("venue_exit_session") :%}
         <p align="right">
         <a class="btn btn-primary" href="{{url_for('venue_scan.VenueScanDashboard' ,conf_id = conf_id ,conf_key=conf_key)}}" target="_blank" title="Report"><i class="fa fa-dashboard" aria-hidden="true"> Click to report </i></a>
          <a class="btn btn-danger" href="{{url_for('venue_scan.VenueExitLogout' ,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>
          </p>
        {% endif %}                           
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12" style="background-color: #FFFFFF;min-height: 140px;">
        <h2 class="text-center"> Venue Exit Scan  </h2>
        <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>
        <br> 
        <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}}">

        <br/>
      </div>
    </div>
  </form>
</div>

{% endblock %}
{% block script %}
<script type="text/javascript">
  var BaseUrl = document.location.origin;
  $(document).ready(function(e)
  {
    $("#msg_div").hide();
    // 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;
          $("#msg_div").hide();
          $.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);
                           //  var data_1   = JSON.parse(data);
                           // var status    = data_1.status;


                         $.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('');
                          $("#0").show();
                          
                          if (status == 1)
                           {  // successfully registered
                            $("#msg_div").show();
                              $("#msg_label").html( msg);
                              $("#msg_div").css("background" ,"green" );
                            //   var audio = $("#thanku")[0];
                            //   audio.play();
                           }
                           else if(status==2)
                           { // not registered with us
                            $("#msg_div").show();
                            $("#msg_label").html(msg);
                            $("#msg_div").css("background" ,"#9d2b16" );
                            // var audio = $("#error_audio")[0];
                            // audio.play();
                           }
                           else { // already registered
                            $("#msg_div").show();
                             $("#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   
});
             
// form submit end   
</script>
{% endblock %}