function callremunerationEntry() {
  $("#page_main_div").load(
    "../html_modules/remunerationEntry.html?",
    function () {
      document.getElementById("display_module_name").innerHTML =
        "Remuneration Entry";
      document.getElementById("module_name_for_save").value =
        "Remuneration Entry";
      getDefaultHeadFooterLinks("Remuneration Entry");
      loadDate();
    }
  );
}

function loadDate() {
  $.ajax({
    type: "GET",
    url: $host_url + "getDateForRemuneration",
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response);
      if (response.error_code == 0) {
        console.log("hi");
        var opt = `<option value=''>---Select---</option>`;
        for (i = 0; i < response.data.length; i++) {
          opt += `<option value='${response.data[i].fdoe}'>${response.data[i].fdoe}</option>`;
        }
        document.getElementById("rdate").innerHTML = opt;
      }
    },
  });
}

function getdate() {
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  var date = document.getElementById("rdate").value;
  $.ajax({
    type: "GET",
    url: $host_url + "getSessiontoDate",
    data: "rdate=" + date,
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response);
      if (response.error_code == 0) {
        var opt = `<option value=''>---Select---</option>`;
        for (i = 0; i < response.data.length; i++) {
          let text = response.data[i].fsession;
          let position = text.search("M");
          let position2 = text.search("N");
          if (position != -1) {
            cnd = "Morning Session";
          } else if (position2 != -1) {
            cnd = "Afternoon Session";
          }

          if (response.data[i].fsession)
            opt += `<option value='${response.data[i].fsession}'>${cnd}</option>`;
        }
        document.getElementById("session").innerHTML = opt;
        $.unblockUI();
      }
    },
  });
}

var remunerationarray = [];

function changeSession() {
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  var date = document.getElementById("rdate").value;
  var session = document.getElementById("session").value;
  document.getElementById("remunerationtable").hidden = false;
  remunerationarray = [];
  $.ajax({
    type: "GET",
    url: $host_url + "viewremuneration",
    data: "rdate=" + date + "&session=" + session,
    success: function (res) {
      let response = JSON.parse(res);
      if (response.error_code == 0) {
        let table = `<table style='width: 100%; border-collapse: collapse;'>`;
        table += `<thead>
                    <tr>
                      <th colspan='4' style='font-size: 13px; height: 25px; text-align: left; border: 1px solid #C5DBEC;' class='ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper'>
                        Remuneration Entry
                      </th>
                    </tr>
                    <tr style='height: 25px; text-align: center; background-color: #f0f0f0;' class='ui-state-default ui-jqgrid-hdiv'>
                      <th style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>Sl.No</th>
                      <th style='font-size: 13px; width: 45%; border: 1px solid #C5DBEC;'>Remuneration Type</th>
                      <th style='font-size: 13px; width: 15%; border: 1px solid #C5DBEC;'>Amount</th>
                      <th style='font-size: 13px; width: 35%; border: 1px solid #C5DBEC;'>Teacher</th>
                    </tr>
                  </thead>
                  <tbody>`;
        console.log(response.data.tabledata, "anitaa");

        if (response.data.tabledata.length > 0) {
          console.log(response.data.tabledata, "hii");
          for (index = 0; index < response.data.tabledata.length; index++) {
            remunerationarray.push(response.data.tabledata[index]);
            table += `<tr style='height: 24px; text-align: center;'>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>${
                            index + 1
                          }</td>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC; text-align:left;'>${
                            response.data.tabledata[index].fheadtype
                          }</td>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC; '>${
                            response.data.tabledata[index].fremamt
                          }</td>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>
                            <select style='height: 30px; width: 300px; margin: 2px; font-size: 13px;' id='rem_teachname_${index}'>
        </select>
                          </td>
                        </tr>`;
          }
        } else {
          for (index = 0; index < response.data.rem.length; index++) {
            remunerationarray.push(response.data.rem[index]);
            table += `<tr style='height: 24px; text-align: center;'>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>${
                            index + 1
                          }</td>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC; text-align:left;'>${
                            response.data.rem[index].fheadtype
                          }</td>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>${
                            response.data.rem[index].famount
                          }</td>
                          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>
                            <select style='height: 30px; width: 300px; margin: 2px; font-size: 13px;' id='rem_teachname_${index}'>
                              <option value=''>---Select---</option>`;
            response.data.teach.forEach((teacher) => {
              table += `<option value='${teacher.fteachcode}-${teacher.fteachname}'>${teacher.fteachcode}-${teacher.fteachname}</option>`;
            });
            table += `</select>
                          </td>
                        </tr>`;
          }
        }

        table += `</tbody></table>`;
        document.getElementById("remunerationtable").innerHTML = table;
        $.unblockUI();
        for (let index = 0; index < response.data.rem.length; index++) {
          let option = `<option>--Select---</option>`;
          for (let j = 0; j < response.data.teach.length; j++) {
            option += `<option value='${response.data.teach[j].fteachcode}'>${response.data.teach[j].fteachcode}-${response.data.teach[j].fteachname}</option>`;
          }
          $(`#rem_teachname_${index}`).html(option);
        }

        for (let index = 0; index < response.data.tabledata.length; index++) {
          $(`#rem_teachname_${index}`).val(
            response.data.tabledata[index].ftechcode
          );
        }
      }
    },
  });
}

