<?php

/**
 * Team workload dashboard — visual workload map for support team leads.
 * Tab "Current": agent cards with open tickets, queue at top.
 * Tab "Performance": resolved per agent in a selectable period.
 */

$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-team"
     data-team-workload-url="<?php e(lurl('helpdesk/team-workload-data')); ?>"
     data-label-not-assigned="<?php e(t('Not assigned')); ?>"
     data-label-queue="<?php e(t('Queue')); ?>"
     data-label-tickets="<?php e(t('Tickets')); ?>"
     data-label-error="<?php e(t('Could not load team dashboard.')); ?>"
     data-label-empty="<?php e(t('No team data available.')); ?>"
     data-label-critical="<?php e(t('Critical (>48h open)')); ?>"
     data-ticket-base-url="<?php e(lurl('helpdesk/ticket/')); ?>"
     data-debitor-base-url="<?php e(lurl('helpdesk/debitor/')); ?>"
     data-label-ticket="<?php e(t('Ticket')); ?>"
     data-label-customer="<?php e(t('Debtor')); ?>"
     data-label-description="<?php e(t('Description')); ?>"
     data-label-category="<?php e(t('Category')); ?>"
     data-label-last-activity="<?php e(t('Last activity')); ?>"
     data-label-resolution-time="<?php e(t('Resolution time')); ?>"
     data-label-top-customers="<?php e(t('Top customers')); ?>"
     data-label-top-categories="<?php e(t('Top categories')); ?>"
     data-label-trend-up="<?php e(t('trend_tooltip_up')); ?>"
     data-label-trend-down="<?php e(t('trend_tooltip_down')); ?>"
     data-label-trend-hint="<?php e(t('Trend based on last {days} days')); ?>"
>
  <section>
    <?php
    $titlebar = [
        'title' => t('Team workload'),
        'actions' => [
            [
                'label' => t('Refresh data'),
                'type' => 'button',
                'name' => 'team-refresh',
                'class' => 'secondary outline',
            ],
        ],
    ];
    require templatePath('partials/app-details-titlebar.phtml');
    ?>

    <div class="helpdesk-team-dashboard">
      <div id="team-loading">
        <?php for ($i = 0; $i < 3; $i++): ?>
          <div class="helpdesk-team-skeleton-card">
            <div class="helpdesk-team-skeleton-header">
              <div class="helpdesk-skeleton helpdesk-team-skeleton-avatar"></div>
              <div class="helpdesk-skeleton helpdesk-team-skeleton-name"></div>
              <div class="helpdesk-skeleton helpdesk-team-skeleton-badge"></div>
            </div>
            <div class="helpdesk-team-skeleton-rows">
              <?php for ($j = 0; $j < 3; $j++): ?>
                <div class="helpdesk-team-skeleton-row">
                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-sm"></div>
                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-md"></div>
                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-lg"></div>
                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-sm"></div>
                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-sm"></div>
                </div>
              <?php endfor; ?>
            </div>
          </div>
        <?php endfor; ?>
      </div>

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

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

      <div id="team-content" hidden>
        <div class="app-tabs" data-tabs data-app-component="tabs" data-tabs-param="tab" data-tabs-storage-key="helpdesk-team-tabs-v1">
          <div class="app-tabs-nav">
            <button type="button" data-tab="current" data-tab-default><?php e(t('Current')); ?></button>
            <button type="button" data-tab="performance"><?php e(t('Historical')); ?></button>
          </div>

          <div data-tab-panel="current">
            <div id="team-current-cards"></div>
          </div>

          <div data-tab-panel="performance" class="helpdesk-team-performance-panel">
            <div class="helpdesk-segment-control" id="team-period-selector">
              <?php foreach ($periods as $p): ?>
                <input type="radio" name="team-period" id="team-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 30): ?> checked<?php endif; ?>>
                <label for="team-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
              <?php endforeach; ?>
            </div>

            <div id="team-performance-cards"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
