{% extends "propesqBundle::layout.html.twig" %}
{% import  "propesqBundle:Form:function.html.twig" as function %}

{% block stylesheets %}
    <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> {{ 'cabecalho.detalhar.configuracaoexpansaoconsolidacao' | trans }} </h2>
    </div>
    <fieldset style="float: left; margin: 10px;">
        {% if not includeLayout %}
            <input type='hidden' name='noLayout' value='true'>
        {% endif %}

        <div class="row-fluid">
            <legend>{{ 'entidade.configuracaoexpansaoconsolidacao.expansao' | trans }}</legend>
        </div>

        <div class="row-fluid">
            <!-- Campo Nome -->
            <div class="control-group span12">
                {{ function.show('entidade.configuracaoexpansaoconsolidacao.txtNome', entity.txtNome ) }}
            </div>
        </div>

        <div class="row-fluid">
            <!-- Campo Tipo Procedimento -->
            <div id="entidade_configuracaoexpansaoconsolidacao_tipoProcedimento" class="control-group span2">
                <label>{{ 'entidade.configuracaoexpansaoconsolidacao.tipoProcedimento' | trans }}</label>
                <div class="controls">
                    {% for index, tipoProcedimento in tipoProcedimentoList %}
                        {% set selected = false %}
                        {% if index == entity.tipoProcedimento %}
                            {%  set selected = true %}
                        {% endif %}
                        <div>
                            <input id="entidade_configuracaoexpansaoconsolidacao_tipoProcedimento_{{ index }}" {{ (selected)?'checked="checked"':'' }} type="radio" disabled="disabled" class="wf2_notBlank wf2_defaultValue">&nbsp;&nbsp;{{ tipoProcedimento }}</input> <br/>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Campo Tipo Extrato -->
            <div id="entidade_configuracaoexpansaoconsolidacao_tipoExtrato" class="control-group span8">
                <label>{{ 'entidade.configuracaoexpansaoconsolidacao.tipoExtrato' | trans }}</label>
                <div class="controls">
                    {% for index, tipoExtrato in tipoExtratoList %}
                        {% set selected = false %}
                        {% if index == entity.tipoExtrato %}
                            {%  set selected = true %}
                        {% endif %}
                        <div>
                            <input id="entidade_configuracaoexpansaoconsolidacao_tipoExtrato_{{ index }}" {{ (selected)?'checked="checked"':'' }} type="radio" disabled="disabled" class="wf2_notBlank wf2_defaultValue">&nbsp;&nbsp;{{ tipoExtrato }}</input> <br/>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <div class="row-fluid">
            <!-- Campo Parâmetros Adicionais -->
            <div id="entidade_configuracaoexpansaoconsolidacao_txtParametrosAdicionais" class="control-group cemporcento" {% if entity.tipoProcedimento == 2 %} hidden {% endif %}>
                {{ function.show('entidade.configuracaoexpansaoconsolidacao.txtParametrosAdicionais', entity.txtParametrosAdicionais ) }}
            </div>
        </div>

        <div class="row-fluid">
            <legend>{{ 'entidade.configuracaoexpansaoconsolidacao.filtros' | trans }}</legend>
        </div>

        <div class="row-fluid">
            <!-- Campo Data Inicial -->
            <div class="control-group span2">
                <div class="controls input-small">
                    {{ function.show('entidade.configuracaoexpansaoconsolidacao.datInicial', entity.datInicial is empty ? " " : entity.datInicial | date('d/m/Y') ) }}
                </div>
            </div>

            <!-- Campo Data Final -->
            <div class="control-group span4">
                <div class="controls input-small">
                    {{ function.show('entidade.configuracaoexpansaoconsolidacao.datFinal', entity.datFinal is empty ? " " : entity.datFinal | date('d/m/Y') ) }}
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <!-- Campo Tipo Pesca -->
            <div class="control-group span2">
                <label>{{ 'entidade.configuracaoexpansaoconsolidacao.tipoPesca' | trans }}</label>
                <div class="controls">
                    {% for index, tipoPesca in tipoPescaList %}
                        {% set selected = false %}
                        {% if index in entity.tipoPesca or entity.tipoPesca == null %}
                            {%  set selected = true %}
                        {% endif %}

                        <label class="checkbox">
                            <input {{ (selected)?'checked="checked"':'' }} type="checkbox" disabled="disabled" class="wf2_notBlank wf2_defaultValue">{{ tipoPesca }}
                        </label>
                    {% endfor %}
                </div>
            </div>

            <!-- Campo Tipo Unidade Produtiva -->
            <div class="control-group span2">
                <label>{{ 'entidade.configuracaoexpansaoconsolidacao.tipoUnidadeProdutiva' | trans }}</label>
                <div class="controls">
                    {% for index, tipoUnidadeProdutiva in tipoUnidadeProdutivaList %}
                        {% set selected = false %}
                        {% if index in entity.tipoUnidadeProdutiva or entity.tipoUnidadeProdutiva == null %}
                            {%  set selected = true %}
                        {% endif %}

                        <label class="checkbox">
                            <input {{ (selected)?'checked="checked"':'' }} type="checkbox" disabled="disabled" class="wf2_notBlank wf2_defaultValue">{{ tipoUnidadeProdutiva }}
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div id='campos_multichoice'>
                <!-- Campo Municipio -->
                <div class="control-group span3" style="margin-left: 2.55%;">
                    <label>{{ 'entidade.configuracaoexpansaoconsolidacao.municipios' | trans }}</label>
                    <div class="controls">
                        <select id='configuracaoexpansaoconsolidacao_municipio'></select>
                    </div>
                </div>

                <!-- Campo Localidade -->
                <div class="control-group span3">
                    <label>{{ 'entidade.configuracaoexpansaoconsolidacao.localidades' | trans }}</label>
                    <div class="controls">
                        <select id='configuracaoexpansaoconsolidacao_localidade'></select>
                    </div>
                </div>

                <!-- Campo Local Descarga -->
                <div class="control-group span4">
                    <label>{{ 'entidade.configuracaoexpansaoconsolidacao.locaisDescarga' | trans }}</label>
                    <div class="controls">
                        <select id='configuracaoexpansaoconsolidacao_localDescarga'></select>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    <div id="container_resumo" style="margin: 10px;">
        <div class="row-fluid">
            <legend>{{ 'entidade.configuracaoexpansaoconsolidacao.resumo' | trans }}</legend>
        </div>

        <div class="row-fluid">
            <div class="control-group span12">
                Situação: <span id="situacao_header" style="color:{% if entity.indSituacao == 5 or entity.indSituacao == 7 %} #EE5F5B {% else %} #62C462 {% endif %};"> {{ situacaoConfiguracao[entity.indSituacao] }} <span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <ul id="progressbar">
                    {% if entity.tipoProcedimento == 1 %}
                        <li id="situacao_configuracao" class="active-ok"> {{ 'situacao_configuracao_expansao.configuracao' | trans }} </li>
                        <li id="situacao_preparacao"> {{ 'situacao_configuracao_expansao.preparacao' | trans }} </li>

                        <li id="situacao_validacao_propesqweb"> {{ 'situacao_configuracao_expansao.validacao_propesqweb' | trans }} </li>
                        <li id="situacao_aviso_validacao_propesqweb" hidden="true" class="active-attention">
                            <span class="badge badge-secondary" hidden="true" id="numero_aviso_validacao_propesqweb"></span> {{ 'situacao_configuracao_expansao.validacao_propesqweb' | trans }}
                        </li>
                        <li id="situacao_erro_validacao_propesqweb" hidden="true" class="active-danger">
                            <span class="badge badge-secondary" hidden="true" id="numero_erro_validacao_propesqweb"></span> {{ 'situacao_configuracao_expansao.erro_validacao_propesqweb' | trans }}
                        </li>

                        <li id="situacao_validacao_externa"> {{ 'situacao_configuracao_expansao.validacao_externa' | trans }} </li>
                        <li id="situacao_aviso_validacao_externa" hidden="true" class="active-attention">
                            <span class="badge badge-secondary" hidden="true" id="numero_aviso_validacao_externa"></span> {{ 'situacao_configuracao_expansao.validacao_externa' | trans }}
                        </li>
                        <li id="situacao_erro_validacao_externa" hidden="true" class="active-danger">
                            <span class="badge badge-secondary" hidden="true" id="numero_erro_validacao_externa"></span> {{ 'situacao_configuracao_expansao.erro_validacao_externa' | trans }}
                        </li>

                        <li id="situacao_expansao"> {{ 'situacao_configuracao_expansao.expansao' | trans }} </li>
                        <li id="situacao_erro_expansao" hidden="true" class="active-danger"> {{ 'situacao_configuracao_expansao.erro_expansao' | trans }} </li>
                    {% else %}
                        <li id="situacao_configuracao" class="active-ok"> {{ 'situacao_configuracao_expansao.configuracao' | trans }} </li>
                        <li id="situacao_preparacao"> {{ 'situacao_configuracao_expansao.preparacao' | trans }} </li>
                        <li id="situacao_consolidacao"> {{ 'situacao_configuracao_expansao.consolidacao' | trans }} </li>
                    {% endif %}
                </ul>
            </div>
        </div>
        <style>
            .conf_log {
                height: 100px;
                padding: 10px;
            }
            .attention {
                color: #F4B400;
            }
            #progressbar {
                margin-bottom: 30px;
                overflow: hidden;
            }

            #progressbar li {
                list-style-type: none;
                color: black;
                font-size: 10px;
                float: left;
                position: relative;
                letter-spacing: 1px;
                text-align: center;
            }

            #progressbar li span.badge {
                position: absolute;
                top: 0px;
                right: calc(50% - 35px);
            }

            #progressbar li:before {
                text-align: center;
                width: 50px;
                height: 50px;
                line-height: 50px;
                display: block;
                font-size: 13px;
                background: white;
                border-radius: 25px;
                margin: 0 75px 10px 75px;
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f101";
                color: #333;
            }

            #progressbar li:after {
                content: '';
                width: 80%;
                height: 5px;
                background: white;
                position: absolute;
                left: -75px;
                top: 22px;
            }

            #progressbar li:first-child:after {
                content: none;
            }

            #progressbar li.active-ok:before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f101";
            }

            #progressbar li.active-ok:before, #progressbar li.active-ok:after {
                background: #62C462;
            }
            #progressbar li.active-attention:before, #progressbar li.active-attention:after {
                background: #F4B400;
            }
            #progressbar li.active-danger:before, #progressbar li.active-danger:after {
                background: #EE5F5B;
            }

            #progressbar li.active-attention:before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f12a";
            }
            #progressbar li.active-danger:before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f00d";
            }
        </style>
    </div>

    <div id="container_logs" style="margin: 10px;">
        <div class="row-fluid">
            <legend>{{ 'entidade.configuracaoexpansaoconsolidacao.log' | trans }}</legend>
        </div>
        <div>
            <textarea id="configuracao_log" class="cemporcento conf_log" disabled>{% for log in entityLog %}[{{ log.datLog | date('d/m/Y H:i:s') }}]: {{ log.txtMensagem }}{% endfor %}</textarea>
        </div>

        <div class="row-fluid">
            {% if entity.indSituacao in [8, 10] %}
                <a id='link_download_tabelas' href="{{ path('configuracaoexpansaoconsolidacao_tabelas_utilizadas', {id:entity.id }) }}">{{ 'entidade.configuracaoexpansaoconsolidacao.download_tabelas_utilizadas' | trans }}</a>
            {% endif %}
        </div>
    </div>

    <div class="div-actions" >
        {% if is_granted('ROLE_CONFIGURACAOEXPANSAOCONSOLIDACAO_LIST') %}
            <a class="btn" href="{{ path('configuracaoexpansaoconsolidacao') }}"> {{ 'acao.listar' | trans }}</a>
        {% endif %}
        {% if is_granted('ROLE_CONFIGURACAOEXPANSAOCONSOLIDACAO_EDIT') and entity.indSituacao == 1 %}
            <a class="btn" href="{{ path('configuracaoexpansaoconsolidacao_edit', { 'id': entity.id }) }}" title="{{'acao.editar'|trans}}"> {{ 'acao.editar' | trans }} </a>
        {% endif %}
        {% if is_granted('ROLE_CONFIGURACAOEXPANSAOCONSOLIDACAO_DELETE') and entity.indSituacao == 1 %}
            <a id="btn_delete_{{entity.id}}" onclick="delete_configuracaoexpansaoconsolidacao_{{entity.id}}()" class="btn btn-danger btn-delete" href="#" title="{{ 'acao.excluir' | trans }}">
                {{ 'acao.excluir' | trans }}
            </a>
            <script type="text/javascript">
                function delete_configuracaoexpansaoconsolidacao_{{entity.id}}(e){
                    var linkToDelete = "{{ path('configuracaoexpansaoconsolidacao_delete', { 'id': entity.id }) }}";
                    bootbox.confirm("Você realmente deseja excluir esta configuração?", "ATENÇÃO!!", "Cancelar", "Excluir", function(confirmed) {
                        if(confirmed){
                            location.href=linkToDelete;
                        }else{
                            return false;
                        }
                    });
                }
            </script>
        {% endif %}
    </div>