function saveremunerationData() {
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  var date = document.getElementById("rdate").value;
  var session = document.getElementById("session").value;

  for (let i = 0; i < remunerationarray.length; i++) {
    let selectElement = document.getElementById(`rem_teachname_${i}`).value;
    remunerationarray[i].selectedTeacher = selectElement;
  }
  console.log(remunerationarray, "hi");
  let formdata = new FormData();
  formdata.append("rdate", date);
  formdata.append("session", session);
  formdata.append("data", JSON.stringify(remunerationarray));

  $.ajax({
    type: "POST",
    url: $host_url + "saveRemunerationData",
    data: formdata,
    contentType: false,
    processData: false,
    cache: false,
    success: function (res) {
      let response = JSON.parse(res);
      if (response.error_code == 0) {
        alert(response.data.msg);
        // document.getElementById("remunerationtable").style.display = "none";
        document.getElementById("remunerationtable").hidden = true;
        $.unblockUI();
      } else {
        alert(response.data.msg);
      }
    },
  });
}

function viewremuneration() {
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  var date = document.getElementById("rdate").value;
  var session = document.getElementById("session").value;
  document.getElementById("remunerationtable").hidden = true;
  document.getElementById("remunerationid").hidden = true;
  document.getElementById("remunerationviewtable").hidden = false;
  $.ajax({
    type: "GET",
    url: $host_url + "remunerationview",
    date: "&rdate=" + date + "&session=" + session,
    success: function (res) {
      let response = JSON.parse(res);
      if (response.error_code == 0) {
        let table = `<table style='width: 60%; border-collapse: collapse; margin-left:20%'>
           <tr>
                      <th colspan='4' style='font-size: 13px; height: 25px; text-align: left; border: 1px solid #C5DBEC;' class='ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper'>
                        Remuneration Recored Data
                      </th>
                    </tr>
        <tr style='height: 25px; text-align: center; background-color: #f0f0f0;' class='ui-state-default ui-jqgrid-hdiv'>
        <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>Sl.No</td>
        <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>Date</td>
        <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>Time</td>
        <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>Action</td></tr>`;
        for (let i = 0; i < response.data.length; i++) {
          let text = response.data[i].fsesstion;
          let position = text.search("M");
          let position2 = text.search("N");
          if (position != -1) {
            cnd = "Morning Session";
          } else if (position2 != -1) {
            cnd = "Afternoon Session";
          }

          table += `<tr style='height: 24px; text-align: center;'>
                    <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>${
                      i + 1
                    }</td>
                     <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>${
                       response.data[i].fdate
                     }</td>
                      <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>${cnd}</td>
                        <td style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'> <span
            style="
              background-color: #008cba;
              border: none;
              border-radius: 4px;
              color: white;
              padding: 6px 18px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              cursor: pointer;
              font-size: 13px;
            "
            onclick="viewHandler('${response.data[i].fdate}','${
            response.data[i].fsesstion
          }')"
            >View</span
          ></td>`;
        }

        table += ` </table>`;

        document.getElementById("remunerationviewtable").innerHTML = table;
        $.unblockUI();
      }
    },
  });
}

