@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

<section>
	<div class="product_details_div_1">
		<div class="container">

			@if($products->isEmpty())
			<div class="empty_alart_div_1 text-center">
			    <img src="{{ url('/') }}/frontend/img/shopping-cart.gif" class="empty_alart_img_1">
			    <p class="empty_alart_p_1">No products found. Try searching for something else.</p>
			</div>
    			
			@else
			<div class="product_details_div_2">
				<div class="row">
					@foreach($products as $product) {{-- Loop through all products --}}
					<div class="col-lg-6 col-md-6 col-12" style="padding: 0px;">
						<div class="product_details_div_3" data-product-id="{{ $product->id }}">
							<div class="product_details_div_5">
								{{-- Main product image --}}
								<div class="tabcontent_product_show" id="city_001_{{ $product->id }}" style="display: block;">
									<div>
										<img src="{{ url('/') }}/{{$product->product_image}}" class="product_details_img_1">
									</div>
								</div>

								{{-- Gallery images tab contents --}}
								@foreach($galleryimg->where('product_id', $product->id) as $index => $image)
								<div class="tabcontent_product_show" id="city_00{{ $index + 2 }}_{{ $product->id }}" style="display: none;">
									<img src="{{ url('/') }}/{{$image->image}}" class="product_details_img_1">
								</div>
								@endforeach
							</div>

							<div class="product_details_div_6 tab_product_show">
								{{-- Main image thumbnail --}}
								<div class="tablinks_product_show" onclick="openCity001(event, 'city_001_{{ $product->id }}', '{{ $product->id }}')">
									<img src="{{ url('/') }}/{{$product->product_image}}" class="product_details_img_2">
								</div>

								{{-- Gallery images thumbnails --}}
								@foreach($galleryimg->where('product_id', $product->id) as $index => $image)
								<div class="tablinks_product_show" onclick="openCity001(event, 'city_00{{ $index + 2 }}_{{ $product->id }}', '{{ $product->id }}')">
									<img src="{{ url('/') }}/{{$image->image}}" class="product_details_img_2">
								</div>
								@endforeach
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-12" style="padding: 0px;">
						<div class="product_details_div_4">
							<h3 class="product_details_h_1">{{$product->product_name}}</h3>
							<p class="product_details_p_1"><b>Product code :</b> {{$product->product_code}}</p>
							<p class="product_details_p_1"><b>Availability :</b> {{$product->product_quantity}}</p>
							<p class="product_details_p_1"><b>Description :</b> {!! Str::words($product->product_dec, 20, '...') !!}</p>
							<hr>
							<p class="product_details_p_2">Price</p>
							<div class="product_details_div_7">
								<p class="product_details_p_3">₹ {{$product->product_saleprice}}</p>
								<p class="product_details_p_4">₹ {{$product->product_orgprice}}</p>
							</div>
							<hr>
							<div class="product_details_div_8">
								<form class="add-to-cart-form" action="{{ route('add.to.cart', $product->id) }}" method="POST">
									@csrf
									<div class="form-group" style="display: flex;">
										<label class="control-label">Quantity</label>
										<div class="holder">
											<a class="quantity_button minus arrow_icon nk_quantity_btn" data-product-id="{{ $product->id }}">-</a>
											<input type="number" name="quantity" value="1" min="1" class="quantity nk_quantity_result" data-product-id="{{ $product->id }}">
											<a class="quantity_button plus arrow_icon nk_quantity_btn" data-product-id="{{ $product->id }}" style="margin-left: -5px;">+</a>
										</div>
									</div>
									<button type="submit" class="product_details_btn_11 btn-submit">
										Add to Cart
									</button>
								</form>
							</div>
							<hr>
						</div>
					</div>
					@endforeach
				</div>

				<br>
				<!--<div class="product_details_div_10">-->
				<!--	<h4 class="product_details_h_2">Description</h4>-->
				<!--	@foreach($products as $product)-->
				<!--	<p class="product_details_p_5">{!! $product->product_dec !!}</p>-->
				<!--	@endforeach-->
				<!--</div>-->
			</div>
			@endif
		</div>
	</div>
</section>

<!-- CSRF Token for AJAX -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Script Section -->
<script>
	$(document).ready(function() {
		// CSRF token setup for AJAX
		$.ajaxSetup({
			headers: {
				"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
			}
		});

		// AJAX Add to Cart
		$(document).on("submit", ".add-to-cart-form", function(e) {
			e.preventDefault();

			let form = $(this);
			let url = form.attr("action");

			$.ajax({
				url: url,
				method: "POST",
				data: form.serialize(),
				dataType: "json",
				success: function(response) {
					if (response.status === "success") {
						Swal.fire({
							icon: "success",
							title: "Success!",
							text: "Product added to cart!",
							showConfirmButton: true
						}).then(() => {
							window.location.href = "{{ route('cart') }}";
						});

						// Update cart count dynamically
						$("#cart-count").text(response.cart_count);
					} else {
						Swal.fire({
							icon: "error",
							title: "Oops...",
							text: response.message
						});
					}
				},
				error: function(xhr) {
					if (xhr.status === 401) {
						Swal.fire({
							icon: "error",
							title: "Unauthorized",
							text: "Please log in first to continue.",
							showConfirmButton: false,
							timer: 2000
						});

						setTimeout(() => {
							window.location.href = "{{ route('login_user') }}";
						}, 2000);
					} else {
						Swal.fire({
							icon: "error",
							title: "Error",
							text: "Something went wrong.",
							showConfirmButton: false,
							timer: 2000
						});
					}
				}
			});
		});

		// Quantity Buttons - Updated for multiple products
		$(document).on('click', '.quantity_button', function() {
			let productId = $(this).data('product-id');
			let quantityInput = $(`input[data-product-id="${productId}"]`);
			let currentValue = parseInt(quantityInput.val());

			if ($(this).hasClass('plus')) {
				quantityInput.val(currentValue + 1);
			} else if ($(this).hasClass('minus') && currentValue > 1) {
				quantityInput.val(currentValue - 1);
			}
		});

		// Prevent manually entering values below 1 - Updated for multiple products
		$(document).on('input', '.quantity', function() {
			if (this.value < 1) {
				this.value = 1;
			}
		});
	});

	// Image Gallery Switching
	function openCity001(evt, cityName, productId) {
		let tabcontent = document.querySelectorAll('.product_details_div_3[data-product-id="' + productId + '"] .tabcontent_product_show');
		let tablinks = document.querySelectorAll('.product_details_div_3[data-product-id="' + productId + '"] .tablinks_product_show');

		// Hide all tab content
		for (let i = 0; i < tabcontent.length; i++) {
			tabcontent[i].style.display = "none";
		}

		// Remove the "active" class from all tab links
		for (let i = 0; i < tablinks.length; i++) {
			tablinks[i].classList.remove("active");
		}

		// Show the current tab content and add the "active" class to the clicked tab link
		document.getElementById(cityName).style.display = "block";
		evt.currentTarget.classList.add("active");
	}
</script>

@endsection