$(document).ready(function () {

    // CONSTANTES
    var SERVICOSINDISPONIVEIS = '<h5 style="text-align:center" class="central_servicos__descricao">Serviços temporariamente indisponíveis. Por favor, tente novamente mais tarde.</h5>';
    var SEMLOCAIS = '<h5 style="text-align:center" class="central_servicos__descricao">Não há resultados para essa localização</h5>';

    /*Daclaração das variaveis*/
    var servicoId = $("input[name='servico']:checked").val(); // Pega a id do serviço escolhido
    var buscaLocais = $("#buscaLocais").val(); // Paga o dado digitado no campo de pesquisa
    var pagina = 1;

    var resultados;
    var ondeparou = 0;

    //Inicia o template com as classes e ids abaixo ocultas
    $('.locais-atendimento__resultado').hide();
    $('#spinner').hide();
    $('#titulo_locais_proximos').hide();
    $('#maisresultados').hide();
    $('#aviso').hide();

    $('#maisresultados').click(function () {
        renderMore();
    });

    /*FORMULARIO LOCIAS DE ATENDIMENTO*/
    $("#formLocaisAtendimento").validate({
        errorPlacement: function (error, element) {
            error.appendTo(element.parent().parent());
        },

        rules: {
            servico: {
                required: true
            },

            idMuni: {
                required: true
            }
        }
    });


    $('#formLocaisAtendimento').on("submit", function (event) {
        event.preventDefault();

        if ($(this).valid()) {
            /*Oculta os elementos abaixo novamente caso o usuário faça outra consulta*/
            $('.locais-atendimento__resultado').hide();
            $('#spinner').hide();
            $('#titulo_locais_proximos').hide();
            $('#maisresultados').hide();
            $('#aviso').hide();
            $('.locais-atendimento__resultado')[0].innerHTML = ``; // Apaga o conteúdo da classe locais-atendimento__resultado, para limpar os resultados anteriores

            pagina = 1;
            servicoId = $("input[name='servico']:checked").val();
            buscaLocais = $("select[name='idMuni']").val();
            event.preventDefault();

            $('#spinner').show();
            getEnderecos(servicoId, buscaLocais, pagina);
        } else {
            for (var i = 0; i < 2; i++) {
                $("#formLocaisAtendimento label.error")[i].style.color = "#f6811d";
                $("#formLocaisAtendimento label.error")[0].style.marginLeft = "15px";
                $("#formLocaisAtendimento label.error")[i].style.fontSize = '1.125rem';
            }
        }
    });

    function getEnderecos(servicoId, busca_locais, pagina) {
        $.ajax({
            type: 'GET',
            url: `/_service/servicedetran/buscalocais?idtipo=${servicoId}&idmuni=${busca_locais}`
        }).done(function (resultado) {

            var enderecos = resultado;
            resultados = enderecos;

            if (enderecos.length > 0) {
                $('#titulo_locais_proximos').show();

                if (enderecos.length > 4) {
                    render(enderecos);
                    ondeparou = 4;
                    $('#maisresultados').show();
                } else {
                    render(enderecos);
                }

            } else {
                $('#spinner').hide();

                $('#aviso').show();
                $('#aviso')[0].innerHTML = SEMLOCAIS;

            }

        }).fail(function () {
            $('#spinner').hide();
            $('#aviso').show();
            $('#aviso')[0].innerHTML = SERVICOSINDISPONIVEIS;
        });
    }

    function render(enderecos) {

        var parts = [];
        parts.push(`<div class="locais-atendimento__lista"> `);

        for (var i = 0; i < enderecos.length; i++) {

            if (i < 4) {
                parts.push(`<div class="locais-atendimento__item"><address>`);

                if (enderecos[i].text) {
                    parts.push(`<div class="locais-atendimento__item__titulo">${enderecos[i].text}</div>`);
                }
                
                parts.push(`<div class="locais-atendimento__item__endereco">`);

                if ((enderecos[i]["full-address"].address) && (enderecos[i]["full-address"].number)) {
                    parts.push(`${enderecos[i]["full-address"].address}, ${enderecos[i]["full-address"].number}<br>`);
                }

                if (enderecos[i]["full-address"].district) {
                    parts.push(`${enderecos[i]["full-address"].district}<br>`);
                }

                if (enderecos[i]["full-address"].zip) {
                    parts.push(`CEP: ${enderecos[i]["full-address"].zip}<br>`);
                }

                if (enderecos[i]["full-address"].city) {
                    parts.push(`${enderecos[i]["full-address"].city}<br>`);
                }

                if (enderecos[i].telefones && enderecos[i].telefones.length > 0) {
                    var telefones = enderecos[i].telefones.map(function (telefone) {
                        if (telefone.length > 9) {
                            return telefone.replace(/([0-9]{2})([0-9]{4})([0-9]+)/, "($1) $2-$3");
                        } else {
                            return telefone.replace(/([0-9]{4})([0-9]+)/, "$1-$2");
                        }
                    }).join("<br>");
                    parts.push(`${telefones}`);
                }

                parts.push("</div></address>");

                if (enderecos[i].href) {
                    parts.push(`<p class="locais-atendimento__link">
                                        <a href="${enderecos[i].href}" target="_blank">
                                            Ver mapa
                                        </a>
                                    </p>`);
                }
                parts.push("</div>");

            }
        }

        parts.push(`</div>`);
        $('#spinner').hide();
        $('.locais-atendimento__resultado').append(parts.join("")).show();
    }

    function renderMore() {
        var parts = [];
        parts.push(`<div class="locais-atendimento__lista"> `);

        for (var i = ondeparou; i < ondeparou + 4; i++) {
            if (resultados[i]) {
                parts.push(`<div class="locais-atendimento__item"><address>`);

                if (resultados[i].text) {
                    parts.push(`<div class="locais-atendimento__item__titulo">${resultados[i].text}</div>`);
                }
                
                parts.push(`<div class="locais-atendimento__item__endereco">`);
                
                if ((resultados[i]["full-address"].address) && (resultados[i]["full-address"].number)) {
                    parts.push(`${resultados[i]["full-address"].address}, ${resultados[i]["full-address"].number}<br>`);
                }

                if (resultados[i]["full-address"].district) {
                    parts.push(`${resultados[i]["full-address"].district}<br>`);
                }

                if (resultados[i]["full-address"].zip) {
                    parts.push(`CEP: ${resultados[i]["full-address"].zip}<br>`);
                }

                if (resultados[i]["full-address"].city) {
                    parts.push(`${resultados[i]["full-address"].city}<br>`);
                }

                if (resultados[i].telefones && resultados[i].telefones.length > 0) {
                    var telefones = resultados[i].telefones.map(function (telefone) {
                        if (telefone.length > 9) {
                            return telefone.replace(/([0-9]{2})([0-9]{4})([0-9]+)/, "($1) $2-$3");
                        } else {
                            return telefone.replace(/([0-9]{4})([0-9]+)/, "$1-$2");
                        }
                    }).join("<br>");
                    parts.push(`${telefones}`);
                }
                
                parts.push("</div></address>");

                if (resultados[i].href) {
                    parts.push(`</address>
                                    <p class="locais-atendimento__link">
                                        <a href="${resultados[i].href}" target="_blank">
                                            Ver mapa
                                        </a>
                                    </p>
                            </div>`);
                }
            }
        }

        parts.push(`</div>`);
        ondeparou = ondeparou + 4;
        if (ondeparou >= resultados.length) {
            $("#maisresultados").hide();
        }

        $('#spinner').hide();
        $('.locais-atendimento__resultado').append(parts.join("")).show();
    }

});