@extends('front_end.template.layout')
@section('content')
    <!--Body Container-->
    <div id="page-content">   
                <!--Breadcrumbs-->
                <div class="breadcrumbs-wrapper text-uppercase">
                    <div class="container">
                        
                        <div class="breadcrumbs"><a href="{{ route('home') }}" title="Back to the home page">Home</a><span>|</span><span class="fw-bold">{{$product->product_name}}</span></div>
                    </div>
                </div>
                <!--End Breadcrumbs-->

                <!--Main Content-->
                <div class="container">
                    <!--Product Content-->
                    <div class="product-single">
                        <div class="row">
                            <div class="col-lg-7 col-md-6 col-sm-12 col-12">
                                    @php
                                        $imageString = $product->image;
                                        $images = explode(',', $imageString); 
                                    @endphp
                                <div class="product-details-img thumb-left clearfix d-flex-wrap mb-3 mb-md-0">
                                    <div class="product-thumb">
                                        <div id="gallery" class="product-dec-slider-2 product-tab-left">
                                            
                                        @foreach($images as $image)
                                            <a data-image="{{ asset('uploads/products/'.$image) }}" data-zoom-image="{{ asset('uploads/products/'.$image) }}" class="slick-slide">
                                                <img class="blur-up lazyload" data-src="{{ asset('uploads/products/'.$image) }}" src="{{ asset('uploads/products/'.$image) }}" alt="product" />
                                            </a>
                                        @endforeach
                                        </div>
                                    </div>
                                    <div class="zoompro-wrap product-zoom-right">
                                        <div class="zoompro-span"><img id="zoompro" class="zoompro" src="{{ asset('uploads/products/'.$images[0]) }}" data-zoom-image="{{ asset('uploads/products/'.$images[0]) }}" alt="product" /></div>
                                        <!-- <div class="product-labels"><span class="lbl pr-label1">new</span><span class="lbl on-sale">Best seller</span></div> -->
                                        @php
                                            $userLoggedIn = auth()->check(); 
                                            $userRole = $userLoggedIn ? auth()->user()->role : null;
                                            $loginUrl = route('login');
                                        @endphp

                                        @if (isset($addedToWishlist) && $addedToWishlist == 1)
                                            <!-- Available in Wishlist Button -->
                                            <div class="product-wish">
                                                <a class="wishIcon wishlist rounded m-0" href="javascript:void(0)">
                                                    <i class="icon an an-heart"></i>
                                                    <span class="tooltip-label left">Available in Wishlist</span>
                                                </a>
                                            </div>
                                        @else
                                            <!-- Add to Wishlist Button -->
                                            <div class="product-wish">
                                                <a class="btn-icon wishlist add-to-wishlist rounded"
                                                    href=""
                                                    >
                                                        <i class="icon an an-heart-l"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                        @endif


                                        <div class="product-buttons">
                                            <!-- <a href="https://www.youtube.com/watch?v=93A2jOW5Mog" class="mfpbox mfp-with-anim btn rounded popup-video"><i class="icon an an-video"></i><span class="tooltip-label">Watch Video</span></a> -->
                                            <a href="#" class="btn rounded prlightbox"><i class="icon an an-expand-l-arrows"></i><span class="tooltip-label">Zoom Image</span></a>
                                        </div>
                                    </div>
                                    <div class="lightboximages">
                                        @foreach($images as $image)
                                        <a href="{{ asset('uploads/products/'.$image) }}" data-size="1000x1280"></a>
                                        @endforeach
                                      
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-5 col-md-6 col-sm-12 col-12">
                                <!-- Product Info -->
                                <div class="product-single__meta">
                                    <h1 class="product-single__title">{{ $product->product_name }}</h1>
                                    @php
                                        $rating = $product->average_rating;  
                                        $ratedUsers = $product->rated_users;  
                                        
                                    @endphp
                                    <!-- <div class="product-single__subtitle">From Italy</div> -->
                                    <!-- Product Reviews -->
                                    <div class="product-review mb-2">
                                        <a class="reviewLink d-flex-center" href="#reviews">
                                            @for ($i = 0; $i < 5; $i++)
                                                @if ($i < $rating) 
                                                    <i class="an an-star"></i>  <!-- Full star -->
                                                @else
                                                    <i class="an an-star-o"></i>  <!-- Empty star -->
                                                @endif
                                            @endfor
                                            <span class="spr-badge-caption ms-2">{{ $product->total_reviews }} Reviews</span>
                                        </a>
                                    </div>
                                    
                                    <div class="product-info">
                                        <p class="product-type">by: <span>{{ isset($vendor->stores) && $vendor->stores->first() && isset($vendor->stores->first()->store_name) && $vendor->stores->first()->store_name ? $vendor->stores->first()->store_name : 'N/A' }}</span></p>  
                                        
                                    </div>

                                    <div class="product-single__price items-icons-tab pb-1">
                                            <ul class="swatches-size d-flex-center list-unstyled clearfix">
                                                @foreach($features as $feature)
                                                <li data-value="S" class="swatch-element">
                                                    <a href="#" title="Handmade"><img src="{{ asset('') }}storage/uploads/features/{{ $feature->image_path }}" alt=""></a>
                                                </li>
                                                @endforeach
                                               
                                            </ul>
                                    </div>
                                    <!-- End Product Info -->
                                    <!-- Product Price -->
                                    @php
                                        $regularPrice = $product->regular_price;
                                        $salePrice = $product->sale_price;
                                        $discount = 0;

                                        // Calculate discount percentage if there's a sale price
                                        if ($salePrice && $regularPrice > $salePrice) {
                                            $discount = round((($regularPrice - $salePrice) / $regularPrice) * 100);
                                            $saveAmount = $regularPrice - $salePrice;
                                        }
                                    @endphp
                                    <div class="product-single__price pb-1">
                                    <span class="visually-hidden">Regular price</span>
                                    <span class="product-price__sale--single">
                                        @if ($salePrice && $salePrice < $regularPrice)
                                            <!-- Show Regular Price if Sale Price is less -->
                                            <span class="product-price-old-price">{{ number_format($regularPrice, 2) }} AED</span>
                                            <span class="product-price__price product-price__sale">{{ number_format($salePrice, 2) }} AED</span>
                                            
                                            <!-- Calculate and show savings and discount -->
                                            @php
                                                $saveAmount = $regularPrice - $salePrice;
                                                $discount = round(($saveAmount / $regularPrice) * 100); // Calculate the percentage discount
                                            @endphp
                                            <span class="discount-badge">
                                                <span class="devider me-2">|</span>
                                                <span>Save: </span>
                                                <span class="product-single__save-amount">
                                                    <span class="money">{{ number_format($saveAmount, 2) }} AED</span>
                                                </span>
                                                <span class="off ms-1">(<span>{{ $discount }}% OFF</span>)</span>
                                            </span>
                                        @else
                                            <!-- If no sale price or the sale price is not less, just show the regular price -->
                                            <span class="product-price__price">{{ number_format($regularPrice, 2) }} AED</span>
                                        @endif
                                    </span>

                                        <!-- <div class="product__policies fw-normal mt-1">Tax included.</div> -->
                                    </div>
                                    <!-- End Product Price -->
                                    <!-- Countdown -->
                                    <!-- <div class="countdown-text d-flex-wrap mb-3 pb-1">
                                        <label class="mb-2 mb-lg-0">Limited-Time Offer :</label>
                                        <div class="prcountdown d-flex" data-countdown="2024/10/01"></div>
                                    </div> -->
                                    <!-- End Countdown -->
                                    <!-- Product Sold -->
                                    <!-- <div class="orderMsg d-flex-center" data-user="23" data-time="24">
                                        <img src="assets/images/order-icon.jpg" alt="order" />
                                        <p class="m-0"><strong class="items">8</strong> Sold in last <strong class="time">14</strong> hours</p>
                                        <p id="quantity_message" class="ms-2 ps-2 border-start">Hurry! Only  <span class="items fw-bold">4</span>  left in stock.</p>
                                    </div> -->
                                    <!-- End Product Sold -->
                                </div>
                                <!-- End Product Info -->
                                <!-- Product Form -->
                                <form method="post" action="#" class="product-form hidedropdown">
                                    <!-- Swatches Color -->
                                    <!-- <div class="swatches-image swatch clearfix swatch-0 option1 mb-3" data-option-index="0">
                                        <div class="product-form__item selct-bx-label-rt">
                                            <label class="label d-flex">Color:

                                            </label>
                                            <select name="color" class="select2-nosearch" id="product-color">
                                                <option value="t-shirt" selected="selected">Black</option>
                                                <option value="dress">Red</option>
                                                <option value="jewellery">Blue</option>
                                                <option value="apparels">Purple</option>
                                            </select>
                                          
                                        </div>
                                    </div> -->
                                    <!-- End Swatches Color -->
                                    <!-- Swatches Size -->
                                    <!-- <div class="swatch clearfix swatch-1 option2  mb-3" data-option-index="1">
                                        <div class="product-form__item selct-bx-label-rt">
                                            <label class="label d-flex">Size:

                                            </label>
                                            <select name="size" class="select2-nosearch" id="product-size">
                                                <option value="t-shirt" selected="selected">M (32 cm)</option>
                                                <option value="dress">Red</option>
                                                <option value="jewellery">Blue</option>
                                                <option value="apparels">Purple</option>
                                            </select>
                                           
                                        </div>
                                    </div> -->
                                    <!-- End Swatches Size -->
                                    <!-- Product Action -->
                                    <div class="product-action w-100 clearfix">
                                        <div class="product-form__item--quantity d-flex-center mb-3">
                                            <div class="qtyField">
                                                <a class="qtyBtn minus" href="javascript:void(0);"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
                                                <input type="text" name="quantity" value="1" class="product-form__input qty">
                                                <a class="qtyBtn plus" href="javascript:void(0);"><i class="icon an an-plus-r" aria-hidden="true"></i></a>
                                            </div>
                                            <div class="pro-stockLbl ms-3">
                                                  
                                                    @if($stock > 0)
                                                    <span class="d-flex-center stockLbl instock"><i class="icon an an-check-cil"></i><span> In stock</span></span>
                                                    @else
                                                    <span class="d-flex-center stockLbl outstock "><i class="icon an an-times-cil"></i> <span>Sold out</span></span>
                                                        
                                                    @endif
                                                <!-- <span class="d-flex-center stockLbl instock"><i class="icon an an-check-cil"></i><span> In stock</span></span> -->
                                                <span class="d-flex-center stockLbl preorder d-none"><i class="icon an an-clock-r"></i><span> Pre-order Now</span></span>
                                                <span class="d-flex-center stockLbl outstock d-none"><i class="icon an an-times-cil"></i> <span>Sold out</span></span>
                                                <span class="d-flex-center stockLbl lowstock d-none" data-qty="15"><i class="icon an an-exclamation-cir"></i><span> Order now, Only  <span class="items">10</span>  left!</span></span>
                                            </div>
                                        </div>
                                        <div class="product-form__item--submit">
                                            <button type="button" name="add" class="btn rounded product-form__cart-submit" data-product-id="{{ $product->id }}"><span>Add to cart</span></button>
                                            <button type="submit" name="add" class="btn rounded product-form__sold-out d-none" disabled="disabled">Sold out</button>
                                        </div>
                                        <div class="product-form__item--buyit clearfix">
                                            <a href="javascript:void(0);" type="button" class="btn rounded btn-outline-primary proceed-to-checkout proceed-to-checkout-buy-now" data-product-id="{{ $product->id }}">Buy it now</a>
                                        </div>
                                        <div class="agree-check customCheckbox clearfix d-none">
                                            <input id="prTearm" name="tearm" type="checkbox" value="tearm" required />
                                            <label for="prTearm">I agree with the terms and conditions</label>
                                        </div>
                                    </div>
                                    <!-- End Product Action -->
                                    <!-- Product Info link -->
                                    <!-- <p class="infolinks d-flex-center mt-2 mb-3">
                                        <a class="btn add-to-wishlist d-none" href="my-wishlist.html"><i class="icon an an-heart-l me-1" aria-hidden="true"></i> <span>Add to Wishlist</span></a>
                                        <a class="btn add-to-wishlist" href="compare-style1.html"><i class="icon an an-sync-ar me-1" aria-hidden="true"></i> <span>Add to Compare</span></a>
                                        <a class="btn shippingInfo" href="#ShippingInfo"><i class="icon an an-paper-l-plane me-1"></i> Delivery &amp; Returns</a>
                                        <a class="btn emaillink me-0" href="#productInquiry"> <i class="icon an an-question-cil me-1"></i> Ask A Question</a>
                                    </p> -->
                                    <!-- End Product Info link -->
                                </form>
                                <!-- End Product Form -->
                                <!-- Social Sharing -->
                                <div class="social-sharing d-flex-center mb-3">
                                    <span class="sharing-lbl me-2">Share :</span>
                                    <a href="#" class="d-flex-center btn btn-link btn--share share-facebook" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Facebook"><i class="icon an an-facebook mx-1"></i><span class="share-title d-none">Facebook</span></a>
                                    <a href="#" class="d-flex-center btn btn-link btn--share share-twitter" data-bs-toggle="tooltip" data-bs-placement="top" title="Tweet on Twitter"><i class="icon an an-twitter mx-1"></i><span class="share-title d-none">Tweet</span></a>
                                    <a href="#" class="d-flex-center btn btn-link btn--share share-pinterest" data-bs-toggle="tooltip" data-bs-placement="top" title="Pin on Pinterest"><i class="icon an an-pinterest-p mx-1"></i> <span class="share-title d-none">Pin it</span></a>
                                    <a href="#" class="d-flex-center btn btn-link btn--share share-linkedin" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Linkedin"><i class="icon an an-linkedin mx-1"></i><span class="share-title d-none">Linkedin</span></a>
                                    <a href="#" class="d-flex-center btn btn-link btn--share share-email" data-bs-toggle="tooltip" data-bs-placement="top" title="Share by Email"><i class="icon an an-envelope-l mx-1"></i><span class="share-title d-none">Email</span></a>
                                </div>
                                <!-- End Social Sharing -->
                                <!-- Product Info -->
                                <!-- <div class="freeShipMsg" data-price="199"><i class="icon an an-truck" aria-hidden="true"></i>SPENT <b class="freeShip"><span class="money" data-currency-usd="$199.00" data-currency="USD">$199.00</span></b> MORE FOR FREE SHIPPING</div> -->
                                <!-- <div class="shippingMsg"><i class="icon an an-clock-r" aria-hidden="true"></i>Estimated Delivery Between <b id="fromDate">Wed, May 1</b> and <b id="toDate">Tue, May 7</b>.</div> -->
                                <!-- <div class="userViewMsg" data-user="20" data-time="11000"><i class="icon an an-eye-r" aria-hidden="true"></i><strong class="uersView">21</strong> People are Looking for this Product</div>
                                <div class="trustseal-img mt-4"><img src="assets/images/powerby-cards.jpg" alt="powerby cards" /></div> -->
                                <!-- End Product Info -->
                                 <div class="vendor-stk-detail-area">
                                     @if (isset($vendor->stores) && $vendor->stores->first() && file_exists(public_path('storage/' . $vendor->stores->first()->logo)))
                                    <img src="{{ asset('') }}storage/{{$vendor->stores->first()->logo}} " alt="" class="log-are">
                                    @else
                                        <p>No logo available</p>
                                    @endif
                                    <div class="vendor-stk-dtl">
                                        <h4 class="v-name">    {{ isset($vendor->stores) && $vendor->stores->first() && isset($vendor->stores->first()->store_name) && $vendor->stores->first()->store_name ? $vendor->stores->first()->store_name : 'N/A' }}</h4>
                                        <p class="loc">{{ isset($vendor->stores) && $vendor->stores->first() && isset($vendor->stores->first()->location) && $vendor->stores->first()->location ? $vendor->stores->first()->location : 'N/A' }}</p>
                                        <div class="btm-bar">
                                            <span class="star-ratin"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0.829374 7.7504L3.05437 9.3754L2.20937 11.9923C2.07282 12.3981 2.07109 12.8373 2.20444 13.2442C2.3378 13.6511 2.59909 14.0041 2.94937 14.2504C3.29366 14.5046 3.71087 14.6408 4.13885 14.6387C4.56682 14.6366 4.98265 14.4962 5.32437 14.2385L7.5 12.6373L9.67625 14.2366C10.0199 14.4894 10.4349 14.6267 10.8615 14.6288C11.2881 14.6309 11.7044 14.4976 12.0505 14.2482C12.3966 13.9988 12.6547 13.6461 12.7877 13.2407C12.9207 12.8353 12.9217 12.3983 12.7906 11.9923L11.9456 9.3754L14.1706 7.7504C14.5138 7.49947 14.769 7.14649 14.8996 6.74189C15.0302 6.33729 15.0296 5.90176 14.8979 5.49752C14.7662 5.09327 14.5101 4.74098 14.1663 4.49096C13.8224 4.24095 13.4083 4.106 12.9831 4.1054H10.25L9.42062 1.5204C9.2902 1.1135 9.03392 0.758532 8.68873 0.506689C8.34354 0.254847 7.92729 0.119141 7.5 0.119141C7.07271 0.119141 6.65646 0.254847 6.31127 0.506689C5.96608 0.758532 5.7098 1.1135 5.57937 1.5204L4.75 4.1054H2.01937C1.59421 4.106 1.18012 4.24095 0.836236 4.49096C0.492354 4.74098 0.236274 5.09327 0.104574 5.49752C-0.0271252 5.90176 -0.0277081 6.33729 0.102909 6.74189C0.233526 7.14649 0.488662 7.49947 0.831874 7.7504H0.829374Z" fill="#D4B2A7"/>
                                                </svg>
                                                4.5
                                            </span>
                                            @if (isset($vendor->stores) && $vendor->stores->first() && isset($vendor->stores->first()->vendor_id) && !empty($vendor->stores->first()->vendor_id))
                                            <a href="{{ route('storedetails', ['id' => $vendor->stores->first()->vendor_id]) }}" class="btn btn-outline-primary">View Store</a>
                                             @endif
                                        </div>
                                    </div>
                                 </div>
                            </div>
                        </div>
                    </div>
                    <!--Product Content-->

                    <!--Product Nav-->
                    @php
                    $nextProductimage = explode(',', $nextProductInfo->image);
                    $prevProductimage = explode(',', $prevProductInfo->image);
                    @endphp
                    <a href="{{ route('productdetails', ['id' => $prevProductInfo->id]) }}" class="product-nav prev-pro d-flex-center justify-content-between" title="Previous Product">
                        <span class="details">
                            <span class="name">{{$prevProductInfo->product_name}}</span>
                            <span class="price">AED{{$prevProductInfo->sale_price}}</span>
                        </span>
                        <span class="img"><img src="{{ asset('uploads/products/'.$prevProductimage[0]) }}" alt="product" /></span>
                    </a>
                    <a href="{{ route('productdetails', ['id' => $nextProductInfo->id]) }}" class="product-nav next-pro d-flex-center justify-content-between" title="Next Product">
                        <span class="img"><img src="{{ asset('uploads/products/'.$nextProductimage[0]) }}" alt="product"></span>
                        <span class="details">
                            <span class="name">{{$nextProductInfo->product_name}}</span>
                            <span class="price">AED{{$nextProductInfo->sale_price}}</span>
                        </span>
                    </a>
                    <!--End Product Nav-->

                    <!--Product Tabs-->
                    <div class="tabs-listing mt-2 mt-md-5">
                        <ul class="product-tabs list-unstyled d-flex-wrap border-bottom m-0 d-none d-md-flex">
                            <li rel="description" class="active"><a class="tablink">Item details</a></li>
                            <li rel="shipping-return"><a class="tablink">Shipping and Policies</a></li>
                            <!-- <li rel="shipping-return"><a class="tablink">Shipping &amp; Return</a></li> -->
                            <li rel="reviews"><a class="tablink">Reviews</a></li>
                            <!-- <li rel="addtional-tabs"><a class="tablink">Addtional Tabs</a></li> -->
                        </ul>
                        <div class="tab-container">
                            <h3 class="tabs-ac-style d-md-none active" rel="description">Description</h3>
                            <div id="description" class="tab-content">
                                <div class="product-description">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 col-md-8 col-lg-8 mb-4 mb-md-0">
                                            <!-- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> -->
                                            <!-- <h4 class="pt-2 text-uppercase">Features</h4> -->
                                            <!-- <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> -->
                                            <ul class="item-list-icn-sec">
                                            @foreach($features as $feature)
                                                <li>
                                                    <img class="icn" src="{{ asset('') }}storage/uploads/features/{{ $feature->image_path }}" alt="">
                                                    @if($feature->feature_title=='')
                                                        {{ $feature->name }}
                                                    @else
                                                        {{ $feature->name }}: {{ $feature->feature_title }}
                                                    @endif
                                                </li>
                                            @endforeach
                                            </ul>
                                            <!-- <h4 class="pt-2 text-uppercase">Variations of passages</h4>
                                            <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words.</p>
                                            <h4 class="pt-2 text-uppercase">Popular belief specimen</h4>
                                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage.</p> -->
                                        </div>
                                        <!-- <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                            <img data-src="{{ asset('') }}front_end/assets/images/about/about-info-s3.jpg" src="{{ asset('') }}front_end/assets/images/about/about-info-s3.jpg" alt="image" />
                                        </div> -->
                                    </div>
                                </div>
                            </div>

                           

                            <h3 class="tabs-ac-style d-md-none" rel="shipping-return">Shipping and Policies</h3>
                            <div id="shipping-return" class="tab-content">
                                {{$product->shipment_and_policies}}
                               
                            </div>

                            <h3 class="tabs-ac-style d-md-none" rel="reviews">Review</h3>
                            <div id="reviews" class="tab-content">
                                <div class="row">
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                        <div class="spr-header clearfix d-flex-center justify-content-between">
                                            <div class="product-review d-flex-center me-auto">
                                                <a class="reviewLink" href="#">
                                                    @for ($i = 0; $i < 5; $i++)
                                                        @if ($i < $product->average_rating) 
                                                            <i class="an an-star"></i>  <!-- Full star -->
                                                        @else
                                                            <i class="an an-star-o"></i>  <!-- Empty star -->
                                                        @endif
                                                    @endfor
                                                </a>
                                                <span class="spr-summary-actions-togglereviews ms-2">Based on {{ $product->total_reviews }} reviews </span>
                                            </div>
                                            <div class="spr-summary-actions mt-3 mt-sm-0">
                                                    @auth
                                                        
                                                        <a href="#" id="write-review-btn" class="spr-summary-actions-newreview write-review-btn btn rounded">
                                                            <i class="icon an-1x an an-pencil-alt me-2"></i>Write a review
                                                        </a>
                                                    @endauth

                                                    @guest

                                                        <a href="{{ route('login') }}" class="spr-summary-actions-newreview  btn rounded">
                                                            <i class="icon an-1x an an-pencil-alt me-2"></i>Write a review
                                                        </a>
                                                    @endguest
                                                <!-- <a href="#" class="spr-summary-actions-newreview write-review-btn btn rounded"><i class="icon an-1x an an-pencil-alt me-2"></i>Write a review</a> -->
                                            </div>
                                        </div>

                                        <form method="post"  id="review-form"  action="#" class="product-review-form new-review-form mb-4">
                                            <h4 class="spr-form-title text-uppercase">Write A Review</h4>
                                            <input type="hidden" id="product_id" name="product_id" value="{{$id}}">
                                            <input type="hidden" id="type" name="type" value="1">
                                            <input type="hidden" id="product_variant_id" name="product_variant_id" value="{{$product->product_variation_type}}">
                                            <fieldset class="spr-form-contact">
                                                <div class="spr-form-contact-name form-group">
                                                    <label class="spr-form-label" for="nickname">Name <span class="required">*</span></label>
                                                    <input class="spr-form-input spr-form-input-text" id="nickname" type="text" name="name" value="{{ Auth::check() ? Auth::user()->name : '' }}" placeholder="Enter Name" required />
                                                </div>
                                                <div class="spr-form-contact-email form-group">
                                                    <label class="spr-form-label" for="email">Email <span class="required">*</span></label>
                                                    <input class="spr-form-input spr-form-input-email " id="email" type="email" name="email" value="{{ Auth::check() ? Auth::user()->email : '' }}" placeholder="Enter Name" required />
                                                </div>
                                                <div class="spr-form-review-rating form-group">
                                                    <label class="spr-form-label">Rating</label>
                                                    <div class="product-review pt-1">
                                                        <div class="review-rating">
                                                            <input type="radio" name="rating" value="5" id="rating-5"><label for="rating-5"></label>
                                                            <input type="radio" name="rating" value="4" id="rating-4"><label for="rating-4"></label>
                                                            <input type="radio" name="rating" value="3" id="rating-3"><label for="rating-3"></label>
                                                            <input type="radio" name="rating" value="2" id="rating-2"><label for="rating-2"></label>
                                                            <input type="radio" name="rating" value="1" id="rating-1"><label for="rating-1"></label>
                                                        </div>
                                                        <a class="reviewLink d-none" href="#"><i class="icon an an-star-o"></i><i class="icon an an-star-o mx-1"></i><i class="icon an an-star-o"></i><i class="icon an an-star-o mx-1"></i><i class="icon an an-star-o"></i></a>
                                                    </div>
                                                </div>
                                                <div class="spr-form-review-title form-group">
                                                    <label class="spr-form-label" for="review">Review Title </label>
                                                    <input class="spr-form-input spr-form-input-text " id="review" type="text" name="review" placeholder="Give your review a title" />
                                                </div>
                                                <div class="spr-form-review-body form-group">
                                                    <label class="spr-form-label" for="message">Body of Review <span class="spr-form-review-body-charactersremaining">(1500) characters remaining</span></label>
                                                    <div class="spr-form-input">
                                                        <textarea class="spr-form-input spr-form-input-textarea " id="message" name="message" rows="5" placeholder="Write your comments here"></textarea>
                                                    </div>
                                                </div>
                                            </fieldset>
                                            <div class="spr-form-actions clearfix">
                                                <input type="submit" class="btn btn-primary rounded spr-button spr-button-primary" value="Submit Review">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                        <div class="spr-reviews">
                                            <h4 class="spr-form-title text-uppercase mb-3">Customer Reviews</h4>
                                            <div class="review-inner">
                                               @foreach($reviews as $review)
                                                <div class="spr-review">
                                                    <div class="spr-review-header">
                                                        <span class="product-review spr-starratings"><span class="reviewLink">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            <i class="icon an an-star{{ $i <= $review->rating ? '' : '-o' }}"></i>
                                                        @endfor
                                                        </span></span>
                                                        <h5 class="spr-review-header-title mt-1">{{ $review->title }}</h5>
                                                        <span class="spr-review-header-byline"><strong>{{ $review->name }}</strong> on <strong>{{ \Carbon\Carbon::parse($review->created_at)->format('M d, Y') }}</strong></span>
                                                    </div>
                                                    <div class="spr-review-content">
                                                        <p class="spr-review-content-body">{{ $review->comment }}</p>
                                                    </div>
                                                </div>
                                                @endforeach
                                             
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            
                        </div>
                    </div>
                    <!--End Product Tabs-->
                </div>
                <!--End Container-->

                <!--You May Also Like Products-->
                <section class="section product-slider pb-0">
                    <div class="container">
                        <div class="row">
                            <div class="section-header col-12">
                                <h2 class="text-transform-none">You May Also Like</h2>
                            </div>
                        </div>
                        <div class="productSlider grid-products">
                           
                        @foreach($relatedProducts as $product)
                            <div class="item">
                                <!--Start Product Image-->
                                <div class="product-image">
                                        
                                    <a href="{{ route('productdetails', ['id' => $product->id]) }}" class="product-img">
                                        @php
                                            $images = explode(',', $product->image); 
                                            $firstImage = $images[0]; 
                                        @endphp
                                        <img class="primary blur-up lazyload" data-src="{{ asset('uploads/products/'.$firstImage) }}" src="{{ asset('uploads/products/'.$firstImage) }}" alt="image" title="" width="800" height="960">
                                       
                                        <img class="hover blur-up lazyload" data-src="{{ asset('uploads/products/'.$firstImage) }}" src="{{ asset('uploads/products/'.$firstImage) }}" alt="image" title="" width="800" height="960">
                                        <!--End hover image-->
                                    </a>
                                    <!--end product image-->

                                    <!--Product Button-->
                                    <div class="button-set-top position-absolute style1">
                                        <!--Wishlist Button-->
                                        @php
                                                $userLoggedIn = auth()->check(); 
                                                $userRole = $userLoggedIn ? auth()->user()->role : null;
                                                $loginUrl = route('login'); 
                                                @endphp
                                                @if (isset($product->added_to_wishlist) && $product->added_to_wishlist == 1)
                                                    
                                                    <a class="btn-icon wishlist add-to-wishlist rounded" href="javascript:void(0);">
                                                        <i class="icon an an-heart"></i>
                                                        <span class="tooltip-label">Available in Wishlist</span>
                                                    </a>
                                                @else
                                                <a class="btn-icon wishlist add-to-wishlist rounded"
                                                    href=""
                                                    >
                                                        <i class="icon an an-heart-l"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                                @endif
                                       
                                    </div>
                                    <div class="button-set-bottom position-absolute style1">
                                        <!--Cart Button-->
                                        <a class="btn-icon btn btn-addto-cart pro-addtocart-popup rounded" href="javascript:void(0);" data-product-id="{{$product->id}}">
                                            <i class="icon an an-cart-l"></i> <span>Add To Cart</span>
                                        </a>
                                        <!--End Cart Button-->
                                    </div>
                                    <!--End Product Button-->
                                </div>
                               
                                <div class="product-details text-center">
                                    
                                    <div class="product-name text-uppercase">
                                        <a href="{{ route('productdetails', ['id' => $product->id]) }}">{{$product->product_name}} </a>
                                    </div>
                                   
                                    <div class="product-price">
                                    @if($product->regular_price)
                                        @if($product->sale_price && $product->sale_price < $product->regular_price)
                                            <div class="sale-price">
                                                Sale Price: AED {{ $product->sale_price ?? 'N/A' }}
                                            </div>
                                            <div class="regular-price">
                                                Regular Price: <span class="old-price">AED {{ $product->regular_price }}</span>
                                            </div>
                                        @else
                                            <div class="regular-price">
                                                Price: AED {{ $product->regular_price }}
                                            </div>
                                        @endif
                                    @else
                                        <div class="regular-price">Price: Not available</div>
                                    @endif

                                    </div>
                                    
                                    <div class="product-review">
                                        @for($i = 1; $i <= 5; $i++)
                                            @if($product->average_rating >= $i)
                                                <i class="an an-star"></i> 
                                            @elseif($product->average_rating >= $i - 0.5)
                                                <i class="an an-star-half"></i> 
                                            @else
                                                <i class="an an-star-o"></i> 
                                            @endif
                                        @endfor
                                    </div>
                                   
                                </div>
                                
                            </div>
                            @endforeach
                        </div>
                    </div>
                </section>
                <!--End You May Also Like Products-->

                <!--Recently Viewed Products-->
                <section class="section product-slider pb-0">
                    <div class="container">
                        <div class="row">
                            <div class="section-header col-12">
                                <h2 class="text-transform-none">Recently Viewed Products</h2>
                            </div>
                        </div>
                        <div class="productSlider grid-products">
                            
                        @foreach($recentlyviewedproducts as $product)
                            <div class="item">
                                <!--Start Product Image-->
                                <div class="product-image">
                                        
                                    <a href="{{ route('productdetails', ['id' => $product->id]) }}" class="product-img">
                                        @php
                                            $images = explode(',', $product->image); 
                                            $firstImage = $images[0]; 
                                        @endphp
                                        <img class="primary blur-up lazyload" data-src="{{ asset('uploads/products/'.$firstImage) }}" src="{{ asset('uploads/products/'.$firstImage) }}" alt="image" title="" width="800" height="960">
                                       
                                        <img class="hover blur-up lazyload" data-src="{{ asset('uploads/products/'.$firstImage) }}" src="{{ asset('uploads/products/'.$firstImage) }}" alt="image" title="" width="800" height="960">
                                        <!--End hover image-->
                                    </a>
                                    <!--end product image-->

                                    <!--Product Button-->
                                    <div class="button-set-top position-absolute style1">
                                        <!--Wishlist Button-->
                                               @php
                                                $userLoggedIn = auth()->check(); 
                                                $userRole = $userLoggedIn ? auth()->user()->role : null;
                                                $loginUrl = route('login'); 
                                                @endphp
                                                @if (isset($product->added_to_wishlist) && $product->added_to_wishlist == 1)
                                                    
                                                    <a class="btn-icon wishlist add-to-wishlist rounded" href="javascript:void(0);">
                                                        <i class="icon an an-heart"></i>
                                                        <span class="tooltip-label">Available in Wishlist</span>
                                                    </a>
                                                @else
                                                <a class="btn-icon wishlist add-to-wishlist rounded"
                                                    href=""
                                                    >
                                                        <i class="icon an an-heart-l"></i>
                                                        <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                                @endif
                                       
                                    </div>
                                    <div class="button-set-bottom position-absolute style1">
                                        <!--Cart Button-->
                                        <a class="btn-icon btn btn-addto-cart pro-addtocart-popup rounded" href="javascript:void(0);" data-product-id="{{$product->id}}">
                                            <i class="icon an an-cart-l"></i> <span>Add To Cart</span>
                                        </a>
                                        <!--End Cart Button-->
                                    </div>
                                    <!--End Product Button-->
                                </div>
                               
                                <div class="product-details text-center">
                                    
                                    <div class="product-name text-uppercase">
                                        <a href="{{ route('productdetails', ['id' => $product->id]) }}">{{$product->product_name}} </a>
                                    </div>
                                   
                                    <div class="product-price">
                                    @if($product->regular_price)
                                        @if($product->sale_price && $product->sale_price < $product->regular_price)
                                            <div class="sale-price">
                                                Sale Price: AED {{ $product->sale_price ?? 'N/A' }}
                                            </div>
                                            <div class="regular-price">
                                                Regular Price: <span class="old-price">AED {{ $product->regular_price }}</span>
                                            </div>
                                        @else
                                            <div class="regular-price">
                                                Price: AED {{ $product->regular_price }}
                                            </div>
                                        @endif
                                    @else
                                        <div class="regular-price">Price: Not available</div>
                                    @endif

                                    </div>
                                    
                                    <div class="product-review">
                                        @for($i = 1; $i <= 5; $i++)
                                            @if($product->average_rating >= $i)
                                                <i class="an an-star"></i> 
                                            @elseif($product->average_rating >= $i - 0.5)
                                                <i class="an an-star-half"></i> 
                                            @else
                                                <i class="an an-star-o"></i> 
                                            @endif
                                        @endfor
                                    </div>
                                   
                                </div>
                                
                            </div>
                            @endforeach
                        </div>
                    </div>
                </section>
           
            </div>
          
@endsection