@php 
    use Carbon\Carbon;
@endphp
@extends('layouts.main') 
@section('title', 'Dashboard')
@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-lg-3 col-md-6 col-sm-12">
                    <div class="widget bg-success">
                        <div class="widget-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="state">
                                    <h6>Token Generated</h6>
                                    <h2>{{ $totalapi }}</h2>
                                </div>
                                <div class="icon">
                                    <i class="ik ik-shield"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="widget bg-warning">
                        <a href = "{{ url('/locationapireport') }}">
                        <div class="widget-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="state">
                                    <h6>Geocoding Api Hits</h6>
                                    <h2>{{ $totallocation }}</h2>
                                </div>
                                <div class="icon">
                                    <i class="ik ik-map-pin"></i>
                                </div>
                            </div>
                        </div></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="widget bg-danger">
                         <a href = "{{ url('/directionapireport') }}">
                        <div class="widget-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="state">
                                    <h6>Direction Api Hits</h6>
                                    <h2>{{ $totaldirection }}</h2>
                                </div>
                                <div class="icon">
                                    <i class="ik ik-map"></i>
                                </div>
                            </div>
                        </div></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="widget bg-info">
                         <a href = "{{ url('/directionapireport') }}">
                        <div class="widget-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="state">
                                    <h6>Geolocation Api Hits</h6>
                                    <h2>0</h2>
                                </div>
                                <div class="icon">
                                    <i class="ik ik-map"></i>
                                </div>
                            </div>
                        </div></a>
                    </div>
                </div>
            </div>
            
            <div class = "row clearfix">
                <div class = "col-md-4">
                    <div class = "card p-1">
                        <div class = "card-header"><h3>Today's Summary Report</h3></div>
                        <div class = "card-body">
                            <canvas id="doughnut"></canvas>
                        </div>
                      </div>
                </div>
                
                <div class = "col-md-8">
                    <div class = "card">
                        <div class = "card-header justify-content-between">
                            <h3>Today's Hourly Hits</h3>
                            <div class="col-md-3">
                                <input type="date" id = "reporttingdate" class="form-control" max="{{ now()->format('Y-m-d') }}" name="date" onchange="return changehourdatafunction()" id="">
                            </div>

                        </div>
                        <div class = "card-body">
    	                <div id="HourlyReport" style="height: 370px; width: 100%;"></div>
                        </div>
    	        </div>
                </div>
                
                <div class = "col-md-8">
                    <div class = "card">
                        <div class = "card-header"><h3>Last 10 Days Summary Report</h3></div>
                        <div class = "card-body">
                            <div id="chartContainer" style="height: 370px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
                
            </div>
            
            
            <div class = "row clearfix">
                <div class="col-xl-6 col-md-6">
                    <div class="card table-card">
                    <div class="card-header">
                        <h3>Last 5 Used Geo Coding Details</h3>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="ik ik-chevron-left action-toggle"></i></li>
                                
                                <li><i class="ik ik-x close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-block">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>S.no</th>
                                        <th>Token User</th>
                                        <th>Ip Address</th>
                                        <th>User Agent</th>
                                        <th>Used at</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($lastgeolocation as $logs)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $logs->user->name }}</td>
                                        <td>{{ $logs->ip_address }}</td>
                                        <td>{{ $logs->user_agent }}</td>
                                        <td>{{ Carbon::parse($logs->created_at)->format('d-M-y H:i:s') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr style = "background-color:#f6f8fb;">
                                        <td colspan = "5" class = "text-center"><a href = "{{ url('/locationapireport') }}">View Full Details</a></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                    </div>
                </div>
                </div>
                
                <div class="col-xl-6 col-md-6">
                    <div class="card table-card">
                    <div class="card-header">
                        <h3>Last 5 Used Geo Direction Details</h3>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="ik ik-chevron-left action-toggle"></i></li>
                                <li><i class="ik ik-x close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-block">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>S.no</th>
                                        <th>Token User</th>
                                        <th>Ip Address</th>
                                        <th>User Agent</th>
                                        <th>Used at</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($lastgeodirection as $logs)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $logs->user->name }}</td>
                                        <td>{{ $logs->ip_address }}</td>
                                        <td>{{ $logs->user_agent }}</td>
                                        <td>{{ Carbon::parse($logs->created_at)->format('d-M-y H:i:s') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr style = "background-color:#f6f8fb;">
                                        <td colspan = "5" class = "text-center"><a href = "{{ url('/directionapireport') }}">View Full Details</a></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </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>
            const arr = ["{{ $totalapi }}","{{ $totallocation }}","{{ $totaldirection }}"]
            const doughnut = document.getElementById('doughnut');
        
            new Chart(doughnut, {
            type: 'doughnut',
            data: {
              labels: ['Token Generated', 'Geocoding Api Hits', 'Direction Api Hits'],
              datasets: [{
                label: 'Count',
                data: arr,
                borderWidth: 1
              }]
            },
            options: {
              scales: {
                y: {
                  beginAtZero: true
                }
              }
            }
          });
        </script>
        
        <script>

            $(document).ready(function () {

                $.ajax({
                    type: "get",
                    url: "{{ url('getreport') }}",
                    success: function (response) {
                        console.log(response);
                    

                const ldata = response.locationdata;
                const ddata = response.directiondata;
            
                // Convert once, right before you feed the chart lib:
               const chartLdata = ldata.map(p => ({
                  x: new Date(new Date(p.x).setHours(0, 0, 0, 0)),
                  y: p.y
                }));
                
                const chartDdata = ddata.map(p => ({
                  x: new Date(new Date(p.x).setHours(0, 0, 0, 0)),
                  y: p.y
                }));
                
                var options = {
                	animationEnabled: true,
                	theme: "light1",
                	title:{
                		text: "API Hits Count"
                	},
                	axisX:{
                		valueFormatString: "DD MMM",
                		
                	},
                	axisY: {
                		title: "Number of Hits",
                		minimum: 1,
                		
                	},
                	toolTip:{
                		shared:true
                	},  
                	legend:{
                		cursor:"pointer",
                		indexLabelPlacement: "outside",
                		itemclick: toogleDataSeries
                	},
                	data: [{
                		type: "line",
                		showInLegend: true,
                		name: "Geocoding Api",
                		markerType: "square",
                		xValueFormatString: "DD MMM, YYYY",
                		color: "#F08080",
                		yValueFormatString: "#,##0",
                		dataPoints: chartLdata
                	},
                	{
                		type: "line",
                		showInLegend: true,
                		name: "Direction Api",
                		lineDashType: "dash",
                		yValueFormatString: "#,##0",
                		dataPoints: chartDdata
                	}]
                };

                $("#chartContainer").CanvasJSChart(options);
                
                function toogleDataSeries(e){
                	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                		e.dataSeries.visible = false;
                	} else{
                		e.dataSeries.visible = true;
                	}
                	e.chart.render();
                }

                }
                });
                
            });


            window.onload = function () {
                let Chartdata1 = {!! json_encode($geocodingchartdata) !!}
                let Chartdata2 = {!! json_encode($geodirectionchartdata) !!}
                CreateHourchart(Chartdata1,Chartdata2); 
            }
        </script>

        <script>

            function CreateHourchart(Chartdata1,Chartdata2){
                    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: "column",
                		showInLegend: true,
                		name: "GeoCoding Api",
                		markerType: "square",
                		color: "#F08080",
                		dataPoints: Chartdata1
                	},
                	{
                		type: "column",
                		showInLegend: true,
                		name: "Direction Api",
                		markerType: "square",
                		lineDashType: "dash",
                		dataPoints: Chartdata2
                	}]
                });
                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();
            }
            }

            function changehourdatafunction(){
                let reportdate = $('#reporttingdate').val();

                $.ajax({
                    type: "post",
                    url: "{{ url('gethourlyreportbydate') }}",
                    data: {
                        reportdate : reportdate,
                        _token : "{{ csrf_token() }}"
                    },
                    success: function (response) {
                        console.log(response);
                        HourlyReportChart = new CanvasJS.Chart("HourlyReport");
                        HourlyReportChart.destroy();
                        Chartdata1 = response.geocodingchartdata;
                        Chartdata2 = response.geodirectionchartdata ;
                        CreateHourchart(Chartdata1,Chartdata2); 
                    }
                });
            }

            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