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

{% block title %}Statistic form{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" href="{{ asset('resources/vendors/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('resources/vendors/zwicon/zwicon.min.css') }}">
{% endblock %}

{% block content %}

<header class="content__title">
    <h1>Statistics</h1>
</header>

    <div class="card">
        <div class="card-body">
            <button type="button" class="btn btn-theme statistic-form-toggle btn-a active">Privatperson</button>
            <button type="button" class="btn btn-theme statistic-form-toggle btn-b">Organisation</button>
        </div>
    </div>

    {% for formType, typeData in formData %}
    <div class="statistic-content"{% if loop.last %} style="display: none;"{% endif %}>
        <form action="{{ path('statistic_form_save', {type: statisticType}) }}" method="post" class="needs-validation" novalidate>
            <input type="hidden" name="formType" value="{{ formType }}" />
            <div class="row">

                {% for column in typeData.order %}
                <div class="col-lg-4">
                    {% for sectionKey in column %}
                        {% set section = typeData.sections[sectionKey] %}

                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">{{ section.label }}</h4>

                                {% for row in section.rows %}
                                    {% set uniqueElementId = row.uniqueId %}

                                    {% if row.type == constant('App\\Controller\\Statistics\\StatisticController::INPUT_TYPE_DATEPICKER') %}

                                        <div class="form-group">
                                            <label>{{ row.label }}</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="zwicon-calendar-never"></i></span>
                                                </div>
                                                <input type="text" class="form-control" id="{{ uniqueElementId }}" name="{{ row.name }}" placeholder="{{ row.placeholder }}" required>
                                                <div class="invalid-feedback">{{ row.error }}</div>
                                            </div>
                                        </div>

                                        <script>
                                            document.addEventListener('DOMContentLoaded', function(){
                                                $('#{{ uniqueElementId }}').flatpickr({
                                                    enableTime:!1,
                                                    nextArrow:'<i class="zwicon-arrow-right" />',
                                                    prevArrow:'<i class="zwicon-arrow-left" />',
                                                    dateFormat: "d.m.Y",
                                                    minDate: "01.01.{{ row.year }}",
                                                    maxDate: "31.12.{{ row.year }}",
                                                    defaultDate: "{{ 'now'|date('d.m.Y') }}"
                                                });
                                                $('#{{ uniqueElementId }}').prop('readonly', false);
                                            });
                                        </script>

                                    {% elseif row.type == constant('App\\Controller\\Statistics\\StatisticController::INPUT_TYPE_RADIO') %}

                                        {% if row.label %}
                                        <p style="">{{ row.label }}</p>
                                        {% endif %}
                                        {% for key, option in row.options %}
                                        <div class="custom-control custom-radio{# custom-control-inline#}">
                                            <input type="radio" id="{{ uniqueElementId }}_{{ key }}" name="{{ row.name }}" value="{{ key }}" class="custom-control-input" required>
                                            <label class="custom-control-label" for="{{ uniqueElementId }}_{{ key }}">{{ option }}</label>
                                            {% if loop.last %}
                                                <div class="invalid-feedback">{{ row.error }}</div>
                                            {% endif %}
                                        </div>
                                        {% endfor %}
                                        <div class="mb-4"></div>

                                    {% elseif row.type == constant('App\\Controller\\Statistics\\StatisticController::INPUT_TYPE_LOCATION') %}

                                        <p style="">{{ row.label }}</p>
                                        {% for option in row.options %}
                                            <div class="custom-control custom-radio{# custom-control-inline#} radio-{{ uniqueElementId }}">
                                                <input type="radio" id="{{ uniqueElementId }}_{{ option.name }}" name="{{ row.name }}" value="{{ option.name }}" data-hasselection="{{ option.hasSelection }}" class="custom-control-input" required>
                                                <label class="custom-control-label" for="{{ uniqueElementId }}_{{ option.name }}">{{ option.label }}</label>
                                                {% if loop.last %}
                                                    <div class="invalid-feedback">{{ row.error }}</div>
                                                {% endif %}
                                            </div>
                                            {% if option.hasSelection %}
                                                <div class="form-group">
                                                    <select class="form-control radio-selection-{{ uniqueElementId }} radio-selection-{{ uniqueElementId }}-{{ option.name }}" name="{{ option.name }}_selection" disabled required>
                                                        {% for suboptionKey, suboption in option.options %}
                                                            <option value="{{ suboptionKey }}">{{ suboption }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                        <div class="mb-4"></div>

                                        <script>
                                            document.addEventListener('DOMContentLoaded', function(){
                                                $('.radio-{{ uniqueElementId }} :input').click(function(){
                                                    $('.radio-selection-{{ uniqueElementId }}').attr('disabled', true);
                                                    $('.radio-selection-{{ uniqueElementId }}').val(0);
                                                    if ($(this).data('hasselection')) {
                                                        var radioName = $(this).val();
                                                        $('.radio-selection-{{ uniqueElementId }}-'+radioName).attr('disabled', false);
                                                    }
                                                });
                                            });
                                        </script>

                                    {% elseif row.type == constant('App\\Controller\\Statistics\\StatisticController::INPUT_TYPE_CHECKBOX') %}

                                        <div class="custom-control custom-checkbox mb-1">
                                            <input type="checkbox" class="custom-control-input" id="customCheckInline-{{ uniqueElementId }}" name="{{ row.name }}">
                                            <label class="custom-control-label" for="customCheckInline-{{ uniqueElementId }}">{{ row.label }}</label>
                                        </div>

                                    {% elseif row.type == constant('App\\Controller\\Statistics\\StatisticController::INPUT_TYPE_CHECKBOX_TEXT') %}

                                        <div class="custom-control custom-checkbox custom-control-inline mb-1">
                                            <input type="checkbox" class="custom-control-input checkbox-{{ uniqueElementId }}" id="customCheckInline-{{ uniqueElementId }}" name="{{ row.name }}">
                                            <label class="custom-control-label" for="customCheckInline-{{ uniqueElementId }}">{{ row.label }}</label>
                                        </div>
                                        <input type="text" class="form-control checkbox-selection-{{ uniqueElementId }} mb-4" name="{{ row.input.name }}" placeholder="{{ row.input.placeholder }}" disabled>

                                        <script>
                                            document.addEventListener('DOMContentLoaded', function(){
                                                $('.checkbox-{{ uniqueElementId }}').click(function(){
                                                    $('.checkbox-selection-{{ uniqueElementId }}').attr('disabled', true);
                                                    $('.checkbox-selection-{{ uniqueElementId }}').val('');
                                                    if ($(this).is(':checked')) {
                                                        $('.checkbox-selection-{{ uniqueElementId }}').attr('disabled', false);
                                                    }
                                                });
                                            });
                                        </script>

                                    {% endif %}
                                {% endfor %}

                            </div>
                        </div>

                    {% endfor %}


                    {% if loop.last %}
                        <div class="row">
                            <div class="col-lg-4">
                                <button type="submit" class="btn btn-theme">Speichern</button>
                            </div>
                        </div>
                    {% endif %}
                </div>
                {% endfor %}

            </div>
        </form>
    </div>
    {% endfor %}

{% endblock %}

{% block javascripts %}
{{ parent() }}

    <script src="{{ asset('resources/vendors/flatpickr/flatpickr.min.js') }}"></script>

    <script>
        $('.statistic-form-toggle').click(function(){
            if (!$(this).hasClass('active')) {
                var partnerBtn = $(this).hasClass('btn-a') ? $('.statistic-form-toggle.btn-b') : $('.statistic-form-toggle.btn-a');
                $('.statistic-content').toggle();
                $(this).addClass('active');

                partnerBtn.removeClass('active');
            }

            return false;
        });

        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {

                            var list = form.querySelectorAll(':invalid');
                            console.log(list);

                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

    </script>

{% endblock %}