function callyearmode() {
  $("#page_main_div").load("../html_modules/yearmode.html?v=1001", function () {
    document.getElementById("display_module_name").innerHTML = "Year & Mode";
    document.getElementById("module_name_for_save").value = "Year & Mode";
    getDefaultHeadFooterLinks("Year & Mode");
  });
}
function saveExamdate() {
  let examdate = document.getElementById("examdate").value;
  let examshort = document.getElementById("examshort").value;
  let year = document.getElementById("year").value;
  let examtype = document.getElementById("examtype").value;

  if (examdate == "") {
    alert("Enter Exam Date");
    document.getElementById("examdate").focus();
    return;
  }
  if (examshort == "") {
    alert("Enter Exam Short");
    document.getElementById("examshort").focus();
    return;
  }
  if (year == "") {
    alert("Enter Exam Year");
    document.getElementById("year").focus();
    return;
  }
  if (examtype == "") {
    alert("Enter Exam Type");
    document.getElementById("examtype").focus();
    return;
  }

  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  $.ajax({
    type: "GET",
    data:
      "examdate=" +
      examdate +
      "&year=" +
      year +
      "&examtype=" +
      examtype +
      "&examshort=" +
      examshort,
    url: $host_url + "getyearandmode",
    success: function (res) {
      let response = JSON.parse(res);
      if (response.error_code == 0) {
        viewDate();
        alert(response.data.msg);
        document.getElementById("datetable").hidden = true;
        document.getElementById("datatable").hidden = false;
        $.unblockUI();
      } else {
        alert(response.data.msg);
        $.unblockUI();
        return;
      }
    },
  });
}
function viewDate() {
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });

  $.ajax({
    type: "GET",
    url: $host_url + "getToviewDate",
    success: function (res) {
      let response = JSON.parse(res);
      if (response.error_code == 0) {
        var table = "";
        table += `<table style='width: 70%; margin-left:15%' cellspacing='0'; >`;
        table += `<thead style='position:sticky; top:0'>
        <tr style='position: sticky; top: 0;background: white;'>
        <th colspan='5' align='left' class='ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper' style='font-size:12px; height:22px; 
        '>Exam Date</th>
      </tr>
                         <tr align="center" class='ui-state-default ui-jqgrid-hdiv'>
        
                      <th align="center" class='column' >Exam Date</th>
                      <th align="center" class='column' >Year</th>
                      <th align="center" class='column'>Exam Type</th>
                      <th align="center" class='column'>Exam Short</th>
                      <th align="center" class='column'>Action</th>
                       </tr>`;

        for (let i = 0; i < response.data.length; i++) {
          table += `<tr align='center' id='row_${i}' >

                          <td style=" font-size:12px; border-left:1px solid #C5DBEC; border-right:1px solid #C5DBEC; border-top:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC; text-align:left;"
                          >
                            ${response.data[i].fexamdate}
                          </td>
                          <td style=" font-size:12px; border-left:1px solid #C5DBEC; border-right:1px solid #C5DBEC; border-top:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC; text-align:center;"
                          >
                          ${response.data[i].fyear}
                          </td>
                          <td style="  font-size:12px; border-left:1px solid #C5DBEC; border-right:1px solid #C5DBEC; border-top:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC; text-align:center;"
                          >
                           ${response.data[i].fexamtype}
                          </td>
                          <td style="  font-size:12px; border-left:1px solid #C5DBEC; border-right:1px solid #C5DBEC; border-top:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC; text-align:left;"
                          >
                           ${response.data[i].fexamshort}
                          </td>

          <td  style="  font-size:12px; border-left:1px solid #C5DBEC; border-right:1px solid #C5DBEC; border-top:1px solid #C5DBEC; border-bottom:1px solid #C5DBEC; text-align:center;"
                              >
                              <span
                                      style="
                                        background-color: #008cba;
                                        border: none;
                                        color: white;
                                        padding: 6px 10px;
                                        text-align: center;
                                        text-decoration: none;
                                        display: inline-block;
                                        font-size: 13px;
                                        cursor: pointer;
                                        border-radius: 3px;
                                      "
                                      id="editbutton_${i}"
                                      onclick="editExamdates('${response.data[i].fexamdate}','${response.data[i].fyear}','${response.data[i].fexamtype}','${response.data[i].fexamshort}');"
                                      >Edit</span
                                    >
                              </td>`;

          table += `</tr>`;
        }
        document.getElementById("datetable").hidden = true;
        document.getElementById("datatable").innerHTML = table;

        $.unblockUI();
      } else {
        document.getElementById(
          "datatable"
        ).innerHTML = `<h3><b>Data Not Found</b></h3>`;
      }
      $.unblockUI();
    },
  });
}

function editExamdates(date, year, type, short) {
  document.getElementById("datetable").hidden = false;
  document.getElementById("datatable").hidden = true;

  document.getElementById("examdate").value = date;
  document.getElementById("year").value = year;
  document.getElementById("examtype").value = type;
  document.getElementById("examshort").value = short;

  document.getElementById("year").disabled = true;
  document.getElementById("examtype").disabled = true;
}