@extends('admin.layouts.app')

@section('content')

<div class="row">
    <div class="col-md-6">
        <figure class="highcharts-figure">
            <div id="reguler-points"></div>
        </figure>
    </div>
    <div class="col-md-6">
        <figure class="highcharts-figure">
            <div id="event-points"></div>
        </figure>
    </div>
</div>



@endsection

    @push('js')
    <style>
        .highcharts-title{
            display: none;
        }
        .highcharts-a11y-proxy-button{
            display: none;
        }
    </style>
    <script src="{{ asset('assets') }}/js/highchart/highcharts.js"></script>
    <script src="{{ asset('assets') }}/js/highchart/exporting.js"></script>
    <script src="{{ asset('assets') }}/js/highchart/exporting-data.js"></script>
    <script src="{{ asset('assets') }}/js/highchart/accessibility.js"></script>
    <script src="{{ asset('assets') }}/js/custom.js"></script>
    <script src="{{ asset('assets') }}/js/custom-graph.js"></script>

    <script>
        var users = {!! json_encode($reguler_user_all) !!};
        var points = {!! json_encode($reguler_point_all) !!};

        Highcharts.chart('reguler-points', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Kelasmen Reguler Point'
            },
            subtitle: {
                text: 'Kelasmen Reguler Point'
            },
            xAxis: {
                categories: users,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                text: 'points'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                pointPadding: 0.2,
                borderWidth: 0
                }
            },
            series: [
                    {
                        name: 'Reguler Point',
                        data: points
                    }
                ]
        });
    </script>

<script>
        var users = {!! json_encode($event_user_all) !!};
        var points = {!! json_encode($event_point_all) !!};

        Highcharts.chart('event-points', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Kelasmen Event Point'
            },
            subtitle: {
                text: 'Kelasmen Event Point'
            },
            xAxis: {
                categories: users,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                text: 'points'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                pointPadding: 0.2,
                borderWidth: 0
                }
            },
            series: [
                    {   
                        color: '#F7A35C',
                        name: 'Event Point',
                        data: points
                    }
                ]
        });
    </script>
    
@endpush