// let isRequest = false;
// let lastChecked = new Date();
let router = "api/";

const arrTimes = [
  "00:05",
  "00:10",
  "00:15",
  "00:20",
  "00:25",
  "00:30",
  "00:40",
  "00:45",
  "00:50",
  "00:55",
];

function CallBackEnd({
  action,
  method = "GET",
  arr = null,
  before_send = null,
  complete = null,
  app = null,
}) {
  const obj = app
    ? arr
    : {
        input: arr,
      };
  return $.ajax({
    url: action,
    method: method,
    data: arr ? obj : "",
    dataFilter: function (response) {
      try {
        return JSON.parse(response);
      } catch (error) {
        return JSON.parse('{"message": "data-empty"}');
        console.error("Ocorreu um erro:");
      }
    },
    beforeSend: before_send,
    success: function (response) {
      try {
        if (response.message == "unsuccessfully") return false;

        if (response.message == "successfully") return true;
      } catch (error) {
        return false;
      }
    },
    complete: complete,
  });
}

function JoinObjectData(uri, objData = null) {
  if (data.host === undefined) {
    data.host = "";
  }

  const newObj = Object.assign(data, {
    type: window.btoa(uri),
  });
  if (objData) {
    return Object.assign(objData, newObj);
  }
  return newObj;
}

function Action(uri, fromRoot = true) {
  const timestamp = new Date().getTime();
  if (fromRoot)
    return `../app/php/req-web?action=${uri}&t=${timestamp}`;

  // return `php/transaction.php?action=${uri}`;
}

function SuccessIcon(duration = 2000) {
  if ($(".loadServiceShow").hasClass("fa-check-circle")) {
    $("div.loadServiceShow span").removeClass("fa-check-circle");
  }

  $("div.loadServiceShow").append(
    '<span><i class="fa fa-check-circle success-icon"></i></span>'
  );
  RemoveIcon("div.loadServiceShow span", duration);
}

// ADD MESSAGE THE VOICE IN THE SERVICE

function VerifyPath(path) {
  return path != null ? `${path}/` : "";
}

// DIFFERENCE BETWEEN TWO DATES
class DateTimeDiff {
  constructor(date1, date2, miliSec = true) {
    this.diff = miliSec ? Math.round((date1 - date2) / 1000) : date1 - date2;
  }

  getSeconds() {
    return this.diff;
  }

  getMinutes() {
    return Number((this.diff / 60).toFixed(0));
  }

  getHours() {
    return Number((this.getMinutes() / 60).toFixed(0));
  }

  getDays() {
    return Number((this.getHours() / 24).toFixed(0));
  }
}

function BuildDayOfWeek(divElement) {
  const weekDay = [
    {
      day: 6,
      weekday: "Domingo",
    },
    {
      day: 0,
      weekday: "Segunda-Feira",
    },
    {
      day: 1,
      weekday: "Terça-Feira",
    },
    {
      day: 2,
      weekday: "Quarta-Feira",
    },
    {
      day: 3,
      weekday: "Quinta-Feira",
    },
    {
      day: 4,
      weekday: "Sexta-Feira",
    },
    {
      day: 5,
      weekday: "Sábado",
    },
    {
      day: 7,
      weekday: "Segunda a sexta",
    },
    {
      day: 8,
      weekday: "Todas",
    },
  ];

  $(divElement + " option:nth-child(n+2)").remove();

  for (let i = 0; i < weekDay.length; i++) {
    const output = `<option value="${weekDay[i].day}"> ${weekDay[i].weekday} </option>`;
    $(divElement).append(output);
  }
}

function Message(
  message = "OPERAÇÃO REALIZADA COM SUCESSO.",
  className = "alert-success",
  time = 1000,
  sizeText = ""
) {
  // if ($("#toast-container .alert").length >= 5) return;
  let limparInterval = 0;

  if ($("#toast-container .alert").length > 0) {
    clearTimeout(limparInterval);
    $("#toast-container").html("");
  }

  $("#toast-container").append(
    `<div class="alert alert-toast ${
      className + sizeText
    }"> ${message.toUpperCase()} </div>`
  );

  if ($("#toast-container .alert").length <= 1) {
    limparInterval = setTimeout(function () {
      $("#toast-container .alert").remove();
    }, time);
  }
}

// ===================  AJAX OF FOLDER IN THE OFFICE ===================

// --- DELETE CATEGORY ---
async function DeleteCategory() {
  const category = $("#category-id").val();
  $("#delete-category-modal").modal("hide");

  const response = await CallBackEnd({
    action: `${router}delete?id=${category}&action=delete-category`,
  });

  if (response.error)
    $("#divMsgCategory")
      .html(`<div class="alert alert-danger"> ${response.message} </div>`)
      .fadeIn()
      .fadeOut(6000);
  else $(`#category-${category}`).remove();
}

// --- DELETE COMPANY ---
async function DeleteCompany() {
  const company = $("#company-id").val();
  $("#delete-company-modal").modal("hide");

  const response = await CallBackEnd({
    action: `${router}delete?id=${company}&action=delete-company`,
  });

  if (response.error)
    $("#divMsgCompany")
      .html(`<div class="alert alert-danger"> ${response.message} </div>`)
      .fadeIn()
      .fadeOut(6000);
  else $(`#company-${company}`).remove();
}

// --- DELETE USERS INT THE OFFICE ---
async function DeleteUserOffice() {
  const userId = $("#user-id").val();
  $("#delete-user-modal").modal("hide");

  const response = await CallBackEnd({
    action: `${router}delete?id=${userId}&action=delete-user`,
  });

  if (response.error)
    $("#divMsgUserOffice")
      .html(`<div class="alert alert-danger"> ${response.message} </div>`)
      .fadeIn()
      .fadeOut(5000);
  else {
    if ($(`#user-${userId}`).hasClass("profile")) {
      $(`#user-${userId}`).remove();
    } else {
      $(`#${userId}`).remove();
    }
  }
}

// ===================  AJAX OF FOLDER IN THE COMMERCIAL ===================

// SETTING MESSAGE IN THE SERVICE

async function AbbreviationInAgencies(serviceElement) {
  if (!(serviceElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  $("div#abbreviation-in-service").modal("show");
  const service = serviceElement
    .getAttribute("id")
    .replace("abbreviation-", "");

  const get = `?service=${service}`;
  const response = await CallBackEnd({
    action: `${router}get-all-abbreviation-in-service${get}`,
  });

  if (!response.error) {
    const dataService = response.data;
    $("#titleModal").html(
      `Acrómino de serviço <strong> ${dataService.service_name}</strong>`
    );

    const tblAbbreviation = $("#tbl-abbreviation tbody");
    tblAbbreviation.html("");

    dataService.agencies.forEach((agency) => {
      dataService.acronym.forEach((service) => {
        if (agency.agency_id == service.agency) {
          tblAbbreviation.append(
            `<tr>
              <td> ${agency.agency_name} </td>
              <td> ${service.abbreviation} </td>
            </tr>`
          );
        }
      });
    });
  }
}

// RegExp ALLOW ONLY LETTER
function IsString(exp) {
  const regex = /^[a-zA-ZÀ-ÿ\s]+$/;
  return regex.test(exp);
}

// RegExp ALLOW ONLY NUMBER
function IsNumber(exp) {
  const regex = /^[0-9]+$/;
  return regex.test(exp);
}

// DELETE PRIORITY DEFINE IN THE AGENCY
async function DeletePriorityInAgency() {
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const agency = agencySetting;
      const response = await CallBackEnd({
        action: `${router}delete?agency=${agency}&action=delete-priority-agency`,
      });

      if (response.error == "priority-empty") {
        Message(response.message, "alert-error");
        return;
      }

      if (response.error) {
        Message("Ação não permitida.", "alert-warning");
      } else {
        $("#service-collapse-priority").collapse("hide");
        $("#priority-collapse").collapse("hide");

        $("#deletePriorityAgency").addClass("hidden");
        $("input#maxTicketPriority").val(0);
        $("#all-priority-service").val("");

        $("input#maxTicketNormal").val(0);
        $("select#priority").val("");
        $("select#service").val("");

        $(".agencyID:checked")
          .toArray()
          .forEach((row) => {
            row.checked = false;
          });
        Message();
      }
    }
  });
}

// ----------------------------------------------------------------

// ADD THE SERVICE WITHOUT PRIORITY IN THE EACH SERVICE
async function AddOperatorsInDesk(deskElement, agency) {
  const deskId = deskElement.getAttribute("id").replace("desk-", "");

  const stickMan = $(`#desk-${deskId} i`);
  const get = stickMan.hasClass("flaticon2-stick-man")
    ? ""
    : "?action=remove-operators";

  const response = await CallBackEnd({
    action: `${router}insert-user-in-desk${get}`,
    method: "POST",
    arr: {
      deskId,
      agency,
    },
  });

  if (!response.error) {
    if (response.remove) {
      $(`#desk-${deskId}`).attr("title", "Adicionar todos operadores");
      $(`#desk-${deskId} i`)
        .removeClass("flaticon2-stick-man-2 color-icon-all")
        .addClass("flaticon2-stick-man color-icon-only");
      return;
    }

    $(`#desk-${deskId}`).attr("title", "Todos operadores adicionados");
    $(`#desk-${deskId} i`)
      .removeClass("flaticon2-stick-man color-icon-only")
      .addClass("flaticon2-stick-man-2 color-icon-all");
  } else {
    Message(response.message, "alert-error");
  }
}
// UPDATE DESK IN THE AGENCY IN THE

function FillServiceAddDesk(linkElement) {
  if (!(linkElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  $("#modal-title").html(" <b> Adicionar balcão <b>");

  $("#designationAdd").val("");
  $("#numberAdd").val("");
  $("#stateAdd").val("");
  $("#nameAdd").val("");
  $("#deskId").val("");

  $("#div-chk-operator").removeClass("hidden");
  $("#chkUsers")[0].checked = false;

  const agency = linkElement.id.replace("agency-", "");
  const tbody = $("#tbl_addServices tbody");

  const divAllUserOperator = $("#divAllUsersOperator");
  divAllUserOperator.addClass("hidden");
  divAllUserOperator.html("");

  const url = `${router}get-desk-info?agency=${agency}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "access-denied") {
      swal("Acesso", "Utilizador sem permissão.", "info");
      return;
    }

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "agencys";
      });
      return;
    }

    if (obj.message == "successfully") {
      if ($.fn.dataTable.isDataTable("#tbl_addServices")) {
        $("#tbl_addServices").DataTable().clear();
        $("#tbl_addServices").DataTable().destroy();
      }

      obj.data.operators.forEach((u) => {
        divAllUserOperator.append(
          `<div class="checkbox" style="float:left; width: 24%;">
          <label>
            <input type="checkbox" value="${u.user}"> ${FirstLastName(u.name)} 
          </label>
        </div>`
        );
      });

      obj.data.service.forEach((s) => {
        tbody.append(
          `<tr id="${s.service_id}">
          <td>
            <input type="checkbox" style="margin-right: 15px;" value="${
              s.service_id
            }" class="form-check-input checkInput"> ${s.service_name}
            <strong> [${s.service_abbreviation}] </strong>
          </td>
          <td>
            <select class="form-control selectPriority" id="select-priority-${
              s.service_id
            }"> ${BuildOption()} </select> 
          </td>
        </tr>`
        );
      });

      $("#tbl_addServices").dataTable({
        scrollY: "240px",
        scroller: true,
        deferRender: true,
        scrollCollapse: true,
        paging: false,
        lengthChange: false,
        searching: true,
        language: {
          url: "../data/Portuguese.json",
        },
        responsive: true,
        dom: "Bfrtip",
      });
      $("#add-desk-modal").modal("show");
    }
  });
}

function ShowHideOperator(checked) {
  const divOperator = $("#divAllUsersOperator");

  if (checked) return divOperator.removeClass("hidden");
  return divOperator.addClass("hidden");
}

async function FillModalEditDesk(linkElement, update = false) {
  if (!(linkElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  $("#modal-title").html("<b> Editar balcão </b>");

  $("#div-chk-operator").addClass("hidden");
  const tbody = $("#tbl_addServices tbody");
  $("#divAllUsersOperator").html("");

  const deskId = linkElement.getAttribute("desk");
  const agencyId = linkElement.getAttribute("agency");

  const response = await CallBackEnd({
    action: `${router}list-desk-service?desk=${deskId}&agency=${agencyId}`,
  });

  if (response.message == "access-denied") {
    swal("Acesso", "Ação não permitida.", "warning");
    return;
  }

  if (response.message == "successfully") {
    const obj = response.data;

    $("input#nameAdd").val(obj.deskName);
    $("input#designationAdd").val(obj.deskDesignation);
    $("input#numberAdd").val(obj.deskNumber);
    $("select#stateAdd").val(obj.deskStatus);
    $("#deskId").val(deskId);
    $("#btn_submitDesk").html(update ? "Atualizar" : "Adicionar");

    if (!obj.canAccess) {
      $("input#designationAdd")[0].disabled = true;
      $("input#numberAdd")[0].disabled = true;
      $("select#stateAdd")[0].disabled = true;
      $("input#nameAdd")[0].disabled = true;
    }

    if ($.fn.dataTable.isDataTable("#tbl_addServices")) {
      $("#tbl_addServices").DataTable().destroy();
    }

    tbody.html("");
    obj.deskService.forEach((service) => {
      tbody.append(
        `<tr id="${service.id}">
          <td>
            <input type="checkbox" style="margin-right: 15px;" value="${
              service.id
            }" class="form-check-input checkInput" ${service.status}> ${
          service.name
        } 
          <strong> [${service.abbreviation}] </strong>
          </td>
          <td>
          <select class="form-control selectPriority" id="select-priority-${
            service.id
          }"> ${BuildOption()} </select></td>
        </tr>`
      );

      if (service.priority != "") {
        $("select#select-priority-" + service.id).val(service.priority);
      } else {
        $("select#select-priority-" + service.id).val("");
      }

      if (service.status != "") {
        $("#tbl_addServices tbody tr#" + service.id).addClass("selected");
      } else {
        $("#tbl_addServices tbody tr#" + service.id).removeClass("selected");
      }
    });

    $("#tbl_addServices").dataTable({
      scrollY: "240px",
      scroller: true,
      deferRender: true,
      scrollCollapse: true,
      paging: false,
      lengthChange: false,
      searching: true,
      language: {
        url: "../data/Portuguese.json",
      },
      responsive: true,
      dom: "Bfrtip",
    });

    $("#add-desk-modal").modal("show");
  } else {
    Message("Por favor contacte o administrador", "alert-error");
  }
}

function GetServiceSelected() {
  const chkServices = Array.from($("#tbl_addServices tbody tr.selected"));
  let arrServices = [];

  for (let i = 0; i < chkServices.length; i++) {
    const serviceId = chkServices[i].children[0].children[0].value;
    // const serviceId = chkServices[i].children[0].firstChild.defaultValue;

    let objRow = {};
    objRow["service_id"] = serviceId;
    objRow["priority"] = $("#select-priority-" + serviceId).val();

    arrServices.push(objRow);
  }

  return arrServices;
}

async function GetDataDesks(deskId, agencyId) {
  $("#edit-desk-modal").modal("show");

  $("input#idDesk").val(deskId);
  $("input#number2").val("");
  $("input#name2").val("");
  $("select#state2").val("");

  const desk = `?desk_id=${deskId}`;
  const agency = `&agency_id=${agencyId}`;
  const response = await CallBackEnd({
    action: `${router}list-desk-service${desk + agency}`,
  });

  const dataDesk = response.data;
  if (response.message == "successfully") {
    $("input#number2").val(dataDesk.deskNumber);
    $("input#name2").val(dataDesk.deskName);
    $("select#state2").val(dataDesk.deskStatus);

    if ($.fn.dataTable.isDataTable("#tbl_services")) {
      $("#tbl_services").DataTable().destroy();
    }

    const tbody = $("#tbl_servicesBody");
    tbody.html("");

    dataDesk.deskService.forEach((service, index) => {
      tbody.append(
        `<tr id="${index}">
          <td> 
            <div class="form-check">
              <label>
                <input type="checkbox" style="margin-right: 15px;" name="servicesID[]" value="${
                  service.id
                }" class="form-check-input checkInput " ${service.status}> ${
          service.name
        } 
              </label>
            </div>
          </td>
          <td>
            <div class="form-group" id="select-${service.id}">
              <select class="form-control" id="selectPriority_${index}" name="prioritytypeID[]" style="width: 96%"> ${BuildOption()} </select>
            </div> 
          </td> 
        </tr>`
      );

      if (service.priority != "") {
        $("select#selectPriority_" + index).val(service.priority);
      } else {
        $("select#selectPriority_" + index).val("");
      }

      if (service.status != "") {
        $("#tbl_services tbody tr#" + index).addClass("selected");
      } else {
        $("#tbl_services tbody tr#" + index).removeClass("selected");
      }
    });

    $("#tbl_services").dataTable({
      scrollY: "240px",
      scroller: true,
      deferRender: true,
      scrollCollapse: true,
      paging: false,
      lengthChange: false,
      searching: true,
      language: {
        url: "../data/Portuguese.json",
      },
      responsive: true,
      dom: "Bfrtip",
    });
  }
}

/* ADD NEW DESK IN THE AGENCY */
async function ValidateAndSaveDesk() {
  const arrServices = GetServiceSelected();

  let arrUsers = [];
  const number = $("input#numberAdd").val().trim();
  const designation = $("#designationAdd").val().trim();
  const name = $("#nameAdd").val().trim();
  const state = $("#stateAdd").val();
  const agency = $("input#agency-id").val();
  const desk = $("#deskId").val();
  const chk_user = document.getElementById("chkUsers").checked;

  if (!number) {
    Message("Por favor insira número do balcão", "alert-error");
    return;
  }

  if (number != "" && !IsNumber(number)) {
    Message("Campo número inserido inválido.", "alert-warning", "3000");
    return;
  }

  if (!state) {
    Message("Por favor escolhe o estado", "alert-error");
    return;
  }

  if (chk_user) {
    const chkUsers = Array.from(
      document.querySelectorAll("#divAllUsersOperator input:checked")
    );
    for (let i = 0; i < chkUsers.length; i++) {
      arrUsers.push(chkUsers[i].value);
    }
  }

  if (arrServices.length == 0) {
    Message("Por favor escolhe os serviços.", "alert-error");
    return;
  }

  const objCreateDesk = {
    name,
    designation,
    state,
    number,
    arrServices,
    agency,
    chk_user,
    arrUsers,
  };
  const get =
    desk == ""
      ? `${router}insert-desk-agency`
      : `${router}edit-desk-agency?desk=${$("#deskId").val()}`;

  const response = await CallBackEnd({
    action: get,
    method: "POST",
    arr: objCreateDesk,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    $("#add-desk-modal").modal("hide");
    ClearFiledDesk();

    if (response.data != undefined) {
      Message(
        "Balcão já encontra criado por favor recarregue a página.",
        "alert-error"
      );
      return;
    }

    location.reload(true);
  }
}

async function ChangeStatusDesk(statusElement) {
  const partsDesk = statusElement.getAttribute("id").split("-");

  const deskStatus = partsDesk[2] == 1 ? 2 : 1;
  ReplaceLabel(partsDesk[1], deskStatus);

  const response = await CallBackEnd({
    action: `${router}setting-status-desk?id=${partsDesk[1]}`,
  });

  if (!response.error) {
    const dataDesk = response.data;
    ReplaceLabel(dataDesk.desk_id, dataDesk.desk_state);
  } else {
    Message(response.message, "alert-error");
    ReplaceLabel(partsDesk[1], partsDesk[2]);
  }
}

function ReplaceLabel(deskId, deskState) {
  const status = $(`#tbl_desk tr td#row-desk-${deskId}`);
  status.html("");

  if (deskState == 1) {
    status.append(
      `<span class="label label-primary icon-cursor" title="Alterar estado" id="status-${deskId}-${deskState}" onclick="ChangeStatusDesk(this)"> Disponível </span>`
    );
  }

  if (deskState == 2) {
    status.append(
      `<span class="label label-warning icon-cursor" title="Alterar estado" id="status-${deskId}-${deskState}" onclick="ChangeStatusDesk(this)"> Indisponível </span>`
    );
  }

  if (deskState == 3) {
    status.append(
      `<span class="label label-danger icon-cursor" title="Alterar estado" id="status-${deskId}-${deskState}" onclick="ChangeStatusDesk(this)"> Ocupado </span>`
    );
  }

  return status;
}

