@extends('layouts.app')

@section('title')
 
@stop

@section('content')
@foreach($branches as $brn)
<div class="panel panel info">
<div class="panel-heading"> {{$brn->name}}
</div>
<div class="panel-body">
<div class="col-sm-4">
  <div class="panel panel-warning">
    <div class="panel-heading">ยอดขายวันนี้ </div>
    
    <div class="panel-body sprice"><A href="#">
        
     {{number_format( $today_net,2)}}
    </A></div>
    
  </div>
</div>
<div class="col-sm-4">
  <div class="panel panel-info">
    <div class="panel-heading">ยอดขายเดือนนี้ </div>
    <div class="panel-body  sprice"><A href="{{url('admin/sells-report/monthsell?date1=2020-05-01&date2=2020-05-31')}}"> {{number_format($month_sell,2)}}</A> </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="panel panel-primary">
    <div class="panel-heading">ยอดขายทั้งปี </div>
    <div class="panel-body sprice"> {{ number_format($year_sell,2)}} </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="panel panel-info">
    <div class="panel-body sprice"  style="background:#ffeeda;">
      <span style=" color:#3F38E7; cursor:pointer" onClick="window.location='{{url('admin/types')}}';"> สินค้า   {{  count($product_types) }} ประเภท</span>
      <br>
      <span style="color:#3E8C0D; cursor:pointer" onClick="window.location='{{url('admin/products')}}';">รวม {{  number_format($product)  }} รายการ</span>
    </div>
  </div>
</div>

<!--  -->
<div class="col-sm-4">
  <div class="panel panel-primary">
    <div class="panel-heading">จำนวนสินค้าคงเหลือในคลัง </div>
    <div class="panel-body sprice"> {{  number_format($product_balance)  }} หน่วย </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="panel panel-danger">
    <div class="panel-heading">สินค้าใกล้หมด </div>
    <div class="panel-body sprice">
      <a href="{{url('admin/products/minstock')}}"> {{  number_format(count($product_minimums) ) }} รายการ</a>
    </div>
  </div>
</div>
<div>
  <hr>
  ยอดขายสูงสุด 10 รายการ (บาท)</div>
  </div>
    </div><br>
<br>

    @endforeach
<div id="chartdiv"></div>
@endsection

@section('style')
<style>
.sprice{ font-size:3.5rem; text-align:center}

</style>
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>
@stop


@section('script') 
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.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 = [
@foreach($top10_bestsell as $top10)
{
  "proname": "{{$top10->name}}",
  "money": {{$top10->sumprrice}}
}, 
@endforeach

];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "proname";
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 = 315;
categoryAxis.tooltip.disabled = false;
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 = "money";
series.dataFields.categoryX = "proname";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
series.columns.template.strokeWidth = 0;

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> 
@stop