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


{% comment %} below imports are related to bootstrap table {% endcomment %}
<link href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css"   rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"   rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"  type="text/javascript" ></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"  type="text/javascript" ></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/export/bootstrap-table-export.min.js"  type="text/javascript" ></script> 




<style>
.flx{

    width:84rem;
    height:20rem;
    padding-right:1rem;
    padding-left:1rem;
    
   
}
.wid{
    height:450px;
    width:600px;
   
}
.pad{
  padding:1rem;
  

}
.space{
  line-height:40px;
}
.lne_space{

  padding:1rem;
  line-height:32px;
  margin-top:12rem;
  margin-left:1rem;
  margin-right: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;"
}
.btn  {margin-top: 10px;}



@media (max-width: 991px) {
  .lne_space{

    margin-right:1rem;
    line-height:25px;
   

}
}

</style>

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

    {% comment %} <div class="padd"> {% endcomment %}
     <div class="card flx mt-3">
        <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 %} 
<div  class="lne_space border ">
 
      {% load bootstrap_tags %}
      {% load crispy_forms_tags %} 
      {% crispy form %}


  <div class="space">
 
      <a href="{{request.path}}"> <button type="button" class="btn btn-warning"  >Reset</button></a>
  </div>
</div>




{% comment %}<center><h3 class="mt-4"><b>{{report_data.str_period}} - Month Report - Table - {{report_data.reportlevel}} </b></h3> </center> 
<h2 align="center"class="mt-5"> {{tblname}} </h2>
 <div id="toolbar">
  <button id="remove" class="btn btn-danger " disabled>
    <i class="fa fa-trash"></i> Remove from View
  </button>
</div> {% endcomment %}




  <center><h3 class="mt-4"><b>{{report_data.str_period}} - Month Report - Chart - {{report_data.reportlevel}} </b></h3> </center> 
  <div class="pad">
<nav>
    <div class="nav nav-tabs mb-3 mt-2 " 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 > Disease</button>

      <button class="nav-link" id="nav-child-tab" data-bs-toggle="tab" data-bs-target="#nav-child" type="button" role="tab" aria-controls="nav-child" aria-selected="false"><i class="fa-solid fa-child"></i> Child</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 bed flask"></i> Reports</button> {% endcomment %}
      <button class="nav-link" id="nav-male-tab" data-bs-toggle="tab" data-bs-target="#nav-male" type="button" role="tab" aria-controls="nav-male" aria-selected="false"><i class="fa-solid fa-male"></i> Male</button>
      <button class="nav-link" id="nav-female-tab" data-bs-toggle="tab" data-bs-target="#nav-female" type="button" role="tab" aria-controls="nav-female" aria-selected="false"><i class="fa-solid fa-female"></i> Female</button>
      <button class="nav-link" id="nav-Transgender-tab" data-bs-toggle="tab" data-bs-target="#nav-Transgender" type="button" role="tab" aria-controls="nav-Transgender" aria-selected="false"><i class="fa-solid fa-transgender"></i> Transgender</button>
    </div>
  </nav>
    <div class="tab-content " id="nav-tabContent">
        <div class="tab-pane fade show active wid " id="nav-patient" role="tabpanel" aria-labelledby="nav-patient-tab">
            <h3>Disease by Number of patients</h3>
            
            <canvas id="donut-patient" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-child" role="tabpanel" aria-labelledby="nav-child-tab" style="position: relative; height: 500px;">
            <h3>Disease by Children Age - Radar Chart</h3>
            <canvas id="radar-chart-child"  ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-male" role="tabpanel" aria-labelledby="nav-male-tab" style="position: relative; height: 500px;">
          <h3>Disease by Male Age - Radar Chart</h3>
            <canvas id="radar-chart-male" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-female" role="tabpanel" aria-labelledby="nav-female-tab" style="position: relative; height: 500px;">
          <h3>Disease by Female Age - Radar Chart</h3>
            <canvas id="radar-chart-female" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-Transgender" role="tabpanel" aria-labelledby="nav-Transgender-tab" style="position: relative; height: 500px;">
          <h3>Disease by Transgender Age - Radar Chart</h3>
            <canvas id="radar-chart-Transgender" ></canvas>
        </div>    

    </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_disease = document.getElementById('donut-patient');
  const ch_child = document.getElementById('radar-chart-child');
  const ch_male = document.getElementById('radar-chart-male');
  const ch_female = document.getElementById('radar-chart-female');
  const ch_Transgender = document.getElementById('radar-chart-Transgender');

  new Chart(ch_disease, {
    type: 'doughnut',
    data: {
      labels: {{report_data.label|safe}}, // ["SURAM", "IRUMAL", "IRAIPPU", "ILAIPPU", "GUNMAM", "SOBAI"],
      datasets: [{
        label: 'Total Patients',
        data:  {{report_data.value|safe}}, //[5, 15, 2, 10, 4, 4],
        //backgroundColor: ["rgba(255, 159, 64, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(75, 192, 192, 0.2)"],
        //borderColor: ["rgba(255, 159, 64)", "rgba(153, 102, 255)", "rgba(75, 192, 192)", "rgba(75, 192, 192)", "rgba(153, 102, 255)", "rgba(75, 192, 192)"],
        //backgroundColor: ["rgba(255, 159, 64)", "rgba(153, 102, 255)", "rgba(75, 192, 192)", "rgba(75, 192, 192)", "rgba(153, 102, 255)", "rgba(75, 192, 192)"],
        borderWidth: 1,
      }]
    },


  });


