function validateShow(accessnumber) {
    const modalBody = $('#validateModal .modal-body');
    modalBody.html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="mt-2">Fetching verification details for #' + accessnumber + '...</p></div>');

    $.ajax({
      url: `${BASE_URL}/api/request/validate/${accessnumber}`,
      method: 'GET',
      dataType: 'html',
      success: function(response) {  
        modalBody.html(response);
      },
      error: function(xhr, status, error) {
        console.error("AJAX Error:", status, error);
        modalBody.html(`
          <div class="alert alert-danger" role="alert">
            <strong>Error loading content:</strong> Could not retrieve verification details.
            <p class="mt-1 mb-0"><small>Details: ${error}</small></p>
          </div>
        `);
      }
    });
  }

  function unvalidateShow(accessnumber) {
    const modalBody = $('#unvalidateModal .modal-body');
    modalBody.html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="mt-2">Fetching verification details for #' + accessnumber + '...</p></div>');

    $.ajax({
      url: `${BASE_URL}/api/request/unvalidate/${accessnumber}`,
      method: 'GET',
      dataType: 'html',
      success: function(response) {  
        modalBody.html(response);
      },
      error: function(xhr, status, error) {
        console.error("AJAX Error:", status, error);
        modalBody.html(`
          <div class="alert alert-danger" role="alert">
            <strong>Error loading content:</strong> Could not retrieve verification details.
            <p class="mt-1 mb-0"><small>Details: ${error}</small></p>
          </div>
        `);
      }
    });
  }
  // Function to convert form data into a simple object
  function formToObject(formElement) {
    const data = new FormData(formElement);
    const obj = {};
    for (const [key, value] of data.entries()) {
      obj[key] = value;
    }
    return obj;
  }

  // Function to handle the DELETE request
  function unvalidateRequest(formId, accessnumber) {
    const formElement = document.getElementById(formId);

    if (confirm("Are you sure you want to unvalidate this request?")) {

    var formDataObject = formToObject(formElement);

    fetch(`${BASE_URL}/api/request/validate/${accessnumber}`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify( formDataObject )
    })
    .then(response => {
      if (!response.ok) { return response.json().then(err => { throw err; }); }
      return response.json();
    })
    .then(data => {
      $(`#unvalidateModal`).modal('hide');
      console.log("Success Response:", data);

      $(`#printed`).hide();
      $(`#eng`).hide();

      $(`#val1user-${accessnumber}`).text("1 : ");
      $(`#val2user-${accessnumber}`).text("2 : ");

      // ganti tombol UNVALIDATE -> VALIDATE
      $(`#btnContainer-${accessnumber}`).html(`
        <button id="valBtn-${accessnumber}"
          class="btn btn-xs btn-outline-success px-1 py-0 mb-1"
          onclick="validateShow(${accessnumber})"
          data-bs-toggle="modal"
          data-bs-target="#validateModal">
          <i class="bi bi-check-lg"></i>
        </button>
      `);

      // $(`#unvalBtn-${accessnumber}`).hide();
      // $(`#valBtn-${accessnumber}`).prop('disabled', false);
      // $(`#valBtn-${accessnumber}`).remove();
     
    })
    .catch(error => {
      console.error("Fetch Error:", error);
      alert(`Error unvalidating the request. Details: ${error.message || error}`);
      });
    }
  }

  function validate(accessnumber,userid) {
    // toggle checkbox
    const row = document.getElementById(`row-${accessnumber}`);

    fetch(`${BASE_URL}/api/request/validate/${accessnumber}`, {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({ userid:`${userid}` })
    }).then(response => {
			$(`#validateModal`).modal('hide');
			// $(`#valBtn-${accessnumber}`).prop('disabled', true);
      // $(`#valBtn-${accessnumber}`).hide();

      // $(`#unvalBtn-${accessnumber}`).after(`
      //   <button id="unvalBtn-${accessnumber}"
      //     class="btn btn-xs btn-outline-secondary px-1 py-0 mb-1"
      //     onclick="unvalidateShow(${accessnumber})"
      //     data-bs-toggle="modal"
      //     data-bs-target="#unvalidateModal">
      //     <i class="bi bi-arrow-counterclockwise"></i>
      //   </button>
      // `);
      // ganti tombol val → unval
      $(`#btnContainer-${accessnumber}`).html(`
        <button id="unvalBtn-${accessnumber}"
          class="btn btn-xs btn-outline-secondary px-1 py-0 mb-1"
          onclick="unvalidateShow(${accessnumber})"
          data-bs-toggle="modal"
          data-bs-target="#unvalidateModal">
          <i class="bi bi-arrow-counterclockwise"></i>
        </button>
      `);

			response.json().then(data => {
				console.log("Success:", data);
				if(data.val === 1){ $(`#val1user-${accessnumber}`).text("1 : "+data.userid || '1 :'); }
				if(data.val === 2){ $(`#val2user-${accessnumber}`).text("2 : "+data.userid || '2 :'); }
			});
    }).catch(error => {
      console.log("Error:", error);
    });
  }