@extends('layouts.site')


@section('title','Strona Startowa')

@section('content')

@php

    if(isset($_GET['year_stat'])){
        $selected_year = $_GET['year_stat'];
    }

    $now = \Carbon\Carbon::now();
    $currentYear = \Carbon\Carbon::now()->format('Y');

    if(isset($selected_year)){
        $selected_year = $selected_year;
    }else{
        $selected_year = $currentYear;
    }


    /* Chart 1 */
    $record = DB::table('t080_sygnalista_zgloszenia')
    ->select(\DB::raw("COUNT(*) as count"), \DB::raw("DATE_FORMAT(created_at,'%m') as monthKey"))
    ->whereYear('created_at', $selected_year)
    ->groupBy('monthKey')
    ->orderBy('monthKey')
    ->get();

     $data = [];

     foreach($record as $row) {
        $data['label'][] = $row->monthKey;
        $data['data'][] = (int) $row->count;
    }

      $chart_data_1 = json_encode($data);


    /* Chart 2 */
    $data_2 = [];

    $record = DB::table('t080_sygnalista_zgloszenia')
    ->select(\DB::raw("COUNT(*) as count"))
    ->whereYear('created_at', $selected_year)
    ->groupBy('reprezentowana_grupa')
    ->orderBy('reprezentowana_grupa')
    ->get();

    foreach($record as $row) {
        $data_2['data'][] = (int) $row->count;
    }


    $record_label = DB::connection('mysql-2')->table('zs101_sygnalista_grupy')
    ->orderBy('id')
    ->get();

    foreach($record_label as $row) {
        $data_2['label'][] = $row->grupa_skrot;
    }

    $chart_data_2 = json_encode($data_2);


    /* Chart 3 */
    $data_3 = [];

    $record = DB::table('v081_sygnalista_zgloszenia_dziedziny_statystyki')
    ->select(\DB::raw("COUNT(*) as count, dziedzina_id"))
    ->whereYear('created_at', $selected_year)
    ->groupBy('dziedzina_id')
    ->orderBy('dziedzina_id')
    ->get();

    foreach($record as $row) {
        $data_3['data'][] = (int) $row->count;
    }


    $record_label = DB::table('v081_sygnalista_zgloszenia_dziedziny_statystyki')
    ->whereYear('created_at', $selected_year)
    ->groupBy('dziedzina_id')
    ->orderBy('dziedzina_id')
    ->get();

    foreach($record_label as $row) {
        $data_3['label'][] = $row->dziedzina_skrot;
    }


    $chart_data_3 = json_encode($data_3);



@endphp

<!-- Sekcja nr 1 - START -->