$("#tbl_addServices tbody").on("click", ".checkInput", function () {
  const line = $(this).closest("tr");
  line.toggleClass("selected");
});

/* EDIT DESK IN THE AGENCY */
async function UpdateDeskInAgency() {
  const arrServices = GetServiceChecked();

  const name = $("#nameAdd").val();
  const state = $("#stateAdd").val();
  const number = $("#numberAdd").val();
  const agency = $("#agency-id").val();

  const objCreateDesk = {
    name,
    state,
    number,
    arrServices,
    agency,
  };

  const response = await CallBackEnd({
    action: `${router}insert-desk-agency`,
    method: "POST",
    arr: objCreateDesk,
  });

  if (response.error == "unsuccessfully") {
    Message(response.message, "alert-error");
  } else {
    $("#add-desk-modal").modal("hide");
    location.reload(true);
  }
}

// --- CLEAN MODAL DESK ---
function ClearFiledDesk() {
  if ($.fn.dataTable.isDataTable("#tbl_addServices")) {
    $("#tbl_addServices").DataTable().destroy();
  }

  $("#add-desk-modal").modal("hide");
  $("#tbl_addServices tbody").html("");
  $("#modal-title").html("<b> Adicionar balcão </b>");

  $("input#designationAdd").val("");
  $("#numberAdd").val("");
  $("#stateAdd").val("");
  $("#nameAdd").val("");
  $("#deskId").val("");

  $("#div-chk-operator").removeClass("hidden");
  $("#chkUsers")[0].checked = false;
  const operators = $("#divAllUsersOperator");
  operators.addClass("hidden");
  operators.html("");
}

// GET ALL DATA OF OPERATOR (USERS) IN THE DESKS
async function LoadDesks(deskId, agencyId) {
  const get = `?desk=${deskId}&agency=${agencyId}`;
  const response = await CallBackEnd({
    action: `${router}setting-user-desk${get}`,
  });

  const obj = response.data;
  if (response.message == "successfully") {
    $("input#chkAllOperator")[0].disabled = false;

    if (obj.length == 0) $("input#chkAllOperator")[0].disabled = true;

    const drawUsers = $("div#all-desk-users");
    $("input#deskId").val(deskId);
    drawUsers.html("");

    obj.forEach((row) => {
      const chkSelected = row.checked ? 'checked="true"' : "";
      const colorSpan = row.checked ? 'class="span-color"' : "";
      drawUsers.append(
        `<div class="checkbox div-chk-user">
          <input type="checkbox" onclick="AddRemoveClass(this.id)" id="chk-${
            row.user_id
          }" class="chk-info" value="${row.user_id}" ${chkSelected}>
          <span ${colorSpan}> ${FirstLastName(row.name)} </span>
        </div>`
      );
    });

    $("#edit-desk-operators-modal").modal("show");
  }
}

async function ValidateAndSaveOperators() {
  const desk = $("input#deskId").val();

  const arrRow = $(`#all-desk-users > div > input:checked`)
    .toArray()
    .map(function (check) {
      return $(check).val();
    });

  const objCreateOperator = {
    desk,
    arrRow,
  };

  const response = await CallBackEnd({
    action: `${router}setting-user-desk?action=add-operator`,
    method: "POST",
    arr: objCreateOperator,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    Message();

    // location.reload(true);
  }
}

// ===================  AJAX OF SERVICES ===================

let agenciesAvailable = [];
// --- SHOW MODAL ADD SERVICE ---
function modalAddedService() {
  cleanModalService();
  $(`#submitService`).html("Adicionar");
  $(`#titleModalService`).html(
    "<i class='flaticon-star'></i><b> Adicionar serviço </b>"
  );

  $("#detailServices").addClass("hidden");
  $("#detailsAdd")[0].checked = false;
  $("#service-desc-add").val("");
  $("#div-ative-agencies").removeClass("hidden");

  // $("#wTime").val('');
  // $("#sTime").val('');

  // $("#chkAddWaitSpecific")[0].checked = false;
  // $("#chkAddServiceSpecific")[0].checked = false;

  // OnOffInput("addWaitingTimeSpec", false, "wTime");
  // OnOffInput("addServiceTimeSpec", false, "sTime");

  if (agenciesAvailable.length == 0) {
    const url = `${router}get-agencies`;
    $.get(url, function (response) {
      const obj = JSON.parse(response);

      if (obj.message == "access-denied") {
        swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info");
        return;
      }

      if (obj.message == "not-logged") {
        swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
          window.location = "agencys";
        });
        return;
      }

      if (obj.message == "success") {
        agenciesAvailable.push(...obj.data);
        DrawAgenciesAvailable(obj.data);
      }
    });
  } else {
    DrawAgenciesAvailable();
  }
  $("#add-service-modal").modal("show");
}

// BUILD THE SERVICES IN THE SERVICE CREATE
function DrawAgenciesAvailable(arr = null) {
  const agencies = arr ? arr : agenciesAvailable;

  const divAllAgencies = $("#list-agencies");
  divAllAgencies.html("");

  if (agencies.length == 0) {
    divAllAgencies.append("<div> Nenhuma agência encontrada </div>");
    $("input#chkAllAgencies")[0].disabled = true;
    return;
  }

  $("input#chkAllAgencies")[0].disabled = false;
  agencies.forEach((a) => {
    divAllAgencies.append(
      `<div class="checkbox row-4">
        <input type="checkbox" onclick="AddRemoveClass(this.id)" id="chk-${a.agency_hash}" value="${a.agency_id}">
        <span style="font-size: 7pt;"> ${a.agency_name} </span>
      </div>`
    );
  });
}