function viewHandler(date, session) {
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  document.getElementById("rdate").value = date;
  getdate();

  setTimeout(function () {
    document.getElementById("session").value = session;
  }, 1000);

  remunerationarray = [];
  $.ajax({
    type: "GET",
    url: $host_url + "viewremuneration",
    data: "&rdate=" + date + "&session=" + session,
    success: function (res) {
      let response = JSON.parse(res);
      if (response.error_code == 0) {
        let table = `<table style='width: 100%; border-collapse: collapse;'>`;
        table += `<thead>
                    <tr>
                      <th colspan='4' style='font-size: 13px; height: 25px; text-align: left; border: 1px solid #C5DBEC;' class='ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper'>
                        Remuneration Entry
                      </th>
                    </tr>
                    <tr style='height: 25px; text-align: center; background-color: #f0f0f0;' class='ui-state-default ui-jqgrid-hdiv'>
                      <th style='font-size: 13px; width: 5%; border: 1px solid #C5DBEC;'>Sl.No</th>
                      <th style='font-size: 13px; width: 45%; border: 1px solid #C5DBEC;'>Remuneration Type</th>
                      <th style='font-size: 13px; width: 15%; border: 1px solid #C5DBEC;'>Amount</th>
                      <th style='font-size: 13px; width: 35%; border: 1px solid #C5DBEC;'>Teacher</th>
                    </tr>
                  </thead>
                  <tbody>`;
        for (let x = 0; x < response.data.tabledata.length; x++) {
          remunerationarray.push(response.data.tabledata[x]);
          table += `<tr style='height: 24px; text-align: center;'>
          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>${x + 1}</td>
          <td style='font-size: 13px; border: 1px solid #C5DBEC; text-align:left;'>${
            response.data.tabledata[x].fheadtype
          }</td>
          <td style='font-size: 13px; border: 1px solid #C5DBEC; '>${
            response.data.tabledata[x].fremamt
          }</td>
          <td style='font-size: 13px; border: 1px solid #C5DBEC;'>
            <select style='height: 30px; width: 300px; margin: 2px; font-size: 13px;' id='rem_teachname_${x}'>
</select>
          </td>
        </tr>`;
        }
        table += `</tbody></table>`;
        document.getElementById("remunerationtable").innerHTML = table;
        for (let index = 0; index < response.data.rem.length; index++) {
          let option = `<option>--Select---</option>`;
          for (let j = 0; j < response.data.teach.length; j++) {
            option += `<option value='${response.data.teach[j].fteachcode}'>${response.data.teach[j].fteachcode}-${response.data.teach[j].fteachname}</option>`;
          }
          $(`#rem_teachname_${index}`).html(option);
          $.unblockUI();
        }

        for (let index = 0; index < response.data.tabledata.length; index++) {
          $(`#rem_teachname_${index}`).val(
            response.data.tabledata[index].ftechcode
          );
        }
        document.getElementById("remunerationid").hidden = false;
        document.getElementById("remunerationtable").hidden = false;
        document.getElementById("remunerationviewtable").hidden = true;
        document.getElementById("viewbutton").hidden = true;
        document.getElementById("rdate").disabled = true;
        document.getElementById("session").disabled = true;
      }
    },
  });
}