function loadSelectEmpresa(elemento, placeholder = 'SELECIONE A EMPRESA') {
    const ts = new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: placeholder,
        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 style="text-align: start; text-transform: uppercase;">
                        ${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 style="text-align: start; text-transform: uppercase;" 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 style="text-transform: uppercase;">${nome}</span>
                      <small class="text-muted" style="margin-left: 5px !important;color: #1f1f1f !important; font-weight: 600 !important;">(${cnpj})</small>
                    </div>
                `;
            }
        }
    });

    return ts;
}

function loadSelectBancoConexao(elemento, placeholder = 'SELECIONE O BANCO') {
    const ts = new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: placeholder,
        persist: false,

        searchField: ['name'],

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

                const connectorName = escape(data.name)
                const connectorImage = escape(data.image);
                const connectionStatus = escape(data.status);
                const isOpenFinance = escape(data.isopenfinance);

                return `
                    <div style="flex-direction: row !important; display: flex !important; align-items: center !important; gap: 8px !important; justify-content: start !important;">
                      <img 
                        src="${connectorImage}" 
                        alt="${connectorName}"
                        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 class="text-start">${connectorName}</span>
                        <small class="text-muted text-start"><i class="ri-information-line"></i> Status: ${CONNECTION_STATUS_APIOF[connectionStatus].label}</small>
                        <small class="text-muted text-start"><i class="ri-bank-line"></i> ${isOpenFinance ? 'Conector Openfinance' : 'Conector Direto'}</small>
                      </div>
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-bank-line"></i> TODOS BANCOS</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE O BANCO</div>`
                }

                const connectorName = escape(data.name)
                const connectorImage = escape(data.image);
                const connectionStatus = escape(data.status);

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

    return ts;
}

function loadSelectContas(elemento, placeholder = 'SELECIONE A CONTA') {
    const ts = new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: placeholder,
        persist: false,

        searchField: ['name'],

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

                const type = escape(data.type);
                const subtype = escape(data.subtype);
                const brandCard = escape(data.cbrand);
                const lastFourDigitsCard = escape(data.lastfourdigitscard);
                const bankBranch = escape(data.bbranch);
                const bankAccountNumber = escape(data.baccountnumber);
                const bankCode = escape(data.bcode);
                const name = escape(data.name);

                const smallFooterText = (type == TYPE_ACCOUNT_OF.CREDIT)
                    ? `<small style="text-align: start; text-transform: uppercase;" class="text-muted">**** **** **** ${lastFourDigitsCard}</small>`
                    : (type == TYPE_ACCOUNT_OF.BANK) && `<small style="text-align: start; text-transform: uppercase;" class="text-muted">AG: ${bankBranch} • C.C: ${bankAccountNumber}</small>`;

                const headerText = (type == TYPE_ACCOUNT_OF.CREDIT)
                    ? `<div class="fw-bold">${brandCard} ${name} • <small class="text-muted">${SUBTYPE_ACCOUNT_LABEL_OF[subtype]}</small></div>`
                    : (type == TYPE_ACCOUNT_OF.BANK) && `<div class="fw-bold">${bankCode} - ${name} • <small class="text-muted">${SUBTYPE_ACCOUNT_LABEL_OF[subtype]}</small></div>`;

                return `
                    <div class="py-2">
                      ${headerText}
                      <div style="text-align: start; text-transform: uppercase;">
                        ${TYPE_ACCOUNT_LABEL_OF[type]}
                      </div>
                      ${smallFooterText}
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-bank-line"></i> TODAS CONTAS</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE A CONTA</div>`
                }

                const type = escape(data.type);
                const subtype = escape(data.subtype);
                const brandCard = escape(data.cbrand);
                const lastFourDigitsCard = escape(data.lastfourdigitscard);
                const bankBranch = escape(data.bbranch);
                const bankAccountNumber = escape(data.baccountnumber);
                const bankCode = escape(data.bcode);
                const name = escape(data.name);

                const headerText = (type == TYPE_ACCOUNT_OF.CREDIT)
                    ? `<span style="text-transform: uppercase;">${brandCard} ${name} • <small class="text-muted">${SUBTYPE_ACCOUNT_LABEL_OF[subtype]}</small></span>`
                    : (type == TYPE_ACCOUNT_OF.BANK) && ` <span style="text-transform: uppercase;">${bankCode} - ${name} • <small class="text-muted">${SUBTYPE_ACCOUNT_LABEL_OF[subtype]}</small></span>`;

                const dataAccount = (type == TYPE_ACCOUNT_OF.CREDIT)
                    ? `**** **** **** ${lastFourDigitsCard}`
                    : `AG: ${bankBranch} • C.C: ${bankAccountNumber}`;

                return `
                    <div>
                      ${headerText}
                      <small class="text-muted" style="margin-left: 5px !important;color: #1f1f1f !important; font-weight: 600 !important;">(${dataAccount})</small>
                    </div>
                `;
            }
        }
    });

    return ts;
}

