{if isset($live_photos) && !empty($live_photos)}
  <div id="addlivephoto-container" class="mt-3 mb-3">
    <h6 class="h6 text-uppercase text-muted mb-2" style="font-size: 0.8rem; letter-spacing: 0.05em;">
      <i class="material-icons" style="font-size: 1rem; vertical-align: text-bottom;">verified</i>
      {l s='Live Warehouse Photos' d='Modules.Addlivephoto.Shop'}
    </h6>

    <div class="d-flex flex-wrap gap-2">
      {foreach from=$live_photos item=photo name=livephotoloop}
        <div class="position-relative">
          <a href="{$photo.url|escape:'htmlall':'UTF-8'}" class="live-photo-thumb d-block" data-bs-toggle="modal"
            data-bs-target="#livePhotoModal" data-photo-index="{$smarty.foreach.livephotoloop.index}">
            <img src="{$photo.url|escape:'htmlall':'UTF-8'}" alt="{$photo.alt|escape:'htmlall':'UTF-8'}"
              class="img-thumbnail" width="80" height="80" loading="lazy" style="object-fit: cover;">
          </a>

          {* BADGES *}
          {if $photo.type == 'expiry'}
            <span class="badge bg-success position-absolute bottom-0 start-0 w-100 rounded-0 rounded-bottom"
              style="font-size: 0.6rem;">
              {l s='Expiry Date' d='Modules.Addlivephoto.Shop'}
            </span>
          {else}
            <span class="badge bg-info position-absolute bottom-0 start-0 w-100 rounded-0 rounded-bottom"
              style="font-size: 0.6rem;">
              {l s='Packaging' d='Modules.Addlivephoto.Shop'}
            </span>
          {/if}

          {* SCHEMA.ORG METADATA FOR GOOGLE (Hidden but readable by bots) *}
          <div style="display:none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <meta itemprop="contentUrl" content="{$photo.url|escape:'htmlall':'UTF-8'}" />
            <meta itemprop="uploadDate" content="{$photo.date|escape:'htmlall':'UTF-8'}" />
            <meta itemprop="description" content="{$photo.alt|escape:'htmlall':'UTF-8'}" />
          </div>
        </div>
      {/foreach}
    </div>
  </div>

  {* Modal code remains mostly same, just ensuring script handles it *}
  <div class="modal fade" id="livePhotoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{l s='Live Stock Photo' d='Modules.Addlivephoto.Shop'}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body text-center p-0 bg-light">
          <img id="livePhotoModalImage" src="" class="img-fluid" style="max-height: 80vh;">
        </div>
        <div class="modal-footer justify-content-between">
          <small class="text-muted" id="livePhotoModalDate"></small>
          <p id="livePhotoModalCaption" class="mb-0 fw-bold"></p>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
      // 1. Ініціалізація даних
      const photos = {$live_photos|json_encode nofilter};
      // Отримуємо дані про товар з Smarty (PrestaShop зазвичай має змінну $product)
      const productId = '{$product.id_product|default:0}'; 
      const productName = '{$product.name|escape:"javascript"}';

      // Елементи модального вікна
      const modalElement = document.getElementById('livePhotoModal');
      const modalImg = document.getElementById('livePhotoModalImage');
      const modalCap = document.getElementById('livePhotoModalCaption');
      const modalDate = document.getElementById('livePhotoModalDate');

      // --- ФУНКЦІЯ TREKING (GA4) ---
      const trackClick = (photoType) => {
        if (typeof gtag === 'function') {
          gtag('event', 'select_content', {
            'content_type': 'live_photo',
            'item_id': productId,
            'item_name': productName,
            'photo_type': photoType, // 'expiry' або 'packaging'
            'event_category': 'Product Engagement',
            'event_label': 'Live Photo Click'
          });
          console.log('GA4 Event sent: ' + photoType);
        } else {
          console.log('GA4 not loaded');
        }
      };

      // --- ОБРОБНИКИ КЛІКІВ ---
      document.querySelectorAll('.live-photo-thumb').forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          const idx = e.currentTarget.dataset.photoIndex;

          if (photos[idx]) {
            // Оновлення модалки
            modalImg.src = photos[idx].url;
            modalCap.textContent = photos[idx].alt;
            modalDate.textContent = "Дата зйомки/завантаження: " + photos[idx].date;

            // ВІДПРАВКА ПОДІЇ
            // photos[idx].type ми додали в попередньому кроці (expiry/packaging)
            trackClick(photos[idx].type || 'unknown');
          }
        });
      });

      // (Опціонально) Відстеження перегляду самого блоку, якщо він видимий
      // Можна реалізувати через IntersectionObserver, але кліку зазвичай достатньо.
    });
  </script>
{/if}