<?php
$panelItems = is_array($statusPanelList ?? null) ? $statusPanelList : [];
$panelTitle = trim((string) ($statusPanelTitle ?? 'Statusy'));
?>

<details class="card order-statuses-side" id="js-status-panel">
  <summary class="order-statuses-side__title">
    <?= $e($panelTitle) ?>
    <svg class="order-statuses-side__arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 9l6 6 6-6"/>
    </svg>
  </summary>
  <div class="order-statuses-side__body">
    <?php foreach ($panelItems as $group): ?>
      <?php $groupItems = is_array($group['items'] ?? null) ? $group['items'] : []; ?>
      <div class="order-status-group">
        <?php if ((string) ($group['name'] ?? '') !== ''): ?>
          <div class="order-status-group__name"><?= $e((string) ($group['name'] ?? '')) ?></div>
        <?php endif; ?>
        <?php foreach ($groupItems as $item): ?>
          <?php
          $tone = (string) ($item['tone'] ?? 'neutral');
          $color = (string) ($item['color_hex'] ?? '#64748b');
          $rowClass = 'order-status-row tone-' . $tone . (!empty($item['is_active']) ? ' is-active' : '');
          $url = trim((string) ($item['url'] ?? ''));
          ?>
          <?php if ($url !== ''): ?>
            <a href="<?= $e($url) ?>" class="<?= $e($rowClass) ?>" style="--status-color: <?= $e($color) ?>;">
              <span class="order-status-row__label"><?= $e((string) ($item['label'] ?? '')) ?></span>
              <span class="order-status-row__count"><?= $e((string) ((int) ($item['count'] ?? 0))) ?></span>
            </a>
          <?php else: ?>
            <div class="<?= $e($rowClass) ?>" style="--status-color: <?= $e($color) ?>;">
              <span class="order-status-row__label"><?= $e((string) ($item['label'] ?? '')) ?></span>
              <span class="order-status-row__count"><?= $e((string) ((int) ($item['count'] ?? 0))) ?></span>
            </div>
          <?php endif; ?>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
  </div>
</details>

<script>
(function () {
  var panel = document.getElementById('js-status-panel');
  if (!panel) return;
  var mq = window.matchMedia('(max-width: 768px)');

  function applyMode(mobile) {
    if (mobile) {
      panel.removeAttribute('open');
    } else {
      panel.setAttribute('open', '');
    }
  }

  applyMode(mq.matches);

  panel.querySelector('summary').addEventListener('click', function (e) {
    if (!mq.matches) {
      e.preventDefault();
    }
  });

  mq.addEventListener('change', function (e) {
    applyMode(e.matches);
  });
})();
</script>

