<!DOCTYPE html>
<html>

<head>
    <title>Cappta - Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = " crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
    <link rel="stylesheet" href="css/sample.css">
    <!-- <script src="../src/api/cappta-checkout.js"></script> -->
     <script type="text/javascript" src="http://cappta.api.s3.amazonaws.com/v3/dist/cappta-checkout.js"></script>
    <script src="js/sample-recurrency.js"></script>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Cappta - Sample</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li>
                        <a href="index.html">Pagamentos</a>
                    </li>
                    <li class="active">
                        <a href="recurrency.html">Recorrência
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href="token-payment.html">Tokenização</a>
                    </li>
                </ul>
            </div>
            <div>
                <div class="modal fade" id="plan_modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="subscription_modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="billing_address_modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="billing_date_modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="discount_modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="discount_list_modal">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width:1000px">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="item_modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="item_list_modal">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width:1000px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div class="col-xs-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Planos</div>
                        <div class="panel-body">
                            <button type="button" class="btn btn-default btn-sm" aria-label="Left Align" id="button_getPlans" onclick="SampleRecurrency.getPlans();">
                                <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Listar planos
                            </button>
                            <button type="button" class="btn btn-default btn-sm" id="button_createPlan" href="modals/plan_form.html" data-target="#plan_modal"
                                data-toggle="modal">
                                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Novo plano
                            </button>
                            <br />
                            <br />
                            <table class="table hidden" id="plan_table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nome</th>
                                        <th>Data de criação</th>
                                        <th>Status</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="plan_list_result">
                                </tbody>
                                <script id="plan_list_template" type="text/template">
                                    <tr>
                                        <td>{{id}}</td>
                                        <td>{{name}}</td>
                                        <td>{{created_at}}</td>
                                        <td>{{status}}</td>
                                        <td>
                                            <button class="btn btn-primary btn-xs" id="{{id}}_show" onclick="SampleRecurrency.getPlanById('{{id}}')">Visualizar</button>
                                            <button class="btn btn-danger btn-xs" id="{{id}}_delete" onclick="SampleRecurrency.deletePlan('{{id}}')">Excluir</button>
                                        </td>
                                    </tr>
                                </script>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Assinaturas</div>
                        <div class="panel-body">
                            <button type="button" class="btn btn-default btn-sm" id="button_getSubscriptions" onclick="SampleRecurrency.getSubscriptions();">
                                <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Listar assinaturas
                            </button>
                            <button type="button" class="btn btn-default btn-sm" id="button_createSubscription" href="modals/subscription_form.html"
                                data-target="#subscription_modal" data-toggle="modal">
                                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Nova assinatura
                            </button>
                            <br />
                            <br />
                            <table class="table hidden" id="subscription_table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nome do cliente</th>
                                        <th>E-mail do cliente</th>
                                        <th>Data de criação</th>
                                        <th>Status</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="subscription_list_result">
                                </tbody>
                                <script id="subscription_list_template" type="text/template">
                                    <tr>
                                        <td>{{id}}</td>
                                        <td>{{customer.name}}</td>
                                        <td>{{customer.email}}</td>
                                        <td>{{created_at}}</td>
                                        <td>{{status}}</td>
                                        <td>
                                            <button class="btn btn-primary btn-xs" id="{{id}}_show" id="button_getSubscriptionById" onclick="SampleRecurrency.getSubscriptionById('{{id}}')">Visualizar</button>
                                            <span class="dropdown">
                                            <button class="btn btn-items btn-xs dropdown-toggle" type="button" id="dropdownItems" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                                Itens
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownItems">
                                                <li><a href="modals/item_form.html" data-target="#item_modal" id="button_createSubscriptionItems"
                                                        data-toggle="modal" data-id="{{id}}">Incluir</a></li>
                                                <li><a href="modals/item_list.html" data-target="#item_list_modal" id="button_listSubscriptionItems"
                                                        data-toggle="modal" data-id="{{id}}">Listar</a></li>
                                            </ul>
                                            </span>
                                            <span class="dropdown">
                                            <button class="btn btn-discount btn-xs dropdown-toggle" type="button" id="dropdownDiscounts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                                Descontos
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownDiscounts">
                                                <li><a href="modals/discount_form.html" data-target="#discount_modal" id="button_createSubscriptionDiscount"
                                                        data-toggle="modal" data-id="{{id}}">Incluir</a></li>
                                                <li><a href="modals/discount_list.html" data-target="#discount_list_modal" id="button_listSubscriptionDiscounts"
                                                        data-toggle="modal" data-id="{{id}}">Listar</a></li>
                                            </ul>
                                            </span>
                                            <button class="btn btn-info btn-xs" id="button_updateSubscriptionCard" onclick="SampleRecurrency.updateSubscriptionCard('{{id}}')">Editar cartão</button>
                                            
                                            <button class="btn btn-warning btn-xs" id="button_updateSubscriptionBillingDate" href="modals/billing_date_form.html" data-target="#billing_date_modal"
                                                data-toggle="modal" data-id="{{id}}">Editar data de faturamento</button>
                                            <button class="btn btn-danger btn-xs" id="button_cancelSubscription" onclick="SampleRecurrency.cancelSubscription('{{id}}')">Cancelar</button>
                                        </td>
                                    </tr>
                                </script>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Faturas</div>
                        <div class="panel-body">
                            <button type="button" class="btn btn-default btn-sm" id="button_getInvoices" onclick="SampleRecurrency.getInvoices();">
                                <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Listar faturas
                            </button>
                            <br />
                            <br />
                            <table class="table hidden" id="invoice_table">
                                <thead>
                                    <tr>
                                        <th>Código</th>
                                        <th>Valor em centavos</th>
                                        <th>Status</th>
                                        <th>Data vencimento</th>
                                        <th>Adquirente</th>
                                        <th>Bandeira</th>
                                        <th>NSU</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="invoice_list_result">
                                </tbody>
                                <script id="invoice_list_template" type="text/template">
                                    <tr>
                                        <td>{{id}}</td>
                                        <td>{{amount}}</td>
                                        <td>{{status}}</td>
                                        <td>{{due_at}}</td>
                                        <td>{{acquirer_name}}</td>
                                        <td>{{card_brand_name}}</td>
                                        <td>{{acquirer_authorization_code}}</td>
                                        <td>
                                            <button class="btn btn-primary btn-xs" id="{{id}}_show" onclick="SampleRecurrency.getInvoiceById('{{id}}')">Visualizar</button>
                                            <button class="btn btn-danger btn-xs" id="{{id}}_delete" onclick="SampleRecurrency.cancelInvoice('{{id}}')">Estornar</button>
                                        </td>
                                    </tr>
                                </script>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Mensagens</div>
                        <div class="panel-body">
                            <pre id="response"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>