{% extends "base.html" %}
{% block title %}Self-checkin for {{ auction }}{% endblock %}
{% block content %}
<span class="hide-fullscreen">
  {% include "auction_ribbon.html" %}
  <div class="mt-3">
    <h4>Self-checkin</h4>
    <p class="text-muted">
      Use this page with a barcode scanner in continuous mode to allow people to check in themselves.
      Configure your barcode scanner to use a prefix character <code class="scanner-prefix-key">F9</code> and a suffix CR character, and attach it in HID (keyboard) mode.
      This page will only allow users to check in -- it won't let them assign bidder numbers or add stuff to their invoice.
      But, you can use a barcode scanner on any page of this auction to assign bidder numbers or add items to a user's invoice.
      {% if not request.is_mobile_app %}<a href="{% url 'club_barcode_labels' slug=auction.club.slug %}">Print barcodes here.</a>{% endif %}
    </p>
    <button id="fullscreen-btn" class="btn btn-sm bg-primary d-none d-sm-inline-block"><i class="bi bi-fullscreen"></i> Go fullscreen</button>
  </div>
</span>
{% endblock %}
{% block undiv_content %}
<div id="self-checkin-stage" class="d-flex align-items-center justify-content-center text-center px-4" style="min-height: 50vh;">
  <div id="self-checkin-message" class="fw-bold" style="font-size: clamp(2rem, 8vw, 14vh); line-height: 1.15; overflow-wrap: anywhere; max-width: 100%;">Scan your card to check in</div>
</div>
{% endblock %}
{% block extra_js %}
{% comment %} Included directly (not only via the ribbon) because club permission_add_edit users can use this page without seeing the ribbon's admin block. The view sets barcode_check_in_only, so scans on this page can only check people in. {% endcomment %}
{% include "auctions/barcode_scanner.html" %}
<script>
  (() => {
    const messageEl = document.getElementById("self-checkin-message");
    const stage = document.getElementById("self-checkin-stage");
    const idleMessage = "Scan your card to check in";
    const phrases = [
      "Welcome, {name}!",
      "Thanks for checking in, {name}!",
      "Glad you're here, {name}!",
      "Look who made it: {name}!",
      "{name} is in the building!",
      "Make way for {name}!",
      "Uh oh, {name} is here.  Everybody watch out!",
      "The auction just got better: {name} is here!",
      "Hide your wallets, {name} has arrived!",
      "Fashionably on time: {name}!",
    ];
    let lastPhraseIndex = -1;
    let idleTimer = null;

    // Show the prefix character the scanner must be configured with (from the shared scanner config)
    document.querySelectorAll(".scanner-prefix-key").forEach((el) => {
      el.textContent = window.auctionBarcodeScanner ? window.auctionBarcodeScanner.prefixKey : "F9";
    });

    function showWelcome(name) {
      let index = Math.floor(Math.random() * phrases.length);
      if (index === lastPhraseIndex) {
        index = (index + 1) % phrases.length;
      }
      lastPhraseIndex = index;
      // textContent keeps member-supplied names from being interpreted as HTML
      messageEl.textContent = phrases[index].replace("{name}", name);
      if (idleTimer) {
        clearTimeout(idleTimer);
      }
      idleTimer = setTimeout(() => {
        messageEl.textContent = idleMessage;
      }, 20000);
    }

    document.addEventListener("auction-barcode-scan", (event) => {
      const detail = event.detail || {};
      // errors already show a toast from the shared scanner pipeline
      if (detail.ok && detail.payload) {
        showWelcome(detail.payload.name || "");
      }
    });

    // Full screen mode, matching the set lot winners page
    $('#fullscreen-btn').on('click', function() {
      let elem = document.documentElement;
      if (!document.fullscreenElement && !document.webkitFullscreenElement) {
        (elem.requestFullscreen ? elem.requestFullscreen() : elem.webkitRequestFullscreen())
          .catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message}`);
          });
      } else {
        (document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen())
          .catch(err => {
            console.error(`Error attempting to exit full-screen mode: ${err.message}`);
          });
      }
    });

    $(document).on('fullscreenchange webkitfullscreenchange', function() {
      if (document.fullscreenElement || document.webkitFullscreenElement) {
        $('.hide-fullscreen').hide();
        $('#fullscreen-btn').removeClass('d-sm-inline-block');
        stage.style.minHeight = "90vh";
      } else {
        $('.hide-fullscreen').show();
        $('#fullscreen-btn').addClass('d-sm-inline-block');
        stage.style.minHeight = "50vh";
      }
    });
  })();
</script>
{% endblock %}