<html>
<head>
    <script
            src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $("#botao_anterior").click(function(){
            $('#inicio').val($('#pagina_anterior').val());
            $("#pesquisar-ajax").click();
        });

        $("#botao_proximo").click(function(){
            $('#inicio').val($('#pagina_proxima').val());
            $("#pesquisar-ajax").click();
        });

        $("#pesquisar-ajax").click(function () {

            $('#ajax-painel').hide();
            $('#div_paginacao').hide();
            $('#ajax-painel-carregamento').show();

            $('#pesquisar-passos').html('');



            $('#p_nome-error').html("");
            $('#ajax-painel').html("");


            var solicitacaoAjaxConsulta = function() {

                var registerForm = $("#formulario");
                var formData = registerForm.serialize();

                return $.ajax({
                    url: 'dados.php',
                    data: formData,
                    dataType: 'json'
                });
            }

            console.log("Carregando 1!");

            var buscaNome = solicitacaoAjaxConsulta();
            buscaNome.done(function(data) {

                console.log("Carregando 2!");
                console.log(data);
                montarTabela(data);

                var buscaNomeCadunico = solicitacaoAjaxConsulta();
                buscaNomeCadunico.done(function(data) {
                    console.log("Carregando 3!");
                    console.log(data);
                    montarTabela(data);

                    var buscaNomeBpc = solicitacaoAjaxConsulta();
                    buscaNomeBpc.done(function(data) {
                        console.log("Carregando 4!");
                        console.log(data);
                        montarTabela(data);

                    }).fail(function(request, status, erro) {
                        imprimirErro(request, status, erro);
                    });

                }).fail(function(request, status, erro) {
                    imprimirErro(request, status, erro);

                });

            }).fail(function(request, status, erro) {
                imprimirErro(request, status, erro);
            });
        });
    });

    function imprimirErro(request, status, erro) {
        console.log("Problema ocorrido: " + status + "\nDescição: " + erro);
        console.log("Informações da requisição: \n" + request.getAllResponseHeaders());
    }

    function montarTabela(data) {
        //Montar tabela
        if (data.dados) {
            $('#ajax-painel').show();
            $('#ajax-painel-carregamento').hide();
            $('#div_paginacao').show();

            $('#registro_inicio').html(data.registro_inicio);
            $('#registro_fim').html(data.registro_fim);
            $('#descricao_total').html(data.total);
            $('#total_registro').val(data.total);

            if (data.proxima) {
                $('#pagina_proxima').val(data.proxima);
                $('#botao_proximo').show();
            } else {
                $('#pagina_proxima').val('');
                $('#botao_proximo').hide();
            }

            if (data.anterior) {
                $('#pagina_anterior').val(data.anterior);
                $('#botao_anterior').show();
            } else {
                $('#pagina_anterior').val('');
                $('#botao_anterior').hide();
            }

            $('#div_paginacao').show();

            createTable(data.dados);
        }else{
            $('#div_paginacao').hide();
        }
    }


    function clearLoading() {

    }

    function createTable(data) {

        var eTable = '<table id="gridBeneficiarios" class="table tabelaRSICON table-bordered table-hover table-striped"  width="100%" style="font-size:11px">\n' +
            '    <thead>\n' +
            '        <tr class=\'corTitulo\'>\n' +
            '            <th>Abrir</th>\n' +
            '            <th >Nome</th>\n' +
            '            <th style="text-align: center" >Sexo</th>\n' +
            '            <th style="text-align: center">Data de Nascimento</th>\n' +
            '            <th style="text-align: center" >NIS</th>\n' +
            '            <th>Descrição da família</th>\n' +
            '            <th style="text-align: center">UF</th>\n' +
            '            <th style="text-align: center">Município</th>\n' +
            '        </tr>\n' +
            '    </thead>\n';

        $.each(data, function (index, row) {
            eTable += "<tr class=\"tuplaBeneficiario\" id=\"\" onmouseover=\"this.style.cursor='pointer'\"\n" +
                "    data-toggle=\"tooltip\" data-placement=\"right\" title=\"Clique para selecionar\">\n" +
                "\n" +
                "    <td class=\"enviarForm\" text-align=\"center\" onclick=\"enviarForm();\"> <input type='radio' name='id_cras' id='' value=''></td>\n" +
                "    <td class=\"enviarForm\" style=\"text-align: left\" onclick=\"enviarForm('" + row['num_nis_pessoa_atual'] + "','','','');\">" + row['nom_pessoa'] + "</td>\n" +
                "    <td class=\"enviarForm\" onclick=\"enviarForm();\">" + row['cod_sexo_pessoa'] + "</td>\n" +
                "    <td class=\"enviarForm\" align=\"center\" onclick=\"enviarForm();\">" + row['dta_nasc_pessoa'] + "</td>\n" +
                "    <td class=\"enviarForm\" onclick=\"enviarForm();\">" + row['num_nis_pessoa_atual'] + "</td>\n" +
                "    <td>\n" +
                "        <span class=\"mostrarDadosFam\" data-toggle='modal' data-target='#modal_generico' onclick='$(\"#titulo_modal_generico\").html(\"Dados da família\"); $(\"#conteudo_modal_generico\").html(\"\");'>\n" +
                "            <img src='./img/kontact_contacts.png' width='20px' border='0'/>\n" +
                "        </span>\n" +
                "    </td>\n" +
                "    <td class=\"enviarForm\" onclick=\"enviarForm();\">" + row['uf'] + "</td>\n" +
                "    <td class=\"enviarForm\" onclick=\"enviarForm();\">" + row['municipio'] + "</td>\n" +
                "</tr>";
        });
        eTable += "</tbody></table>";
        $('#ajax-painel').html(eTable);
    }
</script>
</head>
<body>
<div id="ajax-painel"></div>
<table id="recordNav" >
    <tr>
        <td nowrap="nowrap"><a href="javascript:void(0);" onclick="moveFirstPage()" id="firstPage">&lt;&lt; Anterior</a></td>
        <td nowrap="nowrap"><a href="javascript:void(0);" onclick="movePreviousPage()" id="previousPage"><img src="/Content/previous.png" alt="" /></a></td>
        <td id="pageTitle"></td>
        <td nowrap="nowrap"><a href="javascript:void(0);" onclick="moveNextPage()" id="nextPage">Próximo &gt;&gt;</a></td>
        <td nowrap="nowrap"><a href="javascript:void(0);" onclick="moveLastPage()" id="lastPage"><img src="/Content/last.png" alt="" /></a></td>
    </tr>
</table>
<table>
    <thead>
        <tr>
            <th style="width:1%"></th>
            <th style="width:94%" nowrap="nowrap">Description</th>
            <th style="width:1%" nowrap="nowrap">Date</th>
            <th style="width:1%" nowrap="nowrap">Acquisition Cost</th>
            <th style="width:1%" nowrap="nowrap">Installation Cost</th>
            <th class="last" style="width:1%" nowrap="nowrap">Delivery Cost</th>
        </tr>
    </thead>
    <tbody id="acquisitionContent"></tbody>
</table>

<button id="pesquisar-ajax" >Pesquisar</button>
</body>
</html>
