{# ── Inline modal markup ── #}
<div class="modal fade" id="inline-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="inline-modal-title">Add</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="inline-modal-body">
        <div class="text-center py-4 text-muted">
          <div class="spinner-border spinner-border-sm" role="status"></div>
          Loading…
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="inline-modal-save">
          <span class="spinner-border spinner-border-sm d-none mr-1" id="inline-modal-spinner"></span>
          Save
        </button>
      </div>
    </div>
  </div>
</div>

{# ── Delete confirmation modal ── #}
<div class="modal fade" id="inline-delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body text-center py-4">
        <i class="fa-solid fa-triangle-exclamation text-danger fa-2x mb-3 d-block"></i>
        <h4>Delete items?</h4>
        <p class="text-muted mb-0" id="inline-delete-text"></p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary flex-grow-1" data-dismiss="modal">Cancel</button>
        <button class="btn btn-danger flex-grow-1" id="inline-delete-confirm">
          <span class="spinner-border spinner-border-sm d-none mr-1" id="inline-delete-spinner"></span>
          Delete
        </button>
      </div>
    </div>
  </div>
</div>

{# SortableJS for drag-and-drop reordering #}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script>

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

  // -------------------------------------------------------------------------
  // Load More state: tracks which pages are already loaded per inline
  // -------------------------------------------------------------------------
  var _loadedPages = {};   // { inlineId: [rows_html...] }
  var _loadedCount = {};   // { inlineId: currently_shown_count }

  // -------------------------------------------------------------------------
  // Reload a section (replaces entire card)
  // -------------------------------------------------------------------------
  function reloadSection(inlineId, listUrl) {
    $.get(listUrl).done(function (html) {
      var $section = $("#inline-" + inlineId);
      if (!$section.length) return;
      var $parsed = $("<div>").html(html);
      var $new = $parsed.find("#inline-" + inlineId);
      if (!$new.length) $new = $parsed;

      // If loaded page is empty (no data rows) — fallback to page 1
      if ($new.find("tbody tr[data-pk]").length === 0 && listUrl.indexOf("page=") !== -1 && listUrl.indexOf("page=1") === -1) {
        var fallbackUrl = listUrl.replace(/page=\d+/, "page=1");
        reloadSection(inlineId, fallbackUrl);
        return;
      }

      $section.replaceWith($new);
      delete _loadedPages[inlineId];
      delete _loadedCount[inlineId];
      bindAll();
      // Delay initSortable to let DOM settle and avoid stale reference issues
      setTimeout(function () { initSortable(inlineId); }, 50);
    }).fail(function (xhr) {
      console.error("Inline reload failed:", xhr.responseText);
    });
  }

  // -------------------------------------------------------------------------
  // Load More: appends next page rows to existing tbody
  // -------------------------------------------------------------------------
  function loadMore(inlineId, nextPage, baseUrl, search, pageSize, totalCount) {
    var url = baseUrl + "?page=" + nextPage + "&search=" + encodeURIComponent(search || "");
    var $btn = $(".inline-load-more[data-inline='" + inlineId + "']");
    $btn.prop("disabled", true).html('<i class="fa fa-spinner fa-spin mr-1"></i>Loading…');

    $.get(url).done(function (html) {
      var $parsed = $("<div>").html(html);
      // Extract only data rows (skip empty-state row)
      var $newRows = $parsed.find("#inline-" + inlineId + " tbody tr[data-pk]");
      var $newBtn  = $parsed.find(".inline-load-more");
      var $tbody   = $("#inline-" + inlineId + " tbody");
      var isSortable = $("#inline-sortable-" + inlineId).length > 0;

      // If sortable: inject drag handle cell into each new row before inserting
      if (isSortable) {
        $newRows.each(function () {
          var $tr = $(this);
          // Only add if not already there
          if (!$tr.find(".inline-drag-handle").length) {
            $tr.prepend(
              '<td class="pr-0 inline-drag-handle" style="cursor:grab;color:#aaa;width:32px">'
              + '<i class="fa fa-grip-vertical"></i></td>'
            );
          }
        });
      }

      // Append new rows
      $tbody.append($newRows);

      // Update count text
      var currentShown = $tbody.find("tr[data-pk]").length;
      $("#inline-count-" + inlineId).text(
        "Showing 1–" + currentShown + " of " + totalCount
      );

      // Hide pagination when all rows are now shown
      if (currentShown >= totalCount) {
        $(".inline-pagination[data-inline='" + inlineId + "']").hide();
      }

      // Update or remove Load More button
      if ($newBtn.length) {
        $(".inline-load-more[data-inline='" + inlineId + "']").replaceWith($newBtn);
        bindLoadMore();
      } else {
        $(".inline-load-more[data-inline='" + inlineId + "']").remove();
      }

      bindAll();
      initSortable(inlineId);  // re-init so new rows are draggable
    }).fail(function (xhr) {
      console.error("Load more failed:", xhr.responseText);
      $btn.prop("disabled", false).html(
        '<i class="fa fa-chevron-down mr-1"></i>Load more'
      );
    });
  }

  // -------------------------------------------------------------------------
  // Modal helpers
  // -------------------------------------------------------------------------
  var _currentInlineId = "";
  var _currentListUrl  = "";

  function openModal(title, formUrl, inlineId, listUrl) {
    _currentInlineId = inlineId;
    _currentListUrl  = listUrl;
    $("#inline-modal-title").text(title);
    $("#inline-modal-body").html(
      '<div class="text-center py-4 text-muted">' +
      '<div class="spinner-border spinner-border-sm"></div> Loading…</div>'
    );
    $("#inline-modal").modal("show");
    $.get(formUrl).done(function (html) {
      $("#inline-modal-body").html(html);
    }).fail(function (xhr) {
      $("#inline-modal-body").html(
        '<div class="alert alert-danger">' + (xhr.responseText || "Load failed") + "</div>"
      );
    });
  }

  $(document).on("click", "#inline-modal .close, #inline-modal .btn-secondary", function () {
    $("#inline-modal").modal("hide");
  });

  // -------------------------------------------------------------------------
  // Save
  // -------------------------------------------------------------------------
  $(document).on("click", "#inline-modal-save", function () {
    var $form = $("#inline-modal-form");
    if (!$form.length) return;

    var saveUrl = $form.data("save-url");
    var listUrl = $form.data("list-url");
    var inlineId = listUrl ? listUrl.split("/inline/")[1].split("/")[0] : _currentInlineId;

    $("#inline-modal-spinner").removeClass("d-none");
    $("#inline-modal-save").prop("disabled", true);

    $.ajax({
      url: saveUrl, method: "POST",
      data: new FormData($form[0]),
      processData: false, contentType: false,
    }).done(function (resp) {
      if (resp && resp.ok) {
        var _reloadInlineId = inlineId;
        var _reloadUrl = listUrl || _currentListUrl;
        $("#inline-modal").one("hidden.bs.modal", function () {
          reloadSection(_reloadInlineId, _reloadUrl);
        });
        $("#inline-modal").modal("hide");
      } else {
        alert("Error: " + JSON.stringify(resp));
      }
    }).fail(function (xhr) {
      if (xhr.status === 422) {
        $("#inline-modal-body").html(xhr.responseText);
      } else {
        alert("Save failed: " + (xhr.responseJSON && xhr.responseJSON.error || xhr.responseText));
      }
    }).always(function () {
      $("#inline-modal-spinner").addClass("d-none");
      $("#inline-modal-save").prop("disabled", false);
    });
  });

  // -------------------------------------------------------------------------
  // Delete
  // -------------------------------------------------------------------------
  var _pendingDelete = { url: "", listUrl: "", pks: [], inlineId: "" };

  $(document).on("click", "#inline-delete-confirm", function () {
    var $spinner = $("#inline-delete-spinner"), $btn = $(this);
    $spinner.removeClass("d-none"); $btn.prop("disabled", true);
    $.ajax({
      url: _pendingDelete.url, method: "DELETE",
      contentType: "application/json",
      data: JSON.stringify({ pks: _pendingDelete.pks }),
    }).done(function (resp) {
      var _delInlineId = _pendingDelete.inlineId;
      var _delBase     = _pendingDelete.listUrl.split("?")[0];
      var _delSearch   = _pendingDelete.search || "";
      $("#inline-delete-modal").one("hidden.bs.modal", function () {
        reloadSection(_delInlineId, _delBase + "?page=1&search=" + encodeURIComponent(_delSearch));
      });
      $("#inline-delete-modal").modal("hide");
    }).fail(function (xhr) {
      alert("Delete failed: " + (xhr.responseJSON && xhr.responseJSON.error || xhr.responseText));
    }).always(function () {
      $spinner.addClass("d-none"); $btn.prop("disabled", false);
    });
  });

  // -------------------------------------------------------------------------
  // Drag-and-drop reordering via SortableJS
  // -------------------------------------------------------------------------
  var _sortableInstances = {};

  function initSortable(inlineId) {
    var $table = $("#inline-sortable-" + inlineId);
    if (!$table.length) return;

    var reorderUrl = $table.data("reorder-url");
    if (!reorderUrl) return;

    // Destroy previous instance safely
    if (_sortableInstances[inlineId]) {
      try { _sortableInstances[inlineId].destroy(); } catch (e) {}
      _sortableInstances[inlineId] = null;
    }

    var tbody = document.getElementById("inline-tbody-" + inlineId);
    if (!tbody) return;

    _sortableInstances[inlineId] = Sortable.create(tbody, {
      handle: ".inline-drag-handle",
      animation: 150,
      ghostClass: "table-active",
      onEnd: function (evt) {
        // Collect all PKs in new order
        var pks = [];
        $(tbody).find("tr[data-pk]").each(function () {
          pks.push($(this).data("pk"));
        });

        // Send to server
        $.ajax({
          url: reorderUrl,
          method: "POST",
          contentType: "application/json",
          data: JSON.stringify({ pks: pks }),
        }).done(function () {
          // Update visual order numbers if visible
          $(tbody).find("tr[data-pk]").each(function (i) {
            $(this).find("td:nth-child(2)").filter(function () {
              return $(this).hasClass("text-center") && $(this).hasClass("text-muted");
            }).text(i + 1);
          });
        }).fail(function (xhr) {
          console.error("Reorder failed:", xhr.responseText);
          // Reload to restore correct order
          reloadSection(inlineId, "/admin/" + reorderUrl.split("/admin/")[1].split("/reorder")[0] + "/list");
        });
      }
    });
  }

  function initAllSortables() {
    $("[id^='inline-sortable-']").each(function () {
      var inlineId = this.id.replace("inline-sortable-", "");
      initSortable(inlineId);
    });
  }

  // -------------------------------------------------------------------------
  // Event binding
  // -------------------------------------------------------------------------
  function bindLoadMore() {
    $(".inline-load-more").off("click.loadmore").on("click.loadmore", function () {
      var $btn       = $(this);
      var iid        = $btn.data("inline");
      var nextPg     = parseInt($btn.data("next-page"), 10);
      var baseUrl    = $btn.data("base-url");
      var search     = $btn.data("search") || "";
      var pgSize     = $btn.data("page-size");
      var totalCount = parseInt($btn.data("total"), 10);
      loadMore(iid, nextPg, baseUrl, search, pgSize, totalCount);
    });
  }

  function bindAll() {
    // Add
    $(".inline-add-btn").off("click.inline").on("click.inline", function () {
      var $btn = $(this);
      var iid  = $btn.data("inline");
      var formUrl = $btn.data("form-url");
      var listUrl = formUrl.replace(/\/form.*$/, "/list");
      openModal("Add " + $btn.data("label"), formUrl, iid, listUrl);
    });

    // Edit
    $(".inline-edit-btn").off("click.inline").on("click.inline", function (e) {
      e.preventDefault();
      var $a = $(this), iid = $a.data("inline");
      var formUrl = $a.data("form-url");
      var listUrl = formUrl.split("?")[0].replace(/\/form$/, "/list");
      openModal("Edit " + $a.data("label"), formUrl, iid, listUrl);
    });

    // Pagination
    $(".inline-page-link").off("click.inline").on("click.inline", function (e) {
      e.preventDefault();
      var $a = $(this);
      reloadSection($a.data("inline"), $a.data("url"));
    });

    // Search
    $(".inline-search-btn").off("click.inline").on("click.inline", function () {
      submitSearch($(this).data("inline"));
    });
    $(".inline-search-input").off("keydown.inline").on("keydown.inline", function (e) {
      if (e.which === 13) { e.preventDefault(); submitSearch($(this).data("inline")); }
    });
    $(".inline-search-clear").off("click.inline").on("click.inline", function () {
      reloadSection($(this).data("inline"), $(this).data("base-url") + "?search=&page=1");
    });

    // Select all / checkboxes
    $(".inline-select-all").off("change.inline").on("change.inline", function () {
      var iid = $(this).data("inline"), checked = this.checked;
      $(".inline-select-box[data-inline='" + iid + "']").prop("checked", checked);
      updateBulkBtn(iid);
    });
    $(".inline-select-box").off("change.inline").on("change.inline", function () {
      updateBulkBtn($(this).data("inline"));
    });

    // Bulk delete
    $(".inline-bulk-delete").off("click.inline").on("click.inline", function () {
      var $btn = $(this), iid = $btn.data("inline");
      var pks = $(".inline-select-box[data-inline='" + iid + "']:checked")
                  .map(function () { return $(this).data("pk"); }).get();
      if (!pks.length) return;
      var $searchInput = $(".inline-search-input[data-inline='" + iid + "']");
      _pendingDelete = {
        url:      $btn.data("delete-url"),
        listUrl:  $btn.data("list-url"),
        pks:      pks,
        inlineId: iid,
        search:   $searchInput.length ? $searchInput.val() : "",
      };
      $("#inline-delete-text").text("This will permanently delete " + pks.length + " item(s).");
      $("#inline-delete-modal").modal("show");
    });

    // Load More
    bindLoadMore();
  }

  function submitSearch(iid) {
    var $input = $(".inline-search-input[data-inline='" + iid + "']");
    var term = encodeURIComponent($input.val().trim());
    reloadSection(iid, $input.data("base-url") + "?search=" + term + "&page=1");
  }

  function updateBulkBtn(iid) {
    var count = $(".inline-select-box[data-inline='" + iid + "']:checked").length;
    $(".inline-bulk-delete[data-inline='" + iid + "']").toggleClass("d-none", count === 0);
  }

  // Collapse icons
  $(document).on("show.bs.collapse", ".inline-section .collapse", function () {
    $("#inline-icon-" + this.id.replace("inline-body-", "")).css("transform", "rotate(0deg)");
  });
  $(document).on("hide.bs.collapse", ".inline-section .collapse", function () {
    $("#inline-icon-" + this.id.replace("inline-body-", "")).css("transform", "rotate(-90deg)");
  });

  $(document).ready(function () {
    bindAll();
    initAllSortables();
  });

}(jQuery));
</script>