@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home"/>
<meta property="og:description" content="{{ config('app.description') }}"/>
@endsection
@section('css')
<style type="text/css">
    .flex-1 {
        flex: 1;
    }
</style>
@endsection

@section('content')
<section class="container">

    <nav aria-label="breadcrumb" class="grey lighten-3">
        <div class="container">
            <ol class="breadcrumb ">
                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home black-text"></i></a></li>
                <li class="breadcrumb-item active">Estetoscópio BIC Duplo INOX Adulto</li>
            </ol>
        </div>
    </nav>

</section>
<section>
    <div class="container my-5">
        <div class="row">

            <div class="col-lg-5 view-product mb-5 pb-5">

                <div id="carousel-thumb" class="carousel carousel-fade carousel-thumbnails mb-5" data-ride="carousel">

                    <div class="carousel-inner border rounded" role="listbox">
                        @php
                        $list = 0;
                        @endphp
                        @foreach ($product->images as $image)
                        <div class="carousel-item @if($list === 0) active @endif">
                            <img class="d-block w-75" src="{{ asset('storage/'.$image->src) }}" alt="{{ $product->name }}">
                        </div>
                        @php
                        $list++;
                        @endphp
                        @endforeach
                    </div>

                    <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                    <ol class="carousel-indicators">
                        @php
                        $seq = 0;
                        @endphp
                        @foreach ($product->images as $image)
                        <li data-target="#carousel-thumb" @if($seq === 0) data-slide-to="0" class="active" @endif>
                            <img src="{{ URL::asset('storage/'.$image->src) }}" width="75" class="d-block border rounded"
                            style="margin-left: -112px; margin-top: 45px;">
                        </li>
                        @php
                        $seq++;
                        @endphp
                        @endforeach
                    </ol>
                </div>

            </div>

            <div class="col-lg describe-product">

                <div class="titulo-produto">
                    <h4 class="font-weight-bold px-2">{{ $product->name }}</h4>
                    <hr>
                </div>

                <div class="informacoes-produto">
                    <h6 class="font-weight-bold p-2">Disponibilidade: @if($product->quantity > 0)<span class="green-vitas-text">Em Estoque</span> @else <span class="red-vitas-text">Indisponível</span> @endif</h6>
                    <p class="text-justify p-2">
                        @php
                        $description = str_ireplace(['<br />', '<br>', '<br />'], "\r\n", $product->description);
                        @endphp
                        {{ $description }}
                    </p>
                    {{-- <a href="" class="black-text font-weight-bold px-2">
                        <i class="fas fa-heart red-vitas-text"></i> Adicionar à Lista de Desejos
                    </a> --}}
                    <hr>
                </div>
                <div class="frete-produto">
                    <input type="hidden" name="peso" value="{{ $product->weight }}">
                    <input type="hidden" name="altura" value="{{ $product->height }}">
                    <input type="hidden" name="largura" value="{{ $product->width }}">
                    <input type="hidden" name="comprimento" value="{{ $product->length }}">
                    <div class="header">
                        <a href="#" data-toggle="collapse" data-target="#area_frete">
                            <h6 class=" p-4 green-vitas-text font-weight-bold border-bottom">Calcular frete
                                <i class="icon-action fa fa-chevron-down float-right"></i>
                            </h6>
                        </a>
                    </div>
                    <div class="collapsed border rounded p-3 collapse show" id="area_frete">
                        <input type="text" name='cepDest' id="cepDest" class="text-center p-1 rounded" placeholder="Informe um CEP">
                        <button type="button" class="btn green-vitas white-text font-weight-bold btn-md px-5 calcularFrete" id="calcularFrete">
                            <i class="fas fa-truck pr-2"></i>Calcular
                        </button>
                        <button class="btn red-vitas btn-md white-text aguardeFrete" type="button" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Buscando...
                        </button>
                        <div class="alert alert-warning alert-dismissible fade msgCEP" role="alert">
                            <strong>Algo deu errado!</strong> <span id="msgCEP"></span>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="frete">
                            <table id="frete" class="table table-hover table-condensed mt-3 mb-3">
                                <tbody>

                                </tbody>
                                <tfoot><a href=""class="font-abeezee piccolino-text font-weight-bold   float-right pb-3">Confira as regras de entregas</a></tfoot>
                            </table>
                        </div>
                    </div>

                </div>
                <div class="preco-produto">
                    <div class="p-4 grey lighten-4">
                        <div class="row">
                            <form  action="{{ route('cart.store') }}" class="d-flex justify-content-left" id="formAddCart" method="POST">
                                {{ csrf_field() }}
                                @if ($product->sale_price)
                                <input type="hidden" name="subTotal" value="{{ $product->sale_price }}">
                                @else
                                <input type="hidden" name="subTotal" value="{{ $product->price }}">
                                @endif
                                @php
                                if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null)) {
                                    $preco_valido = $product->sale_price;
                                } else {
                                    $preco_valido = $product->price;
                                }
                                $valorBoleto = (config('cart.desconto_boleto') > 0) ? $preco_valido - ($preco_valido * (config('cart.desconto_boleto') / 100)) : $preco_valido;
                                $valor = 0.00;
                                $parcela = 0;
                                for($p = 1 ; $p <= config('cart.parc_sem_juros') ; $p++) {
                                    if (round($preco_valido / $p, 2) > config('cart.valor_min_parcela')) {
                                        $valor = $preco_valido / $p;
                                        $parcela = $p;
                                    }
                                }
                                @endphp
                                <div class="col-md-6 pt-6 mt-2">
                                    <h4 class="font-weight-bolder">por <strong class="red-vitas-text">{{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',', '.') }}</strong></h4>
                                    <p class="ml-3 font-weight-bold indigo-text">
                                        {{-- <p>@if ($product->attributes->count() > 0) (A partir de) @endif <span>{{ config('cart.currency_symbol') }} {{ number_format($valorBoleto, 2, ',', '.') }}</span> no boleto (somente para o site)</p> --}}
                                        @if((floatval($preco_valido) !== floatval($valor)) && (floatval(config('cart.valor_min_parcela')) < floatval($valor)))
                                        <p>ou, em até {{ $parcela }}x de <span>{{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }}</span> s/ juros</p>
                                        @else
                                        <p style="min-height: 50px"></p>
                                        @endif
                                    </p>
                                </div>

                                <div class="col-md-3">
                                    <input type="number" class="col-md mt-2" name="quantity" min="1" max="{{$product->quantity}}" value="{{ old('qauntity', 1) }}" dir="rtl">
                                </div>
                                <div class="col-md-3">
                                    @if ($product->attributes->count() > 0)
                                    <input type="hidden" name="productAttribute" value="{{ $product->attributes->first()->id }}">
                                    @endif
                                    <input type="hidden" name="frete" value="">
                                    <input type="hidden" name="product" value="{{ $product->id }}">
                                    <button id="add-to-cart-btn-{{ $product->id }}" class="btn btn-md red-vitas white-text btn-comprar disabled" type="submit" > <i class="fas fa-medkit"></i>  Comprar</button>
                                </div>
                            </form>
                        </div>
                        <div class="h4-responsive">
                            Valor total a pagar <span id="valid_price">{{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',', '.') }}</span>
                        </div>

                    </div>
                    <hr>
                </div>


            </div>
        </div>

        {{-- <div class="descricao mt-5">
            <ul class="nav" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active px-4 py-3 mr-1 font-weight-bolder black-text" id="descricao-tab"
                    data-toggle="tab" href="#descricao" role="tab" aria-controls="descricao">Descrição</a>
                </li>
                <li class="nav-item mx-1">
                    <a class="nav-link px-4 py-3 font-weight-bolder black-text" id="comentario-tab"
                    data-toggle="tab" href="#comentario" role="tab" aria-controls="comentario">Comentários</a>
                </li>
            </ul>
            <div class="tab-content p-3 border" id="myTabContent">
                <div class="tab-pane fade show active" id="descricao" role="tabpanel" aria-labelledby="descricao-tab">
                    <h5>Características do produto:</h5>

                    <p>- Nível da ausculta: baixo;</p>
                    <p>- Recomendado para triagem;</p>
                    <p>- Ângulo em metal;</p>
                    <p>- Modelo: Adulto;</p>
                    <p>- Olivas em PVC;</p>
                    <p>- Tubo em "Y" de PVC;</p>
                    <p>- Mola em aço;</p>
                    <p>- Auscultador com anel isolante.</p>
                    <p>- Dimensões aproximadas (LxAxC): 11x2,5x27,5cm;</p>
                    <p>- Composição: Aço, PVC e aço inox (auscultador); </p>

                    <h5>3 anos de garantia contra defeitos de fabricação.</h5>
                </div>

                <div class="tab-pane fade " id="comentario" role="tabpanel" aria-labelledby="comentario-tab">
                    <div class="comentarios">
                        <h5>Comentário 1</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        </p>

                        <h5>Comentário 2</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        </p>
                    </div>

                    <h5 class="red-eletriza-text">Escreva um comentário:</h5>
                    <div class="form-row py-3">
                        <div class="col-sm">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                </div>
                                <input type="text" class="form-control" placeholder="E-mail">
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                </div>
                                <input type="password" class="form-control" placeholder="Senha">
                            </div>
                        </div>

                        <textarea type="text" placeholder="Digite seu comentário"  rows="4" class="form-control md-textarea mx-2"></textarea>

                        <a href="" class="btn btn-md btn-info my-2 ">Enviar</a>

                    </div>

                </div>

            </div>
        </div> --}}
    </div>
