@extends('frontend.layouts.app')
@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';
    $stock_info = \App\Models\Product::printStockInformation($data['product']);
    $page = 'product-detail';

    $show_specs = false;
@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
    @push('head-area')
        <link rel="canonical" href="{{ $url }}" />
        <link rel="amphtml" href="{{ $url }}?amp=1" />
    @endpush
@endif
@push('head-area')
    <link rel="stylesheet" type="text/css" href="vsi/tooltipster/dist/css/tooltipster.bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="vsi/tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" />
    {{-- jbox cdn --}}
    {{--<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.2.0/dist/jBox.all.min.css" rel="stylesheet">--}}

    <meta property="og:title" content="{{ $data['product']->name }}" />
    <meta property="og:url" content="{{ url($data['product']->slug) }}" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="{{ strip_tags($data['product']->short_description) }}" />
    <meta property="og:image" content="{{ url('up_data/products/images/large/' . $data['product']->image) }}" />

    <meta name="twitter:card" content="product" />
    <meta name="twitter:title" content="{{ $data['product']->name }}" />
    <meta name="twitter:description" content="{{ strip_tags($data['product']->short_description) }}" />
    <meta name="twitter:url" content="{{ url($data['product']->slug) }}" />
    <meta name="twitter:image" content="{{ url('up_data/products/images/large/' . $data['product']->image) }}" />

    <script type="application/ld+json">
    {
        "@context": "https://schema.org/", 
        "@type": "Product", 
        "name": "{{ $data['product']->name }}",
        "image": "{{ url('up_data/products/images/large/' . $data['product']->image) }}",
        "description": "{{ strip_tags($data['product']->short_description) }}",
        "brand": {
            "@type": "Brand",
            "name": "GerVetUSA"
        },
        "sku": "{{ $data['product']->sku }}",
        "offers": {
            "url": "{{ url($data['product']->slug) }}",
            "priceCurrency": "USD",
            @if($data['product']->type == 'variation')
                "@type": "AggregateOffer",
                "lowPrice": "{{ $data['price_range']['min'] }}",
                "highPrice": "{{ $data['price_range']['max'] }}"
            @else
                "@type": "Offer",
                "price": "{{ $data['price_range']['price'] }}",
                "availability": "https://schema.org/InStock",
                "itemCondition": "https://schema.org/NewCondition"
            @endif
        }
    }
    </script>

@endpush
@if(isset($no_index))
    @push('head-area')
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endpush
@endif
@section('content')

    <!-- Product Details Block -->
    <main class="product-details-section p-0">
        <div class="container">
            <div class="pm-product-details">
                <div class="row">
                    <!-- Blog Details Image Block -->
                    <div class="col-md-4 pb-5 pt--60 left-side-box">
                        <div class="image-block text-center">
                            <div class="pd-sale-tag d-none" id="pd-sale-div"></div>
                            <!-- Zoomable Image -->
                            @if(trim($data['product']->image) != '')
                                <a class="main_image_link" href="javascript:;" data-type="image" data-title="{{ $data['product']->name }}" data-href="up_data/products/images/large/{{ $data['product']->image }}">
                                    <img id="main_image" src="up_data/products/images/medium/{{ $data['product']->image }}" alt="{{ $data['product']->name }}"/>
                                </a>
                                <div class="text-center">
                                    <a class="main_image_link" href="javascript:;" data-type="image" data-title="{{ $data['product']->name }}" data-href="up_data/products/images/large/{{ $data['product']->image }}">
                                        <i class="fa fa-search"></i> Click to see large image
                                    </a>
                                </div>
                            @else
                                <img id="main_image" src="up_data/na.jpg" alt="{{ $data['product']->name }}"/>
                            @endif
                            <!-- Product Gallery with Slick Slider -->
                            <div id="product-view-gallery" !class="elevate-gallery">
                                @php
                                    $videos = [];
                                    if($data['product']->video_id > 0)
                                    {
                                        $videos[$data['product']->video_id] = $data['product']->video;
                                    }
                                    if($data['product']->video_id2 > 0)
                                    {
                                        $videos[$data['product']->video_id2] = $data['product']->video2;
                                    }
                                    if($data['product']->video_id3 > 0)
                                    {
                                        $videos[$data['product']->video_id3] = $data['product']->video3;
                                    }
                                @endphp
                                @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                                    @foreach($data['images'] as $image)
                                        @if($image->name != '')
                                            <!-- Slick Single -->
                                            <a href="javascript:;" class="gallary-item prd-images" data-title="{{ $data['product']->name }}" data-type="image" data-image="up_data/products/images/medium/{{ $image->name }}" data-image-link="up_data/products/images/large/{{ $image->name }}">
                                                <img class="product-thumbs" src="up_data/products/images/thumbnails/{{ $image->name }}" alt="{{ $data['product']->name }}"/>
                                            </a>
                                        @endif
                                    @endforeach
                                @endif
                                @foreach($data['sub_products'] as $sub_product)
                                    @php
                                        $sp_images = $sub_product->files()->where('type', 'images')->get();
                                    @endphp
                                    @foreach($sp_images as $image)
                                        @if($image)
                                            <!-- Slick Single -->
                                            <a href="javascript:;" id="sp_{{ $image->id }}" class="sid-{{ $sub_product->id }} d-none prd-images gallary-item spimgs_{{ $sub_product->id }}" data-title="{{ $sub_product->name }}" data-type="image" data-image="up_data/products/images/medium/{{ $image->name }}" data-image-link="up_data/products/images/large/{{ $image->name }}">
                                                <img class="product-thumbs" src="up_data/products/images/thumbnails/{{ $image->name }}" alt="{{ $sub_product->name }}"/>
                                            </a>
                                        @endif
                                    @endforeach
                                    @php
                                        if($sub_product->video_id > 0)
                                        {
                                            $videos[$sub_product->video_id] = $sub_product->video;
                                        }
                                        if($sub_product->video_id2 > 0)
                                        {
                                            $videos[$sub_product->video_id2] = $sub_product->video2;
                                        }
                                        if($sub_product->video_id3 > 0)
                                        {
                                            $videos[$sub_product->video_id3] = $sub_product->video3;
                                        }
                                    @endphp
                                @endforeach
                                @foreach($videos as $video)
                                    @if($video)
                                        <a href="javascript:;" class="gallary-item product-videos" data-title="{{ $video->title }}" data-type="video" data-video-id="{{ $video->video_id }}" data-video-source="{{ $video->source }}">
                                            <img width="50" height="50" class="product-thumbs" src="{{ $video->thumbnail_url }}" alt="Pay Video" >
                                        </a>
                                    @endif
                                @endforeach
                                {{--<div class="position-relative">
                                    <div class="position-absolute" style="width: 100%; text-align: center; top: 38%;"><i class="fab fa-youtube fa-3x yt-icon"></i></div>
                                    <img src="https://img.youtube.com/vi/W9_ncoy0yvY/0.jpg" alt="Pay Video" class="img-fluid">
                                </div>--}}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 mt-5 mt-md-0 pb-5 pt--60 center-box">
                        <div class="description-block">
                            <div class="header-block product-title">
                                <h1 class="product-info sid-heading">{{ $data['product']->name }}</h1>
                                @foreach($data['sub_products'] as $sub_product)
                                    <h2 class="product-info d-none sid-{{ $sub_product->id }}">{{ $sub_product->name }}</h2>
                                @endforeach
                            </div>

                            <div>
                                @if($data['product']->type == 'variation')
                                    <input type="hidden" name="parent_id" value="{{ $data['product']->id }}" />
                                    <div class="product-variable-block">                
                                        <div class="variation-select">
                                            @foreach($data['sub_products'] as $sub_product)
                                                <div class="price product-info d-none sid-{{ $sub_product->id }}">
                                                    @php
                                                        $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');
                                                        echo $price_info['price_text'];
                                                    @endphp
                                                </div>
                                                @php
                                                    $price_to_check = $price_info['sale_price'];
                                                    if($price_to_check == 0)
                                                        $price_to_check = $price_info['price'];
                                                @endphp
                                                @if($price_to_check >= 200)
                                                    <div class="float-right free-ground-shipping product-info d-none sid-{{ $sub_product->id }}"> 
                                                        <a data-tooltip-content="#free_ground_shipping" class="product-right-tips" href="javascript:;">
                                                            <img src="vsi/image/free-ground-shipping.png" alt="Free Ground Shipping" />
                                                        </a>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <input type="hidden" name="c_product_id" id="c_product_id" value="" />
                                @else
                                    <div class="product-variable-block">
                                        <div class="price">
                                            @php
                                                $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');
                                                echo $price_info['price_text'];
                                            @endphp
                                        </div>
                                        @php
                                            $price_to_check = $price_info['sale_price'];
                                            if($price_to_check == 0)
                                                $price_to_check = $price_info['price'];
                                        @endphp
                                        @if($price_to_check >= 200)
                                            <div class="float-right free-ground-shipping">
                                                <a data-tooltip-content="#free_ground_shipping" class="product-right-tips" href="javascript:;">
                                                    <img src="vsi/image/free-ground-shipping.png" alt="Free Ground Shipping" />
                                                </a>
                                            </div>
                                        @endif
                                        <input type="hidden" name="product_id" id="product_id" value="{{ $data['product']->id }}" />
                                        <input type="hidden" name="c_product_id" id="c_product_id" value="{{ $data['product']->id }}" />
                                        @if($price_info['discount_percentage'] > 0)
                                            @push('after-scripts')
                                                <script>
                                                        show_product_discount_tag('{{ $price_info['discount_percentage'] }}');
                                                </script>
                                            @endpush
                                        @endif
                                    </div>
                                @endif
                                @if($data['faqs'] != null)
                                <div class="pb--15 text-italic text-muted @if($data['product']->type == 'variation') show-for-all-variants d-none @endif">
                                    <a href="javascript:;" class="faqs_product_btn">{{ count($data['faqs']) }} Frequently Asked Questions and Answers</a>
                                </div>
                                @endif
                            </div>

                            @if($data['product']->type == 'variation')
                                <!-- <div class="pb-3">
                                    <button 
                                        id="btn_variation_selector" 
                                        type="button" 
                                        class="btn btn-dark text-white"
                                        onclick="show_variations_selector();">
                                    <i class="fa fa-rocket mr-2"></i> Choose Variant</button>
                                </div> -->
                            @endif
                            <!-- Blog Short Description -->
                            <div class="product-short-para">
                                <div class="product-info sid-short">
                                    @if($data['product']->type != 'variation')
                                        <div class="pb--10 product-meta">SKU: <span>{{ $data['product']->sku }}</span></div>
                                    @endif
                                    {!!  $stock_info['message'] !!}
                                    @if(trim($data['product']->short_description) != null)
                                        <p>
                                            {!! nl2br(strip_tags($data['product']->short_description)) !!}
                                        </p>
                                    @endif
                            
                                    {!!  \App\Models\Product::printSetProducts($data['product']) !!}
                                </div>
                                @foreach($data['sub_products'] as $sub_product)
                                    @php
                                        $uniq_id = uniqid();
                                        $stock_info = \App\Models\Product::printStockInformation($sub_product);
                                    @endphp
                                    <div class="product-info d-none sid-{{ $sub_product->id }}">
                                        <h6 class="pb--10 product-meta">SKU: <span>{{ $sub_product->sku }}</span></h6>
                                        {!!  $stock_info['message'] !!}
                                        @if(trim($sub_product->short_description) != null)
                                            <p>
                                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                                            </p>
                                        @endif

                                        {!!  \App\Models\Product::printSetProducts($sub_product) !!}
                                    </div>
                                @endforeach
                            </div>
                            @if(isset($data['banner']))
                                <div class="pb-2">
                                    {!! $data['banner'] !!}
                                </div>
                            @endif
                            
                            <form class="frm_add_to_cart" method="post" action="cart">
                                @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">{{ \App\Models\Product::$variation_caption[$data['product']->variation_select] }}</h5>
                                            {{-- <select class="form-control" id="product_id_selector" name="product_id_selector" onchange="setVariation(this.value)">
                                                <option value="">Please Select ...</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 data-discount="{{ $price_info['discount_percentage'] }}" data-is-set="{{ $sub_product->is_set }}" data-engravable="{{ $sub_product->engravable }}" data-sku="{{ $sub_product->sku }}" value="{{ $sub_product->id }}" id="{{ $sub_product->sku }}">{{ $caption }}</option>
                                                @endforeach
                                            </select> --}}
                                            @foreach($data['sub_products'] as $sub_product)
                                                @php
                                                    if(trim($sub_product->additional_information) != null)
                                                        $show_specs = true;

                                                    $image = 'up_data/na.jpg';
                                                    if($sub_product->image != '')
                                                        $image = 'up_data/products/images/medium/'.$sub_product->image;
                                                    
                                                    $caption = $sub_product->name;
                                                    if(trim($sub_product->variation_caption) != null)
                                                        $caption = $sub_product->variation_caption; 
                                                    
                                                    $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');      
                                                @endphp
                                                    <div class=" pr-1 pb-1">
                                                        <div><label class="product-selector">
                                                            <input class="sprd-{{ $sub_product->id }} orm-check-input" type="radio" name="product_id" data-discount="{{ $price_info['discount_percentage'] }}" data-is-set="{{ $sub_product->is_set }}" data-engravable="{{ $sub_product->engravable }}" data-sku="{{ $sub_product->sku }}" onclick="setVariation('{{ $sub_product->id }}')" value="{{ $sub_product->id }}" data-id="{{ $sub_product->sku }}">
                                                            &nbsp;{{ $caption }}
                                                        </label></div>
                                                    </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <input type="hidden" name="c_product_id" id="c_product_id" value="" />
                                @else
                                    <input type="hidden" name="product_id" id="product_id" value="{{ $data['product']->id }}" />
                                    <input type="hidden" name="c_product_id" id="c_product_id" value="{{ $data['product']->id }}" />
                                @endif
                                
                                {{--<div class="pb--10">
                                    <a href="javascript:;" data-tooltip-content="#discount-options" class="tipster-discount"><img src="vsi/image/discounts-available.jpg"></a>
                                    <div class="d-none"><div id="discount-options">
                                            <div class="pb--5 pt--5"><img src="vsi/image/10.jpg" alt="Get $10 Discount"></div>
                                            <div class="pb--5"><img src="vsi/image/20.jpg" alt="Get $20 Discount"></div>
                                            <div class="pb--10"><img src="vsi/image/30.jpg" alt="Get $30 Discount"></div>
                                        </div></div>
                                </div>--}}

                                <div class="row pt--15">
                                    <div class="col-md-7">

                                        @if($stock_info['in_stock'] == 'Y')
                                            <div class="btn-block btn-add-to-cart @if($data['product']->type == 'variation') d-none @endif">
                                                <div class="pb-3">
                                                    Quantity: &nbsp; <button class="qty-spinner qty-minus" id="qty-minus" type="button">-</button><input name="qty" id="qty" size="4" value="1" type="text" class="qty-box"><button class="qty-spinner qty-plus" id="qty-plus" type="button">+</button>
                                                </div>
                                                <div>
                                                    <button type="button" class="btn-add-to-cart-detail btn btn--orange text-white" onclick="this.form.cmd.value='buynow';">Buy Now</button>
                                                    <button type="button" class="btn-add-to-cart-detail btn btn_buy_now text-white btn_add_to_cart" onclick="this.form.cmd.value='add2cart';">Add to Cart</button>
                                                </div>
                                                <div class="mt-1 @if(($data['product']->type == 'variation') || ($data['product']->type == 'simple' && $data['product']->is_set == 'N')) d-none @endif" id="div_customize_set_button"><button type="button" class="btn btn-secondary btn-block text-white btn_customize">Customize This Set</button></div>    
                                                <div class="mt-1 d-none" id="div_add_to_set"><button type="button" class="btn btn-outline-success w-auto btn-add-to-custom-set" id="pd-btn-add-to-custom-set" data-product-id="{{ $data['product']->id }}">Add to Custom Set</button></div>    
                                            </div>
                                            <input type="hidden" name="cmd" id="cmd" value="add2cart" />
                                        @endif

                                    </div>
                                    <div class="col-md-5">
                                        <div id="div_custom_engraving" class="d-none">
                                            <img src="vsi/image/get-custom-marking.webp" alt="Get Custom Marking">
                                        </div>
                                    </div>
                                </div>  
                                <input type="hidden" id="hd_current_product_is_set" value="{{ $data['product']->is_set }}">
                                <input type="hidden" id="hd_current_product_type" value="{{ $data['product']->type }}">                              
                            </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->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>
                            {{--<div class="alert alert-warning" role="alert">
                                <i class="fa fa-exclamation-triangle"></i> All instruments are for vetrinary use only, if looking for surgery, please visit <a href="https://www.germedusa.com" style="text-decoration: underline;" target="_blank">GerMedUSA.com</a>, for Dental please visit <a href="https://www.gerdentusa.com" style="text-decoration: underline;" target="_blank">GerDentUSA.com</a>
                            </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 class="col-md-3 pb-5 right-side-box">
                        <div>
                            <div class="text-center pt--50">

                                @if(count($data['promos']) > 0)
                                    <div>
                                        @foreach($data['promos'] as $promo)
                                            <span class="pl--5 pr--5"><button data-toggle="modal" data-target="#promo-modal-{{ $promo['id'] }}" type="button" class="active-promo"><i class="fas fa-tags"></i> {{ $promo['text'] }}</button></span>
                                        @endforeach
                                        <hr style="width:95%">
                                    </div>
                                @endif

                                <button id="chat_now_btn" type="button" class="btn btn-rounded btn--orange text-white w-75"><i class="fa fa-comment mr-2"></i> Chat Now</button>
                                <a href="tel:(833) 906-7575" type="button" id="chat_now_btn" class="btn btn-rounded btn_buy_now text-white mt-3 w-75"><i class="fas fa-phone mr-2 fa-flip-horizontal"></i> (833) 906-7575</a>
                                @if($data['faqs'] != null)
                                    <button type="button" class="faqs_product_btn btn btn-rounded btn-secondary text-white mt-3 w-75"><i class="fa fa-question-circle mr-2"></i> FAQs of This Product</button>
                                @endif
                            </div>
                            <div class="pl-4 pr-4">
                                <div class="mt-5">Returns & Warranty <a href="javascript:;" data-tooltip-content="#returns_and_warranty_info" class="product-right-tips float-right"><i class="fas fa-info-circle" id="warranty_box_icon"></i></a></div>
                                <p class="mt-3"><img src="vsi/image/blue-check.jpg"> <span class="ml-2">German Forged</span></p>
                                <p class="mt-1"><img src="vsi/image/blue-check.jpg"> <span class="ml-2">Free Repair and Sharpening</span></p>
                                <p class="mt-1"><img src="vsi/image/sheild.jpg"> <span class="ml-2">5 Years Warranty</span></p>
                                <div class="d-none">
                                    <span id="returns_and_warranty_info" class="w-350">
                                        <h6 class="pt-2 pb-2">Return & Warranty</h6>
                                        <strong><i class="fas fa-undo"></i> Easy Returns</strong>
                                        <span class="pt-2 pb-2">If any of GerVetUSA instrument Malfunctions or conk outs, we’re here to repair or replace your instrument depending upon the warranty of the tool.</span>
                                        <hr>
                                        <strong><i class="fas fa-shield-alt"></i> Warranty Details</strong>
                                        <p>
                                            <span class="pt-2 pb-2">The below instruments manufactured by GerVetUSA have limited warranties:</span><br>
                                            &bull; Tungsten carbide Scissors > 5 years<br>
                                            &bull; Tungsten Carbide Needle holders > 1 year<br>
                                            &bull; Diamond Dust instruments > 1 year<br>
                                            &bull; Titanium instruments > 3 years<br>
                                            &bull; Silver or Chrome plated instruments > 1 year<br>
                                            &bull; Super-cut scissors > 1 year
                                        </p>
                                    </span>
                                </div>
                                <div class="mb-2 text-center">
                                    <a target="_blank" class="btn btn-outline-dark btn-rounded w-auto" href="pages/returns-refunds-and-exchanges"><i class="fa fa-box-open" aria-hidden="true"></i> &nbsp; Want to Return / Exchange?</a>
                                </div>
                            </div>
                            <div class="pl-4 pr-4 pt--5">
                                <div class="mt-2">Delivery <a href="javascript:;" data-tooltip-content="#delivery_info" class="product-right-tips float-right"><i class="fas fa-info-circle"></i></a></div>
                                @if($data['free_shipping']) <p class="mt-3"><img src="vsi/image/red-check.jpg"> <span class="ml-2">Free Ground Shipping</span></p> @endif
                                <img class="mt--10" src="{{asset('vsi/image/shipping-options.png')}}">
                                <div class="d-none">
                                    <span id="delivery_info" class="w-350">
                                        <h6 class="pt-2 pb-2">Shipping Options</h6>
                                        <strong><i class="fas fa-shipping-fast"></i> Worldwide Shipping</strong>
                                        <span class="pt-2 pb-2">
                                            We ship via UPS and USPS. Any orders which exceed $300.00 or more automatically qualify for free standard (ground) shipping (US Only), this excludes Puerto Rico, Hawaii & Alaska.
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="pl-4 pr-4 pt--15">
                                <div class="mt-2">Payments <a href="javascript:;" data-tooltip-content="#payment_info" class="product-right-tips float-right"><i class="fas fa-info-circle"></i></a>
                                </div>
                                <img class="mt-10" width="280px" src="{{asset('img/frontend/payment.jpg')}}">
                                <div class="d-none">
                                    <span id="payment_info" class="w-350">
                                        <h6 class="pt-2 pb-2">Payment Options</h6>
                                        <strong><i class="fas fa-lock"></i> Secure and Reliable</strong>
                                        <span class="pt-2 pb-2">
                                            Your credit card is processed securely through our own credit card processing service, each transaction is verified against name, address and CVV numbers, your card is being removed from our system after processing the transaction.
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="pl-4 pr-4 pt--25 text-center">
                                <a id="link-product-qr-code" title="Get QR Code of this Product" onclick="show_qr_code({{ $data['product']->id }});" href="javascript:;" class="btn btn-outline-dark btn-rounded w-auto"><i class="fa fa-qrcode"></i> &nbsp;Get the QR Code of This Product</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="review-section pt--60" id="tabs_section">
            <h2 class="sr-only d-none">Product Review</h2>
            <div class="container">
                <div class="product-details-tab">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">DESCRIPTION</a>
                        </li>
                        @if($show_specs)
                        <li class="nav-item">
                            <a class="nav-link" id="specs-tab" data-toggle="tab" href="#specs" role="tab" aria-controls="specs" aria-selected="true">SPECIFICATIONS</a>
                        </li>
                        @endif
                        @if($data['faqs'] != null)
                            <li class="nav-item">
                                <a class="nav-link" id="faqs-tab" data-toggle="tab" href="#faqs" role="tab" aria-controls="faqs" aria-selected="false">FREQUENTLY ASKED QUESTION</a>
                            </li>
                        @endif
                        @if(count($data['videos']) > 0 || count($videos) > 0)
                            <li class="nav-item">
                                <a class="nav-link" id="videos-tab" data-toggle="tab" href="#videos" role="tab" aria-controls="videos" aria-selected="false">VIDEOS</a>
                            </li>
                        @endif
                        @if(count($data['files']) > 0)
                            <li class="nav-item">
                                <a class="nav-link" id="files-tab" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">FILES / MANUALS</a>
                            </li>
                        @endif
                        <li class="nav-item">
                            <a class="nav-link" id="warranty-tab" data-toggle="tab" href="#warranty" role="tab" aria-controls="warranty" aria-selected="false">WARRANTY</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">REVIEWS</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                            <article>
                                <div class="product-full-para hover-light-blue">
                                    <div class="product-info sid-short">
                                        @if(trim($data['product']->full_description) != null)
                                            {!! $data['product']->full_description !!}
                                        @endif
                                    </div>
                                    @foreach($data['sub_products'] as $sub_product)
                                        <div class="product-info d-none sid-{{ $sub_product->id }}">
                                            @if(trim($sub_product->full_description) != null)
                                                {!! $sub_product->full_description !!}
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </article>
                        </div>
                        @if($show_specs)
                        <div class="tab-pane fade" id="specs" role="tabpanel" aria-labelledby="specs-tab">
                            <article>
                                <div class="product-full-para">
                                    <div class="product-info sid-short">
                                        {!!  \App\Models\Product::printAddtionalInformation($data['product']->additional_information) !!}
                                    </div>
                                    @foreach($data['sub_products'] as $sub_product)
                                        <div class="product-info d-none sid-{{ $sub_product->id }}">
                                            {!!  \App\Models\Product::printAddtionalInformation($sub_product->additional_information) !!}
                                        </div>
                                    @endforeach
                                </div>
                            </article>
                        </div>
                        @endif
                        @if($data['faqs'] != null)
                        <div class="tab-pane fade show" id="faqs" role="tabpanel" aria-labelledby="faqs-tab">
                            @include('includes.partials.faqs')
                        </div>
                        @endif
                        @if(count($data['videos']) > 0 || count($videos) > 0)
                            <div class="tab-pane fade" id="videos" role="tabpanel" aria-labelledby="videos-tab">
                                <div class="row">
                                    @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="javascript:;" onclick="open_video_modal('{{ $video->name }}');" class="product_video">
                                                <span class="fa fa-play"></span>
                                                <img src="{{ $img_path }}" class="img-thumbnail img-rounded" />
                                            </a>
                                            <div class="text-center pt--5">{{ $video->title }}</div>
                                        </div>
                                    @endforeach
                                    @foreach($videos as $video)
                                        @if(isset($video->video_id))
                                        <div class="col-3">
                                            <a href="javascript:;" onclick="open_video_modal('{{ $video->video_id }}','external','{{ $video->source }}');" class="product_video">
                                                <span class="fa fa-play"></span>
                                                <img src="{{ $video->large_url }}" class="img-thumbnail img-rounded" />
                                            </a>
                                            <div class="text-center pt--5">{{ $video->title }}</div>
                                        </div>
                                        @endif
                                    @endforeach
                                </div>
                            </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 class="tab-pane fade" id="files" role="tabpanel" aria-labelledby="files-tab">
                                <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
                        <div class="tab-pane fade" id="warranty" role="tabpanel" aria-labelledby="files-tab">
                            <div class="row">
                                <div class="col-md-12">
                                    {!! $data['warranty'] !!}
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <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::open(array('route' => ['frontend.review.store'], 'method' => 'POST', 'id' => 'review_form')) !!}
                                    @csrf
                                    {!! Form::hidden('product_id', $data['product']->id) !!}
                                    <h2 class="title-lg 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 pt-2">
                                        <p class="d-block">Your Rating</p>
                                        <span class="rating-widget-block">
                                            <input type="radio" name="rating" value="1" id="star1">
                                            <label for="star1"></label>
                                            <input type="radio" name="rating" value="2" id="star2">
                                            <label for="star2"></label>
                                            <input type="radio" name="rating" value="3" id="star3">
                                            <label for="star3"></label>
                                            <input type="radio" name="rating" value="4" id="star4">
                                            <label for="star4"></label>
                                            <input type="radio" name="rating" value="5" id="star5">
                                            <label for="star5"></label>
                                        </span>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="message">Comment</label>
                                                    <textarea name="comments" required id="comments" cols="30" rows="10" class="form-control"></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-control">
                                                </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-control">
                                                </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-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="submit-btn">
                                                    <button type="submit" class="btn btn-black">Post Comment</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
                <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>
        <!-- Product Video Modal -->
        <section class="related-products-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 class="petmark-slick-slider border normal-slider" data-slick-setting='{
                                    "autoplay": true,
                                    "autoplaySpeed": 3000,
                                    "slidesToShow": 5,
                                    "arrows": true
                                }'
                            data-slick-responsive='[
                                    {"breakpoint":991, "settings": {"slidesToShow": 3} },
                                    {"breakpoint":480, "settings": {"slidesToShow": 1,"rows" :1} }
                                ]'>
                            @foreach($data['related_products'] as $product)
                                {!! \App\Models\Product::productBlock($product) !!}
                            @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="petmark-slick-slider border normal-slider" data-slick-setting='{
                                    "autoplay": true,
                                    "autoplaySpeed": 3000,
                                    "slidesToShow": 5,
                                    "arrows": true
                                }'
                            data-slick-responsive='[
                                    {"breakpoint":991, "settings": {"slidesToShow": 3} },
                                    {"breakpoint":480, "settings": {"slidesToShow": 1,"rows" :1} }
                                ]'>
                            @foreach($data['recommended_products'] as $product)
                                {!! \App\Models\Product::productBlock($product) !!}
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </section>
    </main>