<div class="border-rounded-top tab-content tab-content_2 my_TabContentRounded">

    <!-- /* Wyszukiwarka */ -->
    <div class="row site_header">
        <div class="col-7 site_name">
            Sygnalista - Statystyki
        </div>
        <div class="text-right col-5">

            <form>
                Wybierz rok:
                <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="year_stat" id="year_stat" onchange="this.form.submit()" >
                    @for($i=2021; $i < 2031; $i++)
                            <option {{ (($i) == ($selected_year)) ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
                    @endfor
                </select>
            </form>
        </div>
    </div>
    <!-- /* Wyszukiwarka - KONIEC */ -->


    <!-- /* Wyświetlanie Kafelków */ -->
    <div class="kafelek_ramka">



<div class="accordion" id="accordionExample">
    <div class="card">
        <div id="headingOne" class="card-header my_stat_accordion_button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <h5 class="mb-0">
                # Ilość zgłoszeń w poszczególnych miesiącach - {{ $selected_year }} rok
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="pie-chart_1" style="position: relative; height:40vh;"></canvas>
                </div>
            </div>
        </div>
    </div>


    <div class="card">
      <div id="headingTwo" class="card-header collapsed my_stat_accordion_button" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <h5 class="mb-0">
            # Ilość zgłoszeń z podziałem na grupy osób zgłaszających - {{ $selected_year }} rok
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        <div class="card-body">
            <div class="chart-container">
                <canvas id="pie-chart_2" style="position: relative; height:40vh;"></canvas>
            </div>
        </div>
      </div>
    </div>


    <div class="card">
      <div id="headingThree" class="card-header collapsed my_stat_accordion_button" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <h5 class="mb-0">
            # Ilość zgłoszeń z podziałem na dziedziny nieprawidłowości - {{ $selected_year }} rok
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
        <div class="card-body">
            <div class="chart-container">
                <canvas id="pie-chart_3" style="position: relative; height:40vh;"></canvas>
            </div>
        </div>
      </div>
    </div>


  </div>









    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

  <!-- javascript -->

<script>

    //options
    const todaysDate = new Date();
    var year = todaysDate.getFullYear();
    var SelectYear = document.getElementById("year_stat").value;
    if(SelectYear){
        var year = SelectYear;
    }else{
        var year = todaysDate.getFullYear();
    }


    $(function(){


        //get the pie chart canvas
        var cData = JSON.parse(``);
        var ctx = $("#pie-chart_1");

        //pie chart data
        var data = {
            labels: ["Styczeń","Luty","Marzec","Kwiecień","Maj","Czerwiec","Lipiec","Sierpień","Wrzesień","Październik","Listopad","Grudzień"],
            backgroundColor: '#ffffff',
            datasets: [
            {
                data: cData.data,
                backgroundColor: [
                    'rgba(97, 158, 214, 0.2)',
                    'rgba(247, 208, 39, 0.2)',
                    'rgba(107, 165, 71, 0.2)',
                    'rgba(228, 143, 27, 0.2)',
                    'rgba(183, 126, 163, 0.2)',
                    'rgba(230, 67, 69, 0.2)',
                    'rgba(0, 98, 138, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(96, 206, 237, 0.2)',
                    'rgba(251, 197, 67, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(230, 105, 110, 0.2)'
                ],
                borderColor: [
                    'rgb(97, 158, 214)',
                    'rgb(247, 208, 39)',
                    'rgb(107, 165, 71)',
                    'rgb(228, 143, 27)',
                    'rgb(183, 126, 163)',
                    'rgb(230, 67, 69)',
                    'rgb(0, 98, 138)',
                    'rgb(255, 205, 86)',
                    'rgb(96, 206, 237)',
                    'rgb(251, 197, 67)',
                    'rgb(255, 99, 132)',
                    'rgb(230, 105, 110)'
                ],
                borderWidth: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                categoryPercentage: 0.1
            }
            ]
        };



        var options = {
            responsive: true,
            maintainAspectRatio: false,
            title: {
            display: true,
            aspectRatio: 4,
            position: "top",
            text: "Ilość zgłoszeń w poszczególnych miesiącach - " + year + " rok",
            fontSize: 18,
            fontColor: "#111"
            },
            scales: {
                yAxes: [{
                    display: true,
                    stepSize: 1
                }]
            },
            legend: {
                display: false,
                position: "bottom",
                labels: {
                    fontColor: "#333",
                    fontSize: 16
                }
            },
            events: false,
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            },
            animation: {
                duration: 1,
                onComplete: function () {
                    var chartInstance = this.chart,
                        ctx = chartInstance.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            }
        };

        // type: pie, bar, horizontalBar
        //create Pie Chart class object
        var chart1 = new Chart(ctx, {
            type: "bar",
            data: data,
            options: options
        });

    });
</script>

<!-- /* Chart 2 ---------------------------------- */ -->

<script>
$(function(){


    //get the pie chart canvas
    var cData = JSON.parse(``);
    var ctx = $("#pie-chart_2");

    //pie chart data
    var data = {
        labels: cData.label,
        backgroundColor: '#ffffff',
        datasets: [
        {
            data: cData.data,
            backgroundColor: [
                'rgba(97, 158, 214, 0.2)',
                'rgba(247, 208, 39, 0.2)',
                'rgba(107, 165, 71, 0.2)',
                'rgba(228, 143, 27, 0.2)',
                'rgba(183, 126, 163, 0.2)',
                'rgba(230, 67, 69, 0.2)',
                'rgba(0, 98, 138, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(96, 206, 237, 0.2)',
                'rgba(251, 197, 67, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(230, 105, 110, 0.2)',
                'rgba(230, 105, 110, 0.2)'
            ],
            borderColor: [
                'rgb(97, 158, 214)',
                'rgb(247, 208, 39)',
                'rgb(107, 165, 71)',
                'rgb(228, 143, 27)',
                'rgb(183, 126, 163)',
                'rgb(230, 67, 69)',
                'rgb(0, 98, 138)',
                'rgb(255, 205, 86)',
                'rgb(96, 206, 237)',
                'rgb(251, 197, 67)',
                'rgb(255, 99, 132)',
                'rgb(230, 105, 110)',
                'rgb(230, 105, 110)'
            ],
            borderWidth: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            categoryPercentage: 0.1
        }
        ]
    };


    var options = {
        responsive: true,
        maintainAspectRatio: false,
        title: {
        display: true,
        aspectRatio: 4,
        position: "top",
        text: "Ilość zgłoszeń z podziałem na grupy osób zgłaszających - " + year + " rok",
        fontSize: 18,
        fontColor: "#111"
        },
        scales: {
            yAxes: [{
                display: true,
                stepSize: 1
            }]
        },
        legend: {
            display: false,
            position: "bottom",
            labels: {
                fontColor: "#333",
                fontSize: 16
            }
        },
        events: false,
        tooltips: {
            enabled: false
        },
        hover: {
            animationDuration: 1
        },
        animation: {
            duration: 1,
            onComplete: function () {
                var chartInstance = this.chart,
                    ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        var data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                    });
                });
            }
        }

    };

    // type: pie, bar, horizontalBar
    //create Pie Chart class object
    var chart2 = new Chart(ctx, {
        type: "bar",
        data: data,
        options: options
    });

});
</script>

