{% load filters %}

<script type="text/javascript">
var bancoCarteiraJson = {% autoescape off %}{{ banco_carteira_json|to_json }}{% endautoescape %};
{% if erros_validacao %}
var errosValidacao = {% autoescape off %}{{ erros_validacao|to_json }}{% endautoescape %};
errosValidacao = errosValidacao.erros.json;
{% else %}
var errosValidacao = {};
{% endif %}
var jsonResultado = {desconto_valor: null, empresa_estado: null, banco_agencia: null, empresa_beneficiario: null, carteira: null, aplicar_no_total: null, linha_2: null, empresa_endereco: null, empresa_cidade: null, linha_1: null, linha_3: null, banco_convenio: null, empresa_cnpj: null, banco: null, banco_conta: null};
var requeridos = ["empresa_cnpj", "empresa_beneficiario", "empresa_endereco", "empresa_estado", "empresa_cidade", "banco", "carteira", "banco_agencia", "banco_conta"];
$(document).ready(function() {

    var bancos_tamanho_conta = {"2": 5, "1": 7, "6": 8, "4": 6};
    var alterar_carteiras = function(banco_id) {
        var carteira_select = $('#id_carteira');
        var carteiras = undefined;
        for (var i in bancoCarteiraJson) {
            if (i == banco_id) {
                carteiras = bancoCarteiraJson[banco_id];
            }
        }
        carteira_select.empty();
        for (var j in carteiras) {
            $('<option>').attr({'value': j}).text(carteiras[j].nome).data('convenio', carteiras[j].convenio).appendTo(carteira_select);
        }
    };

    var bind_carteira_change = function() {
        $('#id_carteira').unbind().change(function() {
            var self = $(this);
            var convenio_parent = $('#id_banco_convenio').parents('.form-group');

            if (self.find(':selected').data('convenio') == true) {
                convenio_parent.show();
            } else {
                convenio_parent.hide();
            }
        }).change();
    };

    var preencheCampos = function() {
        var $json = $("#id_json");
        if ($json.val()) {
            var jsonRetorno = JSON.parse($json.val());
            for (var campo in jsonResultado) {
                if (jsonRetorno.hasOwnProperty(campo)) {
                    jsonResultado[campo] = jsonRetorno[campo];
                }
            }
        }
        for (var propriedade in jsonResultado) {
            if (propriedade != "linha_1" && propriedade != "desconto_valor" && propriedade != "aplicar_no_total") {
                var id_campo = propriedade;
                var id_esconder = null;
                if (propriedade == "empresa_cnpj") {
                    if (!jsonResultado[propriedade]) {
                        id_campo = "cpf";
                        id_esconder = "cnpj";
                    }
                    else {
                        id_campo = (jsonResultado[propriedade].length == 14 ? "cnpj" : "cpf");
                        id_esconder = (jsonResultado[propriedade].length == 14 ? "cpf" : "cnpj");
                    }
                    var $esconder = $("#id_" + id_esconder);
                    $esconder.prop("disabled", false);
                    $esconder.parents(".form-group").hide();
                    $("#btn_" + id_campo).button('toggle');
                }
                var $campo = $("#id_" + id_campo);
                $campo.prop("disabled", false);
                $campo.val(jsonResultado[propriedade]);
                if (propriedade == "banco") {
                    $campo.change();
                }
                if (errosValidacao.hasOwnProperty(propriedade)) {
                    var $formGroup = $campo.parents(".form-group");
                    $formGroup.addClass("has-error");
                    $formGroup.find(".errorlist li").remove();
                    $formGroup.find(".errorlist").append("<li>" + errosValidacao[propriedade] + "</li>");
                    $formGroup.find(".errorlist").show();
                }
            }
        }
    };

    $(".documento").click(function() {
        var $this = $(this);
        var documento = $this.data("documento");
        var id_esconder = (documento == "cnpj" ? "cpf" : "cnpj");
        var $exibir = $("#id_" + documento);
        var $esconder = $("#id_" + id_esconder);
        $exibir.parents(".form-group").show();
        $esconder.parents(".form-group").hide();
    });

    $('#id_banco').change(function() {
        var self = $(this);
        var selected = self.find(':selected');
        alterar_carteiras(selected.val());
        bind_carteira_change();
        banco_id = selected.val();
        tamanho = bancos_tamanho_conta[banco_id];
        if (!tamanho) {
            return false;
        }
        var help_block = $('#id_banco_conta').parents('.form-group').find('.help-block');
        help_block.text(help_block.text().replace(/\d+/, tamanho));
    });

    preencheCampos();
    $('#id_cnpj').mask('99.999.999/9999-99');
    $('#id_cpf').mask('999.999.999-99');

    var escondeAlertas = function() {
        $(".alert").not("#alertaAviso").not("#alertaBotaoTeste").not("#alertaInfo").hide();
    };

    $("#formPagamentoEditar").submit(function(e) {
        escondeAlertas();
        if ($("#id_ativo").val() == 'True') {
            var tem_erro = false;
            for (var indice in requeridos) {
                var id_campo = requeridos[indice];
                if (id_campo == "empresa_cnpj") {
                    id_campo = ($("#btn_cnpj").hasClass("active") ? "cnpj" : "cpf");
                }
                var $campoRequerido = $("#id_" + id_campo);
                var $formGroup = $campoRequerido.parents(".form-group");
                $formGroup.removeClass("has-error");
                $formGroup.find(".errorlist").hide();
                if (!$campoRequerido.val()) {
                    tem_erro = true;
                    $formGroup.addClass("has-error");
                    $formGroup.find(".errorlist li").remove();
                    $formGroup.find(".errorlist").append("<li>Este campo é obrigatório</li>");
                    $formGroup.find(".errorlist").show();
                }
            }
            if (tem_erro) {
                e.preventDefault();
                $("html, body").animate({scrollTop : 0 });
                var $alertaErro = $("#alertaErro");
                $alertaErro.prependTo("#mainContent").show();
                return false
            }
        }
        for (var propriedade in jsonResultado) {
            var id_campo = propriedade;
            if (id_campo == "empresa_cnpj") {
                id_campo = ($("#btn_cnpj").hasClass("active") ? "cnpj" : "cpf");
            }
            var $campo = $("#id_" + id_campo);
            var valor = $campo.val();
            if (propriedade == "empresa_cnpj") {
                valor = valor.replace(/\./g, "");
                valor = valor.replace(/\//g, "");
                valor = valor.replace(/\-/g, "");
            }
            if (propriedade == "desconto_valor") {
                valor = valor.replace(/\./g, "");
                valor = valor.replace(/\,/g, ".");
            }
            if (propriedade == "aplicar_no_total") {
                valor = $campo.is(":checked");
            }
            jsonResultado[propriedade] = valor;
        }
        $("#id_json").val(JSON.stringify(jsonResultado));
    });

    $("#emitirBoletoTeste").click(function() {
        escondeAlertas();
        var url = "https://{{ request.get_host }}{% url 'config_pagamento_configuracao_complemento' pagamento_id=pagamento.id tipo='BoletoTeste' metodo='GET' %}";
        $.getJSON(url).done(function(data) {
            var html_modal = "";
            if (data.sucesso) {
                html_modal = data.content
            }
            else {
                var alertaBoletoTeste = [
                    '<div id="alertaBoletoTeste" class="alert alert-danger">',
                        '<a class="close" data-dismiss="alert">×</a>',
                        '<h4 class="texto-erro">' + data.content.erro + '</h4>',
                    '</div>'
                ];
                html_modal = alertaBoletoTeste.join("");
            }
            $("#modalBoletoTeste").find(".corpo").html(html_modal);
            $('#modalBoletoTeste').modal('show')
        });
    })
});
</script>
<div id="alertaErro" class="alert alert-danger" style="display: none;">
    <a class="close" data-dismiss="alert">×</a>
    <h4>Existem erros nos dados enviados. Corrija os campos marcados e tente novamente.</h4>
</div>

<div class="alert alert-success" id="alertaBotaoTeste">
    <h4>Emitir boleto de teste</h4>
    <p>Para testar as configurações de pagamento faça a emissão de um boleto de teste e verifique se o boleto foi gerado corretamente.</p>
    <p>
        <button type="button" id="emitirBoletoTeste" class="btn btn-default">
            <span class="glyphicon glyphicon-barcode"></span> Gerar boleto de teste
        </button>
    </p>
</div>

<h4>Dados do Beneficiário</h4>
<div class="form-group">
    <label class="control-label col-sm-3">Tipo de documento:</label>
    <div class="col-sm-6">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary documento" id="btn_cpf" data-documento="cpf">
                <input type="radio" autocomplete="off" name="documento" id="cpf" />CPF
            </label>
            <label class="btn btn-primary documento" id="btn_cnpj" data-documento="cnpj">
                <input type="radio" autocomplete="off" name="documento" id="cnpj" />CNPJ
            </label>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="id_cpf" class="control-label col-sm-3">CPF:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_cpf" maxlength="18" name="cpf" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group">
    <label for="id_cnpj" class="control-label col-sm-3">CNPJ:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_cnpj" maxlength="18" name="cnpj" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_empresa_beneficiario" class="control-label col-sm-3">Nome:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_empresa_beneficiario" maxlength="128" name="empresa_beneficiario" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_empresa_endereco" class="control-label col-sm-3">Endereço:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_empresa_endereco" maxlength="64" name="empresa_endereco" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_empresa_estado" class="control-label col-sm-3">Estado:</label>
    <div class="col-sm-6">
        <select class="form-control" id="id_empresa_estado" name="empresa_estado" disabled="disabled">
            <option value="--">--</option>
            <option value="AC">AC</option>
            <option value="AL">AL</option>
            <option value="AP">AP</option>
            <option value="AM">AM</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="DF">DF</option>
            <option value="ES">ES</option>
            <option value="GO">GO</option>
            <option value="MA">MA</option>
            <option value="MT">MT</option>
            <option value="MS">MS</option>
            <option value="MG">MG</option>
            <option value="PA">PA</option>
            <option value="PB">PB</option>
            <option value="PR">PR</option>
            <option value="PE">PE</option>
            <option value="PI">PI</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RS">RS</option>
            <option value="RO">RO</option>
            <option value="RR">RR</option>
            <option value="SC">SC</option>
            <option value="SP">SP</option>
            <option value="SE">SE</option>
            <option value="TO">TO</option>
        </select>
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_empresa_cidade" class="control-label col-sm-3">Cidade:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_empresa_cidade" maxlength="64" name="empresa_cidade" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>

<h4>Dados bancários</h4>
    <div class="form-group ">
    <label for="id_banco" class="control-label col-sm-3">Banco:</label>
    <div class="col-sm-6">
        <select class="form-control" id="id_banco" name="banco" disabled="disabled">
            <option value="">--</option>
            {% for banco in bancos %}
                <option value="{{ banco.id }}">{{ banco.nome }}</option>
            {% endfor %}
        </select>
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_carteira" class="control-label col-sm-3">Carteira:</label>
    <div class="col-sm-6">
        <select class="form-control" id="id_carteira" name="carteira" disabled="disabled">
            <option value="">--</option>
            {% for carteira in carteiras %}
                <option value="{{ carteira.id }}">{{ carteira.nome }}</option>
            {% endfor %}
        </select>
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_banco_agencia" class="control-label col-sm-3">Agência:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_banco_agencia" maxlength="4" name="banco_agencia" value="" type="text" disabled="disabled" />
        <p class="help-block">Preencha a agência com 4 dígitos.</p>
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_banco_conta" class="control-label col-sm-3">Conta Corrente sem o dígito:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_banco_conta" maxlength="11" name="banco_conta" value="" type="text" disabled="disabled" />
        <p class="help-block">Preencha a conta corrente com 7 dígitos.</p>
        <ul class="errorlist" style="display: none"><li>Este campo é obrigatório.</li></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_banco_convenio" class="control-label col-sm-3">Convênio:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_banco_convenio" maxlength="7" name="banco_convenio" value="" type="text" disabled="disabled" />
        <p class="help-block">Preencha a código do convênio.</p>
        <ul class="errorlist" style="display: none"></ul>
    </div>
</div>

<h4>Instruções no boleto</h4>
<div class="form-group ">
    <label for="id_linha_1" class="control-label col-sm-3">Linha 1:</label>
    <div class="col-sm-6">
        <input class="form-control" disabled="disabled" id="id_linha_1" maxlength="64" name="linha_1" type="text" value="SR CAIXA NÃO ACEITAR APÓS VENCIMENTO." />
        <p class="help-block">Esta linha não pode ser alterada.</p>
        <ul class="errorlist" style="display: none"></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_linha_2" class="control-label col-sm-3">Linha 2:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_linha_2" maxlength="64" name="linha_2" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"></ul>
    </div>
</div>
<div class="form-group ">
    <label for="id_linha_3" class="control-label col-sm-3">Linha 3:</label>
    <div class="col-sm-6">
        <input class="form-control" id="id_linha_3" maxlength="64" name="linha_3" value="" type="text" disabled="disabled" />
        <ul class="errorlist" style="display: none"></ul>
    </div>
</div>

<div class="alert alert-info" id="alertaInfo">
    <h4>Verifique todos os dados com atenção. Se algum campo for preenchido incorretamente o Boleto Bancário poderá não ser emitido ou, em alguns casos, o pagamento não poderá ser corretamente identificado. Após salvar, imprima o boleto de teste e faça o pagamento do mesmo para garantir o funcionamento.</h4>
</div>

<div id="modalBoletoTeste" class="modal fade">
	<div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="no-margin">Boleto de teste</h4>
            </div>
            <div class="modal-body corpo">
            </div>
            <div class="modal-footer">
                <button type="button" class="button btn btn-default" data-dismiss="modal" aria-hidden="true">
                    <span class="glyphicon glyphicon-remove"></span>
                    Fechar
                </button>
            </div>
        </div>
	</div>
</div>