function callroomallotmentqpwise() {
  $("#page_main_div").load(
    "../html_modules/roomallotmentqpwise.html?v=1001",
    function () {
      document.getElementById("display_module_name").innerHTML =
        "Room Allotment QPwise";
      document.getElementById("module_name_for_save").value =
        "Room Allotment QPwise";
      getDefaultHeadFooterLinks("Room Allotment QPwise");
      $("#modeltable").hide();
    }
  );
}

function getdate() {
  let rdate = document.getElementById("rdate").value;
  console.log(rdate, "examdate");
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  $.ajax({
    type: "GET",
    url: $host_url + "getsession",
    data: "rdate=" + rdate,
    success: function (res) {
      let response = JSON.parse(res);
      opt = "";
      opt += `<option>---Select---</option>`;
      for (let i = 0; i < response.data.length; i++) {
        opt += `<option value="${response.data[i].fsession}">${response.data[i].fsession} - ${response.data[i].fdescpn}</option>`;
      }
      document.getElementById("session").innerHTML = opt;
      $.unblockUI();
    },
  });
}

let qpcode = "";
let subnbame = "";
let totcount = "";
let degree = "";
let subcode = "";
let conn = "";
let fstatus = "";
function handleSubmit() {
  $("#datatable").show();
  $("#modeltable").hide();
  let rdate = document.getElementById("rdate").value;
  let session = document.getElementById("session").value;
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });
  $.ajax({
    type: "GET",
    url: $host_url + "toDisplayQPcode",
    data: "rdate=" + rdate + "&session=" + session,
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response, "response");
      if (response.error_code == 0) {
        var table = "";
        table += `<table style='width: 100%;'>`;
        table += `<thead>
                    <tr>
                      <th colspan='6' align='left' class='ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper' style='font-size:12px; height:22px;
                      '>Room Allotment</th>
                    </tr>
                      <tr align="center" class='ui-state-default ui-jqgrid-hdiv' style='position: sticky; top: 0;'>
                      <th align="center" class='column' >Sl.No</th>
                      <th align="center" class='column' >QP Code</th>
                      <th align="center" class='column'>Subject Name</th>
                      <th align="center" class='column'>QP Count</th>
                      <th align="center" class='column'>Status</th>
                      <th align="center" class='column'>Allot</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:center;"
                          >
                            ${i + 1}
                          </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].FQPCODE}
                          </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].fsubname}
                          </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].counts}
                          </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;"
                           id="status_${i}">
                           ${conn}
                          </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="roomallot_${i}"
                                      onclick="roomallotment('${
                                        response.data[i].FQPCODE
                                      }','${response.data[i].fsubname}','${
            response.data[i].counts
          }','${response.data[i].fdegree}','${response.data[i].fcsubcode}');"
                                      >Allot</span
                                    >
                              </td>`;

          table += `</tr>`;
          response.data[i].FQPCODE = qpcode;
          response.data[i].fsubname = subnbame;
          response.data[i].counts = totcount;
        }

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

let arr = [];
let index = 0;
let totalcount = 0;
let grandcount = "";
let grcount = "";
let roomname = "";
function roomallotment(code, names, count, degree, subcode) {
  qpcode = code;
  subnbame = names;
  totcount = count;
  totalcount = count;
  degree = degree;
  subcode = subcode;
  arr = [];
  index = 0;
  $("#modeltable").show();
  $("#datatable").hide();
  // $.blockUI({
  //   message:
  //     "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  // });
  $.ajax({
    type: "GET",
    url: $host_url + "getRoomdetailQpwise",
    data:
      "qpcode=" +
      code +
      "&degree=" +
      degree +
      "&subcode=" +
      subcode +
      "&grandcount=" +
      count,
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response, "respo");
      if (response.error_code == 0) {
        var table1 = "";
        var grcount = "";
        table1 += `<table style='margin-right:0%' cellspacing='0';>`;
        table1 += `<thead style='position:sticky; top:0; background:#fff'>
        <tr style='position: sticky; top: 0; background: white; '>
        <th colspan='5' class='ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper' style='font-size: 12px; height: 22px; width:10%;'>
          
        <span onclick='closeModelTable()'style='position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer;'>x</span>
        <span onclick='addRow(${JSON.stringify(response.data.opt)}, ${count},${
          response.data.grcount
        })' style='position: absolute; left: 20px; top: 50%; transform: translateY(-50%); cursor: pointer;'>Add+</span>
        </tr> 
      </th>
        <tr>
        <td colspan='5' style="padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 10px; font-weight: bold;">QP Code &nbsp;: &nbsp;&nbsp;&nbsp;&nbsp;${code}</td>
        </tr>
        <tr>
        <td colspan='5' style="padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 10px; font-weight: bold;">Subject &nbsp;&nbsp;: &nbsp;&nbsp;&nbsp;&nbsp;${names}</td>
        </tr>
        <tr  >
        <td colspan='5' style="padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 10px; font-weight: bold; "id="grandtotal" >Count &nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${count}</td>
        </tr>
        <tr class='ui-state-default ui-jqgrid-hdiv' style=" position: sticky;
        top: 0;
        background-color: white;
        z-index: -1">
                       <th>
                       Roomname
                      </th>
                      <th>Capacity</th>
                      <th>Remaining</th>
                      <th>Allot</th>
                      <th>Delete</th>
                    </tr> 
                  </thead>
                  <tbody id='qpbody'>`;

        for (let index = 0; index < response.data.data.length; index++) {
          response.data.data[index].index = index;
          response.data.data[index].fdegree = degree;
          response.data.data[index].fsubcode = subcode;
          response.data.data[index].prevRemaining =
            response.data.data[index].fbalance;
          arr.push(response.data.data[index]);
          console.log(response.data.grcount, "grcount");

          table1 += `<tr id='row_${index}'>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><select id="roomname_${index}" onchange="getroomcapacity('${index}')" style=" height: 25px;width:70%;" ></select></td>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input style='height:20px;width:60%;' id="capacity_${index}"/></td>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input style='height:20px;width:60%;' id="remain_${index}" /></td>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input style='height:20px;width:60%;' id="allot_${index}" oninput="checkRemaingValue(${index})"  onblur="allotvalue(${index},${count},${
            response.data.grcount
          })"/> </td>
          <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input type="checkbox" id='del_chk_${index}' onchange="handledelete('${index}')" onkeydown='newRow(${JSON.stringify(
            response.data.opt
          )}, ${index},${count})'/></td>
                </tr>`;
        }
        table1 += `</tbody>
        <tfoot>
        <tr>
            <td colspan="5" id="savebutton" hidden style="text-align: center; padding-top: 10px;">
                <span onclick='saveroomallotmentqpwise(${index})'  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;
              ">Save</span>
            </td>
        </tr>
    </tfoot>`;
        grcount += `<td>${response.data.grcount}</td>`;
        table1 += `</table>`;
        // document.getElementById(
        //   "grandtotal"
        // ).innerHTML += `<td>${response.data.grcount}</td>`;

        $("#grandtotal").append(grcount);
        // $.unblockUI();
      }
      document.getElementById("modeltable").innerHTML = table1;

      // document.getElementById("grandtotal").innerHTML =
      //   `Total Count:&nbsp;&nbsp;` +
      //   count +
      //   `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspRemaning:&nbsp;&nbsp;` +
      //   grcount;
      for (let ind = 0; ind < response.data.data.length; ind++) {
        $("#savebutton").show();
        opt = "";
        opt += `<option>---Select---</option>`;
        for (let i = 0; i < response.data.opt.length; i++) {
          opt += `<option value="${
            response.data.opt[i].froomno + "-" + response.data.opt[i].fcapacity
          }"  >${response.data.opt[i].froomname}</option>`;
        }
        document.getElementById("roomname_" + ind).innerHTML = opt;

        document.getElementById("roomname_" + ind).value =
          response.data.data[ind]["froomno"] +
          "-" +
          response.data.data[ind]["fcapacity"];

        document.getElementById("capacity_" + ind).value =
          response.data.data[ind]["fcapacity"];

        document.getElementById("remain_" + ind).value =
          response.data.data[ind]["fbalance"];

        document.getElementById("allot_" + ind).value =
          response.data.data[ind]["fallot"];

        // allotvalue(ind, count);

        index += 1;
      }
    },
  });
}

