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

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

    {{ encore_entry_link_tags('forms') }}
{% endblock %}

{% block title %}
    {{ 'main.config.breadcrumbs.title' | trans }}
{% endblock %}

{% block breadcrumbs_current %}{{ 'main.config.breadcrumbs.title' | trans }}{% endblock %}

{% block breadcrumbs %}
    <li class="c-breadcrumbs__item"><a class="c-breadcrumbs__link" href="{{ path('dashboard') }}">{{ 'main.app.name' | trans }}</a></li>
    <li class="c-breadcrumbs__item">{{ 'main.config.breadcrumbs.configuracion' | trans }}</li>
{% endblock %}

{% block wrapper -%}

    <nav class="o-tabs">
        <ul class="o-tabs__list tabs">
            <li class="o-tabs__item tab active years"><a class="active" href="#years"><i class="u-icon--calendar"></i> {{ 'main.config.tabs.years' | trans }}</a></li>
            <li class="o-tabs__item tab categories"><a href="#categories"><i class="u-icon--bookmark"></i> {{ 'main.config.tabs.categories' | trans }}</a></li>
            <li class="o-tabs__item tab stages"><a href="#stages"><i class="u-icon--package"></i> {{ 'main.config.tabs.stages' | trans }}</a></li>
            <li class="o-tabs__item tab technologies"><a href="#technologies"><i class="u-icon--monitor"></i> {{ 'main.config.tabs.technologies' | trans }}</a></li>
        </ul>
    </nav>

    {% include 'config/tabs/years.html.twig' %}
    {% include 'config/tabs/categories.html.twig' %}
    {% include 'config/tabs/stages.html.twig' %}
    {% include 'config/tabs/technologies.html.twig' %}

    <div class="u-hide">
        {{ form(form_foo) }}
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('tabs') }}

    {{ encore_entry_script_tags('forms') }}

    <script>
        $(document).ready(function ($) {
            $('.js-config-delete').click(function (event) {
                event.preventDefault();
                form = $(this).data('form');

                DeleteDialog.fire({
                    title: $(this).data('modal-title'),
                    text: $(this).data('modal-text'),
                    confirmButtonText: '{{ 'main.default.actions.delete' | trans }}',
                    cancelButtonText: '{{ 'main.default.actions.cancelar' | trans }}'
                }).then((result) => {
                    if (result.value) {
                        $('#' + form).submit();
                    }
                });
            });

            $('.js-launch-dialog').click(function (event) {
                event.preventDefault();
                formURL = $(this).data('form-url');
                modalTitle = $(this).data('modal-title');
                modalText = $(this).data('modal-text');
                modalConfirmText = $(this).data('modal-confirm-text');

                $.ajax({
                    url: formURL,
                    type: "GET",
                    dataType: "json",
                    async: true,
                    success: function (data)
                    {
                        LaunchDialog.fire({
                            title: modalTitle,
                            text: modalText,
                            html: data.response,
                            confirmButtonText: modalConfirmText,
                            cancelButtonText: '{{ 'main.default.actions.cancelar' | trans }}'
                        });
                    }
                });
            });

            $('.js-switch-unique').click(function (event) {
                event.preventDefault();

                var table = $(this).closest('.o-table');

                table.find('.o-switch').each(function(i, obj) {
                    $(obj).find('input[type="checkbox"]').prop('checked', false);
                });

                $(this).find('input[type="checkbox"]').prop('checked', true);

                $.ajax({
                    url:$(this).data('url'),
                    type: "POST",
                    dataType: "json",
                    async: true,
                    success: function (data)
                    {
                        console.log(data)
                    }
                });

                Toast.fire({
                    title: $(this).data('title')
                });
            });
        });
    </script>
{% endblock %}