function Containers(id) {
    this.main = document.getElementById(id);
}

Containers.prototype.CreateButton = function(name, id) {
    this.main.innerHTML = `        
        <div class="d-flex mb-3 justify-content-center align-items-center w-25">
            <input type="submit" name="btnok" value="${name}" class="form-control col-md-4 col-sm-12" id="${id}">
        </div>
    `;;
    let button = document.getElementById(id);
    return button;
}

Containers.prototype.Main = function() {
    this.main.innerHTML = `
        <div id="modal-body">
            <div class="tab-content" id="employeeTabContent">
            <ul class="nav nav-tabs mb-3" id="employeeTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="credenciais-tab" data-bs-toggle="tab" data-bs-target="#dados" type="button" role="tab">Credenciais</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="perms-tab" data-bs-toggle="tab" data-bs-target="#empresa" type="button" role="tab">Permissões</button>
                </li>
            </ul>

            <!-- Conteúdo das Tabs -->
            <div class="tab-content" id="employeeTabContent">
                <div class="tab-pane fade show active" id="dados" role="tabpanel" aria-labelledby="credenciais-tab">
                    <form id="employeeForm">
                        <div class="mb-3">
                            <label for="employeeFirstName" class="form-label">Nome</label>
                            <input type="text" class="form-control" id="employeeFirstName" name="first_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="employeeLastName" class="form-label">Apelido</label>
                            <input type="text" class="form-control" id="employeeLastName" name="last_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="employeeEmail" class="form-label">Email</label>
                            <input type="text" class="form-control" id="employeeEmail" name="email">
                        </div>
                        <div class="mb-3">
                            <label for="employeePassword" class="form-label">Senha</label>
                            <input type="password" class="form-control" id="employeePassword" name="password">
                        </div>
                        <div class="mb-3">
                            <label for="employeeCompany" class="form-label">Empresa</label>
                            <input type="text" class="form-control" id="employeeCompany" name="company" required>
                        </div>
                        <div class="mb-3">
                            <label for="employeePhone" class="form-label">Contacto</label>
                            <input type="text" class="form-control" id="employeePhone" name="phone" required>
                        </div>
                        <div class="d-flex mb-3 justify-content-center align-items-center">
                            <input type="submit" name="btnok" value="Guardar" class="form-control col-md-4 col-sm-12" id="btnSaveEmployee">
                        </div>
                    </form>                    
                </div>

                <div class="tab-pane fade" id="empresa" role="tabpanel" aria-labelledby="perms-tab">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                        <label class="form-check-label" for="flexSwitchCheckDefault">Manager</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                        <label class="form-check-label" for="flexSwitchCheckDefault">Boss</label>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            </div>
        </div>
    `;;
}

Containers.prototype.CreateCategoryRestaurant = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-top:4px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Restaurante
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="update" href="#update" data-pagina="./php/update.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#table"/></svg>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="insert" href="#insert" data-pagina="./php/insert.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#grid"/></svg>
            </a>
        </li>
    `);
}

Containers.prototype.CreateCategoryConstruct = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-top:4px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Construct
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="construct" href="#insert" data-pagina="./php/construct.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#table"/></svg>
            </a>
        </li>
    `);
}

Containers.prototype.CreateCategoryWizard = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-top:4px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Inicio
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="wizzardButton">
                <svg class="bi" width="16" height="16"><use xlink:href="#people-circle"/></svg>
            </a>
        </li>
    `);
}

Containers.prototype.CreateCategoryBoss = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-top:4px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Boss
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="companies" href="#insert" data-pagina="./php/companies.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#tools"/></svg>
            </a>
        </li>
    `);
}

Containers.prototype.CreateCategoryManager = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-top:4px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Manager
            </span>
        </li>   
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="providers" href="#insert" data-pagina="./php/providers.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#calendar3"/></svg>
            </a>
        </li>   
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="employees" href="#insert" data-pagina="./php/employees.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#people-circle"/></svg>
            </a>
        </li>
    `);
}

Containers.prototype.CreateCategoryDefinicoes = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-top:4px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Definições
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="definicoes" href="#insert" data-pagina="./php/configuration.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#gear-fill"/></svg>
            </a>
        </li>    
    `);
}

