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



<center><h3 class="mt-4"><b>{{report_data.str_period}} 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> 
<table 
  id="table"
  data-toolbar="#toolbar"
  {% comment %} data-search="true" {% endcomment %}
  data-show-refresh="true"
  data-show-toggle="true"
  data-show-fullscreen="true"
  data-show-columns="true"
  data-show-columns-toggle-all="true"
  data-detail-view="true"
  data-show-export="true"
  data-click-to-select="true"
  data-detail-formatter="detailFormatter"
  data-minimum-count-columns="2"
  {% comment %} data-show-pagination-switch="true"
  data-pagination="true" {% endcomment %}
  data-id-field="id"
  {% comment %} data-page-list="[10, 25, 50, 100, all]" {% endcomment %}
  data-show-footer="true"
  {% comment %} data-side-pagination="server" {% endcomment %}
  data-url="{{str_querypath}}"
  data-response-handler="responseHandler">
</table>




  {% comment %} <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-Siddha-tab" data-bs-toggle="tab" data-bs-target="#nav-Siddha" type="button" role="tab" aria-controls="nav-Siddha" aria-selected="true"><i class="fa fa-stethoscope"></i > Siddha</button>
      <button class="nav-link" id="nav-YN-tab" data-bs-toggle="tab" data-bs-target="#nav-YN" type="button" role="tab" aria-controls="nav-YN" aria-selected="false"><i class="fa fa-medkit"></i> Yoga and Naturopathy</button>  
      <button class="nav-link" id="nav-Homoeopathy-tab" data-bs-toggle="tab" data-bs-target="#nav-Homoeopathy" type="button" role="tab" aria-controls="nav-Homoeopathy" aria-selected="false"><i class="fa-solid fa-file bed flask"></i> Homoeopathy</button>
      <button class="nav-link" id="nav-Unani-tab" data-bs-toggle="tab" data-bs-target="#nav-Unani" type="button" role="tab" aria-controls="nav-Unani" aria-selected="false"><i class="fa-solid fa-male"></i> Unani</button>
      <button class="nav-link" id="nav-Ayurveda-tab" data-bs-toggle="tab" data-bs-target="#nav-Ayurveda" type="button" role="tab" aria-controls="nav-Ayurveda" aria-selected="false"><i class="fa-solid fa-female"></i> Ayurveda</button>
      <button class="nav-link" id="nav-Others-tab" data-bs-toggle="tab" data-bs-target="#nav-Others" type="button" role="tab" aria-controls="nav-Others" aria-selected="false"><i class="fa-solid fa-Others"></i> Others</button> 
    </div>
  </nav>
    <div class="tab-content " id="nav-tabContent">
        <div class="tab-pane fade show active wid " id="nav-Siddha" role="tabpanel" aria-labelledby="nav-Siddha-tab">
            <h3>Siddha</h3>
            <canvas id="bar-chart-Siddha" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-YN" role="tabpanel" style="position: relative; height: 500px;width: 750px;" aria-labelledby="nav-YN-tab">
            <h3>Yoga and Naturopathy</h3>
            <canvas id="bar-chart-YN" ></canvas>
        </div>

         <div class="tab-pane fade" id="nav-Homoeopathy" role="tabpanel" aria-labelledby="nav-Homoeopathy-tab" style="position: relative; height: 500px;">
          <h3>Homoeopathy</h3>
            <canvas id="bar-chart-Homoeopathy" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-Unani" role="tabpanel" aria-labelledby="nav-Unani-tab" style="position: relative; height: 500px;">
          <h3>Unani</h3>
            <canvas id="bar-chart-Unani" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-Ayurveda" role="tabpanel" aria-labelledby="nav-Ayurveda-tab" style="position: relative; height: 500px;">
          <h3>Ayurveda</h3>
            <canvas id="bar-chart-Ayurveda" ></canvas>
        </div>    
 
        <div class="tab-pane fade" id="nav-Others" role="tabpanel" aria-labelledby="nav-Others-tab" style="position: relative; height: 500px;">
          <h3>Others</h3>
            <canvas id="bar-chart-Others" ></canvas>
        </div>            
    </div>

  </div> {% endcomment %}







<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


