<?php $statusPanelList = is_array($statusPanel ?? null) ? $statusPanel : []; ?>
<?php $statusPanelTitle = 'Statusy'; ?>

<section class="order-show-layout">
  <?php require __DIR__ . '/../components/order-status-panel.php'; ?>

  <div class="order-show-main">
    <section class="card orders-list-page">
      <div class="orders-head">
        <div>
          <h2 class="section-title"><?= $e($t('orders.title')) ?></h2>
          <p class="muted mt-12"><?= $e($t('orders.description')) ?></p>
        </div>
      </div>
      <?php if (!empty($errorMessage)): ?>
        <div class="alert alert--warning mt-12" role="alert">
          <?= $e((string) $errorMessage) ?>
        </div>
      <?php endif; ?>
    </section>

    <?php require __DIR__ . '/../components/table-list.php'; ?>
  </div>
</section>

<script type="application/json" id="js-inline-status-config"><?= json_encode([
    'allStatuses' => is_array($allStatuses ?? null) ? $allStatuses : [],
    'statusColorMap' => is_array($statusColorMap ?? null) ? $statusColorMap : [],
    'csrfToken' => (string) ($csrfToken ?? ''),
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?></script>
<script src="/assets/js/modules/inline-status-change.js"></script>

<script>
(function () {
  var POPUP_GAP = 12;

  document.addEventListener('mouseenter', function (e) {
    if (!e.target || !e.target.closest) return;
    var wrap = e.target.closest('.orders-image-hover-wrap');
    if (!wrap) return;
    var popup = wrap.querySelector('.orders-image-hover-popup');
    if (!popup) return;

    var rect = wrap.getBoundingClientRect();
    var pw = 350;
    var ph = 350;

    var left = rect.right + POPUP_GAP;
    if (left + pw > window.innerWidth) {
      left = rect.left - pw - POPUP_GAP;
    }

    var top = rect.top + rect.height / 2 - ph / 2;
    if (top < 4) top = 4;
    if (top + ph > window.innerHeight - 4) top = window.innerHeight - 4 - ph;

    popup.style.left = left + 'px';
    popup.style.top = top + 'px';
  }, true);
})();
</script>


