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


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<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">
  
  
  <!-- 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="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button> -->
        </div>
        <div class="modal-body">
          <div class="col-lg-4">
            <div class="dropdown" >
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton_1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select state
            </button>
            <div class="dropdown-menu group_menu" aria-labelledby="dropdownMenuButton_1" >
            
            {% comment %} <a class="dropdown-item" onclick="selectMachine('{{machine.ID}}','{{machine.title}}')">{{machine.title}}</a> {% endcomment %}
            </div>
            </div>
            </div>
            <p id="modalContent"></p>
          <table class="table_bundle_status pt-0 lms_table_active">
            <thead>
              <th>Sr no</th>
              <th>Title</th>
              <th>Group</th>
              <th>State</th>
            </thead>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
        </div>
      </div>
    </div>
  </div>
<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 Article</p>
<h3><span>{{total_article}}</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_article}}"></span>
</div> -->
<!-- </div> -->

<div id="idle" class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Total Production</p>
<h3 ><span id="total_production">{{total_production}}</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="{{total_production}}"></span>
</div> -->
</div>

<div id="active"  class="single_quick_activity" style="cursor:pointer">
<div class="count_content">
<p>Today Production</p>
<h3><span id="today_production">{{today_production}}</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="{{today_production}}"></span>
</div> -->
</div>


<div id="active"  class="single_quick_activity" style="cursor:pointer">
  <div class="count_content">
  <p>Yesterday Production</p>
  <h3><span id="yesterday_production">{{today_production}}</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="{{today_production}}"></span>
  </div> -->
  </div>

  <div id="active"  class="single_quick_activity" style="cursor:pointer">
    <div class="count_content">
    <p>Day before yesterday Production</p>
    <h3><span id="day_before_yesterday_production">{{today_production}}</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="{{today_production}}"></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">Article</h3>
</div>

</div>
</div>
<!-- Button trigger modal -->

<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">Pieces</th>
<th scope="col">Order Quantity</th>
<th scope="col">Bundle Size</th>
<th scope="col">Fabric Length</th>
<th scope="col">Start Date</th>
<th scope="col">End Date</th>
<th scope="col">See More</th>

</tr>
</thead>
<tbody>
 {% if data_artcile %}
    {% for item in data_artcile %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.pieces }}</td>
        <td>{{ item.orderQuantity }}</td>
        <td>{{ item.bundleSize }}</td>
        <td>{{ item.fabricLength }}</td>
        <td>{{ item.startDate }}</td>
        <td>{{ item.deliveryDate }}</td>
        <td data-toggle="modal" data-target="#exampleModal" onclick="openModal('{{ item.ID }}','{{ item.title }}')">>></td>
      </tr>
    {% endfor %}
  {% else %}
    <tr>
      <td colspan="12"style="text-align:center">No data available</td>
    </tr>
  {% endif %}


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

<!-- <button onclick="openPopup()">Open Popup</button> -->
<!-- <div id="popup" class="popup">
  <div class="popup-content">
    <div class="col-lg-4">
      <div class="dropdown" >
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton_1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Select state
      </button>
      <div class="dropdown-menu group_menu" aria-labelledby="dropdownMenuButton_1" >
      
      {% comment %} <a class="dropdown-item" onclick="selectMachine('{{machine.ID}}','{{machine.title}}')">{{machine.title}}</a> {% endcomment %}
      </div>
      </div>
      </div>
      <span class="close" onclick="closePopup()">&times;</span>
      <table class="table_bundle_status pt-0 lms_table_active">
        <thead>
          <th>Sr no</th>
          <th>Title</th>
          <th>Group</th>
          <th>State</th>
        </thead>
      </table>
  </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 article = "{{ request.session.articleinfo|safe }};"
var article_json = JSON.parse(decodeHTMLEntities(article).replace(/[\x00-\x1F\x7F-\x9F]/g, "").replace(/'([^']+)'/g, '"$1"').replace(/'/g, '"').split(";")[0])
console.log("article",article_json);
var totalproduction = 0;
var todayproduction = 0;
var yesterdayproduction = 0;
var day_before_yesterday_production = 0;
for (let index = 0; index < article_json.length; index++) {

  totalproduction = totalproduction+parseInt(article_json[index].total_production);
  todayproduction = todayproduction+parseInt(article_json[index].today_production);
  yesterdayproduction = yesterdayproduction+parseInt(article_json[index].yesterday_production);
  day_before_yesterday_production = day_before_yesterday_production + parseInt(article_json[index].day_before_yesterday_production)
  
}
console.log("TotalProduction",totalproduction);
console.log("todayproduction",todayproduction);
console.log("yesterdayproduction",yesterdayproduction);
console.log("day_before_yesterday_production",day_before_yesterday_production);
var h3Element = document.getElementById('total_production');
h3Element.innerHTML = totalproduction;
var today_production = document.getElementById('today_production');
today_production.innerHTML = todayproduction;
var yesterday_production = document.getElementById('yesterday_production');
yesterday_production.innerHTML = yesterdayproduction;

