<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">Produtos/Serviços >> Cadastro</h6>
                            </div>
                        </div>
                        <hr>
                        <form id="orcamentoForm" 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-6 col-md-6 col-lg-6 col-xxl-6">
                                                <div class=" mb-md-2">
                                                    <label class="form-label form-label-lg" for="ds_tipo_ocorrencia">Tipo
                                                    <star>*</star>
                                                    </label>
                                                    <select name="ic_tipo" class="form-select form-select-sm multiselect" id="ic_tipo" tabindex="3">
                                                        <optgroup label="Tipo" id="1">
                                                            <option value="" >Selecione...</option>
                                                            <option value="1" >Orçamento</option>
                                                            <option value="2" >Proposta</option>
                                                        </optgroup>
                                                    </select>
                                                </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 cpf_cnpj" for="fl_tipo_pessoa">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 }}">{{ itens.ds_segmento }}</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">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="row">
                                                <h4>Produtos/Serviços </h4>
                                                <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
                                                    <div class="container-fluid" style="filter: none !important">
                                                        <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="addRow" class="btn btn-lg btn-primary btn-xs">
                                                                    <span>Novo Produto/Serviço</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="datatableProdutoServico" class="table nowrap table-no-bordered table-hover">
                                                            <thead>
                                                            <tr>
                                                                <th>Produto/Serviço</th>
                                                                <th>Valor</th>
                                                                <th>Ações</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </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-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="responsavel_pk" class="form-select form-select-xl multiselect" id="responsavel_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-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 cancelamento 
                                                            <star>*</star>
                                                        </label><br>
                                                        <input type="text" name="dt_cancelamento" id="dt_cancelamento" class="form-control form-control-lg date">
                                                    </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">Data Fechamento
                                                            <star>*</star>
                                                        </label><br>
                                                        <input type="text" name="dt_fechamento" id="dt_fechamento" class="form-control form-control-lg date">
                                                    </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
                                                        <star>*</star>
                                                    </label>
                                                    <select name="ic_status" class="form-select form-select-sm multiselect" id="ic_status" tabindex="3">
                                                        <optgroup label="Status" id="1">
                                                            <option value="" >Selecione...</option>
                                                            <option value="1" >Ativo</option>
                                                            <option value="2" >Desativado</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </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>