// function checkRemaining(index, count) {
//   let remaining = document.getElementById("remain_" + index).value;
//   let capacity = document.getElementById("capacity_" + index).value;
//   if (parseInt(remaining) > parseInt(count)) {
//     alert(`Qp code count is only ${count}`);
//     return;
//   }
//   if (parseInt(remaining) > parseInt(capacity)) {
//     alert(`capacity is only ${capacity}`);
//     return;
//   }
// }

function addRow(options, count, grcount) {
  $("#savebutton").show();
  var table1 = `<tr id='row_${index}'>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><select id="roomname_${index}" onchange="getroomcapacity('${index}')" style=" height: 25px;width:70%;" ></select></td>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input style='height:20px;width:60%;' id="capacity_${index}"/></td>;
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input style='height:20px;width:60%;' id="remain_${index}"/></td>
                  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'><input style='height:20px;width:60%;' id="allot_${index}" oninput="checkRemaingValue(${index})" onblur="allotvalue(${index},${count},${grcount})"/></td>
  <td style='text-align:center; border: 1px solid #ddd; padding: 8px;'>
  <input type="checkbox" id='del_chk_${index}' onchange="handledelete(${index})" onkeydown='newRow(${JSON.stringify(
    options
  )}, ${index},${count})'/></td>
    </tr>`;
  $("#qpbody").append(table1);

  opt = "";
  opt += `<option>---Select---</option>`;
  for (let i = 0; i < options.length; i++) {
    opt += `<option value="${
      options[i].froomno + "-" + options[i].fcapacity
    }"  >${options[i].froomname}</option>`;
  }
  document.getElementById("roomname_" + index).innerHTML = opt;
  let obj = {};
  obj.froomname = "";
  obj.fcapacity = "";
  obj.fallot = "";
  obj.fbalance = "";
  obj.froomno = "";
  obj.fdegree = "";
  obj.fsubcode = "";
  obj.index = index;
  arr.push(obj);
  index += 1;
}