let upService = "";
// --- GET DATA OF SERVICE IN MODAL ---
function GetDataService(serviceElement) {
  if (!(serviceElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  cleanModalService();
  $(`#submitService`).html("Atualizar");
  $(`#titleModalService`).html(
    "<i class='flaticon-star'></i><b> Atualizar serviço </b>"
  );

  $("#div-ative-agencies").addClass("hidden");
  const service = serviceElement
    .getAttribute("id")
    .replace("edited-service-", "");

  const url = `${router}get-services?id=${service}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "access-denied") {
      swal("Acesso", "Utilizador sem permissão.", "info");
      return;
    }

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "agencys";
      });
      return;
    }

    if (obj.message == "success") {
      const a = obj.data;

      upService = a.service;
      $("#acronym_reading").val(a.acronym);
      $("#abbreviation").val(a.abbreviation);
      $("#name").val(a.name);

      $("#description").val(a.desc);
      $("#example").val(a.example);
      // $("#icon").val(a.icon);

      ServiceDetail(a.checked);
      $("#detailsAdd")[0].checked = a.checked;
      $("#service-desc-add").val(a.detail);

      $("#add-service-modal").modal("show");
    }
  });
}

function ServiceDetail(checked) {
  if (checked) {
    $("#detailServices").removeClass("hidden");
    return;
  }

  $("#detailServices").addClass("hidden");
  $("#service-desc-add").val("");
}

function ChangeAcronymReading() {
  $("#acronym_reading").val("");
}

// --- CLEAN MODAL SERVICE ---
function cleanModalService() {
  $("#abbreviation").val("");
  $("#description").val("");
  $("#name, #icon").val("");
  $("#example").val("");
  upService = "";

  $("#detailServices").addClass("hidden");
  $("#service-desc-add").val("");

  $(`#submitService`).html("");
  $(`#titleModalService`).html("");
  $("#detailsAdd")[0].checked = false;
}

// ===================  AJAX OF SCHEDULES IN COMPANY ===================

// ===================  API GET SERVICE OF AGENCY ===================
async function GetService(agency) {
  if (agency != "") {
    const response = await CallBackEnd({
      action: `${router}get-agency-service.php?agency=${agency}`,
    });

    $("div.loadServiceShow img").removeClass("hidden");

    if (response.message == "success") {
      $("select#service").html("");

      if (response.data.length == 0) {
        $("div.loadServiceShow img").addClass("hidden");
        $("select#service").append(
          `<option value="">Nenhum serviço de agendamento</option>`
        );
      } else {
        $("select#service").append(
          `<option value=""> -- Escolhe serviço -- </option>`
        );

        response.data.forEach((service) => {
          const serviceId = service.service_id;
          const serviceName = service.service_nome;
          $("select#service").append(
            `<option value='${serviceId}'> ${serviceName} </option>`
          );
        });

        SuccessIcon();
        RemoveIcon("div.loadServiceShow span", 300);
      }
      $("div.loadServiceShow img").addClass("hidden");
    } else {
      console.log("Empty data.");
    }
  } else {
    $("select#service").html(
      '<option value=""> -- Escolhe serviço -- </option>'
    );
  }
}

async function GetServiceAll(agency) {
  if (agency != "") {
    const response = await CallBackEnd({
      action: `${router}get_agency_all_sevices.php?agency=${agency}`,
    });

    $("div.loadServiceShow img").removeClass("hidden");

    if (response.message == "success") {
      $("select#service").html("");

      if (response.data.length == 0) {
        $("div.loadServiceShow img").addClass("hidden");
        $("select#service").append(
          `<option value="">Nenhum serviço de agendamento</option>`
        );
      } else {
        $("select#service").append(
          `<option value=""> -- Escolhe serviço -- </option>`
        );

        response.data.forEach((service) => {
          const serviceId = service.service_id;
          const serviceName = service.service_nome;
          $("select#service").append(
            `<option value='${serviceId}'> ${serviceName} </option>`
          );
        });

        SuccessIcon();
        RemoveIcon("div.loadServiceShow span", 300);
      }
      $("div.loadServiceShow img").addClass("hidden");
    } else {
      console.log("Empty data.");
    }
  } else {
    $("select#service").html(
      '<option value=""> -- Escolhe serviço -- </option>'
    );
  }
}

// ===================  FILTER SCHEDULES SERVICE ===================
async function FilterSchedules() {
  let get = "";
  let concat = "";
  const agency = $("#agency").val();
  const service = $("#service").val();
  const end_date = $("#enddate").val();
  const start_date = $("#startdate").val();

  if (agency != "") {
    get = `?agency=${agency}`;
  }

  if (service != "") {
    if (agency != "") {
      get += `&`;
    } else {
      concat = "?";
    }

    get += `${concat}service=${service}`;
  }

  if (start_date != "") {
    if (agency != "" || service != "") {
      get += `&`;
    } else {
      concat = "?";
    }

    get += `${concat}start_date=${start_date}`;
  }

  if (end_date != "") {
    if (agency != "" || service != "" || start_date != "") {
      get += `&`;
    } else {
      concat = "?";
    }

    get += `${concat}end_date=${end_date}`;
  }

  const response = await CallBackEnd({
    action: `${router}get-filter-schedules.php${get}`,
  });

  if (response.message == "success") {
    ListSchedules(response.data);
  } else {
    console.log("Not found data");
  }
}

function ListSchedules(dataSchedules) {
  $("tbody#list-schedules").html("");
  const loading = $("#loading-data");
  loading.html("");

  if (dataSchedules.length == 0) {
    loading.html("Nenhuma agendamento encontrado");
    return false;
  }
  RebuildTable(dataSchedules);
}

// ===================  REBUILD DATA IN THE TABLE SCHEDULES ===================
function RebuildTable(dataSchedules) {
  let result = "";

  dataSchedules.forEach((row) => {
    const datetime = row.datetime;
    const agency = row.agency;
    const client = row.client;
    const ticket_state = row.state_ticket;
    const table_state = row.state_table;
    const service = row.service;
    const schedule_id = row.id;

    const label_style =
      table_state == "Ativo" ? "label-active" : "label-inactive";

    result = "<tr>";
    result += "<td>" + agency + "</td>";
    result += "<td>" + client + "</td>";
    result += "<td>" + service + "</td>";
    result += "<td>" + datetime + "</td>";
    result +=
      '<td> <span class="label label-primary">' + ticket_state + "</span></td>";
    result +=
      '<td> <span class="label ' +
      label_style +
      ' "style="margin-left: 20px">' +
      table_state +
      "</span></td>";
    result += "<td>";
    result +=
      '<a href="#" data-toggle="tooltip" title="Cancelar" onclick="CancelarAgendamento(' +
      schedule_id +
      ')"> <i class="fa fa-times"> </i></a>';
    result +=
      '<a href="#" data-toggle="tooltip" title="Ver agendamento" onclick="GetInfoSchedules(' +
      schedule_id +
      ')"> <i class="fa fa-eye"> </i></a>';
    result +=
      '<a href="#" data-toggle="tooltip" title="Atendimento"> <i class="flaticon-monitor"></i> </a>';

    result += "</td>";
    result += "</tr>";

    $("tbody#list-schedules").append(result);
    $("#tblAgends").DataTable({
      paging: true,
      searching: true,
      language: {
        url: "../data/Portuguese.json",
      },
      responsive: true,
      dom: "Bfrtip",
      fixedColumns: true,
    });
  });
}

// ===================  VIEW DATA IN EACH SCHEDULES DONE ===================
async function GetInfoSchedules(scheduleId) {
  $("div#view-info-schedules").modal("show");

  $("#cliente_nome").html("");
  $("#cliente_mail").html("");

  $("#name").val("");
  $("#email").val("");
  $("#birthday").val("");

  const response = await CallBackEnd({
    action: `${router}list-all-schedules?schedule=${scheduleId}`,
  });

  const schedules = response.data;
  var inputs = "";
  var tableRows = "";
  var requestRows = "";

  if (response.message == "success") {
    // ----------- INFO CLIENT -----------
    $("#name").val(schedules.client);
    $("#email").val(schedules.email);

    $("#cliente_nome").html(schedules.client);
    $("#cliente_mail").html(schedules.email);

    if (schedules.docs && schedules.docs.length > 0) {
      schedules.docs.forEach(function (element) {
        if (element.type === "file") {
          tableRows +=
            "<tr>" +
            "<td>" +
            element.label +
            "</td>" +
            '<td class="text-center">' +
            '<a class="btn btn-sm btn-outline-primary" href="#" data-toggle="tooltip" title="download"> <i class="fa fa-download"> </i></a>' +
            '<a class="btn btn-sm btn-outline-secondary" href="#" data-toggle="tooltip" title="visualizar"> <i class="fa fa-eye"> </i></a>' +
            "</td>" +
            "</tr>";
        } else {
          inputs +=
            '<div class="form-group">' +
            '<label class="control-label col-sm-2">' +
            element.label +
            "</label>" +
            '<div class="col-sm-10">' +
            '<input type="' +
            element.type +
            '" class="form-control" value="" disabled>' +
            "</div>" +
            "</div>";

          requestRows +=
            '<tr><td><strong class="font-weight-bold">' +
            element.label +
            "</strong></td><td></td></tr>";
        }
      });
      $("#info_requested tbody").html(requestRows);
      /* $("#infoRequest").html(inputs); */
      $("#tbl_agend_docs_body").html(tableRows);
    }

    // ----------- INFO SCHEDULES -----------
    var row = "";
    /* $("#agency-schedule").html("<b> Agência: </b>" + schedules.agency);
    $("#service-schedule").html("<b> Serviço: </b>" + schedules.service);
    $("#date-schedule").html(
      "<b> Data: </b>" + schedules.date.split("-").reverse().join("-")
    );
    $("#time-schedule").html("<b> Hora: </b>" + schedules.time.slice(0, 5));
    $("#status-schedule").html("<b> Estado: </b>" + schedules.state_ticket);
    $("#schedule").html("<b> Agendamento: </b>" + schedules.state_table); */

    row +=
      "<tr>" +
      '<td><strong class="font-weight-bold">Agência</strong></td>' +
      "<td>" +
      schedules.agency +
      "</td></tr>";
    row +=
      "<tr>" +
      '<td><strong class="font-weight-bold">Serviço</strong></td>' +
      "<td>" +
      schedules.service +
      "</td></tr>";
    row +=
      "<tr>" +
      '<td><strong class="font-weight-bold">Data</strong></td>' +
      "<td>" +
      schedules.date.split("-").reverse().join("-") +
      "</td></tr>";
    row +=
      "<tr>" +
      '<td><strong class="font-weight-bold">Hora</strong></td>' +
      "<td>" +
      schedules.time.slice(0, 5) +
      "</td></tr>";
    row +=
      "<tr>" +
      '<td><strong class="font-weight-bold">Estado</strong></td>' +
      "<td>" +
      schedules.state_ticket +
      "</td></tr>";
    row +=
      "<tr>" +
      '<td><strong class="font-weight-bold">Agendamento</strong></td>' +
      "<td>" +
      schedules.state_table +
      "</td></tr>";

    $("#info_agend tbody").html(row);
  }
}

async function CancelarAgendamento(id) {
  $("#cancelAgend").modal("show");
  $("#idAgend").val(id);
}
// ===================  ACTIVE OR INACTIVE USER ===================
async function RebuildStatusUser(userId, rewrite = true) {
  let divPhoto = "";
  let txtClass = "";

  if (rewrite) {
    txtClass = "photo-";
    divPhoto = $(`div#user-photo-${userId}`);
  } else {
    divPhoto = $(`a#user-row-${userId} i`);
  }

  ChangeSettingStatus(userId, divPhoto, txtClass);

  const response = await CallBackEnd({
    action: `${router}active-inactive-data?id=${userId}&number=3`,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    Message();
  }
}

function ChangeSettingStatus(userId, divPhoto, txtClass) {
  const linkTitle = $(`a#user-card-${userId}`);
  const linkProfile = $(`a#link-profile-${userId}`);
  const linkMessage = $(`a#link-message-${userId}`);

  if (divPhoto.hasClass(`${txtClass}able`)) {
    divPhoto.removeClass(`${txtClass}able`).addClass(`${txtClass}disable`);
    linkTitle.attr("title", "Desativado");
    linkProfile.addClass("hidden");
    linkMessage.addClass("hidden");
    return;
  }

  divPhoto.removeClass(`${txtClass}disable`).addClass(`${txtClass}able`);
  linkTitle.attr("title", "Ativado");
  linkProfile.removeClass("hidden");
  linkMessage.removeClass("hidden");
}

async function RebuildStatus(id, url = "1") {
  const tdTable = $(`a#data-row-${id} i`);
  const active = url == "5" ? "Chatbot ativo" : "Ativo";
  const inactive = url == "5" ? "Chatbot inativo" : "Inativo";

  if (tdTable.hasClass(`able`)) {
    tdTable.removeClass(`able`).addClass(`disable`);
    tdTable.attr("title", inactive);
  } else {
    tdTable.removeClass(`disable`).addClass(`able`);
    tdTable.attr("title", active);
  }

  const response = await CallBackEnd({
    action: `${router}active-inactive-data?id=${id}&number=${url}`,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    Message();
  }
}

// ===================  AJAX OF SETTINGS OF THE AGENCIES ===================

// GET DATA SETTINGS IN THE AGENCY
async function GetUserInAllAgencies() {
  if ($.fn.dataTable.isDataTable("#tbl-worked")) {
    $("#tbl-worked").DataTable().clear();
    $("#tbl-worked").DataTable().destroy();
  }

  const response = await CallBackEnd({
    action: `${router}get-all-user-in-system`,
  });

  if (!response.error) {
    const tbody = $("#tbl-worked tbody");
    tbody.html("");
    const obj = response.data;

    if (obj.users.length > 0) {
      obj.users.forEach((user) => {
        tbody.append(
          `<tr>
            <td class="form-check-label">
              <input class="checkInput" id="${
                user.user_id
              }" style="margin-right: 15px !important;" type="checkbox" value="${
            user.user_id
          }" onclick="WorkerSelected(this)"> ${user.name} <small> - ${
            user.email
          } </small>
            </td>
            <td>
              <span class="dropdown"> 
                <a href="#" data-toggle="dropdown" style="margin-left: 23px;" title="Escolhe agências" class="dropdown-toggle"><i class="flaticon-placeholder"></i></a>
                <ul class="dropdown-menu" id="dropdown-${
                  user.user_id
                }"> ${BuildDropdownAgency(obj.agencies, false)}</ul>
              </span>
            </td>
            <td> <select class="form-control role" id="role-${
              user.user_id
            }"> ${DrawOption(obj.role)} </select>
            </td>
          </tr>`
        );
      });
    }

    $("#tbl-worked").dataTable({
      scrollY: "340px",
      scroller: true,
      deferRender: true,
      scrollCollapse: true,
      paging: false,
      lengthChange: false,
      searching: true,
      language: {
        url: "../data/Portuguese.json",
      },
      responsive: true,
      dom: "Bfrtip",
    });

    $("div#add-worker-in-agency").modal("show");
  }
}

async function ValidateAndSaveWorker() {
  const objWorker = WorkerChk();
  if (objWorker.length == 0) return;

  for (let i = 0; i < objWorker.length; i++) {
    if (objWorker[i]["agencies"].length == 0) {
      Message(
        "Por favor escolhe agência para o utilizador selecionado.",
        "alert-error"
      );
      return;
    }

    if (objWorker[i]["role"] == "") {
      Message("Existe utilizador selecionado sem cargo.", "alert-error");
      return;
    }
  }

  const response = await CallBackEnd({
    action: `${router}insert-worker-in-agencies`,
    method: "POST",
    arr: {
      workers: objWorker,
    },
  });

  if (response.error) {
    $("div#add-worker-in-agency").modal("hide");
  } else {
    $("div#add-worker-in-agency").modal("hide");
    Message();
  }
}

function WorkerChk() {
  const chkWorker = Array.from(
    document.querySelectorAll("#tbl-worked tbody tr.chk-selected")
  );
  let arrWork = [];

  for (let i = 0; i < chkWorker.length; i++) {
    const user = chkWorker[i].children[0].firstChild.defaultValue;

    let objRow = {};
    objRow.user_id = user;
    objRow.role = $("#role-" + user).val();

    const agencies = chkWorker[i].children[1].children[0].children[1].children;
    let arrAgency = [];
    let agencyIdChecked = "";

    for (let x = 0; x < agencies.length; x++) {
      agencyIdChecked = agencies[x].lastChild.lastChild;

      if (agencyIdChecked.firstChild.checked) {
        arrAgency.push(
          agencyIdChecked.getAttribute("id").replace("agency-", "")
        );
      }
    }
    objRow["agencies"] = arrAgency;
    arrWork.push(objRow);
  }
  return arrWork;
}

function WorkerSelected(inputELement) {
  const tr = inputELement.closest("tr");
  if (inputELement.checked) {
    tr.classList.add("chk-selected");
    return;
  }
  tr.classList.remove("chk-selected");
}

let agencySetting = "";
async function SettingsAgency(agencyElement) {
  if (!(agencyElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const agencyId = agencyElement.getAttribute("id").replace("data-agency-", "");
  if (!agencyId) {
    swal(
      "Atenção",
      "Configração de agência não carregada correctamente.",
      "warning"
    );
    return;
  }

  agencySetting = agencyId;
  $("#holiday-temporary").addClass("hidden");
  $("input#chkWaitSpecific")[0].checked = false;
  $("input#chkServiceSpecific")[0].checked = false;

  OnOffInput("waitingTimeSpecific");
  OnOffInput("serviceTimeSpecific", false, "sTime");

  ClearFiledSetting();
  BuildDayOfWeek("#dayOfWeek");

  const url = `${router}get-setting-agency?id=${agencyId}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Sessão", "Utilizador sem permissão", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "successfully") {
      const rs = obj.data;
      $("#titleSettingAgency").html(
        `<i class="flaticon-settings" style="margin-right: 8px!important;"></i> Configurações da Agência - <strong> ${rs.agency_name} </strong>`
      );
      FillNavTabServices(rs.tabServices);
      FillNavTabClientTypes(rs.tabClientTypes);
      FillPriorityAgency(rs.tabTicketPriority, rs.settingPriority);

      FillPaperSize(rs.namePaperSize, rs.agency_printer_size);
      FillParameterAgency(rs.tabParameter);
      FillTimeTableAgency(rs.tabTimeTable, rs.cantAccess);

      FillHolidayAgency(rs.tabHoliday);
      FillTabSituationAgency(rs.tabSituation, rs.cantAccess);
      DrawEvaluation(rs.tabEvaluation, (type = "checkbox"));

      const agencies = RebuildAgency(rs.agencies);
      $("#screenkioskshow").html(agencies);
      $("#screenkioskshow").val(rs.agency_view);
      $("#showTicket").val(rs.manage_kiosk);

      $("#settings-agency-modal").modal("show");
      return;
    }

    if ("session" in obj && !obj.session) {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "agencys";
      });
    }
  });
}

function ClearFiledSetting() {
  $(".nav-tabs.tab-collection1 a[href='#tab1']").tab("show");
  $("#chkAllService")[0].checked = false;
  $("#chkAllPriority")[0].checked = false;
}

// GET CHECKBOX SELECTED IN SETTING AGENCY
function GetAllCheckbox(divCheckbox) {
  const chkAgencies = $(`#${divCheckbox} > div > input:checked`)
    .toArray()
    .map(function (check) {
      return $(check).val();
    });

  return chkAgencies;
}

// --- FILL IN SERVICES TAB ---
function FillNavTabServices(data) {
  if (data.waitingTime && !arrTimes.includes(data.waitingTime)) {
    OnOffInput("waitingTimeSpecific", true, "wTime", data.waitingTime);
    $("#chkWaitSpecific")[0].checked = true;
  } else {
    $("select#wTime").val(data.waitingTime);
  }

  if (data.serviceTime && !arrTimes.includes(data.serviceTime)) {
    OnOffInput("serviceTimeSpecific", true, "sTime", data.serviceTime);
    $("#chkServiceSpecific")[0].checked = true;
  } else {
    $("select#sTime").val(data.serviceTime);
  }

  $("select#allServiceAcronym").val(data.allServiceSettingAcronym);
  $("select#allService").val(data.allServiceSetting);

  const divServicesAgency = $("#load-services-agency");
  divServicesAgency.html("");

  const divServicesPriority = $("#load-services-priority");
  divServicesPriority.html("");

  if (data.allServiceSetting == 0) $("#service-collapse").collapse("show");
  else $("#service-collapse").collapse("hide");

  $("input#chkAllService")[0].disabled = true;
  if (data.allServicesAgency.length == 0) {
    divServicesAgency.append("<div> Nenhum serviço encontrado </div>");
    return;
  }

  // $("input#chkAllService")[0].disabled = false;
  data.allServicesAgency.forEach((row) => {
    const colorSpan = row.service_checked ? 'class="span-color"' : "";
    const chkSelected = row.service_checked ? 'checked="true"' : "";
    const chkServices = row.priority ? 'checked="true"' : "";

    CreateChkService(
      divServicesAgency,
      row,
      chkSelected,
      "service-",
      colorSpan
    );

    CreateChkService(
      divServicesPriority,
      row,
      chkServices,
      "priority-",
      null,
      true
    );
  });
}

function CreateChkService(
  cardElement,
  obj,
  chkSelected = "",
  parts = "",
  colorSpan = "",
  reloadPrty = false
) {
  let iconPriority = "";
  if (obj.priority && reloadPrty) {
    iconPriority = `<i class="fa fa-product-hunt" style="color: orangered;" title="Com prioridade: ${obj.ticket_priority} | Sem prioridade: ${obj.ticket_normal}"></i>`;
  }

  let disabled = "";
  let notEnable = "";
  if (!reloadPrty && !obj.service_status) {
    disabled = "disabled";
    notEnable =
      '<i class="fa fa-ban" style="color: #ff7800;" title="Situação de serviço desativado."></i>';
  }

  return cardElement.append(
    `<div class="checkbox" style="display: inline-block; width: 50%;">
        <input type="checkbox" onclick="AddRemoveClass(this.id)" ${disabled} id="chk-${
      parts + obj.service_id
    }" value="${obj.service_id}" ${chkSelected}>
        <span ${colorSpan}> ${obj.service_name} </span>
        [<strong> ${obj.service_abbreviation} </strong>] ${notEnable}
        ${iconPriority}
      </div>`
  );
}

// VALIDATE AND SAVE SETTING SERVICE AGENCY
function saveServiceAgency() {
  const agency = agencySetting;
  const serviceAcronym = $("#allServiceAcronym").val();

  let waitingTime = $("#wTime").val();
  let serviceTime = $("#sTime").val();

  const allService = $("#allService").val();
  const serviceSelected = GetAllCheckbox("load-services-agency");

  const chkWaitSpecific = $("#chkWaitSpecific")[0].checked;
  const chkServiceSpecific = $("#chkServiceSpecific")[0].checked;

  if (chkWaitSpecific) {
    const waitSpecific = $("#waitingTimeSpecific").val().trim();
    if (!waitSpecific) {
      Message("Por favor insira T. de espera.", "alert-error");
      return;
    }

    if (!waitSpecific.includes(":")) {
      Message("Insira T. de espera válido.", "alert-error");
      return;
    }

    if (waitSpecific.split(":").length == 1) {
      Message("T. de espera inválido.", "alert-error");
      return;
    }
    waitingTime = TruncateTime(waitSpecific);
  } else {
    waitingTime = waitingTime ? TruncateTime(waitingTime) : "";
  }

  if (chkServiceSpecific) {
    const serviceSpecific = $("#serviceTimeSpecific").val().trim();
    if (!serviceSpecific) {
      Message("Por favor insira T. de atendimento.", "alert-error");
      return;
    }

    if (!serviceSpecific.includes(":")) {
      Message("Insira T. de atendimento válido.", "alert-error");
      return;
    }

    if (serviceSpecific.split(":").length == 1) {
      Message("T. de atendimento inválido.", "alert-error");
      return;
    }
    serviceTime = TruncateTime(serviceSpecific);
  } else {
    serviceTime = serviceTime ? TruncateTime(serviceTime) : "";
  }

  if (allService == 0 && serviceSelected.length == 0) {
    Message("Por favor, escolhe os serviços.", "alert-error");
    return;
  }

  swals = swal("Aguarde", "A gravar dados...", "info", {
    closeOnClickOutside: false,
    buttons: false,
  });

  const objRow = {
    serviceSelected,
    serviceAcronym,
    waitingTime,
    serviceTime,
    allService,
    agency,
  };

  const url = `${router}insert-setting-service-agency`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "access-denied") {
      swal("Acesso", "Utilizador sem permissão.", "warning");
      return;
    }

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "agency-not-find") {
      swal("Informação", "Ação não permitido.", "warning");
      return;
    }

    if (obj.message == "success") {
      Message();
      ApllyRealTime(obj.data); // RUN THE RELATIME IN THE MODULE
    }
  });
}

function TruncateTime(unity) {
  return `${unity}:00`;
  // return unity < 10 ? `00:0${unity}` : `00:${unity}`;
}

// --- FILL IN CLIENTES TYPES TAB ---
function FillNavTabClientTypes(data) {
  $("select#allClientType").val(data.allClientTypeSetting);

  const divClientTypeAgency = $("#load-client-type-agency");
  divClientTypeAgency.html("");

  if (data.allClientTypeSetting == 1) {
    $("#client-type-collapse").collapse("hide");
  } else {
    $("#client-type-collapse").collapse("show");
  }

  if (data.allClientTypes.length == 0) {
    divClientTypeAgency.append("<div>Nenhum tipo de cliente encontrado</div>");
    return;
  }

  data.allClientTypes.forEach((row) => {
    const chkSelected = row.checked ? 'checked="true"' : "";
    const colorSpan = row.checked ? 'class="span-color"' : "";
    divClientTypeAgency.append(
      '<div class="checkbox" style="display: inline-block; width: 50%;">' +
        '<input type="checkbox" onclick="AddRemoveClass(this.id)" id="chk-' +
        row.id +
        '" value="' +
        row.id +
        '" ' +
        chkSelected +
        ">" +
        "<span " +
        colorSpan +
        ">" +
        row.name +
        "</span>" +
        "</div>"
    );
  });
}

// VALIDATE AND SAVE SETTING CLIENT TYPES AGENCY
async function SaveSettingClientTypesAgency() {
  const agency = agencySetting;
  const allClientType = $("select#allClientType").val();
  const clientTypesSelected = GetAllCheckbox("load-client-type-agency");

  const objSettingClientType = {
    agency,
    allClientType,
    clientTypesSelected,
  };

  const response = await CallBackEnd({
    action: `${router}insert-setting-client-type-agency`,
    method: "POST",
    arr: objSettingClientType,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    Message();
  }
}

// --- FILL IN TICKET PRIORITY TAB ---
function FillPriorityAgency(obj, settingPriority) {
  $("#toleranceTicket").val(obj.messageToleranceTicket);
  $("#maxTicketPriority").val(obj.maxTicketPriority);
  $("#maxTicketNormal").val(obj.maxTicketNormal);

  $("select#priority").val(obj.priority);
  $("#deletePriorityAgency").removeClass("hidden");

  $("#all-priority-service").val(settingPriority);
  $("select#service").val(obj.priorityMethod);

  if (!obj.maxTicketPriority && !obj.maxTicketNormal) {
    document.getElementById("service").options[0].selected = true;
    document.getElementById("all-priority-service").options[0].selected = true;
  }

  const listPriority = $("#list-priority");
  listPriority.html("");

  if (settingPriority == 1) {
    $("#service-collapse-priority").collapse("show");
  } else {
    $("#service-collapse-priority").collapse("hide");
  }

  if (obj.priority == 1) {
    $("#priority-collapse").collapse("show");
  } else {
    $("#priority-collapse").collapse("hide");
  }

  if (obj.length == 0) {
    $("#priority-collapse").collapse("hide");
    $("#chkAllPriority")[0].disabled = true;
    return;
  }

  if (obj.allPriority.length == 0) {
    listPriority.append("<div> Nenhuma prioridade encontrada </div>");
    $("#chkAllPriority")[0].disabled = true;
    return;
  }
  $("#chkAllPriority")[0].disabled = false;

  obj.allPriority.forEach((p) => {
    const chkSelected = p.checked ? 'checked="true"' : "";
    const prefAtive = p.pref == 1 ? "fa-flag pref-color" : "fa-flag-o";
    const prefTitle =
      p.pref == 1 ? "Remover Preferêncial" : "Adicionar como Tipo preferêncial";

    const buildIcon = p.checked
      ? `<i class="fa ${prefAtive}" id="data-pref-${p.priority_id}" onclick="ApllyPreferential(this)" style="cursor: pointer; font-size: 16px;" title="${prefTitle}"></i>`
      : "";

    listPriority.append(
      `<div class="checkbox" style="display: inline-block; width: 50%;">
        <input type="checkbox" onclick="AddRemoveClass(this.id)" id="chk-${p.priority_id}" value="${p.priority_id}" ${chkSelected} >
        <span> ${p.type_name} </span> ${buildIcon} 
      </div>`
    );
  });
}

function ApllyPreferential(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-warning");
    return;
  }

  const priority = cardElement.getAttribute("id").replace("data-pref-", "");
  const objRow = {
    agency: agencySetting,
    priority,
  };
  const url = `${router}backoffice/apply-preferential`;

  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Sessão", "Utilizador sem permissão", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      if (cardElement.classList.contains("pref-color")) {
        cardElement.classList.remove("pref-color");
        cardElement.classList.remove("fa-flag");
        cardElement.classList.add("fa-flag-o");
        cardElement.setAttribute("title", "Adicionar como Tipo preferêncial");
      } else {
        cardElement.classList.add("pref-color");
        cardElement.classList.remove("fa-flag-o");
        cardElement.classList.add("fa-flag");
        cardElement.setAttribute("title", "Remover Preferêncial");
      }
      Message();
    }
  });
}

// VALIDATE AND SAVE SETTING PRIORITY AGENCY
async function SaveSettingPriorityAgency() {
  const maxTicketPriority = $("#maxTicketPriority").val().trim();
  const serviceSelected = GetAllCheckbox("load-services-priority");
  const maxTicketNormal = $("#maxTicketNormal").val().trim();
  const agency = agencySetting;
  const arrPriority = GetAllCheckbox("list-priority");
  const priority = $("#all-priority-service").val();
  const status = $("select#priority").val();
  const service = $("select#service").val();

  if (!IsNumber(maxTicketPriority) || !IsNumber(maxTicketNormal)) {
    Message("Campos inseridos inválidos.", "alert-warning");
    return;
  }

  if (maxTicketPriority == 0 || maxTicketNormal == 0) {
    Message("Prioridade deve ser superior a zero.", "alert-warning");
    return;
  }

  if (status == 0) {
    Message("Escolhe o estado.", "alert-error");
    return;
  }

  if (status == 1 && arrPriority.length == 0) {
    Message("Escolhe as prioridades", "alert-error");
    return;
  }

  if (status == 1 && (maxTicketPriority == 0 || maxTicketNormal == 0)) {
    Message("Prioridade deve ser superior a zero.", "alert-warning");
    return;
  }

  if (!priority) {
    Message("Escolhe a prioridade a ser aplicada.", "alert-error");
    return;
  }

  let objRow = {
    maxTicketPriority,
    maxTicketNormal,
    arrPriority,
    priority,
    service,
    agency,
    status,
  };

  if (priority == 1) {
    if (serviceSelected.length == 0) {
      Message("Escolhe os serviços.", "alert-error");
      return;
    }
    Object.assign(objRow, {
      arrServices: serviceSelected,
      priority,
    });
  }

  const obj = await CallBackEnd({
    action: `${router}insert-setting-priority-agency`,
    method: "POST",
    arr: objRow,
  });

  if (obj.error) {
    Message(obj.message, "alert-error");
    return;
  }

  if (!obj.error) {
    $("#deletePriorityAgency").removeClass("hidden");
    Message();
  }
}

// --- FILL IN PARAMETER TAB ---
function FillParameterAgency(data) {
  $("input#txtHash").val(data.agencyHash);
  $("input#maxDailyTicket").val(data.maxDailyTicket);
  $("input#maxDailyTicketUser").val(data.maxDailyTicketUser);
  if (data.imgKioskSetting == "not") {
    document.getElementById("imgKiosk").options[0].selected = true;
    return;
  }
  $("select#imgKiosk").val(data.imgKioskSetting);
}

