@extends('layouts.front-layout')
@section('title') Product Detail
@endsection
<style>
    .active-star {
        color: gold !important;
    }
    .active-star2 {
        color: gold !important;
    }
</style>
@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img
            src="{{($product_top_banner->getFirstMediaUrl('product_top_banner_image') ? $product_top_banner->getFirstMediaUrl('product_top_banner_image') : asset('upload/placeholder.png'))}}"
            class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Product<br>Details</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="Proreview">
        <div class="container">
            <div class="row align-items-center product_data">
                <div class="col-md-6">
                    <div class="productNav">
                        <div class="swiper productSlider-for">
                            <div class="swiper-wrapper">
                                @forelse($get_product_sliders as $product)
                                    <div class="swiper-slide">
                                        <figure>
                                            <img
                                                src="{{($product->getFirstMediaUrl('product_image') ? $product->getFirstMediaUrl('product_image') : asset('upload/placeholder.png'))}}"
                                                class="img-fluid" alt="">
                                        </figure>
                                    </div>
                                @empty
                                    <h3 class="text-center">Product Image Not Found</h3>
                                @endforelse
                            </div>
                        </div>
                        <div class="swiper productSlider-nav">
                            <div class="swiper-wrapper">

                                @forelse($product_gallery_images as $index => $image)
                                    <div class="swiper-slide">
                                        <figure>
                                            <img
                                                src="{{($image->getUrl() ? $image->getUrl() : asset('upload/placeholder.png'))}} "
                                                alt="">
                                        </figure>
                                    </div>
                                @empty
                                    <h3 class="text-center">Product Gallery Image Not Found</h3>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 productSIDE">
                    <div class="prodtl-txt">
                        <h2>{{$single_product->product_name ? : ''}}</h2>

                        <div class="rating-box">
                            @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 ($j =$ratenum+1; $j<=5; $j++)

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

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

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

                            </div>
                        </div>

                        <ul class="stckst">
                            <li><span>Price:</span>${{number_format($single_product->price ) ? : ''}}</li>
                        </ul>
                        <p>
                            {!! $single_product->description ? : '' !!}
                        </p>
                        <ul class="stckst flex-column justify-content-start align-items-start">
                            <li>
                                <span>Status:</span>{{$single_product->stock === 0 ? 'Out Of Stock' : 'In Stock ' . $single_product->stock}}
                            </li>

                        </ul>
                        <div class="quantitySec">
                            <h4>Quantity</h4>
                            <ul>
                                <li>

                                    <div class="number quantity"data-stock="{{ $single_product->stock ? : '' }}">
                                        <input type="hidden" class="qty-input product_id"
                                               value="{{$single_product->id}}">
                                        <span class="minus decrement-btn-p-d">-</span>
                                        <input type="text" id="quantity" class="qty_input" value="1" readonly>
                                        <span class="plus increment-btn-p-d">+</span>
                                    </div>
                                </li>
                            </ul>
                            @if(Auth::check())
                                @if(Auth::user()->hasRole('vendor') || Auth::user()->hasRole('admin'))
                                 {{-- If the user is a vendor or admin, do not show the "Add to Cart" button  --}}
                                @else
                                    @if($single_product->stock > 0)
                                        <div class="cardbutton">
                                            <a href="" class="themeBtn add_to_cart_btn">Add To Cart</a>
                                        </div>
                                    @endif
                                @endif
                            @else
                                @if($single_product->stock > 0)
                                    <div class="cardbutton">
                                        <a href="" class="themeBtn add_to_cart_btn">Add To Cart</a>
                                    </div>
                                @endif
                            @endif


                        </div>

                    </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\Rating::where('product_id',$single_product->id)->where('user_id',$user_rating->user_id)->first();
                        @endphp
                        <div class="reviewImg">
                            <figure>
                                <img
                                    src="{{($user_rating->user->getFirstMediaUrl('user_profile') ? $user_rating->user->getFirstMediaUrl('user_profile') : asset('upload/placeholder.png'))}}"
                                    alt="" style="width: 100px;height: 100px;">
                            </figure>
                            <div class="content-wraper">
                                <div class="d-flex align-items-center">
                                    <h3>{{$user_rating->user->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 ($j =$user_rated+1; $j<=5; $j++)
                                            <label class="fa fa-star"></label>
                                        @endfor

                                        @for($i =1; $i<=$user_rated; $i++)
                                            <label class="fa fa-star active-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('rating.store') }}" method="POST" id="ratingForm">
                        @csrf
                        @php $rating = App\Models\Rating::where('product_id',$single_product->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->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">@auth {{$rating->review ?? ''}}@endauth</textarea>

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

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



@endsection
@section('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