@endsection
@push('after-scripts')
    <!-- <script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.2.0/dist/jBox.all.min.js"></script> -->
    <script>
        $(document).ready(function(){
            $('#chat_now_btn').click(function(){
                window.$_LHC.eventListener.emitEvent('showWidget');
            });
            /*$('#warranty_box_icon').jBox('Tooltip', {
                theme: 'TooltipBorder',
                content: '7 Days Returns - Change of mind is not applicable as a Return Reason for this product',
                position: {
                x: 'left',
                y: 'center'
                },
                width: 500,
                height: 300,
                outside: 'x',
                content: '7 Days Returns - Change of mind is not applicable as a Return Reason for this product',
                trigger: 'click',
                pointer: 'bottom:25',
                adjustPosition: true,
                adjustTracker: true,
                closeOnClick: true,
                adjustDistance: {top: 200, right: 5, bottom: 5, left: 5},
                onInit: function() {
                // this.options.height = ($(window).height() - 200);
                },
                zIndex: 8000
            });
            $('#delivery_box_icon').jBox('Tooltip', {
                theme: 'TooltipBorder',
                content: '7 Days Delivery - Change of mind is not applicable as a Return Reason for this product',
                position: {
                x: 'left',
                y: 'center'
                },
                width: 500,
                height: 300,
                outside: 'x',
                content: '7 Days Delivery - Change of mind is not applicable as a Return Reason for this product',
                trigger: 'click',
                pointer: 'bottom:25',
                adjustPosition: true,
                closeOnClick: true,
                adjustTracker: true,
                adjustDistance: {top: 200, right: 5, bottom: 5, left: 5},
                onInit: function() {
                // this.options.height = ($(window).height() - 200);
                },
                zIndex: 8000
            });*/
        });
        //chat popup
        var openedWindow;
        function openWindow(url)
        {
            openedWindow = window.open(url , "SignIn", "width=500,height=700,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=" + 500 + ",top=" + 200);
        }
    </script>
    @if($data['product']->type == 'variation')
        <script>
            @if($data['sid'] != '')

                $(document).ready(function() {
                    setVariation('{{ $data['sid'] }}');
                });

            @endif

            $(document).ready(function() {
                let hash = window.location.hash;
                if(hash)
                {
                    setVariation(hash, true, true);
                }
                else 
                {
                    @if(request()->get('s') == '')
                    show_variations_selector();
                    @endif
                }
            });
        </script>
    @endif
    
    {{-- ambiguous means not sure if these cdns being used or not --}}
    {{--<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" media="screen">
    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>--}}
    <script type="text/javascript" src="vsi/tooltipster/dist/js/tooltipster.bundle.min.js"></script>
    {{-- ambiguuos links ends --}}

    @if($data['product']->type == 'simple')
        <script>
            $(function(){
                set_engraving('{{ $data['product']->engravable }}');
            });
        </script>
    @endif

    <!-- Modal -->
    @foreach($data['promos'] as $promo)
        <div class="modal fade" id="promo-modal-{{ $promo['id'] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <img src="up_data/coupons/{{ $promo['image'] }}">
                        <br>
                        <input type="text" value="{{ $promo['code'] }}" id="myInput_{{ $promo['id'] }}" class="coupon-field">
                        <a href="javascript:;" onclick="copy_coupon('myInput_{{ $promo['id'] }}');" class="pt-2">COPY COUPON CODE</a>
                        <div class="d-none coupon-success" id="coupon-success_myInput_{{ $promo['id'] }}" role="alert">
                            Coupon code copied successfully!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    @if($data['product']->type == 'variation')

    <div class="modal fade" id="variation_selector" tabindex="-1" role="dialog" aria-labelledby="title_variation_selector" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center variation_selector_body">
                    <div class="pb-4 text-uppercase">
                        <h5 id="vs_caption">Click The Product You Want to See</h5>
                    </div>
                    <div class="row">
                        @foreach($data['sub_products'] as $sub_product)
                            @php
                                $image = 'up_data/na.jpg';
                                if($sub_product->image != '' && file_exists($image))
                                    $image = 'up_data/products/images/thumbnails/'.$sub_product->image;

                                $caption = $sub_product->sku;
                                if(trim($sub_product->variation_caption) != null)
                                    $caption = $sub_product->variation_caption;     
                            @endphp
                            <div class="col-md-3 pb-4">
                                <a onmouseover="$('#vs_caption').text('{{ $sub_product->name }}');" title="{{ $sub_product->name }}" class="product-list" data-dismiss="modal" href="javascript:;" onclick="$('.sprd-{{ $sub_product->id }}').click();">
                                    <img src="{{ $image }}" alt="">
                                    <div>
                                        {{ $caption }}
                                    </div>
                                </a>
                            </div>
                        
                        @endforeach                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    @endif

    <div class="modal fade" id="image_viewer" tabindex="-1" role="dialog" aria-labelledby="title_image_viwer" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <div class="row">
                        <div class="col-md-8">
                            <div id="image_viewer_large">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div id="image_viewer_title">
                            </div>
                            <div id="image_viewer_thumbnails">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-none">
        <span id="free_ground_shipping" class="w-350">
            <h6 class="pt-2 pb-2">Get Free Ground Shipping</h6>
            <strong><i class="fas fa-shipping-fast"></i> With This Product You Can Get Free Ground Shipping</strong>
            <span class="pt-2 pb-2">
                We offer Free Ground Shipping for orders above $200, by ordering this product, you can avail the free ground shipping and save the shipping cost.
                <br><em>For US Only</em>
            </span>
        </span>
    </div>

    <div class="modal fade" id="modal_qr_code" tabindex="-1" role="dialog" aria-labelledby="modal_qr_codeTitle" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center" id="modal_qr_code_body">
                </div>
            </div>
        </div>
    </div>
@endpush