update

resources/views/orders/list.php

@@ -23,6 +23,8 @@
   </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 : [],
@@ -60,4 +62,79 @@
 })();
 </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>