@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
      <div class="col-md-11">
          <h2>อัตราป่วยโรคไข้เลือดออก</h2>
        </div>
        <div class="col-md-11 col-sm-11 col-xs-11 mt-3">
            
          <div class="card card_chart">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">อัตราป่วยโรคไข้เลือดออก (DF,DHF,DSS) ต่อประชากรแสนคน จำแนกรายตำบล ปี 2564 อำเภอเมืองพังงา จังหวัดพังงา</h6>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="text-center loading-01 hidden">
                <i class="fas fa-spinner fa-pulse fa-3x"></i>
              </div>
              <div class="chart">
                <canvas id="chart-bars-01" class="chart-canvas"></canvas>
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-11 col-sm-11 col-xs-11 mt-3">
            
          <div class="card card_chart">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <select id="filter_sub_2" class="pull-right ml-2" style="max-width: 250px;border:0" onchange="reloadChart('#chart-bars-02','get_by_monthly',value,'')">
                    <option value="ALL">สถานที่ทั้งหมด</option>
                    @foreach($subDistrict as $key=>$value)
                    <option @if($sub->DISTRICT_ID==$value->DISTRICT_ID) selected @endif value="{{$value->DISTRICT_ID}}">ตำบล{{$value->DISTRICT_NAME}}</option>
                    @endforeach
                  </select>
                  <div style="clear: both;margin-bottom: 15px;"></div>
                  <h6 class="text-uppercase text-muted ls-1 mb-1">อัตราป่วยโรคไข้เลือดออก (DF,DHF,DSS) ต่อประชากรแสนคน จำแนกรายเดือน ปี 2564 อำเภอเมืองพังงา จังหวัดพังงา</h6>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="text-center loading-02 hidden">
                <i class="fas fa-spinner fa-pulse fa-3x"></i>
              </div>
              <div class="chart">
                <canvas id="chart-bars-02" class="chart-canvas"></canvas>
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-11 col-sm-11 col-xs-11 mt-3">

          <div class="card card_chart">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <select id="filter_sub_3" class="pull-right ml-2" style="max-width: 250px;border:0" onchange="reloadChart('#chart-bars-03','get_by_district_by_age',value,'')">
                    <option value="ALL">สถานที่ทั้งหมด</option>
                    @foreach($subDistrict as $key=>$value)
                    <option @if($sub->DISTRICT_ID==$value->DISTRICT_ID) selected @endif value="{{$value->DISTRICT_ID}}">ตำบล{{$value->DISTRICT_NAME}}</option>
                    @endforeach
                  </select>
                  <div style="clear: both;margin-bottom: 15px;"></div>
                  <h6 class="text-uppercase text-muted ls-1 mb-1 pull-left">อัตราป่วยโรคไข้เลือดออกตามกลุ่มอายุ (DF,DHF,DSS) ต่อประชากรแสนคน  จำแนกรายตำบล ปี 2564  อำเภอเมืองพังงา จังหวัดพังงา</h6>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="text-center loading-03 hidden">
                <i class="fas fa-spinner fa-pulse fa-3x"></i>
              </div>
              <div class="chart">
                <canvas id="chart-bars-03" class="chart-canvas"></canvas>
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-11 col-sm-11 col-xs-11 mt-3">

          <div class="card card_chart">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <select id="filter_sub_4-month" class="pull-right ml-2" style="max-width: 250px;border:0" onchange="reloadChart('#chart-bars-04','get_by_monthly_by_age',$('#filter_sub_4-sub').val(),value)">
                    <option value="ALL">ทุกเดือน</option>
                    @foreach($months as $key=>$value)
                    @if($key>0)
                    <option value="{{$key}}">เดือน {{$value}}</option>
                    @endif
                    @endforeach
                  </select>
                  <select id="filter_sub_4-sub" class="pull-right ml-2" style="max-width: 250px;border:0" onchange="reloadChart('#chart-bars-04','get_by_monthly_by_age',value, $('#filter_sub_4-month').val())">
                    <option value="ALL">สถานที่ทั้งหมด</option>
                    @foreach($subDistrict as $key=>$value)
                    <option @if($sub->DISTRICT_ID==$value->DISTRICT_ID) selected @endif value="{{$value->DISTRICT_ID}}">ตำบล{{$value->DISTRICT_NAME}}</option>
                    @endforeach
                  </select>
                  <div style="clear: both;margin-bottom: 15px;"></div>
                  <h6 class="text-uppercase text-muted ls-1 mb-1 pull-left">อัตราป่วยโรคไข้เลือดออกตามกลุ่มอายุ (DF,DHF,DSS) ต่อประชากรแสนคน จำแนกรายเดือน ปี 2564 อำเภอเมืองพังงา จังหวัดพังงา</h6>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="text-center loading-04 hidden">
                <i class="fas fa-spinner fa-pulse fa-3x"></i>
              </div>
              <div class="chart">
                <canvas id="chart-bars-04" class="chart-canvas"></canvas>
              </div>
            </div>
          </div>

        </div>
    </div>