<!-- /* Chart 3 ---------------------------------- */ -->

<script>
$(function(){

    //get the pie chart canvas
    var cData = JSON.parse(``);
    var ctx = $("#pie-chart_3");

    //pie chart data
    var data = {
        labels: cData.label,
        backgroundColor: '#ffffff',
        showDatapoints: true,
        datasets: [
        {
            data: cData.data,
            backgroundColor: [
                'rgba(97, 158, 214, 0.2)',
                'rgba(230, 105, 110, 0.2)',
                'rgba(247, 208, 39, 0.2)',
                'rgba(107, 165, 71, 0.2)',
                'rgba(228, 143, 27, 0.2)',
                'rgba(183, 126, 163, 0.2)',
                'rgba(230, 67, 69, 0.2)',
                'rgba(0, 98, 138, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(96, 206, 237, 0.2)',
                'rgba(251, 197, 67, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(230, 105, 110, 0.2)'
            ],
            borderColor: [
                'rgb(97, 158, 214)',
                'rgb(230, 105, 110)',
                'rgb(247, 208, 39)',
                'rgb(107, 165, 71)',
                'rgb(228, 143, 27)',
                'rgb(183, 126, 163)',
                'rgb(230, 67, 69)',
                'rgb(0, 98, 138)',
                'rgb(255, 205, 86)',
                'rgb(96, 206, 237)',
                'rgb(251, 197, 67)',
                'rgb(255, 99, 132)',
                'rgb(230, 105, 110)'
            ],
            borderWidth: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            categoryPercentage: 0.1
        }
        ]
    };


    var options = {
        responsive: true,
        maintainAspectRatio: false,
        title: {
        display: true,
        aspectRatio: 4,
        position: "top",
        text: "Ilość zgłoszeń z podziałem na dziedziny nieprawidłowości - " + year + " rok",
        fontSize: 18,
        fontColor: "#111"
        },
        legend: {
            display: true,
            position: "right",
            labels: {
                generateLabels: function(chart) {
                    var data = chart.data;
                    if (data.labels.length && data.datasets.length) {
                        return data.labels.map(function(label, i) {
                            var meta = chart.getDatasetMeta(0);
                            var ds = data.datasets[0];
                            var arc = meta.data[i];
                            var custom = arc && arc.custom || {};
                            var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                            var arcOpts = chart.options.elements.arc;
                            var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                            var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                            var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
                     var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];
                            return {
                                text: "(" + value + ") " + label,
                                fillStyle: fill,
                                strokeStyle: stroke,
                                lineWidth: bw,
                                hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
                                index: i
                            };
                        });
                    } else {
                        return [];
                    }
                }
            }
        },
        tooltips: {
            enabled: true
        }

    };

    // type: pie, bar, horizontalBar
    //create Pie Chart class object
    var chart3 = new Chart(ctx, {
        type: "pie",
        data: data,
        options: options
    });

});


</script>








    </div>
    <!-- /* Wyświetlanie Kafelków - KONIEC */ -->





</div>
<!-- /* ------------------------------------------------------------------------------------------------------------ */ -->



<!-- Sekcja nr 1 - KONIEC -->


@endsection




<!-- Navbar section -->
@section('navbar')

@include('sites.syg._navbar_syg')

    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">
        Statystyki
    </span>


@endsection

<!-- Menu section -->
@section('menu')
    @include('sites.syg.menu_syg')
@endsection