@extends('layouts.app')
@section('titlePage', 'Manage Page')
@section('content')
<script>
    document.getElementById("kts-5").classList.add("is-expanded");
    document.getElementById("ktss-5").classList.add("active","is-expanded");
</script>
@push('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous" />
@endpush
@php
   $dataChart = json_decode($data->data, true);
   $dataChart = is_array($dataChart) ? $dataChart : [];
   $chart_count=count($dataChart["datasets"]);
@endphp
<div class="page-wrapper">
   <!-- [ breadcrumb ] start -->
         <div class="breadcrumb-header justify-content-between">
            <div class="left-content">
               <span class="main-content-title mg-b-0 mg-b-lg-1">View Chart</span>
			   </div>
			   <div class="justify-content-center mt-2">
               <ol class="breadcrumb breadcrumb-style3">
                  <li class="breadcrumb-item tx-15"><a href="{{ _route('client.graph.index') }}"><i class="feather icon-home"></i></a></li>
                  <li class="breadcrumb-item active" aria-current="page">View Chart</li>
               </ol>
			   </div>
         </div>
   <!-- [ breadcrumb ] end -->
   <!-- [ Main Content ] start -->
   <div class="row">
      <div class="col-sm-12">
         <div class="card">
            <div class="card-header">
               <a href="{{ route_client_master('master.graph.index') }}" class="btn btn-primary">List</a>
            </div>
            <div class="card-body">
				<div class="row">
				@if($data->type=="pie")
					@for($i=0;$i<$chart_count;$i++)
					<div class="col-md-6">
						<canvas id="canvas{{$i}}"></canvas>
					</div>
					@endfor
				@else
					<div class="col-6">
						<canvas id="canvas"></canvas>
					</div>
				@endif
					<!--div class="col-md-6">
						<canvas id="canvas2"></canvas>
					</div-->
				</div>
               <!--div style="width:75%;">
                  
               </div>
               <div style="width:75%;">
                  <canvas id="canvas2"></canvas>
               </div-->
            </div>
         </div>
      </div>
   </div>
   <!-- [ Main Content ] end -->
</div>
@endsection

											   
																				  
	   
@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<script>
@if($data->type!="pie")
	var config = {
		type: '{{$data->type}}',
		data: @json($dataChart),
		options: {
			responsive: true,
			legend: {
				position: 'bottom',
			},
			hover: {
				mode: 'index'
			},
			scales: {
				xAxes: [{
					display: true,
					scaleLabel: {
						display: true,
						labelString: ''
					}
				}],
				yAxes: [{
					display: true,
					scaleLabel: {
						display: true,
						labelString: 'Value'
					}
				}]
			},
			title: {
				display: true,
				text: '{{$data->title}}'
			}
		}
	};

	window.onload = function() {
		var ctx = document.getElementById('canvas').getContext('2d');
		window.myLine = new Chart(ctx, config);
	};
@else
@for($i=0;$i<$chart_count;$i++)
const data{{$i}} = {
  labels: ["{!! implode('","',$dataChart['labels']) !!}"],
  datasets: [
    {
      data: ["{!! implode('","',$dataChart['datasets'][$i]['data']) !!}"],
      backgroundColor: ['#ff5050', '#ff9900', '#99cc00', '#33cc33', '#00cc99', '#0066ff', '#6666ff', '#cc33ff', '#cccc00', '#009933', '#cc3399'],
    }
  ]
};
const config{{$i}} = {
  type: 'pie',
  data: data{{$i}},
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
		tooltip: {
         usePointStyle: false,
             
		}		 
    },
	title: {
        display: true,
        text: '{!! $dataChart['datasets'][$i]['label'] !!}'
    }
  },
};
@endfor
window.onload = function() {
	@for($i=0;$i<$chart_count;$i++)
		var ctx{{$i}} = document.getElementById('canvas{{$i}}').getContext('2d');
		window.myLine = new Chart(ctx{{$i}}, config{{$i}});
	@endfor
	};	
@endif	
	
</script>

@endpush