const loadApprCandidChallanWise = () => {
  $("#loadtab").load("html_modules/apprCandidates.html", () => {
    $("#appdetl").hide();
  });
};

const getAppDetails = () => {
  var parameters = "fromdeg=" + $("#fromdeg").val();
  parameters += "&todeg=" + $("#todeg").val();
  parameters += "&fromcoll=" + $("#fromcoll").val();
  parameters += "&tocoll=" + $("#tocoll").val();
  parameters += "&fromchallan=" + $("#fromchallan").val();
  parameters += "&tochallan=" + $("#tochallan").val();
  parameters += "&exmno=" + $("#year").val();
  // parameters += "&pAprtype=" + $("#idAprtype").val();
  console.log(parameters);
  $.blockUI({ message: "<img src='img/Loading_icon.gif' border='0'>" });

  $.ajax({
    type: "post",
    url: $host_url + "apprCandidates",
    data: parameters,
    success: response => {
      $.unblockUI();

      var { data, error_code, status } = JSON.parse(response);
      // $(".js-exportable").html("");
      var color = "";
      $("#appdetl").show();
      var html = `<div class='row'>
        <div class=' col-lg-offset-1 col-lg-10'>
        <table id='mainTable' class='mainTable m_b_10 table table-striped table-condensed table-bordered'>
        <thead>
          <tr class='bg-cyan'>
            <th style='width:5%;' class="text-center">Sl. No.</th>
            <th style='width:40%;' class="text-center">Name</th>
            <th style='width:30%;' class="text-center">Challan No.</th>
            <th style='width:15%;' class="text-center">App. No.</th>
            <th style='width:8%;' class="text-center">Reg No.</th>
            <th style='width:5%;' class="text-center">Center Code</th>
            <th style='width:10%;' class="text-center">Payment Type</th> 
            <th style='width:15%;' class="text-center">Amount</th>    
            <th style="width:12%" class="text-center">Status</th>
            <th style='width:15%;' class="text-center">Select <input type="checkbox" onchange="checkAll(${
              data.length
            })" name="chk[]" id="checkall" /></th>           
          </tr>
        </thead >
        <tbody>`;

      data.forEach((el, i) => {
        if (el.status == "PENDING") color = "#c6b601";
        else if (el.status == "APPROVED") color = "#009975";
        else color = "black";

        html += `<tr class="tblRow">
        <td class="text-center">${i + 1}</td>
        <td class="text-left" id="fname${i}">${el.fname}</td>
        <td class="text-left" id="chalno${i}">${el.fchallanno}</td>
        <td id="appno${i}">${el.appno}</td>
        <td class="text-center" id="regno${i}">${el.fregno}</td>
        <td class='text-center' id="cntr${i}">${el.fcntrcode}</td>        
        <td class="text-center">${el.fpaymentype}</td>
        <td class="text-right">    ${el.famount}        </td>
        <td class="text-right" style="color:${color};font-weight:bold">${
          el.status
        }</td>
        <td class="text-center"> <center><input type="checkbox" id="chk${i}" onchange="CheckIndiv(${i})"></center>
        <input type="hidden" id="h_${i}"/> </td>
        </tr>`;
      });
      html += `</tbody></table></div></div>
        <div class="row clearfix">
        <div
          class="col-lg-offset-5 col-md-offset-3 col-sm-offset-4 col-xs-offset-5"
        >
          <button
            class="btn btn-primary waves-effect m_b_10"
            id="getDetbtn"
            onclick="updateApprStatus()"
          >
            Update
          </button>
        </div>
      </div>`;
      $("#appdetl").html(html);
      var app_arr = [];
      //user option creation
      // var usr_arr = Object.values(users);
      // var options = usr_arr.map((usr) => {
      //   return `<option value='${usr}'>${usr}</option>`
      // });
      // $('#user').html(options.join(''));
      //get array of applications
      // for (var i in data) {
      //   var arr = $.map(data[i], el => {
      //     return el;
      //   });
      //   app_arr.push(arr);
      // }
      // console.log(app_arr);
      // table = $(".js-exportable").DataTable({
      //   dom: "Bfrtip",
      //   destroy: true,
      //   responsive: true,
      //   data: app_arr,
      //   columnDefs: [
      //     {
      //       targets: 0,
      //       searchable: false,
      //       orderable: false,
      //       className: "dt-body-center",
      //       width: "7%"
      //     },
      //     {
      //       targets: 1,
      //       searchable: false,
      //       orderable: false,
      //       className: "dt-body-center",
      //       width: "5%"
      //       // render: function(data, type, full, meta) {
      //       //   return (
      //       //     // '<center><img width = "60px" height = "80px" src="' +
      //       //     data
      //       //     // '"></img></center>'
      //       //   );
      //       // }
      //     },
      //     {
      //       targets: 2,
      //       className: "text-center",
      //       width: "5%"
      //     },
      //     {
      //       targets: 3,
      //       className: "text-center",
      //       width: "5%"
      //     },
      //     {
      //       targets: 4,
      //       className: "text-center",
      //       width: "5%"
      //     },
      //     {
      //       targets: 5,
      //       className: "text-center",
      //       width: "5%"
      //     },
      //     {
      //       targets: 6,
      //       className: "text-center",
      //       width: "5%",
      //       render: function(data, type, full, meta) {
      //         if (data == "PENDING") var color = "#c6b601";
      //         else if (data == "APPROVED") var color = "green";
      //         else if (data == "REJECTED") var color = "red";
      //         else var color = "black";
      //         return `<span style="color:${color};font-weight:700">${data}</span>`;
      //       }
      //     },
      //     {
      //       targets: 7,
      //       className: "text-center",
      //       width: "5%",
      //       render: function(data, type, full, meta) {
      //         // console.log(data);
      //         return (
      //           '<center><input type="checkbox" name="id[]" class="filled-in chk-col-light-blue" id="' +
      //           $("<div/>")
      //             .text(data)
      //             .html() +
      //           '" value="' +
      //           $("<div/>")
      //             .text(data)
      //             .html() +
      //           '"> </center>'
      //         );
      //       }
      //     }
      //   ],
      //   order: [[1, "asc"]],
      //   columns: [
      //     { title: "<center>Name</center>" },
      //     { title: "<center>App. No.</center>" },
      //     { title: "<center>Reg. No.</center>" },
      //     { title: "<center>Cntr. Code</center>" },
      //     { title: "<center>Payment Type</center>" },
      //     { title: "<center>famount</center>" },
      //     { title: "<center>Status</center>" },
      //     {
      //       title:
      //         "<center><input type='checkbox' name='select_all' value='1' id='select-all'/></center>"
      //     }
      //   ],
      //   // lengthMenu: [[2, 4, 8, -1], [2, 4, 8, "All"]],buttons: ["csv", "excel", "pdf"]
      //   pageLength: 15,
      //   buttons: []
      // });

      //check already assigned user
      // var rows = table.rows({ search: "applied" }).nodes();
      // $('input[type="checkbox"]', rows).prop("checked", this.checked);

      // $("#select-all").on("click", function() {
      //   // Check/uncheck all checkboxes in the table
      //   var rows = table.rows({ search: "applied" }).nodes();
      //   $('input[type="checkbox"]', rows).prop("checked", this.checked);
      // });
      // $("#idAckTable >tbody > tr > td").css("border", "0px");
    }
  });
};

