@php 
    use Carbon\Carbon;
@endphp
@extends('layouts.main') 
@section('title', 'Hour Wise Report')
@section('content')
    <!-- push external head elements to head -->
    @push('head')

        <link rel="stylesheet" href="{{ asset('plugins/weather-icons/css/weather-icons.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/owl.carousel/dist/assets/owl.carousel.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/owl.carousel/dist/assets/owl.theme.default.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/chartist/dist/chartist.min.css') }}">
        
        <style>
            .canvasjs-chart-credit {
                display: none !important;
            }
        </style>
    @endpush

        <div class="container-fluid">
    	   
            
            <div class = "row clearfix">
                <div class = "col-md-8">
                    <div class = "card">
                        <div class = "card-header"><h3>Hourly Hits</h3></div>
                        <div class = "card-body">
    	                    <div id="HourlyReport" style="height: 370px; width: 100%;"></div>
                        </div>
    	        </div>
                </div>
                
            </div>
        </div>
        
	<!-- push external js -->
    @push('script')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
       
        
        <script>
            window.onload = function () {
                
                var HourlyReportChart = new CanvasJS.Chart("HourlyReport", {
                	animationEnabled: true,
                	theme: "light2",
                	title:{
                		text: ""
                	},
                	axisX:{
                		valueFormatString: "DD MMM",
                		crosshair: {
                			enabled: true,
                			snapToDataPoint: true
                		}
                	},
                	axisY: {
                		title: "No of Hits",
                		includeZero: true,
                		crosshair: {
                			enabled: true
                		}
                	},
                	toolTip:{
                		shared:true
                	},  
                	legend:{
                		cursor:"pointer",
                		indexLabelPlacement: "outside",
                		itemclick: toogleDataSeries2
                	},
                	data: [{
                		type: "line",
                		showInLegend: true,
                		name: "GeoCoding Api",
                		markerType: "square",
                		color: "#F08080",
                		dataPoints: {!! json_encode($geocodingchartdata) !!}
                	},
                	{
                		type: "line",
                		showInLegend: true,
                		name: "Direction Api",
                		markerType: "square",
                		lineDashType: "dash",
                		dataPoints: {!! json_encode($geodirectionchartdata) !!}
                	}]
                });
                HourlyReportChart.render();
                
                function toogleDataSeries2(e){
                	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                		e.dataSeries.visible = false;
                	} else{
                		e.dataSeries.visible = true;
                	}
                	HourlyReportChart.render();
                }
            }
        </script>
    @endpush
@endsection