{% extends "theme/base.twig" %}
{% set area = 'cpainel'%}
{% set type = 'conta'%}
{% block CSSfiles %}
    {{ parent() }}
    <!--suppress SpellCheckingInspection, SpellCheckingInspection, HtmlUnknownTarget -->
    <link rel="stylesheet" href="/assets/plugins/multiselect/multiselect.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/daterangepicker/daterangepicker.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/datatables/datatables.responsive.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/css/local/conta.css?v={{ config.versionId }}">
{% endblock %}

{% block JSfiles %}
    {{ parent() }}
    <script>
        let parameters = {{ parameters|json_encode|raw }};
        let planos = {{ planos|json_encode|raw }};

    </script>

    <script src="/assets/plugins/datatables/datatables.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.bootstrap.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.html5.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.jszip.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.responsive.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/multiselect/multiselect.js?v={{ config.versionId }}"></script>
    <script src="/assets/js/local/conta.js?v={{ config.versionId }}"></script>
{% endblock %}
{% block content %}
<div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
            <div class="container-fluid px-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h1 class="mb-0 title-after-header py-2">Contas >> Formulário</h1>
                    </div>
                    <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                        <a href="/cpainel/conta/list" class="btn btn-lg btn-info btn-xs">
                            <span>Listar Contas</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
            <form id="contaForm" method="POST" novalidate="novalidate" autocomplete="off" class="w-100">
             {% if entity.pk %}
                    <input type="hidden" name="id" id="id" value="{{ entity.pk }}">
                {% endif %}
                <div class="row g-0">
                    <div class="col-12 ps-2 pe-1">
                       <div class="card basic widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-2 occurence-init">
                            <div class="card-body px-3 py-1 d-flex flex-column">
                                <h4>Dados Cadastrais </h4>
                                <div class="row pb-1">
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_conta">Segmento
                                            <star>*</star>
                                            </label>
                                            
                                            <select name="segmentos_pk" class="form-select form-select-xl multiselect" id="segmentos_pk" tabindex="3">
                                                <optgroup label="Segmento" id="1">
                                                    <option value="">Selecione </option>
                                                    <option value="1" {% if entity.segmentos_pk == 1 %} selected {% endif %}>Segmento 1</option>
                                                    <option value="2" {% if entity.segmentos_pk == 2 %} selected {% endif %}>Segmento 2</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="ic_tipo_conta">Tipo Conta
                                            <star>*</star>
                                            </label>
                                            
                                            <select name="ic_tipo_conta" class="form-select form-select-xl multiselect" id="ic_tipo_conta" tabindex="3">
                                                <optgroup label="Tipo Conta" id="1">
                                                    <option value="1" {% if entity.ic_tipo_conta == 1 %} selected {% endif %}>Principal</option>
                                                    <option value="2" {% if entity.ic_tipo_conta == 2 %} selected {% endif %}>Vinculado</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="ds_tipo_pessoa">Tipo Pessoa
                                            <star>*</star>
                                            </label>
                                            
                                            <select name="ds_tipo_pessoa" class="form-select form-select-xl multiselect" id="ds_tipo_pessoa" tabindex="3">
                                                <optgroup label="Tipo Pessoa" id="1">
                                                    <option value="PJ" {% if entity.ds_tipo_pessoa == "PJ" %} selected {% endif %}>PJ</option>
                                                    <option value="PF" {% if entity.ds_tipo_pessoa == "PF" %} selected {% endif %}>PF</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Identificação da Conta
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="ds_identificacao_conta"
                                                id="ds_identificacao_conta" placeholder="Identificação da Conta" tabindex="4"
                                                value="{{ entity.ds_identificacao_conta }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg cpf_cnpj" for="fl_tipo_pessoa">CNPJ
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl {% if entity.ds_tipo_pessoa == "PJ" %} mask-cnpj {% else %} mask-cpf {% endif %} " name="ds_cpf_cnpj"
                                                id="ds_cpf_cnpj" placeholder="CPF/CNPJ" tabindex="4"
                                                value="{{ entity.ds_cpf_cnpj }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Razão Social
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="ds_razao_social"
                                                id="ds_razao_social" placeholder="Razão Social" tabindex="4"
                                                value="{{ entity.ds_razao_social }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card basic widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-2 occurence-init">
                            <div class="card-body px-3 py-1 d-flex flex-column">
                                <h4>Contatos </h4>
                                <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
                                    <div class="container-fluid px-0">
                                        <div class="row align-items-center">
                                            <div class="col">
                                                <h1 class="mb-0 title-after-header py-2"></h1>
                                            </div>
                                            <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                                                <a id="addRowContato" class="btn btn-lg btn-primary btn-xs">
                                                    <span>Novo Contato</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row w-100">
                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                                        <table id="datatableContato" class="table nowrap table-no-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Nome Contato</th>
                                                <th>Telefone</th>
                                                <th>Celular</th>
                                                <th>Email</th>
                                                <th>Cargo</th>
                                                <th>Ações</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            {% for value in arrContatos %}
                                                    <tr>
                                                        <th><input type="hidden" name="id_contato" name="id_contato" value={{value.pk}}>{{value.pk}}</th>
                                                        <th><input type="text" class="form-control form-control-xl" name="ds_nome_contato" id="ds_nome_contato" placeholder="Nome" value="{{value.ds_nome_contato}}" tabindex="4"></th>
                                                        <th><input type="text" class="form-control form-control-xl mask-phone" name="ds_tel" id="ds_tel" placeholder="Telefone" value="{{value.ds_tel}}" tabindex="4"></th>
                                                        <th><input type="text" class="form-control form-control-xl mask-phone" name="ds_tel1" id="ds_tel1" placeholder="Celular" value="{{value.ds_tel1}}" tabindex="4"></th>
                                                        <th><input type="text" class="form-control form-control-xl" name="ds_email" id="ds_email" placeholder="Email" value="{{value.ds_email}}" tabindex="4"></th>
                                                        <th>
                                                            <select id="cargos_pk" name="cargos_pk" class="form-select form-select-xl">
                                                                <option value="">Selecione</option>
                                                                <option value="1" {% if value.cargo_pk == 1 %} selected {% endif %}>Cargo 1 </option>
                                                                <option value="2" {% if value.cargo_pk == 2 %} selected {% endif %}>Cargo 2 </option>
                                                                <option value="3" {% if value.cargo_pk == 3 %} selected {% endif %}>Cargo 3 </option>
                                                            </select>
                                                        </th>
                                                        <th><button class="btn btn-xs text-white btn-danger btn-fill removeRowContato"><i class="fas fa-times"></i></button></th>
                                                    </tr>
                                            {% endfor %}
                                                

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card basic widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-2 occurence-init">
                            <div class="card-body px-3 py-1 d-flex flex-column">
                                <h4>Endereço </h4>
                                <div class="row pb-1">
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Cep
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl mask-cep" name="cep"
                                                id="cep" placeholder="cep" tabindex="4"
                                                value="{{ entity.ds_cep }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row pb-1">
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Logradouro
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="endereco"
                                                id="endereco" placeholder="endereco" tabindex="4"
                                                value="{{ entity.ds_endereco }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Número
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="numero"
                                                id="numero" placeholder="numero" tabindex="4"
                                                value="{{ entity.ds_numero }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Complemento
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="complemento"
                                                id="complemento" placeholder="complemento" tabindex="4"
                                                value="{{ entity.ds_complemento }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Bairro
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="bairro"
                                                id="bairro" placeholder="bairro" tabindex="4"
                                                value="{{ entity.ds_bairro }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Cidade
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="cidade"
                                                id="cidade" placeholder="cidade" tabindex="4"
                                                value="{{ entity.ds_cidade }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Estado
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="estado"
                                                id="estado" placeholder="estado" tabindex="4"
                                                value="{{ entity.ds_uf }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card basic widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-2 occurence-init">
                            <div class="card-body px-3 py-1 d-flex flex-column">
                                <h4>Planos </h4>
                                <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
                                    <div class="container-fluid px-0">
                                        <div class="row align-items-center">
                                            <div class="col">
                                                <h1 class="mb-0 title-after-header py-2"></h1>
                                            </div>
                                            <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                                                <a id="addRowPlano" class="btn btn-lg btn-primary btn-xs">
                                                    <span>Novo Plano</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row w-100">
                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                                        <table id="datatablePlano" class="table nowrap table-no-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Categoria</th>
                                                <th>Segmento</th>
                                                <th>Plano</th>
                                                <th>Valor Mensalidade</th>
                                                <th>Data Ativação</th>
                                                <th>Ações</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            {% for value in arrPlanos %}
                                                    <tr>
                                                        <th><input type="hidden" name="id_plano" name="id_plano" value={{value.pk}}>{{value.pk}}</th>
                                                        <th>
                                                            <select id="ic_modulo_categoria" name="ic_modulo_categoria" class="form-select form-select-xl">
                                                                <option value="">Selecione</option>
                                                                <option value="1" {% if value.ic_modulo_categoria == 1 %} selected {% endif %}>Categoria 1 </option>
                                                                <option value="2" {% if value.ic_modulo_categoria == 2 %} selected {% endif %}>Categoria 2 </option>
                                                                <option value="3" {% if value.ic_modulo_categoria == 3 %} selected {% endif %}>Categoria 3 </option>
                                                            </select>
                                                        </th>
                                                        <th>
                                                            <select name="segmentos_plano_pk" class="form-select form-select-xl " id="segmentos_plano_pk" tabindex="3">
                                                                <optgroup label="Segmento" id="1">
                                                                    <option value="">Selecione </option>
                                                                    <option value="1" {% if value.segmento_pk == 1 %} selected {% endif %}>Segmento 1</option>
                                                                    <option value="2" {% if value.segmento_pk == 2 %} selected {% endif %}>Segmento 2</option>
                                                                </optgroup>
                                                            </select>
                                                        </th>
                                                        <th>
                                                            <select name="planos_pk" class="form-select form-select-xl " id="planos_pk" tabindex="3">
                                                                <optgroup label="Plano" id="1">
                                                                    <option value="">Selecione</option>
                                                                    {% for valueP in planos %}
                                                                        <option {% if value.planos_pk == valueP.id %} selected="selected" {% endif %} value="{{ valueP.id }}" >{{ valueP.descricao }}</option>
                                                                    {% endfor %}
                                                                </optgroup>
                                                            </select>
                                                        </th>
                                                        <th>
                                                            <input type="text" class="form-control form-control-xl" name="vl_mensalidade"
                                                                id="vl_mensalidade" placeholder="Valor $$" tabindex="4"
                                                                value="{{ value.vl_mensalidade }}">
                                                        </th>
                                                        <th>
                                                            <input type="text" class="form-control form-control-xl mask-date" name="dt_ativacao"
                                                                id="dt_ativacao" placeholder="Data Ativação" tabindex="4"
                                                                value="{{ value.dt_ativacao }}">
                                                        </th>
                                                        <th><button class="btn btn-xs text-white btn-danger btn-fill removeRowPlano"><i class="fas fa-times"></i></button></th>
                                                    </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card basic widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-2 occurence-init">
                            <div class="card-body px-3 py-1 d-flex flex-column">
                                <h4>Faturamento </h4>
                                <div class="row pb-1">
                                    
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Valor Setup
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl" name="valor_setup"
                                                id="valor_setup" placeholder="Valor $$" tabindex="4"
                                                value="{{ entity.vl_setup }}">
                                        </div>
                                    </div>
                                    
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Data Ativação
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl mask-date" name="dt_inicio_sistema"
                                                id="dt_inicio_sistema" placeholder="Data início" tabindex="4"
                                                value="{{ entity.dt_inicio_sistema }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Parcelas
                                                <star>*</star>
                                            </label>
                                            
                                            <select name="n_parcelas_setup" class="form-select form-select-xl multiselect" id="n_parcelas_setup" tabindex="3">
                                                <optgroup label="Parcelas" id="1">
                                                    <option value="">Selecione</option>
                                                    <option value="1" {% if entity.n_parcelas_setup == 1 %} selected {% endif %}>À vista</option>
                                                    <option value="2" {% if entity.n_parcelas_setup == 2 %} selected {% endif %}>2 parcelas</option>
                                                    <option value="3" {% if entity.n_parcelas_setup == 3 %} selected {% endif %}>3 parcelas</option>
                                                    <option value="4" {% if entity.n_parcelas_setup == 4 %} selected {% endif %}>4 parcelas</option>
                                                    <option value="5" {% if entity.n_parcelas_setup == 5 %} selected {% endif %}>5 parcelas</option>
                                                    <option value="6" {% if entity.n_parcelas_setup == 6 %} selected {% endif %}>6 parcelas</option>
                                                    <option value="7" {% if entity.n_parcelas_setup == 7 %} selected {% endif %}>7 parcelas</option>
                                                    <option value="8" {% if entity.n_parcelas_setup == 8 %} selected {% endif %}>8 parcelas</option>
                                                    <option value="9" {% if entity.n_parcelas_setup == 9 %} selected {% endif %}>9 parcelas</option>
                                                    <option value="10" {% if entity.n_parcelas_setup == 10 %} selected {% endif %}>10 parcelas</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Dia Faturamento
                                                <star>*</star>
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl mask-numbers-2" maxlength="31" name="dia_fatuamento"
                                                id="dia_fatuamento" placeholder="Dia Faturamento" tabindex="4"
                                                value="{{ entity.dia_faturamento }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 col-md-4 col-lg-4 col-xxl-4">
                                        <div class=" mb-md-2">
                                            <label class="form-label form-label-lg" for="fl_tipo_pessoa">Data Cancelamento
                                            </label>
                                            
                                            <input type="text" class="form-control form-control-xl mask-date" name="dt_cancelamento"
                                                id="dt_cancelamento" placeholder="Data cancelamento" tabindex="4"
                                                value="{{ entity.dt_cancelamento }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit"
                                        class="btn btn-success btn-lg mt-auto w-100 btn-persist">
                                    Salvar conta
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}