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

<div class="acc_content clearfix j_show_add bottommargin-sm topmargin-sm" style="display: none;">
    <div class="card" style="border: 0;"></div>
    <div class="padding-30" style="max-width: 450px; margin: 0 auto;">
        <form id="register-form" name="register-form" class="nobottommargin cartao_credito"action="<?= url("/cartao")?>" method="post">
            <div class="col_full">
                <input placeholder="Número do cartão" type="text" name="number" id="cc_numero" class="form-control form-control-pill">
            </div>
            <div class="col_full">
                <input placeholder="Nome igual ao cartão" type="text" name="name" id="cc_nome" class="form-control form-control-pill">
            </div>
            <div class="col_half">
                <input placeholder="MM/AA" type="text" name="expiry" id="cc_expira" class="form-control form-control-pill mask-expiry" maxlength="7">
            </div>
            <div class="col_half col_last">
                <input placeholder="CVV" type="text" name="cvv" id="cc_cvv" class="form-control form-control-pill">
            </div>
            <input type="hidden" id="cc_brand" value="">
            <button type="submit" class="button button-circle">Cadastrar Cartão</button>
        </form>

    </div>
    <div class="clear"></div>
    <hr>
</div>


<table class="table table-bordered table-striped topmargin-sm">
    <thead>
    <tr>
        <th>Bandeira</th>
        <th>Número</th>
        <th>Ação</th>
    </tr>
    </thead>
    <tbody>
    <?php


    if($variableData):
        foreach ($variableData as $cd):
            ?>
            <tr>
                <td>
                    <code><?= $cd->brand ?></code>
                </td>
                <td>•••• •••• •••• <?= $cd->last_digits ?></td>
                <td><a href="" class="button button-circle button-small bg-danger"
                       data-post="<?= url("/cartao"); ?>"
                       data-action="delete"
                       data-confirm="Tem certeza que deseja deletar o cartão?"
                       data-id="<?= $cd->id; ?>"><i class="far fa-trash"></i></a></td>
            </tr>
        <?php
        endforeach;
    else:
        ?>
        <tr>
            <td colspan="4">
                Você ainda não possui um endereço cadastrado!
            </td>

        </tr>
    <?php
    endif;?>

    </tbody>
</table>

<?php $v->start("scripts"); ?>
<script src="<?= url("/shared/scripts/card-master/dist/card.js"); ?>"></script>

<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_card_show_add").on("click", function (e) {
        e.preventDefault();
        $(".j_show_add").fadeIn("slow");
    });



    new Card({form: '.cartao_credito', container: '.card',formSelectors: {
            numberInput: 'input#cc_numero',
            expiryInput: 'input#cc_expira',
            cvcInput: 'input#cc_cvv',
            nameInput: 'input#cc_nome'
        }

    });

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