{% comment %} 
  const radar_data_child = {
    labels:  {{report_data.list_total_labels|safe}}, 
   datasets: {{report_data.str_radar_children|safe}},
 };
 const radar_data_female = {
  labels:  {{report_data.list_total_labels|safe}}, 
 datasets: {{report_data.str_radar_female|safe}},
};
const radar_data_male = {
  labels:  {{report_data.list_total_labels|safe}}, 
 datasets: {{report_data.str_radar_male|safe}},
};
const radar_data_Transgender = {
  labels:  {{report_data.list_total_labels|safe}}, 
 datasets: {{report_data.str_radar_Transgender|safe}},
}; {% endcomment %}


  const radar_data_child = {
    labels:  {{report_data.label|safe}}, 
   datasets: {{report_data.value|safe}},
 };
 const radar_data_female = {
  labels:  {{report_data.radar_data.female.group_disease|safe}}, 
 datasets: {{report_data.radar_data.female.group_data|safe}},
};
const radar_data_male = {
  labels:  {{report_data.radar_data.male.group_disease|safe}}, 
 datasets: {{report_data.radar_data.male.group_data|safe}},
};
const radar_data_Transgender = {
  labels:  {{report_data.radar_data.transgender.group_disease|safe}}, 
 datasets: {{report_data.radar_data.transgender.group_data|safe}},
};



  new Chart(ch_child,{
    type: 'bar',
    data: radar_data_child,
    options: {
      elements: {
        line: {
          borderWidth: 3
        }
      }
    },
  });

  new Chart(ch_male,{
    type: 'radar',
    data: radar_data_male,
    options: {
      elements: {
        line: {
          borderWidth: 3
        }
      }
    },
  });


  new Chart(ch_female,{
    type: 'radar',
    data: radar_data_female,
    options: {
      elements: {
        line: {
          borderWidth: 3
        }
      }
    },
  });


  new Chart(ch_Transgender,{
    type: 'radar',
    data: radar_data_Transgender,
    options: {
      elements: {
        line: {
          borderWidth: 3
        }
      }
    },
  });
  {% 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>


{% comment %}  Bootstrap table  {% endcomment %}

<script >
  $(document).ready(function() {
  
      
      $('#id_zone').select2({});
      $('#id_district').select2({
        width: 'resolve' // need to override the changed default
      });
      
      //$('#id_level').select2({});
      
  });
</script>
<style>
  #id_district {width:40rem;}
  #id_zone {width:40rem;}

</style>    