@extends('frontend.layouts.mobile')
@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::printStockInformationMobile($data['product']);    

    $data['product']->variation_select = 1;

    $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;
    }

    $set_items = [];
    
    $set_products = \App\Models\Product::printSetProducts($data['product'], 'mobile');
    if(trim($set_products) != null)
        $set_items[$data['product']->id] = $set_products;
@endphp
@section('title', $title)
@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
@php
    $invalid_price = $data['product']->price_discounted == null || $data['product']->price_discounted == '';
@endphp
{{-- schema --}}
@push('schema')
    @component('frontend.layouts.schema')

    {
        "@context": "https://schema.org/",
        "@type": "Product",
        "name": "{{ $data['product']->name }}",
        "image": "https://www.germedusa.com/up_data/products/images/large/{{ $data['product']->image }}",
        "description": "{{ $data['product']->short_description }} {!! strip_tags($data['product']->full_description) !!}",
        {{-- "keywords": "{{ $data['product']->meta_keywords }}", --}}
        "brand": {
            "@type": "Brand",
            "name": "GerMedUSA"
        },
        "sku": "{{ $data['product']->sku }}",

        "offers": {
            @if($invalid_price && $data['product']->type != 'variation') "@type": "Offer", @else "@type": "AggregateOffer", @endif
            "url": "https://www.germedusa.com/{{ $data['product']->slug }}",
            "priceCurrency": "USD",
            @if($data['product']->type == 'variation')
                @php
                    $subProductsCount = $data['product']->childProducts()->orderBy('position','asc')->orderBy('name','asc')->count();
                @endphp
                "lowPrice": "{{ $data['product']->min }}",
                "highPrice": "{{ $data['product']->max }}",
                "offerCount": "{{ $subProductsCount }}"
            @else
                @if(!$invalid_price) "lowPrice": "{{ $data['product']->price_discounted }}",  
                    "highPrice": "{{ $data['product']->price_catalog }}"
                @else
                    "price": "{{ $data['product']->price_catalog }}"
                @endif
            @endif
            ,  
            "availability": "https://schema.org/InStock",
            "itemCondition": "https://schema.org/NewCondition"
        }
        {{-- ,
        
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.5",
            "bestRating": "5"
        } --}}
        
        
    }
    @endcomponent
@endpush

@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 }}" />
    <style>
        .accordion-item{
            padding: 10px;
        }
    </style>
    <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')
    <!--product area start-->
    


    <!-- ...:::Start Product Single Section:::... -->
