@extends('layouts.website')

@section('content')

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

        /** Galeria vertical */
        $('.galle-vert').owlCarousel({
            items: 3,
            loop: false,
            nav: true,
            margin: 0,
        });
        $('.owl-carousel-vertical').data('owl.carousel').difference = function(first, second) {
            return {
                x: first.x - second.x + (first.y - second.y),
                y: first.y - second.y
            };
        };

        /** Troca de imagem principal */
        $(document).on('click', '.galle-vert .foto', function(){
            var $this = $(this);
            var src = $this.find('img').attr('src');

            $this.closest('.galle-vert').find('.foto').removeClass('active');
            $this.addClass('active');
            $('.oferta-do-dia__img img').attr('src', src);
        });

        /** Variação clique */
        $(document).on('click', '.tamanho button', function(){
            $('.tamanho button').removeClass('active');
            $(this).addClass('active');
        });

        /** Guia de medidas */
        $(document).on('click', '.wear .guia', function(){
            $('body').addClass('medidas-open');
        });
        $(document).on('click', '.medidas .close-medidas, .medidas-overlay', function(){
            $('body').removeClass('medidas-open');
        });

        /** Comprar */
        $(document).on('click', '.wear .btn-comprar', function(){
            var id = $(this).data('oferta');
            var quantidade = $(this).closest('.wear').find('.quantidade_oferta').val();
            var modelo = $(this).closest('.wear').find('.modelo-sel').val();
            var variacao   = $(this).closest('.wear').find('.tamanho button.active').data('id');
            var quantidade_by_client = $(this).closest('.wear').find('#quantidade_by_client').val();

            if(parseInt(quantidade) > parseInt(quantidade_by_client)){
                alertUtil.alertError('Oferta limitada a ' + quantidade_by_client + ' unidade(s) por cliente', '', true);
            }else{
                $(this).attr('disabled', true);
                $(this).addClass('btn-comprar--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,
                        modelo: modelo
                    },
                    beforeSend:function(){
                        $('.carregando').fadeIn();
                    },
                    success:function(data){
                        if(data.status){
                            window.location.href = "/checkout";
                        }else{
                            alertUtil.alertError(data.message, '', true);
                            $(this).attr('disabled', false);
                            $(this).removeClass('btn-comprar--disable');
                        }
                        $('.carregando').fadeOut();
                    }
                });    
            }
        });
    });
</script>

<div class="galeria hidden hidden">
    <div class="item">
        <a data-fancybox="gallery" href="{{ $oferta->thumbnail_principal }}"><img src="{{ $oferta->thumbnail_principal }}"></a>
    </div>
    <?php foreach ($oferta->produtos as $produto): ?>
        <?php if (count($produto->listaImagens) > 0): ?>
                <?php foreach ($produto->listaImagens as $imagem) { ?>
                    <div class="item">
                        <a data-fancybox="gallery" href="<?php echo $imagem->thumbnail_principal; ?>"><img src="<?php echo $imagem->miniatura; ?>"></a>
                    </div>
                <?php } ?>
        <?php endif ?>
    <?php endforeach ?>
</div>

<section class="vestuario-topo">
    <p>OS MELHORES ACESÓRIOS EXCLUSIVOS PARA DEGUSTADORES</p>
</section>

<section class="vestuario-content">
    <div class="container">
        <div class="white-content wear">
            <h1 class="titulo hide-desktop"><?php echo $oferta->titulo; ?> <?php echo $oferta->sub_titulo; ?></h1>
            <div class="left">
                <div class="galle-vert owl-carousel owl-carousel-vertical">
                    <div class="foto active">
                        <figure>
                            <img src="{{ $oferta->thumbnail_principal }}" alt="<?php echo $oferta->titulo; ?>"> 
                        </figure>
                    </div>
                    <?php foreach ($oferta->produtos as $produto): ?>
                        <?php if (count($produto->listaImagens) > 0): ?>
                            <?php foreach ($produto->listaImagens as $key => $imagem) { ?>
                                <div class="foto">
                                    <figure>
                                        <img src="<?php echo $imagem->thumbnail_principal; ?>" alt="<?php echo $oferta->titulo; ?>"> 
                                    </figure>
                                </div>
                            <?php } ?>
                        <?php endif ?>
                    <?php endforeach ?>
                </div>
                <figure class="img-main">
                    <div class="oferta-do-dia__img">
                        <img src="{{ $oferta->thumbnail_principal }}" alt="{{ $oferta->titulo.' '.$oferta->sub_titulo }}" <?php echo count($oferta->produtos) > 1 ? 'style="max-width:90%"' : '';?>>
                    </div>
                </figure>
            </div>

            <div class="right">
                <h1 class="titulo hide-mobile"><?php echo $oferta->titulo; ?> <?php echo $oferta->sub_titulo; ?></h1>

                <div class="preco">
                    <?php if($oferta->preco_mercado != $oferta->preco_oferta):?>
                        <h4 class="old_price">R$ <?php echo number_format($oferta->preco_mercado,2,',','.'); ?></h4>
                    <?php endif; ?>
                    <h3 class="new_price">R$ <?php echo number_format($oferta->preco_oferta,2,',','.'); ?></h3>
                </div>

                <div class="bottom-line">
                    <div class="button_amount">
                        <label>Qtde.:</label>
                        <input type="hidden" id="quantidade_by_client" value="<?php echo $oferta->quantidade_maxima_por_cliente; ?>">
                        <select class="quantidade_oferta">
                            <option value="1" selected>1</option>
                            <?php if(isset($oferta->quantidade_maxima_por_cliente)): ?>
                                <?php for($i = 2; $i <= $oferta->quantidade_maxima_por_cliente; $i++): ?>
                                    <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                                <?php endfor; ?>
                            <?php else: ?>
                                <?php for($a = 2; $a <= 10; $a++): ?>
                                    <option value="<?php echo $a; ?>"><?php echo $a; ?></option>
                                <?php endfor; ?>
                            <?php endif; ?>
                        </select>
                    </div>
                    <div class="button_add">
                        <button class="btn-comprar" data-oferta="<?php echo $oferta->id; ?>">Comprar</button>
                    </div>
                </div>
                
            </div>

            <div class="bottom">
                <h4 class="bottom-tit">Descrição:</h4>
                <?php $vinho =  $oferta->produtos[0]->produto; ?>
                <p class="texto"><?php echo $vinho->apresentacao_vinumday; ?></p>
            </div>
        </div>
    </div>
