{% comment %}
  ════════════════════════════════════════════════════════════════════════
  Reusable Ledger Action Modal
  ------------------------------------------------------------------------
  EK DAFA base.html ke andar, </body> se theek pehle include karein:

      {% include "customers/_action_modal.html" %}

  Phir kisi bhi ledger (customer_ledger, ticket_customer_ledger, aging…)
  mein action buttons isay aise call karenge:

      View  : LedgerAction.open(url, {mode:'view'})
      Edit  : LedgerAction.open(url, {mode:'edit', onDone: refreshLedger})
      Delete: LedgerAction.del (url, {onDone: refreshLedger})

  - View/Edit -> iframe modal mein khulta hai (page navigate nahi hoti).
  - Edit save hote hi (andar ki page forward karte hi) modal khud band +
    onDone() call -> ledger in-place refresh.
  - Delete -> AJAX, phir onDone().
  - Manual band karne ke liye X hamesha mojood hai.
  ════════════════════════════════════════════════════════════════════════
{% endcomment %}

<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document"
       style="max-width: 95vw; margin: 1rem auto;">
    <div class="modal-content" style="height: 90vh;">

      <div class="modal-header py-2">
        <h5 class="modal-title" id="actionModalTitle">Loading…</h5>
        <div class="ml-auto d-flex align-items-center">
          <button type="button" class="btn btn-sm btn-light mr-2" id="actionModalReload" title="Reload">
            <i class="fas fa-sync-alt"></i>
          </button>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>

      <div class="modal-body p-0" style="position:relative; overflow:hidden;">
        <div id="actionModalSpinner"
             style="position:absolute; inset:0; display:flex; align-items:center;
                    justify-content:center; background:#fff; z-index:5;">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading…</span>
          </div>
        </div>
        <iframe id="actionModalFrame" src="about:blank"
                style="width:100%; height:100%; border:0;"></iframe>
      </div>

    </div>
  </div>
</div>

<script>
(function () {
  // Sirf aik dafa initialise ho (agar base mein aur ledger dono mein aa jaye to bhi safe)
  if (window.LedgerAction) return;

  var state = { entryPath: null, mode: 'view', changed: false, onDone: null };

  function $modal()  { return $('#actionModal'); }
  function $frame()  { return $('#actionModalFrame'); }
  function $spin()   { return $('#actionModalSpinner'); }
  function $title()  { return $('#actionModalTitle'); }

  var LABELS = { view: 'View', edit: 'Edit', print: 'Print' };

  // ── iframe modal kholo (view / edit / print) ──────────────────────────
  function open(url, opts) {
    opts = opts || {};
    state.entryPath = null;
    state.mode      = opts.mode   || 'view';
    state.changed   = false;
    state.onDone    = opts.onDone || null;

    $title().text(opts.title || LABELS[state.mode] || 'Action');
    $spin().show();
    $frame().attr('src', url);
    $modal().modal('show');
  }

  // ── modal band karo, zarurat ho to onDone() ───────────────────────────
  function close() {
    var didChange = state.changed;
    var cb        = state.onDone;
    $modal().modal('hide');
    if (didChange && typeof cb === 'function') cb();
  }

  // ── Delete: AJAX, iframe ki zarurat nahi (route GET pe delete karta hai) ─
  function del(url, opts) {
    opts = opts || {};
    if (opts.confirm !== false &&
        !confirm(opts.confirmText || 'Do you want to delete this transaction?')) {
      return;
    }
    fetch(url, {
      method: 'GET',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      credentials: 'same-origin'
    })
    .then(function (r) {
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.text();
    })
    .then(function () {
      if (typeof opts.onDone === 'function') opts.onDone();
    })
    .catch(function () {
      alert('Delete failed. Please try again.');
    });
  }

  // ── iframe load detect (edit complete = andar ki page forward kar gayi) ─
  function onFrameLoad() {
    $spin().hide();
    var path;
    try {
      path = this.contentWindow.location.pathname;
    } catch (e) {
      return; // cross-origin (nahi hona chahiye) -> user manually band kare
    }
    if (!path || path.indexOf('about:blank') !== -1) return;

    if (state.entryPath === null) {
      // pehli real page = target form / view page
      state.entryPath = path;
      return;
    }
    // EDIT mode mein: agar path badal gaya => save/forward ho gaya => band
    if (state.mode === 'edit' && path !== state.entryPath) {
      state.changed = true;
      close();
    }
  }

  $(function () {
    $('#actionModalFrame').on('load', onFrameLoad);

    $('#actionModalReload').on('click', function () {
      try { $('#actionModalFrame')[0].contentWindow.location.reload(); } catch (e) {}
    });

    // pura band hone par iframe clear (memory + agle open ke liye saaf)
    $('#actionModal').on('hidden.bs.modal', function () {
      $('#actionModalFrame').attr('src', 'about:blank');
    });
  });

  window.LedgerAction = { open: open, close: close, del: del };
})();
</script>