@extends('frontend.layouts.master')
@section('css')
@section('meta')
    @if ($product->meta_description)
        <meta name="description" content="{{ $product->meta_description }}">
    @endif
    @if ($product->meta_keywords)
        <meta name="keywords" content="{{ $product->meta_keywords }}">
    @endif
    @if ($product->meta_title)
        <meta name="title" content="{{ $product->meta_title }}">
    @endif
    @if ($product->meta_image)
        <meta property="og:image" content="{{ asset($product->meta_image) }}">
    @endif
@endsection
<style>
    /* General styling for badges */
    .badge {
        display: inline-block;
        padding: 0.25em 0.5em;
        font-size: 0.75em;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }

    /* Styling for info badges */
    .badge-info {
        color: #fff;
        background-color: #17a2b8;
        /* Change this color to your desired info color */
    }

    /* Styling for pill-shaped badges */
    .badge-pill {
        border-radius: 1.5rem;
        /* Adjust the border-radius to make it more or less pill-shaped */
    }

    /* Combine all three classes */
    .badge.badge-info.badge-pill {
        /* You can add additional styles or overrides for badges with both info and pill classes */
    }
</style>
@endsection
@section('content')
@php
    $cart = null;
    if (session()->has('cart_identifier')) {
        $cart = \App\Models\Cart::where('cart_identifier', session()->get('cart_identifier'))->first();
    }

    $cartItems = $cart ? $cart->cartItems()->with('product')->get() : [];
