
{% 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 messages %}

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  {% for message in messages %}
  <div id="liveToast" class="toast toast-entry " role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">{{title}}</strong>
      <small>Notification</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body btn-{{message.tags}}">
      {{ message|safe }}
    </div>
  </div>
 {% endfor %}
</div> 
<script type="module">
    var toasts = document.getElementsByClassName("toast-entry");
    for (var i = 0; i < toasts.length; i++) {
      const toastLiveExample = toasts.item(i)
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
      toastBootstrap.show()
    }
</script>  

{% endif %}
<style>
  .form-group{ padding-top: 10px;}
  .mar-top{
    margin-top:2rem;
    
   
  }
  .border{
    padding-left:1rem;
    padding-right:1rem;
    line-height: 136%;
  }
  .acc-pad{
    margin-top:11rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .form_align{
    display:flex;
    
    padding-left:1rem;
    padding-right:1rem;
    margin-top:13rem;
    width:auto;
 
  }
  .heading{
    display:flex;
    justify-content:center;

    
  }
  .line {
    line-height: 136%;
  }

  
  .pad{
    padding:1rem;
  }

  

</style>
{% if 'Mobile' in request.META.HTTP_USER_AGENT %} 
<div class="acc-pad">
  {% if obj_help %}
<div class="accordion " id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
       <center> {{obj_help.heading}}</center>
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        {{obj_help.content_HTML|safe}}
      </div>
    </div>
  </div>
  {% endif %}
</div>

<div class="p-2 border mar-top ">
  {% load bootstrap_tags %}

 {% load crispy_forms_tags %} 
   
     {% crispy form %}
     <br>
     <a type="reset" name="reset"  class="btn btn-warning"  href=".">Reset</a>
    </div>
    
</div>



{% else %}
<div class="form_align w-100   ">
  <div class=" w-50 from-margin pad border line " >
  {% load bootstrap_tags %}
  {% load crispy_forms_tags %} 

  {% comment %} <form method="post" enctype="multipart/form-data"> {% endcomment %}
  {% crispy form %}
  {% comment %} </form> {% endcomment %}
  <br>
  <a type="reset" name="reset"  class="btn btn-warning"  href=".">Reset</a>
  </div>

  <div class="border w-50 ">
    <div class="heading mt-3 " >
      <h3><b> {{obj_help.heading}}</b></h3>
    </div>

    <div class="p-4">
        <p>{{obj_help.content_HTML|safe}}<p>
    </div>
  </div>

</div>
{% endif %}




{% 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}} 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-AMO-tab" data-bs-toggle="tab" data-bs-target="#nav-AMO" type="button" role="tab" aria-controls="nav-AMO" aria-selected="true"><i class="fa fa-stethoscope"></i > AMO</button>

      <button class="nav-link" id="nav-MP-tab" data-bs-toggle="tab" data-bs-target="#nav-MP" type="button" role="tab" aria-controls="nav-MP" aria-selected="false"><i class="fa fa-medkit"></i> Medic & Patient</button>  
    </div>
  </nav>
    <div class="tab-content " id="nav-tabContent">
        <div class="tab-pane fade show active wid " id="nav-AMO" role="tabpanel" aria-labelledby="nav-AMO-tab">
            <h3>Activity by Doctor</h3>
            <canvas id="bar-chart-AMO" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-MP" role="tabpanel" style="position: relative; height: 500px;width: 750px;" aria-labelledby="nav-MP-tab">
            <h3>Center Perfomance</h3>
            <canvas id="bar-chart-MP" ></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_AMO = document.getElementById('bar-chart-AMO');
  const ch_MP = document.getElementById('bar-chart-MP');

  
  const radar_data_AMO = {
    labels:  {{report_data.list_label_AMO|safe}}, 
   datasets: [{ label: 'Number of Entries',data: {{report_data.list_value_AMO|safe}}, borderWidth: 1,}] };
   const radar_data_MP= {
    labels:  {{report_data.list_label_MP|safe}}, 
   datasets: [{ label: 'Number of Entries',data: {{report_data.list_value_MP|safe}}, borderWidth: 1,}] };

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

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


</script>

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

</style>    