<?php $__env->startSection('content'); ?>

<script type="text/javascript">
    // $('body').addClass('wear-pdp-body');
    $(document).on('ready', function(){
        
        // $('body').addClass('wear-pdp-body');

        /** Galeria vertical */
        $('.galle-vert').owlCarousel({
            items: 3,
            loop: false,
            nav: true,
            margin: 0,
        });
        $('.owl-carousel-vertical').data('owl.carousel').difference = function(first, second) {
            return {
                x: first.x - second.x + (first.y - second.y),
                y: first.y - second.y
            };
        };

        /** Troca de imagem principal */
        $(document).on('click', '.galle-vert .foto', function(){
            var $this = $(this);
            var src = $this.find('img').attr('src');
            var img = $this.data('imagem');

            $this.closest('.galle-vert').find('.foto').removeClass('active');
            $this.addClass('active');
            $('.oferta-foto img').attr('src', src);
            $('.oferta-foto img').attr('data-imagem', img);
        });

        /** Galeria abrir */
        $(document).on('click', '.oferta-foto img', function(){
            var img = $(this).attr('data-imagem');
            $('[data-fancybox="gallery"][data-imagem="' + img + '"]')[0].click();
        });
    });
</script>

<div class="galeria hidden hidden">
    <div class="item">
        <a data-fancybox="gallery" data-imagem="1" href="<?php echo e($produto->thumbnail_principal); ?>"><img src="<?php echo e($produto->thumbnail_principal); ?>"></a>
    </div>
    <?php if(count($produto->listaImagens) > 0): ?>
        <?php $__currentLoopData = $produto->listaImagens; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $imagem): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="item">
                <a data-fancybox="gallery" data-imagem="<?php echo $key + 2; ?>" href="<?php echo $imagem->thumbnail_principal; ?>"><img src="<?php echo $imagem->miniatura; ?>"></a>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    <?php endif; ?>
</div>

<section class="vestuario-content">
    <div class="container">
        <div class="white-content wear">
            <h1 class="titulo hide-desktop"><?php echo e($produto->nome); ?></h1>
            <div class="left">
                <div class="galle-vert owl-carousel owl-carousel-vertical">
                    <div class="foto active" data-imagem="1">
                        <figure>
                            <img src="<?php echo e($produto->thumbnail_principal); ?>" alt="<?php echo $produto->nome; ?>"> 
                        </figure>
                    </div>
                    <?php if(count($produto->listaImagens) > 0): ?>
                        <?php $__currentLoopData = $produto->listaImagens; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $imagem): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="foto" data-imagem="<?php echo $key + 2; ?>">
                                <figure>
                                    <img src="<?php echo $imagem->thumbnail_principal; ?>" alt="<?php echo $produto->nome; ?>"> 
                                </figure>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php endif; ?>
                </div>
                <figure class="img-main">
                    <div class="oferta-foto">
                        <img src="<?php echo e($produto->thumbnail_principal); ?>" data-imagem="1" alt="<?php echo e($produto->nome); ?>" <?php echo count($produto->listaImagens) > 1 ? 'style="max-width:90%"' : '';?>>
                    </div>
                </figure>
            </div>

            <div class="right">
                <h1 class="titulo hide-mobile"><?php echo e($produto->nome); ?></h1>
                
            </div>

            <div class="bottom">
                <h4 class="bottom-tit">Descrição:</h4>
                <p class="texto"><?php echo $produto->apresentacao_vinumday; ?></p>
            </div>
        </div>
    </div>
</section>

<div class="spacer"></div>

<?php echo $__env->make('oferta._ofertas-relacionadas', ['ofertasRelacionadas' => $ofertasRelacionadas, 'canaisLiberados' => $canaisLiberados], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<script>
gtag('ec:addProduct', {
  'id': '<?php echo $produto->id; ?>',
  'name': '<?php echo $produto->nome; ?>',
  'category': '<?php echo $produto->tipo->nome; ?>',
  'brand': '<?php echo $produto->fornecedor->nome; ?>'
  //'variant': 'black'
});

gtag('ec:setAction', 'detail');

gtag('send', 'pageview');
</script>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>