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

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

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

    <section class="topo-listagem">
        <h1><?php echo e($titulo_pagina); ?> <?php echo e($subtitulo_pagina); ?></h1>
    </section>
    <div class="subtop-desc"><?php echo e($canal->chamada_canal); ?></div>
    
    <section class="canal cru-lista">
        <div class="container">
            <?php if(isset($pais->id)): ?>
            <div class="cru-selected-box">
                <div class="cru-selected">
                    <div class="item">
                        <div class="l-selected">
                            <figure>
                                <img src="uploads/pais/<?php echo e($pais->thumbnail_principal); ?>" alt="<?php echo e($pais->nome); ?>" width="34">
                            </figure>
                            <span><?php echo e($pais->nome); ?></span>
                        </div>
                        <a href="<?php echo e(url('/cru-classe/' . $canal->slug . '/pais')); ?>">Alterar país</a>
                    </div>
                    <?php if(isset($regiao->id)): ?>
                    <div class="item">
                        <div class="l-selected">
                            <figure>
                                <img src="<?php echo (isset($regiao) && $regiao->thumbnail_principal != '') ? get_file_s3($regiao->thumbnail_principal, 'produto-regiao') : 'https://i.imgur.com/kG3oemd.png'; ?>" alt="<?php echo e($regiao->nome); ?>" width="34">
                            </figure>
                            <span><?php echo e($regiao->nome); ?></span>
                        </div>
                        <a href="<?php echo e(url('/cru-classe/' . $canal->slug . '/'. $pais->slug)); ?>">Alterar região</a>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
            <div class="flex-container">
                <?php if(!isset($pais->id)): ?>
                <div class="canal__left">
                    <div class="canal__filters">
                        <p class="canal__filter-title visivel hidden" onclick="expandir('prefere')">FILTROS ATIVOS <i class="fa fa-angle-down"></i></p>
                        <div class="box hidden">
                            <ul class="menu hide prefere filtros-ativos" data-tipo='prefere'>
                                <li>
                                    <label for="tipo-tinto" >TIPO: TINTO <img src="img/site/trash-cru.svg" alt="Apagar filtro" class="filtro-delete"></label>
                                </li>
                                <li>
                                    <label for="tipo-branco" >TIPO: BRANCO <img src="img/site/trash-cru.svg" alt="Apagar filtro" class="filtro-delete"></label>
                                </li>
                                <li>
                                    <span class="cru-limpar">Limpar filtros</span>
                                </li>
                            </ul>
                        </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>

                        <?php if(!isset($pais->id)): ?>
                        <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" <?php echo (isset($pais->id) && $pais->id == $objPais->id ? 'checked="checked"' : '')?> 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>
                        <?php endif; ?>

                        <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>
                <?php endif; ?>
                <div class="canal__right">
                    <div class="flex-listagem">
                        <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="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>
            </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;
                        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]);

            //     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){
            $.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_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{

                $(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,
                        video : '<?php echo (isset($video) && $video == 'true') ? 'true' : 'false'?>',
                        tag_video : '<?php echo (isset($video) ? 'true' : 'false')?>'
                    },
                    beforeSend:function(){
                        //$('.carregando').fadeIn();
                    },
                    success:function(data){
                        if(data.status){

                            alertUtil.alertSuccess(data.message);

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