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

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all" />
{% endblock %}

{% block content %}
<script type="text/javascript">
    // Evita duplo submit (mesma lógica do seu exemplo)
    $(document).ready(function () {
        $(document).on('DOMNodeInserted', function (e) {
            if (e.target.className == 'alert alert-error') {
                setTimeout(function () { $('button[type="submit"]').removeAttr("disabled"); }, 100);
            }
        });
        $('form').submit(function () {
            $('button[type="submit"]').attr("disabled", "disabled");
        });
    });
</script>

<div id="form-container">
    <div class="title">
        <h2>{{ 'cabecalho.incluir.estatpescaprepesc'|trans }}</h2>
    </div>

    {# mensagens de feedback #}
    <div class="messageContainer">
        {% for flash in app.session.getFlash('success') %}
            <div class="alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ flash|trans }}
            </div>
        {% endfor %}
        {% for flash in app.session.getFlash('warning') %}
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ flash|trans }}
            </div>
        {% endfor %}
        {% for flash in app.session.getFlash('error') %}
            <div class="alert alert-danger alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ flash|trans }}
            </div>
        {% endfor %}
    </div>

    <form id="form-precos" class="form-horizontal" action="{{ path('estatpescaprepesc_new') }}" method="post" novalidate>
        <fieldset style="float:left; margin:10px;">
            <legend>{{ 'form.dados_gerais'|trans|default('Dados Gerais') }}</legend>

            <div class="row-fluid">
              <div class="control-group span3">
                  <label class="control-label" for="cod_municipio">{{ 'entidade.estatpescaprepesc.codMunicipio'|trans|default('Município') }}</label>
                  <div class="controls">
                      <select name="cod_municipio" id="cod_municipio" class="input-xlarge" required>
                          <option value="">{{ 'selecione'|trans }}</option>
                          {% for m in municipios %}
                              <option value="{{ m.id }}">{{ m.txtNome }}</option>
                          {% endfor %}
                      </select>
                      <span class="help-inline"></span>
                  </div>
              </div>

              <div class="control-group span3">
                  <label class="control-label" for="cod_localidade">{{ 'entidade.estatpescaprepesc.codLocalidade'|trans|default('Localidade') }}</label>
                  <div class="controls">
                      <select name="cod_localidade" id="cod_localidade" class="input-xlarge" required disabled>
                          <option value="">{{ 'selecione'|trans }}</option>
                      </select>
                      <span class="help-inline"></span>
                  </div>
              </div>

              <div class="control-group span4">
                  <label class="control-label" for="data">{{ 'entidade.estatpescaprepesc.data'|trans|default('Data') }}</label>
                  <div class="controls">
                      <input name="data" id="data" type="date" class="input-small" placeholder="dd/mm/aaaa" required />
                      <span class="help-inline"></span>
                  </div>
              </div>
            </div>
        </fieldset>

        <fieldset style="float:left; margin:10px;">
            <legend>{{ 'form.precos'|trans|default('Preços por Espécie') }}</legend>

            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th style="width:60px;">#</th>
                        <th>{{ 'entidade.estatpescaprepesc.codEspecie'|trans|default('Espécie') }}</th>
                        <th style="width:180px;">{{ 'entidade.estatpescaprepesc.preco'|trans|default('Preço (R$)') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for e in especies %}
                        <tr>
                            <td>{{ loop.index }}</td>
                            <td>{{ e.txtNome }}</td>
                            <td>
                                <input type="text"
                                       name="prices[{{ e.id }}]"
                                       class="input-small preco-ptbr"
                                       placeholder="Ex.: 12,34"
                                       style="text-align:right;" />
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </fieldset>

        <div class="div-actions">
            <button type="submit" class="btn btn-primary">{{ 'acao.salvar'|trans }}</button>
            <a class="" href="{{ path('estatpescaprepesc') }}" title="{{ 'acao.cancelar'|trans }}">{{ 'acao.cancelar'|trans }}</a>
        </div>
    </form>
</div>

{# JS: encadeia Município -> Localidade e pequenas melhorias de UX #}
<script type="text/javascript">
(function($){
    function resetLocalidade(disable) {
        var $loc = $('#cod_localidade');
        $loc.prop('disabled', !!disable);
        $loc.empty().append($('<option>', { value: '', text: '{{ "selecione"|trans }}' }));
    }

    function carregarLocalidades(codMunicipio) {
        if (!codMunicipio) { resetLocalidade(true); return; }
        resetLocalidade(true);

        var url = "{{ path('localidade_json') }}?codMunicipio=" + encodeURIComponent(codMunicipio) + "&isAtivo=1";
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json',
            beforeSend: function(){
                // feedback simples
                $('#cod_localidade').append($('<option>', { value: '', text: 'Carregando...' })).prop('disabled', true);
            }
        }).done(function(lista){
            var $loc = $('#cod_localidade');
            $loc.empty().append($('<option>', { value: '', text: '{{ "selecione"|trans }}' }));
            $.each(lista, function(_, item){
                $loc.append($('<option>', { value: item.id, text: item.txtNome }));
            });
            $loc.prop('disabled', false);
        }).fail(function(){
            alert('Não foi possível carregar as localidades. Tente novamente.');
            resetLocalidade(true);
        });
    }

    $(document).ready(function(){
        // encadeia selects
        $('#cod_municipio').on('change', function(){
            carregarLocalidades($(this).val());
        });

        // máscara simples de moeda pt-br (sem plugin)
        $(document).on('input', '.preco-ptbr', function(){
            var v = $(this).val()
                .replace(/\D/g,'')           // remove não dígitos
                .replace(/^0+/, '');          // remove zeros à esquerda
            if (v.length === 0) { $(this).val(''); return; }
            // força 2 casas decimais
            if (v.length == 1) v = '0' + v;
            v = v.replace(/(\d+)(\d{2})$/, '$1,$2'); // insere vírgula
            // pontos a cada 3 casas antes da vírgula
            v = v.replace(/(\d)(?=(\d{3})+(,))/g, '$1.');
            $(this).val(v);
        });

        // coloca foco no primeiro campo
        $('#cod_municipio').focus();
    });
})(jQuery);
</script>
{% endblock %}