{% 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 }}">
    <link rel="stylesheet" href="/assets/css/local/perfil.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 %}
{% include '/lead/modal/formFast.twig' %}
<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</h1>
                    </div>
                    {% if 'ic_insert_perfil-de-acesso' in permissions %}
                        <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                            <a href="/lead/list" class="btn btn-lg btn-info btn-xs">
                                <span>Listar 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">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h1 class="mb-1 title-after-header">Dados Leads / Cliente</h1>
                                </div>
                                <div class="col-auto d-flex align-items-center">
                                    <a href="/lead/form/{{entity.pk}}" class="btn btn-lg  btn-warning btn-xs">
                                        <span>Editar Lead</span>
                                    </a>
                                </div>
                            </div>
                            <hr>
                            <input type="hidden" id="leads_pk" name="leads_pk" value="{{entity.pk}}">
                            <div class="row pb-1">
                                <div class="col-sm-6">
                                    <div class="mb-2">
                                        <label class="form-label" for="ds_tipo_pessoa">Tipo Pessoa:</label>
                                        <p>{{ entity.ds_tipo_pessoa }}</p>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label" for="ds_leads">Lead:</label>
                                        <p>{{ entity.ds_leads }}</p>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label" for="ds_tel">Telefone:</label>
                                        <p class="mask-phone">{{ entity.ds_tel }}</p>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label" for="ds_email">Email:</label>
                                        <p>{{ entity.ds_email }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-2">
                                        <label class="form-label">Endereço:</label>
                                        <p>{{ entity.ds_endereco }}, {{ entity.ds_numero }}<br>
                                        Bairro: {{ entity.ds_bairro }} <br>
                                        Cidade: {{ entity.ds_cidade }}, {{ entity.ds_uf }} <br>
                                        CEP: <span class="mask-cep">{{ entity.ds_cep }}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <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">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h1 class="mb-1 title-after-header">Contatos</h1>
                                </div>
                                <div class="col-auto d-flex align-items-center">
                                    <a id="addRowContato" class="btn btn-lg btn-success btn-xs">
                                        <span>Novo Contato</span>
                                    </a>
                                </div>
                            </div>
                            <hr>
                            <table id="datatableContato" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nome</th>
                                        <th>Telefone</th>
                                        <th>Celular</th>
                                        <th>E-mail</th>
                                        <th>Setor</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" id="ds_nome" placeholder="Nome" value="{{value.ds_nome}}" 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_cel" id="ds_cel" placeholder="Celular" value="{{value.ds_cel}}" 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="setor_pk" name="setor_pk" class="form-control form-control-sm">
                                                    <option value="">Selecione</option>
                                                    <option value="1" {% if value.setor_pk == 1 %} selected {% endif %}>Setor 1 </option>
                                                    <option value="2" {% if value.setor_pk == 2 %} selected {% endif %}>Setor 2 </option>
                                                </select>
                                            </th>
                                            <th>
                                                <button class="btn btn-xs text-white btn-success btn-fill saveRowContato"><i class="fas fa-save"></i></button>
                                                <button class="btn btn-xs text-white btn-danger btn-fill deleteContato" data-id="{{value.pk}}"><i class="fas fa-times"></i></button>
                                            </th>
                                        </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}