<?php
declare(strict_types=1);

require_once __DIR__ . '/home_slider_helpers.php';

$mesesCortosBanners = [
    1 => 'ENE', 2 => 'FEB', 3 => 'MAR', 4 => 'ABR', 5 => 'MAY', 6 => 'JUN',
    7 => 'JUL', 8 => 'AGO', 9 => 'SEP', 10 => 'OCT', 11 => 'NOV', 12 => 'DIC',
];

$fechaReferenciaBanners = new DateTimeImmutable('today');
$mesActualBanners = $fechaReferenciaBanners->modify('first day of this month');
$mesSiguienteBanners = $mesActualBanners->modify('+1 month');
$mesesPermitidosBanners = [
    $mesActualBanners->format('Y-m'),
    $mesSiguienteBanners->format('Y-m'),
];

$bannersCapacitaciones = [];

foreach ($capacitaciones as $item) {
    $capacitacion = buildCapacitacionItem((array) $item);
    if ($capacitacion === null) {
        continue;
    }

    if (!in_array($capacitacion['fecha']->format('Y-m'), $mesesPermitidosBanners, true)) {
        continue;
    }

    $bannersCapacitaciones[] = $capacitacion;
}

sortCapacitacionesChronologically($bannersCapacitaciones);
?>

<section class="home-slider home-slider--cap-banners" id="inicio-capacitaciones-destacadas" aria-labelledby="capacitaciones-banners-title">
  <div class="cap-banners">
    <div class="cap-banners__head">
      <h2 id="capacitaciones-banners-title" class="u-visually-hidden">Capacitaciones destacadas</h2>

      <div class="cap-banners__controls">
        <button type="button" class="cap-banners__arrow" data-cap-banner-prev aria-label="Banner anterior">
          <span aria-hidden="true">&lt;</span>
        </button>
        <button type="button" class="cap-banners__arrow" data-cap-banner-next aria-label="Siguiente banner">
          <span aria-hidden="true">&gt;</span>
        </button>
      </div>
    </div>

    <div class="cap-banners__viewport" data-cap-banner-viewport>
      <div class="cap-banners__track" data-cap-banner-track>
        <?php foreach ($bannersCapacitaciones as $banner): ?>
          <article class="cap-banner" style="--cap-banner-accent: <?= htmlspecialchars((string) $banner['acento'], ENT_QUOTES, 'UTF-8') ?>;">
            <div class="cap-banner__content">
              <div class="cap-banner__chips">
                <span><?= htmlspecialchars((string) $banner['categoria'], ENT_QUOTES, 'UTF-8') ?></span>
                <span><?= htmlspecialchars((string) $banner['modalidad'], ENT_QUOTES, 'UTF-8') ?></span>
              </div>

              <h3><?= htmlspecialchars((string) $banner['titulo'], ENT_QUOTES, 'UTF-8') ?></h3>
              <p><?= htmlspecialchars((string) $banner['descripcion'], ENT_QUOTES, 'UTF-8') ?></p>

              <div class="cap-banner__meta">
                <span><?= htmlspecialchars($banner['fecha']->format('d/m/Y'), ENT_QUOTES, 'UTF-8') ?></span>
                <span><?= htmlspecialchars((string) $banner['hora'], ENT_QUOTES, 'UTF-8') ?></span>
                <?php $detalleMeta = trim((string) ($banner['capacitador'] !== '' ? $banner['capacitador'] : $banner['plataforma'])); ?>
                <?php if ($detalleMeta !== ''): ?>
                  <span><?= htmlspecialchars($detalleMeta, ENT_QUOTES, 'UTF-8') ?></span>
                <?php endif; ?>
              </div>

              <a
                class="cap-banner__link"
                href="<?= htmlspecialchars((string) $banner['boton_url'], ENT_QUOTES, 'UTF-8') ?>"
                target="_blank"
                rel="noopener noreferrer"
              >
                <?= htmlspecialchars((string) $banner['boton_texto'], ENT_QUOTES, 'UTF-8') ?>
              </a>
            </div>

            <div class="cap-banner__aside">
              <div class="cap-banner__date-card">
                <strong><?= htmlspecialchars($banner['fecha']->format('d'), ENT_QUOTES, 'UTF-8') ?></strong>
                <span><?= htmlspecialchars($mesesCortosBanners[(int) $banner['fecha']->format('n')], ENT_QUOTES, 'UTF-8') ?></span>
              </div>

              <?php if ((string) $banner['cupo'] !== ''): ?>
                <div class="cap-banner__capacity">
                  <span>Cupos disponibles</span>
                  <strong><?= htmlspecialchars((string) $banner['cupo'], ENT_QUOTES, 'UTF-8') ?></strong>
                </div>
              <?php endif; ?>

              <?php if ((string) $banner['qr_imagen'] !== ''): ?>
                <div class="cap-banner__qr">
                  <span>Código QR</span>
                  <img
                    src="<?= htmlspecialchars((string) $banner['qr_imagen'], ENT_QUOTES, 'UTF-8') ?>"
                    alt="<?= htmlspecialchars((string) ($banner['qr_alt'] !== '' ? $banner['qr_alt'] : 'QR de registro para ' . $banner['titulo']), ENT_QUOTES, 'UTF-8') ?>"
                    loading="lazy"
                    decoding="async"
                  >
                </div>
              <?php endif; ?>
            </div>
          </article>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="cap-banners__dots" data-cap-banner-dots></div>
  </div>
</section>