@extends('layouts.confraria')

@section('content')

<div class="wrapper-internal">
    <div class="container-conf">
        <div class="conf-box no-padding">
            <div class="topo-conf-default">
                <div class="topo-cover" style="background-image: url('{{ $confraria->imagem_capa ? $confraria->imagem_capa : '/img/site/conf-cover-padrao.png' }}');"></div>

                <div class="topo-conf-default-content">
                    <div class="left-topo-default">
                        <h1>Histórico da Confraria</h1>
                        <ul>
                            <li>
                                <a href="/confraria/home">Home</a>
                            </li>
                            <li>
                                <span>Histórico da Confraria</span>
                            </li>
                        </ul>
                    </div>

                    <div class="list-kpis">
                        <div class="kpi-item">
                            <span>Qtde. Garr.</span>
                            <strong>{{ $totalGarrafas }}</strong>
                        </div>
                        <div class="kpi-item right">
                            <span>Total pago</span>
                            <strong>R$ {{ number_format($valorTotal, 2,",",".") }}</strong>
                        </div>
                        <div class="kpi-item green right">
                            <span>Cashback</span>
                            @if($confraria && $confraria->contaCorrente)
                            <strong>R$ {{ number_format($confraria->contaCorrente->saldo, 2, ',', '') }}</strong>
                            @else
                            <strong>R$ 0,00</strong>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="conf-box">
            <div class="historico-search-box">
                <div class="search-historico">
                    <div class="left-form-search">
                        <img src="/img/site/historico-conf-lupa.svg" alt="Buscar">
                        <input type="text" placeholder="Busque um rótulo" name="filtro_rotulo">
                    </div>
                    <button type="button" class="publish-message filtrar-historico-btn">Enviar</button>
                </div>

                <!-- <div class="right-search-conf">
                    <span>Ordenar por:</span>
                    <select name="orderby">
                        <option value="mais-recente">Mais Recente</option>
                        <option value="mais-antigo">Mais Antigo</option>
                        <option value="menor-preco">Menor Preço</option>
                        <option value="maior-preco">Maior Preço</option>
                    </select>
                    <img src="/img/site/conf-caret-select.svg" alt="Selecione">
                </div> -->
            </div>
        </div>

        <div id="itens-historico">
            @include('confraria.produtos_historico', ['produtos' => $produtos, 'avaliacoes' => $avaliacoes])
        </div>
    </div>
</div>

<div class="modal-confraria">
    <!-- <img src="/img/site/close-modal-conf.svg" class="close-modal" alt="Fechar">
    <h3>Pedido #xxxx</h3>
    <div class="box-modal-subtable">
        <div class="component-subtable">
            <div class="subtable-item">
                <span>Pedido</span>
                <strong class="underlined open-pedido">#7238452</strong>
            </div>
            <div class="subtable-item">
                <span>Qtde. Garrafas</span>
                <strong>4</strong>
            </div>
            <div class="subtable-item">
                <span>Valor total</span>
                <strong>R$ 850,00</strong>
            </div>
            <div class="subtable-item">
                <span>Valor economizado</span>
                <strong>R$ 100,00</strong>
            </div>

            <div class="divisor"></div>

            <div class="subtable-item after-divisor">
                <span>Valor pago</span>
                <strong class="red">R$ 750,00</strong>
            </div>
        </div>
    </div>
    <div class="box-table-modal">
        <div class="component-table">
            <div class="line-table line-title">
                <span style="min-width: 302px; max-width: 302px;">Produto</span>
                <span style="min-width: 111px; max-width: 111px;">Tipo</span>
                <span style="min-width: 99px; max-width: 99px;">Safra</span>
                <span style="min-width: 80px; max-width: 80px;">Teor</span>
                <span style="min-width: 135px; max-width: 135px;">País</span>
                <span style="min-width: 200px; max-width: 200px;">Região</span>
            </div>
                <div class="line-table">
                    <span style="min-width: 302px; max-width: 302px;">Lorem ipsum dolor sit amet</span>
                    <span style="min-width: 111px; max-width: 111px;">Tinto</span>
                    <span style="min-width: 99px; max-width: 99px;">2012</span>
                    <span style="min-width: 80px; max-width: 80px;">5%</span>
                    <span style="min-width: 135px; max-width: 135px;">Portugal</span>
                    <span style="min-width: 200px; max-width: 200px;">Las Montanhas</span>
                </div>
        </div>
    </div> -->
</div>
<div class="modal-confraria-overlay"></div>