{% comment %} <script>
  const ch_Siddha  = document.getElementById('bar-chart-Siddha');
  const ch_YN = document.getElementById('bar-chart-YN');
  const ch_Homoeopathy  = document.getElementById('bar-chart-Homoeopathy');
  const ch_Unani = document.getElementById('bar-chart-Unani');
  const ch_Ayurveda = document.getElementById('bar-chart-Ayurveda');
  const ch_Others = document.getElementById('bar-chart-Others');



  const radar_data_Siddha = {
    labels:  {{report_data.list_label_Siddha|safe}}, 
   datasets: [{ label: 'Yoga and Naturopathy Stocks',data: {{report_data.list_value_Siddha|safe}}, borderWidth: 1,}] };

 const radar_data_YN = {
  labels:  {{report_data.list_label_YN|safe}}, 
 datasets: [{ label: 'Siddha Stocks',data: {{report_data.list_value_YN|safe}}, borderWidth: 1,}]};

  const radar_data_Homoeopathy = {
    labels:  {{report_data.list_label_Homoeopathy|safe}}, 
  datasets: [{ label: 'Homoeopathy Stocks',data: {{report_data.list_value_Homoeopathy|safe}}, borderWidth: 1,}]};
  const radar_data_Unani = {
    labels:  {{report_data.list_label_Unani|safe}}, 
  datasets: [{ label: 'Unani Stocks',data: {{report_data.list_value_Unani|safe}}, borderWidth: 1,}]};

  const radar_data_Ayurveda = {
    labels:  {{report_data.list_label_Ayurveda|safe}}, 
  datasets: [{ label: 'Ayurveda Stocks',data: {{report_data.list_value_Ayurveda|safe}}, borderWidth: 1,}]};

  const radar_data_Others = {
    labels:  {{report_data.list_label_Others|safe}}, 
  datasets: [{ label: 'Others Stocks',data: {{report_data.list_value_Others|safe}}, borderWidth: 1,}]};


  new Chart(ch_Siddha,{
    type: 'bar',    data: radar_data_Siddha,
    options: {elements: {line: {borderWidth: 3},} },     });
  new Chart(ch_YN,{
    type: 'bar',    data: radar_data_YN,
    options: {elements: {line: {borderWidth: 3},} },     });
  new Chart(ch_Homoeopathy,{
    type: 'bar',    data: radar_data_Homoeopathy,
    options: {elements: {line: {borderWidth: 3},} },     });      


  new Chart(ch_Unani,{
    type: 'bar',    data: radar_data_Unani,
    options: {elements: {line: {borderWidth: 3},} },     });
  new Chart(ch_Ayurveda,{
    type: 'bar',    data: radar_data_Ayurveda,
    options: {elements: {line: {borderWidth: 3},} },     });
  new Chart(ch_Others,{
    type: 'bar',    data: radar_data_Others,
    options: {elements: {line: {borderWidth: 3},} },     });  
</script> {% endcomment %}


