{% extends 'base.html.twig' %}

{% block title %}
    {{ parent() }} -  {{ 'statistics.origin.title'|trans }}
{% endblock %}

{% block description %}
    {{ parent() }} -  {{ 'statistics.origin.title'|trans }}
{% endblock %}

{# create list of localized month #}
{% set monthList = [] %}
{% for i in 1..12 %}
    {% set monthList = monthList|merge([getLocalizedMonth(i, 'MMMM', app.request.locale)]) %}
{% endfor %}

{% block content %}
    <div class="container">
        <div class="row justify-content-end">
            <div class="col-md-3">
                <form id="table-filter" role="form">                   
                    <select id="objects" name="object" class="form-select">
                        <option value="all">{{ 'reservation.objects.all'|trans }}</option>
                        {% for object in objects %}
                            <option value="{{ object.id }}"{% if object.id == objectId %} selected{% endif %}>{{ object.name }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>
        <div class="row justify-content-center mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        {{ 'statistics.origin.monthly'|trans }}
                         <i id="refreshMonthly" class="fas fa-sync-alt float-end" aria-hidden="true" 
                            style="cursor: pointer;" onclick="drawMonthlyChart();"></i>
                    </div>
                    <div class="card-body">
                        <div id="monthlyChart" style="height: 300px"><img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" /></div>
                    </div>
                    <div class="card-footer pt-0">
                        <form role="form">
                            <div class="row justify-content-md-center">
                                <div class="col-md-3">
                                    <select id="monthlyStart" name="monthtlyStart" class="form-select">
                                        {% set currentMonth = 'now'|date('n') %}
                                        {% for month in monthList %}
                                            <option value="{{ loop.index }}"{%if loop.index == currentMonth %} selected="selected"{% endif %}>{{ month }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select id="monthlyStartYear" name="monthtlyStartYear" class="form-select">
                                        {% set currentYear = 'now'|date('Y') %}
                                        {% for i in minYear..maxYear %}
                                            <option value="{{ i }}"{%if i == currentYear %} selected="selected"{% endif %}>{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-1 col-form-label text-center">
                                    -
                                </div>
                                <div class="col-md-3">
                                    <select id="monthlyEnd" name="monthtlyEnd" class="form-select">
                                        {% for month in monthList %}
                                            <option value="{{ loop.index }}"{%if loop.index == currentMonth %} selected="selected"{% endif %}>{{ month }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <select id="monthlyEndYear" name="monthtlyEndYear" class="form-select">
                                        {% for i in minYear..maxYear %}
                                            <option value="{{ i }}"{%if i == currentYear %} selected="selected"{% endif %}>{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        {{ 'statistics.origin.yearly'|trans }}
                         <i id="refreshYearly" class="fas fa-sync-alt float-end" aria-hidden="true" 
                            style="cursor: pointer;" onclick="drawYearlyChart();"></i>
                    </div>
                    <div class="card-body">
                        <div id="yearlyChart" style="height: 300px"><img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" /></div>
                    </div>
                    <div class="card-footer pt-0">
                        <form role="form">
                            <div class="row">
                                <div class="col-md-2">
                                    <select id="yearlyStartYear" name="yearlyStartYear" class="form-select">
                                        {% for i in minYear..maxYear %}
                                            <option value="{{ i }}"{%if i == currentYear %} selected="selected"{% endif %}>{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-1 col-form-label text-center">
                                    -
                                </div>
                                <div class="col-md-2">
                                    <select id="yearlyEndYear" name="yearlyEndYear" class="form-select">
                                        {% for i in minYear..maxYear %}
                                            <option value="{{ i }}"{%if i == currentYear %} selected="selected"{% endif %}>{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id='tooltip'></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/jquery.flot.min.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/jquery.flot.pie.min.js"></script>
    <script type="text/javascript" src="{{ app.request.basepath }}/resources/js/jquery.flot.resize.js"></script>
    <script>

    $(document).ready(function () {
        
        $("#objects").change(function () {
            drawMonthlyChart();
            drawYearlyChart();
        });
        
        $("#monthlyStart, #monthlyEnd, #monthlyStartYear, #monthlyEndYear").change(function () {
            drawMonthlyChart();
        });
        
        $("#refreshMonthly").click(function () {
            drawMonthlyChart();
        });
        
        $("#yearlyStartYear, #yearlyEndYear").change(function () {
            drawYearlyChart();
        });
        
        $("#refreshYearly").click(function () {
            drawYearlyChart();
        });
        
        drawMonthlyChart();
        drawYearlyChart();
    });
        
    function drawMonthlyChart() {
        var objId = $("#objects").val();
        var start = $("#monthlyStart").val();
        var end = $("#monthlyEnd").val();
        var startYear = $("#monthlyStartYear").val();
        var endYear = $("#monthlyEndYear").val();
        $("#monthlyChart").html('<img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />');
        $.ajax({
            url: '{{ path('statistics.origin.monthtly') }}',
            data: {monthStart: start, monthEnd: end, yearStart: startYear, yearEnd: endYear, objectId: objId}
        }).done(function (values) {
            
            
            $.plot($("#monthlyChart"), values, {
                series: {
                    pie: {
                        show: true,
                        label: {
                            show: true,
                            radius: 1,
                            formatter: labelFormatter,
                            background: {
                                opacity: 0.8
                            }
                        }
                    }
                }
            }); 
        });
    }
    
    function drawYearlyChart() {
        var objId = $("#objects").val();
        var startYear = $("#yearlyStartYear").val();
        var endYear = $("#yearlyEndYear").val();
        $("#yearlyChart").html('<img src="{{ app.request.basepath }}/resources/images/ajax-loader.gif" />');
        $.ajax({
            url: '{{ path('statistics.origin.yearly') }}',
            data: {yearStart: startYear, yearEnd: endYear, objectId: objId}
        }).done(function (values) {

            $.plot($("#yearlyChart"), values, {
                series: {
                    pie: {
                        show: true,
                        label: {
                            show: true,
                            radius: 1,
                            formatter: labelFormatter,
                            background: {
                                opacity: 0.8
                            }
                        }
                    }
                }
            }); 
        });
    }
    
    function labelFormatter(label, series) {
        return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + Math.round(series.percent) + "%</div>";
    }
    </script>
{% endblock %}