{% extends 'admin/admin_base.html.twig' %}
{% import "admin/Macros/Buttons/_button.html.twig" as button %}

{% set page_title = "Statistik" %}
{% block title %}{{ page_title }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css"
          href="{{ asset('assets/admin/app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/admin/app-assets/css/style.bundle.css') }}">
{% endblock %}
{% block breadcrumb %}
    {# {% set fields = [  { 'name': page_title }] %}
     {% include 'admin/Common/_breadcrumb.html.twig' %} #}
{% endblock %}
{% block body %}
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-lg-5">
                        <div class="row mb-4">
                            <div class="col-lg-3">
                                <span class="label">Datum:</span>
                            </div>
                            <div class="col-lg-9">
                                <div class="form-row">
                                    <div class="col">
                                        <input type="text" name="datumStart"
                                               class="form-control form-control-sm font-small-3 flat-picker inp-filter"
                                               data-type="datumStart">
                                    </div>
                                    <div class="col">
                                        <input type="text" name="datumEnd"
                                               class="form-control form-control-sm font-small-3 flat-picker inp-filter"
                                               data-type="datumEnd">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-lg-3">
                                <span class="label">Prüfungstyp:</span>
                            </div>
                            <div class="col-lg-9">
                                <select name="exams" class="form-control select2 exams" id="exams">
                                    {% for exam in exams %}
                                        <option value="{{ exam.id }}">{{ exam.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-lg-3">
                                <span class="label">Fach:</span>
                            </div>
                            <div class="col-lg-9">
                                <select name="lessons" class="form-control select2 inp-filter" id="lessons"></select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto mx-auto">
                        <div class="row" id="totalAnzahlModule">
                            <div class="col-12 text-center">
                                <span class="label">Total Anzahl Module:</span>
                                <span class="value">{{ moduls|length }}</span>
                            </div>
                        </div>
                        <div class="row d-none" id="anzahlModule">
                            <div class="col-auto">
                                <span class="label">SET - Langzeitgymnasium Mathematik:</span>
                                <span class="value">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="stDis">
        {% include 'admin/Main/Statistik/_statistik_modul.html.twig' %}
    </div>

{% endblock %}
{% block javascripts %}
    <script>
        let x = $('#exams').children('option:first-child').val();
        $('.exams').on('change', function () {
            Panel.contentLoader_start();
            let exam = $(this).find(':selected').val();
            $.ajax({
                type: 'POST',
                url: '{{ path('admin_ajax_statistik_exam_lesson') }}',
                data: {'exam': exam},
                success: function (data) {
                    Panel.contentLoader_close();
                    let option = '';

                    option += '<option value="0">alle</option>';
                    $.each(data, function (i) {
                        option += '<option value="' + data[i].lessonId + '">' + data[i].lessonName + '</option>';
                    });

                    $('#lessons').removeAttr('disabled').html(option).trigger('change');
                    $('#lesons').prop('disabled', false);

                }
            });
        }).val(x).trigger('change');


        $('.inp-filter').on('change', function () {
            Panel.contentLoader_start();
            let lesson = $('#lessons').val();
            let exam = $('.exams').val();

            let $datumStart = $(".inp-filter[data-type='datumStart']");
            let $datumEnd = $(".inp-filter[data-type='datumEnd']");
            let date = {datumStart: $datumStart.val(), datumEnd: $datumEnd.val()};

            $.ajax({
                type: 'POST',
                url: '{{ path('admin_statistik_bw_item') }}',
                data: {lesson: lesson, exam: exam, date: date},
                success: function (data) {
                    let $tbody = $("#statistikTable > tbody");
                    let $dis = $("#stDis");
                    let $anzahlModule = $("#anzahlModule");

                    $dis.html(data);

                    $("#totalAnzahlModule .value").text($tbody.children().length);

                    $anzahlModule.nextAll().remove();

                    $("#lessons option").filter(function () {
                        return $(this).val() !== "0"
                    }).each(function () {
                        let $cloneAnzahlModule = $anzahlModule.first().clone();
                        $cloneAnzahlModule.attr("id", $cloneAnzahlModule.attr("id") + $(this).text());
                        $cloneAnzahlModule.find(".label").text("SET - " + $("#exams option:selected").text() + " " + $(this).text() + ":");
                        $cloneAnzahlModule.removeClass("d-none");
                        $anzahlModule.after($cloneAnzahlModule);
                    });

                    $tbody.children().each(function () {
                        let module = this.dataset.modul;
                        let $module = $("#anzahlModule" + module);
                        let currentValue = parseInt($module.find(".value").text());
                        $module.find(".value").text(currentValue + 1);
                    });

                    Panel.contentLoader_close();
                }
            });
        });

    </script>
{% endblock %}
{% block head_javascripts %}
    <script src="{{ asset('assets/admin/app-assets/vendors/js/extensions/moment.min.js') }}"></script>
    {% include 'admin/Common/_datatable_all_js.html.twig' %}
{% endblock %}