{% comment %}  Bootstrap table  {% endcomment %}
<script>
  var $table = $('#table')
  var $remove = $('#remove')
  {% comment %} var $table2 = $('#table2')
  var $remove2 = $('#remove2') {% endcomment %}
  var selections = []

  function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
    })
  }

  function responseHandler(res) {
    $.each(res.rows, function (i, row) {
      row.state = $.inArray(row.id, selections) !== -1
    })
    return res
  }

  function detailFormatter(index, row) {
    var html = []
    $.each(row, function (key, value) {
      if(key =='tag_color'){html.push('<p><b>' + key + ':</b> <p style="background: '+ value +';"> ' + value + '</p>')}
      else {html.push('<p><b>' + key + ':</b> ' + value + '</p>')}
    })
    return html.join('')
  }

  function operateFormatter(value, row, index) {
    return [

      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-remove"></i>',
      '</a>   ',
 
    ].join('')
  }

  window.operateEvents = {
    'click .like': function (e, value, row, index) {
      alert('You click like action, row: ' + JSON.stringify(row))
    },
    'click .remove': function (e, value, row, index) {
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
    },
    'click .delete': function (e, value, row, index) {
      if (confirm('{{request.user.username}}, You have requested for delete, Entry #'+ row.id) == true) {
        
       $.ajax({
          url: '{{request.path}}/'.replace('/tbl/','/delete/')+ row.id,
          type: "get", //send it through get method
          success: function(response) {
            if ( response == 'success') { alert('The model has been deleted!' );}
            else if ( response == 'nodata') {alert('The data is not available for deletion!' );}
            else if ( response == 'noauth') {alert('You are not authorized to delete this data!!!' );}
            else{alert('something went wrong, contact admin!' );}
          },
            error: function(xhr) {
              //Do Something to handle error
            }
            });          
    } else {
      alert('delete request canceled!');
    }
    },


  }

  function totalTextFormatter(data) {
    return 'Total'
  }

  function totalNameFormatter(data) {
    return 'Total Entry: ' + data.length
  }

  function totalPriceFormatter(data) {
    var field = this.field
    return  data.map(function (row) {
      return +row[field]//.substring(1)
    }).reduce(function (sum, i) {
      return sum + i
    }, 0)
  }

  function initTable() {
    var headers = {{list_tbl_header|safe}};
     //[{ 'header': 'children_1_5', 'title': 'children 1 to 5'}, {'header': 'children_6_12', 'title': 'children 6 to 12'}, {'header': 'male_12_25', 'title': 'male 12 to 25'}, {'header': 'male_25_40', 'title': 'male 25 to 40'}, {'header': 'male_40_60', 'title': 'male 40 to 60'}, {'header': 'male_gt_60', 'title': 'male more than 60'}, {'header': 'female_12_25', 'title': 'female 12 to 25'}, {'header': 'female_25_40', 'title': 'female 25 to 40'}, {'header': 'female_40_60', 'title': 'female 40 to 60'}, {'header': 'female_gt_60', 'title': 'female more than 60'}];
    //{ 'header': 'disease', 'title': 'Disease'},
    //{{jsoncolumn|safe}};//[{'header': 'state_name', 'title':'State Name'},{'header': 'countrycode', 'title':'countrycode'},{'header': 'country_name', 'title':'country_name'}]
    var column_data = []
    $.each(headers, function(i, item) {



          if(i ==0){      column_data.push({
            field: item.header,
            title: item.title,
            sortable: true,
            align: 'center',
            footerFormatter: totalNameFormatter, })}
            else if(i ==headers.length-1){      column_data.push({
              field: item.header,
              title: item.title,
              sortable: true,
              align: 'center',
              footerFormatter: totalPriceFormatter, })}            
          else{      column_data.push({
            field: item.header,
            title: item.title,
            sortable: true,
            align: 'center',
            })}




       
  });    


  var arry_config =   [    {
    field: 'operate',
    title: 'Item Operate',
    align: 'center',
    clickToSelect: false,
    events: window.operateEvents,
    formatter: operateFormatter
  }
] 
  var finalObj = column_data.concat(arry_config);  //arry_config.concat(column_data); //column_data
    $table.bootstrapTable('destroy').bootstrapTable({

      height: 550,
      locale: 'en-US',
      columns: finalObj,
      exportTypes: [ 'csv', 'txt', 'excel'],
      exportOptions: {
             fileName: function () {
            var currentdate = new Date(); 
          var datetime =    currentdate.getDate() + "_"
                          + (currentdate.getMonth()+1)  + "_" 
                          + currentdate.getFullYear() + "_"  
                          + currentdate.getHours() + "-"  
                          + currentdate.getMinutes() + "-" 
                          + currentdate.getSeconds();
           return 'StockReport' + '_export_'  + datetime;
        }
     },
    })
    $table.on('check.bs.table uncheck.bs.table ' +
      'check-all.bs.table uncheck-all.bs.table',
    function () {
      $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

      // save your data, here just save the current page
      selections = getIdSelections()
      // push or splice the selections if you want to save all data selections
    })
    $table.on('all.bs.table', function (e, name, args) {
      console.log(name, args)
    })
    $remove.click(function () {
      var ids = getIdSelections()
      $table.bootstrapTable('remove', {
        field: 'id',
        values: ids
      })
      $remove.prop('disabled', true)
    })
  }

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

</style>    