{% load static %}
<div class="central_pane">
    <div class="card col-md mx-auto p-0">
        <div class="card-header bg-form-1 m-0">
            <h5 class="card-title">
                <i id="icon" class="{{panel.get_icon}} mr-2"></i> {{ panel.get_title }} <span id="title-cpl"></span>
            </h5>
            <div class="card-tools ml-auto">
                <button type="button" class="btn btn-tool text-white" data-card-widget="collapse">
                    <i id="icon" class="fas fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="content row">
                <div class="col-md row m-0">
                    <div class="card col-md card-main">
                        <div class="card-body col-md p-0">
                            <div class="col-md p-0">
                                <div class="card-body p-0">
                                    <form id="filter-form">
                                        <div class="row mt-2">
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="empresa" class="form-label text-gray">Empresa</label>
                                                    </div>
                                                    <div class="col-md-10">
                                                        {{ panel.get_info.form.empresa }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="vencimento" class="form-label text-gray">Venc</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="date" id="vencimento_from_date" class="form-control">
                                                    </div>
                                                    <div class="col-md-1">
                                                        <label for="vencimento" class="form-label text-gray">Até</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="date" id="vencimento_to_date" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="original_value_from" class="form-label text-gray">Valor de</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="number" id="original_value_from" class="form-control">
                                                    </div>
                                                    <div class="col-md-1">
                                                        <label for="original_value_to" class="form-label text-gray">Até</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="number" id="original_value_to" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="categoria" class="form-label text-gray">Credor</label>
                                                    </div>
                                                    <div class="col-md-10   ">
                                                        {{ panel.get_info.form.tipo_pessoa }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="emissao" class="form-label text-gray">Emissão</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="date" id="emissao_from_date" class="form-control">
                                                    </div>
                                                    <div class="col-md-1">
                                                        <label for="emissao" class="form-label text-gray">Até</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="date" id="emissao_to_date" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="number_from" class="form-label text-gray">Nº de </label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="number" id="number_from" class="form-control" min="0">
                                                    </div>
                                                    <div class="col-md-1">
                                                        <label for="number_to" class="form-label text-gray">Até</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="number" id="number_to" class="form-control" min="0">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-4">
                                                <div class="col-md-10 offset-md-2 pr-0 pl-1">
                                                    {{ panel.get_info.form.pessoa_id }}
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="id_forma_pagamento" class="form-label text-gray">Pagto</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        {{ panel.get_info.form.forma_pagamento }}
                                                    </div>
                                                    <div class="col-md-1">
                                                        <label for="document_id" class="form-label text-gray">Doc.</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="number" id="document_id" class="form-control" min="0">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="status" class="form-label text-gray">Status</label>
                                                    </div>
                                                    <div class="col-md-4">
                                                        {{ panel.get_info.form.status }}
                                                    </div>
                                                    <div class="col-md-4 offset-md-1">
                                                        <button id="reset-btn" class="btn btn-sm bg-form-1 text-white col mb-1">Limpar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                    <div class="row my-3 border pt-1 bg-white" id="payment_row">
                                        <div class="col-md-10">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <label for="lista_conta_bancaria" class="form-label text-gray">Conta</label>
                                                </div>
                                                <div class="col-md-4 pt-1">
                                                    {{ panel.get_info.form.conta_bancaria }}
                                                </div>
                                                <div class="col-md-3 pt-1">
                                                    <select class="form-control" type="text" name="tipo_pagamento" id="tipo_pagamento">
                                                        <option value="" selected>Forma de Pagamento</option>
                                                        <option value="dinheiro">Dinheiro</option>
                                                        <option value="cartao_credito">Cartão de Crédito</option>
                                                        <option value="cheque_avista">Cheque a vista</option>
                                                        <option value="crediario">crediario</option>
                                                        <option value="vale_troca">Vale Troca</option>
                                                        <option value="conta_corrente">Conta Corrente</option>
                                                        <option value="cheque_pre">Cheque Pre</option>
                                                        <option value="cartao_debito">Cartão de Débito</option>
                                                        <option value="troca">Troca</option>
                                                        <option value="transferencia">Transferencia</option>
                                                        <option value="pix">Pix</option>
                                                        <option value="boleto">Boleto</option>
                                                        <option value="promissora">Promissora</option>
                                                        <option value="receber_local">Receber no Local</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <button id="payment-btn" class="btn btn-sm bg-form-1 text-white col mb-1" disabled>Pagar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md"> 
                                            {% include 'card/new_item_btn_alt.html' with label=panel.get_btn_label link=panel.get_btn_link %}
                                        </div>                                        
                                    </div>
                                    <div class="table-responsive" id="table-wrapper">
                                        {{ panel.get_table.body }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    resetBtn = document.getElementById('reset-btn')
    resetBtn.addEventListener('click', function () {
        document.getElementById("filter-form").reset();
    })
</script>