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

<style>
  .bundle-link-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
  }
</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">
<!-- <h1>Welcome, {{request.user}}</h1> -->
<a href="{% url 'article_details' %}" class="bundle-link-disabled"><div class="single_quick_activity">
<div class="count_content">
<p>Article</p>
<h3><span>{{ request.session.articleinfo|default:"0" }}</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="{{ request.session.articleinfo|default:'0' }}"></span>
</div>
</div>
</a>

<a href="{% url 'bundle_details' %}" class="bundle-link-disabled"><div class="single_quick_activity" >
<div class="count_content">
<p>Bundle</p>
<h3><span>{{request.session.bundlesInfo|default:'0'}}</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="{{request.session.bundlesInfo|default:'0'}}"></span>
</div>
</div></a>

<a href="{% url 'operator_details' %}" class="bundle-link-disabled"><div class="single_quick_activity">
<div class="count_content">
<p>Operator</p>
<h3><span>{{request.session.operators_info|default:'0'}}</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="{{request.session.operators_info|default:'0'}}"></span>
</div>
</div>
</a>

<a href="{% url 'machine_details' %}" class="bundle-link-disabled"><div class="single_quick_activity">
<div class="count_content">
<p>Machine</p>
<h3><span >{{request.session.machinesInfo|default:'0'}}</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="{{request.session.machinesInfo|default:'0'}}"></span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="white_card card_height_100 mb_30">
<div class="white_card_header">
<div class="box_header m-0">
<div class="main-title">
<h3 class="m-0">Article</h3>
</div>
<div class="header_more_tool">
<div class="dropdown">
<span class="dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown">
<i class="ti-more-alt"></i>
</span>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"> <i class="ti-eye"></i> Action</a>
<a class="dropdown-item" href="#"> <i class="ti-trash"></i> Delete</a>
<a class="dropdown-item" href="#"> <i class="fas fa-edit"></i> Edit</a>
<a class="dropdown-item" href="#"> <i class="ti-printer"></i> Print</a>
<a class="dropdown-item" href="#"> <i class="fa fa-download"></i> Download</a>
</div>
</div>
</div>
</div>
</div>
<div class="white_card_body pb-0">
{% comment %} <div id="line-chart"> </div> {% endcomment %}
<canvas id="barChart" style="height:307px;"></canvas>
</div>
</div>
</div>


<div class="col-lg-6">
<div class="white_card card_height_100 mb_30">
<div class="white_card_header">
<div class="box_header m-0">
<div class="main-title">
<h3 class="m-0">Bundle</h3>
</div>
<div class="header_more_tool">
<div class="dropdown">
<span class="dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown">
<i class="ti-more-alt"></i>
</span>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"> <i class="ti-eye"></i> Action</a>
<a class="dropdown-item" href="#"> <i class="ti-trash"></i> Delete</a>
<a class="dropdown-item" href="#"> <i class="fas fa-edit"></i> Edit</a>
<a class="dropdown-item" href="#"> <i class="ti-printer"></i> Print</a>
<a class="dropdown-item" href="#"> <i class="fa fa-download"></i> Download</a>
</div>
</div>
</div>
</div>
</div>
<div class="white_card_body pb-0">
<canvas id="pieChart" width="300" height="300"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>




<div class="footer_part default_footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="footer_iner text-center">
{% comment %} <p>2020 © Influence - Designed by <a href="#"> <i class="ti-heart"></i> </a><a href="#"> Dashboard</a></p> {% endcomment %}
</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://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Get the canvas element
var ctx = document.getElementById('barChart').getContext('2d');

// Define the chart data
var data = {
  labels: ['Today', 'Yesterday', 'Ereyesterday'],
  datasets: [{
    label: 'Production',
    data: [{{request.session.today_production|default:'0'}}, {{request.session.yesterday_production|default:'0'}}, 30],
    backgroundColor: 'rgba(0, 123, 255, 0.5)',
    borderColor: 'rgba(0, 123, 255, 1)',
    borderWidth: 1
  }]
};

// Configure the chart options
var options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

// Create the chart
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

</script>

<script>
// Sample data for the pie chart

var data = {
  labels: ['Today','Monthly'], // Labels for the segments
  datasets: [{
    data: [{{request.session.todayBundleCount|default:'0'}},{{request.session.monthlyBundleCount|default:'0'}} ], // Values for each segment
    backgroundColor: ['#FF6384', '#36A2EB'], // Colors for each segment
  }]
};

// Options for the pie chart
// Options for the pie chart
var options = {
  responsive: true,
  maintainAspectRatio: false, // Add this option to maintain the canvas size specified in HTML
};
// Get the canvas element
var ctx = document.getElementById('pieChart').getContext('2d');

// Create the pie chart
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: options
});

</script>



<script>
  // Wait for the page to load completely
  window.onload = function () {
    // Enable the link(s) once the page has loaded
    var bundleLinks = document.querySelectorAll('.bundle-link-disabled');
    bundleLinks.forEach(function (link) {
      link.classList.remove('bundle-link-disabled');

      // Optionally, you can restore the original cursor and opacity values if needed
       link.style.cursor = 'pointer';
      link.style.opacity = '1';
    });

    // Add any additional actions you want to perform after the page has loaded
    // ...
  };
</script>





{% endblock %}