// Função para carregar o TOM SELECT com estilo/dados da empresa
function loadSelectEmpresa(elemento = '#selectEmpresaChamado') {
    new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: 'SELECIONE A EMPRESA',
        persist: false,

        searchField: ['cnpj', 'nome', 'fantasia'],

        render: {
            option(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-building-line"></i> TODAS EMPRESAS</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE A EMPRESA</div>`
                }

                const cnpj = escape(data.cnpj);
                const nome = escape(data.nome);
                const nomeFantasia = escape(data.fantasia);
                const inativo = escape(data.inativo);

                return `
                    <div class="py-2">
                      <div class="fw-bold">${cnpj}</div>
                      <div>
                        ${nome}
                        <i class="ri-checkbox-blank-circle-fill ${inativo == 0 ? 'text-success' : 'text-danger'} px-2" data-toggle="tooltip" data-placement="top" title="${inativo == 0 ? 'Ativo' : 'Inativo'}"></i>
                      </div>
                      <small class="text-muted">${nomeFantasia}</small>
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-building-line"></i> TODAS EMPRESAS</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE A EMPRESA</div>`
                }

                const cnpj = escape(data.cnpj);
                const nome = escape(data.nome);
                const inativo = escape(data.inativo);

                return `
                    <div>
                      <i class="ri-checkbox-blank-circle-fill ${inativo == 0 ? 'text-success' : 'text-danger'} px-2" data-toggle="tooltip" data-placement="top" title="${inativo == 0 ? 'Ativo' : 'Inativo'}"></i>
                      <span>${nome}</span>
                      <small class="text-muted" style="margin-left: 5px !important;color: #1f1f1f !important; font-weight: 600 !important;">(${cnpj})</small>
                    </div>
                `;
            }
        }
    });
}

function loadSelectUsuario(elemento = '#selectAtendenteFiltroChamados', allText = 'ATENDENTES', selectText = 'ATENDENTE') {
    new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: `SELECIONE O ${selectText}`,
        persist: false,

        searchField: ['cnpj', 'nome', 'fantasia'],

        render: {
            option(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-group-line"></i> TODOS ${allText}</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE O ${selectText}</div>`
                }

                const nome = escape(data.nome);
                const email = escape(data.email);
                const foto = escape(data.foto);

                const srcFoto = foto ? URL_ARQUIVOS + '/' + foto : DEFAULT_PICTURE;

                return `
                    <div style="flex-direction: row !important; display: flex !important; align-items: center !important; gap: 8px !important; justify-content: start !important;">
                      <img 
                        src="${srcFoto}" 
                        alt="${nome}"
                        style="width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border: 1px solid #d3d3d3;"
                      />
                      <div style="display:flex;flex-direction:column;line-height:1.2;">
                        <span>${nome}</span>
                        <small class="text-muted">${email}</small>
                      </div>
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-group-line"></i> TODOS ${allText}</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE O ${selectText}</div>`
                }

                const nome = escape(data.nome);
                const foto = escape(data.foto);
                const email = escape(data.email);

                const srcFoto = foto ? URL_ARQUIVOS + '/' + foto : DEFAULT_PICTURE;

                return `
                  <div class="d-flex align-items-center gap-2">
                    <img 
                      src="${srcFoto}" 
                      alt="${nome}"
                      style="width:18px;height:18px;border-radius:50%;object-fit:cover;border: 1px solid #d3d3d3;"
                    />
                    <span>
                        ${nome}
                        <small class="text-muted" style="color: #1f1f1f !important; font-weight: 600 !important;">(${email})</small>
                    </span>
                  </div>
                `;
            }
        }
    });
}