function callSelectSubjType() {
  $("#page_main_div").load("../html_modules/SelectSubjType.html", function () {
    // window.enable_proper_module = "SubjectType";
    document.getElementById("display_module_name").innerHTML =
      "Select Subject Type";
    document.getElementById("module_name_for_save").value =
      "Select Subject Type";
    getDefaultHeadFooterLinks("Select Subject Type");
    getDegreesubtype();
  });
}

var subTypeArr = [];
function loadSemSubjType() {
  var degree = document.getElementById("degree").value;

  $.ajax({
    type: "GET",
    data: "&degree=" + degree,
    url: $host_url + "loadSemSubjType",
    success: function (response) {
      var res = JSON.parse(response);
      console.log(res, "resssponsssss");
      if (res.error_code == -1) {
        alert(res.data);
        return;
      } else {
        var option = `<option value=''>---Select---</option>`;
        for (i = 0; i < res.data.length; i++) {
          option += `<option value='${res.data[i].fexamno}'>${res.data[i].fexamno} - ${res.data[i].fexamname}</option>`;
        }
        document.getElementById("examno").innerHTML = option;
      }
    },
  });
}

function getDegreesubtype() {
  $.ajax({
    type: "GET",
    url: $host_url + "getDegreesubtype",
    success: function (response) {
      var res = JSON.parse(response);
      if (res.error_code == -1) {
        alert(res.data);
        return;
      } else {
        var option = `<option value=''>---Select---</option>`;
        for (i = 0; i < res.data.length; i++) {
          option += `<option value='${res.data[i].fdegree}'>${res.data[i].fdegree} - ${res.data[i].fdescpn}</option>`;
        }
        document.getElementById("degree").innerHTML = option;
      }
    },
  });
}

function getDegreesubtypedet() {
  $.ajax({
    type: "GET",
    url: $host_url + "getDegreesubtypedet",
    success: function (response) {
      var res = JSON.parse(response);
      if (res.error_code == -1) {
        alert(res.data);
        return;
      } else {
        var option = `<option value=''>---Select---</option>`;
        for (i = 0; i < res.data.length; i++) {
          option += `<option value='${res.data[i].fdegree}'>${res.data[i].fdegree} - ${res.data[i].fdescpn}</option>`;
        }
        document.getElementById("degree").innerHTML = option;
      }
    },
  });
}

// ViewSubjDet_SubType function
function ViewSubjDet_SubType() {
  subTypeArr = [];
  var degree = document.getElementById("degree").value;
  var examno = document.getElementById("examno").value;
  var element = document.getElementById("element").value;

  if (degree == "") {
    alert("Please select Degree");
    return;
  }
  if (examno == "") {
    alert("Please select Semister");
    return;
  }
  if (element == "") {
    alert("Please select Subject Type");
    return;
  }

  $.ajax({
    type: "GET",
    data: "&degree=" + degree + "&examno=" + examno + "&element=" + element,
    url: $host_url + "ViewSubjDet_SubType",
    success: function (response) {
      var res = JSON.parse(response);

      if (res.error_code == -1) {
        alert(res.data.msg);
        document.getElementById("ShowSubjtype").innerHTML = tableHTML;
        return;
      } else {
        subTypeArr.push(res.data.resultsubj);
        var tableHTML = `
        <table align="center" width="90%" cellspacing="0" cellpadding="1" border="1" style="border-radius:5px">
            <thead style="position:sticky;top:0">
                <tr class="ui-state-default ui-jqgrid-hdiv">
                    <td align="center"  style="height:23px; width:15px; font-size:12px; 
                    border-left:1px solid #C5DBEC;border-right:1px solid #C5DBEC; 
                    border-bottom:1px solid #C5DBEC;height: 23px;">Sl No.</td>
                    <td align="center"  style="height:23px; width:42px; font-size:12px; padding:10px 10px; 
                    border-right:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC;">
                        Subject Code
                    <td align="center"  style="height:23px; width:56px; font-size:12px; padding:10px 10px; 
                    border-right:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC;">
                        QP Code
                    </td>
                    <td align="center"  style="height:23px; width:280px; font-size:12px; padding:10px 10px; 
                    border-right:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC;">
                        Subject Name
                    </td>
                    <td align="center"  style="height:23px; width:60px; font-size:12px; padding:10px 10px; 
                    border-right:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC;">
                        Subject Type
                    </td>
                    <td align="center"  style="height:23px; width:40px; font-size:12px; padding:10px 10px; 
                    border-right:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC;">
                        Parent Subject
                    </td>
                    <td align="center"  style="height:23px; width:20px; font-size:12px; padding:10px 10px; 
                    border-right:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC;">
                        Attend
                    </td>
                </tr>
        <thead> <tbody>
        `;

        for (var i = 0; i < res.data.resultsubj.length; i++) {
          var rowId = "row_" + i;
          var selectId = "SelectSubjtype_" + i;
          var input1Id = "Input1_" + i;
          var input2Id = "Input2_" + i;

          tableHTML += `
              <tr id="${rowId}" class="ui-widget-content jqgrow">
                <td align='center' style="border-left:1px solid #C5DBEC; border-right:1px solid #C5DBEC; padding:2px; font-size:12px;text-align:center;">
                  ${i + 1}
                </td>
                <td class="tbl_row_new" style="text-align:initial;border-right:1px solid #C5DBEC; padding:2px; font-size:12px;text-align:center;">
                  ${res.data.resultsubj[i].fcsubcode}
                </td>
                <td class="tbl_row_new" align='center' style="border-bottom:1px solid #C5DBEC; border-right:1px solid #C5DBEC;  padding:2px;">
                ${res.data.resultsubj[i].fqpcode}
                </td>
                <td class="tbl_row_new" style="text-align:initial;text-align:left; border-right:1px solid #C5DBEC; padding:2px; font-size:12px;">
                  ${res.data.resultsubj[i].fsubname}
                </td>
                <td class="tbl_row_new" style="text-align:initial;text-align:center; border-right:1px solid #C5DBEC; padding:2px; font-size:12px;"> 
                  <select
                    id="${selectId}"
                    style="text-align:initial;
                    text-align:center; 
                    border-right:1px solid #C5DBEC;
                    border-radius: 4px;
                    padding:2px; font-size:12px;width: 100%; height: 30px"
                    onchange="handlesubtype('${i}')"
                    value="${res.data.resultsubj[i].fsubtype}"
                  >`;

          var optionValue = res.data.resultsubj[i].fsubtype;
          tableHTML += `
            <option value="${optionValue}">${optionValue}</option>`;

          for (var j = 0; j < res.data.resulttype.length; j++) {
            var resultTypeValue = res.data.resulttype[j].fsubtype;
            // Check if the resultTypeValue is not equal to the optionValue (to avoid duplicate entries)
            if (resultTypeValue !== optionValue) {
              tableHTML += `
                        <option value="${resultTypeValue}">${resultTypeValue}</option>`;
            }
          }

          tableHTML += `</select>
                </td>
                <td class="tbl_row_new" style="text-align:initial;text-align:center; border-right:1px solid #C5DBEC; padding:2px; font-size:12px;">
                <input
                    type="text"
                    id="${input1Id}"
                    value="${res.data.resultsubj[i].FPARENTSUB}"
                    maxlength="5"
                    onchange="handlesubtype('${i}')"
                    style="width:40%; height: 25px;text-align: center"
                />
            </td>
            <td class="tbl_row_new" style="text-align:initial;text-align:center; border-right:1px solid #C5DBEC; padding:2px; font-size:12px;">
                <input
                    type="text"
                    id="${input2Id}"
                    value="${res.data.resultsubj[i].fattent}"
                    maxlength="1"
                    onchange="handlesubtype('${i}')"
                    style="width: 40%; height: 25px; text-align: center"
                />
            </td>
              </tr>`;
        }

        tableHTML += `</tbody></table>`;

        document.getElementById("ShowSubjtype").innerHTML = tableHTML;
      }
    },
  });
}

