@extends('layouts.website')

@section('content')

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

    <section class="topo-listagem">
        <h1>{{ $titulo_pagina }} {{ $subtitulo_pagina }} - SELECIONE UM PAÍS</h1>
    </section>
    <div class="subtop-desc">{{ $canal->chamada_canal }}</div>
    
    <section class="canal">
        <div class="container cru-pais-container">
            <div class="cru-pais">
                <p>O canal Cru Classé é destinado a quem busca conhecer o melhor que o mundo do vinho oferece. Rótulos repletos de tipicidade, provenientes das principais regiões vitivinícolas. Vinhos que você pode comprar de olhos fechados e ter a garantia de uma experiência primorosa e carregada de tradição.</p>

                <h3>SELECIONE UM PAÍS:</h3>

                <div class="lista-paises">
                    @foreach($listaPaises as $pais)
                    <div class="pais-item">
                        <a href="{{ url('/cru-classe/' . $canal->slug . '/' . $pais->slug) }}">
                            <img src="uploads/pais/{{ $pais->thumbnail_principal }}" alt="{{ $pais->nome }}" width="34">
                            <strong>{{ $pais->nome }}</strong>
                            <div><span><?php echo (isset($listaRegioes[$pais->id]) ? count($listaRegioes[$pais->id]) : 0)?></span> {!! texto_plural('região', (isset($listaRegioes[$pais->id]) ? count($listaRegioes[$pais->id]) : 0)) !!}</div>
                            <div><span>{{ $pais->qtde_paises }}</span> {!! texto_plural('rótulo', $pais->qtde_paises) !!}</div>
                        </a>
                    </div>
                    @endforeach
                </div>

                <span class="cru-ou">ou</span>

                <a href="{{ url('/cru-classe/' . $canal->slug) }}" class="cru-all">Visualize todos os rótulos</a>
            </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>
    
    @endsection