@extends('frontend.layouts.amp')
@php
    $title = trim($data['product']->meta_title);
    if($title == null || $title == 'NULL')
        $title = $data['product']->name . ' - ' . app_name();
    if($data['product']->do_index == 'N' || $data['product']->status == 'N')
        $no_index = 'NOINDEX';
@endphp
@section('title', $title)
@if(trim($data['product']->meta_keywords) != null || trim($data['product']->competitor_skus) != null)
    @section('meta_keywords', $data['product']->meta_keywords . ', ' . $data['product']->competitor_skus)
@endif
@if(trim($data['product']->meta_description) != null)
    @section('meta_description', $data['product']->meta_description)
@endif
@if($data['product']->is_canonical == 'Y')
    @php
        if($data['product']->canonical_url != '')
            $url = $data['product']->canonical_url;
        else
            $url = URL::to( '/' . $data['product']->slug);
    @endphp
@else
    @php
        $url = URL::current();
    @endphp
@endif
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    {{-- <link rel="amphtml" href="{{ $url }}?amp=1" /> --}}
    <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
    @if(isset($no_index))
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endif
@endpush
@php
    $videos = [];
    if($data['product']->video_id > 0)
    {
        $videos[$data['product']->video_id] = $data['product']->video;
    }
    $has_youtube = $has_vimeo = false;