// --- FILL FIELD PAPER SIZE IN AGENCY ---
function FillPaperSize(obj, printerSize) {
  $("select#sizePaper option:nth-child(n+2)").remove();

  if (obj.length > 0) {
    for (let i = 0; i < obj.length; i++) {
      const selected = obj[i].paper_id == printerSize ? "selected" : "";
      const output = `<option value="${obj[i].paper_id}" ${selected}> ${obj[i].paper_size} </option>`;
      $("select#sizePaper").append(output);
    }
  }
}

// VALIDATE AND SAVE SETTING PRIORITY AGENCY
function SaveSettingParameterAgency() {
  const agency = agencySetting;
  const paperSize = $("select#sizePaper").val();
  const tolerance = $("#toleranceTicket").val();
  const maxDailyTicket = $("#maxDailyTicket").val();
  const maxDailyTicketUser = $("#maxDailyTicketUser").val();
  const timer = $("#timer").val();
  const imgKiosk = $("select#imgKiosk").val();

  if (maxDailyTicket != 0 && !IsNumber(maxDailyTicket)) {
    Message("Agência - Bilhete a imprimir por dia inválido.", "alert-warning");
    return;
  }

  if (!IsNumber(timer) || timer > 120) {
    Message("Tempo alternância de imagem inválido.", "alert-warning");
    return;
  }

  if (maxDailyTicketUser != 0 && !IsNumber(maxDailyTicketUser)) {
    Message(
      "Utilizador - Bilhete a imprimir por dia inválido.",
      "alert-warning"
    );
    return;
  }

  swals = swal("Aguarde", "A GRAVAR DADOS...", "info", {
    closeOnClickOutside: false,
    buttons: false,
  });

  const objRow = {
    agency,
    paperSize,
    tolerance,
    maxDailyTicket,
    maxDailyTicketUser,
    imgKiosk,
    timer,
  };

  const url = `${router}insert-setting-parameter-agency`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "not-logged") {
      swal("Acesso", "Sessão expirado.", "info").then(() => {
        window.location = "agencys";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "Utilizador sem permissão.", "info");
      return;
    }

    if (obj.message == "error") {
      Message(obj.text, "alert-warning");
      return;
    }

    if (obj.message == "successfully") {
      Message();
    }
  });
}

// --- FILL IN TIME TABLE TAB ---
function FillTimeTableAgency(data, cantAccess) {
  const tblTimeTable = $("#tbl-time tbody");
  tblTimeTable.html("");

  $("#loading-time-table").html("");
  if (data.length == 0) {
    $("#loading-time-table").html("Nenhum resultado encontrado");
    return;
  }

  data.forEach((t) => {
    const checked = t.state == "1" ? 'checked="true"' : "";
    const txtTiltle = t.state == "1" ? "Ativo" : "Inativo";
    const txtLocked = t.locked == "1" ? "Desbloqueado" : "Bloqueado";

    const remove = cantAccess
      ? `<i class="fa icon-lock ${IncLocked(t.locked)}" state="locked-${
          t.locked
        }" id="data-${
          t.id
        }" title="${txtLocked}" onclick="LockTimeTable(this)"></i>`
      : "";

    tblTimeTable.append(
      `<tr id="row-time-${t.dayOfWeek}">
          <td> ${WeekDay(t.dayOfWeek)} </td>
          <td> ${t.startTime} </td>
          <td> ${t.endTime} </td>
          <td style="display: flex;"> 
            <input type="checkbox" title="${txtTiltle}" id="chk-${
        t.id
      }" class="inpt-timetable" ${checked} onclick="SettingState(${
        t.id
      })"> ${remove} 
            </td>
        </tr>`
    );
  });
}

function IncLocked(state) {
  return state == 1 ? "fa-unlock" : "fa-lock";
}

// SAVE THE LOCKED OF THE TIMETABLE IN THE AGENCY
function LockTimeTable(timeElement) {
  if (!(timeElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-warning");
    return;
  }

  const state = timeElement.getAttribute("state").replace("locked-", "");
  const timeTable = timeElement.getAttribute("id").replace("data-", "");
  const inptChk = $(`#chk-${timeTable}`)[0].checked;

  if (!inptChk) {
    // swal("Dia de Semana", "ENCONTRA INATIVO.", "warning");
    Message("Dia de Semana Encontra Inativo.", "alert-warning");
    return;
  }

  swals = swal("Aguarde", "A gravar dados...", "info", {
    closeOnClickOutside: false,
    buttons: false,
  });

  const objRow = {
    state,
    timeTable,
  };
  const url = `${router}insert-timetable-lock?agency=${agencySetting}`;

  $.post(url, JSON.stringify(objRow)).then((response) => {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "agencys";
      });
      return;
    }

    const arrMessage = ["agency-not-find", "data-empty", "no-parameter"];
    if (arrMessage.includes(obj.message)) {
      Message("Ação	não permitida.", "alert-error");
      return;
    }

    if (obj.message == "time-table-enabled") {
      swal("Dia de Semana", obj.text.toUpperCase(), "warning");
      return;
    }

    if (obj.message == "successfully") {
      const txt = obj.state == 1 ? "Desbloqueado" : "Bloqueado";
      const tagLock = $("#data-" + timeTable);

      tagLock.attr("state", "locked-" + obj.state);
      tagLock.attr("title", txt);

      if (obj.state == 1) {
        tagLock.removeClass("fa-lock");
        tagLock.addClass("fa-unlock");
      } else {
        tagLock.removeClass("fa-unlock");
        tagLock.addClass("fa-lock");
      }
      Message();
      ApllyRealTime(obj.data); // RUN THE RELATIME IN THE MODULE
    }
  });
}

async function SaveTimeTable() {
  const agency = agencySetting;
  const dayOfWeek = $("select#dayOfWeek").val();
  const starTime = $("input#starTime").val();
  const endTime = $("input#endTime").val();
  const arrNumber = [0, 1, 2, 3, 4, 5, 6, 7, 8];

  if (!arrNumber.includes(parseInt(dayOfWeek))) {
    Message("Escolhe o dia de semana.", "alert-error");
    return;
  }

  if (!starTime) {
    Message("Escolhe hora de início.", "alert-error");
    return;
  }

  if (!endTime) {
    Message("Escolhe hora de término.", "alert-error");
    return;
  }

  if (starTime > endTime) {
    Message("Hora início maior que fim.", "alert-error");
    return;
  }

  swals = swal("Aguarde", "A gravar dados...", "info", {
    buttons: false,
    closeOnClickOutside: false,
  });

  const objRow = {
    agency,
    dayOfWeek,
    starTime,
    endTime,
  };

  const url = `${router}insert-setting-time-table-agency`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "unsucessfully") {
      Message(obj.text, "alert-error");
      return;
    }

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Cargo", "Utilizador sem permissão.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "successfully") {
      const data = obj.data;
      CleanFiledTimeTable();
      FillTimeTableAgency(data.timeTable, obj.cantAccess);
      Message();

      ApllyRealTime(data.sended); // RUN THE RELATIME IN THE MODULE
    }
  });
}

// --- CLEAN SETTING TIME TABLE AGENCY ---
function CleanFiledTimeTable() {
  $("#endTime").val("");
  $("#starTime").val("");
  document.getElementById("dayOfWeek").options[0].selected = true;
}

function WeekDay(number) {
  const n = parseInt(number);
  if (n == 6) {
    return "Domingo";
  } else if (n == 0) {
    return "Segunda-Feira";
  } else if (n == 1) {
    return "Terça-Feira";
  } else if (n == 2) {
    return "Quarta-Feira";
  } else if (n == 3) {
    return "Quinta-Feira";
  } else if (n == 4) {
    return "Sexta-Feira";
  } else if (n == 5) {
    return "Sábado";
  } else {
    return "Inválido";
  }
}

// function ModalConfirm() {
//   const agency = agencySetting;
//   $("#txtId").val(agency);
//   $("#hash-agency-modal").modal("show");
// }

// SHOW OR HIDE BUTTON DELETE IN THE SETTING TABLE TIME
function ValidateButtonDelete(dayOfWeek) {
  if (dayOfWeek) {
    if (dayOfWeek < 7) {
      const rowTime = $(`tr#row-time-${dayOfWeek}`);
      if (rowTime && rowTime.length > 0) {
        $("#btn-delete-time").removeClass("hidden");
        return;
      }
      $("#btn-delete-time").addClass("hidden");
    } else if (dayOfWeek == 7) {
      const arrTimeTable = $('#tbl-time > tbody > tr:not([id*="row-time-0"]');
      for (let i = 0; i < arrTimeTable.length; i++) {
        const rowTable = arrTimeTable[i].getAttribute("id");
        if (rowTable && rowTable != "row-time-5") {
          $("#btn-delete-time").removeClass("hidden");
          break;
        }
      }

      if (arrTimeTable.length == 0) $("#btn-delete-time").addClass("hidden");
    } else if (dayOfWeek == 8) {
      const allTime = $("#tbl-time > tbody > tr");
      if (allTime.length > 0) $("#btn-delete-time").removeClass("hidden");
    }
  } else {
    $("#btn-delete-time").addClass("hidden");
  }
}

// --- FILL IN TABLE HOLIDAY TAB ---
function FillHolidayAgency(data) {
  const tblHoliday = $("#tbl-holiday tbody");
  $("#loading-holiday").html("");
  tblHoliday.html("");

  if (data.length == 0) {
    $("#loading-holiday").html("Nenhum resultado encontrado");
    return;
  }

  data.forEach((row) => {
    const temporary =
      row.type == "1"
        ? `<i class="fa fa-exclamation-circle" title="Hora início: ${row.starTime} | Hora fim: ${row.endTime}"></i>`
        : "";
    tblHoliday.append(
      `<tr id="row-holiday-${row.id}">
        <td> ${row.date} </td>
        <td> ${row.description}</td>
        <td> ${HolidayType(row.type)} ${temporary} </td>
        <td><a href="#" data-toggle="tooltip" title="Eliminar" onclick="GetHolidayAgency(${
          row.id
        })" style="cursor: pointer; margin-left: 14px;"><i class="flaticon-edit"></i></a>
        </td>

        <td>
          <a href="#" data-toggle="tooltip" id="data-holiday-${
            row.id
          }" title="Eliminar" onclick="DeleteHoliday(this)" style="cursor: pointer; margin-left: 14px;"><i class="flaticon-garbage"></i></a>
        </td>
      </tr>`
    );
  });
}

// SWITCH CASE OF TYPE OF HOLIDAY
function HolidayType(type) {
  if (type == "1") {
    return "Temporário";
  }

  if (type == "2") {
    return "Definitivo";
  }

  if (type == "3") {
    return "Tolerância de ponto";
  }

  return "tipo de feriado";
}

// VERIFY IF TYPE HOLIDAY IS TEMPORARY
function ChangeTypeHoliday(typeElement) {
  if (!(typeElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }
  const holidayType = typeElement.value;

  if (holidayType == 1 || holidayType == 3) {
    $("#holiday-temporary").removeClass("hidden");
  } else {
    $("#holiday-temporary").addClass("hidden");
    $("#tmpStartTime").val("");
    $("#tmpEndTime").val("");
  }
}

// VALIDATE AND SAVE SETTING HOLIDAy AGENCY
async function SaveSettingHolidayAgency() {
  const holidayId = $("input#holiday-id").val();
  const agency = agencySetting;
  const description = $("input#description").val();
  const startDate = $("input#startDate").val();
  const type = $("select#type").val();

  if (!description) {
    Message("Insira uma breve descrição", "alert-error");
    return;
  }

  if (!startDate) {
    Message("Insira a data", "alert-error");
    return;
  }

  if (!type) {
    Message("Insira o tipo", "alert-error");
    return;
  }

  let objSettingHolidayAgency = {
    agency,
    description,
    startDate,
    type,
  };

  if (type == 1 || type == 3) {
    const startTime = $("#tmpStartTime").val();
    const endTime = $("#tmpEndTime").val();

    if (startTime == "") {
      Message("Insira a Hora de início", "alert-error");
      return;
    }

    if (endTime == "") {
      Message("Insira o Hora de fim", "alert-error");
      return;
    }

    Object.assign(objSettingHolidayAgency, {
      startTime,
      endTime,
      temporary: true,
    });
  }

  const get = holidayId != "" ? `?id=${holidayId}` : "";
  const response = await CallBackEnd({
    action: `${router}insert-setting-holiday-agency${get}`,
    method: "POST",
    arr: objSettingHolidayAgency,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    if (holidayId != "") {
      const rowEdited = $(`tr#row-holiday-${holidayId}`);
      rowEdited[0].children[0].innerHTML = startDate;
      rowEdited[0].children[1].innerHTML = description;
      rowEdited[0].children[2].innerHTML =
        type == "2" ? "Definitivo" : "Temporário";
    } else {
      FillHolidayAgency(response.data);
    }
    ClearFiledHoliday();
    Message();
  }
}

// GET DATA IN THE EACH HOLIDAY TO UPDATE
async function GetHolidayAgency(id) {
  Array.from($("#tbl-holiday > tbody > tr")).forEach((rowTR) => {
    rowTR.classList.remove("selected-row");
  });

  $(`tr#row-holiday-${id}`).addClass("selected-row");
  const response = await CallBackEnd({
    action: `${router}get-holiday?id=${id}`,
  });

  if (!response.error) {
    const holiday = response.data;

    $("input#holiday-id").val(holiday.id);
    $("input#description").val(holiday.description);
    $("input#startDate").val(holiday.date);
    $("select#type").val(holiday.type);

    if (holiday.type == 1 || holiday.type == 3) {
      $("#holiday-temporary").removeClass("hidden");
      $("input#tmpStartTime").val(holiday.startTime);
      $("input#tmpEndTime").val(holiday.endTime);
    }

    $("#btn-add-holiday")[0].innerText = "Atualizar";
  } else {
    Message(response.message, "alert-error");
  }
}

// --- CLEAN SETTING HOLIDAY AGENCY ---
function ClearFiledHoliday() {
  Array.from($("#tbl-holiday > tbody > tr")).forEach((rowTR) => {
    rowTR.classList.remove("selected-row");
  });

  $("#holiday-id").val("");
  $("#description").val("");
  $("#startDate").val("");

  $("#tmpEndTime").val("");
  $("#tmpStartTime").val("");
  $("#holiday-temporary").addClass("hidden");

  document.getElementById("type").options[0].selected = true;
  $("#btn-add-holiday")[0].innerText = "Adicionar";
}

// --- FILL IN SITUATION OF AGENCY IN SETTING ---
function FillTabSituationAgency(data, cantAccess) {
  console.log(data);
  if (!cantAccess) {
    $("#sSite")[0].disabled = true;
    $("#sChatBot")[0].disabled = true;
    $("#sKiosk")[0].disabled = true;
    $("#qrcode")[0].disabled = true;
    $("#submit-situation").remove();
  }

  $("#sSite").val(data.stateSite ? 1 : 0);
  $("#sChatBot").val(data.stateChatbot ? 1 : 0);
  $("#sKiosk").val(data.stateKiosk ? 1 : 0);
  $("#qrcode").val(data.qrcode);
  $("#pusher").val(data.pusher);
  $("#preferential").val(data.preferential);

  $(".sAudience").addClass("hidden");
  if (data.cAudience == "1") {
    $(".sAudience").removeClass("hidden");
    $("#sAudience").val(data.aAudience);
  }
}

// VALIDATE AND SAVE SETTING SITUATION OF AGENCY
async function saveSettingSituation() {
  const agency = agencySetting;
  const site = $("#sSite").val();
  const chatbot = $("#sChatBot").val();
  const kiosk = $("#sKiosk").val();
  const qrcode = $("#qrcode").val();
  const pref = $("#preferential").val();
  const audience = $("#sAudience").val();

  if (!site) {
    Message("Escolhe o estado de site.", "alert-error");
    return;
  }

  if (!chatbot) {
    Message("Escolhe o estado de chatbot.", "alert-error");
    return;
  }

  if (!kiosk) {
    Message("Escolhe o estado de quiosque.", "alert-error");
    return;
  }

  if (!qrcode) {
    Message("Estado de QrCode no Quiosque.", "alert-error");
    return;
  }

  if (!pref) {
    Message("Escolha um Estado de Senha Preferêncial", "alert-error");
    return;
  }

  const objRow = {
    chatbot,
    qrcode,
    kiosk,
    site,
    pref,
  };

  if (!$(".sAudience").hasClass("hidden")) {
    if (!audience) {
      Message("Estado a audiência, por favor.", "alert-error");
      return;
    }

    Object.assign(objRow, { audience });
  }

  const url = `${router}up-setting-situation-agency?i=${agency}`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "error") {
      Message(obj.text, "alert-error");
      return;
    }

    if (obj.message == "successfully") {
      Message();
    }
  });
}