var day_before_yesterday_productions = document.getElementById('day_before_yesterday_production');
day_before_yesterday_productions.innerHTML = day_before_yesterday_production;
//day_before_yesterday_production
function decodeHTMLEntities(text) {
  var textarea = document.createElement('textarea');
  textarea.innerHTML = text;
  return textarea.value;
}

function openModal(id,title) {
    // Set the content dynamically
    document.getElementById('modalContent').textContent = title;

    var dataGroup = [{"id":"1","title":"Created"},{"id":"2","title":"Stitching"},{"id":"3","title":"Completed"},{"id":"4","title":"Quality Error"}]
    console.log("loop runsq",document.getElementById('dropdownMenuButton_1'));
    document.getElementById('dropdownMenuButton_1').addEventListener('click',function(){
      console.log('clicked');
      var dropdownMenu = document.querySelector('.group_menu');
      console.log(dropdownMenu);
      while (dropdownMenu.length > 0) {
              dropdownMenu[0].remove();
          }
       dropdownMenu.innerHTML = '';
       for (var i = 0; i < dataGroup.length; i++) {
          console.log("loop runs");
          var groupinfo = dataGroup[i];
          var dropdownItem = document.createElement('a');
          dropdownItem.className = 'dropdown-item';
          dropdownItem.setAttribute('onclick', "selectGroup('" + groupinfo.id + "', '" + groupinfo.title + "', '" + id + "')");
          dropdownItem.textContent = groupinfo.title;
          dropdownMenu.appendChild(dropdownItem);
        }
    })
    // document.getElementById('dropdownMenuButton_1').addEventListener('click', function() {
    //   console.log("loop runs");
    //     var dropdownMenu = document.querySelector('.group_menu');
    //     while (dropdownMenu.length > 0) {
    //           dropdownMenu[0].remove();
    //       }
    //     // Clear existing dropdown items
    //     dropdownMenu.innerHTML = '';

    //     // Assuming the response is stored in the 'dataGroup' variable
    //     for (var i = 0; i < dataGroup.length; i++) {
    //       console.log("loop runs");
    //       var groupinfo = dataGroup[i];
    //       var dropdownItem = document.createElement('a');
    //       dropdownItem.className = 'dropdown-item';
    //       dropdownItem.setAttribute('onclick', "selectGroup('" + groupinfo.id + "', '" + groupinfo.title + "', '" + id + "')");
    //       dropdownItem.textContent = groupinfo.title;
    //       dropdownMenu.appendChild(dropdownItem);
    //     }
    //   });
  }





      function selectGroup(id,title,articleId){
        console.log("groupselected",id);
        document.getElementById('dropdownMenuButton_1').textContent = title;
        getArticleBundleStatus(articleId,id)
      }

$(document).ready(function() {

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

  // Click event for the 'Complete' card
  $('#idle').on('click', function() {
    // Update the table data
   
    //var machine_state = 1;
    //pdateTableData(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 openPopup(title,id) {
  console.log("openTitle",title);
    var popup = document.getElementById('popup');
    popup.style.display = 'block';
    // document.getElementById('dropdownMenuButton_1').addEventListener('click', function() {
    //     var dropdownMenu = document.querySelector('.group_menu');
    //     while (dropdownMenu.length > 0) {
    //           dropdownMenu[0].remove();
    //       }
    //     // Clear existing dropdown items
    //     dropdownMenu.innerHTML = '';

    //     // Assuming the response is stored in the 'dataGroup' variable
    //     for (var i = 0; i < dataGroup.length; i++) {
    //       var groupinfo = dataGroup[i];
    //       var dropdownItem = document.createElement('a');
    //       dropdownItem.className = 'dropdown-item';
    //       dropdownItem.setAttribute('onclick', "selectGroup('" + groupinfo.id + "', '" + groupinfo.title + "', '" + id + "')");
    //       dropdownItem.textContent = groupinfo.title;
    //       dropdownMenu.appendChild(dropdownItem);
    //     }
    //   });
    
}

function closePopup() {
    var popup = document.getElementById('popup');
    popup.style.display = 'none';
}




      



// Function to update the table data based on the selected card
    function getArticleBundleStatus(id,status) {
    // Perform an AJAX request to fetch the updated data from the server
    var MachineState =  {
        id :id,
        status:status
      }
    var serializedData = JSON.stringify(MachineState);

    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      url: '{% url "Get_bundle_status" %}',
      method: 'POST',
      data: serializedData,
      contentType: 'application/json',
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader('X-CSRFToken', csrftoken);
      },
      success: function(response) {
        console.log(response)
    
        var table = $('.table_bundle_status').DataTable();
        table.clear().draw(); // Clear existing rows in the table
        if ( response.data_skill == '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.data_skill.length; i++) {
          var orderNo = i + 1;
          var row = response.data_skill[i];
          var newRow = [
            orderNo,
            row.article_title,
            row.group,
            row.state,
          ];

          table.row.add(newRow);
        }

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


    

</script> 




{% endblock %}

