@extends('layouts.app')

@section('content')
<div class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="main-body">
            <div class="page-wrapper">
            	<div class="page-body">
                    <div class="row">
                        <!-- card1 start -->
                        <div class="col-md-6 col-xl-3">
                            <div class="card widget-card-1">
                                <div class="card-block-small">
                                    <i class="icofont icofont-pie-chart bg-c-blue card1-icon"></i>
                                    <span class="text-c-blue f-w-600">Reported Cases</span>
                                    <h4>0</h4>
                                    <div>
                                        <span class="f-left m-t-10 text-muted">
                                            <i class="text-c-blue f-16 icofont icofont-warning m-r-10"></i>Total Cases
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- card1 end -->
                    </div>
                        <div class="row">
                        <!-- Drill Down Chart -->
                        <div class="col-md-12 col-lg-12">
                            <div class="card">

                                <div class="card-block">
                                    <div id="top_districts"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Drill Down End -->

                        <!-- National Status start -->
                        <div class="col-md-12 col-lg-6">
                            <div class="card">

                                <div class="card-block">
                                    <div id="national_status"></div>
                                </div>
                            </div>
                        </div>
                        <!-- National Status Ends -->

                        <!-- Regions start -->
                        <div class="col-md-12 col-lg-6">
                            <div class="card">

                                <div class="card-block">
                                    <div id="regions"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Regions Ends -->

                        <!-- Bar Chart start -->
                        <div class="col-md-12 col-lg-12">
                            <div class="card">
                                <div class="card-block">
                                    <div id="column-chart" style="overflow-x:scroll; height: 600px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-12">
                            <div class="card">
                                <div class="card-block">
                                    <div id="column-chart-agegroups" style="overflow-x:scroll; height: 600px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Bar Chart Ends -->
                        <!-- LINE CHART start -->
                        <div class="col-md-12 col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Trends</h5>
                                    <span>Trends of Incidents across the Years</span>
                                </div>
                                <div class="card-block">
                                    <div id="line-example"></div>
                                </div>
                            </div>
                        </div>
                        <!-- LINE CHART Ends -->
                        <!-- Donut chart start -->
                        <div class="col-md-12 col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Number of Incidents</h5>
                                    <span>Total number of Incidents separated by Incident Category</span>
                                    <div class="card-header-right">
                                        <i class="icofont icofont-spinner-alt-5"></i>
                                    </div>
                                </div>
                                <div class="card-block">
                                    <div id="donut-example"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Donut chart Ends -->
                        <!-- Area Chart start -->
                        <div class="col-lg-12" style="visibility: hidden; height: 0px;">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Area chart</h5>
                                    <span></span>
                                    <div class="card-header-right">
                                        <i class="icofont icofont-spinner-alt-5"></i>
                                    </div>
                                </div>
                                <div class="card-block">
                                    <div id="area-example"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Area Chart Ends -->

                    </div>
	            </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // Data retrieved from https://gs.statcounter.com/browser-market-share#monthly-202201-202201-bar

    // Create the chart
    Highcharts.chart('top_districts', {
        chart: {
            type: 'column'
        },
        title: {
            align: 'left',
            text: 'Districts with the Highest Incident Rates'
        },
        subtitle: {
            align: 'left',
            text: ''
        },
        accessibility: {
            announceNewData: {
                enabled: true
            }
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Total Number of Incidents'
            }

        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
        },

        series: [
            {
                name: 'Districts',
                colorByPoint: true,
                data: [
                    @foreach($incidents as $incident)
                        {
                            name: '{{ $incident->name }}',
                            y: {{ $incident->y }},
                            drilldown: '{{ $incident->drilldown }}'
                        },
                    @endforeach
                ]
            }
        ],
        drilldown: {
            breadcrumbs: {
                position: {
                    align: 'right'
                }
            },
            series: [
                @foreach($incidents as $incident)
                    {
                        name: '{{ $incident->name }}',
                        id: '{{ $incident->name }}',
                        data: [