@php
    $productImageGalleries = \App\Models\ProductImageGallery::where('product_id', $product->id)->get();
@endphp
@extends('layouts.master')
@section('content')
    <!-- Breadcum Start -->
    @include('components.breadcum')
    <!-- Breadcum End -->
    <!-- Shop Details Start -->
    <section class="shop-details v1 pt-50 pb-50 pt-md-70 pb-md-70 pt-xl-100 pb-xl-100">
        <div class="container">
            <div class="product-display row">
                <div class="col-xl-6">
                    <div class="display-left">
                        <div class="big-box-img">
                            <div class="slider">
                                <div class="swiper-wrapper">
                                    @if (count($productImageGalleries) > 0)
                                        @foreach ($productImageGalleries as $productImageGallery)
                                            <div class="swiper-slide">
                                                <img src="{{ asset('uploads/products/image-gallery/' . $productImageGallery->image) }}"
                                                    alt="shop-details-img">
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="swiper-slide">
                                            <img src="{{ asset('uploads/products/' . $product->image) }}"
                                                alt="shop-details-img">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="small-box-img mt-30 mt-xl-0">
                            <button class="next-btn"><i class="my-icon icon-angle-up"></i>
                            </button>
                            <div class="slider">
                                <div class="swiper-wrapper">
                                    @if (count($productImageGalleries) > 0)
                                        @foreach ($productImageGalleries as $productImageGallery)
                                            <div class="swiper-slide">
                                                <img src="{{ asset('uploads/products/image-gallery/' . $productImageGallery->image) }}"
                                                    alt="shop-details-img">
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="swiper-slide">
                                            <img src="{{ asset('uploads/products/' . $product->image) }}"
                                                alt="shop-details-img">
                                        </div>
                                    @endif

                                </div>
                            </div>
                            <button class="prev-btn"><i class="my-icon icon-angle-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="display-right mt-50 mt-xl-0">
                        <div class="shop-card-rating">
                            <div class="content-left">
                                <h5 class="text-5 text-bold mt-10">{{ $product->name }}</h5>
                            </div>
                            <div class="card-pricing">
                                @if (ifProductHasDiscount($product))
                                    <del class="text-para-1 text-bold">{{ formatAmount($product->price, $settings) }}</del>
                                    <p class="text-para-1 text-bold price">
                                        {{ formatAmount($product->offer_price, $settings) }}
                                    </p>
                                @else
                                    <p class="text-para-1 text-bold price">
                                        {{ formatAmount($product->price, $settings) }}
                                    </p>
                                @endif
                            </div>
                        </div>
                        <h6 class="text-para-1 mt-30">{{ $product->short_description }}.</h6>
                        <h6 class="text-para-1 mt-30">Quantity:{{ $product->quantity }}</h6>
                        <div class="quan-card mt-20">
                            <form class="shopping-cart-form">
                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                <input class="d-none" name="qty" type="text" min="1" max="100"
                                    value="1" />
                                <button type="submit" class="link-anime v1 round-border-small uppercase"><i
                                        class="my-icon icon-add-to-card"></i>ADD TO CART</button>
                            </form>
                        </div>
                        {{-- <form class="shopping-cart-form">
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input class="d-none" name="qty" type="text" min="1" max="100"
                                value="1" />
                            <button type="submit" class="link-anime v2 round-border-small uppercase"><i
                                    class="my-icon icon-add-to-card"></i>ADD TO CART</button>
                        </form> --}}
                        <ul class="shop-services mt-30">
                            <li><i class="my-icon icon-free-delivery"></i>
                                <div class="contetn">
                                    <h6 class="text-6 text-bold">Freee Delivery</h6>
                                    <p class="text-para-1">From {{ formatAmount($shippingRule->min_cost, $settings) }}</p>
                                </div>
                            </li>
                            <li><i class="my-icon icon-like"></i>
                                <div class="contetn">
                                    <h6 class="text-6 text-bold">99% Customer</h6>
                                    <p class="text-para-1">Feedbacks</p>
                                </div>
                            </li>
                            <li><i class="my-icon icon-days"></i>
                                <div class="contetn">
                                    <h6 class="text-6 text-bold">55 days</h6>
                                    <p class="text-para-1">For free return</p>
                                </div>
                            </li>
                        </ul>
                        <h6 class="text-6 mt-40"><span class="text-6 text-bold">Sku: </span>{{ $product->sku }}</h6>
                        <h6 class="text-6 mt-10"><span class="text-6 text-bold">Category:</span>
                            {{ $product->productCategory->name }}</h6>
                    </div>
                </div>
            </div>
            <div class="shop-tab mt-50 mt-xl-100">
                <ul class="shop-tab-btns" role="tablist">
                    <li class="shop-btn-list active">
                        <button class="btn-anime v1 round-border-small active" id="discription-1-tab" data-bs-toggle="tab"
                            data-bs-target="#discription-1">Description</button>
                    </li>
                    <li class="shop-btn-list">
                        <button class="btn-anime v1 round-border-small" id="additional-info-2-tab" data-bs-toggle="tab"
                            data-bs-target="#additional-info-2">Store Information</button>
                    </li>
                    <li class="shop-btn-list">
                        <button class="btn-anime v1 round-border-small" id="reviews-3-tab" data-bs-toggle="tab"
                            data-bs-target="#reviews-3">Reviews</button>
                    </li>
                </ul>
                <div class="tab-content mt-30 mt-xl-0">
                    <div class="tab-pane fade show active wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                        data-wow-duration="0.8s" id="discription-1" tabindex="1">
                        <div class="discription">
                            <h5 class="text-5 text-bold">About Product</h5>
                            <p class="text-para-1 mt-15">{!! $product->long_description !!}</p>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                        data-wow-duration="0.8s" id="additional-info-2" tabindex="1">
                        <div class="additional-info">
                            <div class="info-list-title">
                                <h6 class="main-title text-para-1 text-bold">Shop information</h6>
                                <ul class="info-list">
                                    <li>
                                        <p class="text-para-1"><span class="text-bold">Store:</span>
                                            {{ config('app.name') }} Store</p>
                                    </li>
                                    <li>
                                        <p class="text-para-1"><span class="text-bold">Name :</span>
                                            {{ config('app.name') }}
                                        </p>
                                    </li>
                                    <li>
                                        <p class="text-para-1"><span class="text-bold">Email :</span>
                                            {{ config('app.email') }}</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                        data-wow-duration="0.8s" id="reviews-3" tabindex="1">
                        <div class="reviews">
                            @php
                                $reviews = \App\Models\ProductReview::where('product_id', $product->id)
                                    ->where('status', 1)
                                    ->get();
                            @endphp
                            <h6 class="text-para-1 text-bold">{{ count($reviews) }} Review For {{ $product->name }}</h6>
                            <ul class="review-cards mt-20">
                                @forelse ($reviews as $review)
                                    <li class="review-card">
                                        <div class="review-profile">
                                            <img src="{{ asset('uploads/user/image/' . $review->user->image) }}"
                                                alt="profile">
                                            <div class="profile-content">
                                                <div class="content-left">
                                                    <h6 class="text-6 text-bold">{{ $review->user->name }}</h6>
                                                    <p class="text-para-1">Customer</p>
                                                </div>
                                                <p class="text-para-1">{{ $review->created_at->diffForHumans() }}</p>
                                            </div>
                                        </div>
                                        <div class="testimonial-content mt-20">
                                            <p class="text-para-1">
                                                {{ $review->review }}
                                            </p>
                                        </div>
                                    </li>
                                @empty
                                    <li class="review-card">
                                        <div>
                                            No Reviews
                                        </div>
                                    </li>
                                @endforelse
                            </ul>
                            @auth
                                <h5 class="text-5 text-bold mt-35">Add A Review</h5>
                                <form action="{{ route('user.reviews.store') }}" class="review-form mt-20" method="post">
                                    @csrf
                                    <div class="form-box mt-20">
                                        <input class="mt-15" id="email-2" type="hidden" name="product_id"
                                            value="{{ $product->id }}">
                                    </div>
                                    <div class="form-box mt-20">
                                        <label for="your-review-3">Your review*</label>
                                        <textarea name="review" class="mt-15" id="your-review-3" required></textarea>
                                    </div>
                                    <button class="btn-anime mt-30 v2 round-border-small text-capital">Submit</button>
                                </form>
                            @endauth
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Shop Details End -->
    <!-- Shop Start -->
    <section class="shop v1 pb-50 pb-md-70 pb-xl-100">
        <div class="container">
            <h5 class="text-5 text-bold mb-30">Related Products</h5>
            <div class="row justify-content-center">
                @forelse ($products as $product)
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <div class="shop-card wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                            data-wow-duration="0.8s">
                            <div class="shop-img">
                                <img src="{{ asset('uploads/products/' . $product->image) }}" alt="shop">
                                <form class="shopping-cart-form">
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <input class="d-none" name="qty" type="text" min="1" max="100"
                                        value="1" />
                                    <button type="submit" class="link-anime v2 round-border-small uppercase"><i
                                            class="my-icon icon-add-to-card"></i>ADD TO CART</button>
                                </form>
                                <a href="{{ route('products.details', $product->slug) }}">{{ $product->name }}"
                                    class="tag tag-black">{{ productType($product->product_type) }}</a>
                            </div>
                            <div class="shop-content">
                                <h5 class="text-5 text-bold"><a
                                        href="{{ route('products.details', $product->slug) }}">{{ $product->name }}</a>
                                </h5>
                                <div class="card-pricing">
                                    @if (ifProductHasDiscount($product))
                                        <del
                                            class="text-para-1 text-bold">{{ formatAmount($product->price, $settings) }}</del>
                                        <p class="text-para-1 text-bold price">
                                            {{ formatAmount($product->offer_price, $settings) }}
                                        </p>
                                    @else
                                        <p class="text-para-1 text-bold price">
                                            {{ formatAmount($product->price, $settings) }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="alert alert-warning text-center"><strong>No related products</strong></div>
                @endforelse

            </div>
        </div>
    </section>
    <!-- Shop End -->
@endsection