function newRow(data, i, count) {
  if (document.getElementById("allot_" + i).value === "") {
    alert("cannot add new row");
    return false;
  }
  if (i + 1 == index) {
    addRow(data, i);
  }
  arr[i]["fallot"] = document.getElementById("allot_" + i).value;
  console.log(count, "addcount");
}

function allotvalue(index, count, grcount) {
  var allot = document.getElementById("allot_" + index).value;
  let roomname = document.getElementById("roomname_" + index).value;
  let split = roomname.split("-");
  let roomno = split[0];

  arr[index]["fallot"] = allot;
  var capacity = document.getElementById("capacity_" + index).value;
  var balance = capacity - allot;
  document.getElementById("remain_" + index).value = balance;
  arr[index]["fbalance"] = balance;

  if (parseInt(allot) > parseInt(capacity)) {
    alert("Enter Valid Number");
    document.getElementById("allot_" + index).value = "";
    document.getElementById("allot_" + index).focus();
    return;
  }

  // let remaining = document.getElementById("remain_" + index).value;
  // let allot = document.getElementById("allot_" + index).value;

  // let grandcount = parseInt(count) - parseInt(allot);
  // console.log(count, grandcount, "52count");
  // document.getElementById("grandtotal").innerHTML =
  //   `Total Count:&nbsp;&nbsp;` +
  //   count +
  //   `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspRemaning:&nbsp;&nbsp;` +
  //   grandcount;
  // if (parseInt(allot) > parseInt(remaining)) {
  //   alert(`Remaining capacity is only ${remaining}`);
  //   document.getElementById("allot_" + index).value = "";
  //   return;
  // }
  // if (parseInt(allot) > parseInt(count)) {
  //   alert(`QP code count is only ${count}`);
  //   document.getElementById("allot_" + index).value = "";
  //   return;
  // }

  // if (allot == "" || allot == 0 || isNaN(allot)) {
  //   document.getElementById("remain_" + index).value =
  //     arr[index]["prevRemaining"];
  //   return;
  // }

  // if (parseInt(allot) > parseInt(arr[index]["prevRemaining"])) {
  //   alert("cannot be set more than remaining values");
  //   return;
  // }

  arr[index]["fallot"] = allot;
  let remain = parseInt(arr[index]["prevRemaining"]) - parseInt(allot);
  document.getElementById("remain_" + index).value = remain;
  arr[index]["fallot"] = allot;
  arr[index]["fbalance"] = remain;

  console.log(arr);

  console.log(grcount, roomname, "grigrogriogrio");

  $.ajax({
    type: "GET",
    url: $host_url + "getTotalRemaining",
    data:
      "&allot=" +
      allot +
      "&qpcount=" +
      totalcount +
      "&qpcode=" +
      qpcode +
      "&roomno=" +
      roomno,
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response, "ebdcb");
      document.getElementById("grandtotal").innerHTML =
        `Total Count:&nbsp;&nbsp;` +
        totalcount +
        `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspRemaning:&nbsp;&nbsp;` +
        response.data.grcount;
    },
  });
}