@endphp
@section('content')
    <!-- Product Details Block -->
    <main class="product-details-section">
        <div class="container">
            <div class="pm-product-details">
                <div class="blog-row ">
                    <!-- Blog Details Image Block -->
                    <div class="col-md-4">
                        <div class="product-image-block text-center">
                            <!-- Zoomable Image -->
                            @if(trim($data['product']->image) != '')
                                @if($data['product']->type == 'variation')    
                                    <amp-carousel id="carousel" width="320" height="320" layout="responsive" type="slides" on="slideChange:
                                                carouselSelector.toggle(index=event.index, value=true),
                                                carouselPreview.goToSlide(index=event.index)
                                        " lightbox>
                                        @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                                            @foreach($data['images'] as $image)
                                                @if($image->name != '')
                                                    @push('head-area')
                                                        <link rel="preload" href="up_data/products/images/medium/{{ $image->name }}" as="image">
                                                    @endpush
                                                    <amp-img src="up_data/products/images/medium/{{ $image->name }}" width="320" height="320" layout="responsive" alt="{{ $data['product']->name }}" style="width:320px;height:320px;"></amp-img>
                                                @endif
                                            @endforeach
                                        @endif
                                        @foreach($data['sub_products'] as $sub_product)
                                            @if($sub_product->image != '')
                                                @push('head-area')
                                                    <link rel="preload" href="up_data/products/images/medium/{{ $sub_product->image }}" as="image">
                                                @endpush
                                                <amp-img src="up_data/products/images/medium/{{ $sub_product->image }}" width="320" height="320" layout="responsive" alt="{{ $data['product']->name }}" style="width:320px;height:320px;"></amp-img>
                                            @endif
                                        @endforeach
                                    </amp-carousel>
                                    <amp-selector id="carouselSelector" on="select:carousel.goToSlide(index=event.targetOption)" layout="container" style="padding:5px;" aria-label="carouselSelector">
                                        <amp-carousel id="carouselPreview" class="carousel-preview" height="72" layout="fixed-height" type="carousel">
                                            @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                                                @foreach($data['images'] as $image)
                                                    @if($image->name != '')
                                                        {{-- @push('head-area')
                                                            <link rel="preload" href="up_data/products/images/thumbnails/{{ $image->name }}" as="image">
                                                        @endpush --}}
                                                        <amp-img option="{{ $loop->iteration -1 }}"  src="up_data/products/images/thumbnails/{{ $image->name }}" width="60" height="40" alt="{{ $data['product']->name }}" aria-label="{{ $data['product']->name }}"></amp-img>
                                                    @endif
                                                @endforeach
                                            @endif
                                            @foreach($data['sub_products'] as $sub_product)
                                                @if($sub_product->image != '')
                                                    {{-- @push('head-area')
                                                        <link rel="preload" href="up_data/products/images/thumbnails/{{ $sub_product->image }}" as="image">
                                                    @endpush --}}
                                                    <amp-img option="{{ $loop->iteration + $data['images']->count() -1 }}" src="up_data/products/images/thumbnails/{{ $sub_product->image }}" width="60" height="40" alt="{{ $data['product']->name }}" aria-label="{{ $data['product']->name }}"></amp-img>
                                                @endif
                                                @php
                                                    if($sub_product->video_id > 0)
                                                    {
                                                        $videos[$sub_product->video_id] = $sub_product->video;
                                                    }
                                                @endphp
                                            @endforeach
                                        </amp-carousel>
                                    </amp-selector>
                                    {{-- <a class="fancybox main_image_link" rel="ligthbox" href="up_data/products/images/large/{{ $data['product']->image }}">
                                        <amp-img id="main_image" src="up_data/products/images/medium/{{ $data['product']->image }}" width="375" height="375" alt="{{ $data['product']->name }}" ></amp-img>
                                    </a>
                                    <div class="text-center">
                                        <a class="fancybox main_image_link " href="up_data/products/images/large/{{ $data['product']->image }}">
                                            <amp-img src="../vsi/image/img/search-2.svg" width="14" height="15" class="search-img2" alt="Search"></amp-img> Click to see large image
                                        </a>
                                    </div> --}}
                                @else
                                    @push('head-area')
                                        <link rel="preload" href="up_data/products/images/medium/{{ $data['product']->image }}" as="image">
                                    @endpush
                                    <amp-img src="up_data/products/images/medium/{{ $data['product']->image }}" width="375" height="375" alt="{{ $data['product']->name }}" lightbox></amp-img>
                                @endif
                            @else
                                <amp-img id="main_image" src="up_data/na.jpg" width="375" height="375" alt="{{ $data['product']->name }}" ></amp-img>
                            @endif
                            <!-- Product Gallery with Slick Slider -->
                            {{-- <div id="product-view-gallery" class="elevate-gallery">
                                @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                                    @foreach($data['images'] as $image)
                                        @if($image->name != '')
                                            <!-- Slick Single -->
                                            <a href="#" class="gallary-item" data-image="up_data/products/images/medium/{{ $image->name }}" data-image-link="up_data/products/images/large/{{ $image->name }}">
                                                <amp-img src="up_data/products/images/thumbnails/{{ $image->name }}" width="34.8" height="34.8" alt="{{ $data['product']->name }}" ></amp-img>
                                            </a>
                                        @endif
                                    @endforeach
                                @endif
                                @foreach($data['sub_products'] as $sub_product)
                                    @if($sub_product->image != '')
                                        <!-- Slick Single -->
                                        <a href="#" id="sp_{{ $sub_product->id }}" class="gallary-item" data-image="up_data/products/images/medium/{{ $sub_product->image }}" data-image-link="up_data/products/images/large/{{ $sub_product->image }}">
                                            <amp-img src="up_data/products/images/thumbnails/{{ $sub_product->image }}" width="34.8" height="34.8" alt="{{ $data['product']->name }}"></amp-img>
                                        </a>
                                    @endif
                                @endforeach
                            </div> --}}
                        </div>
                    </div>
                    <div class="col-md--8 mt-5 mt-md-0" @if($data['product']->type == 'variation') style="margin-top:80px;" @endif >
                        <div class="description-block">
                            <div class="header-block">
                                <h1 class="product-info sid-heading" @if($data['product']->type == 'variation')  [hidden]="sid != '0'" @endif>{{ $data['product']->name }}</h1>
                                @foreach($data['sub_products'] as $sub_product)
                                    <h1 class="product-info sid-heading  sid-{{ $sub_product->id }}" hidden [hidden]="sid != {{ $loop->iteration + $data['images']->count() -1 }}">{{ $sub_product->name }}</h1>
                                @endforeach
                            </div>
                            <!-- Blog Short Description -->
                            <div class="product-short-para">
                                <div class="product-info sid-short" @if($data['product']->type == 'variation')  [hidden]="sid != '0'" @endif >
                                    <div class="pb--10 product-meta">SKU: <span>{{ $data['product']->sku }}</span></div>
                                    {{-- {!!  \App\Models\Product::printStockInformation($data['product']) !!} --}}
                                    @php
                                        $stock_info = \App\Models\Product::printStockInformation($data['product']);
                                    @endphp
                                    {!!  $stock_info['message'] !!}
                                    @if(trim($data['product']->short_description) != null)
                                        <p>
                                            {!! nl2br(strip_tags($data['product']->short_description)) !!}
                                        </p>
                                    @endif
                                    {!!  \App\Models\Product::printAddtionalInformation($data['product']->additional_information) !!}
                                </div>
                                @foreach($data['sub_products'] as $sub_product)
                                    <div class="product-info sid-{{ $sub_product->id }}" hidden [hidden]="sid != {{ $loop->iteration + $data['images']->count() -1 }}">
                                        <h6 class="pb--10 product-meta">SKU: <span>{{ $sub_product->sku }}</span></h6>
                                        {{-- {!!  \App\Models\Product::printStockInformation($data['product']) !!} --}}
                                        {!!  $stock_info['message'] !!}
                                        @if(trim($sub_product->short_description) != null)
                                            <p>
                                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                                            </p>
                                        @endif
                                        {{-- {!!  \App\Models\Product::printAddtionalInformation($sub_product->additional_information) !!} --}}
                                    </div>
                                @endforeach
                            </div>
                            <form class="frm_add_to_cart" method="post" action-xhr="cart" target="_top">
                                @csrf
                                @if($data['product']->type != 'simple')
                                    <input type="hidden" name="parent_id" value="{{ $data['product']->id }}" />
                                    <div class="product-variable-block">
                                        <div class="variation-select">
                                            <h1 class="title">Please select the variation you want to order</h1>
                                            <div class="form-check">
                                                <select id="variation" on="change:AMP.setState({ sid: event.value }),carousel.goToSlide(index=event.value)" style="width:100%;height:100%;position:relative;overflow:hidden;padding:10px;">
                                                    <option value="0" selected>Choose Variation....</option>
                                                    @foreach($data['sub_products'] as $sub_product)

                                                        @php
                                                            $caption = $sub_product->name;
                                                            if(trim($sub_product->variation_caption) != null)
                                                                $caption = $sub_product->variation_caption; 
                                                        @endphp

                                                        <option value="{{ $loop->iteration + $data['images']->count() -1 }}" id="{{ $sub_product->id }}" style="position:absolute;">{{ $caption }}</option>
                                                    @endforeach
                                                </select>
                                                @foreach($data['sub_products'] as $sub_product)
                                                    <input type="radio" name="product_id" value="{{ $sub_product->id }}" hidden [checked]="sid == {{ $loop->iteration + $data['images']->count() -1 }}" />
                                                @endforeach
                                                {{-- <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="product_id" data-sku="{{ $sub_product->sku }}" on="submit:setVariation('{{ $sub_product->id }}')" value="{{ $sub_product->id }}">
                                                    {{ $sub_product->name }}
                                                </label> --}}
                                            </div>
                                            <br />
                                            {{--<a href="#" class="clear-var">clear</a>--}}
                                            @foreach($data['sub_products'] as $sub_product)
                                                <div class="sid-{{ $sub_product->id }} product-half" hidden [hidden]="sid != {{ $loop->iteration + $data['images']->count() -1 }}">
                                                    @php
                                                        $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');
                                                        echo $price_info['price_text'];
                                                    @endphp
                                                </div>
                                            @endforeach
                                            <div class="product-half" hidden [hidden]="sid == '0'">
                                                <label for="qty">Quantity:</label><br>
                                                <button on="tap:AMP.setState({ state: {currentValue: state.currentValue == 1 ? 1 : state.currentValue-1}})">-</button>
                                                    <input name="qty" id="qty" type="number" min=1 value=1 [value]="state.currentValue" style="width:60%;line-height:30px;margin:5px 2px 0px 2px;border-radius:5px;border:1px solid #a43d21;text-align:center">
                                                <button on="tap:AMP.setState({ state: {currentValue: state.currentValue+1 }})">+</button>
                                                <amp-state id="state">
                                                    <script type="application/json">
                                                        {"currentValue": 1}
                                                    </script>
                                                </amp-state>
                                            </div><br>
                                        </div>
                                    </div>
                                @else
                                    <div class="price product-half">
                                        @php
                                            $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');
                                            echo $price_info['price_text'];
                                        @endphp
                                    </div>
                                    <div class="product-half">
                                        <label for="qty">Quantity:</label><br>
                                        <button on="tap:AMP.setState({ state: {currentValue: state.currentValue == 1 ? 1 : state.currentValue-1}})">-</button>
                                            <input name="qty" id="qty" type="number" min=1 value=1 [value]="state.currentValue" style="width:60%;line-height:30px;margin:5px 2px 0px 2px;border-radius:5px;border:1px solid #a43d21;text-align:center">
                                        <button on="tap:AMP.setState({ state: {currentValue: state.currentValue+1 }})">+</button>
                                        <amp-state id="state">
                                            <script type="application/json">
                                                {"currentValue": 1}
                                            </script>
                                        </amp-state>
                                    </div><br>
                                    <input type="hidden" name="product_id" value="{{ $data['product']->id }}" />
                                @endif
                                <div class="btn-block btn-add-to-cart" @if($data['product']->type == 'variation') hidden [hidden]="sid == '0'" @endif>
                                    <button type="submit" class="btn-product-amp-details" on="tap:AMP.setState({ btnText: true, btnDisabled: true })" [text]="btnText ? 'ADDED TO CART' : 'ADD TO CART' " [disabled]="btnDisabled">ADD TO CART</button>
                                </div>
                                <input type="hidden" name="cmd" id="cmd" value="add2cart" />
                                <div class="success-message" hidden [hidden]="!btnText">Successfully Added to Your Shopping Cart, <a href="/cart">Click here to view</a>.</div>
                            </form>
                            <!-- Wishlist And Compare -->
                            {{--<div class="btn-options">
                                <a href="wishlist.html"><i class="ion-ios-heart-outline"></i>Add to Wishlist</a>
                                <a href="compare.html"><i class="ion-ios-shuffle"></i>Add to Compare</a>
                            </div>--}}
                            <!-- Products Tag & Category Meta -->
                            <div class="product-meta mt--30">
                                <p>
                                    Categories:
                                    @foreach($data['product']->categories as $cats)
                                        <a href="{{ $cats->slugs()->first()->slug }}" class="single-meta">{{ $cats->name }}</a>
                                        @if (!$loop->last)
                                            ,
                                        @endif
                                    @endforeach
                                </p>
                                {{-- @if(trim($data['product']->tags) != null)
                                    @php
                                        $tags = explode(',', $data['product']->tags)
                                    @endphp
                                    <p>Tags:
                                        @foreach($tags as $tag)
                                            <a href="search-results?s={{ $tag }}" class="single-meta">{{ $tag }}</a>
                                            @if (!$loop->last)
                                                ,
                                            @endif
                                        @endforeach
                                    </p>
                                @endif --}}
                            </div>
                            {{--
                            <!-- Share Block 1 -->
                            <div class="share-block-1">
                                <ul class="social-btns">
                                    <li><a href="#" class="facebook"><i class="far fa-thumbs-up"></i><span>likes 1</span></a></li>
                                    <li><a href="#" class="twitter"><i class="fab fa-twitter"></i> <span>twitter</span></a></li>
                                    <li><a href="#" class="google"><i class="fas fa-plus-square"></i> <span>share</span></a></li>
                                </ul>
                            </div>
                            <!-- Sharing Block 2 -->
                            <div class="share-block-2  mt--30">
                                <h4>SHARE THIS PRODUCT</h4>
                                <ul class="social-btns social-btns-2">
                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                    <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                            --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if($data['faqs'] != null)
        <section class="review-section pt--40">
            <div class="container">
                <div class="pb1"><strong>FAQs about {{ $data['product']->name }}</strong></div>
            <amp-accordion id="my-accordion" disable-session-states>
                @foreach($data['faqs'] as $faq)
                    <section>
                        <strong><em>{{ $faq->question }}</em></strong>
                        <p class="p1">{{ $faq->answer }}</p>
                    </section>
                @endforeach
                </amp-accordion>
            </div>
        </section>
        @endif
        <section class="review-section pt--40">
            <h2 class="sr-only d-none">Product Review</h2>
            <div class="container">
                <amp-selector class="tabs-with-selector" role="tablist" aria-label="Product Media Tabs" on="select:myTabPanels.toggle(index=event.targetOption, value=true)" keyboard-select-mode="focus">
                    <div id="description-tab" role="tab" aria-controls="description" tabindex="0" option="0" aria-expanded="true" aria-selected="true" selected>Description</div>
                    @if(count($data['videos']) > 0 || count($videos) > 0)
                        <div id="videos-tab" role="tab" aria-controls="videos" tabindex="-1" option="2" aria-expanded="false" aria-selected="false">Videos</div>
                    @endif
                    @if(count($data['files']) > 0)
                        <div id="files-tab" role="tab" aria-controls="files" tabindex="-1" option="3" aria-expanded="false" aria-selected="false">Files</div>
                    @endif
                    <div id="reviews-tab" role="tab" aria-controls="reviews" tabindex="-1" option="1" aria-expanded="false" aria-selected="false">Reviews</div>
                </amp-selector>
                <amp-selector id="myTabPanels" role="tabpanel" class="tabpanels" aria-label="myTabPanels">
                    <div id="description" role="tabpanel" tabindex="0" aria-labelledby="description-tab" option="0" aria-expanded="true" aria-selected="true" selected>
                        <article>
                            <div class="product-full-para">
                                <div class="product-info sid-short" @if($data['product']->type == 'variation')  [hidden]="sid != '0'" @endif >
                                    @if(trim($data['product']->full_description) != null)
                                        {!! nl2br(strip_tags($data['product']->full_description)) !!}
                                    @endif
                                </div>
                                @foreach($data['sub_products'] as $sub_product)
                                    <div class="product-info sid-{{ $sub_product->id }}" hidden [hidden]="sid != {{ $loop->iteration + $data['images']->count() -1 }}">
                                        @if(trim($sub_product->full_description) != null)
                                            {!! nl2br(strip_tags($sub_product->full_description)) !!}
                                        @endif
                                        {!! \App\Models\Product::printAddtionalInformation($sub_product->additional_information) !!}
                                    </div>
                                @endforeach
                            </div>
                        </article>
                    </div>
                    <div id="reviews" role="tabpanel" tabindex="0" aria-labelledby="reviews-tab" option="1" aria-expanded="false" aria-selected="false">
                        <div class="review-wrapper">
                            @if(count($data['reviews']) > 0)
                                <h2 class="title-lg mb--20">{{ count($data['reviews']) }} REVIEW FOR <em>{{ strtoupper($data['product']->name) }}</em></h2>
                                @foreach($data['reviews'] as $review)
                                    <div class="review-comment mb--20">
                                        <div class="avatar">
                                            <i class="fa fa-user fa-5x"></i>
                                        </div>
                                        <div class="text">
                                            <div class="rating-widget mb--15">
                                                @for($i = 1 ; $i <= 5 ; $i++)
                                                    <span class="single-rating"><i class="@if($review->rating >= $i) fas @else far @endif  fa-star"></i></span>
                                                @endfor
                                            </div>
                                            <h6 class="author">{{ $review->name }} - <span class="font-weight-400">{{ date('M d, Y', strtotime($review->created_at)) }}</span></h6>
                                            <p>{{ $review->comments }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <form method="POST" action-xhr="save-review" accept-charset="UTF-8" id="review_form rating">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $data['product']->id }}">
                                <h2 class="title-lg space-mb--20  pt--15">ADD A REVIEW</h2>
                                <div class="alert alert-success d-none" id="review_message">
                                    <strong>Thank you!</strong> we have received your review and if required we will respond within 48 hours.
                                </div>
                                <div class="rating-row pt2">
                                    <p class="d-block">Your Rating</p>
                                    <fieldset class="rating">
                                        <input name="rating" type="radio" id="rating5" value="5">
                                        <label for="rating5" title="5 stars">☆</label>
                                        <input name="rating" type="radio" id="rating4" value="4">
                                        <label for="rating4" title="4 stars">☆</label>
                                        <input name="rating" type="radio" id="rating3" value="3">
                                        <label for="rating3" title="3 stars">☆</label>
                                        <input name="rating" type="radio" id="rating2" value="2" checked="checked">
                                        <label for="rating2" title="2 stars">☆</label>
                                        <input name="rating" type="radio" id="rating1" value="1">
                                        <label for="rating1" title="1 stars">☆</label>
                                    </fieldset>
                                    <div class="row2">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="message">Comment</label>
                                                <textarea name="comments" required id="comments" cols="30" rows="10" class="w-86"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">Name *</label>
                                                <input type="text" required name="name" id="name" class="form-control1">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="email">Email *</label>
                                                <input type="email" required name="email" id="email" class="form-control1">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="website">Phone</label>
                                                <input type="text" id="phone" name="phone" class="form-control1">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="submit-btn">
                                                <button type="submit" class="btn1 btn-black">Post Comment</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @if(count($data['videos']) > 0 || count($videos) > 0)
                        <div id="videos" role="tabpanel" tabindex="0" aria-labelledby="videos-tab" option="2" aria-expanded="false" aria-selected="false">
                            @foreach($data['videos'] as $video)
                                @php
                                    $img_path = 'up_data/products/videos/thumbnails/'.$video->video_thumbnail;
                                    if($video->video_thumbnail == '' || !file_exists($img_path))
                                        $img_path = 'up_data/na.jpg';
                                @endphp
                                <div class="col-3">
                                    <a href="#" on="open_video_modal('{{ $video->name }}');" class="product_video">
                                        <span class="fa fa-play"></span>
                                        <amp-img src="{{ $img_path }}" class="img-thumbnail img-rounded" width="372"></amp-img>
                                    </a>
                                    <div class="text-center pt--5">{{ $video->title }}</div>
                                </div>
                            @endforeach
                            <table>
                                @foreach($videos as $video)
                                    @if($video)
                                    @php
                                        if($video->source == 'Youtube')
                                        {
                                            $has_youtube = true;
                                        }
                                        elseif($video->source == 'Vimeo')
                                        {
                                            $has_vimeo = true;
                                        }
                                    @endphp
                                        <tr>
                                            <td width="130">
                                                <amp-lightbox id="gvu-video-{{ $video->id }}" layout="nodisplay">
                                                    <div class="lightbox" on="tap:gvu-video-{{ $video->id }}.close" role="button" tabindex="0">
                                                        <div style="background-color: #333333; left: 0px;top: 0px;width:100%;height:100%;">
                                                            @if ($video->source == 'Youtube')
                                                                <amp-youtube data-videoid="{{ $video->video_id }}" layout="responsive" width="480" height="270"></amp-youtube>
                                                            @elseif ($video->source == 'Vimeo')
                                                                <amp-vimeo data-videoid="{{$video->video_id}}" layout="responsive" width="500" height="281"></amp-vimeo>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </amp-lightbox>
                                                @push('head-area')
                                                    <link rel="preload" href="{{ $video->thumbnail_url }}" as="image">
                                                @endpush
                                                <amp-img
                                                        alt="{{ $video->title }}"
                                                        src="{{ $video->thumbnail_url }}"
                                                        width="120"
                                                        height="90"
                                                        layout="intrinsic"
                                                        on="tap:gvu-video-{{ $video->id }}"
                                                        tabindex="0"
                                                        role="button"
                                                >
                                                </amp-img>
                                            </td>
                                            <td><a on="tap:gvu-video-{{ $video->id }}">{{ $video->title }}</a></td>
                                        </tr>
                                    @endif
                                @endforeach
                            </table>
                        </div>
                    @endif
                    @if(count($data['files']) > 0)
                        @php
                            $fa_exts = ['.pdf' => 'fa-file-pdf', '.docx' => 'fa-file-word', '.doc' => 'fa-file-word', '.xlsx' => 'fa-file-excel', '.xls' => 'fa-file-excel'];
                        @endphp
                        <div id="files" role="tabpanel" tabindex="0" aria-labelledby="files-tab" option="3" aria-expanded="false" aria-selected="false">
                            <div class="row">
                                @foreach($data['files'] as $file)
                                    @php
                                        $file_path = 'up_data/products/files/'.$file->name;
                                        if($file->name == '' || !file_exists($file_path))
                                        {
                                            continue;
                                        }
                                        $ext = strrchr($file->name,'.');
                                    @endphp
                                    <div class="col-2 text-center ">
                                        <a href="{{ $file_path }}" target="_blank">
                                            <i class="fa {{ $fa_exts[$ext] }} fa-5x" aria-hidden="true"></i>
                                            <div class="pt--5">{{ $file->title }}</div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </amp-selector>
                <hr />
            </div>
        </section>
        <!-- Product Video Modal -->
        <div class="modal fade" id="product_video_modal" tabindex="-1" role="dialog" aria-labelledby="product_video_modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center" id="video_modal">
                    </div>
                </div>
            </div>
        </div>
        <!-- End Product Video Modal -->
        <section>
            <!-- Slider bLock 4 -->
            <!-- @if(isset($data['related_products']) && count($data['related_products']) > 0)
                <div class="pt--50">
                    <div class="container">
                        <div class="block-title">
                            <h2>RELATED PRODUCTS</h2>
                        </div>
                        <div>
                            @foreach($data['related_products'] as $product)
                                {!! \App\Models\Product::productBlock($product, 'small-amp') !!}
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif -->

            @if(isset($data['related_products']) && count($data['related_products']) > 0)
                <div class="pt--50">
                    <div class="container">
                        <div class="block-title">
                            <h2>RELATED PRODUCTS</h2>
                        </div>
                        <div class="single-slide-1">
                            @foreach($data['related_products'] as $product)
                                @php
                                    $path = 'up_data/products/images/thumbnails/' . $product->image;
                                    if ($product->image != '' && file_exists($path)) {
                                    } else {
                                        $path = 'up_data/na.jpg';
                                    }
                                @endphp
                                @push('head-area')
                                    <link rel="preload" href="{{ $path }}" as="image">
                                @endpush
                                {!! \App\Models\Product::productBlock($product, 'small-amp') !!}
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            @if(isset($data['recommended_products']) && count($data['recommended_products']) > 0)
                <div class="pt--50">
                    <div class="container">
                        <div class="block-title">
                            <h2>YOU MAY ALSO LIKE</h2>
                        </div>
                        <div class="single-slide-1">
                            @foreach($data['recommended_products'] as $product)
                                @php
                                    $path = 'up_data/products/images/thumbnails/' . $product->image;
                                    if ($product->image != '' && file_exists($path)) {
                                    } else {
                                        $path = 'up_data/na.jpg';
                                    }
                                @endphp
                                @push('head-area')
                                    <link rel="preload" href="{{ $path }}" as="image">
                                @endpush
                                {!! \App\Models\Product::productBlock($product, 'small-amp') !!}
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </section>
    </main>
    @push('head-area')
        @if($has_youtube)
            <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
        @endif
        @if($has_vimeo)
            <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
        @endif
    @endpush
    @push('amp-custom')
        .lightbox { background: rgba(0,0,0,0.8);width: 100%;height: 100%;position: absolute;display: flex;align-items: center;justify-content: center; }
        .lightbox h2 { color: white; }
    @endpush
@endsection