@extends('layouts.front-layout')
@section('title')  Product Detail @endsection
@section('content')
    <style>
        .active-star {
            color: gold !important;
        }
        .active-star2 {
            color: gold !important;
        }

        .reviewSec {
            /* background: #fff; */
            border-radius: 20px;
            padding: 3rem;
            border: 1px solid #D2D2D2;
        }

        .reviewImg {
            display: flex;
            align-items: center;
            margin: 3.5rem 0;
        }

        .content-wraper h3 {
            margin-bottom: 0;
            font-size: 1.25rem;
            font-weight: 500;
            text-transform: capitalize;
        }

        .content-wraper {
            margin-left: 2rem;
        }

        .content-wraper h4 {
            margin: 0.9rem 0;
            font-size: 1rem;
            color: #726f6f;
            font-weight: 600;
        }

        .content-wraper span {
            margin-left: 21px;
            font-size: 12px;
            color: #A4A4A4;
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .content-wraper p {
            font-size: 1rem;
            margin: 0;
        }

        .Proreview .row+.row {
            margin: 5rem 0;
        }

        .reviewSec textarea {
            width: 100%;
            height: 160px;
            padding: 1rem;
            background: #F8F8F8;
            border-color: #EBEBEB;
        }

        .reviewImg figure {
            width: 135px;
            height: 135px;
            background: #E1E1E1;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .reviewImg figure img {
            width: fit-content;
        }

        .star-review {
            display: flex;
            align-items: center;
            margin: 20px 0 15px;
            /*color: #F5AA27;*/
            gap: 5px;
        }

        .reviewImg+hr+h2.sectionHeading {
            font-size: 2.25rem;
            color: var(--black);
            margin: 2rem 0 1rem;
        }

        .reviewSec .themeBtn.mt-3 {
            background: var(--theme-color);
        }

        .rating-box {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
        }

        .rating-box .rating-container {
            direction: rtl !important;
        }

        .rating-box .rating-container label {
            display: inline-block;
            margin: 0;
            color: #d4d4d4;
            cursor: pointer;
            font-size: 2.2rem;
            transition: color 0.2s linear;
        }

        .rating-box .rating-container input {
            display: none;
        }
        /*.product-name{*/
        /*    !*text-transform: uppercase;*!*/
        /*    font-family: "Marcellus";*/
        /*    font-size: 1.25rem;*/
        /*    color: var(--black);*/
        /*    !*letter-spacing: 5px;*!*/
        /*}*/
        /*.rating-box .rating-container label:hover,*/
        /*.rating-box .rating-container label:hover~label,*/
        /*.rating-box .rating-container input:checked~label {*/
        /*    color: gold;*/
        /*}*/
    </style>
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('upload/images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{$single_product_detail->product_name ? : ''}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="product-detail padd-y pb-0 product_data">
        <div class="container">
            <div class="product-detail-title text-center">
                <h5>Home / Face / Essence Toner</h5>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="swiper productSliderpage">
                        <div class="swiper-wrapper">
                            <!-- Display the main product image -->
                            <div class="swiper-slide" id="main-product-image">
                                <figure>
                                    <img id="product-image"
                                         src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                         class="img-fluid" alt="image">
                                </figure>
                            </div>

                            <!-- Display gallery images from variations -->
                            @if ($single_product_detail->singleEntryProductVariation)
                                @foreach ($single_product_detail->singleEntryProductVariation as $variation)
                                    @foreach ($variation->productVariations as $variationImg)
                                        @if ($variationImg->productVariationImage()->first())
                                            <div class="swiper-slide">
                                                <figure>
                                                    <img
                                                        src="{{ $variationImg->productVariationImage()->first()->getUrl() }}"
                                                        class="img-fluid" alt="image"/>
                                                </figure>
                                            </div>
                                        @endif
                                    @endforeach
                                @endforeach
                            @else
                                <h3 class="text-center">Product Gallery Image Not Found</h3>
                            @endif
                        </div>
                    </div>

                    @if ($single_product_detail->singleEntryProductVariation)
                        <div thumbsSlider="" class="swiper productSlideThumb">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <figure>
                                        <img
                                            src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                            class="img-fluid" alt="image">
                                    </figure>
                                </div>

                                @foreach ($single_product_detail->singleEntryProductVariation as $variation)
                                    @foreach ($variation->productVariations as $variationImg)
                                        @if ($variationImg->productVariationImage()->first())
                                            <div class="swiper-slide">
                                                <figure>
                                                    <img
                                                        src="{{ $variationImg->productVariationImage()->first()->getUrl() }}"
                                                        class="img-fluid" alt="variation_image"/>
                                                </figure>
                                            </div>
                                        @endif
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>



                <div class="col-md-6">
                    <div class="detail__content">
                        <div class="detail__title">
                            <h4 class="product-name">{{$single_product_detail->product_name ? : ''}}</h4>
                        </div>
                        <div class="detail__review">
                            <ul class="review-stars">
                                @php $ratenum =number_format($rating_value)
                                @endphp
                                @if($ratings->count() > 0)

                                    <h5>Customer Reviews:<span>({{$ratings->count()}})</span></h5>

                                @else
                                    No Rating
                                @endif

                                <div class="rating-container">


                                    @for($i =1; $i<=$ratenum; $i++)

                                        <i class="fa fa-star active-star"></i>
                                @endfor

                                        @for ($j =$ratenum+1; $j<=5; $j++)

                                            <i class="fa fa-star"></i>
                                @endfor
{{--                                <li><a href=""><i class="far fa-star"></i></a></li>--}}
{{--                                <li><a href=""><i class="far fa-star"></i></a></li>--}}
{{--                                <li><a href=""><i class="far fa-star"></i></a></li>--}}
{{--                                <li><a href=""><i class="far fa-star"></i></a></li>--}}
{{--                                <li><a href=""><i class="far fa-star"></i></a></li>--}}
                            </ul>
{{--                            <p>(<span>1</span> review)</p>--}}
                        </div>
                        <h6 class="detail__price" id="price-display">
                            @if($single_product_detail->product_price == null)
                                @if ($single_product_detail->productVariation->first())
                                    <del>
                                        $ {{ $single_product_detail->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                    $ {{ $single_product_detail->productVariation->first()->variant_price ? : '' }}
                                @endif
                            @else
                                @if($single_product_detail->product_discount == null)
                                    $ {{ $single_product_detail->product_price ? : '' }}
                                @else
                                    <del>$ {{ $single_product_detail->product_price ? : '' }}</del>
                                    $ {{ $single_product_detail->product_discount ? : '' }}
                                @endif
                            @endif
                        </h6>
                        @if ($single_product_detail && $single_product_detail->singleEntryProductVariation)
                            @foreach ($single_product_detail->singleEntryProductVariation as $entry)

                                <span>{{ $entry->variationName->variation_name ?? 'No Variation Name' }}</span>
                                <br>
                                <br>

                                @if ($entry->productVariations)
                                    <select id="variation-select">
                                        @foreach ($entry->productVariations as $variation)
                                            <option value="{{ $variation->id }}"
                                                    data-image="{{ $variation->productVariationImage()->first() ? $variation->productVariationImage()->first()->getUrl() : '' }}">
                                                {{ $variation->option_name ?? 'No Variation Name' }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <p>No Product Variations Available</p>
                                @endif
                            @endforeach
                        @endif


                        <h4 class="stock-count">{{$single_product_detail->stock > 0 ? 'In Stock' : 'Out of Stock'}}</h4>
                        <div class="detail__quantity">
                            <h5>Quantity</h5>
                            <div class="detail__quantity__wrap">
                                <div class="number quantity" data-stock="{{ $single_product_detail->stock ? : '' }}">
                                    <input type="hidden" class="qty-input product_id"
                                           value="{{$single_product_detail->id}}">
                                    <input type="hidden" name="product_variation_id" class="product_variation_id">

                                    <span class="minus decrement-btn-p-d"><i class="fas fa-minus"></i></span>
                                    <input type="text" id="quantity" class="qty_input" value="1" readonly>
                                    <span class="plus increment-btn-p-d"><i class="fas fa-plus"></i></span>
                                </div>
                                @if($single_product_detail->stock > 0)
                                    <button type="button" class="cart__btn add_to_cart_btn">Add To Cart</button>
                                @else
                                    <button type="button" class="cart__btn disabled">Add To Cart</button>
                                @endif
                            </div>
                            {!! $single_product_detail->description ?:''!!}
                        </div>

                        <div class="detail__delivery">
                            <h5><img src="{{asset('upload/images/delivery-car.png')}}" alt="image"
                                     class="img-fluid">Estimated Delivery:
                                <span>Within 7-10 Business days</span></h5>
                            <h5><img src="{{asset('upload/images/shipping-cart.png')}}" alt="image"
                                     class="img-fluid">Free
                                shipping: <span>On orders over $60 and above</span></h5>
                        </div>
                        <div class="detail__sku">
                            <h6>SKU: ETO50035</h6>
                            <div class="detail__sku__categories">
                                <h6>Categories: <span>{{$single_product_detail->category->category_name ? : ''}}</span>
                                </h6>
                            </div>
                        </div>
                        <div class="detail__paymentoption">
                            <p>Online payment option</p>
                            <img src="{{asset('upload/images/payment-option.png')}}" alt="image"
                                 class="img-fluid">
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </section>

    <section class="product-info padd-y">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="product-info__tabs">
                        <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-description-tab" data-toggle="pill"
                                   href="#pills-description" role="tab" aria-controls="pills-description"
                                   aria-selected="true">Description</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-information-tab" data-toggle="pill"
                                   href="#pills-information" role="tab" aria-controls="pills-information"
                                   aria-selected="false">Additional
                                    information</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-reviews-tab" data-toggle="pill" href="#pills-reviews"
                                   role="tab" aria-controls="pills-reviews" aria-selected="false">Reviews</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-description" role="tabpanel"
                                 aria-labelledby="pills-description-tab">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="product__desimg">
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="product__descontent">
                                            <h4>Product description</h4>
                                            {!! $single_product_detail->description ? : '' !!}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-information" role="tabpanel"
                                 aria-labelledby="pills-information-tab">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="product__desimg">
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                            <figure>
                                                <img
                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"
                                                    alt="image"
                                                    class="img-fluid">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="product__descontent">
                                            <h4>Product details</h4>
                                            {!! $single_product_detail->additional_info ? : '' !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-reviews" role="tabpanel"
                                 aria-labelledby="pills-reviews-tab">
{{--                                <div class="row">--}}
{{--                                    <div class="col-lg-5">--}}
{{--                                        <div class="product__desimg">--}}
{{--                                            <figure>--}}
{{--                                                <img--}}
{{--                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"--}}
{{--                                                    alt="image"--}}
{{--                                                    class="img-fluid">--}}
{{--                                            </figure>--}}
{{--                                            <figure>--}}
{{--                                                <img--}}
{{--                                                    src="{{ $single_product_detail->productImage('product_main_image') ?: asset('upload/No-Image.png') }}"--}}
{{--                                                    alt="image"--}}
{{--                                                    class="img-fluid">--}}
{{--                                            </figure>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-lg-7">--}}
{{--                                        <div class="product__descontent">--}}
{{--                                            <h4>Product details</h4>--}}
{{--                                            {!! $single_product_detail->description ? : '' !!}--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}

                                <div class="row reviewSec">
                                    <h2 class="sectionHeading">Product Reviews</h2>
                                    <div class="col-12">

                                        @forelse($all_user_rating as $user_rating)
                                            @php $rating = App\Models\ProductReview::where('product_id',$single_product_detail->id)->where('user_id',$user_rating->user_id)->first();
                                            @endphp
                                            <div class="reviewImg">
                                                <figure>
                                                    <img
                                                        src="{{$user_rating->user->userImage('user_profile') ? : ''}}"
                                                        alt="" style="width: 100px;height: 100px;">
                                                </figure>
                                                <div class="content-wraper">
                                                    <div class="d-flex align-items-center">
                                                        <h3>{{$user_rating->user->first_name ? : ''}}</h3>
                                                        <span><i class="fas fa-calendar-alt"></i> {{$user_rating->created_at->format('d-m-Y') ? : ''}}</span>
                                                    </div>
                                                    <div class="star-review product-detail-rating">

                                                        @if ($rating)
                                                            @php $user_rated = $rating->star_rated
                                                            @endphp

                                                            @for($i =1; $i<=$user_rated; $i++)
                                                                <label class="fa fa-star active-star"></label>
                                                            @endfor

                                                            @for ($j =$user_rated+1; $j<=5; $j++)
                                                                <label class="fa fa-star"></label>
                                                            @endfor


                                                        @endif

                                                    </div>
                                                    <!-- <h4>Color: Black</h4> -->
                                                    <p>{{$user_rating->review ? : ''}}</p>
                                                </div>
                                            </div>
                                            <hr>
                                        @empty
                                            <h5>User Rating Not Found</h5>
                                        @endforelse

                                        @auth
                                            @if(Auth::user()->hasRole('user'))
                                                <h2 class="sectionHeading">Comment</h2>
                                                <form action="{{ route('product.reviews.store') }}" method="POST" id="ratingForm">
                                                    @csrf
                                                    @php $rating = App\Models\ProductReview::where('product_id',$single_product_detail->id)->where('user_id',Auth::user()->id)->first();
                                                    @endphp
                                                    <div class="rating-box">
                                                        <div class="rating-container">
                                                            <input type="hidden" name="product_id" value="{{$single_product_detail->id ?:''}}">
                                                            @if ($rating)
                                                                @php $user_rated = $rating->star_rated
                                                                @endphp

                                                                @for ($j = 5; $j > $user_rated; $j--)
                                                                    <input type="radio" name="star_rated" value="{{$j}}" id="star-{{$j}}"> <label
                                                                        for="star-{{$j}}">★</label>
                                                                @endfor

                                                                @for ($i = $user_rated; $i >= 1; $i--)

                                                                    <input type="radio" name="star_rated" value="{{$i}}" id="star-{{$i}}">
                                                                    <label for="star-{{$i}}" class="active-star2">★</label>

                                                                @endfor
                                                            @else
                                                                <input type="radio" name="star_rated" value="5" id="star-5"> <label
                                                                    for="star-5">★</label>
                                                                <input type="radio" name="star_rated" value="4" id="star-4"> <label
                                                                    for="star-4">★</label>
                                                                <input type="radio" name="star_rated" value="3" id="star-3"> <label
                                                                    for="star-3">★</label>
                                                                <input type="radio" name="star_rated" value="2" id="star-2"> <label
                                                                    for="star-2">★</label>
                                                                <input type="radio" name="star_rated" value="1" id="star-1"> <label
                                                                    for="star-1">★</label>

                                                            @endif

                                                        </div>
                                                    </div>
                                                    @if (!$rating)
                                                        <textarea placeholder="Comment" name="review_description">@auth {{$rating->review_description ?? ''}}@endauth</textarea>

                                                    @endif
                                                    <input type="submit" value="comment" class="themeBtn mt-3">
                                                </form>
                                            @endif
                                        @endauth

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="related-product">
        <div class="container g-4">
            <h2 class="secHeading">Related products</h2>
            <div class="row g-4">
                @forelse($get_related_product as $related_product)
                    <div class="col-md-3">
                        <a href="{{ route('product.detail', ['slug' => $related_product->slug] ?: '') }}">
                            <figure class="related-product-img">
                                <img
                                    src="{{
                        $related_product->productImage('product_main_image') ?:
                        ($related_product->productVariation->first() && $related_product->productVariation->first()->productVariationImage()->first()
                            ? $related_product->productVariation->first()->productVariationImage()->first()->getUrl()
                            : asset('upload/No-Image.png'))
                    }}"
                                    alt="image">
                                <h3>{{ $related_product->name ?: '' }}</h3>

                                @if ($related_product->price == null)
                                    @if ($related_product->productVariation->first())
                                        <del>
                                            $ <span>{{ $related_product->productVariation->first()->variant_compare_at_price ?: '' }}</span>
                                        </del>
                                        $ {{ $related_product->productVariation->first()->variant_price ?: '' }}
                                    @endif
                                @else
                                    @if ($related_product->product_discount == null)
                                        <span> ${{ $related_product->price ?: '' }}</span>
                                    @else
                                        <del>${{ $related_product->price ?: '' }}</del>
                                        ${{ $related_product->product_discount ?: '' }}
                                    @endif
                                @endif
                            </figure>
                        </a>
                    </div>
                @empty
                    <p>No related products found.</p>
                @endforelse

            </div>
        </div>
    </section>

@endsection
@section('script')
    <script>
        $('#variation-select').on('change', function () {
            var selectedOption = $(this).find('option:selected');
            var selectedImageUrl = selectedOption.data('image');

            if (selectedImageUrl) {
                $('#product-image').attr('src', selectedImageUrl);
            }
        });


        $('#variation-select').on('change', function () {
            var selectedOption = $(this).find('option:selected');
            var selectedVariationImage = selectedOption.data('image');
            var selectedVariationId = $(this).val();
            $('.product_variation_id').val(selectedVariationId); //


            $.ajax({
                url: '{{ route('selected.product.variation', ['id' => '__ID__']) }}'.replace('__ID__', selectedVariationId),
                method: 'GET',
                success: function (data) {
                    if (data) {

                        $('#price-display').html(data.price_html);
                    }
                }
            });

            if (selectedVariationImage) {
                $('#product-image').attr('src', selectedVariationImage);
                $('#main-product-image').show();
            }
        });

    </script>
    <script>

        function submitForm() {
            document.getElementById('ratingForm').submit();
        }
    </script>
    <script>
        $(document).ready(function () {
            $('input[name="star_rated"]').on('click', function () {
                var selectedValue = $(this).val();
                $('label').removeClass('active-star2');
                for (var i = 1; i <= selectedValue; i++) {
                    $('#star-' + i).next('label').addClass('active-star2');
                }
            });
        });
    </script>
@endsection