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

<section>
	<div class="product_details_div_1">
		<div class="container">
			<div class="product_details_div_2">
				<div class="row">
					<!-- Product Images -->
					<div class="col-lg-6 col-md-6 col-12" style="padding: 0px;">
						<div class="product_details_div_3">
							<div class="product_details_div_5">
								<div class="tabcontent_product_show" id="city_001" style="display: block;">
									<img src="{{ url('/') }}/{{$product->product_image}}" class="product_details_img_1">
								</div>

								<!-- Gallery images tab contents -->
								@foreach($galleryimg as $index => $image)
								<div class="tabcontent_product_show" id="city_00{{ $index + 2 }}" 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">
								<div class="tablinks_product_show" onclick="openCity001(event, 'city_001')">
									<img src="{{ url('/') }}/{{$product->product_image}}" class="product_details_img_2">
								</div>

								<!-- Gallery Thumbnails -->
								@foreach($galleryimg as $index => $image)
								<div class="tablinks_product_show" onclick="openCity001(event, 'city_00{{ $index + 2 }}')">
									<img src="{{ url('/') }}/{{$image->image}}" class="product_details_img_2">
								</div>
								@endforeach
							</div>
						</div>
					</div>

					<!-- Product Details -->
					<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>

							<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>

							<!-- Add to Cart Form -->
							<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">-</a>
											<input type="number" name="quantity" value="1" min="1" id="input-quantity" class="quantity nk_quantity_result">
											<a class="quantity_button plus arrow_icon nk_quantity_btn" 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 class="product_details_div_9">
								<!-- Add more buttons if needed -->
							</div>
						</div>
					</div>
				</div>

				<br>
				<!-- Description Section -->
				<div class="product_details_div_10">
					<h4 class="product_details_h_2">Description</h4>
					<p class="product_details_p_5">
						{!! $product->product_dec !!}
					</p>
				</div>
			</div>
		</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
		$('.quantity_button').on('click', function() {
			let quantityInput = $('#input-quantity');
			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
		$('#input-quantity').on('input', function() {
			if (this.value < 1) {
				this.value = 1;
			}
		});
	});

	// Image Gallery Switching
	function openCity001(evt, cityName) {
		let tabcontent = document.getElementsByClassName("tabcontent_product_show");
		for (let i = 0; i < tabcontent.length; i++) {
			tabcontent[i].style.display = "none";
		}

		let tablinks = document.getElementsByClassName("tablinks_product_show");
		for (let i = 0; i < tablinks.length; i++) {
			tablinks[i].classList.remove("active");
		}

		document.getElementById(cityName).style.display = "block";
		evt.currentTarget.classList.add("active");
	}
</script>

@endsection