@endphp
<main>
    <div class="mt-4">
        <div class="container">
            <!-- row -->
            <div class="row ">
                <!-- col -->
                <div class="col-12">
                    <!-- breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">{{ ucwords($product->category->name) }}</a>
                            </li>

                            <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section class="mt-8">
        <div class="container">
            <div class="row">

                <div class="col-md-6">
                    <!-- img slide -->
                    <div class="product" id="product">
                        @if ($product->productImages->count() > 0)
                            @foreach ($product->productImages as $image)
                                <div>
                                    <div class="zoom" onmousemove="zoom(event)"
                                        style="background-image: url({{ asset($image->path) }})">
                                        <!-- img -->
                                        <img src="{{ asset($image->path) }}" alt="">
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div>
                                <div class="zoom" onmousemove="zoom(event)"
                                    style="background-image: url({{ asset($product->thumbnail_image) }})">
                                    <!-- img -->
                                    <img src="{{ asset($product->thumbnail_image) }}" alt="">
                                </div>
                            </div>
                        @endif
                    </div>
                    <!-- product tools -->
                    <div class="product-tools">
                        <div class="thumbnails row g-3" id="productThumbnails">

                            @if ($product->productImages->count() > 0)
                                @foreach ($product->productImages as $image)
                                    <div class="col-3">
                                        <div class="thumbnails-img">
                                            <!-- img -->
                                            <img src="{{ asset($image->path) }}" alt="">
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-3">
                                    <div class="thumbnails-img">
                                        <!-- img -->
                                        <img src="{{ asset($product->thumbnail_image) }}" alt="">
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="ps-lg-10 mt-6 mt-md-0">
                        <!-- content -->
                        <div class="align-items-baseline d-flex justify-content-between">
                            <a href="{{ route('frontend.shop', ['category' => $product->category->slug]) }}"
                                class="mb-4 d-block">{{ ucwords($product->category->name) }}</a>
                            @if ($product->is_refundable)
                                <span class="badge badge-info badge-pill fs-6 mb-2">Refundable</span>
                            @endif
                        </div>
                        <!-- heading -->
                        <h1 class="mb-1">{{ $product->name }}
                        </h1>
                        <div class="mb-4">

                            <div class="fs-4 mt-2">
                                Price:
                                @php
                                    // $discount = \App\Helpers\ProductsHelper::getProductPrice($product, true);
                                    $orignalPrice = \App\Helpers\ProductsHelper::getProductPrice($product);
                                    $show_price = get_setting('show_price');
                                @endphp

                                @if (isCustomer() || $show_price == '1')
                                    <span class="fw-bold text-dark">£{{ $orignalPrice }}</span>
                                    @if (!empty($product->off_price) && $product->off_price > $orignalPrice)
                                        <span
                                            class="text-decoration-line-through text-muted">£{{ $product->off_price }}</span>
                                    @endif
                                @else
                                    <a href="{{ route('front.auth.login') }}">Login to see price</a>
                                @endif

                                {{-- @if (isCustomer())
              <!-- price -->
              @if (!empty($discount) && $discount != $orignalPrice)
                <span class="fw-bold text-dark">£{{ $discount }}</span> <span
                  class="text-decoration-line-through text-muted">£{{ $orignalPrice }}</span><span><small class="fs-6 ms-2 text-danger">26%
                    Off</small></span>
                @else
                <span class="fw-bold text-dark">£{{ $orignalPrice }}</span>
                @endif
            @else
                @if ($show_price)
                    @if (!empty($discount) && $discount != $orignalPrice)
                        <span class="fw-bold text-dark">£{{ $discount }}</span> <span
                        class="text-decoration-line-through text-muted">£{{ $orignalPrice }}</span><span><small class="fs-6 ms-2 text-danger">26%
                            Off</small></span>
                        @else
                        <span class="fw-bold text-dark">£{{ $orignalPrice }}</span>
                        @endif
                @else
                    <a href="{{ route('front.auth.login') }}">Login to see price</a>
                @endif
            @endif --}}
                            </div>
                            <!-- hr -->
                            <hr class="my-6">
                            <div class="mb-5">
                                {{ $product->short_description }}
                            </div>
                            <div class="mb-5 d-none">
                                @if ($product->specification)
                                    <button type="button"
                                        class="btn btn-outline-secondary">{{ $product->specification }}</button>
                                @endif
                                {{-- <!-- btn --> <button type="button" class="btn btn-outline-secondary">500g</button>
              <!-- btn --> <button type="button" class="btn btn-outline-secondary">1kg</button> --}}
                            </div>
                            <div>


                                <!-- input -->
                                <div class="input-group input-spinner d-none ">
                                    <input type="button" value="-" class=" btn  btn-sm cartDecreaseBtn"
                                        data-product_price="{{ $orignalPrice }}" data-product_id="{{ $product->id }}"
                                        data-field="quantity">
                                    <input type="number" step="1" max="10" value="1" name="quantity"
                                        class="quantity-field form-control-sm form-input   cartProductQty">
                                    <input type="button" value="+" class=" btn btn-sm cartAddQtyBtn"
                                        data-field="quantity" data-product_price="{{ $orignalPrice }}"
                                        data-product_id="{{ $product->id }}">
                                </div>

                            </div>

                            @if ($product->minimum_purchase_quantity > $product->quantity)
                            @else
                                <div class="mt-3 row justify-content-start g-2 align-items-center">

                                    <div class="col-xxl-4 col-lg-4 col-md-5 col-5 d-grid">
                                        @php
                                            $isExist = false;
                                            if (count($cartItems) > 0) {
                                                $isExist = $cartItems->where('product_id', $product->id)->first();
                                                $qty = $isExist ? $isExist->quantity : 1;
                                            }
                                        @endphp

                                        @if (!$isExist)
                                            @php
                                                $show_purchase_note = get_setting('show_purchase_note');
                                            @endphp
                                            {{-- @if (auth()->check() && auth()->user()->status === 'pending')
                                                <span class="bg-danger btn btn-sm text-white">Your Status is Pending</span>
                                            @elseif(auth()->check() && auth()->user()->status === 'blocked')
                                                <span class="bg-danger btn btn-sm text-white">You are Blocked</span>
                                            @else --}}
                                                @if ($show_purchase_note == '1' && !empty($product->purchase_note))
                                                    <a href="#!" class="btn btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#productNoteModal-{{ $product->id }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-plus">
                                                            <line x1="12" y1="5" x2="12"
                                                                y2="19"></line>
                                                            <line x1="5" y1="12" x2="19"
                                                                y2="12"></line>
                                                        </svg>
                                                        Add to cart
                                                    </a>
                                                @else
                                                    <a href="#!" class="btn btn-primary addToCartBtn"
                                                        data-product_id="{{ $product->id }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-plus">
                                                            <line x1="12" y1="5" x2="12"
                                                                y2="19"></line>
                                                            <line x1="5" y1="12" x2="19"
                                                                y2="12"></line>
                                                        </svg>
                                                        Add to cart
                                                    </a>
                                                    <div class="input-group mt-2 qtyInputBlock d-none">
                                                        <span class="input-group-btn">
                                                            <button type="button"
                                                                class="btn btn-primary decreasyQtyBtn">-</button>
                                                        </span>

                                                        <input type="number" id="quantity" name="quantity"
                                                            class="form-control text-center qtyInput"
                                                            data-product_id="{{ $product->id }}"
                                                            value="{{ $product->minimum_purchase_quantity ?? 1 }}"
                                                            min="1">
                                                        <span class="input-group-btn">
                                                            <button type="button"
                                                                class="btn btn-primary increaseQtyBtn">+</button>
                                                        </span>
                                                    </div>
                                                @endif
                                            {{-- @endif --}}
                                        @else
                                            <a href="#!" class="btn btn-primary d-none addToCartBtn"
                                                data-product_id="{{ $product->id }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-plus">
                                                    <line x1="12" y1="5" x2="12"
                                                        y2="19">
                                                    </line>
                                                    <line x1="5" y1="12" x2="19"
                                                        y2="12">
                                                    </line>
                                                </svg>
                                                Add to cart
                                            </a>
                                            <div class="input-group mt-2 qtyInputBlock">
                                                <span class="input-group-btn">
                                                    <button type="button"
                                                        class="btn btn-primary decreasyQtyBtn">-</button>
                                                </span>

                                                <input type="number" id="quantity" name="quantity"
                                                    class="form-control text-center qtyInput"
                                                    data-product_id="{{ $product->id }}"
                                                    value="{{ $qty }}" min="1">
                                                <span class="input-group-btn">
                                                    <button type="button"
                                                        class="btn btn-primary increaseQtyBtn">+</button>
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-4 col-4 d-none">
                                        <!-- btn -->
                                        <a class="btn btn-light " href="#" data-bs-toggle="tooltip"
                                            data-bs-html="true" aria-label="Compare"><i
                                                class="bi bi-arrow-left-right"></i></a>
                                        <a class="btn btn-light " href="shop-wishlist.html" data-bs-toggle="tooltip"
                                            data-bs-html="true" aria-label="Wishlist"><i
                                                class="feather-icon icon-heart"></i></a>
                                    </div>
                                </div>
                            @endif
                            <!-- hr -->
                            <hr class="my-6">
                            <div>
                                <!-- table -->
                                <table class="table table-borderless mb-0">

                                    <tbody>
                                        <tr>
                                            <td>Product SKU:</td>
                                            <td>{{ $product->sku }}</td>

                                        </tr>
                                        <tr>
                                            <td>Brand:</td>
                                            <td>{{ $product->brand->name }}</td>
                                        </tr>
                                        {{-- <tr>
                    <td>Unit:</td>
                    <td>{{ $product->unit->name }}</td>
                  </tr> --}}
                                        @if ($product->weight)
                                            <tr>
                                                <td>Weight:</td>
                                                <td>{{ $product->weight }} {{ $product->unit->name }}</td>
                                            </tr>
                                        @endif
                                        <tr>
                                            <td>Availability:</td>
                                            <td>

                                                @if ($product->minimum_purchase_quantity > $product->quantity)
                                                    <span class="badge bg-danger">Out of Stock</span>
                                                @else
                                                    <span class="badge bg-success">In Stock</span>
                                                @endif

                                            </td>

                                        </tr>
                                        {{-- <tr>
                    <td>Type:</td>
                    <td>Fruits</td>

                  </tr>
                  <tr>
                    <td>Shipping:</td>
                    <td><small>01 day shipping.<span class="text-muted">( Free pickup today)</span></small></td>
                  </tr> --}}


                                    </tbody>
                                </table>

                            </div>
                            <div class="mt-8 d-none">
                                <!-- dropdown -->
                                <div class="dropdown">
                                    <a class="btn btn-outline-secondary dropdown-toggle" href="#"
                                        role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        Share
                                    </a>

                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#"><i
                                                    class="bi bi-facebook me-2"></i>Facebook</a></li>
                                        <li><a class="dropdown-item" href="#"><i
                                                    class="bi bi-twitter me-2"></i>Twitter</a></li>
                                        <li><a class="dropdown-item" href="#"><i
                                                    class="bi bi-instagram me-2"></i>Instagram</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    @include('frontend.partials.purchase-note-modal', $product)
    <section class="mt-lg-14 mt-8 ">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-pills nav-lb-tab" id="myTab" role="tablist">
                        <!-- nav item -->
                        <li class="nav-item" role="presentation">
                            <!-- btn --> <button class="nav-link active" id="product-tab" data-bs-toggle="tab"
                                data-bs-target="#product-tab-pane" type="button" role="tab"
                                aria-controls="product-tab-pane" aria-selected="true">Product Details</button>
                        </li>
                        <!-- nav item -->
                        <li class="nav-item" role="presentation">
                            <!-- btn --> <button class="nav-link" id="details-tab" data-bs-toggle="tab"
                                data-bs-target="#details-tab-pane" type="button" role="tab"
                                aria-controls="details-tab-pane" aria-selected="false">Information</button>
                        </li>
                        {{--  other information  --}}
                        <li class="nav-item" role="presentation">
                            <!-- btn --> <button class="nav-link" id="details-tab" data-bs-toggle="tab"
                                data-bs-target="#other-tab-pane" type="button" role="tab"
                                aria-controls="other-tab-pane" aria-selected="false">Other Information</button>
                        </li>
                        <!-- nav item -->
                        <li class="nav-item d-none" role="presentation">
                            <!-- btn --> <button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
                                data-bs-target="#reviews-tab-pane" type="button" role="tab"
                                aria-controls="reviews-tab-pane" aria-selected="false">Reviews</button>
                        </li>
                        <!-- nav item -->
                        <li class="nav-item d-none" role="presentation">
                            <!-- btn --> <button class="nav-link" id="sellerInfo-tab" data-bs-toggle="tab"
                                data-bs-target="#sellerInfo-tab-pane" type="button" role="tab"
                                aria-controls="sellerInfo-tab-pane" aria-selected="false" disabled>Seller
                                Info</button>
                        </li>
                    </ul>
                    <!-- tab content -->
                    <div class="tab-content" id="myTabContent">
                        <!-- tab pane -->
                        <div class="tab-pane fade show active" id="product-tab-pane" role="tabpanel"
                            aria-labelledby="product-tab" tabindex="0">
                            <h4 class="mt-4">Short Description:</h4>
                            <div class="my-8">
                                {!! $product->short_description !!}
                            </div>
                            <h4>Long Description:</h4>
                            <div class="my-8">
                                {!! $product->long_description !!}
                            </div>
                        </div>
                        <!-- tab pane -->
                        <div class="tab-pane fade" id="details-tab-pane" role="tabpanel"
                            aria-labelledby="details-tab" tabindex="0">
                            <div class="my-8">
                                <div class="row">
                                    @if ($product->productAttributes->count() > 0)
                                        <div class="col-12 col-lg-6">
                                            <h4 class="mb-4">Attributes</h4>
                                            <table class="table table-striped">
                                                <!-- table -->
                                                <tbody>
                                                    @foreach ($product->productAttributes as $attribute)
                                                        <tr>
                                                            <th>{{ $attribute->title }}</th>
                                                            <td>{{ $attribute->value }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif
                                    @if ($product->is_wholesale)
                                        <div class="col-12 col-lg-6">
                                            <h4 class="mb-4">Wholesale Prices</h4>
                                            <table class="table table-striped">
                                                <!-- table -->
                                                <thead>
                                                    <tr>
                                                        <th>Min Qty</th>
                                                        <th>Max Qty</th>
                                                        <th>Unit Price</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $wholesalePrices = \App\Helpers\ProductsHelper::getWholeSalePrices(
                                                            $product,
                                                        );
                                                    @endphp
                                                    @foreach ($wholesalePrices as $wprice)
                                                        <tr>
                                                            <td>{{ $wprice->min_quantity }}</td>
                                                            <td>{{ $wprice->max_quantity }}</td>
                                                            <td>£{{ $wprice->price_per_unit }}</td>
                                                        </tr>
                                                    @endforeach

                                                </tbody>
                                            </table>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="other-tab-pane" role="tabpanel" aria-labelledby="details-tab"
                            tabindex="0">
                            <div class="my-8">
                                <div class="row">
                                    <div class="col-12 col-lg-6">
                                        <h4 class="mb-4">External Information</h4>
                                        <table class="table table-striped">
                                            <!-- table -->
                                            <tbody>
                                                @if ($product->qrcode)
                                                    <tr>
                                                        <td>Qr Code</td>
                                                        <td>{{ $product->qrcode }}</td>
                                                    </tr>
                                                @endif
                                                @if ($product->external_link && $product->external_link_button_name)
                                                    <tr>
                                                        <td>External Link</td>
                                                        <td><a href="{{ $product->external_link }}"
                                                                target="_blank">{{ $product->external_link_button_name }}</a>
                                                        </td>
                                                    </tr>
                                                @endif
                                                @if ($product->pdf_specification)
                                                    <tr>
                                                        <td>PDF Specification</td>
                                                        <td><a href="{{ asset($product->pdf_specification) }}"
                                                                target="_blank">Download</a></td>
                                                    </tr>
                                                @endif
                                                @if ($product->video_link)
                                                    <tr>
                                                        <td>Video Link ($product->video_provider)</td>
                                                        <td><a href="{{ $product->video_url }}"
                                                                target="_blank">Watch</a></td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab pane -->
                        <div class="tab-pane fade d-none" id="reviews-tab-pane" role="tabpanel"
                            aria-labelledby="reviews-tab" tabindex="0">
                            <div class="my-8">
                                <!-- row -->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="me-lg-12 mb-6 mb-md-0">
                                            <div class="mb-5">
                                                <!-- title -->
                                                <h4 class="mb-3">Customer reviews</h4>
                                                <span>
                                                    <!-- rating --> <small class="text-warning"> <i
                                                            class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-half"></i></small><span
                                                        class="ms-3">4.1 out of 5</span><small class="ms-3">11,130
                                                        global ratings</small></span>
                                            </div>
                                            <div class="mb-8">
                                                <!-- progress -->
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="text-nowrap me-3 text-muted"><span
                                                            class="d-inline-block align-middle text-muted">5</span><i
                                                            class="bi bi-star-fill ms-1 small text-warning"></i></div>
                                                    <div class="w-100">
                                                        <div class="progress" style="height: 6px;">
                                                            <div class="progress-bar bg-warning" role="progressbar"
                                                                style="width: 60%;" aria-valuenow="60"
                                                                aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </div><span class="text-muted ms-3">53%</span>
                                                </div>
                                                <!-- progress -->
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="text-nowrap me-3 text-muted"><span
                                                            class="d-inline-block align-middle text-muted">4</span><i
                                                            class="bi bi-star-fill ms-1 small text-warning"></i></div>
                                                    <div class="w-100">
                                                        <div class="progress" style="height: 6px;">
                                                            <div class="progress-bar bg-warning" role="progressbar"
                                                                style="width: 50%;" aria-valuenow="50"
                                                                aria-valuemin="0" aria-valuemax="50"></div>
                                                        </div>
                                                    </div><span class="text-muted ms-3">22%</span>
                                                </div>
                                                <!-- progress -->
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="text-nowrap me-3 text-muted"><span
                                                            class="d-inline-block align-middle text-muted">3</span><i
                                                            class="bi bi-star-fill ms-1 small text-warning"></i></div>
                                                    <div class="w-100">
                                                        <div class="progress" style="height: 6px;">
                                                            <div class="progress-bar bg-warning" role="progressbar"
                                                                style="width: 35%;" aria-valuenow="35"
                                                                aria-valuemin="0" aria-valuemax="35"></div>
                                                        </div>
                                                    </div><span class="text-muted ms-3">14%</span>
                                                </div>
                                                <!-- progress -->
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="text-nowrap me-3 text-muted"><span
                                                            class="d-inline-block align-middle text-muted">2</span><i
                                                            class="bi bi-star-fill ms-1 small text-warning"></i></div>
                                                    <div class="w-100">
                                                        <div class="progress" style="height: 6px;">
                                                            <div class="progress-bar bg-warning" role="progressbar"
                                                                style="width: 22%;" aria-valuenow="22"
                                                                aria-valuemin="0" aria-valuemax="22"></div>
                                                        </div>
                                                    </div><span class="text-muted ms-3">5%</span>
                                                </div>
                                                <!-- progress -->
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="text-nowrap me-3 text-muted"><span
                                                            class="d-inline-block align-middle text-muted">1</span><i
                                                            class="bi bi-star-fill ms-1 small text-warning"></i></div>
                                                    <div class="w-100">
                                                        <div class="progress" style="height: 6px;">
                                                            <div class="progress-bar bg-warning" role="progressbar"
                                                                style="width: 14%;" aria-valuenow="14"
                                                                aria-valuemin="0" aria-valuemax="14"></div>
                                                        </div>
                                                    </div><span class="text-muted ms-3">7%</span>
                                                </div>
                                            </div>
                                            <div class="d-grid">
                                                <h4>Review this product</h4>
                                                <p class="mb-0">Share your thoughts with other customers.</p>
                                                <a href="#"
                                                    class="btn btn-outline-gray-400 mt-4 text-muted">Write the
                                                    Review</a>
                                            </div>

                                        </div>
                                    </div>
                                    <!-- col -->
                                    <div class="col-md-8">
                                        <div class="mb-10">
                                            <div class="d-flex justify-content-between align-items-center mb-8">
                                                <div>
                                                    <!-- heading -->
                                                    <h4>Reviews</h4>
                                                </div>
                                                <div>
                                                    <select class="form-select">
                                                        <option selected>Top Review</option>
                                                        <option value="1">One</option>
                                                        <option value="2">Two</option>
                                                        <option value="3">Three</option>
                                                    </select>
                                                </div>

                                            </div>
                                            <div class="d-flex border-bottom pb-6 mb-6">
                                                <!-- img -->
                                                <!-- img --><img
                                                    src="{{ asset('assets/frontend') }}/assets/images/avatar/avatar-10.jpg"
                                                    alt="" class="rounded-circle avatar-lg">
                                                <div class="ms-5">
                                                    <h6 class="mb-1">
                                                        Shankar Subbaraman

                                                    </h6>
                                                    <!-- select option -->
                                                    <!-- content -->
                                                    <p class="small"> <span class="text-muted">30 December
                                                            2022</span>
                                                        <span class="text-primary ms-3 fw-bold">Verified
                                                            Purchase</span>
                                                    </p>
                                                    <!-- rating -->
                                                    <div class=" mb-2">
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <span class="ms-3 text-dark fw-bold">Need to recheck the weight
                                                            at delivery point</span>
                                                    </div>
                                                    <!-- text-->
                                                    <p>Product quality is good. But, weight seemed less than 1kg. Since
                                                        it is being sent in open
                                                        package, there is a possibility of pilferage in between.
                                                        FreshCart sends the veggies and
                                                        fruits through sealed plastic covers and Barcode on the weight
                                                        etc. .</p>
                                                    <div>
                                                        <div class="border icon-shape icon-lg border-2 ">
                                                            <!-- img --><img
                                                                src="{{ asset('assets/frontend') }}/assets/images/products/product-img-1.jpg"
                                                                alt="" class="img-fluid ">
                                                        </div>
                                                        <div class="border icon-shape icon-lg border-2 ms-1 ">
                                                            <!-- img --><img
                                                                src="{{ asset('assets/frontend') }}/assets/images/products/product-img-2.jpg"
                                                                alt="" class="img-fluid ">
                                                        </div>
                                                        <div class="border icon-shape icon-lg border-2 ms-1 ">
                                                            <!-- img --><img
                                                                src="{{ asset('assets/frontend') }}/assets/images/products/product-img-3.jpg"
                                                                alt="" class="img-fluid ">
                                                        </div>

                                                    </div>
                                                    <!-- icon -->
                                                    <div class="d-flex justify-content-end mt-4">
                                                        <a href="#" class="text-muted"><i
                                                                class="feather-icon icon-thumbs-up me-1"></i>Helpful</a>
                                                        <a href="#" class="text-muted ms-4"><i
                                                                class="feather-icon icon-flag me-2"></i>Report
                                                            abuse</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex border-bottom pb-6 mb-6 pt-4">
                                                <!-- img --><img
                                                    src="{{ asset('assets/frontend') }}/assets/images/avatar/avatar-12.jpg"
                                                    alt="" class="rounded-circle avatar-lg">
                                                <div class="ms-5">
                                                    <h6 class="mb-1">
                                                        Robert Thomas

                                                    </h6>
                                                    <!-- content -->
                                                    <p class="small"> <span class="text-muted">29 December
                                                            2022</span>
                                                        <span class="text-primary ms-3 fw-bold">Verified
                                                            Purchase</span>
                                                    </p>
                                                    <!-- rating -->
                                                    <div class=" mb-2">
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star text-warning"></i>
                                                        <span class="ms-3 text-dark fw-bold">Need to recheck the weight
                                                            at delivery point</span>
                                                    </div>

                                                    <p>Product quality is good. But, weight seemed less than 1kg. Since
                                                        it is being sent in open
                                                        package, there is a possibility of pilferage in between.
                                                        FreshCart sends the veggies and
                                                        fruits through sealed plastic covers and Barcode on the weight
                                                        etc. .</p>

                                                    <!-- icon -->
                                                    <div class="d-flex justify-content-end mt-4">
                                                        <a href="#" class="text-muted"><i
                                                                class="feather-icon icon-thumbs-up me-1"></i>Helpful</a>
                                                        <a href="#" class="text-muted ms-4"><i
                                                                class="feather-icon icon-flag me-2"></i>Report
                                                            abuse</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex border-bottom pb-6 mb-6 pt-4">
                                                <!-- img --><img
                                                    src="{{ asset('assets/frontend') }}/assets/images/avatar/avatar-9.jpg"
                                                    alt="" class="rounded-circle avatar-lg">
                                                <div class="ms-5">
                                                    <h6 class="mb-1">
                                                        Barbara Tay

                                                    </h6>
                                                    <!-- content -->
                                                    <p class="small"> <span class="text-muted">28 December
                                                            2022</span>
                                                        <span class="text-danger ms-3 fw-bold">Unverified
                                                            Purchase</span>
                                                    </p>
                                                    <!-- rating -->
                                                    <div class=" mb-2">
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star text-warning"></i>
                                                        <span class="ms-3 text-dark fw-bold">Need to recheck the weight
                                                            at delivery point</span>
                                                    </div>

                                                    <p>Everytime i ordered from fresh i got greenish yellow bananas just
                                                        like i wanted so go for
                                                        it , its happens very rare that u get over riped ones.</p>

                                                    <!-- icon -->
                                                    <div class="d-flex justify-content-end mt-4">
                                                        <a href="#" class="text-muted"><i
                                                                class="feather-icon icon-thumbs-up me-1"></i>Helpful</a>
                                                        <a href="#" class="text-muted ms-4"><i
                                                                class="feather-icon icon-flag me-2"></i>Report
                                                            abuse</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex border-bottom pb-6 mb-6 pt-4">
                                                <!-- img --><img
                                                    src="{{ asset('assets/frontend') }}/assets/images/avatar/avatar-8.jpg"
                                                    alt="" class="rounded-circle avatar-lg">
                                                <div class="ms-5 flex-grow-1">
                                                    <h6 class="mb-1">
                                                        Sandra Langevin

                                                    </h6>
                                                    <!-- content -->
                                                    <p class="small"> <span class="text-muted">8 December 2022</span>
                                                        <span class="text-danger ms-3 fw-bold">Unverified
                                                            Purchase</span>
                                                    </p>
                                                    <!-- rating -->
                                                    <div class=" mb-2">
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                        <i class="bi bi-star text-warning"></i>
                                                        <span class="ms-3 text-dark fw-bold">Great product</span>
                                                    </div>

                                                    <p>Great product & package. Delivery can be expedited. </p>

                                                    <!-- icon -->
                                                    <div class="d-flex justify-content-end mt-4">
                                                        <a href="#" class="text-muted"><i
                                                                class="feather-icon icon-thumbs-up me-1"></i>Helpful</a>
                                                        <a href="#" class="text-muted ms-4"><i
                                                                class="feather-icon icon-flag me-2"></i>Report
                                                            abuse</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <a href="#" class="btn btn-outline-gray-400 text-muted">Read
                                                    More Reviews</a>
                                            </div>
                                        </div>
                                        <div>
                                            <!-- rating -->
                                            <h3 class="mb-5">Create Review</h3>
                                            <div class="border-bottom py-4 mb-4">
                                                <h4 class="mb-3">Overall rating</h4>
                                                <div id="rater"></div>
                                            </div>
                                            <div class="border-bottom py-4 mb-4">
                                                <h4 class="mb-0">Rate Features</h4>
                                                <div class="my-5">
                                                    <h5>Flavor</h5>
                                                    <div id="rate-2"></div>
                                                </div>
                                                <div class="my-5">
                                                    <h5>Value for money</h5>
                                                    <div id="rate-3"></div>
                                                </div>
                                                <div class="my-5">
                                                    <h5>Scent</h5>
                                                    <div id="rate-4"></div>
                                                </div>


                                            </div>
                                            <!-- form control -->
                                            <div class="border-bottom py-4 mb-4">
                                                <h5>Add a headline</h5>
                                                <input type="text" class="form-control"
                                                    placeholder="What’s most important to know">
                                            </div>
                                            <div class="border-bottom py-4 mb-4">
                                                <h5>Add a photo or video</h5>
                                                <p>Shoppers find images and videos more helpful than text alone.</p>
                                                <!-- form -->
                                                <form action="#" class=" dropzone profile-dropzone">
                                                    <div class="fallback">
                                                        <input name="file" type="file" multiple />
                                                    </div>
                                                </form>

                                            </div>
                                            <div class=" py-4 mb-4">
                                                <!-- heading -->
                                                <h5>Add a written review</h5>
                                                <textarea class="form-control" rows="3"
                                                    placeholder="What did you like or dislike? What did you use this product for?"></textarea>

                                            </div>
                                            <!-- button -->
                                            <div class="d-flex justify-content-end">
                                                <a href="#" class="btn btn-primary">Submit Review</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <!-- tab pane -->
                        <div class="tab-pane fade" id="sellerInfo-tab-pane" role="tabpanel"
                            aria-labelledby="sellerInfo-tab" tabindex="0">...</div>
                    </div>
                </div>
            </div>
        </div>



    </section>

    <!-- section -->
    <section class="my-lg-14 my-14">
        <div class="container">
            <!-- row -->
            <div class="row">
                <div class="col-12">
                    <!-- heading -->
                    <h3>Related Items</h3>
                </div>
            </div>
            <!-- row -->
            <div class="row g-4 row-cols-lg-5 row-cols-2 row-cols-md-2 mt-2">
                <!-- col -->
                @if ($related_products->count() > 0)
                    @foreach ($related_products as $product)
                        @include('frontend.partials.prodcut', $product)
                    @endforeach
                @else
                    <div class="col mx-auto mb-4 text-center text-muted">
                        No related products found
                    </div>
                @endif
            </div>
        </div>
    </section>

</main>

@include('frontend.partials.product-script')
@endsection
@section('scripts')
<script src="{{ asset('assets/frontend') }}/assets/libs/tiny-slider/dist/min/tiny-slider.js"></script>
<script src="{{ asset('assets/frontend') }}/assets/js/vendors/tns-slider.js"></script>
<script src="{{ asset('assets/frontend') }}/assets/js/vendors/zoom.js"></script>
@endsection