{% extends "theme/base.twig" %}
{% set area = 'comercial'%}
{% set type = 'lead'%}
{% 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 }}">
{% endblock %}

{% block JSfiles %}
    {{ parent() }}
    <script>
        let parameters = {{ parameters|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/lead.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">Lead >> Listar</h1>
                    </div>
                    {% if 'ic_insert_lead' in permissions %}
                    <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                        <a  class="btn btn-lg btn-primary btn-xs openModalLead">
                            <span>Novo Lead</span>
                        </a>
                    </div>
                    {% endif %}
                </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">
            <div class="card widthfull  shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">
                <div class="card-body p-3 d-flex flex-column">
                    <div class="row w-100">
                        <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                            <h5>Leads Ativos</h5>
                            <div class="row w-100">
                                <div class="col-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                                {% if session.session_user.id == 1 %}
                                    <div class="mb-md-2 pb-2">
                                        <label class="form-label form-label-lg" for="role">Selecione á Conta 
                                            <star>*Visivel para administrador*</star>
                                        </label>
                                        <select name="id_conta" class="form-control form-control-xl pesq_conta" id="id_conta" tabindex="6">
                                            {% for itens in conta %}
                                                <option value="{{ itens.id }}" {{ selected }}  {{ disabled }}>{{ itens.razao_social }}</option>

                                            {% endfor %}
                                        
                                        </select>
                                    </div>
                                {% else %}
                                    <input type="hidden" id="id_conta" name="id_conta">
                                {% endif %}
                                
                                </div>
                            </div>
                            <div class="filters pb-4">
                                <div class="row" style="row-gap: 8px;">
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="id_brand">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="" >Selecione</option>
                                                <option value="PJ" >PJ</option>
                                                <option value="PF" >PF</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="id_queue">Nome / Identificação
                                            <star>*</star>
                                        </label>
                                        <input type="text" class="form-control form-control-xl" name="ds_leads"
                                                id="ds_leads" placeholder="Identificação do Lead" tabindex="4">
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="id_status">Status
                                            <star>*</star>
                                        </label>
                                        <select name="ic_status" class="form-select form-select-xl multiselect"
                                                id="ic_status" >
                                            
                                                <optgroup label="Status" id="1">
                                                    <option value="">Selecione</option>
                                                    <option value="1">Ativo</option>
                                                    <option value="2">Inativo</option>
                                                </optgroup>
                                        </select>
                                    </div>

                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="id_channel">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>
                                                {% for itens in arrSegmento %}
                                                    
                                                    <option value="{{ itens.pk }}" {% if entity.segmentos_pk == itens.pk %} selected {% endif %}>{{ itens.ds_segmento }}</option>

                                                {% endfor %}
                                            </optgroup>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="filter_date">CPF/CNPJ
                                            <star>*</star>
                                        </label>
                                        <input type="text" class="form-control form-control-xl mask-cpf-cnpj" name="ds_cpf_cnpj"
                                            id="ds_cpf_cnpj" placeholder="CPF" tabindex="4"
                                            >
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="filter_date">Mailing
                                            <star>*</star>
                                        </label>
                                        <select name="mailings_pk" class="form-select form-select-xl multiselect" id="mailings_pk" tabindex="3">
                                            <optgroup label="Mailing" id="1">
                                                <option value="">Selecione</option>
                                                {% for itens in arrMailing %}
                                                    
                                                    <option value="{{ itens.pk }}" >{{ itens.ds_mailing }}</option>

                                                {% endfor %}
                                            </optgroup>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="filter_date">Telefone
                                            <star>*</star>
                                        </label>
                                        <input type="text" class="form-control form-control-xl mask-phone" name="ds_tel" id="ds_tel" placeholder="Telefone"  tabindex="4">
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label form-label-lg" for="filter_date">Processar filtro
                                            <star>*</star>
                                        </label>
                                        <div class="d-block">
                                            <button class="btn btn-primary btn-xs btn-filter widthfull">
                                                Processar filtro
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table id="datatableLead" class="table nowrap table-no-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tipo Pessoa</th>
                                    <th>Nome / Identificação</th>
                                    <th>Telefone</th>
                                    <th>E-mail</th>
                                    <th>Status</th>
                                    <th class="text-center">Ações</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include '/lead/modal/formFast.twig' %}
{% endblock %}