Containers.prototype.CreateDefinicoes = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <div class="modal fade" id="configModal" tabindex="-1" aria-labelledby="configModalLabel">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content bg-dark text-white">
            
            <!-- Cabeçalho -->
            <div class="modal-header">
                <h5 class="modal-title" id="configModalLabel">Menu de Configuração</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            
            <!-- Corpo do modal -->
            <div class="modal-body">
                <div class="row">
                <!-- Menu lateral -->
                <div class="col-md-4 border-end">
                    <div class="list-group bg-dark" id="list-tab" role="tablist">
                    <a class="list-group-item list-group-item-action active" id="list-geral-list" data-bs-toggle="list" href="#list-geral" role="tab">🌐 Geral</a>
                    <a class="list-group-item list-group-item-action" id="list-company-list" data-bs-toggle="list" href="#list-company" role="tab">💻 Empresa</a>
                    <a class="list-group-item list-group-item-action" id="list-categoria-list" data-bs-toggle="list" href="#list-categoria" role="tab">🗂️ Categoria</a>
                    <a class="list-group-item list-group-item-action" id="list-translation-list" data-bs-toggle="list" href="#list-translation" role="tab">📕 Traduções</a>
                    <a class="list-group-item list-group-item-action" id="list-boss-perms-list" data-bs-toggle="list" href="#list-boss-perms" role="tab">📋 Permissões do Boss</a>
                    <a class="list-group-item list-group-item-action" id="list-logs-sistema-list" data-bs-toggle="list" href="#list-logs-sistema" role="tab">🔋 LOGS Sistema</a>
                    </div>
                </div>

                <!-- Conteúdo do menu -->
                <div class="col-md-8">
                    <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active p-3" id="list-geral" role="tabpanel">
                        <div>
                        <form id="form-geral-config">
                            <div>
                            <h1 class="form-label fs-5">Selecione a língua</h1>
                            <select id="select-language" class="form-select" aria-label="Selecionar Linguagem">
                                <option value="pt-pt">Português</option>
                                <option value="en-us">English</option>
                            </select>
                            <hr class="mt-3 mb-3"/>
                            </div>
                        </form>
                        </div>
                    </div>
                    <div class="tab-pane fade p-3" id="list-categoria" role="tabpanel">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault">Restaurante</label>
                        </div>                
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault">Construção</label>
                        </div>
                    </div>
                    <div class="tab-pane fade p-3" id="list-translation" role="tabpanel">                
                        <div id="translationInputs" class="form-check form-switch">
                        <label class="form-check-label" for="flexSwitchCheckDefault">Ativar Traduções Customizadas</label>
                        <input class="form-check-input" type="checkbox" id="ativateTranslations">
                        <hr class="mt-3 mb-3"/>
                        </div>
                    </div>
                    <div class="tab-pane fade p-3" id="list-boss-perms" role="tabpanel">
                        <form id="BossPermsForm">
                        <div class="text-center mb-3">
                            <h1 id="permsBoss">Permissões do Boss</h1>
                            <hr class="mt-3 mb-3"/>
                        </div>
                        <div class="mb-3">
                            <label for="input-id-boss" class="form-label">ID do Boss</label>
                            <input type="text" id="inputBossID" class="form-control mt-2" placeholder="Default = 1" value="">
                        </div>
                        <div class="mb-3">
                            <label for="input-permission" class="form-label">Permissões do Boss</label>
                            <input type="text" id="bossPermission" class="form-control mt-2" placeholder="Ex: Gerenciar Funcionários, Ver Relatórios, etc." value="">
                        </div>
                        <div class="mb-3">
                            <label for="input-active-check" class="form-label">Tem permissão</label>
                            <input type="checkbox" name="BossPermActive" id="BossPermActive">
                        </div>
                        </form>
                    </div>
                    <div class="tab-pane fade p-3" id="list-logs-sistema" role="tabpanel">
                        <table class="table table-striped table-bordered align-middle text-center" id="employeeTable">
                        <thead>
                            <tr>
                            <th>Utilizador</th>
                            <th>Descrição</th>
                            <th>Sucesso</th>
                            </tr>
                        </thead>
                        <tbody id="logsTableBody">
                        </tbody>

                        </table>
                    </div>
                    <div class="tab-pane fade p-3" id="list-company" role="tabpanel">
                        <form id="CompanyForm">
                        <div class="mb-3">
                            <label for="input-name-company" class="form-label">Nome da empresa</label>
                            <input type="text" id="nameCompany" class="form-control mt-2" placeholder="" value="">
                        </div>
                        <div class="mb-3">
                            <label for="input-nif-company" class="form-label">NIF da empresa</label>
                            <input type="text" id="nifCompany" class="form-control mt-2" placeholder="" value="">
                        </div>
                        </form>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            
            <!-- Rodapé -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-success">Guardar Alterações</button>
            </div>
            
            </div>
        </div>
        </div>
    `);
}

Containers.prototype.CreateCategoryDashboard = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Principal
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="dashboard" href="#dashboard" data-pagina="./php/dashboard.php">
                <svg class="bi" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
            </a>
        </li>   
    `);
}

Containers.prototype.CreateConfigServerButton = function() {
    this.main.insertAdjacentHTML('beforeend', `<li><a class="dropdown-item" href="#" id="configurationServerButton">Configurações do servidor</a></li>`);
}

Containers.prototype.CreateConfigUserButton = function() {
    this.main.insertAdjacentHTML('beforeend', `<li><a class="dropdown-item" href="#" id="configurationUserButton">Configurações</a></li>`);
}

Containers.prototype.home = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="home" viewBox="0 0 16 16">
                <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
            </symbol>
            <symbol id="speedometer2" viewBox="0 0 16 16">
                <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
                <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
            </symbol>
            <symbol id="table" viewBox="0 0 16 16">
                <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
            </symbol>
            <symbol id="people-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
            </symbol>
            <symbol id="grid" viewBox="0 0 16 16">
                <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
            </symbol>
            <symbol id="collection" viewBox="0 0 16 16">
                <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
            </symbol>
            <symbol id="calendar3" viewBox="0 0 16 16">
                <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
                <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
            </symbol>
            <symbol id="chat-quote-fill" viewBox="0 0 16 16">
                <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
            </symbol>
            <symbol id="cpu-fill" viewBox="0 0 16 16">
                <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
                <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
            </symbol>
            <symbol id="gear-fill" viewBox="0 0 16 16">
                <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
            </symbol>
            <symbol id="speedometer" viewBox="0 0 16 16">
                <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
                <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
            </symbol>
            <symbol id="toggles2" viewBox="0 0 16 16">
                <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
                <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
                <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
            </symbol>
            <symbol id="tools" viewBox="0 0 16 16">
                <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
            </symbol>
            <symbol id="chevron-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
            </symbol>
            <symbol id="geo-fill" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
            </symbol>
            <symbol id="customGears" viewBox="0 0 16 16">
                <path fill="#ffffff" d="M15.92 3.08c0.24-0.24 0.63-0.18 0.75 0.18 0.21 0.55 0.32 1.16 0.32 1.78 0 2.76-2.23 5-5 5-0.55 0-1.08-0.09-1.57-0.25L4.59 15.59c-0.88 0.88-2.31 0.88-3.19 0-0.88-0.88-0.88-2.31 0-3.19L7.25 6.57c-0.16-0.48-0.25-0.99-0.25-1.57 0-2.76 2.23-5 5-5 0.63 0 1.23 0.12 1.78 0.32 0.31 0.12 0.36 0.53 0.13 0.75L10.21 5.79c-0.11 0.11-0.18 0.27-0.18 0.43l0 1.29c0 0.34 0.28 0.64 0.64 0.64l1.29 0c0.27 0 0.53-0.11 0.72-0.29l2.77-2.77z"/>
            </symbol>
            </svg>
            <!-- Sidebar -->
            <div id="home" class="d-flex h-100 user-select-none">
            <div id="sidebarDIV" class="d-flex flex-column flex-shrink-0 p-1 text-white bg-dark" style="font-size: 1.5vh; width: 12vh;">
                <span class="align-items-center mb-0 mb-md-0 me-md-auto me-lg-auto p-1">
                    <img src="./img/logo_white.webp" alt="Logo Sistema" width="70" height="47" class="d-inline-block align-text-top img-fluid">
                </span>
                <hr>
                <ul class="nav nav-pills flex-column mb-auto text-center" id="sidebarUL">
                    <div id="classWizard">
                    </div>
                    <div id="classDashboard">
                    </div>
                    <div id="classDefinicoes">
                    </div>
                    <div id="classBoss">
                    </div>
                    <div id="classManager">
                    </div>
                    <div id="classConstruct">
                    </div>
                    <div id="classRestaurant">
                    </div>
                    <div id="classGestao">
                    </div>
                </ul>
            <hr>
            <div class="dropdown d-flex justify-content-center mb-2">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="./img/default_user.png" alt="Imagem do Usuário" width="32" height="32" class="rounded-circle me-2">
            </a>
                <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
                    <div id="appendNome"></div>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" id="changeImage">Change Image</a></li>
                    <div id="settingsButton"></div>
                    <li><a class="dropdown-item" href="#">Profile</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" id="signOut">Sign out</a></li>
                </ul>
            </div>
        </div>

        <!-- Conteúdo -->
        <div id="navegacao" class="flex-grow-1 mt-4 p-3 overflow-x-hidden position-relative justify-content-center align-items-center"></div>
        </div>
        <!-- Modal de Upload de Imagem -->
        <div class="modal fade" id="changeImageModal" tabindex="-1" aria-labelledby="changeImageModalLabel">
            <div class="modal-dialog modal-dialog-centered">
                <form id="uploadForm">
                    <div class="modal-content bg-dark text-white">
                        <div class="modal-header">
                            <h5 class="modal-title" id="changeImageModalLabel">Alterar Imagem de Perfil</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
                        </div>
                        <div class="modal-body text-center">
                            <img id="imagePreview" src="https://github.com/mdo.png" alt="Preview" class="rounded-circle mb-3" width="100" height="100">
                            <input type="file" class="form-control" id="profileImageInput" name="profile_image" accept="image/*" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">Salvar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    `);
}

