<div class="fancy-title title-dotted-border mt-4 mb-1 title-left" style="margin-top: 0px !important;">
    <h4>Meus Endereços </h4><span style="float: right !important;"><a href="" class="button-circle button j_address_show_add button-small" style="margin-top: -4px;"><i class="fal fa-plus-circle"></i> Endereços</a> </span>
</div>

<div class="acc_content clearfix j_show_add bottommargin-sm topmargin-sm" style="display: none;">
    <form id="register-form" name="register-form" class="nobottommargin" action="<?= url("restrito/endereco")?>" method="post">
        <?= csrf_input(); ?>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="user_id" value="<?= user()->data()->id?>">
        <input type="hidden" name="ibge" id="ibge" value="">


        <div class="clear"></div>
        <div class="col_half">
            <label for="zipcode">Cep*</label>
            <input type="text" id="zipcode" name="zipcode" value="" class="form-control form-control-pill mask-cep" autocomplete="off"/>
        </div>
        <div class="col_half col_last">
            <label for="type">Tipo</label>
            <input type="text" id="type" name="type" value="" class="form-control form-control-pill" autocomplete="off"/>
            <span class="small">Ex: Casa, Trabalho</span>
        </div>

        <div class="clear"></div>
        <div class="col_two_third">
            <label for="street">Endereço*</label>
            <input type="text" id="street" name="street" value="" class="form-control form-control-pill" />
        </div>
        <div class="col_one_third col_last">
            <label for="number">Número*</label>
            <input type="text" id="number" name="number" value="" class="form-control form-control-pill" />
        </div>

        <div class="clear"></div>
        <div class="col_full">
            <label for="complement">Complemento</label>
            <input type="text" id="complement" name="complement" value="" class="form-control form-control-pill" />
        </div>

        <div class="clear"></div>
        <div class="col_two_fifth">
            <label for="neighborhood">Bairro*</label>
            <input type="text" id="neighborhood" name="neighborhood" value="" class="form-control form-control-pill" />
        </div>
        <div class="col_two_fifth">
            <label for="city">Cidade*</label>
            <input type="text" id="city" name="city" value="" class="form-control form-control-pill" />
        </div>
        <div class="col_one_fifth col_last">
            <label for="state">Estado*</label>
            <input type="text" id="state" name="state" value="" class="form-control form-control-pill" />
        </div>

        <div class="clear"></div>
        <div class="col_full nobottommargin">
            <button class="button button-circle button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Cadastrar</button>
        </div>
    </form>
    <hr>
</div>
<div class="acc_content clearfix j_show_update bottommargin-sm topmargin-sm" style="display: none;">
    <form id="register-form" name="register-form" class="nobottommargin" action="<?= url("restrito/endereco")?>" method="post">
        <?= csrf_input_alt(); ?>
        <input type="hidden" name="action" value="update">
        <input type="hidden" name="user_id" value="<?= user()->data()->id?>">
        <input type="hidden" name="id" id="id-e" value="">
        <input type="hidden" name="ibge" id="ibge-e" value="">

        <div class="clear"></div>
        <div class="col_half">
            <label for="zipcode">Cep*</label>
            <input type="text" id="zipcode-e" name="zipcode" value="" class="form-control form-control-pill mask-cep" autocomplete="off"/>
        </div>
        <div class="col_half col_last">
            <label for="type">Tipo</label>
            <input type="text" id="type-e" name="type" value="" class="form-control form-control-pill" autocomplete="off"/>
            <span class="small">Ex: Casa, Trabalho</span>
        </div>

        <div class="clear"></div>
        <div class="col_two_third">
            <label for="street">Endereço*</label>
            <input type="text" id="street-e" name="street" value="" class="form-control form-control-pill" />
        </div>
        <div class="col_one_third col_last">
            <label for="number">Número*</label>
            <input type="text" id="number-e" name="number" value="" class="form-control form-control-pill" />
        </div>

        <div class="clear"></div>
        <div class="col_full">
            <label for="complement">Complemento</label>
            <input type="text" id="complement-e" name="complement" value="" class="form-control form-control-pill" />
        </div>

        <div class="clear"></div>
        <div class="col_two_fifth">
            <label for="neighborhood">Bairro*</label>
            <input type="text" id="neighborhood-e" name="neighborhood" value="" class="form-control form-control-pill" />
        </div>
        <div class="col_two_fifth">
            <label for="city">Cidade*</label>
            <input type="text" id="city-e" name="city" value="" class="form-control form-control-pill" />
        </div>
        <div class="col_one_fifth col_last">
            <label for="state">Estado*</label>
            <input type="text" id="state-e" name="state" value="" class="form-control form-control-pill" />
        </div>

        <div class="clear"></div>
        <div class="col_full nobottommargin">
            <button class="button button-circle button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Alterar</button>
        </div>
    </form>
    <hr>
