@extends('layouts.website')

@section('content')

<script type="text/javascript">
    $('body').addClass('wear-pdp-body');
    $(document).on('ready', function(){
        $('body').addClass('wear-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');
            var img = $this.data('imagem');

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

        /** 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');
        });

        /** Masculino/feminino */
        $(document).on('click', '[guia-feminino]', function(){
            $('.medidas [guia-feminino]').addClass('active');
            $('.medidas [guia-masculino]').removeClass('active');
            $('.tabela-medidas .group.masculino').addClass('hidden');
            $('.tabela-medidas .group.feminino').removeClass('hidden');
        });
        $(document).on('click', '[guia-masculino]', function(){
            $('.medidas [guia-masculino]').addClass('active');
            $('.medidas [guia-feminino]').removeClass('active');
            $('.tabela-medidas .group.feminino').addClass('hidden');
            $('.tabela-medidas .group.masculino').removeClass('hidden');
        });

        /** On change modelo */
        $(document).on('change', '.modelo-sel', function(){
            var $this = $(this);
            var valor = $this.find('option:selected').text();
            var gen = valor.toLowerCase();

            $('.medidas [guia-' + gen + ']').click();
        });

        /** 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(!variacao){
                alertUtil.alertError('Selecione um tamanho.', '', true);
            }else if(modelo == null){
                alertUtil.alertError('Selecione um modelo.', '', true);
            }else 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,
                        tamanho: 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();
                    }
                });    
            }
        });

        /** Galeria abrir */
        $(document).on('click', '.oferta-foto img', function(){
            var img = $(this).attr('data-imagem');
            $('[data-fancybox="gallery"][data-imagem="' + img + '"]')[0].click();
        });
    });
</script>

<div class="galeria hidden hidden">
    <div class="item">
        <a data-fancybox="gallery" data-imagem="1" 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 $key => $imagem) { ?>
                    <div class="item">
                        <a data-fancybox="gallery" data-imagem="<?php echo $key + 2; ?>" href="<?php echo $imagem->thumbnail_principal; ?>"><img src="<?php echo $imagem->miniatura; ?>"></a>
                    </div>
                <?php } ?>
                <?php break; ?>
        <?php endif ?>
    <?php endforeach ?>
</div>

<section class="vestuario-topo">
    <p>O amor pelo vinho estampado no tecido</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" data-imagem="1">
                        <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" data-imagem="<?php echo $key + 2; ?>">
                                    <figure>
                                        <img src="<?php echo $imagem->thumbnail_principal; ?>" alt="<?php echo $oferta->titulo; ?>"> 
                                    </figure>
                                </div>
                            <?php } ?>
                            <?php break; ?>
                        <?php endif ?>
                    <?php endforeach ?>
                </div>
                <figure class="img-main">
                    <div class="oferta-foto">
                        <img src="{{ $oferta->thumbnail_principal }}" data-imagem="1" 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>
                
                @if(isset($variacoes['tamanho']))
                    <div class="div-tamanho">
                        <div class="sec-tamanho">
                            <label>Tamanho:</label>
                            <div class="tamanho">
                                @foreach($variacoes['tamanho'] as $tamanho)
                                    <button type="button" data-id="{{ $tamanho->id }}">{{ $tamanho->nome }}</button>
                                @endforeach
                            </div>
                        </div>

                        <span class="guia">
                            <img src="img/site/guia.png" alt="Guia de medidas">
                            <b>Guia de medidas</b>
                        </span>
                    </div>
                @endif

                <div class="bottom-line">
                    @if(isset($variacoes['modelo']))
                    <div class="modelo">
                        <label>Modelo:</label>
                        <select class="modelo-sel">
                            <option value="" selected disabled>Selecione</option>
                            @foreach($variacoes['modelo'] as $modelo)
                                <option value="{{ $modelo->id }}">{{ $modelo->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <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>
    
    <div class="selector">
        <span guia-masculino class="active">Masculino</span>
        <span guia-feminino>Feminino</span>
    </div>

    <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 masculino">
            <span>M</span>
            <span>72</span>
            <span>54</span>
        </div>
        <div class="group masculino">
            <span>G</span>
            <span>74</span>
            <span>56</span>
        </div>
        <div class="group masculino">
            <span>GG</span>
            <span>76</span>
            <span>58</span>
        </div>
        <div class="group last masculino">
            <span>XG</span>
            <span>79</span>
            <span>61</span>
        </div>
        <div class="group feminino hidden">
            <span>M</span>
            <span>56</span>
            <span>38</span>
        </div>
        <div class="group feminino hidden">
            <span>G</span>
            <span>59</span>
            <span>41</span>
        </div>
        <div class="group feminino hidden">
            <span>GG</span>
            <span>63</span>
            <span>45</span>
        </div>
        <div class="group last feminino hidden">
            <span>XG</span>
            <span>68</span>
            <span>48</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">VinumWear</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