@extends('layout')

@section('title', 'Non Disclosure Agreement')

@section('content')
    <div class="main-card mb-12 card">
        <div class="card-body">
            <h5 class="card-title">Number of Applications</h5>
            <div class="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
                <div style="height: 300px;">
                    <canvas id="custom-line-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        var configLine = {
            type: 'line',
            data: {
                labels: ['{{ new Illuminate\Support\HtmlString(implode("','", array_keys($summary['applicationsPerMonth']['data']))) }}'],
                datasets: [
                    @foreach($summary as $key => $value)
                    {
                        label: '{{ $value['name'] }}',
                        fill: false,
                        backgroundColor: window.chartColors.{{ $value['color'] }},
                        borderColor: window.chartColors.{{ $value['color'] }},
                        data: [{{ implode(",", array_values($value['data'])) }}],
                    },
                    @endforeach
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: false,
                    text: 'Chart.js Line Chart'
                },
                legend: {
                    display: true
                },
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 0
                    }
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: false
                },
                pointBackgroundColor: '#fff',
                pointBorderColor: window.chartColors.blue,
                pointBorderWidth: '2',
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };

        if (document.getElementById('custom-line-chart')) {
            var ctx5 = document.getElementById('custom-line-chart').getContext('2d');
            window.myLine = new Chart(ctx5, configLine);
        }
    </script>
@endsection()