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

    <script type="text/javascript">

        var lastPage = <?php echo e($lastPage); ?>;

        function objectToQueryString(obj) {
          var str = [];
          for (var p in obj)
            if (obj.hasOwnProperty(p)) {
              str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
          return str.join("&");
        }

        function scrollInfinito(){
            /** Paginação infinita */

            if($('#listagem__produtos').data('infiniteScroll') != undefined){
                $('#listagem__produtos').infiniteScroll('destroy');
                setTimeout(() => {
                    mountInfScroll();
                }, 1000);
            }else{
                mountInfScroll();
            }
            
        }

        function mountInfScroll(){
            $('#listagem__produtos').infiniteScroll({
                path: function() {
                    var pageNumber   = this.loadCount + 2;
                    var filtroOutlet = objectToQueryString(filtroSelecionado);
                    if(pageNumber <= lastPage){
                        var url = '/outlet/filtrar?page=' + pageNumber + '&' + filtroOutlet;
                        return url;
                    }else if(pageNumber == lastPage){
                        var url = '/outlet/filtrar?page=' + lastPage + '&' + filtroOutlet;
                        return url;
                    }
                },
                append: '.outlet-item',
                history: true,
                status: '.page-load-status'
            });
        }

        $(document).on('ready', function(){

            $('body').addClass('listagem-bf-body listagem-outlet-body');

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

            scrollInfinito();
            
        });
    </script>

    <?php if(!empty($canal->thumbnail_principal)): ?>
    <style type="text/css">
    .listagem-premium-body .colecao-topo, .listagem-premium-body .topo-listagem, .colecao-topo{
        /*background-image: url('<?php echo config('filesystems.path') . "/canal/{$canal->thumbnail_principal}";?>')*/
    }
    </style>
    <?php endif; ?>

    <section class="topo-listagem"></section>
    <div class="subtop-desc">
        <img src="img/site/vinum-outlet.png" alt="Vinum Outlet">
        <img src="img/site/fogo.png" class="fire" alt="Outlet Vinumday">
        <p>NESSE OUTLET PREPARAMOS DESCONTOS DE ATÉ <strong><?php echo e($maxPercentualDesconto); ?>% OFF</strong> PARA VOCÊ!</p>
    </div>



    <section class="canal">
        <div class="container">
            <div class="flex-container">
                <div class="canal__left">
                    <div class="canal__filters">
                        <div class="filter-bf">
                            <img src="img/site/bf-filter-outlet.png" alt="Vinum Outlet">
                        </div>

                        <p class="canal__filter-title visivel" onclick="expandir('prefere')">O QUE VOCÊ PREFERE? <i class="fa fa-angle-down"></i></p>
                        <div class="box">
                            <ul class="menu hide prefere" data-tipo='prefere'>
                                <?php foreach ($listaTipoDeProduto as $objTipoProduto) { ?>
                                <li>
                                    <input id="tipo-produto-<?php echo $objTipoProduto->id; ?>" type="checkbox" class="checkFiltro" value="<?php echo $objTipoProduto->id; ?>" data-type="tipoDeProduto" data-name="<?php echo $objTipoProduto->nome;?>">
                                    <img src="<?php echo config('filesystems.path') . "/tipo-de-produto/{$objTipoProduto->thumbnail_principal}"; ?>" alt="<?php echo $objTipoProduto->nome;?>">
                                    <label for="tipo-produto-<?php echo $objTipoProduto->id; ?>" ><?php echo $objTipoProduto->nome.' ('.$objTipoProduto->qtde_tipo_produto.')';?></label>
                                </li>
                                <?php } ?>
                            </ul>
                        </div>

                        <p class="canal__filter-title visivel" onclick="expandir('pais')">PAÍS DE ORIGEM <i class="fa fa-angle-down"></i></p>
                        <div class="box">
                            <ul class="menu pais hide"  data-tipo='pais'>
                                <?php foreach ($listaPaises as $objPais) { ?>
                                <li><input id="pais-<?php echo $objPais->id; ?>" type="checkbox" class="checkFiltro" value="<?php echo $objPais->id; ?>" data-type="pais" data-name="<?php echo $objPais->nome;?>"><img src="<?php echo url('uploads/pais/'.$objPais->thumbnail_principal); ?>" alt="<?php echo $objPais->nome;?>"><label for="pais-<?php echo $objPais->id; ?>" ><?php echo $objPais->nome.' ('.$objPais->qtde_paises.')';?></label></li>
                                <?php } ?>
                            </ul>
                        </div>

                        <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>

                        <p class="canal__filter-title visivel" onclick="expandir('ano')">SAFRA <i class="fa fa-angle-down"></i></p>
                        <div class="box">
                            <ul class="menu ano hide" data-tipo='ano'>
                                <?php foreach ($listaAnos as $objAno) { ?>
                                <li><input id="ano-<?php echo $objAno->safra; ?>" type="checkbox" class="checkFiltro" value="<?php echo $objAno->safra; ?>" data-type="ano" data-name="<?php echo $objAno->safra; ?>"><label for="ano-<?php echo $objAno->safra; ?>" ><?php echo ($objAno->safra) ? $objAno->safra.' ('.$objAno->qtde_anos.')' : 'Sem safra ('.$objAno->qtde_anos.')';?></label></li>
                                <?php } ?>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="canal__right">
                    <div class="flex-listagem flex-top-bf-list">
                        <h2 class="canal__listagem-title"><?php echo e($qtdeOfertas); ?> ofertas encontradas</h2>
                        <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="Faça sua busca">
                                    <button type="button" class="btn-comprar-canal btn-pesquisar">
                                        Buscar
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="box-list-prod">
                        <div class="flex-container" id="listagem__produtos">
                            <?php if(isset($canal->url_video) && !empty($canal->url_video) && (!isset($video) || isset($video) && $video == 'true')): ?>
                                <div class="video-box video-box-premium">
                                    <h3 class="title">Assista ao vídeo</h3>
                                    <div class="video-embed">
                                        <iframe src="<?php echo e($canal->url_video); ?>" frameborder="0"></iframe>
                                    </div>
                                </div>
                            <?php endif; ?>

                            <?php echo $htmlListaProdutos; ?>
                        </div>

                        <div class="page-load-status">
                            <p class="infinite-scroll-request"><i class="fa fa-spinner fa-spin"></i> Carregando produtos...</p>
                            <p class="infinite-scroll-last">Você chegou ao fim da listagem</p>
                            <p class="infinite-scroll-error">Você chegou ao fim da listagem</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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;
                        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]);

                if($canal_right_height <= 1300 && $listagem_produtos <= 1300){
                    $('.canal__right').css('height', '1300px');
                }else{
                    $('.canal__right').css('height', 'auto');
                }
            }
        }

        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 outletFiltrar(filtroSelecionado){
            $(window).scrollTop(0);
            var filtroOutlet = objectToQueryString(filtroSelecionado);
            console.log(filtroOutlet);

            $.ajax({
                type: "POST",
                url: 'outlet/filtrar',
                data: {filtroSelecionado},
                dataType: 'json',
                success: function(data){
                    $('#listagem__produtos').html(data.htmlListaProdutos);
                    $('.canal__listagem-title').html(data.total + ' ofertas encontradas');
                    lastPage = data.lastPage;
                    setTimeout(function() {
                        alturaProdutos();
                        scrollInfinito();
                    }, 1000);
                },
            });
        }

        var filtroSelecionado = {};
        filtroSelecionado['slug'] = '<?php echo $slug; ?>';

        $('#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_oferta').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{

                var $btnAdd = $(this);
                $btnAdd.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();
                        $btnAdd.attr('disabled', false);
                        $btnAdd.removeClass('btn-comprar-canal--disable');
                    }
                });
            }
        });
    </script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    
    <?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>