@extends('frontend.layouts.amp-listing')
@php
    if(trim($data['product']->meta_title) != null)
        $title = $data['product']->meta_title;
    else
        $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)
    @section('meta_keywords', $data['product']->meta_keywords)
@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 }}" />
    <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 area start-->
    <main class="product-details-section">
        <div class="container">
            <div class="pm-product-details">
                <div class="row">
                    <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 != '')
                                                    <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 != '')
                                                <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;">
                                        <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 != '')
                                                        <amp-img option="{{ $loop->iteration -1 }}"  src="up_data/products/images/thumbnails/{{ $image->name }}" width="60" height="40" alt="{{ $data['product']->name }}"></amp-img>
                                                    @endif
                                                @endforeach
                                            @endif
                                            @foreach($data['sub_products'] as $sub_product)
                                                @if($sub_product->image != '')
                                                    <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 }}"></amp-img>
                                                @endif
                                            @endforeach
                                        </amp-carousel>
                                    </amp-selector>
                                @else
                                    <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
                        </div>
                    </div>
                    <div class="col-md-8 mt-5 @if($data['product']->type != 'simple') body-top-margin @endif">
                        <div class="product_d_right">
                            <h4 class="product-info sid-heading" @if($data['product']->type == 'variation')  [hidden]="sid != '0'" @endif>{{ $data['product']->name }}</h4>
                            @foreach($data['sub_products'] as $sub_product)
                                <h1 class="product-info sid-{{ $sub_product->id }}" hidden [hidden]="sid != {{ $loop->iteration + $data['images']->count() -1 }}">{{ $sub_product->name }}</h1>
                            @endforeach
                            <div class="product-short-para">
                                <div class="product-info sid-short" @if($data['product']->type == 'variation')  [hidden]="sid != '0'" @endif>
                                    <div class="pb-3 product-sku pro-list-amp">SKU: <span>{{ $data['product']->sku }}</span></div>
                                    {!!  \App\Models\Product::printStockInformation($data['product']) !!}
                                    @if(trim($data['product']->short_description) != null)
                                        <div class="product_desc pt-3 pro-list-amp">
                                            <p>
                                                {!! nl2br(strip_tags($data['product']->short_description)) !!}
                                            </p>
                                        </div>
                                    @endif
                                    {!!  \App\Models\Product::printAddtionalInformation($data['product']) !!}
                                </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 }}">
                                        <div class="pb-3 product-sku pro-list-amp">SKU: <span>{{ $sub_product->sku }}</span></div>
                                        {!!  \App\Models\Product::printStockInformation($data['product']) !!}
                                        @if(trim($sub_product->short_description) != null)
                                            <div class="product_desc pt-3 pro-list-amp">
                                                <p>
                                                    {!! nl2br(strip_tags($sub_product->short_description)) !!}
                                                </p>
                                            </div>
                                        @endif
                                        {!!  \App\Models\Product::printAddtionalInformation($sub_product) !!}
                                    </div>
                                @endforeach
                            </div>
                            <form class="frm_add_to_cart" method="post"  action-xhr="cart" target="_top">   
                                @csrf
                                @if($data['product']->type == 'variation')
                                    <input type="hidden" name="parent_id" value="{{ $data['product']->id }}" />
                                    <div class="product-variable-block">
                                        <div class="variation-select">
                                            <h5 class="title">Please select the variation you want to order</h5>
                                            <div class="form-check">
                                                <select id="variation" on="change:AMP.setState({ sid: event.value }),carousel.goToSlide(index=event.value)" style="width:100%;padding:10px;">
                                                    <option value="0" selected>Choose Variation....</option>
                                                    @foreach($data['sub_products'] as $sub_product)
                                                        <option value="{{ $loop->iteration + $data['images']->count() -1 }}" id="{{ $sub_product->id }}" style="position:absolute;">{{ $sub_product->name }}</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
                                            </div>
                                            <br />
                                            @foreach($data['sub_products'] as $sub_product)
                                                <div class="price_box price product-info sid-{{ $sub_product->id }} product-half" hidden [hidden]="sid != {{ $loop->iteration + $data['images']->count() -1 }}">
                                                    <br>
                                                    @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'">
                                                <p>Quantity:</p>
                                                <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-left:0px;margin-top:5px;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_box price product-half">
                                        <br>
                                        @php
                                            $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');
                                            echo $price_info['price_text'];
                                        @endphp
                                    </div>
                                    <div class="product-half">
                                        <p>Quantity:</p>
                                        <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-left:0px;margin-top:5px;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" @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>
                            <div class="product_meta mt--30">
                                <p>
                                    Categories:
                                    <span>
                                        @foreach($data['product_categories'] as $cats)
                                            <a href="{{ $cats->slug }}">{{ $cats->name }}</a>
                                            @if (!$loop->last)
                                                ,
                                            @endif
                                        @endforeach
                                    </span>
                                </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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--product details end-->
        <!--product info start-->
        <section class="review-section pt--60">
            <h2 class="sr-only">Product Review</h2>
            <div class="container">
                <amp-selector class="tabs-with-selector" role="tablist" on="select:myTabPanels.toggle(index=event.targetOption, value=true)" keyboard-select-mode="focus">
                    <div id="description-tab" role="tab" aria-controls="description" option="0" selected>DESCRIPTION</div>
                    @if(count($data['videos']) > 0 || count($videos) > 0)
                        <div id="videos-tab" role="tab" aria-controls="videos" option="2">VIDEOS</div>
                    @endif
                    @if(count($data['files']) > 0)
                        <div id="files-tab" role="tab" aria-controls="files" option="3">FILES / MANUALS</div>
                    @endif
                    <div id="reviews-tab" role="tab" aria-controls="reviews" option="1">REVIEWS</div>
                </amp-selector>
                <amp-selector id="myTabPanels" class="tabpanels">
                    <div id="description" role="tabpanel" aria-labelledby="description-tab" option 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" aria-labelledby="reviews-tab" option="1">
                        <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" aria-labelledby="videos-tab" option="2">
                            @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)
                                    @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%;">
                                                            <amp-youtube
                                                                    data-videoid="{{ $video->video_id }}"
                                                                    layout="responsive"
                                                                    width="480"
                                                                    height="270"
                                                            ></amp-youtube>
                                                        </div>
                                                    </div>
                                                </amp-lightbox>
                                                <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>
                                @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" aria-labelledby="files-tab" option="3">
                            <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 info end-->
        <!-- 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 -->
        @if(isset($data['related_products']) && count($data['related_products']) > 0)
            <!--product area start-->
            <section class="product_area mb-60">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="section_title">
                                <h2>Related Products</h2>
                            </div>
                            <div class="product_carousel product_column5 owl-carousel">
                                @foreach($data['related_products'] as $product)
                                    {!! \App\Models\Product::productBlock($product, 'product-scroll') !!}
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--product area end-->
        @endif
        @if(isset($data['recommended_products']) && count($data['recommended_products']) > 0)
            <!--product area start-->
            <section class="product_area mb-60">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="section_title">
                                <h2>You May Also Like</h2>
                            </div>
                            <div class="single-slide-1">
                                @foreach($data['recommended_products'] as $product)
                                    {!! \App\Models\Product::productBlockAmp($product, 'small-amp') !!}
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--product area end-->
        @endif
    </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