// VALIDATE AND SAVE KIOSK CONFIGURATION TO PRESENT
function saveScreenKiosk(agencyElement) {
  if (!(agencyElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const agency = agencyElement.value;
  if (!agency) {
    Message("Por favor escolhe uma agência.", "alert-error");
    return;
  }

  swals = swal("Aguarde", "A gravar dados...", "info", {
    buttons: false,
    closeOnClickOutside: false,
  });

  const get = `?agency=${agency}&setting_agency=${agencySetting}`;
  const url = `${router}change-type-kiosk-show${get}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    switch (obj.message) {
      case "agency-not-find":
        swal("Dados", "Verifique agencia escolhido", "info");
        break;

      case "template-not-find":
        swal(
          "Agência",
          "Escolhe tipo de kiosk no template da agência.",
          "warning"
        );
        break;

      case "limited-template":
        swal("Limite", obj.text.toUpperCase(), "warning");
        break;

      case "successfully":
        Message();
        break;

      default:
        swal("Agência", "Por favor escolhe uma agência.", "error");
        break;
    }
    swal.close();
  });

  // const res = await CallBackEnd({
  //   action: `${router}change-type-kiosk-show?agency_chosen=${agencySelected}&agency_url=${agencySetting}`,
  // });
}

// VALIDATE AND SAVE KIOSK MANAGE WHEN TICKET IS PRINTED
async function KioskManageTicket(optionElement) {
  if (!(optionElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }
  const type = optionElement.value;
  if (!type) {
    Message("Por favor escolhe uma opção.", "alert-error");
    return;
  }

  swals = swal("Aguarde", "A GRAVAR DADOS...", "info", {
    buttons: false,
    closeOnClickOutside: false,
  });

  const res = await CallBackEnd({
    action: `${router}backoffice/change-manage-kiosk`,
    method: "POST",
    arr: {
      agency: agencySetting,
      type,
    },
  });

  switch (res.message) {
    case "agency-not-find":
      swal("Dados", "Ação não permitida.", "info");
      break;

    case "success":
      Message();
      break;

    default:
      swal("Atenção", "Ação não permitida.", "error");
      break;
  }
  swal.close();
}

// --- GET ALL CITY IN THE ISLAND
async function GetDataCitys(islandElement, cityID) {
  if (!(islandElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const elemRebuild = cityID == "city" ? "#city" : "#city2";

  $("#zone2 option:nth-child(n+2)").remove();
  $(elemRebuild + " option:nth-child(n+2)").remove();

  $(elemRebuild)[0][0].innerHTML = "-- Escolhe --";
  $(elemRebuild).attr("disabled", true);

  $("#zone2")[0][0].innerHTML = " -- Escolhe --";
  $("#zone2").attr("disabled", true);

  if (islandElement.value == "") return;

  $(elemRebuild).removeAttr("disabled");
  const response = await CallBackEnd({
    action: `${router}city?island=${islandElement.value}`,
  });

  if (!response.error) {
    const obj = response.data;

    if (obj.length > 0) {
      for (let i = 0; i < obj.length; i++) {
        let output = `<option value="${obj[i].city_id}"> ${obj[i].city_name} </option>`;
        $(elemRebuild).append(output);
      }
      Message("Resultado encontrada", "alert-success");
    }
  } else {
    $("#zone2").attr("disabled", true);
    $(elemRebuild)[0][0].innerText = "Nenhum zona encontrado";
    Message("Nenhum zona encontrado", "alert-warning");
  }
}

async function GetDataZones(cityElement, zoneID) {
  if (!(cityElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  $(zoneID).attr("disabled", true);
  $(zoneID + " option:nth-child(n+2)").remove();
  $(zoneID)[0][0].innerHTML = "-- Escolhe --";

  if (cityElement.value == "") return;

  const response = await CallBackEnd({
    action: `${router}zone?city=${cityElement.value}`,
  });
  $(zoneID).removeAttr("disabled");

  if (!response.error) {
    const obj = response.data;

    if (obj.length > 0) {
      for (let i = 0; i < obj.length; i++) {
        let output = `<option value="${obj[i].zone_id}"> ${obj[i].zone_name} </option>`;
        $(zoneID).append(output);
      }
      Message("Resultado encontrada", "alert-success");
    }
  } else {
    $(zoneID)[0][0].innerText = "Nenhuma zona encontrada";
    Message("Nenhuma zona encontrada", "alert-warning");
  }
}

async function SaveAndValidateConfig(type = 1) {
  const config = type == 1 ? "monitor" : "kiosk";

  const agency = agencySetting;
  const state = $(`select#state-${config}`).val();
  const time = $(`input#${config}-time`).val();

  const objSettingsAlive = {
    agency,
    state,
    time,
    type,
  };

  const response = await CallBackEnd({
    action: `${router}insert-alive-to-down`,
    method: "POST",
    arr: objSettingsAlive,
  });
}

// =========================================================================

// ===================  AJAX OF SETTINGS OF THE SERVICES ===================

// GET DATA SETTINGS IN THE AGENCY
let arr;
let serviceSetting = "";

function SettingsServices(serviceElement) {
  if (!(serviceElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const serviceId = serviceElement
    .getAttribute("id")
    .replace("data-service-", "");

  ClearFiledSettingService();
  cleanFormPatternTime();

  // $("input#chkWaitSpecific")[0].checked = false;
  // $("input#chkServiceSpecific")[0].checked = false;

  // OnOffInput("waitingTimeSpecific", false, 'waiting_Time');
  // OnOffInput("serviceTimeSpecific", false, "service_Time");

  // BUILD ELEMENT IN THE DIV
  BuildDayOfWeek("#dayOfWeek");
  EnableDisabledField();

  $("select#sSite").val("");
  $("select#sChatBot").val("");
  $("select#sKiosk").val("");

  const url = `${router}get-settings-service?id=${serviceId}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }
    const arrMessage = ["no-parameter", "access-denied"];
    if (arrMessage.includes(obj.message)) {
      swal("Configuração", "Ação não permitido.", "info");
      return;
    }

    if (obj.message == "no-service") {
      swal("Configuração", "Nenhum serviço encontrado.", "info");
      return;
    }

    if (obj.message == "successfully") {
      const a = obj.data;
      serviceSetting = a.service_id;

      $("#titleSettingService").html(
        `Configurações de serviço - ${a.service_name} <strong> [${a.abbreviation}]</strong>`
      );

      cleanStatusService();
      DrawCardsAgencys(a.settings);

      // const agencies = RebuildAgency(obj.allAgencies);
      // $("select#patternTimeAgency").html(agencies);

      // $("#SettingsServices").html(agencies);
      // $("select#agencyId").html(agencies);
      // $("select#agencies").html(agencies);
      // $("select#selAgency").html(agencies);
      // $("select#agency-all").html(agencies);

      FillNavTabTimeService(a.tabTimeService);
      FillNavTabTimeStandard(a.tabStandardTime);

      $("#settings-service-modal").modal("show");
    }
  });
}

// REBUILD AGENCY IN SETTING SERVICE
function RebuildAgency(data) {
  let options = '<option value=""> -- Escolhe -- </option>';
  data.forEach((row) => {
    options += `<option value="${row.agency_id}"> ${row.agency_name} </option>`;
  });
  return options;
}

function DrawCardsAgencys(b) {
  cardElement = `<div class="checkbox">
                  <label>
                    <input type="checkbox" class="checkAllAgencies" disabled="true">
                    <b id="all-agencies"> Selecionar todos </b>
                  </label>
                </div>`;

  b.agencies.forEach((a) => {
    cardElement += `<div class="checkbox card-agency">
    <label>
      <input type="checkbox" class="agencyID" name="agencyID[]" value="${a.agency_id}" onclick="ChkAgency(this)">
      <span class="span-size" style="font-size: 7pt;"> ${a.agency_name} </span>
    </label>
  </div>`;
  });

  $("#tab1-agencys").html(cardElement);
  $("#tab2-agencys").html(cardElement);
  $("#tab3-agencys").html(cardElement);
  $("#tab4-agencys").html(cardElement);
  $("#tab5-agencys").html(cardElement);
  $("#tab6-agencys").html(cardElement);
}

const globalService = {
  agency: "",
};

function ChkAgency(optionElement) {
  globalService.agency = "";

  if (!(optionElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  if (optionElement.checked == false) return;
  const a = optionElement.value;
  globalService.agency = a;

  const tab =
    optionElement.parentElement.parentElement.parentElement.getAttribute("id");
  switch (tab) {
    case "tab1-agencys":
      ServiceStatus(a);
      break;

    case "tab2-agencys":
      ServiceTime(a);
      break;

    case "tab3-agencys":
      AgencyPatternTime(a);
      break;

    case "tab4-agencys":
      GetDeskAgency(a);
      break;

    case "tab5-agencys":
      GetMessageService(a);
      break;

    case "tab6-agencys":
      GetAcronymInService(a);
      break;
  }
}

// --- FILL IN SITUATION OF SERVICE IN SETTING ---
function ServiceStatus(agency) {
  cleanStatusService();

  $("#tab1-agencys .agencyID")
    .toArray()
    .forEach((element) => {
      element.checked = element.value == agency ? true : false;
    });

  const get = `?agency=${agency}&service=${serviceSetting}`;
  const url = `${router}get-situation-service${get}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      if (obj.data.length == 0) return;

      const a = obj.data;
      $("#sSite").val(a.state_site);
      $("#sChatBot").val(a.state_chatBot);
      $("#sKiosk").val(a.state_kiosk);
    }
  });
}

// CLEAN FIELD OF THE SITUATION SERVICE STATUS
function cleanStatusService() {
  $("#sChatBot")[0].options[0].selected = true;
  $("#sKiosk")[0].options[0].selected = true;
  $("#sSite")[0].options[0].selected = true;
}

// THE SERVICE TIME FIELDS
function ServiceTime(agency) {
  if (!agency) {
    EnableDisabledField();
    return;
  }

  EnableDisabledField(false);
  $("#tab2-agencys .agencyID")
    .toArray()
    .forEach((element) => {
      element.checked = element.value == agency ? true : false;
    });

  const get = `?agency=${agency}&service=${serviceSetting}`;
  const url = `${router}get-time-service${get}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      FillNavTabTimeService(obj.data);
    }
  });
}

function ClearFiledSettingService() {
  $(".nav-tabs.tab-collection1 a[href='#tab1']").tab("show");
  $("select#patternTimeAgency").removeAttr("disabled");
  $("#btn-add-pattern").addClass("hidden");

  $("#nCallMessage").val("");
  $("#pCallMessage").val("");
  $("#pCallMessage").attr("disabled", true);
  $("#nCallMessage").attr("disabled", true);

  $("#btn-add-pattern")[0].innerText = "Adicionar";
  $("#tab4-list-desk").html(
    "<h6><b> Escolhe uma das agencia para visualizar balcão. </b></h6>"
  );

  $("#btn-save-without-priority").addClass("hidden");
  $("#addMessageService").addClass("hidden");

  $("#acronym").val("");
  $("#acronym").attr("disabled", true);
  $("#deleteMessageService").addClass("hidden");
  $("#addAcronymService").addClass("hidden");

  $("#priority-service").addClass("hidden");

  const tcktPriority = $("#tPriority");
  tcktPriority.attr("disabled", true);
  tcktPriority.val("");

  const tcktNormal = $("#tNormal");
  tcktNormal.attr("disabled", true);
  tcktNormal.val("");
}

// GET MESSAGE IN THE SETTINGS SERVICE
function GetMessageService(agency) {
  if (!agency) {
    $("#nCallMessage").val("");
    $("#pCallMessage").val("");

    $("#pCallMessage").attr("disabled", true);
    $("#nCallMessage").attr("disabled", true);

    $("#deleteMessageService").addClass("hidden");
    $("#addMessageService").addClass("hidden");
    return;
  }

  $("#tab5-agencys .agencyID")
    .toArray()
    .forEach((el) => {
      el.checked = el.value == agency ? true : false;
    });

  $("#addMessageService").removeClass("hidden");
  $("#addMessageService").html("Adicionar");

  $("#priorityCallMessage").val("");
  $("#normalCallMessage").val("");

  const service = `&service=${serviceSetting}`;
  const get = `?agency=${agency}${service}`;
  const url = `${router}get-message-in-service${get}`;

  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "successfully") {
      const a = obj.data;

      $("#deleteMessageService").addClass("hidden");
      if ("mCallNormal" in a) {
        $("#deleteMessageService").removeClass("hidden");
      }

      const stateName = !a.status ? "Ativar" : "Desativar";
      $("#deleteMessageService").html(stateName);
      $("#deleteMessageService").attr("status", !a.status);

      const pMessage = $("#pCallMessage");
      pMessage.removeAttr("disabled");
      pMessage.val(a.mCallPriority);

      const nMessage = $("#nCallMessage");
      nMessage.removeAttr("disabled");
      nMessage.val(a.mCallNormal);

      if (a.status != undefined) FieldOnOff(a.status);
    }
  });
}

function AddMessageService() {
  const objRow = {
    pCallMessage: $("#pCallMessage").val().trim(),
    nCallMessage: $("#nCallMessage").val().trim(),
    agency: globalService.agency,
    service: serviceSetting,
  };

  if (!objRow.agency) {
    $("#nCallMessage").val("");
    $("#pCallMessage").val("");

    $("#pCallMessage").attr("disabled", true);
    $("#nCallMessage").attr("disabled", true);
    return;
  }

  if (!objRow.pCallMessage && !objRow.nCallMessage) {
    Message("Por favor preenche os campos.", "alert-error");
    return;
  }

  const url = `${router}insert-message-service`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "error") {
      Message(obj.text, "alert-error");
      return;
    }

    if (obj.message == "successfully") {
      FieldOnOff(true);
      Message();
    }

    $("#deleteMessageService").removeClass("hidden");
  });
}

function OnOffMessageService(divElement) {
  const status = divElement.getAttribute("status");

  const objRow = {
    agency: globalService.agency,
    service: serviceSetting,
    status,
  };

  const url = `${router}setting-message-in-service`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "successfully") {
      FieldOnOff(obj.data);
      Message();
    }
  });
}

function FieldOnOff(state) {
  $("#deleteMessageService").attr("status", !state == true ? "true" : "false");
  $("#deleteMessageService").html(!state ? "Ativar" : "Desativar");

  if (state) {
    $("#nCallMessage").removeAttr("disabled");
    $("#pCallMessage").removeAttr("disabled");
    $("#addMessageService").removeClass("hidden");
    $("#addMessageService").html("Atualizar");
    return;
  }

  $("#pCallMessage").attr("disabled", true);
  $("#nCallMessage").attr("disabled", true);
  $("#addMessageService").html("Adicionar");
  $("#addMessageService").addClass("hidden");
}

// HIDE ADD DEFAULT TIME BUTTON IN CONFIGURATION SERVICE
function HideButtonSave(agency) {
  if ($("#pattern-time-id").val() != "") return;

  if (agency == "") {
    $("#btn-add-pattern").addClass("hidden");
    return;
  }

  const arrAgency = $(
    `#tbl-standard-time > tbody > tr#row-standard-time-${agency}`
  );
  if (arrAgency && arrAgency.length > 0) {
    $("#btn-add-pattern").addClass("hidden");
  } else {
    $("#btn-add-pattern").removeClass("hidden");
  }
}

function AgencyPatternTime(agency) {
  $("#btn-add-pattern").removeClass("hidden");
  $("#tab3-agencys .agencyID")
    .toArray()
    .forEach((el) => {
      el.checked = el.value == agency ? true : false;
    });
}

// VALIDATE AND SAVE SETTING TIME STANDARD OF SERVICE
function savePatternTime() {
  const agency = globalService.agency;
  let waitingTime = $("#wTime").val();
  let serviceTime = $("#sTime").val();
  const state = $("#state").val();

  if (!agency) {
    Message("Escolhe a agência, por favor.", "alert-error");
    return;
  }

  const chkWaitSpecific = $("#chkWaitSpecific")[0].checked;
  const chkServiceSpecific = $("#chkServiceSpecific")[0].checked;

  if (chkWaitSpecific) {
    const waitSpecific = $("#waitingTimeSpecific").val().trim();
    if (!waitSpecific) {
      Message("Por favor insira T. de espera.", "alert-error");
      return;
    }

    if (!waitSpecific.includes(":")) {
      Message("Insira T. de espera válido.", "alert-error");
      return;
    }

    if (waitSpecific.split(":").length == 1) {
      Message("T. de espera inválido.", "alert-error");
      return;
    }
    waitingTime = TruncateTime(waitSpecific);
  } else {
    waitingTime = waitingTime ? TruncateTime(waitingTime) : "";
  }

  if (chkServiceSpecific) {
    const serviceSpecific = $("#serviceTimeSpecific").val().trim();
    if (!serviceSpecific) {
      Message("Por favor insira T. de atendimento.", "alert-error");
      return;
    }

    if (!serviceSpecific.includes(":")) {
      Message("Insira T. de atendimento válido.", "alert-error");
      return;
    }

    if (serviceSpecific.split(":").length == 1) {
      Message("T. de atendimento inválido.", "alert-error");
      return;
    }
    serviceTime = TruncateTime(serviceSpecific);
  } else {
    serviceTime = serviceTime ? TruncateTime(serviceTime) : "";
  }

  if (!waitingTime) {
    Message("Insira o T. de Espera.", "alert-error");
    return;
  }

  if (!serviceTime) {
    Message("Insira T. de Atendimento.", "alert-error");
    return;
  }

  const objRow = {
    service: serviceSetting,
    waitingTime,
    serviceTime,
    agency,
    state,
  };

  const url = `${router}insert-setting-pattern-time`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "Utilizador sem permissão.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "error") {
      Message(obj.text, "alert-error");
      return;
    }

    if (obj.message == "success") {
      FillNavTabTimeStandard(obj.data);
      Message();
    }
  });
}

function SliceSentences(string, len = "-3") {
  return string ? string.slice(0, len) : "--";
}

