<?php
/**
 * @copyright  ZiniMedia 2021
 * @version    Release: 1.2
 * @package    happyworld
 * @author     Thanh Vo
 */
?>
<div class="wrapper">

  <?php get_header('khoa-nhi'); ?>

  <!-- Banner -->
  <?php
  $sliders = get_field('slider', 'option');
  if ($sliders):
    ?>
    <!-- <section id="banner" class="section-banner">
      <div class="banner wow fadeInUp">
        <div class="banner-item"
          style="background-image: url('http://happyworldacademy.edu.vn/wp-content/uploads/2023/08/banner-1.png');"
          data-height="618">
          <div class="banner-caption">
            <div class="container">
              <div class="banner-caption-lbl1"></div>
              <div class="banner-caption-lbl2"></div>
            </div>
          </div>
        </div>
        <div class="banner-item"
          style="background-image: url('https://happyworldacademy.edu.vn/wp-content/uploads/2023/08/banner-2.png');"
          data-height="618">
          <div class="banner-caption">
            <div class="container">
              <div class="banner-caption-lbl1"></div>
              <div class="banner-caption-lbl2"></div>
            </div>
          </div>
        </div>
        <div class="banner-item"
          style="background-image: url('http://happyworldacademy.edu.vn/wp-content/uploads/2023/08/Banner-khoa-hoc_V.png');"
          data-height="618">
          <div class="banner-caption">
            <div class="container">
              <div class="banner-caption-lbl1"></div>
              <div class="banner-caption-lbl2"></div>
            </div>
          </div>
        </div>
        <div class="banner-item"
          style="background-image: url('http://happyworldacademy.edu.vn/wp-content/uploads/2023/08/banner-3.png');"
          data-height="618">
          <div class="banner-caption">
            <div class="container">
              <div class="banner-caption-lbl1"></div>
              <div class="banner-caption-lbl2"></div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <section id="banner" class="section-banner">
      <div class="banner wow fadeInUp">

        <?php foreach ($sliders as $item):
          $img = $item['img']['sizes']['large'] ?? $item['img']['url'] ?? '';
          $imgm = $item['imgm']['url'] ?? '';
          $link = $item['link'] ?? '';
          ?>

          <div class="banner-item" style="background-image: url('<?php echo esc_url($img); ?>');"
            data-img-mobile="<?php echo esc_url($imgm); ?>" data-height="618">

            <?php if (!empty($link)): ?>
              <a href="<?php echo esc_url($link); ?>" style="display:block;width:100%;height:100%;">
              <?php endif; ?>

              <div class="banner-caption">
                <div class="container">

                  <?php if (!empty($item['title'])): ?>
                    <div class="banner-caption-lbl1">
                      <?php echo wp_kses_post($item['title']); ?>
                    </div>
                  <?php endif; ?>

                  <?php if (!empty($item['desc'])): ?>
                    <div class="banner-caption-lbl2">
                      <?php echo wp_kses_post($item['desc']); ?>
                    </div>
                  <?php endif; ?>

                </div>
              </div>

              <?php if (!empty($link)): ?>
              </a>
            <?php endif; ?>

          </div>

        <?php endforeach; ?>

      </div>
    </section>
  <?php endif; ?>

  <!-- Content từ Editor -->
  <main class="main-content <?php the_ID(); ?>">
    <?php the_content(); ?>
  </main>

  <?php get_footer(); ?>

</div>

<!-- JS xử lý ảnh mobile -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.banner-item').forEach(function (item) {
      if (window.innerWidth < 768) {
        const mobileImg = item.getAttribute('data-img-mobile');
        if (mobileImg) {
          item.style.backgroundImage = `url(${mobileImg})`;
        }
      }
    });
  });
</script>