$(document).ready(function () {
  const createPaidTable = () => {
    const table = document.getElementById("paidTable");
    const tbody = table.querySelector("tbody");
    // Очищаем таблицу
    tbody.innerHTML = "";

    paidPayments.forEach((payment) => {
      const row = document.createElement("tr");
      if (payment.path) {
        row.setAttribute(
          "onclick",
          `window.open('` + API_SERVER + `/` + payment.path + `', '_blank')`
        );
      }

      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 paymentAmount = document.createElement("h1");
      paymentAmount.textContent =
        payment.amount.toLocaleString("ru-RU") + " рублей";
      rowContent.appendChild(paymentAmount);

      const paymentDate = document.createElement("h2");
      paymentDate.textContent = payment.date;
      rowContent.appendChild(paymentDate);

      const paymentDescription = document.createElement("span");
      paymentDescription.textContent = payment.name;
      rowContent.appendChild(paymentDescription);

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

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

    notPaidPayments.forEach((payment) => {
      const row = document.createElement("tr");
      if (payment.path) {
        row.setAttribute(
          "onclick",
          `window.open('` + API_SERVER + `/` + payment.path + `', '_blank')`
        );
      }

      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 paymentAmount = document.createElement("h1");
      paymentAmount.textContent =
        payment.amount.toLocaleString("ru-RU") + " рублей";
      rowContent.appendChild(paymentAmount);

      const paymentDate = document.createElement("h2");
      paymentDate.textContent = payment.date;
      rowContent.appendChild(paymentDate);

      const paymentDescription = document.createElement("span");
      paymentDescription.textContent = payment.name;
      rowContent.appendChild(paymentDescription);

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

  createPaidTable();
  createNotPaidTable();
});