</div>

<table class="table table-bordered table-striped topmargin-sm">
    <thead>
    <tr>
        <th>Cep</th>
        <th>Endereço</th>
        <th>Ação</th>
    </tr>
    </thead>
    <tbody>
    <?php


    if($variableData):
        foreach ($variableData as $ad):
        ?>
    <tr>
        <td>
            <code><?= $ad->zipcode ?></code>
        </td>
        <td><?= $ad->street, " ", $ad->number, " (", $ad->city, ")" ?></td>
    <td><a href="" class="button button-circle button-small bg-danger"
           data-post="<?= url("/restrito/endereco"); ?>"
           data-action="delete"
           data-confirm="Tem certeza que deseja deletar o endereço?"
           data-id="<?= $ad->id; ?>"><i class="far fa-trash"></i></a><a href="" class="button button-circle button-small bg-info j_address_show_update" data-id="<?= $ad->id; ?>"><i class="far fa-pen"></i></a></td>
    </tr>
    <?php
    endforeach;
    else:
        ?>
        <tr>
            <td colspan="3">
                Você ainda não possui um endereço cadastrado!
            </td>

        </tr>
    <?php
    endif;?>

    </tbody>
</table>

<?php $this->start("scripts"); ?>
<script type="text/javascript">

    function scrollToAnchor(aid){
        var tag = $("#"+aid);
        $('html,body').animate({scrollTop: tag.offset().top},1400);
    }

    if($("#j_scroll").length){
        scrollToAnchor('j_scroll');
    }


    $(".j_address_show_add").on("click", function (e) {
        e.preventDefault();
        $(".j_show_add").fadeIn("slow");
        $(".j_show_update").fadeOut("fast");
    });

    $(".j_address_show_update").on("click", function (e) {
        e.preventDefault();
        $(".j_show_update").fadeOut("fast");
        $(".j_show_add").fadeOut("fast");
        $(".j_show_update").fadeIn("slow");
        var id = $(this).data("id");
        var load = $(".ajax_load");
            load.fadeIn(200).css("display", "flex");
            $.post('<?= url("/restrito/endereco");?>', { id: id, action:"complete" }, function (response) {

                if(response){

                    $("#number-e").val(response.number);
                    $("#type-e").val(response.type);
                    $("#street-e").val(response.street);
                    $("#neighborhood-e").val(response.neighborhood);
                    $("#complement-e").val(response.complement);
                    $("#city-e").val(response.city);
                    $("#state-e").val(response.state);
                    $("#zipcode-e").val(response.zipcode);
                    $("#ibge-e").val(response.ibge);
                    $("#id-e").val(id);
                    load.fadeOut(200);
                }else{
                    load.fadeOut(200);
                }

            }, "json");

    });

    $("#zipcode").on("keyup", function (e) {
        e.preventDefault();

        var zipcode = $(this).val();
        var load = $(".ajax_load");

        if(zipcode.length === 9){
            load.fadeIn(200).css("display", "flex");
            $.post('<?= url("/restrito/endereco");?>', { zipcode: zipcode, action:"search" }, function (response) {

                    if(response.callback){
                        $("#number").val("");
                        $("#type").val("");
                        $("#street").val(response.callback.street);
                        $("#neighborhood").val(response.callback.neighborhood);
                        $("#complement").val(response.callback.complement);
                        $("#city").val(response.callback.city);
                        $("#state").val(response.callback.state);
                        $("#ibge").val(response.callback.ibge);
                        $("#type").focus();
                        load.fadeOut(200);
                    }else{
                        load.fadeOut(200);
                    }

            }, "json");
        }


    });

    $("#zipcode-e").on("keyup", function (e) {
        e.preventDefault();

        var zipcode = $(this).val();
        var load = $(".ajax_load");

        if(zipcode.length === 9){
            load.fadeIn(200).css("display", "flex");
            $.post('<?= url("/restrito/endereco");?>', { zipcode: zipcode, action:"search" }, function (response) {

                if(response.callback){
                    $("#number-e").val("");
                    $("#type-e").val("");
                    $("#street-e").val(response.callback.street);
                    $("#neighborhood-e").val(response.callback.neighborhood);
                    $("#complement-e").val(response.callback.complement);
                    $("#city-e").val(response.callback.city);
                    $("#state-e").val(response.callback.state);
                    $("#ibge-e").val(response.callback.ibge);
                    $("#type-e").focus();
                    load.fadeOut(200);
                }else{
                    load.fadeOut(200);
                }

            }, "json");
        }


    })

</script>
<?php $this->end(); ?>