@extends('layouts.website')

@section('content')

@include('perfil/menu-lateral', ['configMenuLateral' => $configMenuLateral])

<div class="minha-conta__right">
    <div class="box">
        <h2 class="title">Resumo Histórico</h2>
        <div class="flex-between flex-start flex-historico">
            <div class="resumo-historico-col pais">
                <span>País</span>
                <?php foreach ($pedidosPaises['pedidos'] as $key => $pais): ?>
                    <div class="resumo-historico-row">
                        <img class="resumo-historico-bandeira" src="uploads/pais/<?php echo $pais->thumbnail_principal; ?>" alt="">
                        <p><?php echo $key; ?></p>
                        <div class="ml-auto">
                            <?php echo $pais->quantidadeTotal; ?> gr.
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="resumo-historico-col vinho">
                <span>Tipo</span>
                <?php foreach ($pedidosTipos['pedidos'] as $key => $tipo): ?>
                    <div class="resumo-historico-row">
                        <img class="resumo-historico-bandeira" src="<?php echo config('filesystems.path') . "/tipo-de-produto/{$tipo->thumbnail_principal}"; ?>" alt="">
                        <p><?php echo $key; ?></p>
                        <div class="ml-auto">
                            <?php echo $tipo->quantidadeTotal; ?> gr.
                        </div>
                    </div>
                <?php endforeach ?>
                
            </div>
            <div class="resumo-historico-col safra">
                <span>Safra</span>
                <?php foreach ($pedidosSafras['pedidos'] as $key => $safra): ?>
                    <div class="resumo-historico-row">
                        <p><?php echo $key; ?></p>
                        <div class="ml-auto">
                            <?php echo $safra->quantidadeTotal; ?> gr.
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
        </div>
        <div class="flex-between">
            <div class="item-historico">
                <p class="item-historico__title text-right">VALOR TOTAL</p>
                <p class="item-historico__subtitle item-historico__subtitle-laranja"><span class="rs">R$ </span><b><?php echo number_format($valorTotal,2,',','.'); ?></b></p>
            </div>
            <div class="item-historico">
                <p class="item-historico__title text-center">QUANT. TOTAL</p>
                <p class="item-historico__subtitle item-historico__subtitle-azul text-center"><b><?php echo $totalGarrafas; ?></b> gr.</p>
            </div>
            <div class="item-historico">
                <p class="item-historico__title text-right">VALOR ECONOMIZADO</p>
                <p class="item-historico__subtitle item-historico__subtitle-verde"><span class="rs">R$ </span><b><?php echo number_format($valorTotalEconomizado,2,',','.'); ?></b></p>
            </div>
        </div>
    </div>
    <div class="box" style="margin-top: 20px;">
        <div class="meu-historico-flex">
            <h2 class="title">Meu Histórico</h2>
            <input placeholder="Busque por nome, tipo, safra ou país..." type="text" name="query_historico" id="query_historico">
        </div>
        <div class="meu-historico-item">

            @include('perfil/meu-historico-avaliacao')
            
        </div>
    </div>
    <script type="text/javascript">
        $(document).on('change', '#query_historico', function(){
            var query = $(this).val();
            
            $.ajax({
                url:'/perfil/buscar-historico-avaliacao',
                type:'POST',
                data:{
                    query: query
                },
                beforeSend:function(){
                    //$('.carregando').fadeIn();
                },
                success:function(data){
                    //if(data.status){
                        $('.meu-historico-item').html(data);
                    /*}else{
                        alertUtil.alertError(data.message);
                    }
                    */
                    //$('.carregando').fadeOut();
                }
            });
        });

    </script>
</div>
</div>
</div>
</div>
</section>
@endsection