Containers.prototype.CreateLoginForm = function() {
    this.main.innerHTML = `
        <div class="position-fixed top-0 start-0 w-100 h-100" style="background-image: url('./img/background.webp'); background-size: cover; background-position: center;z-index: -1;"></div>
        <div id="form-div" class="d-flex flex-column justify-content-center align-items-center text-center">
            <h1 id="titleSoftware" class="mb-4 text-white" style="font-size: 2rem;">Trace Stock</h1>
            <form id="form-login" class="col-md-4 col-sm-8">
                <!-- ===== CAMPO DE EMAIL ===== -->
                <div id="grupo-email" class="col-md-8 col-sm-8 position-relative">
                    <!-- Linha com margem para separar os inputs -->
                    <div class="row mt-4" style="margin-top: 40px;">
                        <!-- Campo de texto para email -->
                        <input id="input-email" type="text" name="email" aria-label="Email" id="email" required>
                        <!-- Label associada ao input de email -->
                        <label for="input-email" id="label-login" class="col-md-4 col-sm-8">Email</label>
                    </div>
                </div>

                <!-- ===== CAMPO DE SENHA ===== -->
                <div id="grupo-senha" class="col-md-8 col-sm-8 position-relative">
                    <div class="row mt-4" style="margin-top: 40px;">
                        <!-- Campo para senha -->
                        <input id="input-password" type="password" name="pass" aria-label="Password" id="password" required>
                        <!-- Label associada ao input de senha -->
                        <label for="input-password" id="label-login" class="col-md-4 col-sm-8">Senha</label>
                    </div>
                </div>

                <!-- ===== BOTÃO SUBMIT ===== -->
                <div class="col-md-4 col-sm-8 grupo-submit">
                    <div class="row mt-4" style="margin-top: 40px;">
                        <input class="input-submit" type="submit" value="Entrar" id="loginSubmit">
                    </div>
                </div>
            </form>
        </div>    
    `;
}

