@extends('layouts.front-layout')
@section('title') Product Details @endsection
@section('content')
    <section class="inner-banner">
        <div class="container">
            <h2>Product Details</h2>
        </div>
    </section>

    <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 mySwiper2">
                            <div class=" swiper-wrapper">

                                <div class="swiper-slide">
                                    <img src="{{$single_product_detail->productImage('product_image') ? : ''}}">
                                </div>
                                <!-- Display gallery images -->
                                @if(count($single_product_detail->productGalleryImages()) > 0)
                                    @forelse($single_product_detail->productGalleryImages() as $galleryImg)
                                        <div class="swiper-slide">
                                            <figure>
                                                <img src="{{ $galleryImg->getUrl() }}" class="img-fluid" alt="image"/>
                                            </figure>

                                        </div>
                                    @empty
                                        <h3 class="text-center">Product Gallery Image Not Found</h3>
                                    @endforelse
                                @endif

                            </div>
                        </div>

                    <!-- Thumbnail Swiper -->
                        @if(count($single_product_detail->productGalleryImages()) > 0)
                            <div thumbsSlider="" class="swiper mySwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <figure class="productthumb_img">
                                            <img src="{{ $single_product_detail->productImage('product_image') ?: asset('upload/placeholder.png') }}" class="img-fluid" alt="image"/>
                                        </figure>
                                    </div>
                                    @forelse($single_product_detail->productGalleryImages() as $galleryImg)
                                        <div class="swiper-slide">
                                                <img src="{{ $galleryImg->getUrl() }}" class="img-fluid" alt="image"/>
                                        </div>
                                    @empty
                                        <h3 class="text-center">Product Gallery Image Not Found</h3>
                                    @endforelse
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-5 productSIDE">
                    <div class="prodtl-txt">
                        <h2>{{$single_product_detail->product_name ? : ''}}</h2>
                        <!-- <div class="rating-box">
                            <div class="rating-container">
                                @for ($i = 5; $i >= 1; $i--)
                                    <input type="radio" name="rating" value="{{ $i }}" id="star-{{ $i }}" {{ $i <= round($averageRating) ? 'checked' : '' }} disabled>
                                    <label for="star-{{ $i }}" class="{{ $i <= round($averageRating) ? 'filled' : '' }}">★</label>
                                @endfor
                            </div>
                            <span>({{ $reviewCount }} reviews)</span>
                        </div> -->
                        <div class="rating-box">
                            <div class="rating-container">
                                @for ($i = 5; $i >= 1; $i--)
                                    @php
                                        $fullStars = floor($averageRating); // Full stars
                                        $hasHalfStar = $averageRating - $fullStars >= 0.5; // Check if there's a half star
                                    @endphp

                                    @if ($i <= $fullStars)
                                        <label for="star-{{ $i }}">
                                            <i class="fas fa-star" style="color: gold;"></i>
                                        </label>
                                    @elseif ($i == $fullStars + 1 && $hasHalfStar)
                                        <label for="star-{{ $i }}">
                                            <i class="fas fa-star-half-alt" style="color: gold;"></i>
                                        </label>
                                    @else
                                        <label for="star-{{ $i }}">
                                            <i class="far fa-star"></i>
                                        </label>
                                    @endif
                                @endfor
                            </div>
                            <span>({{ $reviewCount }} reviews)</span>
                        </div>


                        <ul class="stckst">
                            @if($single_product_detail->product_price > 0)
                                <li><span>Price:</span>${{ $single_product_detail->product_price }}</li>
                            @endif
                        </ul>

                        {!! $single_product_detail->description ? : '' !!}
                        <ul class="stckst flex-column justify-content-start align-items-start">
                            <li><span>Status:</span>{{$single_product_detail->stock === 0 ? 'Out Of Stock' : 'In Stock ' . $single_product_detail->stock}}</li>
                        </ul>
                        <div class="quantitySec">
                            <h4>Quantity</h4>
                            <ul>
                                <li>
                                    <div class="number quantity"data-stock="{{ $single_product_detail->stock ? : '' }}">
                                        <input type="hidden" class="qty-input product_id"
                                               value="{{$single_product_detail->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('admin'))
                                @else
                                    @if($single_product_detail->stock > 0 && $single_product_detail->product_status === 'Active' && $single_product_detail->product_price > 0)
                                        <div class="cardbutton">
                                            <a href="" class="themeBtn add_to_cart_btn"> Add To Cart</a>
                                        </div>
                                    @elseif($single_product_detail->product_status === 'Future' || $single_product_detail->product_price < 0)
                                        <div class="cardbutton">
                                            <h3>Coming Soon</h3>
                                        </div>
                                    @else
                                    <!-- Any other condition you may want to display -->
                                    @endif


                                @endif
                            @else
                                @if($single_product_detail->stock > 0 && $single_product_detail->product_status === 'Active' && $single_product_detail->product_price > 0)
                                    <div class="cardbutton">
                                        <a href="" class="themeBtn add_to_cart_btn"> Add To Cart</a>
                                    </div>
                                     @elseif( $single_product_detail->product_status === 'Future'|| $single_product_detail->product_price <= 0)
                                        <div class="cardbutton">
                                            <h3>Coming Soon</h3>
                                        </div>
                                @else

                                @endif
                            @endif

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

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

                @forelse($reviews as $review)
                    <div class="col-12">
                        <div class="reviewImg">
                            <figure>
                                <img src="upload/images/categories1.png" alt="">
                            </figure>
                            <div class="content-wraper">
                                <div class="d-flex align-items-center">
                                    <h3>{{ $review->user->name ?? 'Anonymous' }}</h3>
                                    <span>
                                        <i class="fas fa-calendar-alt"></i> {{ \Carbon\Carbon::parse($review->created_at)->format('m-d-Y') }} |
                                        <i class="far fa-clock"></i> {{ \Carbon\Carbon::parse($review->created_at)->format('h:i A') }}
                                    </span>
                                </div>
                                  <!-- Display Rating Stars -->
                                <div class="rating-stars">
                                    @for ($i = 1; $i <= 5; $i++)
                                        @php
                                            $fullStars = floor($review->rating);
                                            $hasHalfStar = $review->rating - $fullStars >= 0.5;
                                        @endphp

                                        @if ($i <= $fullStars)
                                            <label for="star-{{ $i }}">
                                                <i class="fas fa-star" style="color: gold;"></i>
                                            </label>
                                        @elseif ($i == $fullStars + 1 && $hasHalfStar)
                                            <label for="star-{{ $i }}">
                                                <i class="fas fa-star-half-alt" style="color: gold;"></i>
                                            </label>
                                        @else
                                            <label for="star-{{ $i }}">
                                                <i class="far fa-star"></i>
                                            </label>
                                        @endif
                                    @endfor
                                </div>
                                <!-- <h4>Rating: {{ $review->rating }}</h4> -->
                                <p>{{ $review->comment }}</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>No reviews yet. Be the first to review this product!</p>
                @endforelse

            </div>
            <a href="javascript:void(0)" class="themeBtn mt-3" id="writeReviewBtn" data-product-id="{{ $single_product_detail->id }}">Write a Review</a>


                    <!-- <div class="reviewImg">
                        <figure>
                            <img src="upload/images/categories2.png" alt="">
                        </figure>
                        <div class="content-wraper">
                            <div class="d-flex align-items-center">
                                <h3>Anny Smith</h3>
                                <span><i class="fas fa-calendar-alt"></i> 04-08-2022 | <i class="far fa-clock"></i>
                                    04-08-2022</span>
                            </div>
                            <h4>Color: Black</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when an unknown
                                printer took a galley of type and scrambled it to make a type specimen book.</p>
                        </div>
                    </div>
                    <hr>
                    <div class="reviewImg">
                        <figure>
                            <img src="upload/images/categories3.png" alt="">
                        </figure>
                        <div class="content-wraper">
                            <div class="d-flex align-items-center">
                                <h3>Anny Smith</h3>
                                <span><i class="fas fa-calendar-alt"></i> 04-08-2022 | <i class="far fa-clock"></i>
                                    04-08-2022</span>
                            </div>
                            <h4>Color: Black</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when an unknown
                                printer took a galley of type and scrambled it to make a type specimen book.</p>
                        </div>
                    </div>
                    <hr> -->
                    <!-- <h2 class="sectionHeading">Comment</h2>
                    <textarea placeholder="Comment"></textarea> -->
                    <!-- <a href="javascript:void(0)" class="themeBtn mt-3">Comment</a> -->


                <!-- </div> -->
            <!-- </div> -->

            <div class="modal fade" id="reviewModal" tabindex="-1" role="dialog" aria-labelledby="reviewModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="reviewModalLabel">Write a Review</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Review Form -->
                            <form id="reviewForm">
                                <div class="form-group">
                                    <label for="rating">Rating (1-5)</label>

                                    <input type="number" class="form-control" id="rating" name="rating" min="1" max="5" required>
                                </div>
                                <div class="form-group">
                                    <label for="comment">Comment</label>
                                    <textarea class="form-control" id="comment" name="comment" rows="4" required></textarea>
                                </div>
                                <input type="hidden" name="product_id" id="product_id" value="">
                                <button type="submit" class="btn btn-primary">Submit Review</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('script')

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>

$(document).ready(function() {
    $('#writeReviewBtn').on('click', function() {
        var productId = $(this).data('product-id');

        $('#product_id').val(productId);

        $('#reviewModal').modal('show');
    });

    $('#reviewForm').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();

        $.ajax({
            url: "{{ route('submit.review') }}",
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.status == 'success') {
                    $('#reviewModal').modal('hide');
                    toastr.success(response.message);

                    var reviewHtml = `
                        <div class="col-12">
                            <div class="reviewImg">
                                <figure>
                                    <img src="upload/images/categories1.png" alt="">
                                </figure>
                                <div class="content-wraper">
                                    <div class="d-flex align-items-center">
                                        <h3>${response.username}</h3>
                                        <span><i class="fas fa-calendar-alt"></i> ${new Date(response.timestamp).toLocaleDateString()} | <i class="far fa-clock"></i> ${new Date(response.timestamp).toLocaleTimeString()}</span>
                                    </div>
                                    <h4>Rating: ${response.rating}</h4>
                                    <p>${response.comment}</p>
                                </div>
                            </div>
                        </div>
                    `;

                    $('.reviewSec').append(reviewHtml);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                toastr.error('An error occurred while submitting the review.');
            }
        });
    });
});

</script>
@endsection