</section>

<div class="medidas">
    <span class="close-medidas"></span>

    <h4>Guia de medidas</h4>
    <p>Referência para: manga longa, regata e machão.</p>

    <div class="tabela-medidas">
        <div class="group first">
            <span>Tamanhos</span>
            <span class="comp">Comprimento <b>(Altura)</b></span>
            <span>Largura</span>
        </div>
        <div class="group">
            <span>PP</span>
            <span>68</span>
            <span>48</span>
        </div>
        <div class="group">
            <span>P</span>
            <span>70</span>
            <span>52</span>
        </div>
        <div class="group">
            <span>M</span>
            <span>72</span>
            <span>54</span>
        </div>
        <div class="group">
            <span>G</span>
            <span>74</span>
            <span>56</span>
        </div>
        <div class="group">
            <span>GG</span>
            <span>76</span>
            <span>58</span>
        </div>
        <div class="group">
            <span>XG</span>
            <span>79</span>
            <span>61</span>
        </div>
        <div class="group">
            <span>XXG</span>
            <span>81</span>
            <span>71</span>
        </div>
        <div class="group last">
            <span>NOBRE</span>
            <span>93</span>
            <span>83</span>
        </div>
    </div>

    <p class="bottom-text"><b>*</b>Pode haver variação de até 2 centímetros dependendo do modelo.</p>
</div>
<div class="medidas-overlay"></div>

<script>
    gtag('ec:addProduct', {
    'id': '<?php echo $oferta->id; ?>',
    'name': '<?php echo $oferta->titulo.' '.$oferta->sub_titulo; ?>',
    'category': 'Oferta',
    //'brand': '<?php //echo $produto->fornecedor->nome; ?>'
    //'variant': 'black'
    });

    gtag('ec:setAction', 'detail');

    gtag('send', 'pageview');
</script>


@if(isset($oferta) && $oferta != '' && $oferta->estoque > 0 && (
    ($oferta->tipo == 'D' && $oferta->data == date('Y-m-d')) ||
    ($oferta->tipo == 'E' && $oferta->data >= $date_limite_exclusiva) || ($oferta->tipo == 'M' && $oferta->data == date('Y-m-d') || ($oferta->tipo == 'S' && $oferta->data == $data_oferta_semana)) ||  (isset($canal) && $oferta->canalHasOferta && $oferta->canalHasOferta->data_inicial <= date('Y-m-d') && $oferta->canalHasOferta->data_final >= date('Y-m-d'))
))
    <div class="fixed-buy">
        <div class="price-content">
            <?php if($oferta->preco_mercado != $oferta->preco_oferta):?>
                <span class="prom">R$ <?php echo number_format($oferta->preco_mercado,2,',','.'); ?></span>
                <b class="tag"><?php echo number_format($oferta->percentual_desconto,0); ?>% OFF</b>
            <?php endif; ?>
            <span class="preco">R$ <?php echo number_format($oferta->preco_oferta,2,',','.'); ?></span>
        </div>
        <button class="add-cart-mob">Comprar</button>
    </div>

    <section class="buy_fixed_desk hide-mobile">
        <script type="text/javascript">
            $(document).on('ready', function(){
                $('body').addClass('buy_fixed_desk_active')
                $('.buy_fixed_desk .btn-comprar').click(function(){
                    $([document.documentElement, document.body]).animate({
                        scrollTop: 250
                    }, 300);
                    $(".wear .btn-comprar").click();
                });
                $('.fixed-buy .add-cart-mob').click(function(){
                    $([document.documentElement, document.body]).animate({
                        scrollTop: 760
                    }, 300);
                    $(".wear .btn-comprar").click();
                });
            });
        </script>
        <div class="container flex">
            <div class="info_title">
                <h3 class="wine_title">Acessórios</h3>
                <h4 class="wine_subtitle"><?php echo $oferta->titulo; ?> <?php echo $oferta->sub_titulo; ?></h4>
            </div>
            <div class="info_price_buttons">
                <div class="info_price">
                    <div class="discount">
                        <?php if($oferta->preco_mercado != $oferta->preco_oferta):?>
                            <h4 class="old_price">R$ <?php echo number_format($oferta->preco_mercado,2,',','.'); ?></h4>
                            <div class="percent_off">
                                <h4 class="off_title .big"><?php echo number_format($oferta->percentual_desconto,0); ?>%</h4>
                                <h5 class="off_title .small">OFF</h5>
                            </div>
                        <?php endif; ?>
                    </div>
                    <h3 class="new_price">R$ <?php echo number_format($oferta->preco_oferta,2,',','.'); ?></h3>
                </div>
                <div class="info_buttons">
                    <div class="button_add">
                        <button class="btn-comprar">Comprar</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

@endsection