<!-- @tuanphan - 04.26c30v5 Fix missing image -->
<script>
(function() {
  function handleMultiEventDays() {
    console.log('[CalBG] handleMultiEventDays called');

    var cells = document.querySelectorAll('.yui3-calendar-day.has-event');
    console.log('[CalBG] has-event cells found:', cells.length);

    if (cells.length === 0) {
      console.warn('[CalBG] No .yui3-calendar-day.has-event found — DOM may not be ready yet');
      return;
    }

    cells.forEach(function(cell, idx) {
      var items = cell.querySelectorAll('ul.itemlist li.item');
      var hasBg = !!cell.querySelector('.background');
      console.log('[CalBG] Cell', idx, '| items:', items.length, '| has .background:', hasBg, '| dataset.bgFetched:', cell.dataset.bgFetched);

      if (items.length < 2) {
        console.log('[CalBG] Cell', idx, '→ skip (items < 2)');
        return;
      }
      if (hasBg) {
        console.log('[CalBG] Cell', idx, '→ skip (already has .background)');
        return;
      }
      if (cell.dataset.bgFetched) {
        console.log('[CalBG] Cell', idx, '→ skip (already fetched)');
        return;
      }

      var firstLink = items[0].querySelector('a.item-link');
      if (!firstLink) {
        console.warn('[CalBG] Cell', idx, '→ no a.item-link found in first item');
        return;
      }

      var href = firstLink.getAttribute('href');
      console.log('[CalBG] Cell', idx, '→ fetching:', href);

      cell.dataset.bgFetched = 'true';

      fetch(href + '?format=json')
        .then(function(r) {
          console.log('[CalBG] Fetch response status:', r.status, 'for', href);
          return r.json();
        })
        .then(function(data) {
          var item = data.item;
          if (!item) {
            console.warn('[CalBG] No data.item in response');
            return;
          }
          console.log('[CalBG] item.assetUrl:', item.assetUrl);
          console.log('[CalBG] item.mainImage:', item.mainImage);

          var assetUrl = item.assetUrl || (item.mainImage && item.mainImage.assetUrl);
          if (!assetUrl) {
            console.warn('[CalBG] No assetUrl found anywhere in item');
            return;
          }
          console.log('[CalBG] Using assetUrl:', assetUrl);

          var bgDiv = document.createElement('div');
          bgDiv.className = 'background background--iseventscollection';
          bgDiv.innerHTML = '<a href="' + href + '" class="background-image-link" style="overflow:hidden;"><img src="' + assetUrl + '?format=300w" class="background-image" style="width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;" alt=""></a>';
          cell.insertBefore(bgDiv, cell.firstChild);
          console.log('[CalBG] background injected into cell', idx);

          var secondItem = items[1];
          if (secondItem) {
            secondItem.style.display = 'none';
            console.log('[CalBG] second li.item hidden');
          }
        })
        .catch(function(e) {
          cell.dataset.bgFetched = '';
          console.error('[CalBG] fetch error for', href, e);
        });
    });
  }

  function watchCalendar() {
    var debounceTimer = null;
    var observer = new MutationObserver(function() {
      var hasEvent = !!document.querySelector('.yui3-calendar-day.has-event');
      if (!hasEvent) return;
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(handleMultiEventDays, 200);
    });
    observer.observe(document.body, { childList: true, subtree: true });
    console.log('[CalBG] MutationObserver watching');
  }

  function init() {
    console.log('[CalBG] init, readyState:', document.readyState);
    watchCalendar();
    document.addEventListener('mercury:load', function() {
      console.log('[CalBG] mercury:load fired');
      handleMultiEventDays();
    });
    handleMultiEventDays();
  }

  if (document.readyState === 'loading') {
    window.addEventListener('load', init);
  } else {
    init();
  }
})();
</script>