</div>
@endsection

@section('styles')
<style type="text/css">
  .card-header{
    border-bottom: 0;
  }
  .card-body{
   // background: rgb(0 102 255 / 54%);
    border-radius: 15px;
  }
</style>
@endsection

@section('scripts')
<script type="text/javascript">
    
var BarsChart = (function() {

    var $chart = $('#chart-bars-01');
    var $chart2 = $('#chart-bars-02');
    var $chart3 = $('#chart-bars-03');
    var $chart4 = $('#chart-bars-04');

    // Init chart
    if ($chart.length) {
      initChart($chart,'by_district','','');
    }
    if ($chart2.length) {
      initChart($chart2,'get_by_monthly',$('#filter_sub_2').val(),'');
    }
    if ($chart3.length) {
      initChart($chart3,'get_by_district_by_age',$('#filter_sub_3').val(),'');
    }
    if ($chart4.length) {
      initChart($chart4,'get_by_monthly_by_age',$('#filter_sub_4-sub').val(),$('#filter_sub_4-month').val());
    }

})();

  // Init chart
  function initChart($chart, area, filter_sub, filter_month) {
      var data_ = [];
      var bg_ = [];
      var labels_ = [];
      var loading_class='.loading-01';
      if(area=='get_by_monthly'){
        loading_class='.loading-02';
      }else if(area=='get_by_district_by_age'){
        loading_class='.loading-03';
      }else if(area=='get_by_monthly_by_age'){
        loading_class='.loading-04';
      }
      //get data
      $.ajax({
        url: '{{ route('frontend.get-sick-rate-data') }}',
        type: 'post',
        dataType: 'json',
        data: {
          _token: '{{ csrf_token() }}',
          type: area,
          sub_district: filter_sub,
          month: filter_month
        },
        beforeSend: function (x){
          $(loading_class).removeClass('hidden');
        },
        success: function(res){
          $(loading_class).addClass('hidden');
          data_ = res.data;
          labels_ = res.labels;
          
          // Create chart
          Chart.defaults.global.defaultFontColor = '#000000';
          var ordersChart = new Chart($chart, {
              type: 'bar',
              data: {
                  labels: labels_,
                  datasets: [{
                      label: 'จำนวนผู้ป่วย',
                      data: data_,
                      backgroundColor: 'rgb(139 79 128)',
                      borderColor: 'rgb(139 79 128)',
                      borderWidth: 1
                  }]
              },
              options: {
                layout: {
                  padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                  }
                },
                hover: {mode: null},
                responsive: true,
                maintainAspectRatio: false,
                events: [],
                legend: {
                  display: false
                },
                scales: {
                  y: {
                    beginAtZero: true,
                  },
                  xAxes: [{
                    gridLines: {
                      display: true,
                      drawBorder: true,
                      drawOnChartArea: false
                    },
                    maxBarThickness: 30 // number (pixels)
                  }]
                },
                animation: {
                  duration: 1,
                  onComplete: function() {
                    var chartInstance = this.chart,
                      ctx = chartInstance.ctx;

                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'top';
                    ctx.fillStyle = '#ffffff';
                     
                    this.data.datasets.forEach(function(dataset, i) {
                      var meta = chartInstance.controller.getDatasetMeta(i);

                      meta.data.forEach(function(bar, index) {
                        var data = dataset.data[index];
                        var pp = (data/bar._yScale.end)*100;
                        
                        if(pp < 15){
                          ctx.fillStyle = '#000000';
                          ctx.fillText(data, bar._model.x, bar._model.y - 12);
                        }else if(data == 0){
                          ctx.fillStyle = '#000000';
                          ctx.fillText(data, bar._model.x, bar._model.y - 10);
                        }else{
                          ctx.fillStyle = '#ffffff';
                           ctx.fillText(data, bar._model.x, bar._model.y + 5);
                        }

                      });
                    });
                  },
                },
              },
          });

          // Save to jQuery object
          //$chart.data('chart', ordersChart);
        }
      });
  }


  function reloadChart(id,type, value1, value2){

    initChart($(id),type,value1, value2);
  }

</script>
@endsection