@extends('shop.main')

@section('header')
    @include('shop.components.header')
@endsection

@section('main')
    <div class="main-product-single">
        <div class="spacer"></div>
        <span class="bread-crumbs">
            {{ $product->product_title }}
        </span>
        <div class="inLine">
            <div class="product-image-area">
                <div class="product-image" id="main-image">
                    @if (count($product->images) > 0)
                        <img src="{{ Storage::url($product->images[0]->file) }}" alt="{{ $product->images[0]->alt }}">
                    @else
                        <img src="{{ asset('shop/images/products/no-image.png') }}" alt="Produto sem imagem">
                    @endif
                </div>
                <div class="product-images-area">
                    @foreach ($product->images as $key => $image)
                        <img src="{{ Storage::url($image->file) }}" alt="{{ $image->alt }}" onclick="product_photos.changeImage(this)">
                    @endforeach
                </div>
            </div>

            <div class="product-desc">
                <h2 class="product-name">{{ $product->product_title }}</h2>
                <div class="message-product">Produto de qualidade & entrega rápida e garantida!</div>
                <span class="product-price">{{ formatMoney($product->price, true) }}</span>
                {{-- <input type="number" name="qty" min="1" value="1"> --}}
                <div class="variations">
                    @foreach ($product->variations as $variation)
                        <div class="variations-item">
                            <label for="product-variation">{{ $variation->variation_title }} {!! ($variation->required)?'<span class="danger">*</span>':'' !!}</label>
                            <select onchange="cart.clearVariationsErrors(this)" name="variations[]" class="product-variation" id="" {{ ($variation->required)?'required':'' }}>
                                <option value="">Selecione uma opção</option>
                                @foreach ($variation->options as $option)
                                    <option value="{{ $variation->variation_title }}:{{ $option->variation_option_title }}">{{ $option->variation_option_title }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                    <input type="hidden" name="idp" value="{{ $product->id }}">
                    @csrf
                </div>
                <button class="add-to-cart-button" id="add_to_cart_button">Adicionar ao carrinho</button>
            </div>
        </div>
        <div class="product-desc-2">
            <h3 class="area-title">Descrições</h3>
            <p class="desc-content">{!! $product->long_description !!}
            </p>
            {{-- <div class="sujests">
                <span class="sujests-title">Sujestões!</span>
                <p>* Antes do consumo, sugerimos que leia atentamente a embalagem. Todas as informações sobre produtos possuem apenas propósitos educativos e não tem a intenção de substituir diagnósticos, prescrições ou orientações profissionais. Imagem meramente ilustrativa.</p>
            </div> --}}
        </div>
        <div class="relateds-products">
            <h3 class="area-title">Também pode te interessar!</h3>
            <div class="spacer"></div>
             <section class="loop-products loop-products-mobile">

                <div class="loop-products-row">
                    @php
                        $counter = 1
                    @endphp
                    @foreach ($mainProducts as $mainProduct)
                        @include('shop.components.loops.product-main')
                        @php
                            $counter ++
                        @endphp
                        @if ($counter == 3)
                </div>
                <div class="loop-products-row">
                            @php
                                break
                            @endphp
                        @endif
                    @endforeach
                </div>
            </section>

            <section class="loop-products loop-products-desktop">
                <div class="loop-products-row">
                    @php
                        $counter2 = 1
                    @endphp
                    @foreach ($mainProducts as $mainProduct)
                        @include('shop.components.loops.product-main')
                        @php
                            $counter2 ++
                        @endphp
                        @if ($counter2 == 50)
                </div>
                <div class="loop-products-row">
                        @endif
                    @endforeach
                </div>
            </section>
        </div>
    </div>

    <div class="cover-page hidden" id="alert-added-in-cart-modal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">{{ $product->product_title }}</h3>
            </div>
            <div class="modal-body">
                <p>Foi adicionado ao seu carrinho!</p>
                <p style="color: #f37431;">Você pode alterar a quantidade do produto no carrinho!</p>
                <div class="prod-inline-modal">
                    @if (count($product->images) > 0)
                        <img src="{{ Storage::url($product->images[0]->file) }}" alt="{{ $product->images[0]->alt }}">
                    @else
                        <img src="{{ asset('shop/images/products/no-image.png') }}" alt="Produto sem imagem">
                    @endif
                </div>
                <div class="spacer"></div>
                Subtotal do carrinho
                <span class="new-shipping-price" id="cart-subtotal"></span>
            </div>
            <div class=""modal-footer>
                <button class="btn-close-modal" id="btn-close-modal">Fechar janela (<span id="countdown">10</span>)</button>
                <a class="btn-go-to-cart" href="{{ route('cart.index') }}">Ver Carrinho</a>
            </div>
        </div>
    </div>

@endsection

@section('footer')
    @include('shop.components.footer')
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/product-single.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/product-item.css') }}">
@endpush
@push('js')
    <script src="{{ asset('shop/js/product-photos.js') }}"></script>

    <script>
        product_photos.init()
    </script>
@endpush