<?php $__env->startPush("vite-head"); ?>
  <?php echo app('Illuminate\Foundation\Vite')(["resources/css/pages/single-product.scss"]); ?>
<?php $__env->stopPush(); ?>

<?php $__env->startSection("content"); ?>
  <?php
    /** @var \WC_Product|null $product */
    $product = wc_get_product(get_the_ID());

    // Récupère l'image mise en avant + la galerie
    $featured_id = get_post_thumbnail_id();
    $gallery_image_ids = $product ? $product->get_gallery_image_ids() : [];

    // Ajoute l'image principale au début des miniatures si elle existe
    if ($featured_id) {
        // Évite les doublons si l'image est déjà dans la galerie
        $gallery_image_ids = array_values(array_unique(array_merge([$featured_id], $gallery_image_ids)));
    }
  ?>

  <section class="container">
    <div class="button-container mb">
      <?php
        $shop_page_id = wc_get_page_id("shop");
      ?>

      <?php if($shop_page_id && $shop_page_id > 0): ?>
        <a href="<?php echo e(get_permalink($shop_page_id)); ?>" class="btn arrow-secondary">Voir le shop</a>
      <?php endif; ?>
    </div>

    <div class="columns single-product">
      <div class="column column-img">
        <div class="product-gallery">
          <div class="product-gallery-main">
            <?php if(has_post_thumbnail()): ?>
              <?php echo get_the_post_thumbnail(null, "large", ["class" => "product-main-image wave-img"]); ?>

            <?php else: ?>
              <div class="product-main-image placeholder"></div>
            <?php endif; ?>
          </div>

          <?php if(! empty($gallery_image_ids)): ?>
            <div class="product-gallery-thumbs">
              <?php $__currentLoopData = $gallery_image_ids; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image_id): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                  $thumb_src = wp_get_attachment_image_url($image_id, "thumbnail");
                  $large_src = wp_get_attachment_image_url($image_id, "large");
                  $large_srcset = wp_get_attachment_image_srcset($image_id, "large");
                  $thumb_alt = get_post_meta($image_id, "_wp_attachment_image_alt", true) ?: get_the_title();
                ?>

                <button type="button" class="product-gallery-thumb">
                  <img
                    src="<?php echo e(esc_url($thumb_src)); ?>"
                    alt="<?php echo e(esc_attr($thumb_alt)); ?>"
                    class="product-thumb-image wave-img"
                    data-large-src="<?php echo e(esc_url($large_src)); ?>"
                    <?php if($large_srcset): ?>
                        data-large-srcset="<?php echo e(esc_attr($large_srcset)); ?>"
                    <?php endif; ?>
                  />
                </button>
              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
          <?php endif; ?>
        </div>
      </div>

      <div class="column column-content">
        <?php if($product): ?>
          <h1 class="product-title-single">
            <?php echo e(get_the_title()); ?>

          </h1>

          <div class="product-price-single">
            <?php echo $product->get_price_html(); ?>

          </div>

          <div class="product-description-single text">
            <?php echo apply_filters("the_content", get_the_content()); ?>

          </div>

          <div class="product-add-to-cart">
            <?php
              /**
               * Utilise le système natif WooCommerce pour générer
               * le bloc quantité + bouton selon le type de produit.
               * On s'assure d'abord que la variable globale $product
               * est bien un objet \WC_Product.
               */
              global $product;

              if (! $product instanceof \WC_Product) {
                  $product = wc_get_product(get_the_ID());
              }

              if ($product instanceof \WC_Product) {
                  do_action("woocommerce_" . $product->get_type() . "_add_to_cart");
              }
            ?>
          </div>
        <?php endif; ?>
      </div>
    </div>
  </section>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var gallery = document.querySelector('.single-product .product-gallery');
      if (!gallery) return;

      var mainImg = gallery.querySelector('.product-main-image');
      if (!mainImg) return;

      var thumbs = gallery.querySelectorAll('.product-thumb-image');
      thumbs.forEach(function (thumb) {
        thumb.addEventListener('click', function () {
          var largeSrc = thumb.getAttribute('data-large-src') || thumb.getAttribute('src');
          if (largeSrc) {
            mainImg.setAttribute('src', largeSrc);
          }

          var largeSrcset = thumb.getAttribute('data-large-srcset');
          if (largeSrcset) {
            mainImg.setAttribute('srcset', largeSrcset);
          } else {
            mainImg.removeAttribute('srcset');
          }
        });
      });
    });
  </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make("layouts.app", array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/bnowdpik/anes-tetues/web/app/themes/anes-tetues/resources/views/woocommerce/single-product.blade.php ENDPATH**/ ?>