{% extends 'kitsession_counter/kc_session_layout.html' %}
{% block head %}
{% endblock %}
{% block title %}KitBo Counter{% endblock %}
{% block style %}
  <style>
     table, th, td {
         border: 1px solid black;}
    .error{
      color: red;
      }
    </style>
{% endblock %}
{% block content %}
<div class="container">
            <div class="card-body">
                {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
                       <div class="alert alert-success text-center successMessage alert-dismissible">
                       <button class="close" data-dismiss="alert" aria-label="close">&times;</button>
                       <h6>{{ mesg|safe }}</h6>
                       </div>
                {% endfor %}

               {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
                       <div class="alert alert-danger text-center successMessage" id="successMessage">
                       <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
                       <h6>{{ mesg|safe }}</h6>  
                       </div>
                {% endfor %}
            
             <form name="form-reset" id="reg"  action="">
                <div class="row">
                  
                    <input type="hidden" name="session_id" id="session_id" value="{{session_id or 0 }}">
                    <input type="hidden" name="html_data" id="html_data" value ="{{html_data}}">

          <div class="row ml-2 mr-2 mt-2">
         <div class="col-lg-3 col-md-3 col-sm-12">
             <label for="name">SESSION NAME</label><input class="form-control" type="text" id="session_name"  name="session_name">&nbsp;
         </div>
         <div class="col-lg-2 col-md-2 col-sm-12">
             <label for="email">SESSION KEY</label><input class="form-control" type="text" id="session_key"  name="session_key">&nbsp;
         </div> 

         <div class="col-lg-3 col-md-3 col-sm-12">
             <label for="mobile">START TIME</label><input class="form-control" type="datetime-local" id ="start_time"  name="start_time">&nbsp;
         </div> 

         <div class="col-lg-3 col-md-3 col-sm-12">
             <label for="password">END TIME</label><input class="form-control" type="datetime-local" id ="end_time" name="end_time">&nbsp;

          </div>

         <div class="col-lg-1 col-md-1 col-sm-12">
             <label for="password"></label>
             <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="button" class=" btn btn-success btn-lg " id="session_save_btn" value="save">
             
             <input type="button" class=" btn btn-warning btn-lg update_btn" style="display: none;" id="update_btn_1" value="Update"><br>
         <!-- <input type="reset" class="form-control btn btn-danger clear_btn" style="display: none;" id="clear_btn_1" value="Clear"> -->
         </div>
         
     </div>
</form>

<div class="card-group w-100">
   <div class="card-body">
      <!-- <h1 style="text-align: center;">SESSION INDEX</h1> -->
      <div>
         <table class="table table-striped ">
            <thead class="table-dark">
               <tr>
                  <th scope="col">S.NO</th>
                  <th scope="col">SESSION NAME</th>
                  <th scope="col">SESSION KEY</th>
                  <th scope="col">START TIME</th>
                  <th scope="col">END TIME</th>
                  <th scope="col"></th>
                 <!--  <th scope="col">END BUTTON</th>
                  <th scope="col">EDIT FORM</th>
                  <th scope="col">DELETE FORM</th> -->
               </tr>
            </thead>
            <tbody id="divShowTable_1"></tbody>
         </table>
      </div>
   </div>
</div>
</div>
      </div>
   
<br>
 {% endblock %}
 {% block script %}

<script type="text/javascript">
        
       var BaseUrl = document.location.origin;

     $(document).ready( function (){

        var html_data = $("#html_data").val();
        $("#divShowTable_1").html(html_data);

        
        $("#session_save_btn").click(function()
          {
              var session_name = $("#session_name").val();
              var session_key = $("#session_key").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();
               
            if(session_name.length == 0)
               {
                alert("Please enter session name");
                return false;
                 }
            else if(session_key.length == 0)
                {
                  alert("Please enter session key");
                  return false;
                 }
            else if(start_time.length == 0)
                {
                  alert("Please enter start time");
                  return false;
                 }
            else if(end_time.length == 0)
                {
                   alert("Please enter mobile number");
                   return false;
                } 
            else if (start_time > end_time)
                {
                    alert("End Time is less than start time");
                 }  
            else
                {
            $.ajax({
                      type: 'POST', // <-- get method of form
                      url: BaseUrl+"/post_kit_session", // <-- get action of form
                      data:  {
                        'session_name':session_name,
                        'session_key':session_key,
                        'start_time':start_time,
                        'end_time':end_time,
                        'conf_id' : conf_id,
                        'conf_key' : conf_key
                        },
                      success: function(reposnse){
                         var data_1 = JSON.parse(reposnse);
                         var msg = data_1.msg;
                         var html_data = data_1.html_data;
                         alert(msg);
                         if (msg == "success")
                         {
                            $("#divShowTable_1").empty();
                            $("#divShowTable_1").html(html_data);
                            
                         }  
                         else
                         {
                            alert(msg);
                            return false;
                         }
                         $("#session_name").val('');   
                         $("#session_key").val('');
                         $("#start_time").val('');
                         $("#end_time").val('');                
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) { 
                          //location.reload();  
                        }                      
                    });   
                } 
        });
        
        $(document).on('click','.edit_btn',function(e)
          {
             e.preventDefault();
            var session_id = $(this).val();
           $.ajax({
                    type: 'GET', // <-- get method of form
                    url: BaseUrl+"/edit_kit_session_index", // <-- get action of form
                    data:  {'session_id' : session_id},
                    success: function(reposnse){
                       var data_1    = JSON.parse(reposnse);
                       var msg       = data_1.msg;
                       var edit_data = data_1.kit_data;
                       var status = data_1.status
                       
                       if (msg == "success")
                       {
                       $("#session_name").val(edit_data.session_name);
                       $("#session_key").val(edit_data.session_key);
                       $("#start_time").val(edit_data.start_time);
                       $("#end_time").val(edit_data.end_time);

                       $("#session_id").val(edit_data.session_id);
                       $("#session_save_btn").hide();
                       $(".update_btn").show();
                       $(".clear_btn").show();
                       }  
                       else
                       {
                          alert(msg);
                          return false;
                       }   
                         
                      },
                  });
          }); 

         // update btn start
          $(".update_btn").click(function()
          {
            var session_id  = $("#session_id").val();
            var session_name        = $("#session_name").val();
            var session_key = $("#session_key").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();

            if(session_name.length == 0)
               {
                alert("Please enter session name");
                return false;
                 }
            else if(session_key.length == 0)
                {
                  alert("Please enter session key");
                  return false;
                 }
            else if(start_time.length == 0)
                {
                  alert("Please enter start time");
                  return false;
                 }
            else if(end_time.length == 0)
                {
                   alert("Please enter mobile number");
                   return false;
                }
            else if (start_time > end_time)
                {
                    alert("End Time is less than start time");
                 }   
            else
                {
               $.ajax({
                      type: 'POST', // <-- get method of form
                      url: BaseUrl+"/update_kit_session_index", // <-- get action of form
                      data:  {
                        'session_name'       :session_name,
                        'session_id' :session_id,                        
                        'session_key':session_key,
                        'start_time' :start_time,
                        'end_time'   :end_time,
                        'conf_id' : conf_id,
                        'conf_key' : conf_key
                        },
                      success: function(reposnse){
                         var data_1    = JSON.parse(reposnse);
                         var msg       = data_1.msg;
                         var html_data = data_1.html_data;
                         var status    = data_1.status;
                         if (status == 1)
                         {                         
                            alert("Successfully updated.");
                            $("#divShowTable_1").empty();
                            $("#divShowTable_1").html(html_data);
                            
                         }  
                         else
                         {
                            alert(msg);
                            return false;
                         }
                         $("#session_name").val('');   
                         $("#session_key").val('');
                         $("#start_time").val('');
                         $("#end_time").val('');
                         $("#session_id").val(0);
                         $("#session_save_btn").show();
                         $(".update_btn").hide();
                         $(".clear_btn").hide();                    
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) { 
                          //location.reload();  
                        }                      
                    }); 
                    }  
            return false;
        });

         $(".clear_btn").click(function()
          {
            $("#session_name").val('');
            $("#session_key").val('');
            $("#start_time").val('');
            $("#end_time").val('');
            $("#session_save_btn").show();
            $(".update_btn").hide();
            $(".clear_btn").hide();
          });

          $(document).on("click",".delete_btn",function(e)
          {
            e.preventDefault();
            if(confirm("Are you sure you want to delete this?"))
            {
            var session_id = $(this).val();
           $.ajax({
                    type: 'GET', // <-- get method of form
                    url: BaseUrl+"/delete_kit_session_index", // <-- get action of form
                    data:  {'session_id' : session_id},
                    success: function(reposnse){
                       var data_1    = JSON.parse(reposnse);
                       var msg       = data_1.msg;
                
                       var html_data = data_1.html_data;                       
                       if (msg == "success")
                       {
                        $("#divShowTable_1").empty();
                        $("#divShowTable_1").html(html_data);  
                        }  
                       else
                       {
                          alert(msg);
                          return false;
                       }   
                         
                      },
                  });
             }
            else{
                return false;
               }
          }); 

         
          $(document).on("click",".start_btn",function(e)
          {
            e.preventDefault();
            if(confirm("Are you sure you want to start the session"))
            {
            var session_id_1 = $(this).attr("id");
            var arr          = session_id_1.split('_');
            var session_id   = arr[1];
            var start_btn_id = "#startbtn_"+session_id;
            var end_btn_id   = "#endbtn_"+session_id;
            var conf_id    = $("#conf_id").val();
            var conf_key   = $("#conf_key").val();
        
            
             $.ajax({
                      type: 'POST', // <-- get method of form
                      url: BaseUrl+"/update_kitstart_time", // <-- get action of form
                      data:  { 
                        'session_id' : session_id,
                        'conf_id'    : conf_id,
                        'conf_key'   : conf_key
                         },
                       success: function(reposnse){
                       var data_1    = JSON.parse(reposnse);
                       var msg       = data_1.msg;
                       var html_data = data_1.html_data;                       
                       if (msg == "success")
                       {
                            
                          $("#divShowTable_1").empty();
                          $("#divShowTable_1").html(html_data);  
                          $("#session_id").val(html_data.session_id);
                          // $(start_btn_id).css("display" , "none");
                          // $(end_btn_id).css("display" , "block");
                          
                       }  
                       else
                       {
                          alert(msg);
                          return false;
                       } 
                      }
                 });
               }
             else{
                return false;
             }
         });

         $(document).on("click",".end_btn",function(e)
          {
             e.preventDefault();
             if(confirm("Are you sure you want to end the session"))
            {
             var session_id_1 = $(this).attr("id");
            var arr          = session_id_1.split('_');

            var session_id   = arr[1];
            var start_btn_id = "#startbtn_"+session_id;
            var end_btn_id   = "#endbtn_"+session_id;
            var conf_id    = $("#conf_id").val();
            var conf_key   = $("#conf_key").val();
             $.ajax({
                      type: 'POST', // <-- get method of form
                      url: BaseUrl+"/update_kitend_time", // <-- get action of form
                      data:  {
                        'session_id' : session_id,
                        'conf_id'    : conf_id,
                        'conf_key'   : conf_key
                    },
                      success: function(reposnse)
                      {
                          var data_1    = JSON.parse(reposnse);
                          var msg       = data_1.msg;
                          var html_data = data_1.html_data;                       
                          if (msg == "success")
                          {
                           $("#session_id").val(html_data.session_id); 
                           $("#divShowTable_1").empty();
                           $("#divShowTable_1").html(html_data);  
                           // $(start_btn_id).css("display" , "block");
                           // $(end_btn_id).css("display" , "none"); 
                       
                          }  
                          else
                           {
                            alert(msg);
                            return false;
                           }
                        }
                    });
             }
             else{
                return false;
             }

          });
   });
</script>
{% endblock %}