function handlesubtype(index) {
  subTypeArr[0][index]["fstatus"] = "T";
  let value = $("#SelectSubjtype_" + index).val();
  subTypeArr[0][index]["fsubtype"] = value;
  let Parent = $("#Input1_" + index).val();
  subTypeArr[0][index]["FPARENTSUB"] = Parent;
  let attent = $("#Input2_" + index).val();
  subTypeArr[0][index]["fattent"] = attent;
}

function SaveSubjType() {
  var degree = document.getElementById("degree").value;
  var examno = document.getElementById("examno").value;
  var element = document.getElementById("element").value;

  //   var tableRows = document.querySelectorAll(
  //     "#ShowSubjtype table tr:not(:first-child)"
  //   );

  if (degree == "") {
    alert("Please select Degree");
    return;
  }
  if (examno == "") {
    alert("Please select Semister");
    return;
  }
  let dataToSave = [];

  subTypeArr[0].forEach((ele) => {
    if (ele.fstatus == "T") {
      dataToSave.push(ele);
    }
  });
  //   var dataToSave = [];

  //   for (var i = 1; i < tableRows.length; i++) {
  //     var subjCode = tableRows[i].cells[1].textContent.trim();
  //     var subjName = tableRows[i].cells[2].textContent.trim();

  //     var selectId = `SelectSubjtype_${i - 1}`;

  //     var selectedTypeElement = document.getElementById(selectId);

  //     if (selectedTypeElement) {
  //       var selectedType = selectedTypeElement.value;

  //       dataToSave.push({
  //         subjCode: subjCode,
  //         subjName: subjName,
  //         selectedType: selectedType,
  //       });
  //     }
  //   }

  //   for (var i = 0; i < changedValues.length; i++) {
  //     var index = changedValues[i].index;
  //     var subjCode = res.data.resultsubj[index].fsubcode;
  //     var subjName = res.data.resultsubj[index].Fsubname;
  //     var selectedType = changedValues[i].value;

  //     dataToSave.push({
  //       subjCode: subjCode,
  //       subjName: subjName,
  //       selectedType: selectedType,
  //     });
  //   }

  $.ajax({
    type: "POST",
    data: {
      dataToSave: JSON.stringify(dataToSave),
      degree: degree,
      examno: examno,
      element: element,
    },
    url: $host_url + "SaveSubjType",
    success: function (response) {
      var res = JSON.parse(response);
      console.log(res, "ressss");
      if (res.error_code == 0) {
        alert("Subject Type Selected Successfully");
        callSelectSubjType();
      } else {
        alert(res.data.msg);
        return;
      }
    },
  });
}

function ClearSaveSubjType() {
  callSelectSubjType();
}