
{% include 'base/test_nav_emp.html' %}

<style>
.flx{

    width:81rem;
    height:20rem;
   
}
.padd{
    padding-left:1rem;
    padding-right:1rem; 
    display:flex;
    justify-content:center;
    margin-top:5rem;
}



.bglocal-primary{background:#17a2b8;}
.bglocalbar-primary{background:#1592a5;}

.bglocal-success{background:#28a745}
.bglocalbar-success{background:#24963e;}

.bglocalbar-warning{background:#ffc107;}
.bglocal-warning{background:#e5ad06;}

.bglocalbar-danger{background:#dc3545;}
.bglocal-danger{background:#c6303e;}

.tab-pane {
    "display: block; box-sizing: border-box; height: 400px; width: 800px;"
}
</style>

{% if obj_help %}
<div class="row">
    <div class="col-lg-3 col-6">

    {% comment %} <div class="padd"> {% endcomment %}
     <div class="card flx">
        <div class="card-header p-3 bglocalbar-primary">
            <h5><b>{{obj_help.heading}}</b></h5>
        </div>
        <div class="card-body bglocal-primary">
          {% comment %} <h6 class="card-title"></h6> {% endcomment %}
          <h2>14</h2>
        </div>
      </div>
    </div>

</div>

{% endif %} 


  <h3>Last 7 days Activity</h3>  
<nav>
    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
      <button class="nav-link active" id="nav-patient-tab" data-bs-toggle="tab" data-bs-target="#nav-patient" type="button" role="tab" aria-controls="nav-patient" aria-selected="true"><i class="fa-solid fa-pie-chart"></i >Age-Patients</button>
      <button class="nav-link" id="nav-labreport-tab" data-bs-toggle="tab" data-bs-target="#nav-labreport" type="button" role="tab" aria-controls="nav-labreport" aria-selected="false"><i class="fa-solid fa-flask"></i> Lab Reports</button>  
      {% comment %} <button class="nav-link" id="nav-report-tab" data-bs-toggle="tab" data-bs-target="#nav-report" type="button" role="tab" aria-controls="nav-report" aria-selected="false"><i class="fa-solid fa-file"></i> Reports</button> {% endcomment %}
      <button class="nav-link" id="nav-treatment-tab" data-bs-toggle="tab" data-bs-target="#nav-treatment" type="button" role="tab" aria-controls="nav-treatment" aria-selected="false"><i class="fa-solid fa-bed"></i> Treatments</button>
    </div>
  </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-patient" role="tabpanel" aria-labelledby="nav-patient-tab">
            <canvas id="revenue-chart-canvas" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-labreport" role="tabpanel" aria-labelledby="nav-labreport-tab">
            <canvas id="sales-chart-canvas2"  ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-treatment" role="tabpanel" aria-labelledby="nav-treatment-tab" style="position: relative; height: 300px;">
            <canvas id="sales-chart-canvas3" ></canvas>
        </div>
    </div>







<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  {% comment %} "list_total_labels": ["SURAM", "IRUMAL ", "IRAIPPU ", "ILAIPPU ", "GUNMAM ", "SOBAI "], "list_total_totals": [5, 15, 2, 10, 4, 4] {% endcomment %}


<script>
  const ch_bar = document.getElementById('revenue-chart-canvas');
  const ch_call = document.getElementById('sales-chart-canvas');
  new Chart(ch_bar, {
    type: 'bar',
    data: {
      labels: ["SURAM", "IRUMAL ", "IRAIPPU ", "ILAIPPU ", "GUNMAM ", "SOBAI "],
      datasets: [{
        label: 'Total Patients with Disease',
        data:  [5, 15, 2, 10, 4, 4],
        borderWidth: 1
      }]
    },
    options: { 
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

  {% comment %} new Chart(ch_call, {
    type: 'bar',
    data: {
      labels: {{sitedata.data_chart.colbl1|safe}} ,//['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: 'Top 10 sales amount ₹',
        data: {{sitedata.data_chart.coval1|safe}} , //[12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: { 
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  }); {% endcomment %}


</script>


