@extends('layouts.app')

@section('content')
<div class="card " >
  <div class="card-body">
    <div class="page-title" style="  margin-top:1rem">
      <h3> ร้องเรียนการทุจริตและประพฤติมิชอบ </h3>
    </div>
    @if ($errors->any())
    <ul class="alert alert-danger">
      @foreach ($errors->all() as $error)
      <li>{{ $error }}</li>
      @endforeach
    </ul>
    @endif
    <form method="POST" action="{{ route('corruption.store') }}" accept-charset="UTF-8" id="create_corruption_form" name="create_corruption_form" class="form-horizontal" enctype="multipart/form-data">
      {{ csrf_field() }}
      @include ('guest.corruptions.form', [
      'corruption' => null,
      ])
      
         <div class="form-group row">
      <label for="captcha" class="col-sm-2 control-label">รหัสยืนยัน</label>
            <div class="col-sm-3"> {!!captcha_img()!!} </div>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="captcha" name="captcha" placeholder="กรอกรหัสตามภาพ" maxlength="100" required title="กรอกรหัสตามภาพ">
      </div>

 
    </div>
    
      <div class="form-group">
        <div align="center">
          <button class="btn btn-primary" type="submit">
          <i class="fas fa-fw fa-save"></i> บันทึก</button>
          <button class="btn btn-light" type="reset" onclick="history.back();">
          <i class="fas fa-fw fa-redo" aria-hidden="true"></i> ยกเลิก</button>
        </div>
      </div>
    </form>
  </div>
</div>
<br>
<div class="card">
  <div class="card-body">
      <div style="font-size:1rem; color:red"> มีการร้องเรียน  การทุจริตและประพฤติมิชอบแล้ว จำนวน <strong>{{  $allnum }}</strong> ครั้ง </div>
    <hr>
    <div id="chartdiv"></div>
  </div>
</div>
@endsection
@section('script')
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.scrollbarX = new am4core.Scrollbar();

// Add data
chart.data = [

@for( $a = 1; $a <= 12; $a++ )

	@foreach($corruptions as $cor)
	
	@if($cor->month == $a )
	
	{	 
	  "country": "{{ $thai->MonthThai($cor->year.'-'. $cor->month.'-01') }}",
	  "visits": {{$cor->num_m}}	   
	},	
		@endif
	
	@endforeach 
	
	{	 
	  "country": "{{ $thai->MonthThai( date('y').'-'. $a.'-01') }}",
	  "visits": 0  
	},	
	
@endfor



];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.rotation = 270;
categoryAxis.tooltip.disabled = true;
categoryAxis.renderer.minHeight = 110;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.sequencedInterpolation = true;
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
series.columns.template.strokeWidth = 0;


let valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text ="[{categoryX}: bold]{valueY}[/] ครั้ง";
 
series.labelPosition = 'inside';

series.tooltip.pointerOrientation = "vertical";

series.columns.template.column.cornerRadiusTopLeft = 10;
series.columns.template.column.cornerRadiusTopRight = 10;
series.columns.template.column.fillOpacity = 0.8;

// on hover, make corner radiuses bigger
var hoverState = series.columns.template.column.states.create("hover");
hoverState.properties.cornerRadiusTopLeft = 0;
hoverState.properties.cornerRadiusTopRight = 0;
hoverState.properties.fillOpacity = 1;

series.columns.template.adapter.add("fill", function(fill, target) {
  return chart.colors.getIndex(target.dataItem.index);
});

// Cursor
chart.cursor = new am4charts.XYCursor();

}); // end am4core.ready()
</script>

<!-- HTML --> 

@endsection