</div>
<script>
    $(document).ready(function () {
        var municipios = [
            {% for municipio in municipios %}
                {
                    id: '{{ municipio.id }}',
                    text: "{{ municipio.txtNome | raw}}",
                    selected: true
                },
            {% endfor %}
        ];
        $('#configuracaoexpansaoconsolidacao_municipio').select2({
            data: municipios,
            disabled: true,
            multiple: true,
            width: '100%'
        });

        var localidades = [
            {% for localidade in localidades %}
                {
                    id: '{{ localidade.id }}',
                    text: "{{ localidade.txtNome | raw }}" + " ({{ localidade.codMunicipio.txtNome | raw }})",
                    selected: true
                },
            {% endfor %}
        ];        
        $('#configuracaoexpansaoconsolidacao_localidade').select2({
            data: localidades,
            disabled: true,
            multiple: true,
            width: '100%'
        });

        var locaisDescarga = [
            {% for localDescarga in locaisDescarga %}
                {
                    id: '{{ localDescarga.id }}',
                    text: "{{ localDescarga.txtNome | raw }}",
                    selected: true
                },
            {% endfor %}
        ];
        $('#configuracaoexpansaoconsolidacao_localDescarga').select2({
            data: locaisDescarga,
            disabled: true,
            multiple: true,
            width: '100%'
        });

        if($('#entidade_configuracaoexpansaoconsolidacao_tipoProcedimento input[type="radio"]:checked').attr('id') != 'entidade_configuracaoexpansaoconsolidacao_tipoProcedimento_1'){
            $($('#entidade_configuracaoexpansaoconsolidacao_tipoExtrato_3')[0].parentElement).css('visibility', 'hidden');
        }

        let mensagem = '';
        let regexNumAvisos = /(?:\()(?<count>\d*)(?:\savisos)/;
        let regexNumErros = /(?:\()(?<count>\d*)(?:\serros)/;

        {% for log in entityLog %}
            mensagem = '{{ log.txtMensagem |replace({"\n": ""}) }}';

            {% if log.indSituacao == 4 and log.indStatus == 2 %}
                if (mensagem.match(regexNumAvisos) != null) {
                    $('#numero_aviso_validacao_propesqweb').text(mensagem.match(regexNumAvisos).groups.count);
                    $('#numero_aviso_validacao_propesqweb').removeAttr('hidden');
                }
            {% elseif log.indSituacao == 5 and log.indStatus == 3 %}
                if (mensagem.match(regexNumErros) != null) {
                    $('#numero_erro_validacao_propesqweb').text(mensagem.match(regexNumErros).groups.count);
                    $('#numero_erro_validacao_propesqweb').removeAttr('hidden');
                }
            {% elseif log.indSituacao == 6 and log.indStatus == 2 %}
                if (mensagem.match(regexNumAvisos) != null) {
                    $('#numero_aviso_validacao_externa').text(mensagem.match(regexNumAvisos).groups.count);
                    $('#numero_aviso_validacao_externa').removeAttr('hidden');
                }
            {% elseif log.indSituacao == 7 and log.indStatus == 3 %}
                if (mensagem.match(regexNumErros) != null) {
                    $('#numero_erro_validacao_externa').text(mensagem.match(regexNumErros).groups.count);
                    $('#numero_erro_validacao_externa').removeAttr('hidden');        
                }
            {% endif %}
        {% endfor %}

        {% if entity.tipoProcedimento == 1 %}
            switch('{{ entity.indSituacao }}'){
                case '2':
                    $('#situacao_preparacao').addClass('active-ok');
                    break;
                case '3':
                    $('#situacao_preparacao').addClass('active-ok');
                    break
                case '4':
                    $('#situacao_preparacao').addClass('active-ok');
                    $('#situacao_validacao_propesqweb').addClass('active-ok');

                    if($('#numero_aviso_validacao_propesqweb').text() != ''){
                        $('#situacao_validacao_propesqweb').attr('hidden', true);
                        $('#situacao_aviso_validacao_propesqweb').removeAttr('hidden');

                        mudarTextoSituacaoAviso();
                    }
                    break;
                case '5':
                    $('#situacao_preparacao').addClass('active-ok');

                    // Erro propesqweb
                    $('#situacao_validacao_propesqweb').attr('hidden', true);
                    $('#situacao_erro_validacao_propesqweb').attr('hidden', false);
                    break;
                case '6':
                    $('#situacao_preparacao').addClass('active-ok');
                    $('#situacao_validacao_propesqweb').addClass('active-ok');
                    $('#situacao_validacao_externa').addClass('active-ok');

                    // Aviso Propesq
                    if($('#numero_aviso_validacao_propesqweb').text() != ''){
                        $('#situacao_validacao_propesqweb').attr('hidden', true);
                        $('#situacao_aviso_validacao_propesqweb').removeAttr('hidden');

                        mudarTextoSituacaoAviso();
                    }

                    if($('#numero_aviso_validacao_externa').text() != ''){
                        $('#situacao_validacao_externa').attr('hidden', true);
                        $('#situacao_aviso_validacao_externa').removeAttr('hidden');

                        mudarTextoSituacaoAviso();
                    }
                    break;
                case '7':
                    $('#situacao_preparacao').addClass('active-ok');
                    $('#situacao_validacao_propesqweb').addClass('active-ok');

                    // Aviso Propesq
                    if($('#numero_aviso_validacao_propesqweb').text() != ''){
                        $('#situacao_validacao_propesqweb').attr('hidden', true);
                        $('#situacao_aviso_validacao_propesqweb').removeAttr('hidden');
                    }

                    // Erro externo
                    $('#situacao_validacao_externa').attr('hidden', true);
                    $('#situacao_erro_validacao_externa').attr('hidden', false);
                    break;
                case '8':
                    $('#situacao_preparacao').addClass('active-ok');
                    $('#situacao_validacao_propesqweb').addClass('active-ok');
                    $('#situacao_validacao_externa').addClass('active-ok');
                    $('#situacao_expansao').addClass('active-ok');

                    // Aviso Propesq
                    if($('#numero_aviso_validacao_propesqweb').text() != ''){
                        $('#situacao_validacao_propesqweb').attr('hidden', true);
                        $('#situacao_aviso_validacao_propesqweb').removeAttr('hidden');

                        mudarTextoSituacaoAviso();
                    }

                    // Aviso externo
                    if($('#numero_aviso_validacao_externa').text() != ''){
                        $('#situacao_validacao_externa').attr('hidden', true);
                        $('#situacao_aviso_validacao_externa').removeAttr('hidden');

                        mudarTextoSituacaoAviso();
                    }
                    break;
                case '9':
                    $('#situacao_preparacao').addClass('active-ok');
                    $('#situacao_validacao_propesqweb').addClass('active-ok');
                    $('#situacao_validacao_externa').addClass('active-ok');
                    $('#situacao_expansao').attr('hidden', true);
                    $('#situacao_erro_expansao').removeAttr('hidden');

                    // Aviso Propesq
                    if($('#numero_aviso_validacao_propesqweb').text() != ''){
                        $('#situacao_validacao_propesqweb').attr('hidden', true);
                        $('#situacao_aviso_validacao_propesqweb').removeAttr('hidden');
                    }

                    // Aviso externo
                    if($('#numero_aviso_validacao_externa').text() != ''){
                        $('#situacao_validacao_externa').attr('hidden', true);
                        $('#situacao_aviso_validacao_externa').removeAttr('hidden');
                    }
                    break;
            }
        {% else %}
            switch('{{ entity.indSituacao }}'){
                case '2':
                    $('#situacao_preparacao').addClass('active-ok');
                    break;
                case '3':
                    $('#situacao_preparacao').addClass('active-ok');
                    break
                case '10':
                    $('#situacao_preparacao').addClass('active-ok');
                    $('#situacao_consolidacao').addClass('active-ok');
                    break;
            }
        {% endif %}
    });

    // Muda a cor do texto da situação para amarelo
    function mudarTextoSituacaoAviso(){
        $('#situacao_header').removeAttr('style');
        $('#situacao_header').addClass('attention');
    }
</script>
{% endblock %}