
{% 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:75rem;
 
 
}



.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>



<center><h3 class="mt-4"><b>{{report_data.str_period}} - Month Report - Table - {{report_data.reportlevel}} </b></h3> </center> 
{% comment %}
<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 %}
<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"
  data-show-pagination-switch="true"
  data-pagination="true"
  data-id-field="id"
  data-page-list="[10, 25, 50, 100, all]"
  data-show-footer="true"
  data-side-pagination="server"
  data-url="{{str_querypath}}"
  data-response-handler="responseHandler">
</table>



  <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>
    </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>

  </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');


  new Chart(ch_disease, {
    type: 'doughnut',
    data: {
      labels: {{report_data.list_total_labels|safe}}, // ["SURAM", "IRUMAL", "IRAIPPU", "ILAIPPU", "GUNMAM", "SOBAI"],
      datasets: [{
        label: 'Total Patients',
        data:  {{report_data.list_total_totals|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,
      }]
    },


  });



  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}},
};

  new Chart(ch_child,{
    type: 'radar',
    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
        }
      }
    },
  });

  {% 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>
  var $table = $('#table')
  var $remove = $('#remove')
  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: ' + 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 = {{report_data.headers|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) {
      column_data.push({
          field: item.header,
          title: item.title,
          sortable: true,
          align: 'center',
          footerFormatter: totalPriceFormatter,
        })
  });    

  var arry_config =   [   {
      field: 'disease',
      title: 'Disease',
      align: 'center',
      valign: 'middle',
      footerFormatter: totalNameFormatter,//totalTextFormatter,
    }
  ]
  {% comment %}
  var arry_config2 =   [    {
      field: 'operate',
      title: 'Item Operate',
      align: 'center',
      clickToSelect: false,
      events: window.operateEvents,
      formatter: operateFormatter
    }
  ]    
  var arry_config3 =   arry_config.concat(column_data);
  var finalObj =   arry_config3.concat(arry_config2); {% endcomment %}

  var finalObj = arry_config.concat(column_data); //column_data
    $table.bootstrapTable('destroy').bootstrapTable({

      height: 550,
      locale: 'en-US',
      columns: finalObj,
    })
    $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>