</section>
<!--Main layout-->
{{-- <main>
    <div class="container">
        <div class="row">
            <div class="float-left w-25">
                @include(config('site.domain').'.layouts.front.sidebar-left')
            </div>
            <div class="float-right w-75">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">{{ $product->name }}</li>
                    </ol>
                </nav>
                @include(config('site.domain').'.layouts.front.product', $product)
            </div>
        </div>
    </div>
</main>
--}}<!--Main layout-->
@endsection
@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8">
</script>
<script type="text/javascript">
    var token = document.head.querySelector('meta[name="csrf-token"]')
    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
    $(document).ready(function () {
        $('.total').hide()

        $('.carousel').carousel()
        $('ul.navbar-nav li.dropdown').hover(function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
        }, function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
        });

        $('.popover-dismiss').popover({
            trigger: 'focus'
        })

        $('.link-categoria').on('click', function(){
            window.location.href = $(this).data('href');
        })

        $('#cepDest').mask ('99999-999')
        $('.aguardeFrete').hide()
        $('.calcularFrete').show()
        $('.frete').hide()

        $('#calcularFrete').on('click', function(e){
            e.preventDefault()
            $('.aguardeFrete').show()
            $('.calcularFrete').hide()
            $('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
            /*Padroes da entrega dos correios*/
            let min_comprimento = {!! config('shipping.correios.min_comprimento') !!}
            let max_comprimento = {!! config('shipping.correios.max_comprimento') !!}
            let min_altura = {!! config('shipping.correios.min_altura') !!}
            let max_altura = {!! config('shipping.correios.max_altura') !!}
            let min_largura = {!! config('shipping.correios.min_largura') !!}
            let max_largura = {!! config('shipping.correios.max_largura') !!}
            let min_peso = {!! config('shipping.correios.min_peso') !!}
            let max_peso = {!! config('shipping.correios.max_peso') !!}

            let cepOrig = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
            let cepDest = $('#cepDest').val()
            cepDest = cepDest.replace('-', '')

            let quantity = $('input[name=quantity]').val()
            let peso = $('input[name=peso]').val()
            let altura = $('input[name=altura]').val() * 100
            let largura = $('input[name=largura]').val() * 100
            let comprimento = $('input[name=comprimento]').val() * 100
            let preco = $('input[name=subTotal]').val()
            preco = parseFloat(preco)

            console.log(peso)
            let send = true
            if(peso < min_peso){
                peso = min_peso
            } else if (peso > max_peso){
                console.log('Peso ['+ peso +'] excede o valor máximo para entregar pelos correios ' + max_peso)
                send = false
            }
            if(altura < min_altura){
                altura = min_altura
            } else if (altura > max_altura){
                console.log('Altura ['+ altura +'] excede o valor máximo para entregar pelos correios ' + max_altura)
                send = false
            }
            if(largura < min_largura){
                largura = min_largura
            } else if (largura > max_largura){
                console.log('Largura ['+ largura +'] excede o valor máximo para entregar pelos correios ' + max_largura)
                send = false
            }
            if(comprimento < min_comprimento){
                comprimento = min_comprimento
            } else if (comprimento > max_comprimento){
                console.log('Comprimento ['+ comprimento +'] excede o valor máximo para entregar pelos correios ' + max_comprimento)
                send = false
            } else if (cepDest === '') {
                $('.msgCEP').removeClass('alert-danger')
                $('.msgCEP').addClass('alert-warning')
                $('.msgCEP').addClass('show')
                $('#msgCEP').html('Verifique se preencheu corretamente o CEP.')
                send = false
            }

            let url = '/api/calculaEntrega/' + cepDest + '/' + preco + '/' + quantity + '/' + peso + '/' + altura + '/' + largura + '/' + comprimento
            if(send){
                $('.msgCEP').removeClass('show')
                axios.get(url, {headers: {'Accept': 'application/json'}})
                .then((response)=>{
                    let retorno = response.data
                    let _tableFrete
                    let txt_dias
                    let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                    $.each(retorno, function( index, fretes ) {
                        $.each(fretes, function( i, frete ) {
                            console.log('Frete', frete)
                            txt_dias = (frete.prazo > 1) ? ' dias úteis' : ' dia útil'
                            let valor = parseFloat(frete.valor)
                            _tableFrete += '<tr>'
                                _tableFrete += '<td>'
                                    _tableFrete += '<div class="custom-control custom-radio">'
                                        _tableFrete += '<input type="radio" class="custom-control-input" id="'+frete.servico+'" name="tipoEntrega" value="'+frete.codigo+'" aria-selected="true" data-frete="'+valor+'">'
                                        _tableFrete += '<label class="custom-control-label" for="'+frete.servico+'">'+frete.descServico+'</label>'
                                        _tableFrete += '</div>'
                                        _tableFrete += '</td>'
                                        _tableFrete += '<td data-th="dia" class="text-center dia">' + frete.prazo + txt_dias+ ' </td>'
                                        _tableFrete += '<td data-th="preco" class="text-center preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
                                        _tableFrete += '</tr>'
                                    })
                                })

                                $('#frete>tbody').html(_tableFrete)

                                $('.aguardeFrete').hide()
                                $('.calcularFrete').show()
                                $('.frete').show()
                                /**
                                * Insere os valores nos devidos campos após a escolha do frete
                                */
                                $('input[name=tipoEntrega]').on('click', function(){
                                    let frete_val = $('input[name=tipoEntrega]:checked').data('frete')
                                    let valorFinal = preco + parseFloat(frete_val)
                                    let parc_sem_juros = {!! config('cart.parc_sem_juros') !!}
                                    let valor_min_parcela = {!! config('cart.valor_min_parcela') !!}
                                    let valor_parcela = 0.00
                                    let parcela = 0


                                    $('input[name=frete]').val(parseFloat(frete_val))
                                    $('#valid_price').html(valorFinal.toLocaleString('pt-BR', formato))
                                    $('#valFrete').html(frete_val.toLocaleString('pt-BR', formato))
                                    $('#numero_parcelas').html(parcela)
                                    $('#valor_parcela').html(valor_parcela.toLocaleString('pt-BR'))
                                    $('button.btn-comprar').removeClass('disabled')
                                    $('button.btn-logar').removeClass('disabled')
                                })

                            }).catch((error)=>{
                                $('.aguardeFrete').hide()
                                $('.calcularFrete').show()
                                $('.msgCEP').removeClass('alert-warning')
                                $('.msgCEP').addClass('alert-danger')
                                $('.msgCEP').addClass('show')
                                $('#msgCEP').html('Erro')
                                $('button.btn-comprar').addClass('disabled')
                                $('button.btn-logar').addClass('disabled')
                                console.log('Error', error)
                                $('.frete').show()
                            })
                        } else {
                            $('.aguardeFrete').hide()
                            $('.calcularFrete').show()
                        }
                    })

                    $('.btn-comprar').on('click', function(e){
                        e.preventDefault()
                        let frete = $('input[name=frete]').val()
                        /*if(frete === '') {
                            $('.msgCEP').addClass('show')
                            $('#msgCEP').html('Você não escolheu o método de entrega...')
                        } else {*/
                            $('#adicionandoCarrinho').modal( 'show' )
                            $('#adicionandoCarrinho').modal({
                                backdrop: 'static'
                            })
                            $('#formAddCart').submit()
                            /*}*/
                        })

                        $('.avise-me').on('click', function() {
                            let url = "{!! url('api/avise-me') !!}"
                            let sku = $(this).data('sku')

                            let customer_id = $('#user_id_loged').val()

                            if (customer_id === "null") {
                                $('#modalAviso').modal( 'show' )
                                $('#modalAviso').on('show.bs.modal', function (event) {
                                    var modal = $(this)
                                    modal.find('.modal-title').text('Efetuar Login')
                                    modal.find('.modal-body #modal-message').html('Você precisa estar logado para armazenar as informações.')
                                })
                                return false
                            }

                            console.log(sku, customer_id)
                            axios.post(url, {
                                token: token,
                                customer_id: parseInt(customer_id),
                                sku: sku
                            },
                            {
                                /*headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},*/
                                crossDomain: true
                            })
                            .then((response)=>{
                                console.log('Resposta', response.data)
                                console.log('Status', response.status)

                                $('#modalAviso').modal( 'show' )
                                $('#modalAviso').on('show.bs.modal', function (event) {
                                    var modal = $(this)
                                    modal.find('.modal-title').text('Aviso Gravado')
                                    modal.find('.modal-body #modal-message').html('Você será avisado quando este produto chegar.')
                                })
                            }).catch((error)=>{
                                console.log('Error', error)
                            })
                        })

                        $('.item-variavel').on('click', function(){
                            let product_id = $(this).data('product')
                            let price = $('input[name=final_price-'+product_id+'').val()
                            let quantity = $('input[name=quantity-'+product_id+'').val()
                            let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                            price = parseFloat(price)

                            $('input[name=subTotal]').val(price)
                            $('input[name=quantity]').val(1)
                            $('input[name=productAttribute]').val(product_id)
                            $('input[name=quantity]').attr('max', quantity)
                            $('span.price').html(price.toLocaleString('pt-BR', formato))
                            if(quantity <= 0) {
                                $('button.btn-comprar').attr('disabled', true)
                                $('button#calcularFrete').attr('disabled', true)
                                $('.imagem-mascara-esgotado').show()
                            } else {
                                $('button.btn-comprar').removeAttr('disabled')
                                $('button#calcularFrete').removeAttr('disabled')
                                $('.imagem-mascara-esgotado').hide()
                            }
                        })
                        $('.cart-del').on('click', function(e) {
                            e.preventDefault()
                            $('#formDestroy').submit()
                        })
                    })
                </script>

                @endsection