orderPRO/resources/views/orders/list.php

<?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="mt-12"><?php $type='warning'; $message=(string) $errorMessage; $dismissible=true; include dirname(__DIR__) . '/components/alert.php'; ?></div>
      <?php endif; ?>
    </section>

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

<?php require __DIR__ . '/partials/preview-modal.php'; ?>

<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>

<script>
(function () {
  var overlay = document.getElementById('order-preview-overlay');
  var body = document.getElementById('order-preview-body');
  var detailsLink = document.getElementById('order-preview-details-link');
  if (!overlay || !body) return;

  function openPreview(orderId) {
    body.innerHTML = '<div class="order-preview-loading">Ladowanie...</div>';
    detailsLink.href = '/orders/' + orderId;
    overlay.style.display = 'flex';

    fetch('/api/orders/' + orderId + '/preview', { credentials: 'same-origin' })
      .then(function (res) {
        if (!res.ok) throw new Error('HTTP ' + res.status);
        return res.text();
      })
      .then(function (html) {
        body.innerHTML = html;
      })
      .catch(function () {
        body.innerHTML = '<div class="order-preview-loading">Nie udalo sie zaladowac podgladu.</div>';
      });
  }

  function closePreview() {
    overlay.style.display = 'none';
    body.innerHTML = '';
  }

  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.js-order-preview-btn');
    if (btn) {
      e.preventDefault();
      e.stopPropagation();
      var orderId = btn.getAttribute('data-order-id');
      if (orderId) openPreview(orderId);
      return;
    }

    if (e.target.id === 'order-preview-close' || e.target.id === 'order-preview-close-btn') {
      closePreview();
      return;
    }

    if (e.target === overlay) {
      closePreview();
      return;
    }

    var copyBtn = e.target.closest('.copy-field__btn');
    if (copyBtn) {
      var value = copyBtn.getAttribute('data-copy-value') || '';
      if (value === '') return;
      navigator.clipboard.writeText(value).then(function () {
        var copyIc = copyBtn.querySelector('.copy-icon');
        var checkIc = copyBtn.querySelector('.check-icon');
        if (copyIc) copyIc.style.display = 'none';
        if (checkIc) checkIc.style.display = '';
        copyBtn.classList.add('is-copied');
        setTimeout(function () {
          if (copyIc) copyIc.style.display = '';
          if (checkIc) checkIc.style.display = 'none';
          copyBtn.classList.remove('is-copied');
        }, 1500);
      });
    }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && overlay.style.display !== 'none') {
      closePreview();
    }
  });
})();
</script>