@extends('Admin.Views.admin')

@include('dss::sidebar')

@push('styles')
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        const statistics = JSON.parse('@json($statistics)');

        google.charts.load('current', {packages: ['corechart']});

        google.charts.setOnLoadCallback(drawPerCategoryChart);
        google.charts.setOnLoadCallback(drawPerProductChart);
        google.charts.setOnLoadCallback(drawPerDayChart);
        google.charts.setOnLoadCallback(drawPerProblemChart);
        google.charts.setOnLoadCallback(drawPerSexChart);

        function drawPerCategoryChart() {
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Categoría de recursos');
            data.addColumn('number', 'Solicitudes');
            data.addRows(statistics.per_category);

            const options = {legend: 'none',chartArea:{top:'10%',left:0,width:'100%',height:'80%'}};

            const chart = new google.visualization.PieChart(document.getElementById('per_category_chart'));
            chart.draw(data, options);

            window.addEventListener('resizeEnd', function() {
                chart.draw(data, options);
            }, false);
        }

        function drawPerProductChart() {
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Recurso');
            data.addColumn('number', 'Solicitudes');
            data.addRows(statistics.per_product);

            const options = {legend: 'none',chartArea:{top:'10%',left:0,width:'100%',height:'80%'}};

            const chart = new google.visualization.PieChart(document.getElementById('per_product_chart'));
            chart.draw(data, options);

            window.addEventListener('resizeEnd', function() {
                chart.draw(data, options);
            }, false);
        }

        function drawPerDayChart() {
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Día');
            data.addColumn('number', 'Solicitudes');
            data.addRows(statistics.per_day);

            const options = {height:330,legend: 'none',chartArea:{top:'10%',left:'5%',width:'95%',height:'80%'}};

            const chart = new google.visualization.LineChart(document.getElementById('per_day_chart'));
            chart.draw(data, options);

            window.addEventListener('resizeEnd', function() {
                chart.draw(data, options);
            }, false);
        }

        function drawPerProblemChart() {
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Problemática');
            data.addColumn('number', 'Solicitudes');
            data.addRows(statistics.per_problem);

            const options = {legend: 'none',chartArea:{top:'10%',left:0,width:'100%',height:'80%'}};

            const chart = new google.visualization.PieChart(document.getElementById('per_problem_chart'));
            chart.draw(data, options);

            window.addEventListener('resizeEnd', function() {
                chart.draw(data, options);
            }, false);
        }

        function drawPerSexChart() {
            const data = new google.visualization.DataTable();
            data.addColumn('string', 'Sexo');
            data.addColumn('number', 'Solicitudes');
            data.addRows(statistics.per_sex);

            const options = {legend: 'none',chartArea:{top:'10%',left:0,width:'100%',height:'80%'}};

            const chart = new google.visualization.PieChart(document.getElementById('per_sex_chart'));
            chart.draw(data, options);

            window.addEventListener('resizeEnd', function() {
                chart.draw(data, options);
            }, false);
        }
    </script>
@endpush

@section('content')
    @include('dss::statistics.partials.filters')

    @include('dss::statistics.partials.general')

    @include('dss::statistics.partials.per-day')

    <div class="row">
        <div class="col-md-6">
            @include('dss::statistics.partials.per-category')
        </div>
        <div class="col-md-6">
            @include('dss::statistics.partials.per-product')
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            @include('dss::statistics.partials.per-problem')
        </div>
        <div class="col-md-6">
            @include('dss::statistics.partials.per-sex')
        </div>
    </div>

    @include('dss::statistics.partials.per-person')
@endsection