@extends('front.layout.app')
@section('title', 'Product Detail')
@section('content')
<style>
.loader_cart {
    position: absolute;
    top: 92%;
    left: 15%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: none;
    border-top: 3px solid #ffffff;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    z-index: 9999;
}

/* button {
    position: relative;
} */

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 20px auto;
}

.product-imgs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.img-select {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.img-item img {
    width: 100px;
    aspect-ratio: 1;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-item img:hover {
  transform: scale(1.1);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

</style>   

<section class="Proreview">
        <div class="container">
            <div class="row align-items-center">
           
                <div class="col-md-6">
                    
                    <div class="productNav">
    
                    <div class="card-wrapper">
                        <div class="card">
                            <!-- card left -->
                            <div class="product-imgs">
                            <div class="img-display">
                                <!-- Large main image -->
                                <!-- <div class="main-img">
                                <img src="https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_1.jpg" alt="shoe image">
                                </div> -->

                                <div class="main-img ">
                                    <img 
                                    src="{{ $product->getFirstMediaUrl('product_image', 'thumb') ?: asset('upload/No-Image.png') }}" 
                                    alt="{{ $product->name }}" 
                                    class="img-fluid"
                                    style="width: 100%; height: 640px; object-fit: cover;"
                                    >
                                </div>
                            </div>

                            
                        </div>
                        <!-- card right -->
                        <div class="product-content">
                            <!-- Small images below -->
                            @if($product->getMedia('gallery_images')->isNotEmpty())
                                <div class="img-select">
                                    @foreach ($product->getMedia('gallery_images') as $image)
                                        <div class="img-item">
                                            <a href="javascript:void(0)" data-id="{{ $loop->index + 1 }}">
                                                <img src="{{ $image->getUrl('thumb') }}" 
                                                    alt="{{ $product->name }} Image {{ $loop->index + 1 }}">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                    </div>

                        <!-- <div class="swiper mySwiper2">
                            <div class="swiper-wrapper">
                                <img
                                src="{{ $product->getFirstMediaUrl('product_image', 'thumb') ?: asset('upload/No-Image.png') }}"
                                alt="{{ $product->name }}"
                                class="img-fluid">
                            </div>
                        </div>
                        <div thumbsSlider="" class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                @if($product->getMedia('gallery_images')->isNotEmpty())
                                    <div class="swiper-slide">
                                        <img src="{{ $product->getFirstMediaUrl('gallery_images', 'thumb') ?: asset('upload/No-Image.png') }}" 
                                            class="img-fluid" 
                                            alt="{{ $product->name }}">
                                    </div>
                                @endif
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="col-md-5 productSIDE">
                    <div class="prodtl-txt">
                        <h2>{{$product->name}}</h2>
                        <div class="rating-box">
                            <div class="rating-container">
                                @for ($i = 5; $i >= 1; $i--)
                                    @php
                                        $fullStars = floor($averageRating);
                                        $hasHalfStar = $averageRating - $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>
                            <span>({{ $reviewCount }} reviews)</span>
                        </div>
                        <ul class="stckst">
                            <li><span>Price:</span>${{$product->price}}</li>
                        </ul>
                        <p>
                            {{ preg_replace('/\s+/', ' ', str_replace('\n', ' ', strip_tags($product->description))) }}
                        </p>
                        <ul class="stckst flex-column justify-content-start align-items-start">
                            <li>
                                <span>Status:</span>
                                @if($product->stock > 0)
                                    In Stock
                                @else
                                    <span class="badge badge-danger">Out of Stock</span>
                                @endif
                            </li>

                            {{-- <li><span>Glass Cans :</span>16 oz iridescent (blue, pink, purple,red)</li> --}}
                        </ul>
                        <div class="quantitySec">
                            <h4>Quantity</h4>
                            <ul>
                                <li>
                                    <div class="number">
                                        <span class="minus">-</span>
                                        <input type="text" name="quantity" id="quantity" value="1">

                                        <span class="plus">+</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="cardbutton">
                                <form class="add-to-cart-form" action="{{ route('cart.add') }}" method="POST">
                                    @csrf
                                    <div id="loader_cart_{{ $product->id }}" class="loader_cart"></div>
                                    <input type="hidden" name="quantity" id="hidden-quantity" value="1">
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <p id="error-message" style="color: red; display: none;" >Sorry, you cannot add more than the available stock.</p>
                                    <button type="submit" id="button-text" class="themeBtn">Add To Cart</button>
                                </form>

                            </div>
                        </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> <!-- Empty Star -->
                                            </label>
                                        @endif
                                    @endfor
                                </div>
                                <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="{{ $product->id }}">Write a Review</a>






            <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('scripts')

<script>

document.addEventListener("DOMContentLoaded", () => {
  const mainImg = document.querySelector(".main-img img");
  const imgItems = document.querySelectorAll(".img-item img");

  imgItems.forEach((img) => {
    img.addEventListener("click", () => {
      // Swap main image with the clicked image
      const tempSrc = mainImg.src;
      mainImg.src = img.src;
      img.src = tempSrc;
    });
  });
});


$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#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>
                                    <div class="rating-stars">`;

                    for (let i = 1; i <= 5; i++) {
                        if (i <= response.rating) {
                            reviewHtml += `<label for="star-${i}">
                                                <i class="fas fa-star" style="color: gold;"></i>
                                            </label>`;
                        } else {
                            reviewHtml += `<label for="star-${i}">
                                                <i class="far fa-star"></i>
                                            </label>`;
                        }
                    }

                    reviewHtml += `
                                    </div>
                                    <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.');
            }
        });
    });
});



$(document).ready(function () {

$('.minus, .plus').on('click', function () {
    var stock = @json($product->stock);
    var error = document.getElementById('error-message');
    let quantityInput = $(this).siblings('#quantity');
    let currentQuantity = parseInt(quantityInput.val(), 10) || 1;

    if ($(this).hasClass('minus')) {
        error.style.display='none';
        currentQuantity = Math.max(1, currentQuantity - 1);
    } else if ($(this).hasClass('plus') && stock != currentQuantity) {
        currentQuantity += 1;
    }else if (stock == currentQuantity) {
        error.style.display='block';
    }

    quantityInput.val(currentQuantity);
    $('#hidden-quantity').val(currentQuantity);
});


$('form.add-to-cart-form').on('submit', function (e) {
    e.preventDefault();

    var form = $(this);
    var buttonText = form.find('.button-text');
    var loader = form.find('.loader_cart');

    buttonText.hide();
    loader.css('display', 'block');

    $.ajax({
        url: '{{ route('cart.add') }}',
        type: 'POST',
        data: form.serialize(),
        success: function (response) {
            if (response.success) {
                $('#cart-count').text(response.cart_count);
                toastr.success(response.message);
                setTimeout(() => {
                    window.location.href = '{{ route('cart.index') }}';
                }, 500);
            } else {
                toastr.error(response.message);
                setTimeout(() => {
                    buttonText.show();
                    loader.css('display', 'none');
                }, 500);
            }
        },
        error: function (xhr, status, error) {
            alert('An error occurred. Please try again.');

            setTimeout(() => {
                buttonText.show();
                loader.css('display', 'none');
            }, 500);
        }
    });
});

});
</script>
@endsection