<?php
$class_name = 'grid-media';

if (get_field($class_name)): ?>
    <section class="bg-tertiary-lt py-9 sm:py-15 md:py-21 transition-scroll">
        <div class="container">
            <h2 class="font-light mb-6 text-left">
                Contenido multimedia
            </h2>
            <div class="flex-grid flex-center md:flex-grid-2 lg:flex-grid-3 gap-y-8">
                <?php while (have_rows($class_name)): the_row();
                    get_template_part('cards/' . $class_name . '-card', null, [
                        'class_card' => $class_name
                    ]);
                endwhile; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

<?php
extract($args);
$title = get_sub_field($class_card.'__title');
$link  = get_sub_field($class_card.'__url');
$embed = wp_oembed_get($link);
$embed = str_replace('?feature=oembed', '?feature=oembed&enablejsapi=1', $embed);
$embed = str_replace('youtube.com/embed/', 'youtube.com/embed/', $embed);


global $video_counter;
if (!isset($video_counter)) $video_counter = 0;
$video_counter++;
$video_id = 'video-' . $video_counter;
?>

<div class="w-full md:pr-5">
  <div id="<?php echo $video_id; ?>" class="iframe-container-youtube aspect-video rounded-lg overflow-hidden bg-primary shadow-lg [&_iframe]:!size-full" data-youtube-player>
    <?php echo $embed; ?>
  </div>

  <?php if ($title): ?>
    <h3 class="text-center text-base font-medium mt-2 mb-0 text-gray-800">
      <?php echo esc_html($title); ?>
    </h3>
  <?php endif; ?>
</div>

(function() {
  let players = [];
  let apiReady = false;

  function loadYouTubeAPI() {
    if (window.YT) {
      onYouTubeIframeAPIReady();
      return;
    }

    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  window.onYouTubeIframeAPIReady = function() {
    apiReady = true;
    initializePlayers();
  };

  function initializePlayers() {
    const containers = document.querySelectorAll('[data-youtube-player]');

    containers.forEach((container, index) => {
      const iframe = container.querySelector('iframe');

      if (iframe && iframe.src) {
        // Crear player para cada iframe
        const player = new YT.Player(iframe, {
          events: {
            'onStateChange': onPlayerStateChange
          }
        });

        players.push(player);
      }
    });
  }

  // Cuando cambia el estado de un video
  function onPlayerStateChange(event) {
    // Si un video empieza a reproducirse (state = 1)
    if (event.data === YT.PlayerState.PLAYING) {
      // Pausar todos los demás videos
      players.forEach(player => {
        // Comparar usando getIframe() para asegurar la comparación correcta
        try {
          if (player.getIframe() !== event.target.getIframe()) {
            player.pauseVideo();
          }
        } catch (e) {
          console.log('Error al pausar video:', e);
        }
      });
    }
  }

  // Iniciar cuando el DOM esté listo
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadYouTubeAPI);
  } else {
    loadYouTubeAPI();
  }
})();