const CheckIndiv = idx => {
  if (document.getElementById("chk" + idx).checked == true) {
    document.getElementById("h_" + idx).value = "T";
  } else {
    document.getElementById("h_" + idx).value = "F";
  }
};

const checkAll = len => {
  console.log(len);
  if (document.getElementById("checkall").checked == true) {
    for (var i = 0; i < len; i++) {
      document.getElementById("chk" + i).checked = true;
      document.getElementById("h_" + i).value = "T";
    }
  } else {
    for (var i = 0; i < len; i++) {
      document.getElementById("chk" + i).checked = false;
      document.getElementById("h_" + i).value = "F";
    }
  }
};

const updateApprStatus = () => {
  var values = Array();
  $("#mainTable tr.tblRow").map((i, el) => {
    var appno = $("#appno" + i).text();
    var regno = $("#regno" + i).text();
    var cntrcode = $("#cntr" + i).text();
    if ($("#chk" + i).is(":checked")) {
      values.push({
        appno: appno,
        regno: regno,
        cntrcode: cntrcode
      });
    }
  });
  $.blockUI({ message: "<img src='img/Loading_icon.gif' border='0'>" });

  $.ajax({
    type: "POST",
    url: $host_url + "updateApprStatus",
    data: "ApprStatus=" + JSON.stringify(values),
    success: response => {
      $.unblockUI();

      var { status, error_code, data } = JSON.parse(response);
      console.log(data);
      if (error_code == 0) {
        alert("Details Updated Successfully");
        $("#appdetl").hide();
      }
      if (error_code == 1) {
        alert("Details wasn't Updated Successfully, Please try again");
        $("#appdetl").hide();
      }
    }
  });
};

const loadApprCandidate = () => {
  $("#loadtab").load("html_modules/apprCandidList.html");
};

const getApprCandidReport = () => {
  var frmdeg = $("#fromdeg").val();
  var todeg = $("#todeg").val();
  var frmappno = $("#fromchal").val();
  var toappno = $("#tochal").val();
  var frmcoll = $("#fromcoll").val();
  var tocoll = $("#tocoll").val();
  var exmno = $("#year").val();
  var rtype = $("#rtype").val();

  console.log("reporptrtt", {
    frmdeg,
    todeg,
    frmappno,
    toappno,
    frmcoll,
    tocoll,
    exmno,
    rtype
  });
  if (frmappno == "") {
    alert("Enter Challan No.");
    // return;
  }
  if (frmdeg == "") {
    alert("Enter Degree");
    // return;
  }
  window.location.href =
    $host_url +
    "generateApprCandidRprt&frmdeg=" +
    frmdeg +
    "&todeg=" +
    todeg +
    "&frmappno=" +
    frmappno +
    "&toappno=" +
    toappno +
    "&frmcoll=" +
    frmcoll +
    "&tocoll=" +
    tocoll +
    "&rtype=" +
    rtype +
    "&exmno=" +
    exmno;
};