Containers.prototype.CreateModal = function() {
    this.main.insertAdjacentHTML('beforeend',`
        <div class="modal fade" id="authModal" tabindex="-1" aria-hidden="true" aria-labelledby="authModalLabel">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content bg-dark text-white">
                    <div class="modal-header">
                        <h5 class="modal-title" id="authModalLabel">🔑 Autenticação</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body">
                        <label for="usernameCred" class="form-label">Utilizador:</label>
                        <input type="text" class="form-control" id="usernameCred">

                        <label for="passwordCred" class="form-label mt-3">Password:</label>
                        <input type="password" class="form-control" id="passwordCred">

                        <div id="authError" class="text-danger mt-2 d-none">Credenciais incorretas!</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-success" id="loginSubmitServerModal">Entrar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="configModal" tabindex="-1" aria-labelledby="configModalLabel">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content bg-dark text-white">
                
                <!-- Cabeçalho -->
                <div class="modal-header">
                    <h5 class="modal-title" id="configModalLabel">Menu de Configuração</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                
                <!-- Corpo do modal -->
                <div class="modal-body">
                    <div class="row">
                    <!-- Menu lateral -->
                    <div class="col-md-4 border-end">
                        <div class="list-group bg-dark" id="list-tab" role="tablist">
                        <a class="list-group-item list-group-item-action active" id="list-geral-list" data-bs-toggle="list" href="#list-geral" role="tab">🌐 Geral</a>
                        <a class="list-group-item list-group-item-action" id="list-company-list" data-bs-toggle="list" href="#list-company" role="tab">💻 Empresa</a>
                        <a class="list-group-item list-group-item-action" id="list-company-list" data-bs-toggle="list" href="#list-users-company" role="tab">🙍🏻‍♂️ Usuários</a>
                        <a class="list-group-item list-group-item-action" id="list-categoria-list" data-bs-toggle="list" href="#list-categoria" role="tab">🗂️ Categoria</a>
                        <a class="list-group-item list-group-item-action" id="list-translation-list" data-bs-toggle="list" href="#list-translation" role="tab">📕 Traduções</a>
                        <a class="list-group-item list-group-item-action" id="list-boss-perms-list" data-bs-toggle="list" href="#list-boss-perms" role="tab">📋 Permissões do Boss</a>
                        <a class="list-group-item list-group-item-action" id="list-logs-sistema-list" data-bs-toggle="list" href="#list-logs-sistema" role="tab">🔋 LOGS Sistema</a>
                        </div>
                    </div>

                    <!-- Conteúdo do menu -->
                    <div class="col-md-8">
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active p-3" id="list-geral" role="tabpanel">
                                <div>
                                <form id="form-geral-config">
                                    <div>
                                    <h1 class="form-label fs-5">Selecione a língua</h1>
                                    <select id="select-language" class="form-select" aria-label="Selecionar Linguagem">
                                        <option value="pt-pt">Português</option>
                                        <option value="en-us">English</option>
                                    </select>
                                    <hr class="mt-3 mb-3"/>
                                    </div>
                                </form>
                                </div>
                            </div>
                            <div class="tab-pane fade p-3" id="list-categoria" role="tabpanel">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                    <label class="form-check-label" for="flexSwitchCheckDefault">Restaurante</label>
                                </div>                
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                    <label class="form-check-label" for="flexSwitchCheckDefault">Construção</label>
                                </div>
                            </div>
                            <div class="tab-pane fade p-3" id="list-translation" role="tabpanel">                
                                <div id="translationInputs" class="form-check form-switch">
                                <label class="form-check-label" for="flexSwitchCheckDefault">Ativar Traduções Customizadas</label>
                                <input class="form-check-input" type="checkbox" id="ativateTranslations">
                                <hr class="mt-3 mb-3"/>
                                </div>
                            </div>
                            <div class="tab-pane fade p-3" id="list-boss-perms" role="tabpanel">
                                <form id="BossPermsForm">
                                <div class="text-center mb-3">
                                    <h1 id="permsBoss">Permissões do Boss</h1>
                                    <hr class="mt-3 mb-3"/>
                                </div>
                                <div class="mb-3">
                                    <label for="input-id-boss" class="form-label">ID do Boss</label>
                                    <input type="text" id="inputBossID" class="form-control mt-2" placeholder="Default = 1" value="">
                                </div>
                                <div class="mb-3">
                                    <label for="input-permission" class="form-label">Permissões do Boss</label>
                                    <input type="text" id="bossPermission" class="form-control mt-2" placeholder="Ex: Gerenciar Funcionários, Ver Relatórios, etc." value="">
                                </div>
                                <div class="mb-3">
                                    <label for="input-active-check" class="form-label">Tem permissão</label>
                                    <input type="checkbox" name="BossPermActive" id="BossPermActive">
                                </div>
                                </form>
                            </div>
                            <div class="tab-pane fade p-3" id="list-logs-sistema" role="tabpanel">
                                <table class="table table-striped table-bordered align-middle text-center fs-tbl-08" id="employeeTable">
                                    <thead>
                                        <tr>
                                        <th>Utilizador</th>
                                        <th>Descrição</th>
                                        <th>Sucesso</th>
                                        </tr>
                                    </thead>
                                    <tbody id="logsTableBody"></tbody>
                                </table>
                            </div>
                            <div class="tab-pane fade p-3" id="list-company" role="tabpanel">
                                <form id="CompanyForm">
                                <div class="mb-3">
                                    <label for="input-name-company" class="form-label">Nome da empresa</label>
                                    <input type="text" id="nameCompany" class="form-control mt-2" placeholder="" value="">
                                </div>
                                <div class="mb-3">
                                    <label for="input-nif-company" class="form-label">NIF da empresa</label>
                                    <input type="text" id="nifCompany" class="form-control mt-2" placeholder="" value="">
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                
                <!-- Rodapé -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
                
                </div>
            </div>
        </div>    
    `);
}

Containers.prototype.CreateUserModal = function() {
    if (!document.getElementById("configUserModal")) {
        this.main.insertAdjacentHTML('beforeend', `
            <div class="modal fade" id="configUserModal" tabindex="-1" aria-labelledby="configUserModalLabel">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content bg-dark text-white">
                    
                    <!-- Cabeçalho -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="configModalLabel">Menu de Configuração</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    
                    <!-- Corpo do modal -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4 border-end">
                                <div class="list-group bg-dark" id="list-tab" role="tablist">
                                    <a class="list-group-item list-group-item-action active" id="list-user-geral-list" data-bs-toggle="list" href="#list-user-geral" role="tab">🌐 Geral</a>
                                    <a class="list-group-item list-group-item-action" id="list-user-name-list" data-bs-toggle="list" href="#list-user-name" role="tab">🌐 Mudar nome utlizador</a>
                                </div>
                            </div>

                            <!-- Conteúdo do menu -->
                            <div class="col-md-8">
                                <div class="tab-content" id="nav-tabContent">
                                    <div class="tab-pane fade show active p-3" id="list-user-geral" role="tabpanel">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="userId-user" class="form-label">User Id:</label>
                                                <input type="text" class="form-control" id="user-id-config" readonly>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="userId-user" class="form-label">Empresa:</label>
                                                <input type="text" class="form-control" id="empresa-id-config" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade p-3" id="list-user-name" role="tabpanel">
                                        <form id="form-new-username">
                                            <div>
                                                <label for="firstnameUser" class="form-label">Nome:</label>
                                                <input type="text" class="form-control" id="firstnameUser">
                                                <label for="lastnameUser" class="form-label">Apelido:</label>
                                                <input type="text" class="form-control" id="lastnameUser">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Rodapé -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    </div>
                    
                    </div>
                </div>
            </div>
        `);
    }
}

Containers.prototype.CreateInputTranslation = function(nome, placeholder,id) {
    this.main.innerHTML = `
        <div class="mb-3">
            <label for="input-translation" class="form-label">${nome}</label>
            <input type="text" id="${id}" class="form-control mt-2" placeholder="${placeholder}" disabled>
        </div>
    `;;
}

Containers.prototype.CreateButtonSave = function(value,id) {
    this.main.innerHTML = `
        <div class="mb-3">
            <input class="input-submit" type="submit" value="${value}" id="${id}">
        </div>
    `;;
}