function GetDeskAgency(agency) {
  const tblRow = $("#tab4-list-desk");
  tblRow.html("");

  $("#tab4-agencys .agencyID")
    .toArray()
    .forEach((el) => {
      el.checked = el.value == agency ? true : false;
    });

  if (!agency) {
    $("#btn-save-without-priority").addClass("hidden");
    return;
  }

  $("#btn-save-without-priority").removeClass("hidden");

  tblRow.html(
    "<h6 class='text-center' style='color: darkgrey;'><b> A carregar... </b></h6>"
  );

  const service = `&service=${serviceSetting}`;
  const url = `${router}list-desk-agency?agency=${agency}${service}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);
    tblRow.html("");

    if (obj.message == "data-empty") {
      tblRow.html("<h6><b> Nenhum balcão encontrado. </b></h6>");
      return;
    }

    if (obj.message == "successfully") {
      tblRow.append(`<div class="checkbox">
                      <label>
                        <input type="checkbox" onclick="chkAllDesks(this.checked)">
                        <b id="all-desks"> Selecionar todos </b>
                      </label>
                    </div>`);

      obj.data.forEach((d) => {
        const check = d.checked ? 'checked="true"' : "";
        tblRow.append(
          `<div class="checkbox ckb-desks">
          <label> <input type="checkbox" class="deskID" value="${d.desk}" ${check}>
            <span style='font-size: 8pt;'> ${d.name} </span>
          </label>
        </div>`
        );
      });
    }
  });
}

function chkAllDesks(checked) {
  $(".deskID:checkbox").prop("checked", checked);
  changeNameCheckAll(checked, "desks");
}

function AddServiceWithoutPriority() {
  if (!globalService.agency) {
    Message("Escolhe agencia, por favor.", "alert-error");
    return;
  }

  const desks = $(".deskID:checked")
    .toArray()
    .map(function (check) {
      return parseInt($(check).val());
    });

  const objRow = {
    agency: globalService.agency,
    service: serviceSetting,
    desks,
  };

  const url = `${router}insert-service-no-priority-desk`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "successfully") {
      Message();
    }
  });
}

// GET ACRONYM IN THE SETTINGS SERVICE TO EACH THE AGENCIES
function GetAcronymInService(agency) {
  if (!agency) {
    EnableDisabledField();
    return;
  }
  globalService.agency = agency;

  EnableDisabledField(false);
  $("#tab6-agencys .agencyID")
    .toArray()
    .forEach((el) => {
      el.checked = el.value == agency ? true : false;
    });

  const tPriority = $("#tPriority");
  tPriority.attr("disabled", true);
  tPriority.val("");

  const tNormal = $("#tNormal");
  tNormal.attr("disabled", true);
  tNormal.val("");

  const deleteAcronymService = $("#deleteAcronymService");
  const fieldAcronym = $("#acronym");
  fieldAcronym.val("");

  if (!agency) {
    fieldAcronym.attr("disabled", true);
    deleteAcronymService.addClass("hidden");
    $("#addAcronymService").addClass("hidden");
    return;
  }

  $("#addAcronymService").removeClass("hidden");
  fieldAcronym.removeAttr("disabled");
  $("#addAcronymService").html("Adicionar");

  const get = `?agency=${agency}&service=${serviceSetting}`;

  const url = `${router}get-other-acronym-in-service${get}`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "acronym-not-find") return;

    if (obj.message == "successfully") {
      const d = obj.data;

      fieldAcronym.val(d.abbreviation);
      tPriority.val(d.tPriority);
      tNormal.val(d.tNormal);
      $("#deleteAcronymService").removeClass("hidden");
      $("#deleteAcronymService").html("Eliminar");

      if (d.abbreviation) {
        deleteAcronymService.html("Eliminar");
        deleteAcronymService.removeClass("hidden");
      }

      if (d.active) {
        $("#priority-service").removeClass("hidden");
        tPriority.removeAttr("disabled");
        tNormal.removeAttr("disabled");
      } else {
        $("#priority-service").addClass("hidden");
      }
    }
  });
}

// SAVE THE ACRONYM SELECT IN THE SETTINGS OF SERVICE
function UpAcronymInService() {
  const objRow = {
    service: serviceSetting,
    agency: globalService.agency,
    acronym: $("#acronym").val().trim(),
  };

  if (!objRow.agency) {
    $("#acronym").val("");
    $("#acronym").attr("disabled", true);
    return;
  }

  if (!IsString(objRow.acronym) && objRow.acronym != "") {
    Message("Acrónimo inserido inválido.", "alert-warning");
    return;
  }

  if (!$("#priority-service").hasClass("hidden")) {
    const objUp = {
      tPriority: $("#tPriority").val(),
      tNormal: $("#tNormal").val(),
    };

    if (!(objUp.tPriority == "" && objUp.tNormal == "")) {
      if (objUp.tPriority == "") {
        Message("Insira o número Com prioridade.", "alert-error");
        return;
      }

      if (objUp.tNormal == "") {
        Message("Insira o número de Sem prioridade.", "alert-error");
        return;
      }

      if (!IsNumber(objUp.tPriority) || !IsNumber(objUp.tNormal)) {
        Message("Campos de prioridade inválidos.", "alert-warning");
        return;
      }

      Object.assign(objRow, objUp);
    }
  }

  const url = `${router}new-acronym-in-service`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "error") {
      Message(obj.text, "alert-error");
      return;
    }

    if (obj.message == "successfully") {
      Message();
    }

    $("#deleteAcronymService").removeClass("hidden");
    $("#deleteAcronymService").html("Eliminar");
  });
}

function DeleteAcronymInService() {
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then((response) => {
    if (response) {
      const service = serviceSetting;
      const agency = globalService.agency;

      const get = `id=${service}&agency=${agency}&action=delete-priority-service`;
      const url = `${router}delete?${get}`;

      $.get(url, function (data) {
        const obj = JSON.parse(data);

        if (obj.message == "not-logged") {
          swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
            window.location = "home";
          });
          return;
        }

        if (obj.message == "access-denied") {
          swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
            window.location = "home";
          });
          return;
        }

        if (obj.message == "successfully") {
          $("#tPriority").val("");
          $("#tNormal").val("");
          $("#acronym").val("");
          Message();
        }
      });
    }
  });
}

// --- FILL TIME TABLE OF SERVICE IN SETTING ---
function FillNavTabTimeService(data) {
  const tblTimeTableService = $("#tbl-time-table-service tbody");
  tblTimeTableService.html("");

  $("#loading-time-table-service").html("");
  if (data.length == 0) {
    $("#loading-time-table-service").html("Nenhum resultado encontrado");
    return;
  }

  data.forEach((row) => {
    tblTimeTableService.append(
      `<tr id="row-time-service-${row.id}">
        <td> ${row.clientType} </td>
        <td> ${WeekDay(row.dayOfWeek)} </td>
        <td> ${row.startTime} </td>
        <td> ${row.endTime} </td>
        <td> ${row.type_schedule} </td>
        <td>
          <a href="javascript:void(0)" data-toggle="tooltip" title="Eliminar" id="time-in-service-${
            row.id
          }" onclick="DeleteTimeInService(this)" style="cursor: pointer; margin-left: 14px;"><i class="flaticon-garbage"></i></a>
        </td>
      </tr>`
    );
  });
}

// DISABLED / ENABLE FIELDS IN THE TIME SERVICE
function EnableDisabledField(disabeld = true) {
  const dayOfWeek = $("select#dayOfWeek");
  const clientType = $("select#clientType");
  const starTime = $("input#starTime");
  const endTime = $("input#endTime");
  const submitTimeTable = $("button#submitServiceTimeTable");

  if (disabeld) {
    dayOfWeek.attr("disabled", true);
    clientType.attr("disabled", true);
    starTime.attr("disabled", true);
    endTime.attr("disabled", true);
    submitTimeTable.addClass("hidden");
    return;
  }

  dayOfWeek.removeAttr("disabled");
  clientType.removeAttr("disabled");
  starTime.removeAttr("disabled");
  endTime.removeAttr("disabled");
  submitTimeTable.removeClass("hidden");
}

// VALIDATE AND SAVE SETTING TIME TABLE SERVICE
function saveTimeService() {
  const timeTable = $("input#time-table-id").val();
  const clientType = $("select#clientType").val();
  const dayOfWeek = $("select#dayOfWeek").val();

  const agency = $("#tab2-agencys input:checked").val();
  const starTime = $("input#starTime").val();
  const endTime = $("input#endTime").val();
  const type = $("#type-schedule").val();

  const chkAgency = $("#tab2-agencys input:checked").toArray();
  if (chkAgency.length == 0) {
    Message("Por favor escolhe a agência.", "alert-error");
    return;
  }

  if (!dayOfWeek) {
    Message("Escolhe dia de semana.", "alert-error");
    return;
  }

  if (!clientType) {
    Message("Escolhe o tipo de utente.", "alert-error");
    return;
  }

  if (!type) {
    Message("Escolhe o tipo de horário.", "alert-error");
    return;
  }

  if (!starTime) {
    Message("Insira a hora de início.", "alert-error");
    return;
  }

  if (!endTime) {
    Message("Insira a hora de término.", "alert-error");
    return;
  }

  if (starTime > endTime) {
    Message("Hora início maior que fim.", "alert-error");
    return;
  }

  const objRow = {
    service: serviceSetting,
    clientType,
    dayOfWeek,
    starTime,
    endTime,
    agency,
    type,
  };

  const get = timeTable != "" ? `?id=${timeTable}` : "";
  const url = `${router}insert-setting-time-service${get}`;

  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      FillNavTabTimeService(obj.data);
      cleanTimeTableService();
      Message();
    }
  });
}

// --- CLEAN SETTING TIME TABLE SERVICE ---
function cleanTimeTableService() {
  $("#tab2-agencys input:checked").prop("checked", !1);
  $("#clientType, #dayOfWeek").val("");
  $("#starTime, #endTime").val("");
  $("#type-schedule").val("");
  $("#time-table-id").val("");
}

// --- FILL SERVICE WITHOUT PRIORITY IN CONFIGURATION ---
function FillNavTabTimeStandard(data) {
  const tblStandardTime = $("#tbl-standard-time tbody");
  tblStandardTime.html("");

  $("#loading-standard-time").html("");
  if (data.length == 0) {
    $("#loading-standard-time").html("Nenhum resultado encontrado");
    return;
  }

  data.forEach((row) => {
    tblStandardTime.append(
      `<tr id="row-standard-time-${row.agency_id}" class="row-table">
        <td style="font-size: 8pt"> ${row.agency_name} </td>
        <td> ${row.waitingTime} </td>
        <td> ${row.serviceTime} </td>
        <td>
          <a href="javascript:void(0)" data-toggle="tooltip" title="Eliminar" id="time-standard-${row.agency_id}" onclick="DeleteStandardTime(this)" style="cursor: pointer; margin-left: 14px;">
            <i class="flaticon-garbage"></i>
          </a>
        </td>
      </tr>`
    );
  });
}

// --- CLEAN SETTING TIME TABLE SERVICE ---
function cleanFormPatternTime() {
  $("#pattern-time-id").val("");
  $("#wTime").val("");
  $("#sTime").val("");

  $("#tab3-agencys:checked").prop("checked", !1);
  const agency = $("#patternTimeAgency");
  agency.removeAttr("disabled");
  agency.val("");

  $("#chkWaitSpecific")[0].checked = false;
  $("#chkServiceSpecific")[0].checked = false;

  OnOffInput("waitingTimeSpecific", false, "wTime");
  OnOffInput("serviceTimeSpecific", false, "sTime");

  $("#state").val("");
  $("#btn-add-pattern").addClass("hidden");

  $("#btn-add-pattern")[0].innerText = "Adicionar";
  document.getElementById("state").options[0].selected = true;

  $(".row-table")
    .toArray()
    .forEach(function (tr) {
      tr.classList.remove("selected-row");
    });
}

// ===================  AJAX OF USERS IN WORKING ===================
// ADD AND REMOVE COLOR IN THE CONTENT INPUT

// LOADING ALL DATA WORKS IN THE DATATABLE
async function LoadAllUsersInAgency(agencyId) {
  if ($.fn.dataTable.isDataTable("#tbl-load-works")) {
    $("#tbl-load-works").DataTable().clear();
    $("#tbl-load-works").DataTable().destroy();
  }
  const agency = agencyId.replace("agency-", "");

  const response = await CallBackEnd({
    action: `${router}load-workers.php?agency=${agency}`,
  });
  const obj = response.data;
  $("input#agency-worker").val(obj.agency);

  $("div#add-worker-modal").modal("show");
  if (response.message == "successfully") {
    const tbody = $("#tbl-load-works tbody");
    tbody.html("");

    obj.users.forEach((user) => {
      tbody.append(
        `<tr>
          <td class="form-check-label">
            <input class="checkInput" style="margin-right: 15px !important;" type="checkbox" value="${
              user.user_id
            }"> ${user.name}<small> - ${user.email} </small>
          </td>
          <td>
            <select class="form-control role" id="user-id-${
              user.user_id
            }"> ${DrawOption(obj.role)} </select>
          </td>
        </tr>`
      );
    });

    $("#tbl-load-works").dataTable({
      scrollY: "340px",
      scroller: true,
      deferRender: true,
      scrollCollapse: true,
      paging: false,
      lengthChange: false,
      searching: true,
      language: {
        url: "../data/Portuguese.json",
      },
      responsive: true,
      dom: "Bfrtip",
    });
  }
}

function AddRemoveClass(chkId) {
  const chkInput = $(`input#${chkId}`)[0];
  const txtSpan = chkInput.parentElement.children[1];

  if (chkInput.checked) {
    txtSpan.classList.add("span-color");
  } else {
    txtSpan.classList.remove("span-color");
  }
}

// DRAW OPTION IN THE SELECTED
function DrawOption(dataRole) {
  let arrOption = '<option value=""> -- Escolhe o cargo -- </option>';
  dataRole.forEach((role) => {
    arrOption += `<option value="${role.role_id}"> ${role.role_name} </option>`;
  });
  return arrOption;
}

// VALIDATE AND SAVE WORKER IN THE AGENCY
async function AddWorkerInAgency() {
  const worker = AllWorkerSeleted();
  let error = "";

  for (let i = 0; i < worker.length; i++) {
    error = false;
    if (worker[i]["role"] == "") {
      error = true;
      break;
    }
  }

  if (error) {
    Message("Por favor escolhe o cargo.", "alert-error");
    return false;
  }
  const agency = $("#agency-worker").val();
  const objRow = {
    worker,
    agency,
  };

  const url = `${router}insert-worker-in-agency`;
  $.post(url, JSON.stringify(objRow), function (data) {
    const obj = JSON.parse(data);

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Cargo", "Utilizador sem permissão.", "info").then(() => {
        list_works.DataTable().ajax.reload();
      });
      return;
    }

    if (obj.message == "successfully") {
      Message();
      $("div#add-worker-modal").modal("hide");

      $("#tbl-load-works tbody").html("");
      list_works.DataTable().ajax.reload();

      if ($.fn.dataTable.isDataTable("#tbl-load-works")) {
        $("#tbl-load-works").DataTable().destroy();
      }
    }
  });
}

// GET ALL WORKER SELECTED TO ADD IN AGENCY
function AllWorkerSeleted() {
  const chkUserSelected = Array.from($("#tbl-load-works tbody tr.selected"));
  let arrWorker = [];

  for (let i = 0; i < chkUserSelected.length; i++) {
    const userId = chkUserSelected[i].children[0].children[0].value;

    let objRow = {};
    objRow["user"] = userId;
    objRow["role"] = $("#user-id-" + userId).val();
    arrWorker.push(objRow);
  }
  return arrWorker;
}

// CHANGE WORKER IN THE AGENCY
async function ConstrainPages(workerElement) {
  if (!(workerElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const data = workerElement.getAttribute("id").replace("u-worker-", "");
  const inputWorker = data.split("-");

  const objRow = {
    agency: inputWorker[2],
    worker: inputWorker[0],
    user: inputWorker[1],
  };

  const url = `${router}save-worker-job`;
  $.post(url, JSON.stringify(objRow), function (data) {
    const obj = JSON.parse(data);

    if (obj.message == "not-logged") {
      swal("Sessão", "Sessão expirado.", "info").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Cargo", "Utilizador sem permissão.", "info").then(() => {
        list_works.DataTable().ajax.reload();
      });
      return;
    }

    if (obj.message == "successfully") {
      list_works.DataTable().ajax.reload();
      Message();
    }
  });
}

// GET DATA OF WORKER IN THE AGENCY
async function GetWorkerInAgency(userId, agencyId) {
  $("#chk-all-data")[0].checked = false;

  const response = await CallBackEnd({
    action: `${router}get-services-user?agency=${agencyId}&user=${userId}`,
  });

  if (response.error) {
    Message(response.message, "alert-error");
    $("div#settings-worker-modal").modal("hide");
  } else {
    const obj = response.data;
    $("input#userID").val(obj.user_id);
    $("#title-modal-user").html(
      `Serviços do Utilizador - <b> ${obj.name_user} </b>`
    );

    const drawService = $("div#all-services-users");
    drawService.html("");

    obj.service.forEach((row) => {
      const chkSelected = row.checked == 1 ? 'checked="true"' : "";
      const colorSpan = row.checked == 1 ? 'class="span-color"' : "";
      drawService.append(
        `<div class="checkbox div-chk-service">
          <input type="checkbox" class="chk-info" onclick="AddRemoveClass(this.id)" id="chk-${row.service_id}" value="${row.service_id}" ${chkSelected}>
          <span ${colorSpan}> ${row.service_name}</span>
           [<b> ${row.service_abbreviation}</b> ]
        </div>`
      );
    });

    $("div#settings-worker-modal").modal("show");
  }
}

// VALIDATE AND SAVE WORKER SERVICE IN THE USER
async function ValidateAndSaveServiceWorker() {
  const userId = $("input#userID").val();
  const agencyId = $("input#agency_id").val();
  const arrChk = Array.from($(`#all-services-users > div > input:checked`));
  let arrRow = [];
  for (let i = 0; i < arrChk.length; i++) {
    arrRow.push(arrChk[i].value);
  }

  const response = await CallBackEnd({
    action: `${router}insert-service-in-user`,
    method: "POST",
    arr: {
      service: arrRow,
      user: userId,
      agency: agencyId,
    },
  });

  if (response.error) {
    Message(response.message, "alert-error");
    $("div#settings-worker-modal").modal("hide");
  } else {
    Message();
  }
}

// ===================  DELETE DATA IN THE TABLES ===================

// --- DELETE DESK IN AGENCY ---
async function DeleteDesk(deskElement) {
  if (!(deskElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const desk = deskElement.getAttribute("id").replace("desk-", "");
  const data = desk.split("-");

  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const get = `?id=${data}&action=delete-desk`;
      const response = await CallBackEnd({
        action: `${router}delete${get}`,
      });

      if (response.error) {
        Message(response.message, "alert-error");
      } else {
        $(`#tbl_desk tr#${data}`).remove();
      }
      const rowTable = document.querySelectorAll("#tbl_desk tbody tr");
      if (rowTable.length == 0) location.reload(true);
      Message();
    }
  });
}

// --- DELETE AGENCY ---
async function DeleteAgency(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const agencyId = cardElement.getAttribute("id").replace("data-agency-", "");
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const response = await CallBackEnd({
        action: `${router}delete-agency?agency=${agencyId}`,
      });

      if (!response.success) {
        Message(response.message, "alert-error");
      } else {
        $(`#tblAgencia tr span#agency-${agencyId}`).closest("tr").remove();
      }

      const rowTable = document.querySelectorAll("#tblAgencia tbody tr");
      if (rowTable.length == 0) {
        load_agency.DataTable().ajax.reload();
        load_agency_mobile.DataTable().ajax.reload();
      }
    }
  });
}

// --- DELETE CLIENT TYPES ---
async function DeleteClientType(clientElement) {
  if (!(clientElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const dataId = clientElement.getAttribute("id").replace("client-types-", "");
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const response = await CallBackEnd({
        action: `${router}delete?id=${dataId}&action=delete-client-type`,
      });

      if (response.error) {
        Message(response.message, "alert-error");
      } else {
        $(`#client-type-${dataId}`).remove();
      }
    }
  });
}

// --- DELETE NOTICE INT THE COMMERCIAL ---
async function DeleteNotice(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const notices = cardElement.getAttribute("id").replace("link-notices-", "");
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      // const notices = $("#notice").val();
      $("#delete-notice-modal").modal("hide");

      const response = await CallBackEnd({
        action: `${router}delete?id=${notices}&action=delete-notice`,
      });

      if (response.error) {
        Message(response.message, "alert-error");
      } else {
        $(`a#link-notices-${notices}`).closest("tr").remove();
        table_notice.DataTable().ajax.reload();
        Message();
      }
    }
  });
}

// --- DELETE IMAGE IN THE COMMERCIAL ---
async function DeleteImage(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  const image = cardElement.getAttribute("id").replace("delete-image-", "");
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const url = `?id=${image}&action=delete-publicity&module=image`;

      const obj = await CallBackEnd({
        action: `${router}delete${url}`,
      });

      if (obj.error) {
        Message(obj.message, "alert-error");
      } else {
        $(`a#delete-image-${image}`).closest("tr").remove();
        table_img.DataTable().ajax.reload();
        Message();
      }
    }
  });
}

// --- DELETE TIMETABLE ---
async function DeleteTimeTableInAgency() {
  const agencyId = agencySetting;
  const dayOfWeek = $("#dayOfWeek").val();

  if (dayOfWeek == null && dayOfWeek != "0") {
    Message("Escolhe o dia de semana.", "alert-error");
    return;
  }

  swals = swal("Aguarde", "A eliminar dados...", "info", {
    buttons: false,
    closeOnClickOutside: false,
  });

  const get = `?agency=${agencyId}&dayOfWeek=${dayOfWeek}&action=delete-timetable`;
  $.get(`${router}delete${get}`, function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "access-denied") {
      swal("Horário", "Utilizador sem permissão.", "info");
      return;
    }

    if (obj.error) {
      Message(obj.message, "alert-error");
      return;
    }
    CleanFiledTimeTable();

    document.getElementById("dayOfWeek").options[0].selected = true;
    switch (dayOfWeek) {
      case "8":
        $("#tbl-time > tbody > tr").remove();
        $("#btn-delete-time").addClass("hidden");
        break;

      default:
        if (dayOfWeek == 7) {
          const arrTimeTable = $(
            '#tbl-time > tbody > tr:not([id*="row-time-6"]'
          );
          for (let i = 0; i < arrTimeTable.length; i++) {
            const rowTable = arrTimeTable[i].getAttribute("id");
            if (rowTable && rowTable != "row-time-5") {
              arrTimeTable[i].remove();
              $("#btn-delete-time").addClass("hidden");
            }
          }
        } else {
          $("#btn-delete-time").addClass("hidden");
          $(`#tbl-time > tbody > tr#row-time-${dayOfWeek}`).remove();
        }
        break;
    }

    const allTimeTable = $("#tbl-time > tbody > tr");
    if (allTimeTable.length == 0) {
      $("#btn-delete-time").addClass("hidden");
      $("#loading-time-table").html("Nenhum resultado encontrado");
    }
    Message();
    ApllyRealTime(obj.data); // RUN THE RELATIME IN THE MODULE
  });
}

// --- DELETE HOLIDAY IN THE SETTING OF AGENCY ---
async function DeleteHoliday(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const holiday = cardElement.getAttribute("id").replace("data-holiday-", "");
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)?`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      swals = swal("Aguarde", "A eliminar feriado...", "info", {
        buttons: false,
        closeOnClickOutside: false,
      });

      const response = await CallBackEnd({
        action: `${router}delete?id=${holiday}&action=delete-holiday`,
      });

      if (response.error) {
        Message(response.message, "alert-error");
      } else {
        ClearFiledHoliday();
        $(`tr#row-holiday-${holiday}`).remove();

        const allHoliday = $("#tbl-holiday > tbody > tr");
        if (allHoliday.length == 0) {
          $("#loading-holiday").html("Nenhum resultado encontrado");
        }
        Message();
      }
      swal.close();
    }
  });
}