<div class="product-single-section section-gap-top-30">
        <div class="container">
            <div class="product-gallery-image">
                <!-- Slider main container -->
                <div class="swiper">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->

                        {{-- Start Primary Image --}}
                        @if(trim($data['product']->image) != '')
                            <div class="swiper-slide product-slider-images">
                                <div class="product-gallery-single-item">
                                    <div class="image">
                                        <img class="img-fluid zoomable-img" id='img' src="up_data/products/images/medium/{{ $data['product']->image }}" alt="{{ $data['product']->name }}">
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="swiper-slide product-slider-images">
                                <div class="product-gallery-single-item">
                                    <div class="image">
                                        <img class="img-fluid zoomable-img" src="up_data/na.jpg" alt="{{ $data['product']->name }}">
                                    </div>
                                </div>
                            </div>
                        @endif
                        {{-- End Primary Image --}}

                        {{-- Start Seconday Primary Image --}}
                        @if($data['images']->count() > 1 || $data['sub_products']->count() > 0)
                            @foreach($data['images'] as $image)
                                @if($image->name != '')                                    
                                    <div class="swiper-slide product-slider-images">
                                        <div class="product-gallery-single-item">
                                            <div class="image">
                                                <img class="img-fluid zoomable-img" src="up_data/products/images/medium/{{ $image->name }}" alt="{{ $data['product']->name }}">
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                        {{-- End Seconday Primary Image --}}

                        {{-- Start Sub Products and Their Images --}}
                        @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)
                                    <div class="swiper-slide product-slider-images sub-prd-imgs-{{ $sub_product->id }}">
                                        <div class="product-gallery-single-item">
                                            <div class="image">
                                                <img class="img-fluid" src="up_data/products/images/medium/{{ $image->name }}" alt="{{ $sub_product->name }}">
                                            </div>
                                        </div>
                                    </div>
                                @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;
                                }

                                $set_products = \App\Models\Product::printSetProducts($sub_product, 'mobile');
                                if(trim($set_products) != null)
                                    $set_items[$sub_product->id] = $set_products;
                            @endphp

                        @endforeach
                        {{-- End Sub Products and Their Images --}}
                        
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                {{-- <div class="product-tag">
                    <span class="tag-discount">40% OFF</span>
                    <a href="wishlist.html" aria-label="Wishlist" class="btn btn--size-33-33 btn--center btn--round btn--color-radical-red btn--bg-white btn--box-shadow"><i class="icon icon-carce-heart"></i></a>
                </div> --}}
            </div>

        </div>
       
        {{-- <div class="buttons pt-5" style=" padding-left: 8rem;"> 
        </div> --}}

        <div class="container px-0">
            <div class="product-gallery-details">

                {{-- Start Product Title --}}
                <h1 class="title product-info sid-heading">{{ $data['product']->name }}</h1>
                @foreach($data['sub_products'] as $sub_product)
                    <h2 class="title product-info d-none sid-{{ $sub_product->id }}">{{ $sub_product->name }}</h2>
                @endforeach
                {{-- End Product Title --}}

                {{-- Start Short Info --}}
                <div class="product-info sid-short">
                    @if(trim($data['product']->short_description) != null)
                        <p class="text">{!! nl2br(strip_tags($data['product']->short_description)) !!}</p>
                    @endif
                </div>
                @foreach($data['sub_products'] as $sub_product)
                    <div class="product-info d-none sid-{{ $sub_product->id }}">
                        @if(trim($sub_product->short_description) != null)
                            <p>
                                {!! nl2br(strip_tags($sub_product->short_description)) !!}
                            </p>
                        @endif
                    </div>
                @endforeach
                {{-- End Short Info --}}

                <form class="frm_add_to_cart" method="post" action="cart">
                        @csrf
                <ul class="product-variable-lists">

                    {{-- Start Product SKUs --}}
                    @if($data['product']->type != 'variation')
                        <li class="list-item">
                            <div class="left">SKU</div>
                            <div class="right">
                                {{ $data['product']->sku }}
                            </div>
                        </li>
                        @php
                            $stock_info = \App\Models\Product::printStockInformationMobile($data['product'], 'mobile');  
                        @endphp
                        
                        {!!  $stock_info['message'] !!}
                    @else
                        @foreach($data['sub_products'] as $sub_product)
                            <li class="product-info d-none li-data li-sid-{{ $sub_product->id }}">
                                <div class="left">SKU</div>
                                <div class="right">
                                    {{ $sub_product->sku }}
                                </div>
                            </li>
                                
                            @php
                                $stock_info = \App\Models\Product::printStockInformationMobile($sub_product, 'mobile');
                            @endphp
                            {!!  $stock_info['message'] !!}
                        @endforeach
                    @endif
                    {{-- End Product SKUs --}}

                    {{-- Start Product Variation Selector --}}
                    @if($data['product']->type == 'variation')
                    <li class="list-item single-form-item">
                        <div class="left"><strong>{{ \App\Models\Product::$variation_caption_mobile[$data['product']->variation_select] }}</strong></div>
                        <div class="right">
                        
                            

                            <select style="max-width: 92%; border: 2px solid #e2e7ea;border-radius: 10px;padding: 10px;width: -webkit-fill-available;font-size: 14px;width: 100%;" class="form-control" id="product_id" name="product_id" onchange="setVariation(this.value, null, null, this)">
                                <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; 
                                        $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');          
                                    @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 }}" data-stock="{{ $sub_product->in_stock }}" value="{{ $sub_product->id }}" id="{{ $sub_product->sku }}">{{ $caption }}</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="parent_id" id="parent_id" value="{{ $data['product']->id }}">

                        </div>
                    </li>
                    @else
                        <input type="hidden" name="product_id" value="{{ $data['product']->id }}">
                    @endif
                    

                    {{-- End Product Variation Selector --}}
                    @if(($data['product']->is_set == 'Y' && $data['product']->in_stock == 'Y' && $data['product']->status == 'Y') || $data['product']->is_set == 'N')

                        <li id="li-qty-container" class="@if($data['product']->type == 'variation') d-none @else list-item @endif">
                            <div class="left">QTY</div>
                            <div class="right">
                                <div class="product-quantity">
                                    <div class="num-block skin-2">
                                        <div class="num-in">
                                            <span class="minus dis"></span>
                                            <label for="quan-1" class="visually-hidden"></label>
                                            <input id="quan-1" name="qty" type="text" class="in-num" value="1" readonly="">
                                            <span class="plus"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endif
                    
                </ul>

                <div class="price-n-cart product-info @if($data['product']->type == 'variation') d-none @endif">
                    @if($data['product']->type == 'variation')
                        @foreach($data['sub_products'] as $sub_product)
                            @php
                                $price_info = \App\Models\Product::getPriceText($sub_product, 'detail');   
                            @endphp
                        <span class="price product-info d-none sid-{{ $sub_product->id }}">{!! \App\Models\Product::getPriceMobile($price_info) !!}</span>
                        @endforeach
                    @else
                        @php
                            $price_info = \App\Models\Product::getPriceText($data['product'], 'detail');   
                        @endphp
                        <span class="price">{!! \App\Models\Product::getPriceMobile($price_info) !!}</span>
                    @endif
                    {{-- @if(auth()->user()) --}}
                    <div style="display: none;" class="bg-danger my-2 px-2 quantity-error rounded text-bg-dark">
                    </div>
                    <div class="float-start pr-10">
                        <form class="frm_add_to_cart" method="post" action="cart">
                            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                            {{-- <input type="hidden" name="product_id" value="{{ $data['product']->id }}"> --}}
                            <div class="float-start pr-10">
                                @if(($data['product']->is_set == 'Y' && $data['product']->in_stock == 'Y' && $data['product']->status == 'Y') || $data['product']->is_set == 'N')
                                    <button type="button" class="paction add-cart btn-add-to-cart button-add-cart-mobile my-3">
                                        Add to Cart
                                        <i class="icon icon-carce-cart"></i>
                                    </button>
                                @endif
                            </div>
                        </form>
                    </div>

                    {{-- @else
                        <a href="/login" class="login_btn pl-3 bg-dark rounded-1 text-white">add to cart</a>
                    @endif --}}
                </div>

                </form> 

                <!-- Products Tag & Category Meta -->
                        <div class="product-meta mb-15">
                            <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>

                <section class="accordion">
                    <section class="accordion-tabs">
                        @if(count($set_items) > 0)
                        @endif
                        @if($data['faqs'] != null)
                        @endif
                        @if(count($data['videos']) > 0 || count($videos) > 0)
                        @endif

                        @if(trim(strip_tags($data['warranty'])) != null)
                        @endif
 
                        {{-- @endif --}}
                    </section>
                    <section class="accordion-content">
                       
                        @if(trim($data['product']->full_description) != null)
                            <article class="accordion-item accordion-active" data-actab-group="0" data-actab-id="0">
                                <h4 class="accordion-item__label">Description</h4>
                                <div class="accordion-item__container product-description">
                                
                                {{-- Start Full Info --}}
                                <div class="product-info sid-short">
                                    @if(trim($data['product']->full_description) != null)
                                        <p class="text">{!! $data['product']->full_description !!}</p>
                                    @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)
                                            <p>
                                                {!! $sub_product->full_description !!}
                                            </p>
                                        @endif
                                    </div>
                                @endforeach
                                {{-- End Full Info --}}

                                </div>
                            </article>
                             <article class="accordion-item" data-actab-group="0" data-actab-id="7">
                                <h4 class="accordion-item__label">Additional Info</h4>
                                <div class="accordion-item__container">
                                    @if(isset($sub_product))
                                        {!!  \App\Models\Product::printAddtionalInformation($sub_product) !!}
                                    @else
                                        {!!  \App\Models\Product::printAddtionalInformation($data['product']) !!}
                                    @endif
                                </div>
                            </article>
                             <article class="accordion-item" data-actab-group="0" data-actab-id="9">
                                <h4 class="accordion-item__label">Reviews</h4>
                                <div class="accordion-item__container">
                                    <div class="review-wrapper">
                                        @if(count($data['reviews']) > 0)
                                            <h5 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 fa-star"></i></span>
                                                            @endfor
                                                        </div>
                                                        <p class="author"><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 title-lg">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="input_textarea rounded" style="line-height: unset; padding-left: 10px;"></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  rounded">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label for="email">Email *</label>
                                                            <input type="email" oninvalid="this.setCustomValidity('Please enter a valid email');"  onchange="try{setCustomValidity('')}catch(e){}" 
                                                            onkeypress="try{setCustomValidity('')}catch(e){}"  title="Please enter a valid email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required name="email" id="email_id" class="text_input rounded">
                                                        </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 button_for_new_design my-4 rounded">Post Comment</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </article>
                        @endif
                        @if(count($set_items) > 0)
                            <article class="accordion-item" data-actab-group="0" data-actab-id="6">
                                <h4 class="accordion-item__label">What's Included in This Set</h4>
                                <div class="accordion-item__container">
                                    @foreach($set_items as $id => $set)
                                        <div>
                                            {!! $set !!}
                                        </div>
                                    @endforeach
                                </div>
                            </article>
                        @endif
                        {{-- <article class="accordion-item" data-actab-group="0" data-actab-id="1">
                            <h4 class="accordion-item__label">Specificaitons</h4>
                            <div class="accordion-item__container">
                            <p>reprehenderit temporibus, assumenda cupiditate consequatur soluta odit ex repudiandae delectus cumque, provident hic sed quod? Quis, nam. Similique eaque quae vel recusandae expedita qui sint fugiat, nisi assumenda et ex molestiae atque deleniti magni, ipsam libero!</p>
                            </div>
                        </article> --}}
                        @if($data['faqs'] != null)
                            <article class="accordion-item" data-actab-group="0" data-actab-id="2">
                                <h4 class="accordion-item__label">FAQs</h4>
                                <div class="accordion-item__container">
                                    @include('includes.partials.mobile-faqs')
                                </div>
                            </article>
                        @endif
                        @if(count($data['videos']) > 0 || count($videos) > 0)
                        <article class="accordion-item video-accordion" data-actab-group="0" data-actab-id="3">
                            <h4 class="accordion-item__label">Videos</h4>
                            <div class="accordion-item__container">
                                <div class="tab-pane" 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="video-container">
                                                <a href="javascript:;" onclick="open_video_modal('{{ $video->name }}');" class="product_video">
                                                    <img src="mobile/assets/images/icons/icon-play.png" class="bg-wisp-pink icon-video-play position-absolute rounded-5" />
                                                    <img src="{{ $img_path }}" class="img-thumbnail img-rounded" />
                                                </a>
                                                <div class="text-center pt--5">{{ $video->title }}</div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </article>
                        <div id="video_modal" class="modal" style="width: auto; padding:0px; z-index: 9999 !important;" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <!-- Custom Close Button -->
                                    <span id="custom_close_btn" class="position-absolute font-monospace" style="right: 0px; top: -5px; font-size: 22px; cursor: pointer; width: 18px;">x</span>
                                    <div class="modal-body">
                                        <div id="video_modal_div"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        @endif
                        <article class="accordion-item" data-actab-group="0" data-actab-id="5"> 
                            <h4 class="accordion-item__label">Guides</h4>
                            <div class="accordion-item__container">
                                <div class="guide-pdf-1 d-flex gap-2 align-items-center mb-4">
                                    <svg height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                                        viewBox="0 0 303.188 303.188" xml:space="preserve">
                                        <g>
                                            <polygon style="fill:#E8E8E8;" points="219.821,0 32.842,0 32.842,303.188 270.346,303.188 270.346,50.525 	"/>
                                            <path style="fill:#FB3449;" d="M230.013,149.935c-3.643-6.493-16.231-8.533-22.006-9.451c-4.552-0.724-9.199-0.94-13.803-0.936
                                                c-3.615-0.024-7.177,0.154-10.693,0.354c-1.296,0.087-2.579,0.199-3.861,0.31c-1.314-1.36-2.584-2.765-3.813-4.202
                                                c-7.82-9.257-14.134-19.755-19.279-30.664c1.366-5.271,2.459-10.772,3.119-16.485c1.205-10.427,1.619-22.31-2.288-32.251
                                                c-1.349-3.431-4.946-7.608-9.096-5.528c-4.771,2.392-6.113,9.169-6.502,13.973c-0.313,3.883-0.094,7.776,0.558,11.594
                                                c0.664,3.844,1.733,7.494,2.897,11.139c1.086,3.342,2.283,6.658,3.588,9.943c-0.828,2.586-1.707,5.127-2.63,7.603
                                                c-2.152,5.643-4.479,11.004-6.717,16.161c-1.18,2.557-2.335,5.06-3.465,7.507c-3.576,7.855-7.458,15.566-11.815,23.02
                                                c-10.163,3.585-19.283,7.741-26.857,12.625c-4.063,2.625-7.652,5.476-10.641,8.603c-2.822,2.952-5.69,6.783-5.941,11.024
                                                c-0.141,2.394,0.807,4.717,2.768,6.137c2.697,2.015,6.271,1.881,9.4,1.225c10.25-2.15,18.121-10.961,24.824-18.387
                                                c4.617-5.115,9.872-11.61,15.369-19.465c0.012-0.018,0.024-0.036,0.037-0.054c9.428-2.923,19.689-5.391,30.579-7.205
                                                c4.975-0.825,10.082-1.5,15.291-1.974c3.663,3.431,7.621,6.555,11.939,9.164c3.363,2.069,6.94,3.816,10.684,5.119
                                                c3.786,1.237,7.595,2.247,11.528,2.886c1.986,0.284,4.017,0.413,6.092,0.335c4.631-0.175,11.278-1.951,11.714-7.57
                                                C231.127,152.765,230.756,151.257,230.013,149.935z M119.144,160.245c-2.169,3.36-4.261,6.382-6.232,9.041
                                                c-4.827,6.568-10.34,14.369-18.322,17.286c-1.516,0.554-3.512,1.126-5.616,1.002c-1.874-0.11-3.722-0.937-3.637-3.065
                                                c0.042-1.114,0.587-2.535,1.423-3.931c0.915-1.531,2.048-2.935,3.275-4.226c2.629-2.762,5.953-5.439,9.777-7.918
                                                c5.865-3.805,12.867-7.23,20.672-10.286C120.035,158.858,119.587,159.564,119.144,160.245z M146.366,75.985
                                                c-0.602-3.514-0.693-7.077-0.323-10.503c0.184-1.713,0.533-3.385,1.038-4.952c0.428-1.33,1.352-4.576,2.826-4.993
                                                c2.43-0.688,3.177,4.529,3.452,6.005c1.566,8.396,0.186,17.733-1.693,25.969c-0.299,1.31-0.632,2.599-0.973,3.883
                                                c-0.582-1.601-1.137-3.207-1.648-4.821C147.945,83.048,146.939,79.482,146.366,75.985z M163.049,142.265
                                                c-9.13,1.48-17.815,3.419-25.979,5.708c0.983-0.275,5.475-8.788,6.477-10.555c4.721-8.315,8.583-17.042,11.358-26.197
                                                c4.9,9.691,10.847,18.962,18.153,27.214c0.673,0.749,1.357,1.489,2.053,2.22C171.017,141.096,166.988,141.633,163.049,142.265z
                                                M224.793,153.959c-0.334,1.805-4.189,2.837-5.988,3.121c-5.316,0.836-10.94,0.167-16.028-1.542
                                                c-3.491-1.172-6.858-2.768-10.057-4.688c-3.18-1.921-6.155-4.181-8.936-6.673c3.429-0.206,6.9-0.341,10.388-0.275
                                                c3.488,0.035,7.003,0.211,10.475,0.664c6.511,0.726,13.807,2.961,18.932,7.186C224.588,152.585,224.91,153.321,224.793,153.959z"/>
                                            <polygon style="fill:#FB3449;" points="227.64,25.263 32.842,25.263 32.842,0 219.821,0 	"/>
                                            <g>
                                                <path style="fill:#A4A9AD;" d="M126.841,241.152c0,5.361-1.58,9.501-4.742,12.421c-3.162,2.921-7.652,4.381-13.472,4.381h-3.643
                                                    v15.917H92.022v-47.979h16.606c6.06,0,10.611,1.324,13.652,3.971C125.321,232.51,126.841,236.273,126.841,241.152z
                                                    M104.985,247.387h2.363c1.947,0,3.495-0.546,4.644-1.641c1.149-1.094,1.723-2.604,1.723-4.529c0-3.238-1.794-4.857-5.382-4.857
                                                    h-3.348C104.985,236.36,104.985,247.387,104.985,247.387z"/>
                                                <path style="fill:#A4A9AD;" d="M175.215,248.864c0,8.007-2.205,14.177-6.613,18.509s-10.606,6.498-18.591,6.498h-15.523v-47.979
                                                    h16.606c7.701,0,13.646,1.969,17.836,5.907C173.119,235.737,175.215,241.426,175.215,248.864z M161.76,249.324
                                                    c0-4.398-0.87-7.657-2.609-9.78c-1.739-2.122-4.381-3.183-7.926-3.183h-3.773v26.877h2.888c3.939,0,6.826-1.143,8.664-3.43
                                                    C160.841,257.523,161.76,254.028,161.76,249.324z"/>
                                                <path style="fill:#A4A9AD;" d="M196.579,273.871h-12.766v-47.979h28.355v10.403h-15.589v9.156h14.374v10.403h-14.374
                                                    L196.579,273.871L196.579,273.871z"/>
                                            </g>
                                            <polygon style="fill:#D1D3D3;" points="219.821,50.525 270.346,50.525 219.821,0 	"/>
                                        </g>
                                    </svg></i><a href="https://www.germedusa.com/up_data/GerMedUSA-General-IFU.pdf" target="_blank">GerMedUSA General IFU</a>
                                </div>
                                <div class="guide-pdf-2 d-flex gap-2 align-items-center">
                            
            <svg height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                                        viewBox="0 0 303.188 303.188" xml:space="preserve">
                                    <g>
                                        <polygon style="fill:#E8E8E8;" points="219.821,0 32.842,0 32.842,303.188 270.346,303.188 270.346,50.525 	"/>
                                        <path style="fill:#FB3449;" d="M230.013,149.935c-3.643-6.493-16.231-8.533-22.006-9.451c-4.552-0.724-9.199-0.94-13.803-0.936
                                            c-3.615-0.024-7.177,0.154-10.693,0.354c-1.296,0.087-2.579,0.199-3.861,0.31c-1.314-1.36-2.584-2.765-3.813-4.202
                                            c-7.82-9.257-14.134-19.755-19.279-30.664c1.366-5.271,2.459-10.772,3.119-16.485c1.205-10.427,1.619-22.31-2.288-32.251
                                            c-1.349-3.431-4.946-7.608-9.096-5.528c-4.771,2.392-6.113,9.169-6.502,13.973c-0.313,3.883-0.094,7.776,0.558,11.594
                                            c0.664,3.844,1.733,7.494,2.897,11.139c1.086,3.342,2.283,6.658,3.588,9.943c-0.828,2.586-1.707,5.127-2.63,7.603
                                            c-2.152,5.643-4.479,11.004-6.717,16.161c-1.18,2.557-2.335,5.06-3.465,7.507c-3.576,7.855-7.458,15.566-11.815,23.02
                                            c-10.163,3.585-19.283,7.741-26.857,12.625c-4.063,2.625-7.652,5.476-10.641,8.603c-2.822,2.952-5.69,6.783-5.941,11.024
                                            c-0.141,2.394,0.807,4.717,2.768,6.137c2.697,2.015,6.271,1.881,9.4,1.225c10.25-2.15,18.121-10.961,24.824-18.387
                                            c4.617-5.115,9.872-11.61,15.369-19.465c0.012-0.018,0.024-0.036,0.037-0.054c9.428-2.923,19.689-5.391,30.579-7.205
                                            c4.975-0.825,10.082-1.5,15.291-1.974c3.663,3.431,7.621,6.555,11.939,9.164c3.363,2.069,6.94,3.816,10.684,5.119
                                            c3.786,1.237,7.595,2.247,11.528,2.886c1.986,0.284,4.017,0.413,6.092,0.335c4.631-0.175,11.278-1.951,11.714-7.57
                                            C231.127,152.765,230.756,151.257,230.013,149.935z M119.144,160.245c-2.169,3.36-4.261,6.382-6.232,9.041
                                            c-4.827,6.568-10.34,14.369-18.322,17.286c-1.516,0.554-3.512,1.126-5.616,1.002c-1.874-0.11-3.722-0.937-3.637-3.065
                                            c0.042-1.114,0.587-2.535,1.423-3.931c0.915-1.531,2.048-2.935,3.275-4.226c2.629-2.762,5.953-5.439,9.777-7.918
                                            c5.865-3.805,12.867-7.23,20.672-10.286C120.035,158.858,119.587,159.564,119.144,160.245z M146.366,75.985
                                            c-0.602-3.514-0.693-7.077-0.323-10.503c0.184-1.713,0.533-3.385,1.038-4.952c0.428-1.33,1.352-4.576,2.826-4.993
                                            c2.43-0.688,3.177,4.529,3.452,6.005c1.566,8.396,0.186,17.733-1.693,25.969c-0.299,1.31-0.632,2.599-0.973,3.883
                                            c-0.582-1.601-1.137-3.207-1.648-4.821C147.945,83.048,146.939,79.482,146.366,75.985z M163.049,142.265
                                            c-9.13,1.48-17.815,3.419-25.979,5.708c0.983-0.275,5.475-8.788,6.477-10.555c4.721-8.315,8.583-17.042,11.358-26.197
                                            c4.9,9.691,10.847,18.962,18.153,27.214c0.673,0.749,1.357,1.489,2.053,2.22C171.017,141.096,166.988,141.633,163.049,142.265z
                                            M224.793,153.959c-0.334,1.805-4.189,2.837-5.988,3.121c-5.316,0.836-10.94,0.167-16.028-1.542
                                            c-3.491-1.172-6.858-2.768-10.057-4.688c-3.18-1.921-6.155-4.181-8.936-6.673c3.429-0.206,6.9-0.341,10.388-0.275
                                            c3.488,0.035,7.003,0.211,10.475,0.664c6.511,0.726,13.807,2.961,18.932,7.186C224.588,152.585,224.91,153.321,224.793,153.959z"/>
                                        <polygon style="fill:#FB3449;" points="227.64,25.263 32.842,25.263 32.842,0 219.821,0 	"/>
                                        <g>
                                            <path style="fill:#A4A9AD;" d="M126.841,241.152c0,5.361-1.58,9.501-4.742,12.421c-3.162,2.921-7.652,4.381-13.472,4.381h-3.643
                                                v15.917H92.022v-47.979h16.606c6.06,0,10.611,1.324,13.652,3.971C125.321,232.51,126.841,236.273,126.841,241.152z
                                                M104.985,247.387h2.363c1.947,0,3.495-0.546,4.644-1.641c1.149-1.094,1.723-2.604,1.723-4.529c0-3.238-1.794-4.857-5.382-4.857
                                                h-3.348C104.985,236.36,104.985,247.387,104.985,247.387z"/>
                                            <path style="fill:#A4A9AD;" d="M175.215,248.864c0,8.007-2.205,14.177-6.613,18.509s-10.606,6.498-18.591,6.498h-15.523v-47.979
                                                h16.606c7.701,0,13.646,1.969,17.836,5.907C173.119,235.737,175.215,241.426,175.215,248.864z M161.76,249.324
                                                c0-4.398-0.87-7.657-2.609-9.78c-1.739-2.122-4.381-3.183-7.926-3.183h-3.773v26.877h2.888c3.939,0,6.826-1.143,8.664-3.43
                                                C160.841,257.523,161.76,254.028,161.76,249.324z"/>
                                            <path style="fill:#A4A9AD;" d="M196.579,273.871h-12.766v-47.979h28.355v10.403h-15.589v9.156h14.374v10.403h-14.374
                                                L196.579,273.871L196.579,273.871z"/>
                                        </g>
                                        <polygon style="fill:#D1D3D3;" points="219.821,50.525 270.346,50.525 219.821,0 	"/>
                                    </g>
                                    </svg></i><a href="https://www.germedusa.com/up_data/editor/GMD_Procedure_of_Cleaning.pdf" target="_blank">Procedure of Cleaning</a>
                                </div>                            
                            </div>
                        </article>
                        @if(trim(strip_tags($data['warranty'])) != null)
                            <article class="accordion-item" data-actab-group="0" data-actab-id="4">
                                <h4 class="accordion-item__label">Warranty, Delivery & Payments</h4>
                                <div class="accordion-item__container">
                                    {!! $data['warranty']->content !!}
                                </div>
                            </article>
                        @endif
                    </section>
                </section>


                {{-- <p class="text">
                    Ipsum available, but the majority have suffered alteration in
                    some form, by injected humour, randomised words which.
                    don't look even slightly believable. If you are going to use a
                    passage of Lorem Ipsum, you need
                </p> --}}
            </div>
        </div>
        <div class="catagories-area">
            <div class="catagories-nav-1" style="padding: 17px;">
                <span class="bold">You May Also Like</span>
                <!-- Slider main container -->
                <div class="swiper">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper mt-10">
                        <!-- Slides -->
                        @if(isset($data['you_may_also_like_products']))
                            @foreach($data['you_may_also_like_products'] as $same_product)
                                @php
                                    $url = $same_product->slug;
                                    $name = $same_product->name;
                                    if(strlen($name) > 14)
                                        $name = substr($name, 0, 14).'..';
                                @endphp
                                @push('head-area')
                                    <link rel="preload" href="up_data/products/thumbnails/{{ $same_product->image }}" as="image">
                                @endpush
                                <div class="swiper-slide" style="width: 45%; min-height: 202px;">
                                    <a href="{{ $url }}" class="home-categories-link" style="min-height: 202px;"><img width="120" height="120"
                                            src="up_data/products/images/medium/{{ $same_product->image }}" alt="{{ $same_product->name }}" />
                                            <br />
                                        {{ $name }}
                                        <br>
                                        @if($same_product->type == 'variation')
                                            <div class="variation-sku">Multiple Sizes &amp; Colors</div>
                                        @else
                                            <div class="simple-sku">{{ $same_product->sku }}</div>

                                        @endif
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
    </div>
