@extends('frontend.master')

@section('title')
    Product Details
@endsection

@section('content')
    <main class="main mb-10 pb-1">
        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav container">
            <ul class="breadcrumb bb-no">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li>Product Details</li>
            </ul>

        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of Page Content -->
        <div class="page-content">
            <div class="container">
                <div class="row gutter-lg">
                    <div class="main-content">
                        <div class="product product-single row">
                            <div class="col-md-6 mb-6">
                                <div class="product-gallery product-gallery-sticky">
                                    <div class="swiper-container product-single-swiper swiper-theme nav-inner"
                                        data-swiper-options="{
                                    'navigation': {
                                        'nextEl': '.swiper-button-next',
                                        'prevEl': '.swiper-button-prev'
                                    }
                                }">
                                        <div class="swiper-wrapper row cols-1 gutter-no">
                                            @foreach ($productImages as $productImage)
                                                <div class="swiper-slide">
                                                    <figure class="product-image">
                                                        <img src="{{ asset('/uploads/product/gallery/' . $productImage->image) }}"
                                                            data-zoom-image="{{ asset('/uploads/product/gallery/' . $productImage->image) }}"
                                                            alt="Electronics Black Wrist Watch" width="800"
                                                            height="900">
                                                    </figure>
                                                </div>
                                            @endforeach
                                        </div>

                                        <button class="swiper-button-next"></button>
                                        <button class="swiper-button-prev"></button>

                                    </div>
                                    <div class="product-thumbs-wrap swiper-container"
                                        data-swiper-options="{
                                    'navigation': {
                                        'nextEl': '.swiper-button-next',
                                        'prevEl': '.swiper-button-prev'
                                    }
                                }">
                                        <div class="product-thumbs swiper-wrapper row cols-4 gutter-sm">
                                            @foreach ($productImages as $image)
                                                <div class="product-thumb swiper-slide">
                                                    <img src="{{ asset('/uploads/product/gallery/' . $image->image) }}"
                                                        alt="Product Thumb" width="800" height="900">
                                                </div>
                                            @endforeach
                                        </div>
                                        <button class="swiper-button-next"></button>
                                        <button class="swiper-button-prev"></button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4 mb-md-6">
                                <div class="product-details" data-sticky-options="{'minWidth': 767}">
                                    <h1 class="product-title">{{ $product->name }}</h1>
                                    <div class="product-bm-wrapper">
                                        <figure class="brand">
                                            <img src="{{ asset('/uploads/brand/' . $product?->brand?->image) }}"
                                                alt="Brand" width="102" height="48" />
                                        </figure>
                                        <div class="product-meta">
                                            <div class="product-categories">
                                                Category:
                                                <span class="product-category"><a
                                                        href="#">{{ $product?->category?->name ?? '' }}</a></span>
                                            </div>
                                            <div class="product-sku">
                                                Code: <span>{{ $product->code }}</span>
                                            </div>

                                            <div class="product-sku" style='margin-top: 10px;'>
                                                Status: <span
                                                    style="color: {{ $product->quantity > 0 ? 'green' : 'red' }}">{{ $product->quantity > 0 ? 'In Stock' : 'Out Stock' }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="product-divider">
                                    <div class="product-price">
                                        @if (!empty($product->offer_price))
                                            <del class="old-price">{{ $product->price }}</del>

                                            <ins class="new-price">
                                                {{ $product->offer_price }}
                                            </ins>
                                        @else
                                            <ins class="new-price">{{ $product->price }}</ins>
                                        @endif
                                    </div>

                                    @if (!empty(count($ratings)))
                                        <div class="ratings-container">
                                            <div class="ratings-full">
                                                <span class="ratings"
                                                    style="width: {{ round($product->product_ratings_avg_rating) * 20 }}%;"></span>
                                                <span class="tooltiptext tooltip-top"></span>
                                            </div>

                                            <a href="#product-tab-reviews"
                                                class="rating-reviews scroll-to">({{ count($ratings) }}
                                                {{ count($ratings) > 1 ? 'Reviews' : 'Review' }})</a>
                                        </div>
                                    @endif

                                    <div class="product-short-desc">
                                        <ul class="list-type-check list-style-none">
                                            <li>{{ $product->short_description }}</li>
                                        </ul>
                                    </div>

                                    <hr class="product-divider">

                                    {{-- <div class="product-form product-variation-form product-color-swatch">
                                        <label>Color:</label>
                                        <div class="d-flex align-items-center product-variations">
                                            @foreach ($colors as $color)
                                                @php
                                                    $colorName = App\Models\Admin\Color::findOrFail($color)->name;
                                                @endphp

                                                <a href="#" class="color"
                                                    style="background-color: {{ $colorName }}"></a>
                                            @endforeach
                                        </div>
                                    </div> --}}

                                    <div class="product-form product-variation-form product-size-swatch">
                                        <label class="mb-1">Size:</label>
                                        <div class="flex-wrap d-flex align-items-center product-variations">
                                            @foreach ($sizes as $size)
                                                <a href="#" data-size="{{ $size->name }}"
                                                    class="size productSize">{{ $size->name }}</a>
                                            @endforeach
                                        </div>
                                    </div>

                                    <input type="hidden" name="product_id" class="product_id" value="{{ $product->id }}">
                                    <input type="hidden" name="size" value="" class="sizeId">
                                    <input type="hidden" name="price" value="{{ $product->price }}"
                                        class="productPrice">

                                    <input type="hidden" name="offer_price" value="{{ $product->offer_price }}"
                                        class="offer_price">

                                    @if ($product->quantity > 0)
                                        <div class="fix-bottom product-sticky-content sticky-content">
                                            <div class="product-form container">
                                                <div class="product-qty-form mt-1">
                                                    <div class="input-group">
                                                        <input class="quantity form-control" type="number" min="1"
                                                            max="10000000" name="quantity" readonly>
                                                        <button type="button" class="quantity-plus w-icon-plus"></button>
                                                        <button type="button"
                                                            class="quantity-minus w-icon-minus"></button>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary addToCartBtn">
                                                    <i class="w-icon-cart"></i>
                                                    <span>Add to Cart</span>
                                                </button>

                                            </div>
                                        </div>
                                    @endif
                                </div>

                            </div>
                        </div>

                        <div class="tab tab-nav-boxed tab-nav-underline product-tabs">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a href="#product-tab-description" class="nav-link active">Description</a>
                                </li>

                                @if (!empty($product->product_ratings_count))
                                    <li class="nav-item">
                                        <a href="#product-tab-reviews" class="nav-link">Customer Reviews
                                            ({{ count($ratings) }})</a>
                                    </li>
                                @endif
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane active" id="product-tab-description">
                                    <div class="row mb-4">
                                        @if (!empty(@$product->video_link))
                                            <div class="col-md-12 col-lg-12 mb-5">
                                                <div class="banner banner-video product-video br-xs">
                                                    <figure class="banner-media">
                                                        <iframe width="610" height="300"
                                                            src="{{ $product->video_link ?? '' }}"
                                                            title="YouTube video player" frameborder="0"
                                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                            allowfullscreen>
                                                        </iframe>
                                                    </figure>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="col-md-12 col-lg-12 mb-5">
                                            <p class="mb-4">
                                                {!! $product->long_description !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="product-tab-reviews">
                                    <ul class="comments list-style-none">
                                        @foreach ($ratings as $rating)
                                            <li class="comment">
                                                <div class="comment-body">
                                                    @if (!empty($rating->image))
                                                        <figure class="comment-avatar">
                                                            <img src="{{ asset('/uploads/review/' . $rating->image) }}"
                                                                alt="Commenter Avatar"
                                                                style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
                                                        </figure>
                                                    @endif

                                                    <div class="comment-content">
                                                        <h4 class="comment-author">
                                                            <a href="#">{{ $rating->name }}</a>
                                                            <span
                                                                class="comment-date">{{ date('d-F-Y', strtotime($rating->created_at)) }}</span>
                                                        </h4>
                                                        <div class="ratings-container comment-rating">
                                                            <div class="ratings-full">
                                                                <span class="ratings"
                                                                    style="width: {{ $rating->rating * 20 }}%;"></span>
                                                                <span class="tooltiptext tooltip-top"></span>
                                                            </div>
                                                        </div>
                                                        <p>
                                                            {!! $rating->review !!}
                                                        </p>
                                                        {{-- <div class="comment-action">
                                                            <div class="review-image">
                                                                <a href="#">
                                                                    <figure>
                                                                        <img src="assets/images/products/default/review-img-1.jpg"
                                                                            width="60" height="60"
                                                                            alt="Attachment image of John Doe's review on Electronics Black Wrist Watch"
                                                                            data-zoom-image="assets/images/products/default/review-img-1-800x900.jpg" />
                                                                    </figure>
                                                                </a>
                                                            </div>
                                                        </div> --}}
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if (count($relatedProducts) > 0)
                        <section class="related-product-section">
                            <div class="title-link-wrapper mb-4">
                                <h4 class="title">Related Products</h4>
                                <a href="{{ route('product-search') }}"
                                    class="btn btn-dark btn-link btn-slide-right btn-icon-right">More
                                    Products<i class="w-icon-long-arrow-right"></i></a>
                            </div>
                            <div class="swiper-container swiper-theme"
                                data-swiper-options="{
                            'spaceBetween': 20,
                            'slidesPerView': 2,
                            'breakpoints': {
                                '576': {
                                    'slidesPerView': 3
                                },
                                '768': {
                                    'slidesPerView': 4
                                },
                                '992': {
                                    'slidesPerView': 3
                                }
                            }
                        }">
                                <div class="swiper-wrapper row cols-lg-3 cols-md-4 cols-sm-3 cols-2">
                                    @foreach ($relatedProducts as $relatedProduct)
                                        <div class="swiper-slide product">
                                            <x-product :product="$relatedProduct" />
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </section>
                    @endif
                </div>

            </div>
        </div>
        <!-- End of Page Content -->
    </main>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('click', '.productSize', function() {
                let size = $(this).data('size');
                $('.sizeId').val(size);
            });

            $('.addToCartBtn').on('click', function(e) {
                e.preventDefault();

                let size = $('.sizeId').val();
                let price = $('.productPrice').val();
                let offerPrice = $('.offer_price').val();
                let quantity = $('.quantity').val();
                let productId = $('.product_id').val();

                if (size == '') {
                    toastr.error('Please select a size', 'error');
                } else {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('cart.add') }}',
                        data: {
                            _token: "{{ csrf_token() }}",
                            size: size,
                            product_id: productId,
                            price: price,
                            quantity: quantity,
                            offer_price: offerPrice,
                        },
                        success: function(res) {
                            if (res.status === 'error') {
                                toastr.error(res.message, 'Error');
                            } else {
                                toastr.success(res.message, 'Success');
                                location.reload();
                            }
                        },

                        error: function(xhr, status, error) {
                            let errorMessage = xhr.responseJSON.message;
                            console.error(errorMessage);
                            toastr.error(errorMessage);
                        }
                    });
                }
            });
        });
    </script>
@endpush