jQuery(function ($) {
  cekReqInfoTrack = function () {
    $("#tagformreqinfotrack").validate({
      rules: {
        email: {
          required: true,
          email: true,
        },
        nik: {
          required: true,
        },
      },
      messages: {
        email: {
          required: "We need your email address to contact you",
          email: "Your email address must be in the format of name@domain.com",
        },
        nohp: {
          required: "We need your ID to track your information request",
        },
      },
      submitHandler: function (form) {
        utilsJS.showLoading();
        let mappingData = {};
        Object.keys(form).forEach((i) => {
          mappingData = {
            ...mappingData,
            [form[i].name]: form[i].value,
          };
        });

        $("#renTrackInfo").hide(500);
        $.ajax({
          type: "POST",
          url: "https://ppid.sumbawabaratkab.go.id/en/reqinfotrack",
          data: mappingData,
          headers: {
            "X-CSRF-Token": document.getElementsByName("_token")[0].value,
          },
          success: function (res) {
            $("#renTrackInfo").html(renderFormTrackInfo(res.data));
            $("#renTrackInfo").show(500);
            utilsJS.closeLoading();
          },
          error: function () {
            utilsJS.closeModal();
            utilsJS.showModal("Information", "Something went wrong", {
              showFooter: false,
            });
            utilsJS.closeLoading();
          },
        });
      },
    });

    return false;
  };

  renderFormTrackInfo = function (datas) {
    let content = "";
    if (!utilsJS.isNullOrEmpty(datas)) {
      let contentTable = "";

      if (Array.isArray(datas)) {
        datas.forEach((data, i) => {
          let renReqInfoCodeLink = !utilsJS.isNullOrEmpty(
            data.req_info_code_link
          )
            ? `<a class="btn btn-info" target="_blank" href="https://ppid.sumbawabaratkab.go.id/en/info/${data.req_info_code_link}">
                  <span class="glyphicon glyphicon-eye-open"></span> Lihat
              </a>`
            : "";
          contentTable += `
            <tr>
              <td>${i + 1}</td>
              <td>${data.nama}</td>
              <td>
                <span class="btn btn-success">${utilsJS.safeValue(
                  data.status_info
                )}</span>
                ${renReqInfoCodeLink}
              </td>
              <td>${utilsJS.safeValue(data.opd)}</td>
              <td>${utilsJS.safeValue(data.jenis_info)}</td>
              <td>${data.kategori_pemohonon}</td>
              <td>${data.created_at}</td>
              <td>${data.req_info_code}</td>
              <td>${data.detail_info}</td>
              <td>${utilsJS.safeValue(data.notes)}</td>
            </tr>
        `;
        });
      }
      content = `
<div class="col-md-12">
  <center>
    <h1>Daftar Permohonan informasi </h1>
  </center>
  <div class="table-responsive">
    <div>
      <table class="table table-striped table-bordered table-hover table-full-width">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama Pemohon</th>
            <th tyle="width: 51px;">Status</th>
            <th style="width: 99px;">Skpd Tujuan</th>
            <th style="width: 99px;">Jenis Info</th>
            <th style="width: 59px;">Kategori Pemohon</th>
            <th style="width: 49px;">Tanggal Upload</th>
            <th style="width: 97px;">Kode Permintaan</th>
            <th style="width: 300px;">Detail Info</th>
            <th style="width: 300px;">Keterangan</th>
          </tr>
        </thead>
        <tbody>
          ${contentTable}
        </tbody>
      </table>
    </div>
  </div>
</div>
      `;
    }
    return content;
  };
});