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

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

  {# ══ Page header ══ #}
  <div class="d-flex align-items-center mb-4">
    <div style="width:52px;height:52px;border-radius:12px;
                background:linear-gradient(135deg,#2c3e50,#1a252f);
                display:flex;align-items:center;justify-content:center;
                flex-shrink:0;margin-right:16px;">
      <i class="fas fa-exchange-alt text-warning fa-lg"></i>
    </div>
    <div>
      <h4 class="mb-0 font-weight-bold text-gray-800">Tenant Shift</h4>
      <small class="text-muted">
        Switch into any active tenant as a <strong>Master</strong> user.
        All actions will be logged under your superuser account.
      </small>
    </div>
  </div>

  {# ══ Alert ══ #}
  {% if error %}
    <div class="alert alert-danger py-2 mb-3">
      <i class="fas fa-exclamation-circle mr-2"></i>{{ error }}
    </div>
  {% endif %}

  {# ══ Warning banner ══ #}
  <div class="alert border-0 mb-4 py-3"
       style="background:#fff8e1;border-left:4px solid #ffc107!important;">
    <div class="d-flex">
      <i class="fas fa-exclamation-triangle text-warning mr-3 mt-1" style="font-size:1.2rem"></i>
      <div>
        <strong>Use with extreme caution.</strong>
        <p class="mb-0 small text-muted mt-1">
          Once you shift into a tenant, you will have full <em>Master</em> access
          to their data — including sales, stock, and reports.
          An exit button will appear on every page so you can return anytime.
        </p>
      </div>
    </div>
  </div>

  {# ══ Search card ══ #}
  <div class="card shadow border-0" style="border-radius:12px;overflow:hidden;">

    <div class="card-header py-3 border-0"
         style="background:linear-gradient(135deg,#4e73df 0%,#224abe 100%);">
      <h6 class="text-white mb-0 font-weight-bold">
        <i class="fas fa-search mr-2"></i>Search &amp; Select Tenant
      </h6>
    </div>

    <div class="card-body px-4 py-4">

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

        {# Hidden field — filled by Select2 selection #}
        <input type="hidden" name="branch_id" id="id_branch_id_hidden">

        {# Select2 search input #}
        <div class="form-group mb-3">
          <label class="small font-weight-bold text-uppercase text-muted mb-1">
            <i class="fas fa-building mr-1"></i>Search by Tenant / Branch Name or ID
          </label>
          <select id="id_branch_select"
                  class="form-control"
                  style="width:100%">
            <option value="">Type to search…</option>
          </select>
          <small class="text-muted mt-1 d-block">
            Start typing company or branch name. Tenant ID also searchable.
          </small>
        </div>

        {# Preview card — shown after selection #}
        <div id="previewCard"
             class="p-3 mb-4 border rounded"
             style="background:#f8f9fc;display:none;">
          <div class="d-flex align-items-start">
            <div style="width:42px;height:42px;border-radius:8px;
                        background:#4e73df;display:flex;align-items:center;
                        justify-content:center;flex-shrink:0;margin-right:14px;">
              <i class="fas fa-store-alt text-white"></i>
            </div>
            <div style="flex:1">
              <div class="font-weight-bold text-gray-800" id="prev_name" style="font-size:1rem">—</div>
              <div class="d-flex flex-wrap mt-1" style="gap:8px;">
                <span class="badge badge-light border text-dark">
                  <i class="fas fa-fingerprint mr-1 text-primary"></i>
                  Tenant ID: <strong id="prev_tid">—</strong>
                </span>
                <span class="badge badge-light border text-dark">
                  <i class="fas fa-calendar-alt mr-1 text-warning"></i>
                  Expires: <strong id="prev_expiry">—</strong>
                </span>
                <span class="badge badge-light border text-dark">
                  <i class="fas fa-phone mr-1 text-success"></i>
                  <span id="prev_phone">—</span>
                </span>
              </div>
            </div>
          </div>
        </div>

        {# Submit button #}
        <button type="submit"
                id="shiftBtn"
                disabled
                class="btn btn-block btn-lg font-weight-bold"
                style="background:linear-gradient(135deg,#e74a3b,#c0392b);
                       color:#fff;border:none;border-radius:8px;
                       opacity:.5;transition:opacity .2s;">
          <i class="fas fa-sign-in-alt mr-2"></i>
          Shift into Tenant as Master
        </button>

        <p class="text-center text-muted small mt-2 mb-0">
          <i class="fas fa-info-circle mr-1"></i>
          You can exit this mode at any time using the
          <strong>Exit Tenant</strong> button that appears on every page.
        </p>
      </form>
    </div>
  </div>

  {# Back link #}
  <div class="text-center mt-3 mb-5">
    <a href="{% url 'authentication:active_branches_overview' %}" class="text-muted small">
      <i class="fas fa-arrow-left mr-1"></i>Back to Branches Overview
    </a>
  </div>
</div>
{% endblock %}


{% block javascripts %}
{{ block.super }}

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap4-theme@1.0.0/dist/select2-bootstrap4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .75rem + 2px) !important;
    font-size: 1rem !important;
  }
  /* Custom Select2 result item template */
  .s2-result-company  { font-weight:600; font-size:.95rem; }
  .s2-result-branch   { color:#4e73df; font-size:.85rem; }
  .s2-result-meta     { color:#aaa; font-size:.78rem; margin-top:2px; }
</style>

<script>
(function(){
  "use strict";

  var ajaxUrl = "{% url 'authentication:tenant_shift_branch_ajax' %}";

  /* ── Select2 with custom template ── */
  function formatResult(item) {
    if (!item.id) return item.text;
    return $(
      "<div class='py-1'>" +
        "<div class='s2-result-company'>" +
          "<i class='fas fa-building mr-1 text-muted' style='font-size:.8rem'></i>" +
          escHtml(item.company || item.text) +
        "</div>" +
        "<div class='s2-result-branch'>" +
          "<i class='fas fa-code-branch mr-1' style='font-size:.75rem'></i>" +
          escHtml(item.branch || "") +
        "</div>" +
        "<div class='s2-result-meta'>" +
          "<span class='mr-3'><i class='fas fa-fingerprint mr-1'></i>ID: " + escHtml(String(item.tid||"")) + "</span>" +
          "<span class='mr-3'><i class='fas fa-calendar-alt mr-1'></i>" + escHtml(item.expiry||"") + "</span>" +
          "<span><i class='fas fa-phone mr-1'></i>" + escHtml(item.phone||"—") + "</span>" +
        "</div>" +
      "</div>"
    );
  }

  function escHtml(str) {
    return String(str)
      .replace(/&/g,"&amp;").replace(/</g,"&lt;")
      .replace(/>/g,"&gt;").replace(/"/g,"&quot;");
  }

  $("#id_branch_select").select2({
    theme: "bootstrap4",
    placeholder: "Type company or branch name…",
    allowClear: true,
    minimumInputLength: 0,
    width: "100%",
    templateResult: formatResult,
    ajax: {
      url: ajaxUrl,
      dataType: "json",
      delay: 200,
      data: function(p) { return { term: p.term || "" }; },
      processResults: function(d) { return { results: d.results || [] }; },
      cache: true,
    },
  });

  /* ── On selection — fill hidden input + preview card ── */
  $("#id_branch_select").on("select2:select", function(e){
    var d   = e.params.data;
    var btn = document.getElementById("shiftBtn");
    var hid = document.getElementById("id_branch_id_hidden");

    hid.value = d.id;

    // Preview
    document.getElementById("prev_name").textContent   = (d.company||"") + " — " + (d.branch||"");
    document.getElementById("prev_tid").textContent    = d.tid  || "—";
    document.getElementById("prev_expiry").textContent = d.expiry || "—";
    document.getElementById("prev_phone").textContent  = d.phone  || "—";
    document.getElementById("previewCard").style.display = "";

    // Enable button
    btn.disabled = false;
    btn.style.opacity = "1";
  });

  /* ── On clear ── */
  $("#id_branch_select").on("select2:unselect select2:clear", function(){
    document.getElementById("id_branch_id_hidden").value = "";
    document.getElementById("previewCard").style.display = "none";
    var btn = document.getElementById("shiftBtn");
    btn.disabled = true;
    btn.style.opacity = "0.5";
  });

  /* ── Guard: don't submit without selection ── */
  document.getElementById("shiftForm").addEventListener("submit", function(e){
    var hid = document.getElementById("id_branch_id_hidden").value;
    if (!hid) {
      e.preventDefault();
      alert("Please select a tenant/branch first.");
    }
  });

})();
</script>
{% endblock %}