<style>
  /* Styles for fonts, label, and button */
  div.donationLink {
      border: 1px solid #F3F2F1;
      border-radius: 12px;
      box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
      padding: 24px;
      display: none;
      width: 872px;
  }
  .donation label {
      font-family: 'Segoe UI';
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      color: #323130;
  }
  .donation button {
      font-family: 'Segoe UI';
      padding: 8px 16px;
      font-size: 16px;
      background-color: #6219D9;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      outline: none;
  } 
  div.donation {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 100px;
      gap: 36px;
      width: 840px;
  }
  span.donation {
      font-family: Segoe UI;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      color: blue;
  }

  /* Form styles*/
  form {
      padding: 10px 16px;
  }

  /* Input styles*/
  input[type=text], select {
      width: 100%;
      padding: 8px 12px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }
  input[type=number], select {
      width: 100%;
      padding: 8px 16px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }
  select {
      width: 100%;
      padding: 8px 10px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }

  /* Additional styles for currency div */
  .currency-wrap{
    position:relative;
  }

  .currency-code{
    position:absolute;
    left:8px;
    top:16px;
  }

  .text-currency{
    padding:10px 20px;
    border:solid 1px #ccc;
    border-radius:5px;
  }

  /* Link styles */
  a:link {
      font-family: Segoe UI;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      color: blue;
  }
  a:visited {
      font-family: Segoe UI;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      color: purple;
  }
  a:hover {
      font-family: Segoe UI;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      color: hotpink;
  }
  a:active {
      font-family: Segoe UI;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      color: blue;
  }

  /*Load spinner class and keyframes*/
  .loader {
      display: none;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite; /* Safari vers. */
      animation: spin 2s linear infinite;
  }

  /* Safari vers. */
  @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

</style>

<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
  <div class="container" style="display: flex; flex-wrap: wrap;">
      <div class="col-md-12 columnBlockLayout donation" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word; padding: 0 180px; margin: 60px 0px;">
          <h2 style="border-bottom: 1px solid;">Donation Form</h2>
          <form id="donateForm">
              <!-- Form content controls below -->
              <div style="display: inline-block;">
                <label style="display: block;" for="donationInput">Donation name</label>
                <input type="text" id="donationInput" placeholder="Title of donation..." required />
              </div>
              <div style="display: inline-block;">
                <label style="display: block;" for="donationInput">Purpose of donation</label>
                <input type="text" id="purposeInput" placeholder="Purpose of the donation..." />
              </div>
              <br>
              <div style="display: inline-block;">
                <label style="display: block;" for="donationInput">First Name</label>
                <input type="text" id="firstnameInput" placeholder="First name..." required />
              </div>
              <div style="display: inline-block;">
                <label style="display: block;" for="donationInput">Last Name</label>
                <input type="text" id="lastnameInput" placeholder="Last name..." required />
              </div>             
              <br>
              <label for="donationInput">Email Address</label>
              <br>
              <input type="text" id="emailInput" placeholder="Email..." required />
              <br>
              <label for="donationInput">Amount</label>
              <br>
              <div class="currency-wrap">
                  <span class="currency-code">€</span>
                  <input type="number" id="amountInput" class="text-currency" placeholder="..." required />
              </div>
              <label for="donationInput">Donation Category</label>
              <br>
              <!-- The category values must be changed to the category values from your own environment. -->
              <!-- If a dropdown is not needed for your own form, this can be deleted. -->
              <select name="category" id="donateCategory">
                  <option value="924180000">Basic</option>
                  <option value="924180001">Silver</option>
                  <option value="924180002">Gold</option> 
                </select>
              <br>
              <p>
              <p>
                  <button type="submit">Submit</button>
              </p>
          </form>
          <!-- Div for load wheel. -->
          <div id="loader" class="loader"></div>
          <!-- Div for PDF viewer. -->
          <div id="donationView" class="donationLink">
              <div>
                  <div>
                      <span class="donation" id="donationPDF"> </span>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<script>
    document.getElementById("donateForm").addEventListener("submit", function (event) {
        event.preventDefault(); // Prevent form submission

        //Get the relevant divs
        var loadDiv = document.getElementById("loader");
        var viewDiv = document.getElementById("donationView");

        //Get the user's input
        var donation = document.getElementById("donationInput").value;
        var purpose = document.getElementById("purposeInput").value;
        var amount = document.getElementById("amountInput").value;
        var fName = document.getElementById("firstnameInput").value;
        var lName = document.getElementById("lastnameInput").value;
        var category = document.getElementById("donateCategory").value;
        var email = document.getElementById("emailInput").value;

        //Disable or enable divs as needed.  Load wheel is enabled after form submission
        loadDiv.style.display = "block";
        viewDiv.style.display = "none";

        //Create object and store the user's input in it.
        var data = {};
        data["Donation name"] = donation;
        data["Purpose of donation"] = purpose;
        data["First Name"] = fName;
        data["Last Name"] = lName;
        data["Amount"] = Number(amount);
        data["Category"] = Number(category);
        data["Email"] = email;

        //Include the URL to the cloud flow.  This URL should be found under "Set up -> Cloud Flows" in your Power Pages environment.
        var _url = "ENTER YOUR URL HERE";

        //Create payload based on the user input
        var payload = {};
        payload.eventData = JSON.stringify(data);        

        //Pass in the payload and URL to the server
        shell
            .ajaxSafePost({
                type: "POST",
                contentType: "application/json",
                url: _url,
                data: JSON.stringify(payload),
                processData: false,
                global: false,
            })
            .done(function (response) {
                //Get response from server
                const result = JSON.parse(response);     

                //Create and configure the PDF viewer
                var pdfImg = document.createElement("object");
                pdfImg.style.width = "100%";
                pdfImg.style.height = "842pt";
                pdfImg.type = "application/pdf";
                pdfImg.data = "data:application/pdf;base64," + result["document_content"];  //add base64 string
                
                //Get the PDF div
                var newPDF = document.getElementById("donationPDF");

                //Clear PDF div if submit button is used again to prevent multiple PDFs from appearing
                if (newPDF.firstChild) {
                    newPDF.removeChild(newPDF.firstChild);
                    newPDF.appendChild(pdfImg);
                }
                else
                    newPDF.appendChild(pdfImg);

                //Remove the loader and display the link and PDF
                loadDiv.style.display = "none";
                viewDiv.style.display = "block";
              
            })
            .fail(function () {
                loadDiv.style.display = "none";
                alert("An error occurred.");
            });
  });
</script>