<style>
    #modal .modal-dialog {
        max-width: 600px !important;
    }

    @media (min-width: 320px) and(max-width: 767px) {
            #modal .modal-dialog {
                width: 100% !important;
            }
        }
        .onoff input.toggle {
        display: none;
    }

    .onoff input.toggle + label {
        display: inline-block;
        position: relative;
        box-shadow: inset 0 0 0px 1px #d5d5d5;
        height: 30px;
        width: 50px;
        border-radius: 15px;
    }

    .onoff input.toggle + label:before {
        content: "";
        display: block;
        height: 30px;
        width: 30px;
        border-radius: 15px;
        background: rgba(19, 191, 17, 0);
        transition: 0.1s ease-in-out;
    }

    .onoff input.toggle + label:after {
        content: "";
        position: absolute;
        height: 30px;
        width: 30px;
        top: 0;
        left: 0px;
        border-radius: 15px;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: 0.1s ease-in-out;
    }

    .onoff input.toggle:checked + label:before {
        width: 50px;
        background: #13bf11;
    }

    .onoff input.toggle:checked + label:after {
        left: 20px;
        box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .col-acoes {
        width: 50px; /* Ajuste o valor conforme necessário */
        text-align: center; /* Centraliza o conteúdo na coluna */
    }
        /* Esconde o campo de upload padrão */
    .custom-file-upload input[type="file"] {
        display: none;
    }

    /* Estiliza o label como botão */
    .custom-file-upload label {
        display: inline-block;
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        transition: background-color 0.3s;
    }

    .custom-file-upload label:hover {
        background-color: #0056b3;
    }

    .custom-file-upload label i {
        margin-right: 8px; /* Espaço entre o ícone e o texto */
    }


</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>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-6 col-xxl-6">
                        <div class=" mb-md-2">
                            <h4 class="mb-4">Agendamento</h4>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-6 col-xxl-6">
                        <div class="mb-md-2">
                            <div class="onoff float-end d-flex align-items-center">
                                <input type="checkbox" class="toggle me-2" id="onoff1">
                                <label for="onoff1"></label>
                                <label class="m-0"><p id="estado" class="m-0">Cadastro Completo</p></label>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>

                <div class="row">
                    <div class="col-12 modal-title">
                        <form id="agendaForm" 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">
                                        <input type="hidden" id="agendamento_pk" name="agendamento_pk">
                                            <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-12">
                                                <div class=" mb-md-2">
                                                    <label class="form-label" for="email">
                                                        Titulo
                                                    </label>
                                                    <input type="text" placeholder="Titulo Agenda" class="form-control form-control-sm mask-phone" name="ds_titulo_agenda" id="ds_titulo_agenda">
                                                </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" for="fullname">
                                                        Tipo Agendamento
                                                        <star>*</star>
                                                    </label>
                                                    <select id="ic_tipo_agenda" name="ic_tipo_agenda" class="form-select form-select-sm multiselect">
                                                        <optgroup label="Selecione" id="1">
                                                            <option value="">Selecione</option>
                                                            <option value="1">Presencial</option>
                                                            <option value="2">Video chamada</option>
                                                            <option value="3">Lembrete/ tarefa</option>
                                                            <option value="4">Retorno</option>
                                                            <option value="5">Agenda Pessoal</option>
                                                            
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xxl-8">
                                                <div class=" mb-md-2">
                                                    <label class="form-label" for="ssn">
                                                        Data e Hora inicial
                                                        <star>*</star>
                                                    </label>
                                                    <div class="input-group">
                                                        <input type="text" placeholder="dd/mm/aaaa" class="form-control form-control-sm mask-date " name="dt_inicial" id="dt_inicial"> &nbsp;:&nbsp; 
                                                        <input type="text" placeholder="hh:mm" class="form-control form-control-sm mask-hour" name="hr_inicial" id="hr_inicial">
                                                    </div>
                                                </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" for="ssn">
                                                        Tempo Duração
                                                        <star>*</star>
                                                    </label>
                                                    <select id="ic_tempo_duracao" name="ic_tempo_duracao" class="form-select form-select-sm multiselect">
                                                        <optgroup label="Selecione" id="1">
                                                            <option value="">Selecione</option>
                                                            <option value="60">1 hora</option>
                                                            <option value="120">2 horas</option>
                                                            <option value="180">3 horas</option>
                                                            <option value="240">4 horas</option>
                                                            <option value="300">5 horas</option>
                                                            <option value="360">6 horas</option>
                                                            <option value="420">7 horas</option>
                                                            <option value="480">8 horas</option>
                                                            <option value="540">9 horas</option>
                                                            <option value="600">10 horas</option>
                                                            <option value="660">11 horas</option>
                                                            <option value="720">12 horas</option>
                                                            <option value="1440">1 Dia</option>
                                                            <option value="2880">2 Dias</option>
                                                            <option value="4320">3 Dias</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" for="fullname">
                                                        Serviços
                                                        <star>*</star>
                                                    </label>
                                                    <select id="servicos_pk" name="servicos_pk" class="form-select form-select-sm multiselect">
                                                        <optgroup label="Selecione" id="1">                                                            
                                                            <option value="">Selecione</option>
                                                            {% for value in arrServicos %}
                                                                <option value="{{ value.pk }}" >{{ value.ds_servico }}</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" for="fullname">
                                                        Cliente
                                                        <star>*</star>
                                                    </label>
                                                    <select id="leads_pk" name="leads_pk" class="form-select form-select-sm multiselect">
                                                        <optgroup label="Selecione" id="1">
                                                            <option value="">Selecione</option>
                                                            {% for value in arrLeads %}
                                                                <option value="{{ value.pk }}" >{{ value.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" for="email">
                                                        Responsável
                                                    </label>
                                                    <input type="text" placeholder="Responsável" class="form-control form-control-sm" name="ds_responsavel" id="ds_responsavel">
                                                </div>
                                            </div>
                                            <div id="exibir_cadastro_completo" style="display:none">
                                                <br>
                                                <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">
                                                                <h5 class="mb-1 title-after-header">Participante</h5>
                                                            </div>
                                                            <div class="col-auto d-flex align-items-center">
                                                                <a id="addRowParticipante" class="btn btn-lg btn-primary btn-xs">
                                                                    <span>Novo Participante</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <table id="datatableParticipante" class="table table-hover">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Nome</th>
                                                                    <th>E-mail</th>
                                                                    <th class="col-acoes">Ações</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <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">
                                                                <h6 class="mb-1 title-after-header">Histórico de Documentos</h6>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="custom-file-upload">
                                                            <div>
                                                                <input id="fileupload" type="file" name="FilesPicAgenda[]" multiple>
                                                                <label for="fileupload">
                                                                    <i class="fas fa-upload"></i> Selecione os arquivos
                                                                </label>
                                                            </div>

                                                            <!-- Área para exibir o nome dos arquivos selecionados -->
                                                            <div id="file-name" style="margin-top: 10px; font-weight: bold;"></div>

                                                            <!-- Área para listar os arquivos -->
                                                            <div id="anexoLista" class="mt-3"></div>
                                                    </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...">{{entity.obs}}</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" for="fullname">
                                                        Status
                                                        <star>*</star>
                                                    </label>
                                                    <select id="ic_status" name="ic_status" class="form-select form-select-sm multiselect">
                                                            <option value="1" selected>Agendado</option>
                                                            <option value="2" >Pendente</option>
                                                            <option value="3" >Concluido</option>
                                                            <option value="4" >Cancelado</option>
                                                       
                                                    </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 persist-agenda">Salvar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>