<?php
\defined('_JEXEC') or die;

use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;

$items = $items ?? [];

$heading = $params->get('heading', 'Agenda Pimpinan');
$showAllUrl = $params->get('show_all_url', 'index.php?option=com_agenda_pimpinan&view=agendas');
$showAllUrl = Route::_($showAllUrl);
?>

<div class="mod-agenda-pimpinan">
  <div class="ap-card">
    <div class="ap-header">
      <span class="ap-header-icon" aria-hidden="true">📅</span>
      <span class="ap-header-title"><?php echo htmlspecialchars($heading, ENT_QUOTES, 'UTF-8'); ?></span>
    </div>

    <div class="ap-body">
      <?php if (empty($items)) : ?>
        <div class="ap-empty">
          <?php echo Text::_('Belum ada agenda'); ?>
        </div>
      <?php else : ?>
        <ul class="ap-list" role="list">
          <?php foreach ($items as $it) :
            // tanggal (DATE) -> day + month
            $day = '';
            $mon = '';
            if (!empty($it->tanggal)) {
              $ts  = strtotime((string) $it->tanggal);
              if ($ts) {
                $day = date('d', $ts);
                $mon = strtoupper(date('M', $ts)); // NOV, DEC, dll
              }
            }

            $title = (string) ($it->title ?? '');
            $lok   = (string) ($it->lokasi ?? '');
            $jenis = (string) ($it->jenis_acara ?? '');

            $id = (int) ($it->id ?? 0);

            // Klik item memunculkan modal: data-* dipakai JS modal
          ?>
          <li class="ap-item">
            <button
              type="button"
              class="ap-item-btn"
              data-ap-id="<?php echo $id; ?>"
              data-ap-title="<?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?>"
              data-ap-date="<?php echo htmlspecialchars((string) ($it->tanggal ?? ''), ENT_QUOTES, 'UTF-8'); ?>"
              data-ap-location="<?php echo htmlspecialchars($lok, ENT_QUOTES, 'UTF-8'); ?>"
              data-ap-type="<?php echo htmlspecialchars($jenis, ENT_QUOTES, 'UTF-8'); ?>"
            >
              <div class="ap-date">
                <div class="ap-day"><?php echo htmlspecialchars($day ?: '--', ENT_QUOTES, 'UTF-8'); ?></div>
                <div class="ap-month"><?php echo htmlspecialchars($mon ?: '---', ENT_QUOTES, 'UTF-8'); ?></div>
              </div>

              <div class="ap-line" aria-hidden="true"></div>

              <div class="ap-content">
                <div class="ap-title">
                  <?php echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?>
                </div>

                <?php if ($lok !== '') : ?>
                  <div class="ap-meta">
                    <span class="ap-pin" aria-hidden="true">📍</span>
                    <span class="ap-location"><?php echo htmlspecialchars($lok, ENT_QUOTES, 'UTF-8'); ?></span>
                  </div>
                <?php endif; ?>
              </div>
            </button>
          </li>
          <?php endforeach; ?>
        </ul>

        <div class="ap-footer">
          <a class="ap-btn" href="<?php echo $showAllUrl; ?>">
            <?php echo Text::_('Lihat Semua Agenda'); ?>
          </a>
        </div>
      <?php endif; ?>
    </div>
  </div>

  <!-- Modal (native HTML) -->
  <dialog class="ap-modal" id="apModal">
    <div class="ap-modal-head">
      <div class="ap-modal-title" id="apModalTitle">Agenda Pimpinan</div>
      <button type="button" class="ap-modal-close" data-ap-close aria-label="Close">×</button>
    </div>

    <div class="ap-modal-body">
      <div class="ap-modal-row"><strong>Tanggal</strong> : <span id="apModalDate"></span></div>
      <div class="ap-modal-row"><strong>Tempat</strong> : <span id="apModalLocation"></span></div>
      <div class="ap-modal-row"><strong>Jenis Acara</strong> : <span id="apModalType"></span></div>
    </div>
  </dialog>
</div>
