@extends($_layout . 'master')
@section('title', $page_title)
@include($_lib . 'register-meta')
@section('breadcrumb.show', 'breadcrumb')

@php
    $hasPromo = $product->hasPromo();
    // $reviews = $product->getReviewData();
    $hasOption = $product->hasOption();
    $u = $product->getViewUrl();
    $user = $request->user();
    add_product_schema($product);

    $reviewAnalytics = $product->getReviewData();

    $downPercent = $product->getDownPercent();
    $listPrice = $product->priceFormat('list');
    $finalPrice = $product->final_price_format;

@endphp
@php
    $thumbnails = $product->getThumbnailOrderOption();
    $thumbnailImages = [$product->getImage()];
    if ($thumbnails) {
        foreach ($thumbnails as $thumbAttr) {
            if (is_array($attrValues = $thumbAttr->values) && count($attrValues)) {
                foreach ($attrValues as $attrVal) {
                    if ($attrVal->thumbnail) {
                        $thumbnailImages[] = $attrVal;
                    }
                }
            }
        }
    }
    if ($product->gallery && count($product->gallery)) {
        foreach ($product->gallery as $item) {
            $thumbnailImages[] = $item->url;
        }
    }
@endphp

@section('content')

    <!-- Shop-details-area-start -->
    <div class="bd__shop-details-area pt-110 pb-75">
        <div class="container small-container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="bd__shop-details-inner mb-55">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="product-details__thumb-inner small-device p-relative">
                                    <div class="bd__shop-details-img-gallery mb-30">
                                        <div class="product-details-active swiper-container">
                                            @if ($thumbnailImages)
                                                <div class="swiper-wrapper">
                                                    @foreach ($thumbnailImages as $item)
                                                        <div class="swiper-slide">
                                                            <div class="bd-product__details-large-img w-img">
                                                                <img src="{{ $item }}" alt="{{ $product->name }}">
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="bd-product__details-small-img">
                                        <div class="swiper-container product-details-nav">
                                            @if ($thumbnailImages)
                                                <div class="swiper-wrapper">
                                                    @foreach ($thumbnailImages as $item)
                                                        <div class="swiper-slide m-img">
                                                            <div class="product-small__img">
                                                                <img src="{{ $item }}" alt="{{ $product->name }}">
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <!-- If we need navigation buttons -->
                                    <div class="bd-product__details-nav">
                                        <button class="product-details__button-prev"><i class="fa-regular fa-angle-left"></i></button>
                                        <button class="product-details__button-next"><i class="fa-regular fa-angle-right"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="modal-product-info shop-details-info">
                                    @if ($reviewAnalytics && $reviewAnalytics->total)
                                        <div class="product-ratting">
                                            <ul>


                                                @php
                                                    $rateAvgInt = $reviewAnalytics->rating_int;

                                                    $rateAvgFlloat = $reviewAnalytics->rating_avg;

                                                    // Danh gia trung binh

                                                @endphp
                                                {{-- lặp qua từ 0 den so sao --}}
                                                @for ($i = 0; $i < $rateAvgInt; $i++)
                                                    <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                @endfor
                                                {{-- nếu rate_avg > rate_int thì cộng thêm nữa sao --}}
                                                @if ($rateAvgFlloat > $rateAvgInt)
                                                    <li>
                                                        <i class="fa-solid fa-star-half-alt"></i>

                                                    </li>
                                                @endif
                                                <li class="review-total"> <a href="#"> ( {{ $reviewAnalytics ? $reviewAnalytics->total : 0 }} Đánh giá )</a></li>
                                            </ul>
                                        </div>
                                    @endif
                                    <h3>{{ $product->name }}</h3>
                                    <div class="product-price">
                                        @if ($product->price_status > -1)
                                            <span class="bd-product__new-price">{{ $finalPrice }}</span>
                                            @if ($hasPromo)
                                                <del>{{ $listPrice }}</del>
                                            @endif
                                        @else
                                            <span class="bd-product__new-price">Liên hệ</span>
                                        @endif
                                    </div>
                                    @if ($product->tags && count($product->tags))
                                        <div class="modal-product-meta bd__product-details-menu-1">
                                            <ul>
                                                <li>
                                                    <strong>Thẻ:</strong>
                                                    <span>
                                                        @foreach ($product->tags as $tag)
                                                            <a href="{{ route('web.products', ['s' => $tag->keyword]) }}">{{ $tag->name }}</a>{{ $loop->last ? '' : ',' }}
                                                        @endforeach

                                                    </span>
                                                </li>
                                            </ul>
                                        </div>
                                    @endif
                                    <div class="product-quantity-cart mb-25">
                                        <div class="product-quantity-form">
                                            <form action="{{ route('web.orders.add-to-cart') }}" method="post" class="{{ parse_classname('product-order-form') }}">
                                                <input type="hidden" name="product_id" value="{{ $product->id }}" class="{{ parse_classname('product-order-id') }}">

                                                <button class="cart-minus"><i class="far fa-minus"></i></button>
                                                <input class="cart-input {{ parse_classname('product-order-quantity', 'quantity') }} inp-quantity" type="text" name="quantity" placeholder="1" value="1">

                                                <button class="cart-plus"><i class="far fa-plus"></i></button>
                                            </form>
                                        </div>
                                        <a class="cart-btn bd-fill__btn" href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="Mua Ngay" data-bs-toggle="modal"><i class="fal fa-cart-arrow-down"></i>Mua Ngay</a>
                                    </div>
                                    {{-- <div class="bd__product-details-menu-3">
                                        <ul>
                                            <li>
                                                <a href="javascript:void(0)" class="wishlist-btn" title="Wishlist" data-toggle="modal" data-target="#liton_wishlist_modal">
                                                    <i class="far fa-heart"></i>
                                                    <span>Add to Wishlist</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" class="wishlist-btn cart-btn" title="Compare" data-toggle="modal" data-target="#quick_view_modal">
                                                    <i class="fas fa-exchange-alt"></i>
                                                    <span>Compare</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div> --}}
                                    {{-- <div class="bd__social-media">
                                        <ul>
                                            <li>Share:</li>
                                            <li><a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                            <li><a href="#" title="Twitter"><i class="fab fa-twitter"></i></a></li>
                                            <li><a href="#" title="Linkedin"><i class="fab fa-linkedin"></i></a></li>
                                            <li><a href="#" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="bd__safe-checkout">
                                        <h5>Guaranteed Safe Checkout</h5>
                                        <a href="#"><img src="assets/img/icon/discover.png" alt="Payment Image"></a>
                                        <a href="#"><img src="assets/img/icon/mastercard.png" alt="Payment Image"></a>
                                        <a href="#"><img src="assets/img/icon/paypal.png" alt="Payment Image"></a>
                                        <a href="#"><img src="assets/img/icon/visa.png" alt="Payment Image"></a>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Shop Tab Start -->
                    <div class="product_info-faq-area pt-50">
                        <nav class="product-details-tab">
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <a class="nav-item nav-link show active" id="nav-general-tab" data-bs-toggle="tab" href="#nav-general" role="tab" aria-selected="false">Chi tiết sản phẩm</a>
                                <a class="nav-item nav-link " id="nav-seller-tab" data-bs-toggle="tab" href="#nav-seller" role="tab" aria-selected="true">Đánh giá</a>
                            </div>
                        </nav>
                        <div class="tab-content product-details-content" id="nav-tabContent">
                            <div class="tab-pane fade  active show" id="nav-general" role="tabpanel">
                                <div class="tabs-wrapper mt-35 mb-40">
                                    <div class="product__details-des">
                                        {!! $product->detail !!}
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-seller" role="tabpanel">
                                <div class="tabs-wrapper mt-35 mb-50">
                                    <div class="alert alert-warning text-center">
                                        Chưa có đánh giá nào!
                                    </div>
                                    {{-- <div class="course-review-item mb-30">
                                        <div class="course-reviews-img">
                                            <a href="#"><img src="assets/img/testimonial/1.jpg" alt="image not found"></a>
                                        </div>
                                        <div class="course-review-list">
                                            <h5><a href="#">Sotapdi Kunda</a></h5>
                                            <div class="course-start-icon">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <span>55 min ago</span>
                                            </div>
                                            <p>Very clean and organized with easy to follow tutorials, Exercises, and
                                                solutions.
                                                This course does start from the beginning with very little knowledge and
                                                gives a
                                                great overview of common tools used for data science and progresses into
                                                more
                                                complex concepts and ideas.</p>
                                        </div>
                                    </div>
                                    <div class="course-review-item mb-30">
                                        <div class="course-reviews-img">
                                            <a href="#"><img src="assets/img/testimonial/2.jpg" alt="image not found"></a>
                                        </div>
                                        <div class="course-review-list">
                                            <h5><a href="#">Samantha</a></h5>
                                            <div class="course-start-icon">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <span>45 min ago</span>
                                            </div>
                                            <p>The course is good at explaining very basic intuition of the concepts. It
                                                will get
                                                you scratching the surface so to say. where this course is unique is the
                                                implementation methods are so well defined Thank you to the team !.</p>
                                        </div>
                                    </div>
                                    <div class="course-review-item mb-30">
                                        <div class="course-reviews-img">
                                            <a href="#"><img src="assets/img/testimonial/3.jpg" alt="image not found"></a>
                                        </div>
                                        <div class="course-review-list">
                                            <h5><a href="#">Michell Mariya</a></h5>
                                            <div class="course-start-icon">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <span>30 min ago</span>
                                            </div>
                                            <p>This course is amazing..!
                                                I started this course as a beginner and learnt a lot. Instructors are great.
                                                Query
                                                handling can be improved.Overall very happy with the course.</p>
                                        </div>
                                    </div>
                                    <div class="product__details-comment ">
                                        <div class="comment-title mb-20">
                                            <h3>Add a review</h3>
                                            <p>Your email address will not be published. Required fields are marked *</p>
                                        </div>
                                        <div class="comment-rating mb-20">
                                            <span>Overall ratings</span>
                                            <ul>
                                                <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                <li><a href="#"><i class="fal fa-star"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="comment-input-box mb-20">
                                            <form action="#">
                                                <div class="row">
                                                    <div class="col-xxl-12">
                                                        <textarea placeholder="Your review" class="comment-input comment-textarea mb-20"></textarea>
                                                    </div>
                                                    <div class="col-xxl-6 col-md-6">
                                                        <div class="comment-input mb-20">
                                                            <input type="text" placeholder="Your Name">
                                                        </div>
                                                    </div>
                                                    <div class="col-xxl-6 col-md-6">
                                                        <div class="comment-input mb-20">
                                                            <input type="email" placeholder="Your Email">
                                                        </div>
                                                    </div>
                                                    <div class="col-xxl-12">
                                                        <div class="comment-submit">
                                                            <button type="submit" class="bd-fill__btn">Submit</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Shop Tab End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Shop-details-area-end -->

    <!-- Related-Product start -->
    <div class="bd-related-Product__area mb-95">
        <div class="small-container container">
            <div class="col-xxl-12 col-xl-12 col-lg-12">
                <div class="row align-items-center">
                    <div class="col-xxl-4 col-xl-5 col-lg-4">
                        <div class="bd-section__title-wrapper mb-40">
                            <div class="bd-sm__section-title">
                                <h3>Sản phẩm liên quan</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-8 col-xl-7 col-lg-8">
                        <div class="bd-trending__tab-wrapper mb-40 p-relative">
                            <div class="bd-tending-nav">
                                <nav>
                                    <div class="nav nav-tabs" id="nav-tab-item" role="tablist">
                                        <button class="nav-link active" id="nav-tab-1-tab" data-bs-toggle="tab" data-bs-target="#nav-tab-1" type="button" role="tab" aria-controls="nav-tab-1" aria-selected="true">Tất cả</button>
                                        {{-- <button class="nav-link" id="nav-tab-2-tab" data-bs-toggle="tab" data-bs-target="#nav-tab-2" type="button" role="tab" aria-controls="nav-tab-2" aria-selected="false">New Arrival</button>
                                        <button class="nav-link" id="nav-tab-3-tab" data-bs-toggle="tab" data-bs-target="#nav-tab-3" type="button" role="tab" aria-controls="nav-tab-3" aria-selected="false">Best Sale</button>
                                        <button class="nav-link" id="nav-tab-4-tab" data-bs-toggle="tab" data-bs-target="#nav-tab-4" type="button" role="tab" aria-controls="nav-tab-4" aria-selected="false">Featured</button> --}}
                                    </div>
                                </nav>
                            </div>
                            <!-- If we need navigation buttons -->
                            <div class="bd-trending__navigation">
                                <button class="trending-button-prev"><i class="fa-regular fa-angle-left"></i></button>
                                <button class="trending-button-next"><i class="fa-regular fa-angle-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bd-trending__item-wrapper">
                    <div class="tab-content" id="nav-tabContent-2">
                        <div class="tab-pane fade show active" id="nav-tab-1" role="tabpanel" aria-labelledby="nav-tab-1-tab">
                            <div class="bd-trending-active swiper-container">
                                @include($_template . 'products.swiper-slider', [
                                    'products' => get_active_model('product')->getRelated([
                                        '@limit' => 8,
                                        '@with' => ['gallery', 'promoAvailable', 'labels'],
                                        '@withOption' => true,
                                    ]),
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Related-Product end -->







@endsection