<!DOCTYPE html>
<html>
  <head>
    <%- include('./partials/head'); %>
    <title>Main | OTiS</title>

    <script type="module">
      import QrScanner from "./js/qr-scanner.min.js";

      $(() => {
        const video = document.getElementById("video");
        const audio = document.getElementById("sfx");
        const scanner = new QrScanner(
          video,
          (result) => {
            $.ajax({
              type: "post",
              url: "/main/api",
              data: { data: result.data },
              success: (data, status) => {
                $("#ticketNo").attr("value", data.ticketNo);
                $("#name").attr("value", data.name);
                audio.play();
              },
              error: () => {
                $("#ticketNo").attr("value", "查无此票");
                $("#name").attr("value", "Ticket Not Found");
              },
            });
          },
          {
            returnDetailedScanResult: true,
            maxScansPerSecond: 4,
            highlightScanRegion: true,
            highlightCodeOutline: true,
          }
        );
        scanner.start();
      });
    </script>
  </head>

  <body class="event-body">
    <%- include('./partials/script'); %>
    <video id="video"></video>
    <audio id="sfx">
      <source src="sfx/ding.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio>
    <div class="container">
      <div id="status" class="jumbotron">
        <p class="lead">
          请扫描电子票二维码，谢谢。Please scan the QR code on your digital
          ticket, thank you.
        </p>
        <fieldset>
          <div class="form-row">
            <div class="form-group col-md-3">
              <label for="ticketNo" class="col-form-label-lg">Ticket No.</label>
              <input
                type="text"
                class="form-control form-control-lg input-md"
                id="ticketNo"
                placeholder="Ticket No."
                readonly
              />
            </div>
            <div class="form-group col-md-9">
              <label for="name" class="col-form-label-lg">Name</label>
              <input
                type="text"
                class="form-control form-control-lg input-md"
                id="name"
                placeholder="Name"
                readonly
              />
            </div>
          </div>
        </fieldset>
      </div>
    </div>
    <!-- /container -->
  </body>
</html>
