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

<section class="vestuario-topo hidden">
    <p>O amor pelo vinho estampado no tecido</p>
</section>

<script type="text/javascript">
    $('body').addClass('wear-listagem-body');

    $(document).on('ready', function(){
        $('body').addClass('wear-listagem-body');

        if(screen.width < 900){
            $('.canal__filter-title').removeClass('visivel');
        }

        /** Comprar modal */
        $(document).on('click', '.outlet-item .comprar-modal', function(){
            $('.carregando').fadeIn();
            $('.modal-comprar .conteudo').html('');
            $('body').addClass('modal-comprar-open')
            modalOferta($(this).attr('data-slug'));
        });

        /** Close modal */
        $(document).on('click', '.close-modal, .modal-mask', function(){
            $('body').removeClass('modal-comprar-open')
        });
    });
</script>

    <section class="canal">
        <div class="container">
            <div class="flex-container">
                <div class="canal__left hidden">
                    <div class="canal__filters">
                        <p class="canal__filter-title visivel" onclick="expandir('preco')">PREÇO <i class="fa fa-angle-down"></i></p>
                        <div class="box">
                            <ul class="menu preco hide" data-tipo='preco'>
                                <li><input id="faixapreco-1" type="checkbox" class="checkFiltro" value="1" data-type="faixapreco" data-name="R$ 0 a R$ 60"><label for="faixapreco-1">R$ 0 a R$ 60 (<?php echo e($listaFaixas->ZERO_SESSENTA); ?>)</label></li>
                                <li><input id="faixapreco-2" type="checkbox" class="checkFiltro" value="2" data-type="faixapreco" data-name="R$ 60 a R$ 100"><label for="faixapreco-2">R$ 60 a R$ 100 (<?php echo e($listaFaixas->SESSENTA_CEM); ?>)</label></li>
                                <li><input id="faixapreco-3" type="checkbox" class="checkFiltro" value="3" data-type="faixapreco" data-name="R$ 100 a R$ 200"><label for="faixapreco-3">R$ 100 a R$ 200 (<?php echo e($listaFaixas->CEM_DUZENTOS); ?>)</label></li>
                                <li><input id="faixapreco-4" type="checkbox" class="checkFiltro" value="4" data-type="faixapreco" data-name="R$ 200 a R$ 500"><label for="faixapreco-4">R$ 200 a R$ 500 (<?php echo e($listaFaixas->DUZENTOS_QUINHENTOS); ?>)</label></li>
                                <li><input id="faixapreco-5" type="checkbox" class="checkFiltro" value="5" data-type="faixapreco" data-name="acima de R$ 500"><label for="faixapreco-5">acima de R$ 500 (<?php echo e($listaFaixas->ACIMA); ?>)</label></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="canal__right full-size">
                    <div class="topo-listagem">
                        <p class="ofertas-wear"><?php echo e(count($listaOfertas)); ?> produtos disponíveis</p>
                        <div class="right">
                            <select name="ordenacao" style="display: none">
                                <option value="" selected disabled>Ordenar por</option>
                                <option value="Nome">Nome</option>
                                <option value="Preço">Preço</option>
                            </select>
                            <div class="flex-container" id="pesquisa-canal">
                                <form id="form-canal-pesquisa" method="POST" action="">
                                    <div class="flex-between">
                                        <input type="text" class="pesquisa" name="pesquisa" id="pesquisa" value="<?php echo (isset($pesquisa) ? $pesquisa : '');?>" placeholder="Buscar produtos">
                                        <button type="button" class="btn-comprar-canal btn-pesquisar">
                                            Buscar
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="flex-container container-white" id="listagem__produtos">
                        <?php echo $htmlListaProdutos; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal-comprar">
        <span class="close-modal"></span>

        <div class="conteudo wear">
            
        </div>
    </div>
    <div class="modal-mask"></div>

    <script>

        var ocultarMenusFiltros = true;

        $(window).scroll(function(){

            if(screen.width > 700){
                if ($(window).scrollTop() > 600 && ocultarMenusFiltros == true){

                    $menus = $('.canal__filters').find('.menu');
                    var filtrosSelecionados = 0;
                    var filtroTipo          = '';

                    $menus.each(function() {
                        filtroTipo          = $(this).data('tipo');
                        filtrosSelecionados = $(this).find('.checkFiltro:input:checked').length;
                        console.log(filtroTipo);
                        console.log(filtrosSelecionados);
                        if(filtrosSelecionados == 0){
                            $('.' + filtroTipo).css('display','none');
                        }
                    });

                    // $('.prefere, .pais, .preco, .ano').css('display','none');
                    $('.canal__filters').css('position', 'fixed');
                    $('.canal__filters').css('top', '105px');
                    alturaProdutos();
                    ocultarMenusFiltros = false;
                }

                if ($(window).scrollTop() < 400 && ocultarMenusFiltros == false){
                    $('.prefere, .pais, .preco, .ano').css('display','block');
                    $('.canal__filters').css('position', 'relative');
                    $('.canal__filters').css('top', '0px');
                    $('.canal__right').css('height', 'auto');
                    ocultarMenusFiltros = true;
                }
            }

        });

        function alturaProdutos(){
            //ALTURA LISTAGEM PRODUTOS X FILTERS
            if(screen.width > 700){
                var $canal_right_height = $('.canal__right').css('height');
                $canal_right_height = $canal_right_height.split('px');
                $canal_right_height = parseInt($canal_right_height[0]);

                var $listagem_produtos = $('#listagem__produtos').css('height');
                $listagem_produtos = $listagem_produtos.split('px');
                $listagem_produtos = parseInt($listagem_produtos[0]);
            }
        }

        function expandir(div){
            var $div = $('.'+div);

            if($('.'+div+':visible').length >= 1){
                $div.closest('.canal__filters').find('.canal__filter-title').removeClass('visivel');
            }else{
                $div.closest('.canal__filters').find('.canal__filter-title').addClass('visivel');
            }

            $div.slideToggle();
        }

        function modalOferta(slug){
            $.ajax({
                type: "GET",
                url: 'oferta-modal/' + slug,
                dataType: 'json',
                success: function(data){
                    if(data.success){
                        $('.modal-comprar .conteudo').html(data.html);
                        modalJs();
                        $('.carregando').fadeOut();
                    }else{
                        alertUtil.alertError('Erro ao carregar Infos');
                    }
                },
            });
        }

        function modalJs(){
            /** 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);
            });

            /** Variação clique */
            $(document).on('click', '.tamanho button', function(){
                $('.tamanho button').removeClass('active');
                $(this).addClass('active');
            });

            /** Guia de medidas */
            $(document).on('click', '.wear .guia', function(){
                $('body').addClass('medidas-open');
            });
            $(document).on('click', '.medidas .close-medidas, .medidas-overlay', function(){
                $('body').removeClass('medidas-open');
            });

            /** Comprar */
            $(document).on('click', '.wear .btn-comprar', function(){
                var id = $(this).data('oferta');
                var quantidade = $(this).closest('.wear').find('.quantidade_oferta').val();
                var modelo = $(this).closest('.wear').find('.modelo-sel').val();
                var variacao   = $(this).closest('.wear').find('.tamanho button.active').data('id');
                var quantidade_by_client = $(this).closest('.wear').find('#quantidade_by_client').val();

                if(!variacao){
                    alertUtil.alertError('Selecione um tamanho.', '', true);
                }else if(modelo == null){
                    alertUtil.alertError('Selecione um modelo.', '', true);
                }else if(parseInt(quantidade) > parseInt(quantidade_by_client)){
                    alertUtil.alertError('Oferta limitada a ' + quantidade_by_client + ' unidade(s) por cliente', '', true);
                }else{
                    $(this).attr('disabled', true);
                    $(this).addClass('btn-comprar--disable');

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url:'/add-oferta-cart',
                        type:'POST',
                        data:{
                            oferta_id: id,
                            quantidade: quantidade,
                            tamanho: variacao,
                            modelo: modelo
                        },
                        beforeSend:function(){
                            $('.carregando').fadeIn();
                        },
                        success:function(data){
                            if(data.status){
                                window.location.href = "/checkout";
                            }else{
                                alertUtil.alertError(data.message, '', true);
                                $(this).attr('disabled', false);
                                $(this).removeClass('btn-comprar--disable');
                            }
                            $('.carregando').fadeOut();
                        }
                    });    
                }
            });

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

            /** Masculino/feminino */
            $(document).on('click', '[guia-feminino]', function(){
                $('.medidas [guia-feminino]').addClass('active');
                $('.medidas [guia-masculino]').removeClass('active');
                $('.tabela-medidas .group.masculino').addClass('hidden');
                $('.tabela-medidas .group.feminino').removeClass('hidden');
            });
            $(document).on('click', '[guia-masculino]', function(){
                $('.medidas [guia-masculino]').addClass('active');
                $('.medidas [guia-feminino]').removeClass('active');
                $('.tabela-medidas .group.feminino').addClass('hidden');
                $('.tabela-medidas .group.masculino').removeClass('hidden');
            });

            /** On change modelo */
            $(document).on('change', '.modelo-sel', function(){
                var $this = $(this);
                var valor = $this.find('option:selected').text();
                var gen = valor.toLowerCase();

                $('.medidas [guia-' + gen + ']').click();
            });
        }

        function outletFiltrar(filtroSelecionado){
            $.ajax({
                type: "POST",
                url: 'outlet/filtrar',
                data: {filtroSelecionado},
                dataType: 'json',
                success: function(data){
                    $('#listagem__produtos').html(data.htmlListaProdutos);
                    setTimeout(function() {
                        alturaProdutos();
                    }, 500);
                },
            });
        }

        var filtroSelecionado = {};

        $('#form-canal-pesquisa').on('keyup keypress', function(e) {
          var keyCode = e.keyCode || e.which;
          if (keyCode === 13) { 
            e.preventDefault();
            filtroSelecionado['pesquisa'] = $('#pesquisa').val();
            filtroSelecionado['slug']     = '<?php echo $slug; ?>';
            outletFiltrar(filtroSelecionado);
            return false;
          }
        });

        $(document).on('click', '.btn-pesquisar', function(){

            filtroSelecionado['pesquisa'] = $('#pesquisa').val();
            filtroSelecionado['slug']     = '<?php echo $slug; ?>';
            outletFiltrar(filtroSelecionado);

        });

        $(document).on('click', '.filtros-flutuante__filtros', function(){
             $('html,body').animate({ scrollTop: 0 }, 400);
            return false;
        });

        $(document).on('click', '.filtros-flutuante__limpar', function(){

            var filtroSelecionado = {};
            filtroSelecionado['pesquisa'] = $('#pesquisa').val();
            filtroSelecionado['slug']     = '<?php echo $slug; ?>';
            $('.checkFiltro:input').attr('checked', false);
            outletFiltrar(filtroSelecionado);
            $('.filtros-flutuante #filtros-selecionados').html('');
            $('.filtros-flutuante__limpar').addClass('hidden');
            $('html,body').animate({ scrollTop: 0 }, 400);
            return false;

        });
        
        $(document).on('change', '.checkFiltro', function() {

            filtroSelecionado['tipoDeProduto'] = new Array();
            filtroSelecionado['pais']          = new Array();
            filtroSelecionado['ano']           = new Array();
            filtroSelecionado['faixapreco']    = new Array();
            filtroSelecionado['slug']          = '<?php echo $slug; ?>';
            filtroSelecionado['pesquisa']      = $('#pesquisa').val();

            var filtrosSelecionados = '';

            $('.checkFiltro:input:checked').each(function() {
                filtroSelecionado[$(this).attr('data-type')].push($(this).val() );
                if($(this).attr('data-type') == 'ano' && $(this).attr('data-name') == ''){
                    filtrosSelecionados += 'SEM SAFRA, ';
                }else{
                    filtrosSelecionados += $(this).attr('data-name') + ', ';
                }
            });

            if(filtrosSelecionados != ''){
                filtrosSelecionados = filtrosSelecionados.substring(0, filtrosSelecionados.length-2) + '.';
                $('.filtros-flutuante__limpar').removeClass('hidden');
            }else{
                $('.filtros-flutuante__limpar').addClass('hidden');
            }

            $('.filtros-flutuante #filtros-selecionados').html(filtrosSelecionados);

            outletFiltrar(filtroSelecionado);

        });

        $(document).on('click', '.add-cart', function(){
            
            var id                   = $(this).data('oferta');
            var quantidade           = $(this).closest('.outlet-item').find('.quantidade').val();
            var variacao             = $(this).closest('.outlet-item').find('.variacao').val();
            var quantidade_by_client = $(this).closest('.outlet-item').find('.quantidade_by_client').val();

            if(parseInt(quantidade) > parseInt(quantidade_by_client)){
                alertUtil.alertWarning('Oferta limitada a ' + quantidade_by_client + ' gr. por cliente');
            }else{

                $(this).attr('disabled', true);
                $(this).addClass('btn-comprar-canal--disable');
                
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url:'/add-oferta-cart',
                    type:'POST',
                    data:{
                        oferta_id: id,
                        quantidade: quantidade,
                        variacao: variacao
                    },
                    beforeSend:function(){
                        //$('.carregando').fadeIn();
                    },
                    success:function(data){
                        if(data.status){

                            alertUtil.alertSuccess(data.message);

                            reloadCart();
                        }else{
                            alertUtil.alertError(data.message);
                        }
                        //$('.carregando').fadeOut();
                    }
                });
            }
        });
    </script>
    
    <?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>