@extends('layouts.website')

@section('content')

<section class="virada-landing ganhador">
    <img src="/img/adega/feliz-2023.svg" alt="2023" class="img-2023">
    <h1>Adega da Virada</h1>
    <p>Conheça o ganhador dos <strong>R$ 15.000,00</strong> em vinhos!</p>
    <img src="/img/adega/ilustra-big.svg" class="ilustra" alt="Adega da Virada">

    <div class="second-part">
        <h2>Quem foi o ganhador do sorteio?</h2>
        <p>O sorteio foi realizado no dia <strong>{{ date('d/m', strtotime($adegaVirada->data_sorteio)) }}</strong> às <strong>{{ date('H', strtotime($adegaVirada->data_sorteio)) }}h</strong> e o ganhador foi o cliente:</p>

        <div class="ganhador-wrapper">
            <div class="ganhador-virada">
                <img src="/img/adega/estrela.svg" alt="Adega da virada">
                <span>{{ $ganhador->nome }} {{ $ganhador->sobrenome }}</span>
            </div>
            @if($resultado)
            <div class="ganhador-virada">
                <span>Cupom: {{ $resultado->cupom->numero }}</span>
            </div>
            @endif
        </div>

        <p>Pode comemorar, {{ $ganhador->nome }}!<br>Nossa equipe entrará em contato para a retirada dos prêmios.</p>

        <div class="content-funciona-virada hidden">
            <div class="flex-caixa">
                <div class="left-caixa">
                    <img src="/img/adega/caixa.png" alt="Caixa">
                    <span>SORTEIO SERÁ REALIZADO PELA <strong>CAIXA ECONÔMICA FEDERAL</strong></span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="rotulos-virada hidden">
    <div class="container-1000">
        <div class="titulo-rotulos">
            <img src="/img/adega/adega-icon.png" width="52" alt="Rótulos do Sorteio" class="icon">
            <h2>Rótulos do Sorteio</h2>
            <p>Essa é a lista de rótulos que o ganhador levou para casa:</p>

            <div class="list-vinhos-virada ganhador">

            </div>
            <div class="wrapper-btn">
                <button type="button" class="btn-action outline-gray" data-load-more>Carregar Mais Rótulos</button>
            </div>
        </div>
    </div>
</section>

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

        /** Carregar mais rótulos */
        $(document).on('click', '[data-load-more]', function(){
            $('.carregando').fadeIn();
            var screenSize = $( window ).width();
            var $items = $('.item-vinho-virada');
            let offset = 10;

            $($items).each(function(index, item){
                offset = offset + 1;
            })
            
            $.ajax({
                type: "get",
                url: `/adega-da-virada/buscar-mais-ofertas/${offset}`,
                data: {},
                success: function(data) {
                    $('.carregando').fadeOut();

                    if(data.status && data.html != '')
                        $('.list-vinhos-virada').append(data.html);
                },
                error: function() {
                    $('.carregando').fadeOut();
                }
            });
        });

    })
</script>
@endsection