function getroomcapacity(index) {
  let roomname = document.getElementById("roomname_" + index).value;
  console.log(roomname);
  let split = roomname.split("-");
  let capacity = split[1];
  let roomno = split[0];

  document.getElementById("capacity_" + index).value = capacity;
  if (index == arr[index]["index"]) {
    arr[index]["fcapacity"] = capacity;
    arr[index]["froomno"] = roomno;
  }
  $.blockUI({
    message:
      "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  });

  $.ajax({
    type: "GET",
    url: $host_url + "getRemainingCapacity",
    data: "capacity=" + split[1] + "&roomno=" + split[0],
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response);
      if (response.error_code == 0) {
        document.getElementById("remain_" + index).value =
          response.data.fbalance;
        arr[index]["prevRemaining"] = response.data.fbalance;
        $.unblockUI();
      }
    },
  });
}
function checkRemaingValue(index) {
  let roomname = document.getElementById("roomname_" + index).value;
  let split = roomname.split("-");
  let roomno = split[0];
  // console.log(arr[index]["prevRemaining"], "arr[index]");
  let allot = document.getElementById("allot_" + index).value;
  let remaining = document.getElementById("remain_" + index).value;
  console.log(allot, "alloting");
  if (allot == "" || allot == 0 || isNaN(allot)) {
    document.getElementById("remain_" + index).value =
      arr[index]["prevRemaining"];
  }
}

function closeModelTable() {
  $("#modeltable").hide();
  $("#datatable").show();
  index = 0;
}

let count = 0;

function saveroomallotmentqpwise() {
  count = 0;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i]["fallot"] != "" && arr[i]["fdeleted"] != true) {
      count += parseInt(arr[i]["fallot"]);
    }
  }

  if (count > totalcount) {
    alert("Allotment exceeded");
    return;
  }
  let rdate = document.getElementById("rdate").value;
  let formdata = new FormData();
  formdata.append("rdate", rdate);
  formdata.append("qpcode", qpcode);
  formdata.append("data", JSON.stringify(arr));

  console.log(arr, "arrayayayaya");
  // $.blockUI({
  //   message:
  //     "<h1 class='h1' style='font-size:12px'><img src='img/ajax-loader.gif' border='0'></h1>",
  // });

  $.ajax({
    type: "POST",
    url: $host_url + "postToTable",
    data: formdata,
    contentType: false,
    processData: false,
    cache: false,
    success: function (res) {
      let response = JSON.parse(res);
      console.log(response, "hihi");
      if (response.error_code == 0) {
        alert(response.data.msg);
        roomallotment(qpcode, subnbame, totcount, degree, subcode);
        $("#modeltable").show();
        $("#datatable").show();
        // $.unblockUI();
        return;
      } else {
        alert(response.data.msg);
        // $.unblockUI();
        return;
      }
    },
  });
}

function handledelete(i) {
  if (i == arr[i]["index"]) {
    arr[i]["fdeleted"] = document.getElementById("del_chk_" + i).checked;
  }
  console.log(arr);
}