// --- DELETE TIME IN THE SETTING OF SERVICE ---
function DeleteTimeInService(serviceElement) {
  if (!(serviceElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const time = serviceElement
    .getAttribute("id")
    .replace("time-in-service-", "");

  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then((response) => {
    if (response) {
      const get = `?id=${time}&action=delete-time-service`;
      const url = `${router}delete${get}`;

      $.get(url, function (data) {
        const obj = JSON.parse(data);

        if (obj.message == "access-denied") {
          swal("Acesso", "Utilizador sem permissão.", "info");
          return;
        }

        if (obj.message == "not-logged") {
          swal("Sessão", "SESSÃO EXPIRADO.", "info").then(() => {
            window.location = "agencys";
          });
          return;
        }

        if (obj.message == "success") {
          cleanTimeTableService();
          $(`tr#row-time-service-${time}`).remove();

          const allTimeService = $("#tbl-time-table-service > tbody > tr");
          if (allTimeService.length == 0) {
            $("#loading-time-table-service").html(
              "Nenhum resultado encontrado."
            );
          }
          Message();
        }
      });
    }
  });
}

// --- DELETE HOLIDAY IN THE SETTING OF AGENCY ---
async function DeleteStandardTime(standardElement) {
  if (!(standardElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const standard = standardElement
    .getAttribute("id")
    .replace("time-standard-", "");

  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const get = `?id=${standard}&action=delete-standard-time`;
      const response = await CallBackEnd({
        action: `${router}delete${get}`,
      });

      if (response.error) {
        Message(response.message, "alert-error");
      } else {
        cleanFormPatternTime();
        $(
          `#tbl-standard-time > tbody > tr#row-standard-time-${standard}`
        ).remove();

        const allStandardTime = $("#tbl-standard-time > tbody > tr");
        if (allStandardTime.length == 0) {
          $("#loading-standard-time").html("Nenhum resultado encontrado");
        }
        Message();
      }
    }
  });
}

async function DeleteWorker(userElement) {
  if (!(userElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const worker = userElement.getAttribute("id").replace("worker-", "");
  const data = worker.split("-");

  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const get = `?id=${data[0]}&agency=${data[1]}&action=delete-worker`;
      const response = await CallBackEnd({
        action: `${router}delete${get}`,
      });

      if (response.error) {
        Message(response.message, "alert-error");
      } else {
        $(`a#worker-${worker}`).closest("tr").remove();
        list_works.DataTable().ajax.reload();
        Message();
      }
    }
  });
}

// ===================  AJAX OF NOTICE -------------

// ===================  SHOW MODAL NOTICE -------------
function ShowModalNotice() {
  $("#add-notice-modal").modal("show");
  BuildShowNotices();
  // ClearFiledNotice();

  $("#titleModalNotice").html("Adicionar aviso");
  $(`#submitNotice`).html("Adicionar");
}

// --- GET DATA OF SERVICE IN MODAL ---
async function GetDataNotice(noticeId) {
  ClearFiledNotice();
  BuildShowNotices(true, noticeId);
  $(`#titleModalNotice`).html("Atualizar aviso");
  $(`#submitNotice`).html("Atualizar");

  $("#add-notice-modal").modal("show");

  const notice = `?id=${noticeId}&action=loading-data`;
  const response = await CallBackEnd({
    action: `${router}setting-notices${notice}`,
  });

  const dataNotice = response.data;
  if (!response.error) {
    $("#notice-id").val(dataNotice.notice_id);
    $("#text").val(dataNotice.notice_text);
    $("#startDt").val(dataNotice.notice_startDt);
    $("#endDt").val(dataNotice.notice_endDt);
    $("#readText").val(dataNotice.notice_read_text);

    if (dataNotice.notice_read_text == 1) {
      $("#cardReadText").removeClass("hidden");
      $("#startTimeToReadText").val(dataNotice.notice_start_read);
      $("#intervalToRead").val(dataNotice.notice_interval);
      $("#endTimeToReadText").val(dataNotice.notice_end_read);
    }
  }
}

// --- CLEAN MODAL NOTICE ---
function ClearFiledNotice() {
  $("input#notice-id").val("");
  document.getElementById("text").value = "";
  $("input#startDt").val("");
  $("input#endDt").val("");
  $("input#readText").val("");
  $("div#all-show").html("");

  $("div#cardReadText").addClass("hidden");
  $("input#startTimeToReadText").val("");
  $("input#intervalToRead").val("");
  $("input#endTimeToReadText").val("");
}

// --- BUILD CHECKBOX SHOW NOTICE ---
async function BuildShowNotices(edited = false, noticeId = null) {
  const get = edited ? `?id=${noticeId}` : "";

  const response = await CallBackEnd({
    action: `${router}load-show-notices${get}`,
  });
  const dataTypes = response.data;

  let allShow = document.getElementById("all-show");
  allShow.innerHTML = "";

  dataTypes.forEach((type) => {
    let div = document.createElement("div");
    let lblName = document.createElement("label");
    let txtInput = document.createElement("input");
    let divTxt = document.createElement("div");

    allShow.appendChild(div);
    div.appendChild(lblName);
    div.appendChild(divTxt);
    lblName.appendChild(txtInput);

    allShow.style.display = "flex";
    div.className = "checkbox";
    div.style.display = "flex";
    div.style.width = "25%";

    txtInput.type = "checkbox";
    txtInput.setAttribute("value", type.show_id);
    if (edited) txtInput.checked = type.check;
    divTxt.innerText = type.show_name;
  });
}

// --- ADD AND EDIT NOTICE ---
async function saveNotice() {
  const screenPresent = $("#all-show input:checked")
    .toArray()
    .map(function (check) {
      return $(check).val();
    });

  const noticeId = $("#notice-id").val();
  const agency = $("#agency-id").val();
  const text = $("#text").val().trim();
  const dtStart = $("#startDt").val().trim();
  const dtEnd = $("#endDt").val().trim();
  const readText = $("#readText").val().trim();

  if (!text) {
    Message("Insira a mensagem do aviso", "alert-error");
    return;
  }

  if (!dtStart) {
    Message("Escolhe a data início", "alert-error");
    return;
  }

  if (!dtEnd) {
    Message("Escolhe a data fim", "alert-error");
    return;
  }

  if (dtStart > dtEnd) {
    Message("Verifica as data inseridas.", "alert-error");
    return;
  }

  if (screenPresent.length == 0) {
    Message("Escolhe onde quer apresentar", "alert-error");
    return;
  }

  let objRow = {
    text,
    dtStart,
    agency,
    dtEnd,
    screenPresent,
    readText,
  };
  const get = noticeId != "" ? `?id=${noticeId}` : "";

  if (readText != "") {
    let startTime = null;
    let interval = null;
    let endTime = null;

    if (readText == 1) {
      startTime = $("#startTimeToReadText").val().trim();
      interval = $("#intervalToRead").val().trim();
      endTime = $("#endTimeToReadText").val().trim();

      if (!startTime) {
        Message("Escolhe a hora início", "alert-error");
        return;
      }

      if (!interval) {
        Message("Escolhe intervalo de leitura", "alert-error");
        return;
      }

      if (!endTime) {
        Message("Escolhe a hora fim", "alert-error");
        return;
      }
    }

    Object.assign(objRow, {
      startTime,
      endTime,
      interval,
    });
  }

  const url = `${router}setting-notices${get}`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);

    if (obj.message == "not-logged") {
      swal("Acesso", "SESSÃO EXPIRADO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "error") {
      Message(obj.text, "alert-error");
      return;
    }

    if (obj.message == "successfully") {
      $("#add-notice-modal").modal("hide");
      Message();

      $(".nav-tabs.tab-collection1 a[href='#tab1']").tab("show");
      table_notice.DataTable().ajax.reload();
      ClearFiledNotice();
    }
  });
  return;

  const response = await CallBackEnd({
    action: `${router}setting-notices${get}`,
    method: "POST",
    arr: objRow,
  });

  if (response.error) {
    Message(response.message, "alert-error");
  } else {
    Message();
  }
}

// --- GET DATA OF IMAGE IN THE NOTICE AND PUBLICITY---

// --- GET DATA OF IMAGE ---
let agencyImage = "";
async function GetDataImage(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  const imageId = cardElement.getAttribute("id").replace("edited-image-", "");
  const url = `?image=${imageId}&action=loading-data`;

  const obj = await CallBackEnd({
    action: `${router}get-data-image${url}`,
  });

  const dataImage = obj.data;
  if (!obj.error) {
    $("#uploadImg").removeAttr("src");

    agencyImage = dataImage.image_id;
    $("#uploadImg").attr("src", dataImage.src);
    $("#dateStart").val(dataImage.startDate);
    $("#dateEnd").val(dataImage.endDate);
    $("#type_screen").val(dataImage.type_screen);
  }
  $("#edit-image-modal").modal("show");
}

// --- EDIT IMAGE IN THE AGENCY ---
async function UpdateDataImage() {
  const startDt = $("#dateStart").val().trim();
  const type_screen = $("#type_screen").val();
  const endDt = $("#dateEnd").val().trim();

  if (!agencyImage) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  if (!startDt) {
    Message("Escolhe a data início.", "alert-error");
    return;
  }

  if (!type_screen) {
    Message("Escolhe onde quer apresentar.", "alert-error");
    return;
  }

  let objImage = {
    startDt,
    type_screen,
    agencyImage,
  };

  if (endDt) {
    if (startDt > endDt) {
      Message("Data início maior que data fim", "alert-error");
      return;
    }
    Object.assign(objImage, {
      endDt,
    });
  }

  const url = `${router}get-data-image?action=update-image`;
  const obj = await CallBackEnd({
    action: url,
    method: "POST",
    arr: objImage,
  });

  if (obj.error == "true") {
    Message(obj.message, "alert-error");
    return;
  }

  if (!obj.error) {
    $("#edit-image-modal").modal("hide");
    table_img.DataTable().ajax.reload();
    $(".nav-tabs.tab-collection1 a[href='#tab2']").tab("show");
    Message();
  }
}

// --- CLEAN MODAL IMAGE ---
function ClearFiledImage() {
  $("#uploadImg").removeAttr("src");
  $("#type_screen").val("");
  $("#startDt").val("");
  $("#endDt").val("");
}

// ===================  AJAX OF UPDATE MY PROFILE ===================

// VALIDATE AND SAVE PROFILE BASIC
async function SubmitProfileBasic() {
  const name = $("#name").val();
  const gender = $("#gender").val();

  if (!name || name == 0) {
    Message("Por favor insira o seu nome", "alert-error");
    return;
  }

  if (!gender) {
    Message("Por favor escolhe o género", "alert-error");
    return;
  }

  const objProfileBasic = {
    name,
    gender,
  };

  const response = await CallBackEnd({
    action: `${router}update-my-profile?action=basic-profile`,
    method: "POST",
    arr: objProfileBasic,
  });
  ShowInfo(response.error);
}

// VALIDATE AND SAVE PROFILE ABOUT
async function SubmitProfileAbout() {
  const phone = $("#phone").val();
  const residence = $("#residence").val();
  const birthdate = $("#birthdate").val();

  if (phone == 0) {
    Message("Por favor insira o número de telefone", "alert-error");
    return;
  }

  if (!residence) {
    Message("Por favor insira a sua morada", "alert-error");
    return;
  }

  if (!birthdate) {
    Message("Por favor insira a data de nascimento", "alert-error");
    return;
  }

  const objProfileAbout = {
    phone,
    residence,
    birthdate,
  };

  const response = await CallBackEnd({
    action: `${router}update-my-profile?action=about-profile`,
    method: "POST",
    arr: objProfileAbout,
  });
  ShowInfo(response.error);
}

// VALIDATE AND SAVE PROFILE PASSWORD
async function SubmitPassword() {
  const pass_new = $("#pass").val().trim();
  const pass_older = $("#pass-older").val().trim();
  const pass_confirm = $("#pass-confirm").val().trim();

  if (!pass_older || !pass_new || !pass_confirm) {
    Message("Todos os campos são obrigatórios", "alert-error");
    return;
  }

  if (pass_older == pass_new) {
    swal(
      "Atenção",
      "Está tentando definir sua nova palavra passe como a antiga",
      "warning"
    );
    return;
  }

  if (!(pass_new === pass_confirm)) {
    swal(
      "Atenção",
      "Palavra passe que você inseriu não correspondem",
      "warning"
    );
    return;
  }

  if (pass_new.length <= 7) {
    swal(
      "Atenção",
      "É necessário que sua palavra passe tenha pelo menos 8 caracteres",
      "warning"
    );
    return false;
  }

  const objProfileAbout = {
    pass_new,
    pass_older,
    pass_confirm,
  };

  const response = await CallBackEnd({
    action: `${router}update-my-profile?action=pass-profile`,
    method: "POST",
    arr: objProfileAbout,
  });

  if (response.error) Message(response.message, "alert-error");
  else {
    $("#mostra").html("");
    $("#pass").val("");
    $("#pass-older").val("");
    $("#pass-confirm").val("");
    Message();
  }
}

// SHOW INFO TO USER
function ShowInfo(response) {
  if (response) {
    Message(response.message, "alert-error");
  } else {
    Message();
  }
}

// ===================  AJAX OF GET INFO OF EQUIPMENTS ===================
async function GetInfoEquipments() {
  const response = await CallBackEnd({
    action: `${router}info-equipments`,
  });
  const divElement = $("div#rebuildInfoEquipment");
  divElement.html("");

  if (!response.error) {
    response.data.forEach((row) => {
      BuildCardAgency(divElement, row);
      $("div.line-color").removeClass("hidden");
    });
  } else {
    $("div#rebuildInfoEquipment").html(
      "<div> Nenhum equipamento encontrado </div>"
    );
    $("div#rebuildInfoEquipment > div").addClass("not-found-info");
    $("div.line-color").addClass("hidden");
  }
}

function BuildCardAgency(divElement, cardData) {
  let operatorMonitor = cardData.operation_monitor
    ? "color-it-works"
    : "color-warning";
  let operatorkiosk = cardData.operation_kiosk
    ? "color-it-works"
    : "color-warning";

  divElement.append(
    '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 profile">' +
      '<div class="card card-profile" style="min-height: 200px; !important">' +
      // DIV CARD HEADER OF EACH AGENCY
      '<div class="card-header" style="background-color: #ffffff; color: #000000;">' +
      '<div class="agency-name line-clamp">' +
      '<i class="flaticon-placeholder"></i> <span>' +
      cardData.agency_name +
      "</span>" +
      "</div>" +
      "<p><strong>Horário:</strong> " +
      cardData.time_table +
      "</p>" +
      '<div id="less-detail-' +
      cardData.agency_id +
      '">' +
      BuildIcon("flaticon-monitor", "Monitor", operatorMonitor) +
      BuildIcon("flaticon2-password", "Quiosque", operatorkiosk) +
      "</div>" +
      "</div>" +
      "<div>" +
      // DIV OF ICON TO VIEW MORE DEATIL OF EQUIPMENTs
      '<div class="view-more-detail" id="div-toggle-' +
      cardData.agency_id +
      '">' +
      '<div class="fa fa-toggle-off icon-toggle-detail" onclick="ShowMoreDetail(this)" id="agency-' +
      cardData.agency_id +
      '"></div>' +
      "</div>" +
      // ELEMENT ICON CLOSE MORE DEATIL
      '<div class="fa fa-times icon-close hidden" title="Fechar" onclick="CloseDetailEquipments(this)" id="close-detail-' +
      cardData.agency_id +
      '"></div>' +
      // DIV MORE DEATIL OF EQUIPMENT IN THE AGENCY
      '<div class="row hidden" id="more-detail-' +
      cardData.agency_id +
      '">' +
      // DIV DEATIL OF MONITOR IN THE AGENCY
      CreateMonitorData(cardData) +
      // DIV DEATIL OF KIOSK IN THE AGENCY
      CreateKioskData(cardData) +
      "</div>" +
      "</div>" +
      "</div>"
  );
}

// BUILD ICON OF MONITOR OR KIOSK
function BuildIcon(icoClass, icotTitle, colorAnimate) {
  return (
    '<a href="#" data-toggle="tooltip">' +
    '<i class="' +
    icoClass +
    '" title="' +
    icotTitle +
    '"></i>' +
    '<i class="fa fa-circle icon-point ' +
    colorAnimate +
    '"></i>' +
    "</a>"
  );
}

// CREATE CARD OF INFO MONITOR
function CreateMonitorData(row) {
  const colorOperationMonitor = row.operation_monitor
    ? "color-it-works"
    : "color-warning";
  const colorOperationVoice = row.voice ? "color-it-works" : "color-pendent";

  return (
    '<div class="col-sm-12 col-md-6 col-lg-6">' +
    '<a href="#" data-toggle="tooltip">' +
    '<i class="flaticon-monitor" title="Informação sobre Monitor"></i>' +
    "</a>" +
    '<div class="type-description">' +
    "<div> Mini-PC: </div>" +
    '<i class="fa fa-circle icon-point ' +
    colorOperationMonitor +
    '"></i>' +
    "</div>" +
    '<div class="type-description">' +
    "<div> Voz: </div>" +
    '<i class="fa fa-circle icon-point ' +
    colorOperationVoice +
    '"></i> ' +
    "</div>" +
    "</div>"
  );
}

// CREATE CARD OF INFO KIOSK
function CreateKioskData(row) {
  const colorOperationKiosk = row.operation_kiosk
    ? "color-it-works"
    : "color-warning";

  return (
    '<div class="col-sm-12 col-md-6 col-lg-6">' +
    '<a href="#" data-toggle="tooltip">' +
    '<i class="flaticon2-password" title="Informação sobre Quiosque"></i>' +
    "</a>" +
    '<div class="type-description">' +
    "<div> Mini-PC: </div>" +
    '<i class="fa fa-circle icon-point ' +
    colorOperationKiosk +
    '"></i>' +
    "</div>" +
    '<div class="type-description">' +
    "<div> Senha: </div>" +
    '<i class="fa fa-circle icon-point"></i>' +
    "</div>" +
    "</div>"
  );
}

function ShowMoreDetail(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const dataId = cardElement.getAttribute("id").replace("agency-", "");
  const divMoreDetail = $(`div#more-detail-${dataId}`);

  $(`div#less-detail-${dataId}`).addClass("hidden");
  $(`div#close-detail-${dataId}`).removeClass("hidden");

  const cardParent = GetCardElementByChild(cardElement);
  cardParent.classList.add("hidden");
  divMoreDetail.removeClass("hidden");
}

function GetCardElementByChild(currentElement, className = "view-more-detail") {
  if (!(currentElement instanceof HTMLElement))
    currentElement = $(currentElement);

  if (currentElement.classList && currentElement.classList.contains(className))
    return currentElement;
  else return GetCardElementByChild(currentElement.parentElement);
}

