@extends('frontend.layouts.app')
@php
    if(trim($data['product']->meta_title) != null)
        $title = $data['product']->meta_title;
    else
        $title = $data['product']->name . ' - ' . app_name();

    if($data['product']->do_index == 'N' || $data['product']->status == 'N')
        $no_index = 'NOINDEX';
@endphp
@section('title', $title)
@if(trim($data['product']->meta_keywords) != null)
    @section('meta_keywords', $data['product']->meta_keywords)
@endif
@if(trim($data['product']->meta_description) != null)
    @section('meta_description', $data['product']->meta_description)
@endif
@if($data['product']->is_canonical == 'Y')
    @php
        if($data['product']->canonical_url != '')
            $url = $data['product']->canonical_url;
        else
            $url = URL::to( '/' . $data['product']->slug);
    @endphp
@else
    @php
        $url = URL::current();
    @endphp
@endif
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    <link rel="amphtml" href="{{ $url }}?amp=1" />
    @if(isset($no_index))
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endif

    <style>
        .right-side-box {
            background-color: #fafafa!important;
        }
        .btn-small {
            border-radius: 500px;
            font-size: 14px;
            height: 35px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        .btn--orange {
            background: #c62132;
            color: #fff;
        }
        .btn_buy_now {
            background-color: #2c60bd;
        }
        .pt-30 {
            padding-top: 30px;
        }
    </style>
@endpush
@section('content')
    <!--product area start-->
    <div class="product_details">
        <div class="container">
            <div class="row">
                <div class="col-md-3 pt-30">
                    <div class="product-details-tab text-center">
                        <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 alt="{{ $data['product']->name }}" id="main_image" class="detail-page-image " src="up_data/products/images/medium/{{ $data['product']->image }}" />
                                </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 alt="{{ $data['product']->name }}" id="main_image" class="detail-page-image" src="up_data/na.jpg" alt="{{ $data['product']->name }}"/>
                            @endif
                        </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" 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="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;
                                    }
                                @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>
                </div>
                <div class="col-md-6 pt-30">
                    <div class="product_d_right">
                        <h1 class="product-info sid-heading">{{ $data['product']->name }}</h1>
                        @foreach($data['sub_products'] as $sub_product)
                            <h1 class="product-info d-none sid-{{ $sub_product->id }}">{{ $sub_product->name }}</h1>
                        @endforeach
                        <div class="product-short-para">
                            <div class="product-info sid-short">
                                <div class="pb-3 product-sku">SKU: <span>{{ $data['product']->sku }}</span></div>
                                {!!  \App\Models\Product::printStockInformation($data['product']) !!}
                                @if(trim($data['product']->short_description) != null)
                                    <div class="product_desc pt-3">
                                        <p>
                                            {!! nl2br(strip_tags($data['product']->short_description)) !!}
                                        </p>
                                    </div>
                                @endif
                                {!!  \App\Models\Product::printAddtionalInformation($data['product']) !!}
                            </div>
                            @foreach($data['sub_products'] as $sub_product)
                                <div class="product-info d-none sid-{{ $sub_product->id }}">
                                    <div class="pb-3 product-sku">SKU: <span>{{ $sub_product->sku }}</span></div>
                                    {!!  \App\Models\Product::printStockInformation($data['product']) !!}
                                    @if(trim($sub_product->short_description) != null)
                                        <div class="product_desc">
                                            <p>
                                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                                            </p>
                                        </div>
                                    @endif
                                    {!!  \App\Models\Product::printAddtionalInformation($sub_product) !!}
                                </div>
                            @endforeach
                        </div>
                        <div class="product-detail-splitter pb-4"></div>
                        <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">Please select the variation you want to order</h5>
                                        @foreach($data['sub_products'] as $sub_product)
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="product_id" data-sku="{{ $sub_product->sku }}" onclick="setVariation('{{ $sub_product->id }}')" value="{{ $sub_product->id }}">
                                                    {{ $sub_product->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                        <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');
                                                    echo $price_info['price_text'];
                                                @endphp
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="price_box">
                                    @php
                                        $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');
                                        echo $price_info['price_text'];
                                    @endphp
                                </div>
                                <input type="hidden" name="product_id" value="{{ $data['product']->id }}" />
                            @endif
                            <div class="add_to_cart_button_container product_variant quantity @if($data['product']->type == 'variation') d-none @endif">
                                <label>quantity</label>
                                <input min="1" name="qty" id="qty" max="100" value="1" type="number">
                                <button class="button btn-add-to-cart" type="submit" data-product-id="{{ $data['product']->id }}">add to cart</button>
                            </div>
                        </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>
                    <div class="alert alert-warning" role="alert">
                        <i class="fa fa-exclamation-triangle"></i> All instruments are for Human Dental use only, if looking for Veterinary Instruments, please visit <a href="https://www.gervetusa.com" style="text-decoration: underline;" target="_blank">GerVetUSA.com</a>, for Human Surgical Instruments please visit <a href="https://www.germedusa.com" style="text-decoration: underline;" target="_blank">GerMedUSA.com</a>
                    </div>
                </div>
                <div class="col-md-3 pb-5 right-side-box pt-30">
                    <div>
                        <div class="text-center pt--60">
                            <button id="chat_now_btn" type="button" class="btn btn-rounded btn-small 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-small btn_buy_now text-white mt-3 w-75"><i
                                    class="fa fa-phone mr-2 fa-flip-horizontal"></i> (833) 906-7575</a>
                        </div>
                        <div class="pl-4 pr-4 position-relative">
                            <div class="mt-5">Returns &amp; Warranty
                                <a href="javascript:;" data-tooltip-content="#returns_and_warranty_info" class="product-right-tips float-right tooltipstered" id="warranty_box_link">
                                    <i class="fa 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>
                            <p class="mt-1"><img src="/vsi/image/sheild.jpg"> <span class="ml-2">5 Years Warranty</span></p>

                            <div class="bg-white p-2 position-absolute rounded shadow d-none" id="warranty_box_icon_info" style="top: 0;left: -90px;z-index: 1;width: 300px;">
                                <span id="returns_and_warranty_info" class="w-350">
                                    <h6 class="pt-2 pb-2">Return &amp; Warranty</h6>
                                    <strong><i class="fa fa-undo"></i> Easy Returns:</strong>
                                    <span class="pt-2 pb-2">If any of GerDentUSA's instruments malfunction or conks out, we will repair or replace it depending on the product's warranty.</span>
                                    <hr>
                                    <strong><i class="fa fa-shield-alt"></i> Warranty Details:</strong>
                                    <p>
                                        <span class="pt-2 pb-2">The instruments manufactured by GerDentUSA have limited warranties:</span><br>
                                        • Tungsten carbide Scissors &gt; 5 years<br>
                                        • Tungsten Carbide Needle holders &gt; 1 year<br>
                                        • Diamond Dust instruments &gt; 1 year<br>
                                        • Titanium instruments &gt; 3 years<br>
                                        • Silver or Chrome plated instruments &gt; 1 year<br>
                                        • Super-cut scissors &gt; 1 year<br>
                                        • German stainless instruments &gt; 5 years 
                                    </p>
                                </span>
                            </div>
                        </div>
                        <div class="pl-4 pr-4 pt--5 position-relative">
                            <div class="mt-2">Delivery <a href="javascript:;" data-tooltip-content="#delivery_info"
                                    class="product-right-tips float-right tooltipstered" id="delivery_info_link"><i class="fa fa-info-circle"></i></a></div>
                            <img class="mt-2" src="https://www.gervetusa.com/vsi/image/shipping-options.png">
                            
                            <div class="bg-white p-2 position-absolute rounded shadow d-none" id="delivery_info_wrapper" style="top: 0;left: -90px;z-index: 1;width: 300px;">
                                <span id="delivery_info" class="w-350">
                                    <h6 class="pt-2 pb-2">Shipping Options</h6>
                                    <strong><i class="fa fa-shipping-fast"></i> Worldwide Shipping:</strong>
                                    <span class="pt-2 pb-2">
                                        We ship via UPS and USPS. Any order that exceeds $200 automatically qualifies for free shipping (US only), excluding Puerto Rico, Hawaii &amp; Alaska. 
                                    </span>
                                </span>
                            </div>
                        </div>
                        <div class="pl-4 pr-4 pt--15 position-relative">
                            <div class="mt-2">Payments <a href="javascript:;" data-tooltip-content="#payment_info"
                                    class="product-right-tips float-right tooltipstered" id="payment_info_link"><i class="fa fa-info-circle"></i></a>
                            </div>
                            <img class="mt-10" width="280px" src="https://www.gervetusa.com/img/frontend/payment.jpg">
                            <div class="bg-white p-2 position-absolute rounded shadow d-none" id="payment_info_wrapper" style="top: 0;left: -90px;z-index: 1;width: 300px;">
                                <span id="payment_info" class="w-350">
                                    <h6 class="pt-2 pb-2">Payment Options</h6>
                                    <strong><i class="fa 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 number. Your card is removed from our system right after processing the transaction. 
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--product details end-->
    <!--product info start-->
    <div class="product_d_info">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="product_d_inner">
                        <div class="product_info_button">
                            <ul class="nav" role="tablist">
                                <li>
                                    <a class="active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">DESCRIPTION</a>
                                </li>
                                @if(count($data['videos']) > 0)
                                    <li>
                                        <a 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>
                                        <a id="files-tab" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">FILES / MANUALS</a>
                                    </li>
                                @endif
                                <li >
                                    <a id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">REVIEWS</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                                <div class="product-full-para">
                                    <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>
                            </div>
                            @if(count($data['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
                                    </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="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) !!}
                                    <h3 class="title-lg mb--20 pt--15">ADD A REVIEW</h3>
                                    <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">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="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-info">Post Comment</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--product info end-->
    <!-- Product Video Modal -->
    <div class="modal fade" id="product_video_modal" tabindex="-1" role="dialog" aria-labelledby="product_video_modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center" id="video_modal">
                </div>
            </div>
        </div>
    </div>
    @if(isset($data['related_products']) && count($data['related_products']) > 0)
        <!--product area start-->
        <section class="product_area mb-60">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="section_title">
                            <h2>Related Products</h2>
                        </div>
                        <div class="product_carousel product_column5 owl-carousel">
                            @foreach($data['related_products'] as $product)
                                {!! \App\Models\Product::productBlock($product, 'product-scroll') !!}
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--product area end-->
    @endif
    @if(isset($data['recommended_products']) && count($data['recommended_products']) > 0)
        <!--product area start-->
        <section class="product_area mb-60">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="section_title">
                            <h2>You May Also Like</h2>
                        </div>
                        <div class="product_carousel product_column5 owl-carousel">
                            @foreach($data['recommended_products'] as $product)
                                {!! \App\Models\Product::productBlock($product, 'product-scroll') !!}
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--product area end-->
    @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>
    @push('after-scripts')
        @if($data['product']->type == 'variation' && $data['sid'] != '')
            <script>
                $(document).ready(function() {
                    setVariation('{{ $data['sid'] }}');
                });
            </script>
        @endif
        <script>
            fbq('track', 'ViewContent');
            let hash = window.location.hash;
            if(hash)
            {
                setVariation(hash, true);
            }
            window.__cfRLUnblockHandlers = true;
        </script>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
        <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#warranty_box_link').focus(function(){
                    $('#warranty_box_icon_info').removeClass('d-none');
                });
                $('#warranty_box_link').blur(function(){
                    $('#warranty_box_icon_info').addClass('d-none');
                });
                
                $('#delivery_info_link').focus(function(){
                    $('#delivery_info_wrapper').removeClass('d-none');
                });
                $('#delivery_info_link').blur(function(){
                    $('#delivery_info_wrapper').addClass('d-none');
                });

                $('#payment_info_link').focus(function(){
                    $('#payment_info_wrapper').removeClass('d-none');
                });
                $('#payment_info_link').blur(function(){
                    $('#payment_info_wrapper').addClass('d-none');
                });
            });
        </script>
    @endpush
@endsection