{% load filters %}
                            <table class="table tabela-bancos">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Banco</th>
                                        <th>Agencia</th>
                                        <th>Conta</th>
                                        <th>Poupança?</th>
                                        <th>CPF / CNPJ</th>
                                        <th>Favorecido</th>
                                    </tr>
                                </thead>
                                {% for banco in bancos %}
                                    <tr id="linha-banco-{{ banco.id }}">
                                        <td class="image">
                                            <a href="#editarBanco" class="editar-banco" data-toggle="modal" data-banco-id="{{ banco.id }}">
                                                <span rel="tooltip" data-original-title="Clique aqui para editar as configurações deste banco.">
                                                    <img src="{{ STATIC_URL }}admin/img/formas-de-pagamento/{{ banco.imagem }}" alt="{{ banco.nome }}" class="banco"/>
                                                </span>
                                            </a>
                                        </td>
                                        <td class="nome" data-toggle="modal">
                                            <a href="#editarBanco" class="editar-banco" data-toggle="modal" data-banco-id="{{ banco.id }}">
                                                <span rel="tooltip" data-original-title="Clique aqui para editar as configurações deste banco.">
                                                    {{ banco.codigo }} - {{ banco.nome }}
                                                </span>
                                            </a>
                                        </td>
                                        {% if banco.pagamento_banco %}
                                        <td class="banco-agencia">{{ banco.pagamento_banco.agencia }}</td>
                                        <td class="banco-numeroconta">{{ banco.pagamento_banco.numero_conta }}</td>
                                        <td class="banco-poupanca">{{ banco.pagamento_banco.poupanca|yesno:'Sim,Não' }}</td>
                                        <td class="banco-cpfcnpj">{{ banco.pagamento_banco.cpf_cnpj|formatar_cpf_cnpj }}</td>
                                        <td class="banco-favorecido">{{ banco.pagamento_banco.favorecido }}</td>
                                        <td class="banco-ativo">
                                            <span class="label label-{% if banco.pagamento_banco.ativo %}success{% else %}important{% endif %}">
                                            {% if banco.pagamento_banco.ativo %}Ativo{% else %}Inativo{% endif %}
                                            </span>
                                        </td>
                                        <td class="botao-remover">
                                            <button type="button" class="btn btn-danger btn-xs remover-banco" data-banco-id="{{ banco.id }}">
                                                <span class="glyphicon glyphicon-trash"></span>
                                            </button>
                                        </td>
                                        {% else %}
                                        <td class="banco-agencia">-</td>
                                        <td class="banco-numeroconta">-</td>
                                        <td class="banco-poupanca">-</td>
                                        <td class="banco-cpfcnpj">-</td>
                                        <td class="banco-favorecido">-</td>
                                        <td class="banco-ativo">
                                            <span class="label label-important">
                                                <span class="glyphicon glyphicon-cog"></span> Não configurado
                                            </span>
                                        </td>
                                        <td class="botao-remover">
                                            <a href="#" class="btn btn-danger btn-xs remover-banco" data-banco-id="{{ banco.id }}" style="display: none;">
                                                <span class="glyphicon glyphicon-trash"></span>
                                            </a>
                                        </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </table>


