@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']);
@endphp
@section('title', $title)
@section('meta_url', URL::Current())
@section('page_title', $title)
@section('product_description',$data['product']->meta_description)
@section('image',URL::to('/').'/up_data/products/images/large/'.$data['product']->image)
@section('image:width', "300")
@section('image:height', "200")

@push('schema')
    @component('frontend.layouts.schema')

    {
        "@context": "http://schema.org",
        "@type": "WebPage",
        "id": "https://www.germedusa.com//#homepage",
        "breadcrumb": [
            "https://www.germedusa.com/"
        ],
        "name": "GerMedUSA",
        "url": "https://www.germedusa.com/",
        "keywords": "Surgical Instruments, Surgery Tools, Surgical Equipments",
        "audience": [
            {
                "@type": "MedicalAudience",
                "audienceType": "surgeons"
            },
            {
                "@type": "MedicalAudience",
                "audienceType": "nurses"
            },
            {
                "@type": "MedicalAudience",
                "audienceType": "medical students"
            }
        ],
        "mainEntity": [
            {
                "@context": "https://schema.org/",
                "@type": "Product",
                "@id": "https://wwww.germedusa.com/{{ $data['product']->slug }}/#Product",
                "url": "https://wwww.germedusa.com/{{ $data['product']->slug }}",
                "name": "{{ $data['product']->name }}",
                "description": "{{ $data['product']->short_description }}",
                "keywords": "{{ $data['product']->meta_keywords }}",
                "brand": {
                    "@type": "Brand",
                    "name": "GerMedUSA"
                },
                "offers": {
                    "@type": "AggregateOffer",
                    @if($data['product']->type == 'variation')
                        "highPrice": "{{ $data['product']->max }}",
                        "lowPrice": "{{ $data['product']->min }}",
                    @else
                        highPrice": "{{ $data['product']->price_catalog }}",
                        "lowPrice": "{{ $data['product']->price_discounted }}",
                    @endif
                    "priceCurrency": "USD",
                    "sku": "{{ $data['product']->sku }}",
                    "itemCondition": "https://schema.org/NewCondition",
                    "availability": "https://schema.org/InStock"
                },
                "image": [
                    "https://www.germedusa.com/up_data/products/images/large/{{ $data['product']->image }}"
                ]
            }
        ]
    }
    @endcomponent
@endpush

@if(trim($data['product']->meta_description) != null && $data['product']->meta_description != 'NULL')
    @section('meta_description', $data['product']->meta_description)
    @section('meta_keywords', $data['product']->meta_keywords)
@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')
    @if(isset($no_index))
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endif
    <link rel="canonical" href="{{ $url }}" />
    <link rel="stylesheet" type="text/css" href="static/assets/tooltipster/dist/css/tooltipster.bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="static/assets/tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" />
@endpush
@section('content')
<style>
    .tooltip-inner{
    max-width: 400px;
    height: auto;
    line-height: 22px;
    font-size: 11px;
    background-color:#f4f4f4;
    color: #333;
    padding: 0px;
    margin: 0 20px 0 0;
}


</style>
<div class="row">
            <div class="col-md-12 mb-2">
                <div id="main-banner-after-header"  class="bg-buttery-white align-items-center d-flex banner-3 justify-content-center">
                <h1 class="h1-tag title category_detail_heading" style="font-size:40px !important;">
                    {{$data['product']->name}}
                </h1>
                </div>
            </div>
</div>

