@extends('backend.layout')

@section('content')

<!-- Dashboard content -->
<div class="row">
	<div class="col-lg-12">
		<!-- Columns timeline -->
		<div class="panel panel-flat">
			<div class="panel-heading">
				<h5 class="panel-title">Doanh thu</h5>
			</div>

			<div class="panel-body">
				<div class="chart-container">
					<div class="chart has-fixed-height" id="columns_timeline"></div>
				</div>
			</div>
		</div>
		<!-- /columns timeline -->

	</div>

</div>


@if(isset($boxs))
<div class="row">
	<div class="col-md-12">
		<div class="panel panel-flat" >
			<div class="panel-body" style="padding:0px;border:none;">
				<div class="tabbable tab-content-bordered" style="padding:0px;border:none;">
					<ul class="nav nav-tabs nav-tabs-highlight nav-justified">xx
						@foreach($year as $key => $val)
						<li @if($key == (count($year) -1) )class="active" @endif><a href="#tab{{$val}}" data-toggle="tab">{{$val}}</a></li>
						@endforeach
					</ul>

					
					<div class="tab-content" >
						@foreach($year as $key => $val)
						<div class="tab-pane has-padding @if($key == (count($year) -1) )active @endif" id="tab{{$val}}" style="padding:0px;border:none;">
							<div class="table-responsive">
								<table class="table table-bordered text-nowrap">
									<thead>
										<tr>
											<th>Loại</th>
											@foreach($months as $m) <th>T {{$m}}</th> @endforeach
											<th class="text-center">Tổng</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Đăng ký</td>
											@foreach($new[$val] as $mon) <td style="padding:3px;">{{number_format($mon,0,'.','.')}}</td> @endforeach
											<td style="padding:3px;">{{number_format(array_sum($new[$val]),0,'.','.')}}</td>
										</tr>
										<tr>
											<td>Gia hạn</td>
											@foreach($renew[$val] as $mon) <td style="padding:3px;">{{number_format($mon,0,'.','.')}}</td> @endforeach
											<td style="padding:3px;">{{number_format(array_sum($renew[$val]),0,'.','.')}}</td>
										</tr>
										<tr>
											<td>Huỷ</td>
											@foreach($cancel[$val] as $mon) <td style="padding:3px;">{{number_format($mon,0,'.','.')}}</td> @endforeach
											<td style="padding:3px;">{{number_format(array_sum($cancel[$val]),0,'.','.')}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						@endforeach
					</div>
					
				</div>
			</div>
		</div>
	</div>
</div>
@endif

@endsection


	
@push('scripts')
	@if(isset($boxs))
	<script src="{{ URL::asset('backend/global_assets/js/plugins/visualization/echarts/echarts.min.js')}}"></script>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			var columns_timeline_element = document.getElementById('columns_timeline');
			// Columns timeline
		    if (columns_timeline_element) {

		        // Initialize chart
		        var columns_timeline = echarts.init(columns_timeline_element);


		        //
		        // Chart config
		        //

		        // Demo data
		        var dataMap = {};
		        dataMap.dataGDP = ({
		        	@foreach($new as $yearBox => $val) :[],
		         	@endforeach
		        });
		        dataMap.dataEstate = ({
		        	@foreach($renew as $yearBox => $val) :[],
		        	@endforeach
		        });
		        dataMap.dataFinancial = ({
		        	@foreach($cancel as $yearBox => $val):[],
		            @endforeach
		        });

		        // Options
		        columns_timeline.setOption({

		            // Setup timeline
		            timeline: {
		                axisType: 'category',
		                data: [],
		                left: 0,
		                right: 0,
		                bottom: 0,
		                label: {
		                    normal: {
		                        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
		                        fontSize: 11
		                    }
		                },
		                autoPlay: true,
		                playInterval: 10000
		            },

		            // Config
		            options: [
		                {

		                    // Global text styles
		                    textStyle: {
		                        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
		                        fontSize: 13
		                    },

		                    // Chart animation duration
		                    animationDuration: 750,

		                    // Setup grid
		                    grid: {
		                        left: 10,
		                        right: 10,
		                        top: 35,
		                        bottom: 60,
		                        containLabel: true
		                    },

		                    // Add legend
		                    legend: {
		                        data: ['Đăng Ký','Gia hạn','Huỷ'],
		                        itemHeight: 8,
		                        itemGap: 20
		                    },

		                    // Tooltip
		                    tooltip: {
		                        trigger: 'axis',
		                        backgroundColor: 'rgba(0,0,0,0.75)',
		                        padding: [10, 15],
		                        textStyle: {
		                            fontSize: 13,
		                            fontFamily: 'Roboto, sans-serif'
		                        },
		                        axisPointer: {
		                            type: 'shadow',
		                            shadowStyle: {
		                                color: 'rgba(0,0,0,0.025)'
		                            }
		                        }
		                    },

		                    // Horizontal axis
		                    xAxis: [{
		                        type: 'category',
		                        data: ['Tháng 1','Tháng 2','Tháng 3','Tháng 4','Tháng 5','Tháng 6','Tháng 7','Tháng 8','Tháng 9','Tháng 10','Tháng 11','Tháng 12'],
		                        axisLabel: {
		                            color: 'blue'
		                        },
		                        axisLine: {
		                            lineStyle: {
		                                color: '#999'
		                            }
		                        },
		                        splitLine: {
		                            show: true,
		                            lineStyle: {
		                                color: '#eee',
		                                type: 'dashed'
		                            }
		                        },
		                        splitArea: {
		                            show: true,
		                            areaStyle: {
		                                color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
		                            }
		                        }
		                    }],

		                    // Vertical axis
		                    yAxis: [
		                        {
		                            type: 'value',
		                            name: 'Doanh thu (đồng))',
		                            // max: 10000000000,
		                            axisLabel: {
		                                color: '#333'
		                            },
		                            axisLine: {
		                                lineStyle: {
		                                    color: '#999'
		                                }
		                            },
		                            splitLine: {
		                                show: true,
		                                lineStyle: {
		                                    color: '#eee'
		                                }
		                            }
		                        },
		                        // {
		                        //     type: 'value',
		                        //     name: 'Other（million)',
		                        //     axisLabel: {
		                        //         color: '#333'
		                        //     },
		                        //     axisLine: {
		                        //         lineStyle: {
		                        //             color: '#999'
		                        //         }
		                        //     },
		                        //     splitLine: {
		                        //         show: false,
		                        //         lineStyle: {
		                        //             color: '#f5f5f5'
		                        //         }
		                        //     }
		                        // }
		                    ],

		                    // Add series
		                    series: [
		                        {
		                            name: 'Đăng Ký',
		                            type: 'bar',
		                            color: '#00e600',
		                            data: dataMap.dataGDP[]
		                        },
		                        {
		                            name: 'Gia hạn',
		                            // yAxisIndex: 1,
		                            type: 'bar',
		                            color: '#00e6e6',
		                            data: dataMap.dataEstate[]
		                            
		                        },
		                        {
		                            name: 'Huỷ',
		                            // yAxisIndex: 1,
		                            type: 'bar',
		                            color: '#e60000',
		                            data: dataMap.dataFinancial[]
		                        }
		                    ]
		                },

		                		                
		            ]
		        });
		    }

		    // Resize function
		    var triggerChartResize = function() {
		        columns_basic_element && columns_basic.resize();
		        columns_stacked_element && columns_stacked.resize();
		        columns_thermometer_element && columns_thermometer.resize();
		        columns_clustered_element && columns_clustered.resize();
		        columns_compositive_waterfall_element && columns_compositive_waterfall.resize();
		        columns_change_waterfall_element && columns_change_waterfall.resize();
		        columns_timeline_element && columns_timeline.resize();
		    };

		    // On sidebar width change
		    $(document).on('click', '.sidebar-control', function() {
		        setTimeout(function () {
		            triggerChartResize();
		        }, 0);
		    });

		    // On window resize
		    var resizeCharts;
		    window.onresize = function () {
		        clearTimeout(resizeCharts);
		        resizeCharts = setTimeout(function () {
		            triggerChartResize();
		        }, 200);
		    };

		});
	</script>
	@endif
@endpush