$(document).ready(function () {
  $("#date-range").dateRangePicker({
    autoClose: true,
    format: "DD/MM/YYYY",
    separator: " - ",
    language: "ru",
    startOfWeek: "monday",
    getValue: function () {
      return this.innerHTML;
    },
    setValue: function (s) {
      this.innerHTML =
        `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="none">
      <g clip-path="url(#clip0_89_144)">
        <path d="M2.72599 16H14.5849C16.3994 16 17.3022 15.0971 17.3022 13.3087V2.7086C17.3022 0.92021 16.3994 0.017334 14.5849 0.017334H2.72599C0.911559 0.017334 0 0.91153 0 2.7086V13.3087C0 15.1058 0.911559 16 2.72599 16ZM2.59577 14.6023C1.82311 14.6023 1.39772 14.1942 1.39772 13.3869V5.20018C1.39772 4.40148 1.82311 3.9848 2.59577 3.9848H14.6978C15.4704 3.9848 15.9045 4.40148 15.9045 5.20018V13.3869C15.9045 14.1942 15.4704 14.6023 14.6978 14.6023H2.59577ZM6.96257 7.10144H7.47477C7.77862 7.10144 7.87414 7.01464 7.87414 6.71078V6.19855C7.87414 5.89469 7.77862 5.79922 7.47477 5.79922H6.96257C6.65872 5.79922 6.55453 5.89469 6.55453 6.19855V6.71078C6.55453 7.01464 6.65872 7.10144 6.96257 7.10144ZM9.84481 7.10144H10.357C10.6609 7.10144 10.765 7.01464 10.765 6.71078V6.19855C10.765 5.89469 10.6609 5.79922 10.357 5.79922H9.84481C9.54099 5.79922 9.4368 5.89469 9.4368 6.19855V6.71078C9.4368 7.01464 9.54099 7.10144 9.84481 7.10144ZM12.7271 7.10144H13.2393C13.5431 7.10144 13.6473 7.01464 13.6473 6.71078V6.19855C13.6473 5.89469 13.5431 5.79922 13.2393 5.79922H12.7271C12.4232 5.79922 12.3277 5.89469 12.3277 6.19855V6.71078C12.3277 7.01464 12.4232 7.10144 12.7271 7.10144ZM4.0803 9.94029H4.58382C4.89636 9.94029 4.99187 9.85349 4.99187 9.54963V9.0374C4.99187 8.73354 4.89636 8.64674 4.58382 8.64674H4.0803C3.76777 8.64674 3.67226 8.73354 3.67226 9.0374V9.54963C3.67226 9.85349 3.76777 9.94029 4.0803 9.94029ZM6.96257 9.94029H7.47477C7.77862 9.94029 7.87414 9.85349 7.87414 9.54963V9.0374C7.87414 8.73354 7.77862 8.64674 7.47477 8.64674H6.96257C6.65872 8.64674 6.55453 8.73354 6.55453 9.0374V9.54963C6.55453 9.85349 6.65872 9.94029 6.96257 9.94029ZM9.84481 9.94029H10.357C10.6609 9.94029 10.765 9.85349 10.765 9.54963V9.0374C10.765 8.73354 10.6609 8.64674 10.357 8.64674H9.84481C9.54099 8.64674 9.4368 8.73354 9.4368 9.0374V9.54963C9.4368 9.85349 9.54099 9.94029 9.84481 9.94029ZM12.7271 9.94029H13.2393C13.5431 9.94029 13.6473 9.85349 13.6473 9.54963V9.0374C13.6473 8.73354 13.5431 8.64674 13.2393 8.64674H12.7271C12.4232 8.64674 12.3277 8.73354 12.3277 9.0374V9.54963C12.3277 9.85349 12.4232 9.94029 12.7271 9.94029ZM4.0803 12.7878H4.58382C4.89636 12.7878 4.99187 12.6923 4.99187 12.3885V11.8763C4.99187 11.5724 4.89636 11.4856 4.58382 11.4856H4.0803C3.76777 11.4856 3.67226 11.5724 3.67226 11.8763V12.3885C3.67226 12.6923 3.76777 12.7878 4.0803 12.7878ZM6.96257 12.7878H7.47477C7.77862 12.7878 7.87414 12.6923 7.87414 12.3885V11.8763C7.87414 11.5724 7.77862 11.4856 7.47477 11.4856H6.96257C6.65872 11.4856 6.55453 11.5724 6.55453 11.8763V12.3885C6.55453 12.6923 6.65872 12.7878 6.96257 12.7878ZM9.84481 12.7878H10.357C10.6609 12.7878 10.765 12.6923 10.765 12.3885V11.8763C10.765 11.5724 10.6609 11.4856 10.357 11.4856H9.84481C9.54099 11.4856 9.4368 11.5724 9.4368 11.8763V12.3885C9.4368 12.6923 9.54099 12.7878 9.84481 12.7878Z" fill="black"/>
      </g>
      <defs>
        <clipPath id="clip0_89_144">
          <rect width="17.3022" height="16" fill="white"/>
        </clipPath>
      </defs>
    </svg>` + s;
    },
    startDate: false,
    endDate: false,
    time: {
      enabled: false,
    },
    minDays: 0,
    maxDays: 0,
    showShortcuts: false,
    shortcuts: {
      //'prev-days': [1,3,5,7],
      //'next-days': [3,5,7],
      //'prev' : ['week','month','year'],
      //'next' : ['week','month','year']
    },
    customShortcuts: [],
    inline: false,
    container: "body",
    alwaysOpen: false,
    singleDate: false,
    lookBehind: false,
    batchMode: false,
    duration: 200,
    stickyMonths: false,
    dayDivAttrs: [],
    dayTdAttrs: [],
    applyBtnClass: "",
    singleMonth: "true",
    hoveringTooltip: function (days, startTime, hoveringTime) {
      return days > 1 ? days + " " + lang("days") : "";
    },
    showTopbar: false,
    swapTime: false,
    selectForward: false,
    selectBackward: false,
    showWeekNumbers: false,
    getWeekNumber: function (date) {
      return moment(date).format("w");
    },
    monthSelect: false,
    yearSelect: false,
  });

  const createTable = () => {
    const table = document.getElementById("modules-table");
    const tbody = table.querySelector("tbody");
    // Очищаем таблицу
    tbody.innerHTML = "";

    modules.forEach((modul) => {
      const row = document.createElement("tr");

      const data = document.createElement("td");

      const rowContainer = document.createElement("div");
      rowContainer.setAttribute("class", "row-container");

      const rowContent = document.createElement("div");
      rowContent.setAttribute("class", "row-content");

      const moduleName = document.createElement("h1");
      moduleName.textContent = modul.name;
      rowContent.appendChild(moduleName);

      const moduleStatus = document.createElement("h2");
      moduleStatus.textContent = modul.status + "%";
      rowContent.appendChild(moduleStatus);

      const status = document.createElement("div");
      status.setAttribute("class", "status");
      status.style.backgroundColor = "rgba(0, 0, 0, 0.05)";

      const fill = document.createElement("div");
      if (modul.status === 100) {
        fill.style.width = `${modul.status}%`;
        fill.style.height = "100%";
        fill.style.backgroundColor = "#32D74B";
        fill.style.borderRadius = "5px";
      } else {
        fill.style.width = `${modul.status}%`;
        fill.style.height = "100%";
        fill.style.backgroundColor = "#FFB74B";
        fill.style.borderRadius = "5px 0px 0px 5px";
      }

      status.appendChild(fill);
      rowContent.appendChild(status);

      rowContainer.appendChild(rowContent);
      data.appendChild(rowContainer);
      row.appendChild(data);
      tbody.appendChild(row);
    });
  };

  createTable();
});