<!-- ...:::End Product Single Section:::... -->

    @push('after-scripts')
        <script src="mobile/assets/js/tabs.js?version=0.42"></script>
    <script>
        function open_video_modal(video) {
            console.log(video, 'video');
            video = '/up_data/products/videos/' + video;
            let video_tag = '<video width="360" controls autoplay><source src="' + video + '" id="product_video" type="video/mp4">Your browser does not support the video tag.</video>';
            $('#video_modal_div').html(video_tag);
            $('.video-accordion').removeClass('accordion-active');
            $('#video_modal').removeClass('d-none');

            // Initialize the modal with focus set to false to avoid focus-related issues
            var videoModal = new bootstrap.Modal(document.getElementById('video_modal'), {
                backdrop: 'static', // Use 'static' if you want the modal to stay open when clicking outside
                keyboard: true,
                focus: false   // Disable automatic focus on the modal
            });

            videoModal.show();
        }
        $(document).ready(function() {
            $(document).on('click', '#custom_close_btn', function() {
                console.log('custom_close_btn clicked');
                
                // Add class and clear modal content
                $('.video-accordion').addClass('accordion-active');
                $('#video_modal_div').html('');

                // Hide the modal manually in Bootstrap 4
                $('#video_modal').addClass('d-none');

                // Remove backdrop manually if it's still visible
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
                $('body').css('padding-right', '');
            });
        });


    </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
        <script>
            $(".button_for_new_design").click(function() {console.log('ss')
                $('html, body').animate({
                    scrollTop: $(".accordion-item__label").offset().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);
                }
            });
        </script>
        <script>
            document.querySelector('#zoom_in').addEventListener("click", (e) => {
                document.querySelector('.zoomable-img').style.transiton ='all 1s ease-out';
                document.querySelector('.zoomable-img').style.transform ='scale(1.7)';
            });
            document.querySelector('#zoom_out').addEventListener("click", (e) => {
                document.querySelector('.zoomable-img').style.transiton ='all 1s ease-out';
                document.querySelector('.zoomable-img').style.transform ='scale(1.0)';
            });
        </script>
    @endif
    @endpush




    @push('before-scripts')
        <input type="hidden" value="shop" id="page_id">
        <input type="hidden" value="{{ $data['is_mobile'] }}" id="is_mobile">
    @endpush
@endsection