{% extends "pos/base.html" %}
{% block title %}Tenant Shift — Verify PIN{% endblock %}

{% block content %}
<div class="container" style="max-width:460px;margin-top:80px;">

  <div class="card shadow border-0" style="border-radius:12px;overflow:hidden;">

    {# Header #}
    <div class="card-header text-white text-center py-4 border-0"
         style="background:linear-gradient(135deg,#2c3e50 0%,#1a252f 100%);">
      <div style="width:60px;height:60px;border-radius:50%;
                  background:rgba(255,255,255,.12);margin:0 auto 14px;
                  display:flex;align-items:center;justify-content:center;">
        <i class="fas fa-shield-alt fa-2x text-warning"></i>
      </div>
      <h5 class="mb-1 font-weight-bold">Tenant Shift</h5>
      <p class="mb-0 small" style="opacity:.7;">
        Superuser-only access. Enter your secret PIN to continue.
      </p>
    </div>

    {# Body #}
    <div class="card-body px-4 py-4">

      {% if error %}
        <div class="alert alert-danger alert-dismissible fade show py-2 mb-3" role="alert">
          <i class="fas fa-exclamation-circle mr-2"></i>{{ error }}
          <button type="button" class="close py-2" data-dismiss="alert">
            <span>&times;</span>
          </button>
        </div>
      {% endif %}

      <form method="post" id="pinForm" autocomplete="off">
        {% csrf_token %}

        <div class="form-group mb-3">
          <label class="small font-weight-bold text-uppercase text-muted mb-1">
            <i class="fas fa-key mr-1"></i>Secret PIN
          </label>
          <div class="input-group">
            <input type="password"
                   name="pin"
                   id="id_pin"
                   class="form-control form-control-lg text-center"
                   placeholder="● ● ● ● ● ●"
                   maxlength="64"
                   autofocus
                   autocomplete="new-password"
                   style="letter-spacing:.3em;font-size:1.4rem;border-right:none;">
            <div class="input-group-append">
              <button type="button"
                      class="btn btn-outline-secondary"
                      id="togglePin"
                      tabindex="-1"
                      style="border-left:none;">
                <i class="fas fa-eye" id="eyeIcon"></i>
              </button>
            </div>
          </div>
          <small class="text-muted">This PIN is set by the superuser in the .env configuration.</small>
        </div>

        <button type="submit"
                class="btn btn-block btn-lg font-weight-bold mt-2"
                style="background:linear-gradient(135deg,#4e73df,#224abe);color:#fff;border:none;border-radius:8px;">
          <i class="fas fa-unlock-alt mr-2"></i>Verify & Continue
        </button>

      </form>
    </div>

    {# Footer #}
    <div class="card-footer text-center py-2 bg-light border-0">
      <small class="text-muted">
        <i class="fas fa-lock mr-1"></i>
        Session expires after <strong>30 minutes</strong> of inactivity.
      </small>
    </div>

  </div>

  <div class="text-center mt-3">
    <a href="/" class="text-muted small">
      <i class="fas fa-arrow-left mr-1"></i>Back to Dashboard
    </a>
  </div>
</div>
{% endblock %}


{% block javascripts %}
{{ block.super }}
<script>
(function(){
  // Toggle password visibility
  var input   = document.getElementById("id_pin");
  var btn     = document.getElementById("togglePin");
  var eyeIcon = document.getElementById("eyeIcon");

  if (btn && input) {
    btn.addEventListener("click", function(){
      if (input.type === "password") {
        input.type = "text";
        eyeIcon.className = "fas fa-eye-slash";
      } else {
        input.type = "password";
        eyeIcon.className = "fas fa-eye";
      }
      input.focus();
    });
  }

  // Prevent form submit on empty
  document.getElementById("pinForm").addEventListener("submit", function(e){
    var v = input ? input.value.trim() : "";
    if (!v) {
      e.preventDefault();
      input.classList.add("is-invalid");
      input.focus();
    }
  });
})();
</script>
{% endblock %}