orderPRO/resources/views/products/index.php

<section class="card">
  <div class="page-head">
    <div>
      <h1><?= $e($t('products.title')) ?></h1>
      <p class="muted"><?= $e($t('products.description')) ?></p>
    </div>
  </div>
</section>

<?php if (!empty($errorMessage)): ?>
  <section class="card mt-16">
    <div class="alert alert--danger" role="alert">
      <?= $e((string) $errorMessage) ?>
    </div>
  </section>
<?php endif; ?>

<?php if (!empty($successMessage)): ?>
  <section class="card mt-16">
    <div class="alert alert--success" role="status">
      <?= $e((string) $successMessage) ?>
    </div>
  </section>
<?php endif; ?>

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

<?php
$integrations = is_array($shopProIntegrations ?? null) ? $shopProIntegrations : [];
?>
<div class="modal-backdrop" data-modal-backdrop="product-image-preview-modal" hidden>
  <div class="modal modal--image-preview" role="dialog" aria-modal="true" aria-labelledby="product-image-preview-title">
    <div class="modal__header">
      <h3 id="product-image-preview-title">Podglad zdjecia</h3>
      <button type="button" class="btn btn--secondary" data-close-modal="product-image-preview-modal">Zamknij</button>
    </div>
    <div class="modal__body">
      <img src="" alt="" class="product-image-preview__img" data-product-image-preview-target>
    </div>
  </div>
</div>

<div class="modal-backdrop" data-modal-backdrop="product-import-modal" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="product-import-modal-title">
    <div class="modal__header">
      <h3 id="product-import-modal-title"><?= $e($t('products.import.title')) ?></h3>
      <button type="button" class="btn btn--secondary" data-close-modal="product-import-modal"><?= $e($t('products.import.close')) ?></button>
    </div>

    <form action="/products/import/shoppro" method="post" class="modal__body">
      <input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">

      <label class="form-field">
        <span class="field-label"><?= $e($t('products.import.integration')) ?></span>
        <select class="form-control" name="integration_id" required>
          <option value=""><?= $e($t('products.import.integration_placeholder')) ?></option>
          <?php foreach ($integrations as $integration): ?>
            <option value="<?= $e((string) ($integration['id'] ?? 0)) ?>">
              <?= $e((string) ($integration['name'] ?? '')) ?> (ID: <?= $e((string) ($integration['id'] ?? 0)) ?>)
            </option>
          <?php endforeach; ?>
        </select>
      </label>
      <?php if (empty($integrations)): ?>
        <p class="muted"><?= $e($t('products.import.no_integrations')) ?></p>
      <?php endif; ?>

      <div class="form-field">
        <span class="field-label"><?= $e($t('products.import.mode')) ?></span>
        <label class="field-inline">
          <input type="radio" name="import_mode" value="all" checked>
          <?= $e($t('products.import.mode_all')) ?>
        </label>
        <label class="field-inline">
          <input type="radio" name="import_mode" value="single">
          <?= $e($t('products.import.mode_single')) ?>
        </label>
      </div>

      <label class="form-field" data-single-id-wrap hidden>
        <span class="field-label"><?= $e($t('products.import.external_id')) ?></span>
        <input class="form-control" type="number" min="1" name="external_product_id" data-single-id-input>
      </label>

      <label class="form-field">
        <span class="field-label">
          <input type="checkbox" name="import_variants" value="1">
          <?= $e($t('products.import.with_variants')) ?>
        </span>
        <small class="muted"><?= $e($t('products.import.with_variants_hint')) ?></small>
      </label>

      <div class="form-actions mt-16">
        <button type="submit" class="btn btn--primary"<?= empty($integrations) ? ' disabled' : '' ?>><?= $e($t('products.import.submit')) ?></button>
      </div>
    </form>
  </div>
</div>

<script>
(function() {
  var openBtn = document.querySelector('[data-open-modal="product-import-modal"]');
  var backdrop = document.querySelector('[data-modal-backdrop="product-import-modal"]');
  var closeBtn = document.querySelector('[data-close-modal="product-import-modal"]');
  if (!openBtn || !backdrop || !closeBtn) return;

  var modeInputs = backdrop.querySelectorAll('input[name="import_mode"]');
  var singleIdWrap = backdrop.querySelector('[data-single-id-wrap]');
  var singleIdInput = backdrop.querySelector('[data-single-id-input]');

  function syncMode() {
    var mode = 'all';
    modeInputs.forEach(function(input) {
      if (input.checked) mode = input.value;
    });

    var isSingle = mode === 'single';
    if (singleIdWrap) singleIdWrap.hidden = !isSingle;
    if (singleIdInput) {
      singleIdInput.required = isSingle;
      if (!isSingle) singleIdInput.value = '';
    }
  }

  openBtn.addEventListener('click', function() {
    backdrop.hidden = false;
    syncMode();
  });

  closeBtn.addEventListener('click', function() {
    backdrop.hidden = true;
  });

  backdrop.addEventListener('click', function(event) {
    if (event.target === backdrop) {
      backdrop.hidden = true;
    }
  });

  modeInputs.forEach(function(input) {
    input.addEventListener('change', syncMode);
  });
})();

(function() {
  var previewBackdrop = document.querySelector('[data-modal-backdrop="product-image-preview-modal"]');
  if (!previewBackdrop) return;

  var previewImage = previewBackdrop.querySelector('[data-product-image-preview-target]');
  var closeBtn = previewBackdrop.querySelector('[data-close-modal="product-image-preview-modal"]');
  if (!previewImage || !closeBtn) return;

  function closePreview() {
    previewBackdrop.hidden = true;
    previewImage.setAttribute('src', '');
  }

  document.addEventListener('click', function(event) {
    var trigger = event.target.closest('[data-product-image-preview]');
    if (!trigger) return;

    var imageUrl = trigger.getAttribute('data-product-image-preview') || '';
    if (imageUrl === '') return;

    previewImage.setAttribute('src', imageUrl);
    previewBackdrop.hidden = false;
  });

  closeBtn.addEventListener('click', closePreview);

  previewBackdrop.addEventListener('click', function(event) {
    if (event.target === previewBackdrop) {
      closePreview();
    }
  });
})();
</script>