Containers.prototype.Notify = function(text, type, delay = 3000) {
    // Define o tipo de toast
    let typeToast = "success";
    if (type === "warning") {
        typeToast = "warning";
    } else if (type === "error") {
        typeToast = "danger";
    }

    // Cria o container de toasts se não existir
    let toastContainer = document.getElementById("toastContainer");
    if (!toastContainer) {
        toastContainer = document.createElement("div");
        toastContainer.id = "toastContainer";
        toastContainer.className = "toast-container position-fixed top-0 end-0 p-3";
        toastContainer.style.zIndex = 9999;
        document.body.appendChild(toastContainer);
    }

    // Cria o toast
    const toastDiv = document.createElement("div");
    toastDiv.className = `toast align-items-center text-bg-${typeToast} border-0 mb-2`;
    toastDiv.setAttribute("role", "alert");
    toastDiv.setAttribute("aria-live", "assertive");
    toastDiv.setAttribute("aria-atomic", "true");
    toastDiv.setAttribute("data-bs-autohide", "true");
    toastDiv.setAttribute("data-bs-delay", delay);

    toastDiv.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${text}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    `;

    toastContainer.appendChild(toastDiv);

    // Inicializa e mostra o toast
    const toast = new bootstrap.Toast(toastDiv);
    toast.show();
};

Containers.prototype.CreateResources = function(){
    this.main.innerHTML = `           
        <li style="background-color:rgba(255, 255, 255, 0.76); color: var(--bs-black); border-radius:5px; margin-bottom:4px;">
            <span class="d-sm-inline text-center" style="font-size:0.8rem;">
                Gestão
            </span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-white d-flex justify-content-center align-items-center" id="dashboard" href="#dashboard" data-pagina="./html/resources.html">
                <svg class="bi" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
            </a>
        </li> 
    `;;
}

Containers.prototype.CreateWizzard = function(){
    this.main.innerHTML = `
        <div class="container mt-5">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#wizardModal">
                Abrir configuração
            </button>
        </div>

        <div class="modal fade" id="wizardModal" tabindex="-1" aria-labelledby="wizardLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content bg-dark text-white">
                    <div class="modal-header">
                        <h5 class="modal-title" id="wizardLabel">Configuração do Sistema</h5>
                        <button type="button" class="btn-close btn-clr-txt-white" id="closeWizard" data-bs-dismiss="modal" aria-label="Fechar">X</button>
                    </div>
                    <div class="modal-body">
                        <ul class="nav nav-pills mb-3 justify-content-between" id="wizard-steps">
                            <li class="nav-item"><button class="nav-link active" data-step="1" disabled>Bem-vindo</button></li>
                            <li class="nav-item"><button class="nav-link" data-step="2" disabled>Básico</button></li>
                            <li class="nav-item"><button class="nav-link" data-step="3" disabled>Empresa Principal</button></li>
                            <li class="nav-item"><button class="nav-link" data-step="4" disabled>Empresas</button></li>
                            <li class="nav-item"><button class="nav-link" data-step="5" disabled>Usuários</button></li>
                            <li class="nav-item"><button class="nav-link" data-step="6" disabled>Finalizar</button></li>
                        </ul>

                        <!-- Conteúdo dos Steps -->
                        <div id="wizard-content">
                            <div class="step step-1">
                                <h4>Bem-vindo</h4>
                                <p>Vamos guiá-lo pela configuração inicial do sistema.</p>
                            </div>
                            <div class="step step-2 d-none">
                                <h4>Configurações básicas</h4>
                                <div class="mb-3">
                                    <label for="idioma-system-configuration" class="form-label">Idioma do Sistema</label>
                                    <select id="idioma-system-configuration" class="form-select">
                                        <option value="pt-pt">Português</option>
                                        <option value="en-us">Inglês</option>
                                    </select>
                                </div>
                            </div>
                            <div class="step step-3 d-none col-md-11 ms-md-5">
                                <div class="row mb-3 text-center">
                                    <h4>Empresa Principal</h4>
                                </div>
                                <div class="row mb-3">
                                    <h4 class="p-2 text-white bg-clr-gray bd-clr-2-wht txt-bld" style="border-radius:5px; font-size:0.9rem;">Nome da Empresa</h4>
                                </div>
                                
                                <div class="row g-3 mb-3">
                                    <div class="col-md-7">
                                        <label for="empresa-nome-principal" class="form-label">Nome da Empresa Principal</label>
                                        <input type="text" id="empresa-nome-principal" class="form-control" aria-describedby="empresaHelp">  
                                        <h5 class="d-flex ms-md-4 mt-3 col-md-11 p-2 text justify-content-center align-items-center" style="border:1px solid white; border-radius:5px; font-size:0.9rem;">
                                            <i class="fa fa-question-circle" id="textHelp">
                                                <span id="h6Text"> Se tem apenas uma empresa defina a empresa como principal</span>
                                            </i>
                                        </h5>
                                    </div>
                                </div>
                                <hr class="mt-3 mb-3"/>
                                <div class="row mb-3">
                                    <h4 class="p-2 text-white bg-clr-gray bd-clr-2-wht txt-bld" style="border-radius:5px; font-size:0.9rem;">Dados da Empresa</h4>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="nif-empresa-principal" class="form-label">NIF da Empresa Principal</label>
                                        <input type="text" id="nif-empresa-principal" class="form-control" aria-describedby="empresaHelp">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="tipo-empresa-principal" class="form-label">Tipo de empresa</label>
                                        <select id="tipo-empresa-principal" class="form-select">
                                            <option data-id="1" value="restaurant">Restaurante</option>
                                            <option data-id="2" value="construct">Construção</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="email-empresa-principal" class="form-label">Email da Empresa Principal</label>
                                        <input type="text" id="email-empresa-principal" class="form-control" aria-describedby="empresaHelp">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="telefone-empresa-principal" class="form-label">Contacto da Empresa Principal</label>
                                        <input type="text" id="telefone-empresa-principal" class="form-control" aria-describedby="empresaHelp">                      
                                        <h5 class="d-flex ms-md-4 mt-3 col-md-5 p-2 text justify-content-center align-items-center" style="border:1px solid white; border-radius:5px; font-size:0.9rem;">
                                            <i class="fa fa-question-circle" id="textHelp">
                                                <span id="h6Text">Telefone ou Telemóvel</span>
                                            </i>
                                        </h5>
                                    </div>
                                </div>
                                <hr class="mt-3 mb-3"/>
                                <div class="row mb-3">
                                    <h4 class="p-2 text-white bg-clr-gray bd-clr-2-wht txt-bld" style="border-radius:5px; font-size:0.9rem;">Morada da Empresa</h4>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-5">
                                        <label class="form-label">Endereco</label>
                                        <input type="text" id="empresa-principal-endereco" class="form-control">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Número</label>
                                        <input type="text" id="empresa-principal-numero" class="form-control">
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label">Localidade</label>
                                        <input type="text" id="empresa-principal-localidade" class="form-control">
                                    </div>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Concelho</label>
                                        <input type="text" id="empresa-principal-concelho" class="form-control">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Distrito</label>
                                        <input type="text" id="empresa-principal-distrito" class="form-control">
                                    </div>
                                </div>  
                                <div class="row g-3 mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Código Postal</label>
                                        <div class="row g-2 align-items-center">
                                            <div class="col-md-6">
                                                <input type="text" id="empresa-principal-first-code" class="form-control">
                                            </div>
                                            <div class="col-auto">
                                                <span>-</span>
                                            </div>
                                            <div class="col-md-4">
                                                <input type="text" id="empresa-principal-second-code" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2"></div>
                                    <div class="col-md-6">
                                        <label for="empresa-pais-principal" class="form-label">País</label>
                                        <select id="empresa-pais-principal" class="form-select">
                                            <option value="">Selecione um país</option>
                                            <option value="Afeganistão">Afeganistão</option>
                                            <option value="África do Sul">África do Sul</option>
                                            <option value="Albânia">Albânia</option>
                                            <option value="Alemanha">Alemanha</option>
                                            <option value="Andorra">Andorra</option>
                                            <option value="Angola">Angola</option>
                                            <option value="Arábia Saudita">Arábia Saudita</option>
                                            <option value="Argélia">Argélia</option>
                                            <option value="Argentina">Argentina</option>
                                            <option value="Armênia">Armênia</option>
                                            <option value="Austrália">Austrália</option>
                                            <option value="Áustria">Áustria</option>
                                            <option value="Azerbaijão">Azerbaijão</option>
                                            <option value="Bahamas">Bahamas</option>
                                            <option value="Bangladesh">Bangladesh</option>
                                            <option value="Barbados">Barbados</option>
                                            <option value="Barein">Barein</option>
                                            <option value="Bélgica">Bélgica</option>
                                            <option value="Belize">Belize</option>
                                            <option value="Benim">Benim</option>
                                            <option value="Bielorrússia">Bielorrússia</option>
                                            <option value="Bolívia">Bolívia</option>
                                            <option value="Bósnia e Herzegovina">Bósnia e Herzegovina</option>
                                            <option value="Botsuana">Botsuana</option>
                                            <option value="Brasil">Brasil</option>
                                            <option value="Brunei">Brunei</option>
                                            <option value="Bulgária">Bulgária</option>
                                            <option value="Burquina Faso">Burquina Faso</option>
                                            <option value="Burundi">Burundi</option>
                                            <option value="Butão">Butão</option>
                                            <option value="Cabo Verde">Cabo Verde</option>
                                            <option value="Camarões">Camarões</option>
                                            <option value="Camboja">Camboja</option>
                                            <option value="Canadá">Canadá</option>
                                            <option value="Catar">Catar</option>
                                            <option value="Cazaquistão">Cazaquistão</option>
                                            <option value="Chade">Chade</option>
                                            <option value="Chile">Chile</option>
                                            <option value="China">China</option>
                                            <option value="Chipre">Chipre</option>
                                            <option value="Colômbia">Colômbia</option>
                                            <option value="Comores">Comores</option>
                                            <option value="Congo">Congo</option>
                                            <option value="Coreia do Norte">Coreia do Norte</option>
                                            <option value="Coreia do Sul">Coreia do Sul</option>
                                            <option value="Costa do Marfim">Costa do Marfim</option>
                                            <option value="Costa Rica">Costa Rica</option>
                                            <option value="Croácia">Croácia</option>
                                            <option value="Cuba">Cuba</option>
                                            <option value="Dinamarca">Dinamarca</option>
                                            <option value="Djibuti">Djibuti</option>
                                            <option value="Dominica">Dominica</option>
                                            <option value="Egito">Egito</option>
                                            <option value="El Salvador">El Salvador</option>
                                            <option value="Emirados Árabes Unidos">Emirados Árabes Unidos</option>
                                            <option value="Equador">Equador</option>
                                            <option value="Eritreia">Eritreia</option>
                                            <option value="Eslováquia">Eslováquia</option>
                                            <option value="Eslovênia">Eslovênia</option>
                                            <option value="Espanha">Espanha</option>
                                            <option value="Estados Unidos">Estados Unidos</option>
                                            <option value="Estônia">Estônia</option>
                                            <option value="Eswatini">Eswatini</option>
                                            <option value="Etiópia">Etiópia</option>
                                            <option value="Fiji">Fiji</option>
                                            <option value="Filipinas">Filipinas</option>
                                            <option value="Finlândia">Finlândia</option>
                                            <option value="França">França</option>
                                            <option value="Gabão">Gabão</option>
                                            <option value="Gâmbia">Gâmbia</option>
                                            <option value="Gana">Gana</option>
                                            <option value="Geórgia">Geórgia</option>
                                            <option value="Grécia">Grécia</option>
                                            <option value="Granada">Granada</option>
                                            <option value="Guatemala">Guatemala</option>
                                            <option value="Guiana">Guiana</option>
                                            <option value="Guiné">Guiné</option>
                                            <option value="Guiné Equatorial">Guiné Equatorial</option>
                                            <option value="Guiné-Bissau">Guiné-Bissau</option>
                                            <option value="Haiti">Haiti</option>
                                            <option value="Holanda">Holanda</option>
                                            <option value="Honduras">Honduras</option>
                                            <option value="Hungria">Hungria</option>
                                            <option value="Iémen">Iémen</option>
                                            <option value="Índia">Índia</option>
                                            <option value="Indonésia">Indonésia</option>
                                            <option value="Irã">Irã</option>
                                            <option value="Iraque">Iraque</option>
                                            <option value="Irlanda">Irlanda</option>
                                            <option value="Islândia">Islândia</option>
                                            <option value="Israel">Israel</option>
                                            <option value="Itália">Itália</option>
                                            <option value="Jamaica">Jamaica</option>
                                            <option value="Japão">Japão</option>
                                            <option value="Jordânia">Jordânia</option>
                                            <option value="Kiribati">Kiribati</option>
                                            <option value="Kosovo">Kosovo</option>
                                            <option value="Kuwait">Kuwait</option>
                                            <option value="Laos">Laos</option>
                                            <option value="Lesoto">Lesoto</option>
                                            <option value="Letônia">Letônia</option>
                                            <option value="Líbano">Líbano</option>
                                            <option value="Libéria">Libéria</option>
                                            <option value="Líbia">Líbia</option>
                                            <option value="Liechtenstein">Liechtenstein</option>
                                            <option value="Lituânia">Lituânia</option>
                                            <option value="Luxemburgo">Luxemburgo</option>
                                            <option value="Macedônia do Norte">Macedônia do Norte</option>
                                            <option value="Madagascar">Madagascar</option>
                                            <option value="Malásia">Malásia</option>
                                            <option value="Malawi">Malawi</option>
                                            <option value="Maldivas">Maldivas</option>
                                            <option value="Mali">Mali</option>
                                            <option value="Malta">Malta</option>
                                            <option value="Marrocos">Marrocos</option>
                                            <option value="Maurícia">Maurícia</option>
                                            <option value="Mauritânia">Mauritânia</option>
                                            <option value="México">México</option>
                                            <option value="Micronésia">Micronésia</option>
                                            <option value="Moçambique">Moçambique</option>
                                            <option value="Moldávia">Moldávia</option>
                                            <option value="Mônaco">Mônaco</option>
                                            <option value="Mongólia">Mongólia</option>
                                            <option value="Montenegro">Montenegro</option>
                                            <option value="Myanmar">Myanmar</option>
                                            <option value="Namíbia">Namíbia</option>
                                            <option value="Nauru">Nauru</option>
                                            <option value="Nepal">Nepal</option>
                                            <option value="Nicarágua">Nicarágua</option>
                                            <option value="Níger">Níger</option>
                                            <option value="Nigéria">Nigéria</option>
                                            <option value="Noruega">Noruega</option>
                                            <option value="Nova Zelândia">Nova Zelândia</option>
                                            <option value="Omã">Omã</option>
                                            <option value="Palau">Palau</option>
                                            <option value="Palestina">Palestina</option>
                                            <option value="Panamá">Panamá</option>
                                            <option value="Papua-Nova Guiné">Papua-Nova Guiné</option>
                                            <option value="Paquistão">Paquistão</option>
                                            <option value="Paraguai">Paraguai</option>
                                            <option value="Peru">Peru</option>
                                            <option value="Polônia">Polônia</option>
                                            <option value="Portugal">Portugal</option>
                                            <option value="Quênia">Quênia</option>
                                            <option value="Quirguistão">Quirguistão</option>
                                            <option value="Reino Unido">Reino Unido</option>
                                            <option value="República Centro-Africana">República Centro-Africana</option>
                                            <option value="República Democrática do Congo">República Democrática do Congo</option>
                                            <option value="República Tcheca">República Tcheca</option>
                                            <option value="Romênia">Romênia</option>
                                            <option value="Ruanda">Ruanda</option>
                                            <option value="Rússia">Rússia</option>
                                            <option value="Samoa">Samoa</option>
                                            <option value="San Marino">San Marino</option>
                                            <option value="Santa Lúcia">Santa Lúcia</option>
                                            <option value="São Cristóvão e Névis">São Cristóvão e Névis</option>
                                            <option value="São Tomé e Príncipe">São Tomé e Príncipe</option>
                                            <option value="São Vicente e Granadinas">São Vicente e Granadinas</option>
                                            <option value="Seicheles">Seicheles</option>
                                            <option value="Senegal">Senegal</option>
                                            <option value="Serra Leoa">Serra Leoa</option>
                                            <option value="Sérvia">Sérvia</option>
                                            <option value="Singapura">Singapura</option>
                                            <option value="Síria">Síria</option>
                                            <option value="Somália">Somália</option>
                                            <option value="Sri Lanka">Sri Lanka</option>
                                            <option value="Sudão">Sudão</option>
                                            <option value="Sudão do Sul">Sudão do Sul</option>
                                            <option value="Suécia">Suécia</option>
                                            <option value="Suíça">Suíça</option>
                                            <option value="Suriname">Suriname</option>
                                            <option value="Tailândia">Tailândia</option>
                                            <option value="Taiwan">Taiwan</option>
                                            <option value="Tajiquistão">Tajiquistão</option>
                                            <option value="Tanzânia">Tanzânia</option>
                                            <option value="Timor-Leste">Timor-Leste</option>
                                            <option value="Togo">Togo</option>
                                            <option value="Tonga">Tonga</option>
                                            <option value="Trinidad e Tobago">Trinidad e Tobago</option>
                                            <option value="Tunísia">Tunísia</option>
                                            <option value="Turcomenistão">Turcomenistão</option>
                                            <option value="Turquia">Turquia</option>
                                            <option value="Tuvalu">Tuvalu</option>
                                            <option value="Ucrânia">Ucrânia</option>
                                            <option value="Uganda">Uganda</option>
                                            <option value="Uruguai">Uruguai</option>
                                            <option value="Uzbequistão">Uzbequistão</option>
                                            <option value="Vanuatu">Vanuatu</option>
                                            <option value="Vaticano">Vaticano</option>
                                            <option value="Venezuela">Venezuela</option>
                                            <option value="Vietnã">Vietnã</option>
                                            <option value="Zâmbia">Zâmbia</option>
                                            <option value="Zimbábue">Zimbábue</option>
                                        </select>
                                    </div>
                                </div>                                
                            </div>
                            <div class="step step-4 d-none">
                                <div class="col-md-12 mb-2 text-end">
                                    <button type="button" class="btn btn-primary" id="refreshEmpresa"><i class="bi bi-arrow-clockwise"></i></button>
                                </div>                          
                                <div class="text-center" id="lista-empresas">
                                    <p>Nenhuma empresa criada.</p>
                                </div>
                            </div>
                            <div class="step step-5 d-none">
                                <div class="col-md-12 mb-2 text-end">
                                    <button type="button" class="btn btn-primary" id="refreshUsuario"><i class="bi bi-arrow-clockwise"></i></button>
                                </div>  
                                <div class="text-center" id="lista-usuarios">
                                    <p>Nenhum usuário criado.</p>
                                </div>
                            </div>
                            <div class="step step-6 d-none">
                                <h4>Finalizar</h4>
                                <p>Revise as configurações e conclua a instalação.</p>
                                <ul>
                                    <li><strong>Idioma:</strong> <span id="summary-idioma">—</span></li>
                                    <li><strong>Fuso:</strong> <span id="summary-fuso">—</span></li>
                                    <li><strong>Admin:</strong> <span id="summary-admin">—</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" id="wizard-footer">
                        <div class="d-flex justify-content-between w-100">
                            <!-- Grupo de botões à esquerda -->
                            <div class="d-flex gap-2">
                                <div class="step step-4 d-none">
                                    <button class="btn btn-primary ms-0" id="CreateNewCompanyForm" data-bs-toggle="modal" data-bs-target="#novaEmpresaModal">
                                        Criar nova empresa
                                    </button>
                                </div>

                                <div class="step step-5 d-none">
                                    <button class="btn btn-primary" id="CreateNewUserForm" data-bs-toggle="modal" data-bs-target="#novoUsuarioModal">
                                        Criar novo usuário
                                    </button>
                                </div>
                            </div>

                            <!-- Grupo de botões à direita -->
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-secondary" id="btn-prev" disabled>Voltar</button>
                                <button type="button" class="btn btn-primary" id="btn-next">Avançar</button>
                                <button type="button" class="btn btn-success d-none" id="btn-finish" data-bs-dismiss="modal">Concluir</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="novaEmpresaModal" tabindex="-1" aria-labelledby="novaEmpresaLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content bg-dark text-white">
                    <div class="modal-header">
                        <h5 class="modal-title" id="novaEmpresaLabel">Criar Nova Empresa</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Inputs da tabela empresas -->
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nome</label>
                                <input type="text" id="empresa-nome" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Razão Social</label>
                                <input type="text" id="empresa-razao" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">NIF/CNPJ</label>
                                <input type="text" id="empresa-nif" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">E-mail</label>
                                <input type="email" id="empresa-email" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Telefone</label>
                                <input type="text" id="empresa-telefone" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Website</label>
                                <input type="text" id="empresa-website" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Rua</label>
                                <input type="text" id="empresa-rua" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Número</label>
                                <input type="text" id="empresa-numero" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Localidade</label>
                                <input type="text" id="empresa-complemento" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Freguesia</label>
                                <input type="text" id="empresa-bairro" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Concelho</label>
                                <input type="text" id="empresa-cidade" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Distrito</label>
                                <input type="text" id="empresa-estado" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Código Postal</label>
                                <input type="text" id="empresa-cep" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">País</label>
                                <input type="text" id="empresa-pais" class="form-control" value="Portugal">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Status</label>
                                <select id="empresa-status" class="form-select">
                                    <option value="ATIVA">Ativa</option>
                                    <option value="INATIVA">Inativa</option>
                                    <option value="SUSPENSA">Suspensa</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" id="btn-denied-empresa" data-bs-dismiss="modal">Cancelar</button>
                        <button class="btn btn-success" id="btn-add-empresa">Adicionar Empresa</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="novoUsuarioModal" tabindex="-1" aria-labelledby="novoUsuarioLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content bg-dark text-white">
                    <div class="modal-header">
                        <h5 class="modal-title" id="novoUsuarioLabel">Criar Novo Usuário</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body col-md-11 ms-md-5">
                        <div class="row mb-3">
                            <h4 class="p-2 text-white bg-clr-gray bd-clr-2-wht txt-bld" style="border-radius:5px; font-size:0.9rem;">Dados Pessois</h4>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Nome</label>
                                <input type="text" id="user-firstname" class="form-control" value="Administrator">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Apelido</label>
                                <input type="text" id="user-lastname" class="form-control" value="of System">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Telefone</label>
                                <div class="input-group">
                                    <div class="col-md-2 me-2">
                                        <select class="form-select" id="country-code">
                                            <option value="+351" selected>+351</option>
                                            <option value="+55">+55</option>
                                            <option value="+34">+34</option>
                                            <option value="+44">+44</option>
                                            <option value="+1">+1</option>
                                            <option value="+33">+33</option>
                                            <option value="+49">+49</option>
                                        </select>
                                    </div>      
                                    <!-- Input do telefone -->
                                    <input type="text" id="user-phone" class="form-control col-md-8" value="91">
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <h4 class="p-2 text-white bg-clr-gray bd-clr-2-wht txt-bld" style="border-radius:5px; font-size:0.9rem;">Credenciais de login</h4>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <input type="text" id="user-email" class="form-control" value="Administrator">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Palavra Passe</label>
                                <input type="password" id="user-pass" class="form-control" value="admin">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Reescreva a Palavra Passe</label>
                                <input type="password" id="user-repass" class="form-control" value="admin">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">                            
                            <div class="col-md-4">
                                <label class="form-label">Empresa</label>
                                <select class="form-select" id="empresa-user"></select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Permissões</label>
                                <select class="form-select" id="user-permission">
                                    <option value="admin">Administrador</option>
                                    <option value="boss">Patrão</option>
                                    <option value="default" selected>Empregado</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" id="btn-denied-user" data-bs-dismiss="modal">Cancelar</button>
                        <button class="btn btn-success" id="btn-add-user">Adicionar Usuário</button>
                    </div>
                </div>
            </div>
        </div>
    `;
}