<script type="text/javascript">
    $(document).on('ready', function(){

        var typingTimer;
        var doneTypingInterval = 1600; 

        $('[name="filtro_rotulo"]').on('keyup', function (event) {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(filtrarProdutos, doneTypingInterval);
        });

        $('[name="filtro_rotulo"]').on('keydown', function () {
            clearTimeout(typingTimer);
        });

        function filtrarProdutos () {
            let filtro = $('[name="filtro_rotulo"]').val();

            $.ajax({
                url: "/confraria/historico/filtrar-produto-historico",
                type: "post",
                data: {
                    filtro: filtro, 
                },
                success:function(data){
                    $('#itens-historico').html(data.html).fadeIn();
                },
            }); 
        } 

        $(document).on('click', '.filtrar-historico-btn', function(){
            filtrarProdutos();
        });

        $(document).on('click', '.toggle-see-more', function(){
            $(this).closest('.vinho-adega-box').find('.bottom-box-item').slideToggle();
            $(this).find('span').toggleClass('hidden');
        });
        $(document).on('click', '.open-pedido', function(){
            let pedido_id = $(this).attr('pedido-id');

            $.ajax({
                url: "/confraria/modal-pedido",
                type: "post",
                data: {
                    pedido_id: pedido_id, 
                },
                success:function(data){
                    $('.modal-confraria').html(data.html);
                    $('.modal-confraria, .modal-confraria-overlay').toggleClass('active')
                },
            }); 
        });
        $(document).on('click', '.close-modal, .modal-confraria-overlay', function(){
            $('.modal-confraria, .modal-confraria-overlay').toggleClass('active')
        });

        $(document).on('click', '.see-more-historico', function(){
            let confraria_produto_id = $(this).data('confraria-produto');
            var element = $(this);

            if(!$(element).hasClass('active')){
                return buscarAvaliacoes(confraria_produto_id, element);
            } else{
                $(element).closest('.historico-box').find('.lista-comentarios').slideToggle();
                $(element).toggleClass('active');
            }
        });


        function buscarAvaliacoes(confraria_produto_id, element, toggle = true){
            $.ajax({
                url: "/confraria/historico/buscar-avaliacoes",
                type: "post",
                data: {
                    confraria_produto_id: confraria_produto_id,
                },
                success:function(data){
                    if(data.status){
                        if(toggle){
                            $(element).closest('.historico-box').find('.lista-comentarios').html(data.html).slideToggle();
                            $(element).toggleClass('active');
                        } else{
                            $(element).closest('.historico-box').find('.lista-comentarios').html(data.html);
                        }
                    }
                },
            }); 
        }

        $(document).on('click', '.like-comment:not(.active)', function(){
            var count = parseInt($(this).closest('.comentario-item-box').find('.likes-count span').text());
            $(this).addClass('active');
            $(this).closest('.comentario-item-box').find('.likes-count').addClass('active');
            $(this).closest('.comentario-item-box').find('.likes-count span').text(count + 1)
        })
        $(document).on('click', '.like-comment.active', function(){
            var count = parseInt($(this).closest('.comentario-item-box').find('.likes-count span').text());
            $(this).removeClass('active');
            if(count == 1){
                $(this).closest('.comentario-item-box').find('.likes-count').removeClass('active');
            }
            $(this).closest('.comentario-item-box').find('.likes-count span').text(count - 1)
        })

        $(document).on('click', '.respond-comment', function(){
            $(this).closest('.comentario-item').find('.publish-home').slideToggle({
                start: function() {
                    $(this).css('display','flex');
                }
            });
            $(this).closest('.comentario-item').find('.publish-home input').focus();
        })


        $(document).on('mouseenter', '.star-item', function(){
            var number = parseInt($(this).attr('data-star'));

            $('.star-item').removeClass('active-hover');

            for(var i = 1; i <= number; i++){
                $('.star-item[data-star="' + i + '"]').addClass('active-hover');
            }
        })
        $(document).on('mouseleave', '.star-item', function(){
            $('.star-item').removeClass('active-hover');
        })
        $(document).on('click', '.star-item', function(){
            var number = parseInt($(this).attr('data-star'));

            $('.star-item').removeClass('active');

            for(var i = 1; i <= number; i++){
                $('.star-item[data-star="' + i + '"]').addClass('active');
            }
        })

        $(document).on('click', '.enviar-avaliacao', function(){
            let mensagem = $('[name="avaliacao-mensagem"]').val();
            let confraria_produto_id = $(this).closest('.input-publish-box').find('[name="confraria_produto_id"]').val();
            let element = $(`.see-more-historico[data-confraria-produto="${confraria_produto_id}"]`);
        
            var stars = $('.star-item.active').map(function(i,v) {
                return $(this).data('star');
            }).toArray();

            if(stars.length == 0)
                return alertUtil.alertError('Você precisa avaliar de 1 a 5.');

            let avaliacao = Math.max(...stars);
            
            if(mensagem == '')
                return alertUtil.alertError('Você precisa escrever a avaliação.');
            
            $.ajax({
                url: "/confraria/historico/adicionar-avaliacao",
                type: "post",
                data: {
                    mensagem: mensagem, 
                    confraria_produto_id: confraria_produto_id,
                    avaliacao: avaliacao
                },
                success:function(data){
                    console.log(data);

                    if(data.status){
                        buscarAvaliacoes(confraria_produto_id, element, false);
                        let quantidadeAtual = parseInt($(element).find('.qtd_avaliacoes_span').text());
                        let novaQuantidade = quantidadeAtual+1;
                        console.log(novaQuantidade);
                        $(element).find('.qtd_avaliacoes_span').text(novaQuantidade.toString());
                        $('[name="avaliacao-mensagem"]').val('');
                        return alertUtil.alertSuccess(data.mensagem);
                    } else{
                        return alertUtil.alertError(data.mensagem);
                    }
                },
            }); 
        })

    })
</script>

@endsection