Untitled

<!--
Created by PL
Oct 2019
-->
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <style>
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
*{
  font-family: serif;
}
  </style>
  <div id='siteTitle'>
  <h1><span id=nuhs>NUHS</span> Theater Sales Tracker</h1>
  </div>
    <table style="margin-left: auto; margin-right: auto;" cellpadding="5">
      <tbody>
        <tr>
          <td id='createReservation' valign='top'>
            <button class='collapsible' type='button'>Create Sale Record</button>
            <div class='content'>
            <form id="myForm" onsubmit="event.preventDefault(); google.script.run.newEntry(this)">
              <h3>First Name:</h3>
              <input name="firstName">a
              <h3>Last Name:</h3>
              <input name="lastName">
              <h3>Select a show:</h3>
              <input type="radio" id='st1' name="showtime" value="st1"/>
              <label for="st1">November 15th @ 7:00PM</label><br>
              <input type="radio" id='st2' name="showtime" value="st2"/>
              <label for="st2">November 16th @ 7:00PM</label><br>
              <input type="radio" id='st3' name="showtime"value="st3"/>
              <label for="st3">November 18th @ 2:00PM</label><br>
              <input type="radio" id='st4' name="showtime" value="st4"/>
              <label for="st4">November 19th @ 2:00PM</label><br><br>
              <input type="submit"/>
            </form>
          </div>
          </td>
          <!--Lookup Section -->
          <td valign='top'>
          <button class='collapsible' type='button'>Lookup/Verify Sales Record</button>
          <div class='content'>
            <form id="lookupForm" onsubmit="event.preventDefault(); google.script.run.getSaleEntry(this)">
            <h3>Lookup Sales Entries By:</h3>
            <input type='radio' id='la1'name='lookupType' value='fn'/>
            <label for='la1'>First Name</label><br>
            <input type='radio' id='la2'name='lookupType' value='ln'/>
            <label for='la2'>Last Name</label><br>
            <input type='radio' id='la3'name='lookupType' value='em'/>
            <label for='la3'>E-Mail Address</label><br>
            <input type='radio' id='la4'name='lookupType' value='sn'/>
            <label for='la3'>Seat Number(s)</label><br>
            <p>Enter Search Argument:</p>
            <input id='param' name='param'/>
            <input type='submit'/>
            </form>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
    console.log("testing");
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
    </script>
  </body>
</html>