@extends('layout.master')
@section('title', 'Dashboard')
@section('dashboard', 'active')
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/morris.js/morris.css')}}">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endsection

@section('body')

    <div class="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="row">
                <div class="form-group col-sm-4">
                    <select name="state" id="state" required class="form-control">
                        <option value="" selected="selected" >- State -</option>
                        @foreach($states as $state)
                            <option value="{{$state->state_id}}" {{$default_state_id == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-sm-4">
                    <select name="lga" id="local_government" required class="form-control">
                        <option value="">Local Government</option>
                    </select>
                </div>
                <div class="form-group col-sm-4">
                    <select name="ward" id="ward" required class="form-control">
                        <option value="">Ward</option>
                    </select>
                </div>
            </div>
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                {!! $dashboard_stats !!}
            </div>
        </div>
    </div>

@endsection

@section('levelJS')
<script type="text/javascript">

    $(document).on('change', '#state', function(){
        var state = $(this).val();
        var url = '{{route('/get_lga')}}';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "POST",
            url: url,
            data: 'state='+state+'&type=lga&d=1',
            success: function(data){
                $('#local_government').html(data.form);
                $('#overview').html(data.dashboard);
                drawDashboardChart(data.chart);
            },
        });
    });

    $(document).on('change', '#local_government', function(){
        var state = $('#state').val();
        var lga = $(this).val();
        var url = '{{route('/get_lga')}}';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "POST",
            url: url,
            data: 'state='+state+'&lga='+lga+'&type=ward&d=1',
            success: function(data){
                $('#ward').html(data.form);
                $('#overview').html(data.dashboard);
                drawDashboardChart(data.chart);
            },
        });
    });

    $(document).on('change', '#ward', function(){
        var state = $('#state').val();
        var lga = $('#local_government').val();
        var ward = $(this).val();
        var url = '{{route('/get_lga')}}';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "POST",
            url: url,
            data: 'state='+state+'&lga='+lga+'&ward='+ward+'&d=1',
            success: function(data){
                $('#overview').html(data.dashboard);
                drawDashboardChart(data.chart);
            },
        });
    });

    var chart = {!! $chart !!};

    var d_chart = [{
            label: "Cases",
            value: '{{$total_cases}}'
        },
        {
            label: "Deaths",
            value: '{{$total_deaths}}'
        },
        {
            label: "Recoveries",
            value: '{{$total_recovery}}'
        },
        {
            label: "Active",
            value: '{{$total_active}}'
        }
    ];


    function drawDashboardChart(chart) {
        Morris.Bar({
            element: 'dashboard_barchart',
            barColors: ['#76C1FA', '#F36368', '#63CF72', '#FABA66'],
            data: chart,
            xkey: 'y',
            ykeys: ['a', 'b', 'c'],
            labels: ['Cases', 'Deaths', 'Recoveries']
        });
    }
    function drawDashboardDonut(chart) {
        Morris.Donut({
            element: 'dashboard_donut',
            colors: ['#76C1FA', '#F36368', '#63CF72', '#FABA66'],
            data: d_chart
        });
    }

    $(function() {

        $('#state').trigger('change');

        if ($("#dashboard_barchart").length) {
            drawDashboardChart(chart);
        }
        if ($("#dashboard_donut").length) {
            drawDashboardDonut(chart);
        }
        if ($('#morris-line-example').length) {
            Morris.Line({
                element: 'morris-line-example',
                lineColors: ['#63CF72', '#F36368', '#76C1FA', '#FABA66'],
                data: chart,
                xkey: 'y',
                ykeys: ['a', 'b', 'c'],
                labels: ['Cases', 'Death', 'Recovery']
            });
        }
        if ($('#morris-area-example').length) {
            Morris.Area({
                element: 'morris-area-example',
                lineColors: ['#76C1FA', '#F36368', '#63CF72', '#FABA66'],
                data: [{
                    y: '2006',
                    a: 100,
                    b: 90
                },
                    {
                        y: '2007',
                        a: 75,
                        b: 105
                    },
                    {
                        y: '2008',
                        a: 50,
                        b: 40
                    },
                    {
                        y: '2009',
                        a: 75,
                        b: 65
                    },
                    {
                        y: '2010',
                        a: 50,
                        b: 40
                    },
                    {
                        y: '2011',
                        a: 75,
                        b: 65
                    },
                    {
                        y: '2012',
                        a: 100,
                        b: 90
                    }
                ],
                xkey: 'y',
                ykeys: ['a', 'b'],
                labels: ['Series A', 'Series B']
            });
        }
        if ($("#morris-donut-dark-example").length) {
            Morris.Donut({
                element: 'morris-donut-dark-example',
                colors: ['#76C1FA', '#F36368', '#63CF72', '#FABA66'],
                data: [{
                    label: "Download Sales",
                    value: 12
                },
                    {
                        label: "In-Store Sales",
                        value: 30
                    },
                    {
                        label: "Mail-Order Sales",
                        value: 20
                    }
                ],
                labelColor: "#b1b1b5"
            });
        }
        if ($('#morris-dashboard-taget').length) {
            Morris.Area({
                element: 'morris-dashboard-taget',
                parseTime: false,
                lineColors: ['#76C1FA', '#F36368', '#63CF72', '#FABA66'],
                data: [{
                    y: 'Jan',
                    Revenue: 190,
                    Target: 170
                },
                    {
                        y: 'Feb',
                        Revenue: 60,
                        Target: 90
                    },
                    {
                        y: 'March',
                        Revenue: 100,
                        Target: 120
                    },
                    {
                        y: 'Apr',
                        Revenue: 150,
                        Target: 140
                    },
                    {
                        y: 'May',
                        Revenue: 130,
                        Target: 170
                    },
                    {
                        y: 'Jun',
                        Revenue: 200,
                        Target: 160
                    },
                    {
                        y: 'Jul',
                        Revenue: 150,
                        Target: 180
                    },
                    {
                        y: 'Aug',
                        Revenue: 170,
                        Target: 180
                    },
                    {
                        y: 'Sep',
                        Revenue: 140,
                        Target: 90
                    }
                ],
                xkey: 'y',
                ykeys: ['Target', 'Revenue'],
                labels: ['Monthly Target', 'Monthly Revenue'],
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                axes: 'x'
            });
        }

    });
</script>
<script src="{{asset('vendors/raphael/raphael.min.js')}}"></script>
<script src="{{asset('vendors/morris.js/morris.min.js')}}"></script>
@endsection