<div id="editarBanco" 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">Configuracoes para <span class="banco-nome"></span></h4>
            </div>
            <div class="modal-body">
                {% csrf_token %}
                <div id="bancoMensagem" class="alert alert-dismissible" role="alert" style="display: none;">
                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <strong class="banco-titulo"></strong>
                    <span class="banco-texto"></span>
                </div>
                <div class="box">
                    <div class="box-header">
                        <h3>
                            Editar banco <span class="banco-nome"></span> para Depósito Bancário
                        </h3>
                    </div>
                    <div class="box-content">
                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-3">
                                <h4>
                                    <img src="" alt="" class="banco-imagem" style="max-width: 40px; max-height: 40px; border-radius: 3px;">
                                    <span class="banco-codigo"></span> - <span class="banco-nome"></span>
                                </h4>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="id_banco_ativo" class="control-label col-sm-3">Banco ativo?</label>
                            <div class="col-sm-9">
                                <select class="form-control select_ativo" id="id_banco_ativo" name="banco_ativo" style="color: #ffffff;">
                                    <option value="False" style="background-color: red">Não</option>
                                    <option value="True" style="background-color: green">Sim</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="id_agencia" class="control-label col-sm-3">
                                Agência
                            </label>
                            <div class="col-sm-9">
                                <input class="form-control" id="id_agencia" maxlength="11" name="agencia" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="id_numero_conta" class="control-label col-sm-3">
                                Conta
                            </label>
                            <div class="col-sm-9">
                                <input class="form-control" id="id_numero_conta" maxlength="11" name="numero_conta" type="text">
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="col-sm-9 col-sm-offset-3">
                                <label class="checkbox">
                                    <input id="id_poupanca" name="poupanca" type="checkbox">
                                    Conta poupança?
                                </label>
                            </div>
                        </div>
                        <div style="display: block;" class="form-group hide">
                            <label for="id_operacao" class="control-label col-sm-3">
                                Operação/Variação
                            </label>
                            <div class="col-sm-9">
                                <input class="form-control" id="id_operacao" name="operacao" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="id_cpf_cnpj" class="control-label col-sm-3">
                                CPF ou CNPJ
                            </label>
                            <div class="col-sm-9">
                                <input class="form-control" id="id_cpf_cnpj" maxlength="18" name="cpf_cnpj" type="text">

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="id_favorecido" class="control-label col-sm-3">
                                Favorecido
                            </label>
                            <div class="col-sm-9">
                                <input class="form-control" id="id_favorecido" maxlength="256" name="favorecido" type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="enviarBancos" type="button">
                    <span class="glyphicon glyphicon-ok"></span>
                    Salvar
                </button>
                <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>

