{% extends "propesqBundle::layout.html.twig" %}

{% block stylesheets %}
    <!-- TODO: verificar caminho do arquivo -->
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all"/>
{% endblock %}

{% block content %}
    <div id="form-container">
        <div class="title">
            <h2>
                Gerenciamento de FeaturesFlags
            </h2>
        </div>
        <form class="ajax form-horizontal">
            <fieldset style="float: left; margin: 10px;">

                <div class="control-group span6">
                    {% for feature in features %}
                        {% if 'filtro' not in feature.id and 'header' not in feature.id %}
                            <label class="control-label required">{{ feature.id | trans |raw }}</label>
                            <div class="controls">
                                {% if 'exibir' in feature.id %}
                                    <select id="{{ feature.id }}" class="cemporcento field-to-save" required>
                                        <option value="">Selecione uma opção</option>
                                        {% for option in exibirOptions %}
                                            <option value="{{ option.value }}" {% if feature.txt_valor == option.value %} selected="selected" {% endif %}>{{ option.name }}</option>
                                        {% endfor %}
                                    </select>
                                {% elseif 'habilitar' in feature.id %}
                                    <select id="{{ feature.id }}" class="cemporcento field-to-save">
                                        <option value="">Selecione uma opção</option>
                                        {% if 'destino_producao' in feature.id %}
                                            {% for option in destinoProducaoOptions %}
                                                <option value="{{ option.value }}" {% if feature.txt_valor == option.value %} selected="selected" {% endif %}>{{ option.name }}</option>
                                            {% endfor %}
                                        {% elseif 'ambiente_origem_producao' in feature.id %}
                                            {% for option in ambienteOrigemProducaoOptions %}
                                                <option value="{{ option.value }}" {% if feature.txt_valor == option.value %} selected="selected" {% endif %}>{{ option.name }}</option>
                                            {% endfor %}
                                        {% else %}
                                            {% for option in habilitarOptions %}
                                                <option value="{{ option.value }}" {% if feature.txt_valor == option.value %} selected="selected" {% endif %}>{{ option.name }}</option>
                                            {% endfor %}
                                        {% endif %}
                                    </select>
                                {% else %}
                                    <input id="{{ feature.id }}" class="field-to-save cemporcento"
                                           value="{{ feature.txt_valor }}"/>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>



            </fieldset>
            <div class="div-actions">
                <a id="save" class="btn btn-primary">{{ 'acao.salvar'|trans }}</a>
                <a href="{{ path('featureflag') }}" title="{{ 'acao.cancelar'|trans }}">{{ 'acao.cancelar'|trans }}</a>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function () {

            // Controla o comportamento do select e input ao carregar o documento ele verifica se há campos vazios, caso haja ele aplica a mascara indicando
            // preenchimento obrigatório
            // Também durante o preencimento ele verifica se os campos foram deixados vazios bloquendo o subimit     

            var selects = $('select');
            var inputs = $('.controls input');
            var saveButton = $('#save');

            function updateValidation() {
                var isValid = true;

                selects.each(function () {
                var $select = $(this);
                if ($select.val() === '') {
                    $select.css('border', '1px solid red').css('color', 'red');
                    isValid = false;
                } else {
                    $select.css('border', '1px solid #cccccc').css('color', '#555555');
                }
                });

                inputs.each(function () {
                var $input = $(this);
                if ($input.val() === '') {
                    $input.css('border', '1px solid red');
                    isValid = false;
                } else {
                    $input.css('border', '1px solid #cccccc');
                }
                });

                if (isValid) {
                saveButton.removeClass('disabled').css('pointer-events', 'auto');
                } else {
                saveButton.addClass('disabled').css('pointer-events', 'none');
                }
            }

            selects.on('click', updateValidation);
            inputs.on('click change', updateValidation);
            inputs.on('keydown mouseleave', function () {
                updateValidation();
            });

            updateValidation();

            var $featuresToSave = [];
            $('#save').on('click', function () {
                $('#save').addClass('disabled');

                var fields = $('.form-horizontal').find('.field-to-save');
                
                fields.each(function (index) {       
                    var field = fields[index];
                    $featuresToSave[index] = [];
                    $featuresToSave[index][0] = $(field).attr('id');
                    $featuresToSave[index][1] = $(field).val();
                });

                var request = $.ajax({
                    type: "POST",
                    url: "{{ path('featureflag_save') }}",
                    data: {features: $featuresToSave},
                    beforeSend: function () {
                        loader('.form-horizontal', false);
                    }
                });
                request.done(function (msg) {
                    loader('.form-horizontal', true);
                    window.location.reload();
                });
            });
        });
    </script>
{% endblock %}