<?php

/**
 * Risk Radar — portfolio view of customer risk scores.
 */

$periods = [30, 90, 180, 365];
$periodLabels = [
    30 => t('30 days'),
    90 => t('90 days'),
    180 => t('6 months'),
    365 => t('1 year'),
];
?>
<div class="app-details-container"
     data-app-component="helpdesk-risk-radar"
     data-risk-radar-url="<?php e(lurl('helpdesk/risk-radar-data')); ?>"
     data-debitor-base-url="<?php e(lurl('helpdesk/debitor/')); ?>"
     data-label-high="<?php e(t('High risk')); ?>"
     data-label-medium="<?php e(t('Medium risk')); ?>"
     data-label-low="<?php e(t('Low risk')); ?>"
     data-label-error="<?php e(t('Could not load risk radar.')); ?>"
     data-label-empty="<?php e(t('No risk data available.')); ?>"
     data-label-truncated="<?php e(t('Data may be incomplete. Not all tickets could be loaded.')); ?>"
     data-label-sla="<?php e(t('SLA overdue')); ?>"
     data-label-net-flow="<?php e(t('Net flow')); ?>"
     data-label-open-pressure="<?php e(t('Open pressure')); ?>"
     data-label-inactivity="<?php e(t('Inactivity')); ?>"
     data-label-trend="<?php e(t('Trend')); ?>"
     data-label-why="<?php e(t('Why at risk')); ?>"
     data-label-open="<?php e(t('open')); ?>"
     data-label-overdue="<?php e(t('overdue')); ?>"
     data-label-net="<?php e(t('net')); ?>"
     data-label-critical="<?php e(t('critical')); ?>"
     data-label-ticket="<?php e(t('Ticket')); ?>"
     data-label-status="<?php e(t('Status')); ?>"
     data-label-age="<?php e(t('Age')); ?>"
     data-label-more-than-resolved="<?php e(t('more than resolved')); ?>"
     data-label-sla-breaches="<?php e(t('SLA breaches')); ?>"
     data-label-oldest-ticket="<?php e(t('Oldest ticket')); ?>"
     data-label-tickets="<?php e(t('Tickets')); ?>"
     data-label-score="<?php e(t('Risk score')); ?>"
>
  <section>
    <?php
    $titlebar = [
        'title' => t('Risk radar'),
        'actions' => [
            [
                'label' => t('Refresh data'),
                'type' => 'button',
                'name' => 'radar-refresh',
                'class' => 'secondary outline',
            ],
        ],
    ];
    require templatePath('partials/app-details-titlebar.phtml');
    ?>

    <div class="helpdesk-risk-radar-dashboard">
      <div class="helpdesk-risk-radar-toolbar">
        <div class="helpdesk-segment-control" id="radar-period-selector">
          <?php foreach ($periods as $p): ?>
            <input type="radio" name="radar-period" id="radar-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>>
            <label for="radar-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
          <?php endforeach; ?>
        </div>
        <div class="helpdesk-risk-legend">
          <ul class="helpdesk-risk-legend-list" aria-label="<?php e(t('Risk score')); ?>">
            <li class="helpdesk-risk-legend-item">
              <span class="helpdesk-risk-legend-dot helpdesk-risk-level-high" aria-hidden="true"></span>
              <span><?php e(t('High risk (55-100)')); ?></span>
            </li>
            <li class="helpdesk-risk-legend-item">
              <span class="helpdesk-risk-legend-dot helpdesk-risk-level-medium" aria-hidden="true"></span>
              <span><?php e(t('Medium risk (25-54)')); ?></span>
            </li>
            <li class="helpdesk-risk-legend-item">
              <span class="helpdesk-risk-legend-dot helpdesk-risk-level-low" aria-hidden="true"></span>
              <span><?php e(t('Low risk (0-24)')); ?></span>
            </li>
          </ul>
        </div>
      </div>

      <div id="radar-loading">
        <div class="helpdesk-risk-radar-grid">
          <?php for ($i = 0; $i < 6; $i++): ?>
            <div class="helpdesk-skeleton" style="height: 5rem; border-radius: var(--app-radius, 0.375rem);"></div>
          <?php endfor; ?>
        </div>
      </div>

      <div id="radar-error" class="notice" data-variant="error" role="alert" hidden>
        <p><?php e(t('Could not load risk radar.')); ?></p>
      </div>

      <div id="radar-empty" class="notice" data-variant="info" role="status" hidden>
        <p><?php e(t('No risk data available.')); ?></p>
      </div>

      <div id="radar-truncated" class="notice" data-variant="warning" role="status" hidden>
        <p><?php e(t('Data may be incomplete. Not all tickets could be loaded.')); ?></p>
      </div>

      <div id="radar-content" hidden>
        <div id="radar-cards" class="helpdesk-risk-radar-grid"></div>
      </div>

      <dialog id="radar-detail-dialog" aria-labelledby="radar-detail-title">
        <article class="app-dialog-lg">
          <header>
            <h2 id="radar-detail-title"></h2>
            <button type="button" class="close" aria-label="<?php e(t('Close')); ?>"></button>
          </header>
          <div id="radar-detail-body"></div>
        </article>
      </dialog>
    </div>
  </section>
</div>