function CloseDetailEquipments(iconElement) {
  if (!(iconElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  const agencyId = iconElement.getAttribute("id").replace("close-detail-", "");

  $(`div#less-detail-${agencyId}`).removeClass("hidden");
  $(`div#div-toggle-${agencyId}`).removeClass("hidden");

  iconElement.classList.add("hidden");
  iconElement.nextSibling.classList.add("hidden");
}

// LOAD DATA ASYNC OF EQUIPMENTS
// async function SetEquipmentAsync(objData, isReload = false) {
//   if (typeof objData.type == "") return;

//   Object.assign(objData, {
//     refresh: isReload,
//     dateTime: MaskDateTime(new Date().toLocaleString("pt-BR")),
//   });
//   const response = await CallBackEnd({
//     action: `../${router}save-info-equipment`,
//     method: "POST",
//     arr: objData,
//   });
// }

// REVERSE DATETIME[01/02/2023 14:21:59] TO DATETIME[2023-02-01 14:21:59]
function MaskDateTime(datetime) {
  if (datetime != "00/00/0000 00:00:00" && datetime != "") {
    const splitDate = datetime.split(" ");

    return `${splitDate[0].split("/").reverse().join("-")} ${splitDate[1]}`;
  }
  return datetime;
}

// ADD LOGOTIPO AND COLOR COMPANY IN THE DB
function ValidateAndUpload(pasteFile = null) {
  const arrType = ["image/jpeg", "image/jpg", "image/png", "image/gif"];

  const file =
    pasteFile == null ? $("input#company-logo")[0].files[0] : pasteFile;
  if (file) {
    const fileSize = file.size;
    const fileType = file.type;

    const message = "Por favor, carregue um ficheiro válido";

    if (!arrType.includes(fileType)) {
      $("input#company-logo").value = "";
      Message(message, "alert-error");
      return;
    }

    if (fileSize > 10485760) {
      Message("Tamanho máximo permitido: 10MB", "alert-error");
      return;
    }

    const reader = new FileReader();
    reader.onload = async function (ev) {
      const arrUpload = {
        file: reader.result,
        file_name: file.name,
      };

      if ($("input#color").val() != "") {
        Object.assign(arrUpload, {
          color: $("#color").val(),
        });
      }

      const response = await CallBackEnd({
        action: `${router}/save-logotipo-company`,
        method: "POST",
        arr: arrUpload,
      });

      if (!response.error) {
        $("input#company-logo").val("");
        $("input#color").val("");
        Message();
      } else {
        Message("Por favor, contacte o administrador", "alert-error");
      }
    };

    //   reader.onprogress = function(ev) {
    //     Message("Carregando...", 'alert-warning')
    //   }

    reader.readAsDataURL(file);
  } else {
    Message("Por favor selecione ficheiro", "alert-error");
  }
}

async function EmailValidated() {
  const res = await CallBackEnd({
    action: `${router}validate-email`,
  });
  if (res.message == "not-active") {
    swal({
      title: "E-mail",
      text: `Valide esse email link enviado para ${res.account}.`,
      icon: "info",
      buttons: "Ok",
    });
  }
}

// ===================  AJAX OF NOTICES ===================

function OnOffInput(
  fieldSpecific,
  checked = false,
  selectOption = "wTime",
  data = ""
) {
  if (checked) {
    $(`#${fieldSpecific}`).removeClass("hidden");
    $(`#${fieldSpecific}`).val(data);
    $(`#${selectOption}`).addClass("hidden");
    return;
  }

  $(`#${fieldSpecific}`).addClass("hidden");
  $(`#${selectOption}`).removeClass("hidden");
  $(`#${fieldSpecific}`).val("");
}

function NotPermission() {
  Message("Ação não permitida.", "alert-info");
}

// BUILD THE SERVICES IN THE SERVICE CREATE
function DrawEvaluation(arr, type = "radio") {
  const divAllAgencies = $("#list-evaluations");
  divAllAgencies.html("");

  if (arr.length == 0) {
    divAllAgencies.append("<div> Nenhuma avaliação encontrada </div>");
    return;
  }

  const click = type == "radio" ? "DeleteEvaluation(this)" : "NotPermission()";

  arr.forEach((row) => {
    let checked =
      row.checked && row.checked != undefined ? 'checked="true"' : "";
    const action =
      type == "radio"
        ? ` onclick="EditarEvaluation('${row.id}', '${row.text}')"`
        : "";

    divAllAgencies.append(
      `<div class="checkbox row-4" id="ws-evaluation-${row.id}">
						<input type="${type}" name="evaluation" ${checked} ${action} id="chk-${
        row.id
      }" value="${row.id}">
						<leabel> ${MaxLen(
              row.text,
              17
            )} <i class="fa fa-trash-o" style="cursor: pointer; color: orangered" id="del-evaluation-${
        row.id
      }" onclick="${click}"></i> </leabel>
					</div>`
    );
  });
}

async function SaveEvaluationInAgency() {
  let arrEvaluations = [];

  const chkEvaluation = Array.from(
    document.querySelectorAll("#list-evaluations input:checked")
  );
  for (let i = 0; i < chkEvaluation.length; i++) {
    arrEvaluations.push(chkEvaluation[i].value.replace("chk-", ""));
  }

  const objEvaluation = {
    agency: agencySetting,
    evaluation: arrEvaluations,
  };
  const obj = await CallBackEnd({
    action: `${router}save-evaluation-agency`,
    method: "POST",
    arr: objEvaluation,
  });

  if (obj.message == "evaluation-not-find") {
    Message("Por favor escolhe as avaliações.", "alert-error");
    return;
  }

  if (obj.message == "agency-not-find") {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  if (obj.message == "success") {
    Message();
  }
}

function ChkDateEnd(checked, fieldElement, fieldInput) {
  $(`${fieldInput}`)[0].value = "";

  if ($(`${fieldElement}`).hasClass("hidden")) {
    $(`${fieldElement}`).removeClass("hidden");
  }

  if (checked) {
    $(`${fieldElement}`).removeClass("hidden");
    return;
  }
  $(`${fieldElement}`).addClass("hidden");
}

function BlockPriority(value) {
  const prtyField = $("#all-priority-service");

  if (value == 1) {
    $("#service-collapse-priority").collapse("show");
    prtyField.attr("disabled", true);
    prtyField.val(1);
    return;
  }
  $("#service-collapse-priority").collapse("hide");
  prtyField.removeAttr("disabled");
  prtyField.val(0);
}

// ADD IMAGE IN THE AGENCY
function SaveUploadImages() {
  const arrType = ["image/jpeg", "image/jpg", "image/png"];

  const file = $("input#img-file")[0].files[0];
  if (file) {
    const fileSize = file.size;
    const fileType = file.type;

    const message = "Por favor, carregue uma imagem válida.";

    if (!arrType.includes(fileType)) {
      $("input#video-file").value = "";
      Message(message, "alert-error");
      return;
    }

    if (fileSize > 10485760) {
      Message("Tamanho máximo permitido: 10MB", "alert-error");
      return;
    }

    const chkEndDt = $("#chk-endDt-image")[0].checked;
    const screenType = $("#img-screen-type").val();
    const start_date = $("#img-startDt").val();
    const end_date = $("#img-endDt").val();
    const agency = $("#agency_hash").val();

    if (!start_date) {
      Message("Por favor, insira data início.", "alert-error");
      return;
    }

    let arrUpload = {
      start_date,
      chkEndDt,
      screenType,
      agency,
    };

    if (chkEndDt) {
      if (!end_date) {
        Message("Por favor, insira data fim.", "alert-error");
        return;
      }

      if (start_date > end_date) {
        Message("Verifique as data inseridas.", "alert-error");
        return;
      }
      Object.assign(arrUpload, {
        start_date,
        end_date,
      });
    }
    Before();

    let reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onloadend = async () => {
      Object.assign(arrUpload, {
        file: reader.result,
        file_name: file.name,
      });

      const obj = await CallBackEnd({
        action: `${router}save-image-agency`,
        method: "POST",
        arr: arrUpload,
      });

      Before(false);

      if (obj.error == "true") {
        Message(obj.message, "alert-error");
        return;
      }

      if (!obj.error) {
        $(".nav-tabs.tab-collection1 a[href='#tab2']").tab("show");
        $("#add-image-modal").modal("hide");
        table_img.DataTable().ajax.reload();

        cleanModalImg();
        Message();
      } else {
        Message("Por favor, contacte o administrador", "alert-error");
      }
    };
  } else {
    Message("Por favor selecione uma imagem.", "alert-error");
  }
}

// ADD IMAGE IN THE AGENCY
function SaveUploadVideos() {
  const arrType = ["video/mp4", "video/x-m4v", "video/*"];

  const file = $("input#video-file")[0].files[0];
  if (file) {
    const fileSize = file.size;
    const fileType = file.type;

    const message = "Por favor, carregue uma imagem válida.";

    if (!arrType.includes(fileType)) {
      $("input#video-file").value = "";
      Message(message, "alert-error");
      return;
    }

    if (fileSize > 10485760) {
      Message("Tamanho máximo permitido: 10MB", "alert-error");
      return;
    }

    const chkEndDt = $("#chk-endDt-video")[0].checked;
    const nome_video = $("#nome-video").val();
    const start_date = $("#video-startDt").val();
    const end_date = $("#video-endDt").val();
    const agency = $("#agencyID").val();

    if (!start_date) {
      Message("Por favor, insira data início.", "alert-error");
      return;
    }

    let arrUpload = {
      start_date,
      end_date,
      chkEndDt,
      nome_video,
      agency,
    };

    if (chkEndDt) {
      if (!end_date) {
        Message("Por favor, insira data fim.", "alert-error");
        return;
      }

      if (start_date > end_date) {
        Message("Verifique as data inseridas.", "alert-error");
        return;
      }
      Object.assign(arrUpload, {
        start_date,
        end_date,
      });
    }
    Before();

    let reader = new FileReader();
    reader.readAsDataURL(file);
    Message("Carregando video, por favor aguarde...", "alert-warning");

    // reader.onprogress = function (ev) {
    //   Message("Carregando...", 'alert-warning')
    // }

    reader.onloadend = async () => {
      Object.assign(arrUpload, {
        file: reader.result,
        file_name: file.name,
      });

      const obj = await CallBackEnd({
        action: `${router}save-video-agency`,
        method: "POST",
        arr: arrUpload,
      });

      Before(false);

      if (obj.error == "true") {
        Message(obj.message, "alert-error");
        return;
      }

      if (!obj.error) {
        $(".nav-tabs.tab-collection1 a[href='#tab3']").tab("show");
        $("#publicity-modal").modal("hide");
        table_video.DataTable().ajax.reload();

        cleanModalVideo();
        Message();
      } else {
        Message("Por favor, contacte o administrador", "alert-error");
      }
    };
  } else {
    Message("Por favor selecione uma imagem.", "alert-error");
  }
}

function Before(res = true) {
  const btn = $("#btn-upload")[0];
  if (res) {
    btn.innerText = "A carregar...";
    btn.disabled = true;
    return;
  }
  btn.innerText = "Adicionar";
  btn.removeAttribute("disabled");
}

// SHOW MODAL ADD IMAGE IN THE AGENCY
function showModal() {
  $("#add-image-modal").modal("show");
  cleanModalImg();
}

// CLEAN FIELD MODAL ADD IMAGE IN THE AGENCY
function cleanModalImg() {
  $("#chk-endDt-image")[0].checked = false;
  $("#dt-end-image").addClass("hidden");
  $("input#img-file")[0].value = "";

  $("#img-startDt").val("");
  $("#img-endDt").val("");
}

// CLEAN FIELD MODAL ADD IMAGE IN THE AGENCY
function cleanModalVideo() {
  $("#chk-endDt-video")[0].checked = false;
  $("#video-endDt").addClass("hidden");
  $("input#video-file")[0].value = "";

  $("#nome-video").val("");
  $("#video-startDt").val("");
  $("#video-endDt").val("");
}

// VIEW IMAGE ADVERTISING IN THE AGENCY
function ViewImageAdvertising(cardElement) {
  $("#view-img-agency").removeAttr("src");

  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  const url = cardElement.getAttribute("url");
  const src = `${url}`;

  $("#view-image-modal").modal("show");
  $("#view-img-agency").attr("src", src);
}

// --- DELETE VIDEO IN THE COMMERCIAL ---
async function Deletevideo(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  const image = cardElement.getAttribute("id").replace("delete-video-", "");
  swal({
    title: "Confirmar",
    text: `Deseja eliminar? (Operação é irreversível)`,
    icon: "warning",
    buttons: ["Não", "Sim"],
  }).then(async (response) => {
    if (response) {
      const url = `?id=${image}&action=delete-publicity&module=video`;

      const obj = await CallBackEnd({
        action: `${router}delete${url}`,
      });

      if (obj.error) {
        Message(obj.message, "alert-error");
      } else {
        $(`a#delete-video-${image}`).closest("tr").remove();
        table_video.DataTable().ajax.reload();
        Message();
      }
    }
  });
}

async function saveLinkPlaylist() {
  const url = $("#url").val();

  if (!url) {
    Message("Insira código de playlist, por favor.", "alert-error");
    return;
  }

  const objPlaylist = {
    agency: global.agency,
    url,
  };

  const obj = await CallBackEnd({
    action: `${router}save-playlist-video`,
    method: "POST",
    arr: objPlaylist,
  });

  if (obj.error) {
    Message(obj.message, "alert-error");
    return;
  }

  Message();
  $("#publicity-modal-youtube").modal("hide");
}

function ViewVideoAdvertising(cardElement) {
  $("#view-video-agency").removeAttr("src");

  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  $("#view-video-modal").modal("show");
  const url = cardElement.getAttribute("url");
  $("#view-video-agency").attr("src", `${url}`);
}

// --- GET DATA OF IMAGE ---
let agencyVideo = "";
async function getDataVideo(cardElement) {
  if (!(cardElement instanceof HTMLElement)) {
    Message("Ação não permitida.", "alert-error");
    return;
  }

  const videoId = cardElement.getAttribute("id").replace("v-data-", "");
  const url = `?video=${videoId}&action=loading-data`;

  const response = await CallBackEnd({
    action: `${router}get-data-video${url}`,
  });

  if (!obj.error) {
    $("#playVideo").removeAttr("src");

    const obj = response.data;
    agencyVideo = obj.id;
    // $("#playVideo").attr("src", "../data/video/" + obj.url);
    $("#video-name").val(obj.name);
    $("#dt_init").val(obj.startDate);
    $("#dt_end").val(obj.endDate);

    $("#edit-video-modal").modal("show");
  }
}

async function saveUpdateVideo() {
  const startDate = $("#dt_init").val();
  const endDate = $("#dt_end").val();
  const name = $("#video-name").val();

  if (!name) {
    Message("Insira o nome do video, por favor.", "alert-error");
    return;
  }

  if (!startDate) {
    Message("Insira a data de início, por favor.", "alert-error");
    return;
  }

  if (endDate && startDate > endDate) {
    Message("Verifique as datas inválidas.", "alert-error");
    return;
  }

  const objInfoVideo = {
    agency: global.agency,
    video: agencyVideo,
    startDate,
    endDate,
    name,
  };

  const obj = await CallBackEnd({
    action: `${router}save-update-video`,
    method: "POST",
    arr: objInfoVideo,
  });

  if (obj.error == "true") {
    Message(obj.message, "alert-error");
    return;
  }

  Message();
  $("#edit-video-modal").modal("hide");
  table_video.DataTable().ajax.reload();
}

function NotPermission() {
  Message("Utilizador sem permissão.", "alert-warning");
}

// ACTIVE FIELD WHEN OPTION IS ACTIVE
function chkOption(optionElement) {
  if (!(optionElement instanceof HTMLElement)) {
    Message("AÇÃO NÃO PERMITIDO.", "alert-warning");
    return;
  }

  $("#pMonitor").removeAttr("disabled");
  $("#pWebApp").removeAttr("disabled");
  $("#pKiosk").removeAttr("disabled");
  $("#pModule").removeAttr("disabled");

  if (optionElement.value == 0) {
    $("#pWebApp, #pKiosk, #pMonitor, #pModule").val("");
    $("#pMonitor, #pModule").attr("disabled", true);
    $("#pWebApp, #pKiosk").attr("disabled", true);
  }

  /*swals = swal("Aguarde", "A GRAVAR DADOS...", "info", {
    closeOnClickOutside: false,
    buttons: false,
  });

  const objRow = {
    agency: agencySetting,
    pusher,
  };

  const url = `${router}backoffice/save-pusher`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "not-logged") {
      swal("Acesso", "SESSÃO EXPIRADO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      Message();
      ApllyRealTime(obj.data); // RUN THE RELATIME IN THE MODULE
    }
  });*/
}

function GetModalPusher() {
  swals = swal("Aguarde", "A CARREGAR DADOS...", "info", {
    closeOnClickOutside: false,
    buttons: false,
  });

  const url = `${router}backoffice/pusher-agency`;
  $.get(url, function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "not-logged") {
      swal("Acesso", "SESSÃO EXPIRADO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      const cardElement = $("#agency-in-pusher");
      cardElement.html("");

      let option = `<div class="checkbox">
                      <label>
                      <input type="checkbox" class="checkAllAgencies">
                        <b id="all-agencies"> Selecionar todos </b>
                      </label>
                    </div>`;

      obj.data.forEach((a) => {
        option += `<div class="checkbox card-agency">
          <label>
            <input type="checkbox" class="agencyID" name="agencyID[]" value="${a.agency_id}">
            <span class="span-size" style="font-size: 7pt;"> ${a.agency_name} </span>
          </label>
        </div>`;
      });

      cardElement.append(option);
      $("#settings-pusher-modal").modal("show");
    }
  });
}

// VALIDATE AND SAVE SETTING SITUATION OF SERVICE
function savePusherAgency() {
  const monitor = $("#pMonitor").val();
  const module = $("#pModule").val();
  const webApp = $("#pWebApp").val();
  const kiosk = $("#pKiosk").val();
  const state = $("#sPusher").val();

  const agency = $("#agency-in-pusher input:checked")
    .toArray()
    .map((check) => {
      return $(check).val();
    });

  if (agency.length == 0) {
    Message("Por favor escolhe agência.", "alert-error");
    return;
  }

  const arrState = [1, 0];
  if (!arrState.includes(state) && state == "") {
    Message("Por favor escolhe o estado.", "alert-error");
    return;
  }

  let objRow = {
    agency,
    state,
  };

  const isOk = state == 1 ? true : false;
  if (isOk) {
    if (!webApp) {
      Message("Escolhe o estado de site.", "alert-error");
      return;
    }

    if (!kiosk) {
      Message("Escolhe o estado de quiosque.", "alert-error");
      return;
    }

    if (!module) {
      Message("Escolhe o estado do operador.", "alert-error");
      return;
    }

    if (!monitor) {
      Message("Escolhe o estado de monitor.", "alert-error");
      return;
    }

    Object.assign(objRow, {
      monitor,
      module,
      agency,
      webApp,
      kiosk,
    });
  }

  swals = swal("Aguarde", "A GRAVAR DADOS...", "info", {
    closeOnClickOutside: false,
    buttons: false,
  });

  const url = `${router}backoffice/config-pusher-agency`;
  $.post(url, JSON.stringify(objRow), function (response) {
    const obj = JSON.parse(response);
    swal.close();

    if (obj.message == "not-logged") {
      swal("Acesso", "SESSÃO EXPIRADO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "access-denied") {
      swal("Acesso", "UTILIZADOR SEM PERMISSÃO.", "warning").then(() => {
        window.location = "home";
      });
      return;
    }

    if (obj.message == "success") {
      Message();

      ApllyRealTime(obj.data); // RUN THE RELATIME IN THE MODULE
      $("#pMonitor").removeAttr("disabled");
      $("#pWebApp").removeAttr("disabled");
      $("#pModule").removeAttr("disabled");
      $("#pKiosk").removeAttr("disabled");

      if (obj.status == 0) {
        $("#pWebApp, #pKiosk, #pMonitor, #pModule").val("");
        $("#pModule, #pMonitor").attr("disabled", true);
        $("#pWebApp, #pKiosk").attr("disabled", true);
      }
    }
  });
}

// +++++++++++++++ APLLY THE REALTIME +++++++++++++++
function ApllyRealTime(obj) {
  const url = `${router}realtime/apply`;

  $.post(url, JSON.stringify(obj), function (response) {
    const obj = JSON.parse(response);
    console.log(obj.message);
  });
}
// ++++++++++++++++++++++++++++++++++++++++++++++++++++