@can('view-dashboard')
@extends('adminlte::page')

@section('title', 'Dashboard')


@section('plugins.Chartjs', true)
@section('content_header')
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Dashboard</h1>
            </div>
            <!-- <div class="col-md-6">
                <div class="form-group">
                        <select class="form-control filters" style="width:80%;float: left;"  id ="searchBystatus" name="status">
                            <option value="all">Select Site</option>
                            @foreach($userParkingSites as $key => $value)
                            <option value="{{$key}}" >{{$value}}</option>
                            @endforeach
                        </select>
                        &nbsp;
                        <a class="btn btn-primary ml-2" style="float: left;" href="{{ route('areas.create') }}">@lang('adminlte::dashboard.search')</a>
                    </form>
                </div>

            </div> -->
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Site Wise Payments Count</h3>

                    <div class="card-tools">
                       <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <!-- <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>  -->
                    </div>
                </div>
                <div class="card-body text-center" id="div_piechar1">
                    <canvas id="piechart1" height="200"></canvas>
                </div>
              <!-- /.card-body -->
            </div>
        </div>
        <div class="col-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Vehicle Type Wise Payments %</h3>

                    <div class="card-tools">
                       <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <!-- <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>  -->
                    </div>
                </div>
                <div class="card-body text-center text-center" id="div_piechar2">
                    <canvas id="piechart2" height="200"></canvas>
                </div>
              <!-- /.card-body -->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Vehicle Type Wise Amount Paid %</h3>

                    <div class="card-tools">
                       <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <!-- <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>  -->
                    </div>
                </div>
                <div class="card-body text-center" id="div_piechar3">
                    <canvas id="piechart3" height="200"></canvas>
                </div>
              <!-- /.card-body -->
            </div>
        </div>
    </div>

@stop
@section('js')
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js" defer></script>
<script>
$(document).ready(function () {
    var pieChart1 = document.getElementById('piechart1');
    var options = {
        responsive: true,
        legend: {
            position: 'bottom',
            labels: {
                boxWidth: 20,
                usePointStyle: true,
            }
        },
        plugins: {
            labels: {
            // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                render: 'percentage',
                fontColor: '#fff',
            },
        },
        tooltips:{
            titleFontSize: 20
        }

    };

    var pieChartData1 = {!! json_encode($paymentsData['payment_count']) !!};
    if(pieChartData1.length>0)
    {
        var myPieChart = new Chart(pieChart1, {
            type: 'pie',
            data: {
                datasets: [{
                    data: {!! json_encode($paymentsData['payment_count']) !!},
                    backgroundColor: {!! json_encode(config('aps.chart_colours')) !!},
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: {!! json_encode($paymentsData['parking_site_name']) !!},


            },
            options: options,
        });
    }
    else
    {
        $('#div_piechar1').html('No Data');
    }



    var pieChart2 = document.getElementById('piechart2');
    var pieChartData2 = {!! json_encode($vehicleTypeCount['vehicle_count']) !!};
    if(pieChartData2.length>0)
    {
        var myPieChart2 = new Chart(pieChart2, {
            type: 'pie',
            data: {
                datasets: [{
                    data: {!! json_encode($vehicleTypeCount['vehicle_count']) !!},
                    backgroundColor: {!! json_encode(config('aps.chart_colours')) !!},
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: {!! json_encode($vehicleTypeCount['vehicle_type']) !!},


            },
            options: options
        });
    }
    else
    {
        $('#div_piechar2').html('No Data');
    }

    var pieChart3 = document.getElementById('piechart3');
    var pieChartData3 = {!! json_encode($vehicleTypeCount['vehicle_count']) !!};
    if(pieChartData3.length>0)
    {
        var myPieChart3 = new Chart(pieChart3, {
            type: 'pie',
            data: {
                datasets: [{
                    data: {!! json_encode($vehicleTypeWiseAmount['payment_percentage']) !!},
                    backgroundColor: {!! json_encode(config('aps.chart_colours')) !!},
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: {!! json_encode($vehicleTypeWiseAmount['vehicle_type']) !!},


            },
            options: options
        });
    }
    else
    {
        $('#div_piechar3').html('No Data');
    }
});
</script>
@stop
@endcan