<style>
    #modal .modal-dialog {
        max-width: 600px !important;
    }

    @media (min-width: 320px) and(max-width: 767px) {
        #modal .modal-dialog {
            width: 100% !important;
        }
    }
</style>
<link rel="stylesheet" href="/assets/css/local/perfil.css?v={{ config.versionId }}">
<div class="modal fade" id="modal" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">

                <div class="row">
                    <div class="col-12 modal-title">
                        <button class="close float-end" data-bs-dismiss="modal" aria-label="Close"
                                title="Fechar janela">
                            <i class="fal fa-times"></i>
                        </button>

                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="mb-0 title-after-header py-2">Ocorrência >> Cadastro</h6>
                            </div>
                        </div>
                        <hr>
                        <form id="ocorrenciaForm" method="POST" novalidate="novalidate" autocomplete="off"
                              enctype="application/x-www-form-urlencoded" class="w-100">
                                <div class="step-content">
                                    <div class="step-tab-panel" data-step="step1">
                                        <div class="row pb-1">
                                            <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                                <div class=" mb-md-2">
                                                    <label class="form-label form-label-lg" for="leads_pk">Lead's
                                                    <star>*</star>
                                                    </label>
                                                    <input type="hidden" id="pk" name="pk">
                                                    <select name="leads_pk" class="form-select form-select-xl multiselect" id="leads_pk" tabindex="3">
                                                        <optgroup label="Leads" id="1">
                                                            <option value="" >Selecione</option>
                                                            {% for itens in arrLeads %}
                                                                
                                                                <option value="{{ itens.pk }}" >{{ itens.ds_leads }}</option>

                                                            {% endfor %}
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                                <div class=" mb-md-2">
                                                    <label class="form-label form-label-lg" for="leads_pk">Tipo Ocorrência
                                                    <star>*</star>
                                                    </label>
                                                    <select name="tipos_ocorrencias_pk" class="form-select form-select-xl multiselect" id="tipos_ocorrencias_pk" tabindex="3">
                                                        <optgroup label="Tipos Ocorrências" id="1">
                                                            <option value="" >Selecione</option>
                                                            {% for itens in arrTipoOcorrencia %}
                                                                
                                                                <option value="{{ itens.pk }}" >{{ itens.ds_tipo_ocorrencia }}</option>

                                                            {% endfor %}
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                                <div class=" mb-md-2">
                                                    <label class="form-label form-label-lg" for="fl_tipo_pessoa">Observação
                                                        <star>*</star>
                                                    </label>
                                                    <textarea id="obs" name="obs" class="styled-textarea sm" placeholder="Digite sua Observação..."></textarea>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                                <div class=" mb-md-2">
                                                    <label class="form-label form-label-lg " for="fl_tipo_pessoa">Agendar Retorno ?
                                                        <star>*</star>
                                                    </label><br>
                                                    <input type="checkbox" name="ic_retorno" id="ic_retorno" >
                                                </div>
                                            </div>
                                            <div id="exibir_retorno" style="display:none">
                                                <div class="col-sm-6 col-md-6 col-lg-6 col-xxl-6">
                                                    <div class=" mb-md-2">
                                                        <label class="form-label form-label-lg " for="fl_tipo_pessoa">Data e Hora do retorno ?
                                                            <star>*</star>
                                                        </label><br>
                                                        <input type="text" name="dt_retorno" id="dt_retorno" class="form-control form-control-lg date-hour">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-md-6 col-lg-6 col-xxl-6">
                                                    <div class=" mb-md-2">
                                                        <label class="form-label form-label-lg" for="leads_pk">Responsável
                                                        <star>*</star>
                                                        </label>
                                                        <select name="usuario_retorno_pk" class="form-select form-select-xl multiselect" id="usuario_retorno_pk" tabindex="3">
                                                            <optgroup label="Responsável" id="1">
                                                                <option value="" >Selecione</option>
                                                                {% for itens in arrUsuario %}
                                                                    
                                                                    <option value="{{ itens.id }}" >{{ itens.nome }}</option>

                                                                {% endfor %}
                                                            </optgroup>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                                    <div class=" mb-md-2">
                                                        <label class="form-label form-label-lg" for="fl_tipo_pessoa">Observação Retorno
                                                            <star>*</star>
                                                        </label>
                                                        <textarea id="obs_retorno" name="obs_retorno" class="styled-textarea sm" placeholder="Digite sua Observação..."></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6 col-md-6 col-lg-6 col-xxl-6">
                                                    <div class=" mb-md-2">
                                                        <label class="form-label form-label-lg" for="fl_tipo_pessoa">Status Retorno
                                                            <star>*</star>
                                                        </label>
                                                        
                                                        <select name="ic_status_retorno" class="form-select form-select-sm multiselect" id="ic_status_retorno" tabindex="3">
                                                            <optgroup label="Status Retorno" id="1">
                                                                <option value="" >Selecione...</option>
                                                                <option value="1" >Pendente</option>
                                                                <option value="2" >Concluido</option>
                                                            </optgroup>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xxl-6">
                                    <div class=" mb-md-2">
                                        <label class="form-label form-label-lg" for="fl_tipo_pessoa">Fechar ocorrência
                                            <star>*</star>
                                        </label><br>
                                        <input type="checkbox" name="ic_status" id="ic_status" >
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                    <div class="mb-md-2 text-end"> <!-- Adicione text-end aqui -->
                                        <div class="step-footer">
                                            <button class="btn btn-xs btn-success btn-persist">Salvar</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>