{% extends 'base/base.html' %}
{% block start %}

<style>
.design-white-box{
    margin: auto;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 18px 10px 20px 20px

}

</style>
<section class="main_content dashboard_part default_content">

<div class="main_content_iner ">
<div class="container-fluid p-0">
<div class="row ">
<div class="col-lg-12">
<div class="single_element">
<div class="quick_activity">
<div class="row">
<div class="col-12">
<div class="quick_activity_wrap">

<div id="total" class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Total</p>
<h3><span>{{total}}</span> </h3>
</div>
{% comment %} <a href="#" class="notification_btn">Today</a> {% endcomment %}
<!-- <div id="bar1" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="{{total}}"></span>
</div> -->
</div>

<div id="idle" class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Idle</p>
<h3><span>{{idle}}</span> </h3>
</div>
{% comment %} <a href="#" class="notification_btn yellow_btn">This Week</a> {% endcomment %}
<!-- <div id="bar2" class="barfiller" >
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="{{idle}}"></span>
</div> -->
</div>

<div id="active"  class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Active</p>
<h3><span>{{active}}</span> </h3>
</div>
{% comment %} <a href="#" class="notification_btn green_btn">This Month</a> {% endcomment %}
<!-- <div id="bar3" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="{{active}}"></span>
</div> -->
</div>

<div id="fault"  class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Fault</p>
<h3><span>{{fault}}</span></h3>
</div>
{% comment %} <a href="#" class="notification_btn violate_btn">Anual</a> {% endcomment %}
<!-- <div id="bar4" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="{{fault}}"></span>
</div> -->
</div>

<div id="powerdown"  class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Power Down</p>
<h3><span>{{powerdown}}</span> </h3>
</div>
{% comment %} <a href="#" class="notification_btn green_btn">This Month</a> {% endcomment %}
<!-- <div id="bar5" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="{{powerdown}}"></span>
</div> -->
</div>


</div>
</div>
</div>
</div>
</div>
</div>


<div class="col-lg-12">
<div class="white_card card_height_100 mb_30 QA_section">
<div class="white_card_header">
<div class="box_header m-0">
<div class="main-title">
<h3 class="m-0">Machine</h3>
</div>

</div>
</div>

<div class="white_card_body">

<div class="QA_table">


<table class="table pt-0 lms_table_active">
<thead>
<tr>

<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">Device ID</th>
<th scope="col">Machine State</th>
<th scope="col" style="width:250px!important">Skill</th>
<th scope="col">Created On</th>
</tr>
</thead>
<tbody>




</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



</section>


<div id="back-top" style="display: none;">
<a title="Go to Top" href="#">
<i class="ti-angle-up"></i>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script>
        var machine_info_state = {{ machine_info_state | safe }};
    </script>

<script>
$(document).ready(function() {

  function TotalMachine(machine_info_state) {

    console.log("machine_info_state",machine_info_state);
 
  var table = $('.lms_table_active').DataTable();
  table.clear().draw(); // Clear existing rows in the table

  // Iterate over the response and add new rows to the DataTable instance
  for (var i = 0; i < machine_info_state.length; i++) {
    var orderNo = i + 1;
    var row = machine_info_state[i];
   var newRow = [
            orderNo,
            row.machine_title,
            row.device_ID,
            row.state_name,
            row.skill,
            row.created_on
          ];

    table.row.add(newRow);
  }

  // Draw the table with the new data
  table.draw();
     // Reinitialize DataTable after adding new data

}
TotalMachine(machine_info_state)
    

  // Click event for the 'Total' card
  $('#total').on('click', function() {
    // Update the table data
    
    TotalMachine(machine_info_state);
  });

  // Click event for the 'Complete' card
  $('#idle').on('click', function() {
    // Update the table data
   
    var machine_state = 1;
    updateTableData(machine_state);
  });

  // Click event for the 'Faulty' card
  $('#active').on('click', function() {
    // Update the table data
   
    var machine_state = 2;
    updateTableData(machine_state);
  });

  // Click event for the 'Progress' card
  $('#fault').on('click', function() {
    // Update the table data
     var machine_state = 3;
    updateTableData(machine_state);
  });

  $('#powerdown').on('click', function() {
    // Update the table data
     var machine_state = 4;
    updateTableData(machine_state);
  });
 
  
});



// Function to update the table data based on the selected card
  function updateTableData(machine_state) {
    // Perform an AJAX request to fetch the updated data from the server
    var MachineState =  {
        machine_state :machine_state
      }
    var serializedData = JSON.stringify(MachineState);
    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      url: '{% url "MachineState" %}',
      method: 'POST',
      data: serializedData,
      contentType: 'application/json',
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader('X-CSRFToken', csrftoken);
      },
      success: function(response) {
        //console.log(response.dataOperator)
    
        var table = $('.lms_table_active').DataTable();
        table.clear().draw(); // Clear existing rows in the table
        if ( response.dataMachine == 'null'){
             table.clear().draw(); // Clear any existing rows (if any)
             //table.rows.add(['No data found']).draw();
          }
        else {
        // Iterate over the response and add new rows to the DataTable instance
        for (var i = 0; i < response.dataMachine.length; i++) {
          var orderNo = i + 1;
          var row = response.dataMachine[i];
          var newRow = [
            orderNo,
            row.machine_title,
            row.device_ID,
            row.state_name,
            row.skill,
            row.created_on
          ];

          table.row.add(newRow);
        }

        // Draw the table with the new data
        table.draw();
        }
    },
      error: function() {
        console.log('Error occurred while fetching the updated data.');
      }
    });
  }

//var machine_data = {{ machine_info_state|safe }};
//console.log(machine_data.length,'aq');

</script> 




{% endblock %}

