@extends('layouts.master')
@section('title',trans('analytic'))
@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-header">
                    </div>
                    <div class="card-content">
                        <div class="card-body p-0 p-md-1">
                            <canvas id="chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('footer')
    <script src="{{ asset('panelAssets/app-assets/vendors/js/charts/chart.min.js') }}"></script>
    <script>
        $(window).on("load", function () {
            var $primary = '#7367F0';
            var $success = '#28C76F';
            var $danger = '#EA5455';
            var $warning = '#FF9F43';
            var $label_color = '#1E1E1E';
            var grid_line_color = '#dae1e7';
            var scatter_grid_color = '#f3f3f3';
            var $scatter_point_light = '#D1D4DB';
            var $scatter_point_dark = '#5175E0';
            var $white = '#fff';
            var $black = '#000';

            var themeColors = [$primary, $success, $danger, $warning, $label_color];

            // Line Chart
            // ------------------------------------------

            //Get the context of the Chart canvas element we want to select
            var lineChartctx = $("#chart");

            // Chart Options
            var linechartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'top',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                        display: true,
                        gridLines: {
                            color: grid_line_color,
                        },
                        scaleLabel: {
                            display: true,
                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: grid_line_color,
                        },
                        scaleLabel: {
                            display: true,
                        }
                    }]
                },
                title: {
                    display: true,
                    text: `{{trans('analytic data')}}`
                }
            };
            // Chart Data
            var linechartData = {
                labels: @json($labels),
                datasets: [{
                    label: `{{trans('payments')}}`,
                    data: @json($data),
                    borderColor: $primary,
                    fill: false
                }]
            };

            var lineChartconfig = {
                type: 'line',

                // Chart Options
                options: linechartOptions,

                data: linechartData
            };

            // Create the chart
            var lineChart = new Chart(lineChartctx, lineChartconfig);
        });
    </script>
@endsection