@include('includes.partials.bread-crumbs')

    <div class="product_details mt-30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="product-single-container product-single-default">
                        <div class="row">
                            <div class="sidebar-shop col-md-6 col-lg-3  product-single-gallery">
                                <div class="sidebar-wrapper text-center">
                                    <div class="product-slider-container product-item">
                                        <div id="main_image_container" class="">
                                            @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" class="detail-page-image" width="270" height="270" data-src="up_data/products/images/medium/{{ $data['product']->image }}" alt="{{ $data['product']->name }}" />
                                                </a>
                                                <div class="text-center gallery_img_text">
                                                    <a class="main_image_link h6" href="javascript:;" data-type="image" data-title="{{ $data['product']->name }}" data-href="up_data/products/images/large/{{ $data['product']->image }}">
                                                        <i class="zmdi zmdi-search"></i> Click to see large image
                                                    </a>
                                                </div>
                                            @else
                                                <img id="main_image" class="detail-page-image" src="up_data/na.jpg" alt="{{ $data['product']->name }}"/>
                                            @endif
                                        </div>
                                        <!-- End .product-single-carousel -->
                                    </div>
                                    <div id="product-view-gallery" !class="elevate-gallery">
                                        @php
                                            $videos = [];
                                            if($data['product']->video_id > 0)
                                            {
                                                $videos[$data['product']->video_id] = $data['product']->video;
                                            }
                                        @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" 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" data-src="up_data/products/images/thumbnails/{{ $image->name }}" alt="{{ $data['product']->name }}" width="50" height="50"/>
                                                    </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="smid-{{ $sub_product->id }} 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" data-src="up_data/products/images/thumbnails/{{ $image->name }}" alt="{{ $sub_product->name }}" width="50" height="50"/>
                                                    </a>
                                                @endif
                                            @endforeach
                                            @php
                                                if($sub_product->video_id > 0)
                                                {
                                                    $videos[$sub_product->video_id] = $sub_product->video;
                                                }
                                            @endphp
                                        @endforeach
                                        @foreach($videos as $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>
                                        @endforeach
                                    </div>
                                </div><!-- End .sidebar-wrapper -->
                            </div><!-- End .col-lg-3 -->
                            <div class="col-md-6">
                                <div class="product-single-details bg-ivory p-3">
                                    <h2 class="product-title h5 product-info sid-heading">{{ $data['product']->name }}</h2>
                                    @foreach($data['sub_products'] as $sub_product)
                                        <h2 class="product-title h5 product-info d-none sid-{{ $sub_product->id }}">{{ $sub_product->name }}</h2>
                                    @endforeach
                                    <div class="product-short-para">
                                        <div id="product-info-check">
                                            <div class="product-info sid-short">
                                                <div class="pb-3 product-sku product-meta">SKU: <span>{{ $data['product']->sku }}</span></div>
                                                {!!  $stock_info['message'] !!}
                                                @if(trim($data['product']->short_description) != null && $data['product']->short_description != 'NULL')
                                                    <div class="product_desc pt-3">
                                                        <p>
                                                            {!! nl2br(strip_tags($data['product']->short_description)) !!}
                                                        </p>
                                                    </div>
                                                @endif
                                                {!!  \App\Models\Product::printSetProducts($data['product']) !!}
                                            </div>
                                            @foreach($data['sub_products'] as $sub_product)
                                                @php
                                                    $stock_info = \App\Models\Product::printStockInformation($sub_product);
                                                @endphp
                                                <div class="product-info d-none sid-{{ $sub_product->id }}">
                                                    <div class="pb-3 product-sku product-meta">SKU: <span>{{ $sub_product->sku }}</span></div>
                                                    {!!  $stock_info['message'] !!}
                                                    @if(trim($sub_product->short_description) != null && $sub_product->short_description != 'NULL')
                                                        <div class="product_desc pt-3">
                                                            <p>
                                                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                                                            </p>
                                                        </div>
                                                    @endif
                                                    {!!  \App\Models\Product::printSetProducts($sub_product) !!}
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="product-detail-splitter pb-2"></div>
                                    @if(isset($data['banner']))
                                        <div class="pb-5">
                                            {!! $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" id="parent_id" value="{{ $data['product']->id }}" />
                                            <div class="product-variable-block">
                                                <div class="variation-select">
                                                    <h2 class="title product-meta h6 mb-1"><span>Please select the size you want to order</span></h2>
                                                    <div id="radio-btn-check">
                                                        @foreach($data['sub_products'] as $sub_product)
                                                            <div class="form-check">
                                                                <label class="form-check-label" style="display: inline-block;">
                                                                    <input class="form-check-input" type="radio" name="product_id" data-in-stock="{{ $sub_product->in_stock }}" data-sku="{{ $sub_product->sku }}" data-is-set="{{ $sub_product->is_set }}" onclick="setVariation('{{ $sub_product->id }}')" value="{{ $sub_product->id }}">
                                                                     {{ $sub_product->name }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    <br />
                                                    @foreach($data['sub_products'] as $sub_product)
                                                        <div class="price-box price product-info d-none sid-{{ $sub_product->id }}">
                                                            @php
                                                                $price_info = \App\Models\Product::getPriceText($sub_product, 'detail', $data['show_special_price']);
                                                                echo $price_info['price_text'];
                                                            @endphp
                                                        </div>
                                                    @endforeach
                                                    <div id="div_variation_selection_message" class="alert alert-secondary" role="alert">
                                                        Please select the size / variation to see price and buying options.
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="price-box">
                                                @php
                                                    $price_info = \App\Models\Product::getPriceText($data['product'], 'detail', $data['show_special_price']);
                                                    echo $price_info['price_text'];
                                                @endphp
                                            </div>
                                            <input type="hidden" name="product_id" value="{{ $data['product']->id }}" />
                                        @endif
                                        {{--@if(request()->session()->get('ses_show_prices') != 'yes' && !$data['show_special_price'])
                                            <div class="product-detail-newsletter-message"> <i class="fa fa-exclamation-triangle"></i> <a href="javascript:;" class="top-newsletter-link">Subscribe</a> or <a href="register">Register</a> to see our discounted prices.</div>
                                        @endif--}}
                                        @if($stock_info['in_stock'] == 'Y')
                                            {{-- <div class="product-action product-all-icons add_to_cart_button_container product_variant quantity @if($data['product']->type == 'variation') d-none @endif">
                                                <div class="product-single-qty">
                                                    <input class="horizontal-quantity form-control" name="qty" id="qty" max="100" value="1" type="text">
                                                </div><!-- End .product-single-qty -->
                                            </div><!-- End .product-action --> --}}

                                            <div class="quantity product-action product-all-icons add_to_cart_button_container product_variant quantity @if($data['product']->type == 'variation') d-none @endif">
                                                <div class="cart-plus-minus product-single-qty">
                                                    <input class="cart-plus-minus-box horizontal-quantity" oninput="this.value = Math.abs(this.value)"  name="qty" id="qty" max="100" min="1" value="1" type="number">
                                                    <div class="dec qtybutton"><i class="zmdi zmdi-chevron-down"></i></div>
                                                    <div class="inc qtybutton"><i class="zmdi zmdi-chevron-up"></i></div>
                                                <div class="dec qtybutton"><i class="zmdi zmdi-chevron-down"></i></div><div class="inc qtybutton"><i class="zmdi zmdi-chevron-up"></i></div></div>
                                                <div class="bg-danger my-2 px-2 quantity-error rounded text-bg-dark w-50">
                                                </div>
                                                @if($data['product']->status == 'Y')
                                                    <div class="float-start pr-10"><button class="paction add-cart btn-add-to-cart button_for_new_design my-3" type="submit" data-page="detail" data-product-id="{{ $data['product']->id }}"><i class="icon-basket"></i> add to cart</button></div>

                                                    <div class="float-start @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="paction button_for_new_design my-3 btn_customize"><i class="icon-pencil"></i> Customize This Set</button></div>    
                                                    <div class="float-start d-none" id="div_add_to_set"><button type="button" class="button btn-add-to-custom-set my-3" id="pd-btn-add-to-custom-set" data-product-id="{{ $data['product']->id }}">Add to Custom Set</button></div>    
                                                    <div class="clearfix"></div>

                                                    <input type="hidden" name="c_product_id" id="c_product_id" value="{{ $data['product']->id }}" />
                                                @else
                                                    <div class="red-button w-50 mb-2">Sorry,This product is not available at this time.</div>
                                                @endif
                                            </div>


                                        @endif


                                        <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>
                                    <div class="product-meta">
                                        Categories:
                                        <span>
                                            @foreach($data['product_categories'] as $cats)
                                                <a href="{{ $cats->slug }}">{{ $cats->name }}</a>
                                                @if (!$loop->last)
                                                    ,
                                                @endif
                                            @endforeach
                                        </span>
                                    </div>
                                </div><!-- End .product-single-details -->
                                <div class="pt-4"></div>
                            </div><!-- End .col-lg-5 -->
                            <div class="col-lg-3 pb-5 right-side-box">
                                <div class="pt-5 bg-light">
                                    <div class="text-center pt--60 btn-wrapper">
                                    <button id="chat_now_btn" type="button" class=" red-button w-75 chat-button"><i class="zmdi zmdi-comment-text mr-2"></i> Chat Now</button>

                                        <a href="tel:516-997-2180" type="button" id="call_now_btn" class="btn_buy_now text-white mt-3 w-75 phone-btn"><i class="zmdi zmdi-phone mr-2 fa-flip-horizontal"></i> 516-997-2180</a>
                                    </div>
                                    <div class="p-4">


                                        <div>
                                            <div class="mt-5 return_and_warranty">Returns & Warranty <a href="javascript:;" data-tooltip-content="#returns_and_warranty_info" class="product-right-tips float-right" aria-label="Returns & Warranty Information"><i class="zmdi zmdi-info zmdi-info-icon" id="warranty_box_icon"></i></a></div>
                                            <p class="mt-1"><img data-src="static/assets/images/blue-check.jpg" alt="German Forged" width="16" height="16"><span class="ml-2 ms-1 german_forged">German Forged</span></p>
                                            {{--<p class="mt-1"><img src="static/assets/images/blue-check.jpg" alt="Free Repair and Sharpening"> <span class="ml-2">Free Repair and Sharpening</span></p>--}}
                                            <p class="mt-1"><img data-src="static/assets/images/sheild.jpg" alt="5 Years Warranty" width="17" height="23"><span class="ml-2 ms-1 five_year_warranty">5 Years Warranty</span></p>
                                            <div class="d-none" >
                                                <div id="returns_and_warranty_info" class="w-20">
                                                    <h4 class="pt-2 mb-1">Return & Warranty</h4>
                                                    <strong><i class="fas fa-undo"></i> Easy Returns</strong>
                                                    <span class="pt-2 pb-2">If any of our instrument Malfunctions or conk outs, we’re here to repair or replace your instrument depending upon the warranty of the tool.</span>
                                                    <!-- <div class="tooltip-sep"></div> -->
                                                    <strong><i class="fas fa-shield-alt"></i> Warranty Details</strong>
                                                    <p>
                                                        <span class="pt-2 pb-2">The below instruments manufactured by GerMedUSA 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>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="mt-2 delivery_text">Delivery <a href="javascript:;" data-tooltip-content="#delivery_info" class="product-right-tips float-right" aria-label="Delivery Information"><i class="zmdi zmdi-info zmdi-info-icon"></i></a></div>
                                            @if(isset($data['free_shipping']) && $data['free_shipping']) <p class="mt-3"><img src="static/assets/images/red-check.jpg" alt="FREE Delivery Canada/USA"> <span class="ml-2">FREE Delivery Canada/USA</span></p> @endif
                                            <img class="mt-1" src="static/assets/images/shipping-options.png" alt="Shipping Options" width="207" height="35">
                                            <div class="d-none">
                                                <div id="delivery_info" class="w-350">
                                                    <h4 class="pt-2 mb-1">Shipping Options</h4>
                                                    <strong><i class="fas fa-shipping-fast"></i> Worldwide Shipping</strong>
                                                    <span class="pt-2 pb-2">
                                                        We ship via UPS and USPS. Any First time Orders which exceed $300.00 or more automatically qualify for free standard shipping (US Only), this excludes Puerto Rico, Hawaii & Alaska.
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="mt-2 payment_text">Payments <a href="javascript:;" data-tooltip-content="#payment_info" class="product-right-tips float-right" aria-label="Payment Information"><i class="zmdi zmdi-info zmdi-info-icon"></i></a></div>
                                            <img class="mt-1" width="280px" src="static/assets/images/payment.jpg" alt="Payment Options" width="240" height="37">
                                            <div class="d-none">
                                                <div id="payment_info" class="w-350">
                                                    <h4 class="pt-2 mb-1">Payment Options</h4>
                                                    <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>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

                                </div>
                            </div>
                        </div><!-- End .row -->
                    </div><!-- End .product-single-container -->
                </div>
                <div class="pt-5 pb-5 col-lg-12 overflow-hidden">
                    <div class="product-single-tabs">
                        <ul class="nav nav-tabs" role="tablist" aria-owns="description-tab @if(count($data['videos']) > 0) videos-tab @endif @if(count($data['files']) > 0) files-tab @endif reviews-tab" aria-label="Product Media Tabs">
                            <li class="nav-item">
                                <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" tabindex="0" option="0" aria-controls="description" aria-selected="true" selected>Description</a>
                            </li>
                            @if(count($data['videos']) > 0)
                                <li class="nav-item">
                                    <a class="nav-link" id="videos-tab" data-toggle="tab" href="#videos" role="tab" tabindex="-1" option="2" 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" tabindex="-1" option="3" aria-controls="files" aria-selected="false">FILES / MANUALS</a>
                                </li>
                            @endif
                            <li class="nav-item">
                                <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" tabindex="-1" option="1" aria-controls="reviews" aria-selected="false">REVIEWS</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="description" role="tabpanel" tabindex="0" aria-labelledby="description-tab"  option="0" selected>
                                <div class="product-full-para mt-2">
                                    <div class="product-info sid-short table-bordered">
                                        @if(trim($data['product']->full_description) != null)
                                            {!! $data['product']->full_description !!}
                                        @endif
                                        {!!  \App\Models\Product::printAddtionalInformation($data['product']) !!}
                                    </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
                                            {!!  \App\Models\Product::printAddtionalInformation($sub_product) !!}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @if(count($data['videos']) > 0)
                                <div class="tab-pane fade" id="videos" role="tabpanel" tabindex="0" aria-labelledby="videos-tab" option="2">
                                    <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
                                    </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" tabindex="0" aria-labelledby="files-tab" optionn="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
                            <div class="tab-pane fade" id="reviews" role="tabpanel" tabindex="0" aria-labelledby="reviews-tab" option="1">
                                <div class="review-wrapper">
                                    @if(count($data['reviews']) > 0)
                                        <h5 style="font-weight: 100;" class="title-lg mb--20 mt-2 mb-4">REVIEWS FOR <em>{{ strtoupper($data['product']->name) }}  ( {{ count($data['reviews']) }} )</em></h5>
                                        @foreach($data['reviews'] as $review)
                                            <div class="review-comment mb-2 border-bottom">
                                                @php
                                                    if(env('APP_ENV') == 'local'){
                                                        $basePath = '/storage';
                                                    }else{
                                                        $basePath = '/storage/app/public';
                                                    }
                                                @endphp
                                                <div class="avatar mt-3">
                                                    @if(auth()->user() && auth()->user()->avatar_location != null )
                                                        <img src="{{ url($basePath.'/'.$logged_in_user->avatar_location) }}" class="user-profile-image img-thumbnail" width="80" />
                                                    @else
                                                        <i class="fa fa-user fa-5x"></i>
                                                    @endif
                                                </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>
                                                    <p class="author" style="height: 7px; "><span style="font-weight: 600;">{{ $review->name }}</span>  - <span class="font-weight-400">{{ date('M d, Y', strtotime($review->created_at)) }}</span></p>
                                                    <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) !!}
                                        <h3 class="h6 mt-2 mt-5 title-lg">ADD A REVIEW</h3>
                                        <div class="alert alert-success d-none" id="review_message-contact">
                                            <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">Very Bad</label>&nbsp;
                                                <input type="radio" name="rating" value="2" id="star2">
                                                <label for="star2">Bad</label>&nbsp;
                                                <input type="radio" name="rating" value="3" id="star3">
                                                <label for="star3">Fair</label>&nbsp;
                                                <input type="radio" name="rating" value="4" id="star4">
                                                <label for="star4">Good</label>&nbsp;
                                                <input type="radio" name="rating" value="5" id="star5">
                                                <label for="star5">Excellent</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="input_textarea"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label for="name">Name *</label>
                                                        <input type="text" required name="name" minlength="1" id="name" class="text_input">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label for="email">Email *</label>
                                                        <input type="email" required name="email" id="email_id" class="text_input">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label for="website">Phone</label>
                                                        <input type="text" id="phoneNumber" name="phone" class="text_input review_number phone" minlength="10" maxlength="14">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">

                                                    <div class="submit-btn">
                                                        <button type="submit" class="btn btn-info save_review_btn button_for_new_design my-4">Post Comment</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div><!-- End .product-single-tabs -->
                </div><!-- End .col-lg-9 -->
            </div><!-- End .row -->
        </div><!-- End .container -->
        <!-- 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>
        @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="row">
                                    @foreach($data['related_products'] as $product)
                                        {!! \App\Models\Product::productBlock($product, 'home-new') !!}
                                    @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" id="you-may-like-section">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12">
                                <div class="section_title mt-2">
                                    <h3 class="h5">You May Also Like</h3>
                                </div>
                                <div class="row mb-4" style="left: -2%; position: relative; top: 1%;">
                                    @foreach($data['recommended_products'] as $product)
                                        {!! \App\Models\Product::productBlock($product, 'home-new') !!}
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            <!--product area end-->
        @endif
    </div>
    <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>
    @push('after-scripts')

    <script defer src="/js/custom.js?version=005"></script>
        @if($data['product']->type == 'variation' && $data['sid'] != '')
            <script>
                // $(document).ready(function() {
                //     setVariation('{{ $data['sid'] }}');
                // });
            </script>
        @endif
        <script type="text/javascript" src="static/assets/tooltipster/dist/js/tooltipster.bundle.min.js"></script>
        <script>
            let hash = window.location.hash;
            if(hash)
            {
                setVariation(hash, true);
            }
            $(document).ready(function(){
                $('#chat_now_btn').click(function(){
                    window.$_LHC.eventListener.emitEvent('showWidget');
                });
                $('.product-right-tips').tooltipster({trigger: 'click', side: 'left', theme: 'tooltipster-shadow'});
            });
        </script>
    @endpush
    @push('head-area')
        <script>
            window.__cfRLUnblockHandlers = true;
        </script>
    @endpush
    @push('before-scripts')
        <input type="hidden" value="shop" id="page_id">
        <input type="hidden" value="{{ $data['is_mobile'] }}" id="is_mobile">
    @endpush

@endsection