<script type="application/javascript">
    var bancos = {
    {% for banco in bancos %}
        'banco_{{ banco.id }}': {
            'codigo': '{{ banco.codigo }}',
            'nome': '{{ banco.nome }}',
            'imagem': '{{ STATIC_URL }}admin/img/formas-de-pagamento/{{ banco.imagem }}',
            {% if banco.pagamento_banco %}
            'configuracao': {
                'ativo': {{ banco.pagamento_banco.ativo|lower }},
                'agencia': "{{ banco.pagamento_banco.agencia }}",
                'numero_conta': "{{ banco.pagamento_banco.numero_conta }}",
                'poupanca': {{ banco.pagamento_banco.poupanca|lower }},
                'cpf_cnpj': "{{ banco.pagamento_banco.cpf_cnpj|formatar_cpf_cnpj }}",
                'favorecido': "{{ banco.pagamento_banco.favorecido }}"
            }
            {% endif %}
        },
    {% endfor %}
    };
    var $modal = $("#editarBanco");
    var $mensagem = $("#bancoMensagem");
    var $tabelaBancos = $('.tabela-bancos');

    function formatar_cpf_cnpj(value) {
        if (!value) {
            return value;
        }
        if (value.length == 11) {
            return value.slice(0, 3) + "." + value.slice(3, 6) + "." + value.slice(6, 9) + "-" + value.slice(9, 11);
        }
        if (value.length == 14) {
            return value.slice(0, 2) + "." + value.slice(2, 5) + "." + value.slice(5, 8) + "/" + value.slice(8, 12) + "-" + value.slice(12, 14);
        }
        return value;
    }

    function definirValoresDeCampo(configuracao) {
        $("#id_banco_ativo").css("background-color", (configuracao.ativo ? "green" : "red")).val((configuracao.ativo ? "True" : "False"));
        $("#id_agencia").val(configuracao.agencia);
        $("#id_numero_conta").val(configuracao.numero_conta);
        $("#id_poupanca").prop("checked", configuracao.poupanca);
        $("#id_cpf_cnpj").val(configuracao.cpf_cnpj);
        $("#id_favorecido").val(configuracao.favorecido);
    }

    function definirValoresDeTabela(dados) {
        var $linha = $("#linha-banco-" + dados.banco_id);
        $linha.find(".banco-ativo .label").removeClass("label-important").removeClass("label-success").addClass(dados.ativo ? "label-success" : "label-important").text((dados.ativo ? "Ativo" : "Inativo"));
        $linha.find(".banco-agencia").text(dados.agencia);
        $linha.find(".banco-numeroconta").text(dados.numero_conta);
        $linha.find(".banco-poupanca").text(dados.poupanca ? "Sim" : "Não");
        $linha.find(".banco-cpfcnpj").text(formatar_cpf_cnpj(dados.cpf_cnpj));
        $linha.find(".banco-favorecido").text(dados.favorecido);
        $linha.find(".botao-remover .remover-banco").show();
        var banco = bancos["banco_" + dados.banco_id];
        if (!banco.hasOwnProperty("configuracao")) {
            banco.configuracao = {
                'ativo': false,
                'agencia': "",
                'numero_conta': "",
                'poupanca': false,
                'cpf_cnpj': "",
                'favorecido': ""
            }
        }
        banco.configuracao.ativo = dados.ativo;
        banco.configuracao.agencia = dados.agencia;
        banco.configuracao.numero_conta = dados.numero_conta;
        banco.configuracao.poupanca = dados.poupanca;
        banco.configuracao.cpf_cnpj = dados.cpf_cnpj;
        banco.configuracao.favorecido = dados.favorecido;
    }

    function limparCampos() {
        $mensagem.hide();
        $("#id_banco_ativo").css("background-color", "red").val("False");
        $("#id_agencia").val('');
        $("#id_numero_conta").val('');
        $("#id_poupanca").prop("checked", false);
        $("#id_cpf_cnpj").val('');
        $("#id_favorecido").val('');
    }

    $("#enviarBancos").click(function() {
        $mensagem.slideUp();
        var url = "https://{{ request.get_host }}{% url 'config_pagamento_configuracao_complemento' pagamento_id=pagamento.id tipo='Bancos' metodo='POST' %}";
        var dados = {
            "banco_id": $modal.data("banco-id"),
            "ativo": $("#id_banco_ativo").val() == "True",
            "agencia": $("#id_agencia").val(),
            "numero_conta": $("#id_numero_conta").val(),
            "poupanca": $("#id_poupanca").prop("checked"),
            "cpf_cnpj": $("#id_cpf_cnpj").val(),
            "favorecido": $("#id_favorecido").val()
        };
        $.getJSON(url, dados)
            .fail(function (data) {
            })
            .done(function (data) {
                $mensagem.removeClass("alert-success").removeClass("alert-danger");
                if (data.sucesso) {
                    $mensagem.addClass("alert-success");
                    $mensagem.find(".banco-titulo").text("Sucesso");
                    $mensagem.find(".banco-texto").text(data.content);
                    definirValoresDeTabela(dados);
                }
                else {
                    $mensagem.addClass("alert-danger");
                    $mensagem.find(".banco-titulo").text("Erro na gravação");
                    $mensagem.find(".banco-texto").text(data.content);
                }
                $mensagem.slideDown();
            });
    });

    $("#id_banco_ativo").change(function() {
        $(this).css("background-color", ($(this).val() == "True" ? "green" : "red"));
    });

    $tabelaBancos.on("click", ".editar-banco", function() {
        limparCampos();
        var banco_id = $(this).data("banco-id");
        var banco = bancos["banco_" + banco_id];
        $modal.data("banco-id", banco_id);
        $modal.find(".banco-nome").text(banco.nome);
        $modal.find(".banco-codigo").text(banco.codigo);
        var $imagem = $modal.find(".banco-imagem");
        $imagem.attr("alt", banco.nome);
        $imagem.attr("src", banco.imagem);
        if (banco.configuracao) {
            definirValoresDeCampo(banco.configuracao);
        }
    });

    $tabelaBancos.on("click", ".remover-banco", function(e) {
        var banco_id = $(this).data("banco-id");
        e.preventDefault();
        if (confirm("Deseja remover as configurações do Banco " + bancos["banco_" + banco_id].nome + "?")) {
            window.location = "https://{{ request.get_host }}{% url 'config_pagamento_configuracao_complemento' pagamento_id=pagamento.id tipo='Bancos' metodo='DELETE' %}?redirect=1&banco_id=" + banco_id;
        }
    });
</script>