function loadSelectPlanoConta(elemento, placeholder = 'SELECIONE O PLANO DE CONTA') {
    const ts = new TomSelect(`${elemento}`, {
        maxItems: 1,
        create: false,
        allowEmptyOption: true,
        placeholder: placeholder,
        persist: false,

        searchField: ['codcontabil', 'descricao', 'natureza', 'grupo', 'subgrupo'],

        render: {
            option(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-building-line"></i> TODOS PLANOS DE CONTA</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE O PLANO DE CONTA</div>`
                }

                const descricao = escape(data.descricao);
                const natureza = escape(data.natureza);
                const grupo = escape(data.grupo);
                const subgrupo = escape(data.subgrupo);

                const codNatureza = escape(data.codnatureza);
                const codGrupo = escape(data.codgrupo);
                const codSubGrupo = escape(data.codsubgrupo);
                const codPlano = escape(data.codplano);

                const codContabil = `${codNatureza}.${codGrupo}.${codSubGrupo}.${codPlano}`;

                return `
                    <div class="py-2">
                      <div class="fw-bold">${natureza}</div>
                      <div style="text-align: start; text-transform: uppercase;">
                        ${codContabil} - ${descricao}
                      </div>
                      <small style="text-align: start; text-transform: uppercase;" class="text-muted">${grupo} • ${subgrupo}</small>
                    </div>
                `;
            },
            item(data, escape) {
                if (data.value == 0) {
                    return `<div><span><i class="ri-building-line"></i> TODOS PLANOS DE CONTA</span></div>`;
                } else if (data.value == -1) {
                    return `<div>SELECIONE O PLANO DE CONTA</div>`
                }

                const descricao = escape(data.descricao);
                const natureza = escape(data.natureza);

                const codNatureza = escape(data.codnatureza);
                const codGrupo = escape(data.codgrupo);
                const codSubGrupo = escape(data.codsubgrupo);
                const codPlano = escape(data.codplano);

                const codContabil = `${codNatureza}.${codGrupo}.${codSubGrupo}.${codPlano}`;

                return `
                    <div>
                      <span style="text-transform: uppercase;">${codContabil} - ${descricao}</span>
                      <small class="text-muted" style="margin-left: 5px !important;color: #1f1f1f !important; font-weight: 600 !important;">(${natureza})</small>
                    </div>
                `;
            }
        }
    });

    return ts;
}

function showTomSelectLoader(tsInstance, position = 'start') {
    if (!tsInstance || !tsInstance.wrapper) return;

    const control = tsInstance.wrapper.querySelector('.ts-control');

    // Evita duplicação
    if (control.querySelector('.ts-loader')) return;

    const loader = document.createElement('div');
    loader.classList.add('ts-loader');

    loader.innerHTML = `
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    `;

    if (position === 'start') {
        control.prepend(loader);
    } else {
        control.append(loader);
    }

    control.classList.add('ts-loading');
}

function hideTomSelectLoader(tsInstance) {
    if (!tsInstance || !tsInstance.wrapper) return;

    const control = tsInstance.wrapper.querySelector('.ts-control');
    const loader = control.querySelector('.ts-loader');

    if (loader) loader.remove();

    control.classList.remove('ts-loading');
}

function resetTomSelectPlaceholder(ts, placeholder) {
    ts.clear(true); // limpa seleção

    ts.settings.placeholder = placeholder;

    if (ts.control_input) {
        ts.control_input.placeholder = placeholder;
    }

    ts.refreshState();
}