{% 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" />
    <style>
        .hidden-label .control-label{
            display: none;
        }
    </style>
{% endblock %}

{% block content %}
<div id="form-container">
    <div class="title">
        <h2><a name='editar' href='#edicao'>{{'cabecalho.alterar.configuracao'|trans}}</a></h2>
    </div>    

    {{ form_errors(edit_form) }}

    <form id="formulario" class="form-horizontal" action="{{ path('configuracao_update') }}" method="post" enctype="multipart/form-data">
        {{ form_widget(edit_form._token) }}
        <div class="row-fluid">
            <div class="span12">
                <fieldset>
                    {% for configuracaoSistema in edit_form.configuracoes %}
                        {% if(configuracaoSistema.id.vars.value != 'logo' and 'feature_flag_' not in  configuracaoSistema.id.vars.value ) %}
                            {{ _self.configuracao_prototype(configuracaoSistema) }}
                         {% endif %}
                    {% endfor %}

                    {% for configuracaoSistema in edit_form.configuracoes %}
                        {% if(configuracaoSistema.id.vars.value == 'logo') %}
                            {{ _self.configuracao_image_prototype(configuracaoSistema) }}
                        {% endif %}
                    {% endfor %}
                </fieldset>
            </div>
        </div>


        {% if alertMessage is not null %}
            <fieldset style="float: left; margin: 10px;">
                <div id="datDescargaInfo" hidden="" style="color: rgb(185, 74, 72); height: 40px; max-width: 390px; display: block;">
                    <div class="alert alert-warning" style="padding: 8px 10px 8px 14px;">
                        Os dados serão atualizados no período da noite.
                    </div>
                </div>
            </fieldset>
        {% endif %}
        <div class="div-actions">
            <button type="submit" class="btn btn-primary">{{'acao.salvar'|trans}}</button>
            <a class="" href="{{ path('configuracao') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
        </div>
    </form>
    <script>
        $('form').submit(function(e){
            var isValido = true;

            /*Validar: Datas espécie*/
            $id_inicio = $('.data_especie_inicio').find('input').attr('id');
            $id_fim = $('.data_especie_final').find('input').attr('id');
            if(!testaData($id_inicio, '<=', $id_fim) || !testaData($id_fim, '>=', $id_inicio)){
                isValido = false;
            }
            /*Validar: Datas relatório privado*/
            $id_inicio = $('.data_privado_inicio').find('input').attr('id');
            $id_fim = $('.data_privado_final').find('input').attr('id');
            if(!testaData($id_inicio, '<=', $id_fim) || !testaData($id_fim, '>=', $id_inicio)){
                isValido = false;
            }
            /*Validar: Datas relatório público*/
            $id_inicio = $('.data_publico_inicio').find('input').attr('id');
            $id_fim = $('.data_publico_final').find('input').attr('id');
            if(!testaData($id_inicio, '<=', $id_fim) || !testaData($id_fim, '>=', $id_inicio)){
                isValido = false;
            }

            if(!isValido){
                $('html,body').animate({scrollTop: ($($(".alert-error").first()).offset().top) - 35}, 1000);
            }

            return isValido;
        });
    </script>
</div>
    </div>
{% endblock %}

{% macro configuracao_prototype(configuracao) %}
    <fieldset style="float: left; margin: 10px;">
        <legend style="font-size: 16px">{{ configuracao.id.vars.value|trans }}</legend>
        <div class="row-fluid">
            {% if configuracao.id.vars.value == 'email_alertas' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.txtValor.vars.name }}" class=" control-label">
                    </label>
                    <div class="controls">
                        {{ form_widget(configuracao.txtValor,{ 'required': false , 'attr': {'class': 'input-xlarge',"onchange": "vEmail(this)","onkeyup": "vEmail(this)"} }) }}
                        <span class="help-inline">{{ form_errors(configuracao.txtValor) }}</span>
                    </div>
                </div>
            {% elseif configuracao.txtValor.vars.value != '' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.txtValor.vars.name }}" class="required control-label">
                        {{ 'value'|trans }}
                    </label>
                    <div class="controls">
                        {{ form_widget(configuracao.txtValor,{ 'attr': {'class': 'input-xlarge'} }) }}
                        <span class="help-inline">{{ form_errors(configuracao.txtValor) }}</span>
                    </div>
                </div>
            {% endif %}
            {% if configuracao.datInicio.vars.value != '' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.datInicio.vars.id }}" class="required control-label">
                        {{ 'initial_date'|trans }}
                    </label>
                    <div class="controls {{ configuracao.id.vars.value~'_inicio' }}">
                        {{ form_widget(configuracao.datInicio,{ 'attr': {'class': ''} }) }}
                        <span class="help-inline help-inline-data">{{ form_errors(configuracao.datInicio) }}</span>
                        {% if configuracao.id.vars.value~'_inicio' == 'data_especie_inicio' %}
                            <div id="alert_data_inicio" class="alert hide">A "Data ínicio para os relatórios de espécie" deve ser <b>maior ou igual</b> a "Data ínicio para os relatórios públicos".</div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
            {% if configuracao.datFim.vars.value != '' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.datFim.vars.id }}" class="required control-label">
                        {{ 'final_date'|trans }}
                    </label>
                    <div class="controls {{ configuracao.id.vars.value~'_final' }}">
                        {{ form_widget(configuracao.datFim,{ 'attr': {'class': ''} }) }}
                        <span class="help-inline help-inline-data">{{ form_errors(configuracao.datFim) }}</span>
                        {% if configuracao.id.vars.value~'_final' == 'data_especie_final' %}
                            <div id="alert_data_final" class="alert hide">A "Data final para os relatórios de espécie" deve ser <b>menor ou igual</b> a "Data final para os relatórios públicos".</div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
          {#  {% if configuracao.datInicioTrigger.vars.value != '' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.datInicioTrigger.vars.name }}" class="required control-label">
                        Data início da trigger
                    </label>
                    <div class="controls">
                        {{ form_widget(configuracao.datInicioTrigger,{ 'attr': {'class': 'input-xlarge'} }) }}
                        <span class="help-inline">{{ form_errors(configuracao.datInicioTrigger) }}</span>
                    </div>
                </div>
            {% endif %}
            {% if configuracao.datFimTrigger.vars.value != '' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.datFimTrigger.vars.name }}" class="required control-label">
                        Data fim trigger
                    </label>
                    <div class="controls">
                        {{ form_widget(configuracao.datFimTrigger,{ 'attr': {'class': 'input-xlarge'} }) }}
                        <span class="help-inline">{{ form_errors(configuracao.datFimTrigger) }}</span>
                    </div>
                </div>
            {% endif %}#}
            {% if configuracao.datInicio.vars.value != '' %}
                <div class="control-group span3">
                    <label for="{{ configuracao.gerar.vars.name }}" class="required control-label">
                        {{ 'generate'|trans }}
                    </label>
                    <div class="controls">
                        {{ form_widget(configuracao.gerar,{ 'attr': {'class': 'input-xlarge'} }) }}
                        <span class="help-inline">{{ form_errors(configuracao.gerar) }}</span>
                    </div>
                </div>
            {% endif %}
        </div>
        {% if 'especie' in configuracao.id.vars.value %}
            <div class="row-fluid">
                <div id="alert_data_inicio" class="alert span4">
                    {{'data_especie_validate'|trans }}
                </div>
            </div>
        {% endif %}
    </fieldset>
{% endmacro %}
{% macro configuracao_image_prototype(configuracao) %}
    <fieldset style="float: left; margin: 10px;">
        <legend style="font-size: 16px">{{ configuracao.id.vars.value|trans }}</legend>
        <div class="row-fluid">
            <div class="preview">
                <h4>{{ 'pre_visualizacao'|trans }}</h4>
                {%  set logo =  configuracao.txtValor.vars.value |  split('^|^') %}
                {%  if logo[0] is defined  and logo[0] is defined  %}
                    <img src="{{ asset('arquivos/pagina/' ~ logo[0] ~'_logo.'~logo[1]) }}"  id="preview" style="height: 280px;" />
                {%  endif %}

            </div>


        </div>
        <div class="row-fluid">
            <input type="file" id="image_input_{{  configuracao.id.vars.value }}"   name="{{  configuracao.id.vars.value }}" accept="image/*" >
        </div>
    </fieldset>
    <script>
        function previewImage(input, imgPreview) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $(imgPreview).attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }



        $(document).ready(function(){
            $("#image_input_logo").on ('change', function(){

                previewImage(this, $("#preview"));
            });
        });
    </script>
{% endmacro %}