@extends('frontend.layouts.master')


@section('meta')
@php
    use Illuminate\Support\Str;

    // Split photo field (comma-separated)
    $photos = array_filter(array_map('trim', explode(',', $product_detail->photo ?? '')));
    $firstPhoto = $photos[0] ?? null;

    // Make sure it's an absolute URL
    $ogImage = $firstPhoto
        ? (Str::startsWith($firstPhoto, ['http://','https://']) ? $firstPhoto : url($firstPhoto))
        : asset('frontend/images/share-fallback-1200x630.jpg'); // fallback if no product image

    $canonical = route('product-detail', $product_detail->slug);
    $plainDesc = Str::limit(strip_tags($product_detail->summary ?: $product_detail->description), 150);
    $title = $product_detail->title;
@endphp

{{-- Core/SEO --}}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="author" content="Jayaka Fashion – Empowering Nepali Women Through Graceful Fusion Wear">
<link rel="canonical" href="{{ $canonical }}">
<meta name="keywords" content="Jayaka, Teej dresses Nepal, kurta pant set, Nepali fashion, fusion ethnic wear, Dashain outfits, wedding fashion Nepal, spiritual fashion">
<meta name="description" content="{{ $plainDesc }}">

{{-- Open Graph (Facebook/WhatsApp/LinkedIn) --}}
<meta property="og:locale" content="en_US">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Jayaka Fashion">
<meta property="og:title" content="{{ $title }}">
<meta property="og:description" content="{{ $plainDesc }}">
<meta property="og:url" content="{{ $canonical }}">
<meta property="og:image" content="{{ $ogImage }}">
<meta property="og:image:secure_url" content="{{ $ogImage }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

{{-- Twitter --}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ $title }}">
<meta name="twitter:description" content="{{ $plainDesc }}">
<meta name="twitter:image" content="{{ $ogImage }}">

{{-- JSON-LD Product --}}
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": @json($title),
  "image": [@json($ogImage)],
  "description": @json($plainDesc),
  "brand": { "@type": "Brand", "name": "Jayaka" },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "NPR",
    "price": "{{ $product_detail->price }}",
    "availability": "{{ ($product_detail->quantity ?? 0) > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
    "url": "{{ $canonical }}"
  }
}
</script>
@endsection




@section('title','JAYAKA || PRODUCT DETAIL')
@section('main-content')

		<!-- Breadcrumbs -->
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<div class="bread-inner">
							<ul class="bread-list">
								<li><a href="{{route('home')}}">Home<i class="ti-arrow-right"></i></a></li>
								<li class="active"><a href="">Shop Details</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End Breadcrumbs -->
				
		<!-- Shop Single -->
		<section class="shop single section">
					<div class="container">
						<div class="row"> 
							<div class="col-12">
								<div class="row">
									<div class="col-lg-6 col-12">
										<!-- Product Slider -->
										<div class="product-gallery">
											<!-- Images slider -->
											<div class="flexslider-thumbnails">
												<ul class="slides">
													@php 
														$photo=explode(',',$product_detail->photo);
													// dd($photo);
													@endphp
													@foreach($photo as $data)
														<li data-thumb="{{$data}}" rel="adjustX:10, adjustY:">
															<img src="{{$data}}" alt="{{$data}}">
														</li>
													@endforeach
												</ul>
											</div>
											<!-- End Images slider -->
										</div>
										<!-- End Product slider -->
									</div>
									<div class="col-lg-6 col-12">
										<div class="product-des">
											<!-- Description -->
											<div class="short">
												<h4>{{$product_detail->title}}</h4>
												<div class="rating-main">
													<ul class="rating">
														@php
															$rate=ceil($product_detail->getReview->avg('rate'))
														@endphp
															@for($i=1; $i<=5; $i++)
																@if($rate>=$i)
																	<li><i class="fa fa-star"></i></li>
																@else 
																	<li><i class="fa fa-star-o"></i></li>
																@endif
															@endfor
													</ul>
													<a href="#" class="total-review">({{$product_detail['getReview']->count()}}) Review</a>
                                                </div>
                                                @php 
                                                    $after_discount=($product_detail->price-(($product_detail->price*$product_detail->discount)/100));
                                                @endphp
												<p class="price"><span class="discount">Rs{{number_format($after_discount,2)}}</span><s>Rs{{number_format($product_detail->price,2)}}</s> </p>
												<p class="description">{!!($product_detail->summary)!!}</p>
											</div>
											<!--/ End Description -->
											<!-- Color -->
											{{-- <div class="color">
												<h4>Available Options <span>Color</span></h4>
												<ul>
													<li><a href="#" class="one"><i class="ti-check"></i></a></li>
													<li><a href="#" class="two"><i class="ti-check"></i></a></li>
													<li><a href="#" class="three"><i class="ti-check"></i></a></li>
													<li><a href="#" class="four"><i class="ti-check"></i></a></li>
												</ul>
											</div> --}}
											<!--/ End Color -->
											<!-- Size -->
											



											<!--/ End Size -->
											<!-- Product Buy -->
											<div class="product-buy">
											    

<form action="{{ route('single-add-to-cart') }}" method="POST" id="add-to-cart-form">
    @csrf

    <!-- Hidden: Slug -->
    <input type="hidden" name="slug" value="{{ $product_detail->slug }}">
    <input type="hidden" name="redirect_to_cart" id="redirect_to_cart" value="false">
    


    <!-- Size Selection -->
    <label for="sizeSelect"><strong>Select Size</strong></label>
    <select name="size" id="sizeSelect" class="form-control" required>
        <option value="">-- Choose a size --</option>
        @foreach($product_detail->sizes as $size)
            @php
                $isNone = strtolower($size->size) === 'no size';
                $label = $isNone ? 'No Size' : $size->size;
            @endphp
            <option value="{{ $size->size }}">
                {{ $label }} (In Stock: {{ $size->stock }})
            </option>
        @endforeach
    </select>

    <!-- Quantity -->
    <label for="quantity" class="mt-3"><strong>Quantity</strong></label>
    <input type="number" name="quantity" value="1" min="1" class="form-control" required>

    <!-- Add to Cart Button -->
    @guest
    <button
        type="button"
        class="btn btn-warning mt-3"
        onclick="swal({
            title: 'Login Required',
            text: 'Please login to add this item to cart.',
            icon: 'warning',
            buttons: true
        }).then((willLogin) => {
            if (willLogin) {
                window.location.href = '{{ route('login.form') }}';
            }
        });"
    >
        Add to Cart
    </button>
    @else
    <button type="submit" class="btn btn-primary mt-3" id="add-to-cart-button">
        Add to Cart
    </button>
    @endguest

 @php $isGuest = Auth::guest(); @endphp
<button
    type="button"
    class="btn btn-success mt-3 ml-2"
    @if($product_detail->quantity == 0) disabled @endif
    onclick="@if($isGuest)
                swal({
                    title: 'Login Required',
                    text: 'Please login to buy this product.',
                    icon: 'warning',
                    buttons: true
                }).then((willLogin) => {
                    if (willLogin) {
                        window.location.href = '{{ route('login.form') }}';
                    }
                });
            @else
                window.location.href = '{{ route('cart') }}';
            @endif"
>
    Buy Now
</button>



    <!-- Wishlist -->
    <a href="{{ route('add-to-wishlist', $product_detail->slug) }}" class="btn btn-outline-dark mt-3 ml-2"><i class="ti-heart"></i></a>
</form>




												<p class="cat">Category :<a href="{{route('product-cat',$product_detail->cat_info['slug'])}}">{{$product_detail->cat_info['title']}}</a></p>
												@if($product_detail->sub_cat_info)
												<p class="cat mt-1">Sub Category :<a href="{{route('product-sub-cat',[$product_detail->cat_info['slug'],$product_detail->sub_cat_info['slug']])}}">{{$product_detail->sub_cat_info['title']}}</a></p>
												@endif
												<p class="availability">Stock : @if($product_detail->quantity>0)<span class="badge badge-success">{{$product_detail->quantity}}</span>@else <span class="badge badge-danger">{{$product_detail->quantity}}</span>  @endif</p>
											</div>
											<!--/ End Product Buy -->
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-12">
										<div class="product-info">
											<div class="nav-main">
												<!-- Tab Nav -->
												<ul class="nav nav-tabs" id="myTab" role="tablist">
													<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#description" role="tab">Description</a></li>
													<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a></li>
												</ul>
												<!--/ End Tab Nav -->
											</div>
											<div class="tab-content" id="myTabContent">
												<!-- Description Tab -->
												<div class="tab-pane fade show active" id="description" role="tabpanel">
													<div class="tab-single">
														<div class="row">
															<div class="col-12">
																<div class="single-des">
																	<p>{!! ($product_detail->description) !!}</p>
																</div>
															</div>
														</div>
													</div>
												</div>
												<!--/ End Description Tab -->
												<!-- Reviews Tab -->
												<div class="tab-pane fade" id="reviews" role="tabpanel">
													<div class="tab-single review-panel">
														<div class="row">
															<div class="col-12">
																
																<!-- Review -->
																<div class="comment-review">
																	<div class="add-review">
																		<h5>Add A Review</h5>
																		<p>Your email address will not be published. Required fields are marked</p>
																	</div>
																	<h4>Your Rating <span class="text-danger">*</span></h4>
																	<div class="review-inner">
@auth
<form class="form"
      method="post"
      action="{{ route('review.store', ['slug' => $product_detail->slug]) }}"
      enctype="multipart/form-data">
  @csrf
  {{-- optional: also pass slug in body if your controller reads $request->slug --}}
  <input type="hidden" name="slug" value="{{ $product_detail->slug }}">

  <div class="row">
    <div class="col-lg-12 col-12">
      <div class="rating_box">
        <div class="star-rating">
          <div class="star-rating__wrap">
            <input class="star-rating__input" id="star-rating-5" type="radio" name="rate" value="5">
            <label class="star-rating__ico fa fa-star-o" for="star-rating-5" title="5 out of 5 stars"></label>
            <input class="star-rating__input" id="star-rating-4" type="radio" name="rate" value="4">
            <label class="star-rating__ico fa fa-star-o" for="star-rating-4" title="4 out of 5 stars"></label>
            <input class="star-rating__input" id="star-rating-3" type="radio" name="rate" value="3">
            <label class="star-rating__ico fa fa-star-o" for="star-rating-3" title="3 out of 5 stars"></label>
            <input class="star-rating__input" id="star-rating-2" type="radio" name="rate" value="2">
            <label class="star-rating__ico fa fa-star-o" for="star-rating-2" title="2 out of 5 stars"></label>
            <input class="star-rating__input" id="star-rating-1" type="radio" name="rate" value="1">
            <label class="star-rating__ico fa fa-star-o" for="star-rating-1" title="1 out of 5 stars"></label>
            @error('rate') <span class="text-danger">{{ $message }}</span> @enderror
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-12 col-12">
      <div class="form-group">
        <label>Write a review</label>
        <textarea name="review" rows="6" placeholder=""></textarea>
      </div>
    </div>

    {{-- Photos (optional) --}}
    <div class="mb-3 w-100">
      <label class="form-label fw-semibold">Add photos (optional)</label>
      <div id="rv-dropzone-bs"
           class="border border-2 border-secondary border-dashed rounded-3 p-4 text-center bg-light"
           style="cursor:pointer;">
        <input id="rv-input-bs" type="file" name="photos[]" accept="image/jpeg,image/png,image/webp" multiple class="d-none">
        <div class="small text-muted">Click to upload or drag & drop</div>
        <div class="form-text">Up to 5 images • JPG/PNG/WebP • 2MB each</div>
      </div>
      <div id="rv-previews-bs" class="row g-2 mt-2"></div>
      @error('photos')   <div class="text-danger small">{{ $message }}</div> @enderror
      @error('photos.*') <div class="text-danger small">{{ $message }}</div> @enderror
    </div>

    <div class="col-lg-12 col-12">
      <div class="form-group button5">
        <button type="submit" class="btn">Submit</button>
      </div>
    </div>
  </div>
</form>
@else
<p class="text-center p-5">
  You need to <a href="{{ route('login.form') }}" style="color:rgb(54, 54, 204)">Login</a>
  OR <a style="color:blue" href="{{ route('register.form') }}">Register</a>
</p>
@endauth


																	</div>
																</div>
															
																<div class="ratting-main">
																	<div class="avg-ratting">
																		{{-- @php 
																			$rate=0;
																			foreach($product_detail->rate as $key=>$rate){
																				$rate +=$rate
																			}
																		@endphp --}}
																		<h4>{{ceil($product_detail->getReview->avg('rate'))}} <span>(Overall)</span></h4>
																		<span>Based on {{$product_detail->getReview->count()}} Comments</span>
																	</div>
																@foreach($product_detail['getReview'] as $data)
  <!-- Single Rating -->
  <div class="single-rating">
    <div class="rating-author">
      @if($data->user_info['photo'])
        <img src="{{ $data->user_info['photo'] }}" alt="{{ $data->user_info['photo'] }}">
      @else
        <img src="{{ asset('backend/img/avatar.png') }}" alt="Profile.jpg">
      @endif
    </div>

    {{-- Review Photos --}}
    @if($data->photos && $data->photos->count())
      <div class="row g-2 mt-2">
        @foreach($data->photos as $photo)
          <div class="col-6 col-md-4 col-lg-2">
            <a href="#" class="d-block border rounded overflow-hidden"
               data-toggle="modal" data-target="#rvModal"
               data-src="{{ $photo->url }}">
              <img src="{{ $photo->url }}" class="img-fluid"
                   style="height:120px;object-fit:cover;" loading="lazy" alt="Review photo">
            </a>
          </div>
        @endforeach
      </div>
    @endif

    <div class="rating-des">
      <h6>{{ $data->user_info['name'] }}</h6>
      <div class="ratings">
        <ul class="rating">
          @for($i=1; $i<=5; $i++)
            @if($data->rate >= $i)
              <li><i class="fa fa-star"></i></li>
            @else
              <li><i class="fa fa-star-o"></i></li>
            @endif
          @endfor
        </ul>
        <div class="rate-count">(<span>{{ $data->rate }}</span>)</div>
      </div>
      <p>{{ $data->review }}</p>
    </div>
  </div>
@endforeach

{{-- One shared modal to preview images --}}
<div class="modal fade" id="rvModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content bg-dark">
      <div class="modal-body p-0 text-center">
        <img id="rvModalImg" src="" class="img-fluid" alt="Photo">
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
  // Bootstrap 4 modal preview
  var rvModal = document.getElementById('rvModal');
  if (rvModal) {
    $('#rvModal').on('show.bs.modal', function (e) {
      var trigger = $(e.relatedTarget);
      var src = trigger.data('src') || '';
      $('#rvModalImg').attr('src', src);
    });
  }
</script>

																</div>
																
																<!--/ End Review -->
																
															</div>
														</div>
													</div>
												</div>
												<!--/ End Reviews Tab -->
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
		</section>
		<!--/ End Shop Single -->
		
		<!-- Start Most Popular -->
	<div class="product-area most-popular related-product section">
        <div class="container">
            <div class="row">
				<div class="col-12">
					<div class="section-title">
						<h2>Related Products</h2>
					</div>
				</div>
            </div>
            <div class="row">
                {{-- {{$product_detail->rel_prods}} --}}
                <div class="col-12">
                    <div class="owl-carousel popular-slider">
                        @foreach($product_detail->rel_prods as $data)
                            @if($data->id !==$product_detail->id)
                                <!-- Start Single Product -->
                                <div class="single-product">
                                    <div class="product-img">
										<a href="{{route('product-detail',$data->slug)}}">
											@php 
												$photo=explode(',',$data->photo);
											@endphp
                                            <img class="default-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                            <img class="hover-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                            <span class="price-dec">{{$data->discount}} % Off</span>
                                                                    {{-- <span class="out-of-stock">Hot</span> --}}
                                        </a>
                                        <div class="button-head">
                                            <div class="product-action">
                                               <a data-toggle="modal" data-target="#{{$data->id}}" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                                            </div>
                                            <div class="product-action-2">
                                                <a data-toggle="modal" title="Add to cart" data-target="#{{$data->id}}" href="#">Add to cart</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-content">
                                        <h3><a href="{{route('product-detail',$data->slug)}}">{{$data->title}}</a></h3>
                                        <div class="product-price">
                                            @php 
                                                $after_discount=($data->price-(($data->discount*$data->price)/100));
                                            @endphp
                                            <span class="old">Rs{{number_format($data->price,2)}}</span>
                                            <span>Rs{{number_format($after_discount,2)}}</span>
                                        </div>
                                      
                                    </div>
                                </div>
                                <!-- End Single Product -->
                                	
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- End Most Popular Area -->
	

  <!-- Modal -->
  <div class="modal fade" id="modelExample" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ti-close" aria-hidden="true"></span></button>
            </div>
            <div class="modal-body">
                <div class="row no-gutters">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <!-- Product Slider -->
                            <div class="product-gallery">
                                <div class="quickview-slider-active">
                                    <div class="single-slider">
                                        <img src="images/modal1.png" alt="#">
                                    </div>
                                    <div class="single-slider">
                                        <img src="images/modal2.png" alt="#">
                                    </div>
                                    <div class="single-slider">
                                        <img src="images/modal3.png" alt="#">
                                    </div>
                                    <div class="single-slider">
                                        <img src="images/modal4.png" alt="#">
                                    </div>
                                </div>
                            </div>
                        <!-- End Product slider -->
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <div class="quickview-content">
                            <h2>Flared Shift Dress</h2>
                            <div class="quickview-ratting-review">
                                <div class="quickview-ratting-wrap">
                                    <div class="quickview-ratting">
                                        <i class="yellow fa fa-star"></i>
                                        <i class="yellow fa fa-star"></i>
                                        <i class="yellow fa fa-star"></i>
                                        <i class="yellow fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <a href="#"> (1 customer review)</a>
                                </div>
                                <div class="quickview-stock">
                                    <span><i class="fa fa-check-circle-o"></i> in stock</span>
                                </div>
                            </div>
                            <h3>$29.00</h3>
                            <div class="quickview-peragraph">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iste laborum ad impedit pariatur esse optio tempora sint ullam autem deleniti nam in quos qui nemo ipsum numquam.</p>
                            </div>
                            <div class="size">
                                <div class="row">
                                    <div class="col-lg-6 col-12">
                                        <h5 class="title">Size</h5>
                                        <select>
                                            <option selected="selected">s</option>
                                            <option>m</option>
                                            <option>l</option>
                                            <option>xl</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 col-12">
                                        <h5 class="title">Color</h5>
                                        <select>
                                            <option selected="selected">orange</option>
                                            <option>purple</option>
                                            <option>black</option>
                                            <option>pink</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="quantity">
                                <!-- Input Order -->
                                <div class="input-group">
                                    <div class="button minus">
                                        <button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
                                            <i class="ti-minus"></i>
                                        </button>
									</div>
                                    <input type="text" name="qty" class="input-number"  data-min="1" data-max="1000" value="1">
                                    <div class="button plus">
                                        <button type="button" class="btn btn-primary btn-number" data-type="plus" data-field="quant[1]">
                                            <i class="ti-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <!--/ End Input Order -->
                            </div>
                            <div class="add-to-cart">
                                <a href="#" class="btn">Add to cart</a>
                                <a href="#" class="btn min"><i class="ti-heart"></i></a>
                                <a href="#" class="btn min"><i class="fa fa-compress"></i></a>
                            </div>
                            <div class="default-social">
                                <h4 class="share-now">Share:</h4>
                                <ul>
                                    <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a class="youtube" href="#"><i class="fa fa-pinterest-p"></i></a></li>
                                    <li><a class="dribbble" href="#"><i class="fa fa-google-plus"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal end -->

@endsection
@push('styles')
	<style>
		/* Rating */
		.rating_box {
		display: inline-flex;
		}

		.star-rating {
		font-size: 0;
		padding-left: 10px;
		padding-right: 10px;
		}

		.star-rating__wrap {
		display: inline-block;
		font-size: 1rem;
		}

		.star-rating__wrap:after {
		content: "";
		display: table;
		clear: both;
		}

		.star-rating__ico {
		float: right;
		padding-left: 2px;
		cursor: pointer;
		color: #F7941D;
		font-size: 16px;
		margin-top: 5px;
		}

		.star-rating__ico:last-child {
		padding-left: 0;
		}

		.star-rating__input {
		display: none;
		}

		.star-rating__ico:hover:before,
		.star-rating__ico:hover ~ .star-rating__ico:before,
		.star-rating__input:checked ~ .star-rating__ico:before {
		content: "\F005";
		}
		 .size ul li a.selected {
        background-color: #000;
        color: #fff;
        border: 2px solid #000;
    }
    /* Button when item is added to cart */
#add-to-cart-button:disabled {
    background-color: #28a745; /* Green color */
    border-color: #28a745;
    cursor: not-allowed;
}
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.size-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.size-btn.active {
  border: 2px solid #b3005f;
  font-weight: bold;
}

.size-btn.disabled {
  background: #eee;
  color: #999;
  cursor: not-allowed;
}


	</style>
@endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

    {{-- <script>
        $('.cart').click(function(){
            var quantity=$('#quantity').val();
            var pro_id=$(this).data('id');
            // alert(quantity);
            $.ajax({
                url:"{{route('add-to-cart')}}",
                type:"POST",
                data:{
                    _token:"{{csrf_token()}}",
                    quantity:quantity,
                    pro_id:pro_id
                },
                success:function(response){
                    console.log(response);
					if(typeof(response)!='object'){
						response=$.parseJSON(response);
					}
					if(response.status){
						swal('success',response.msg,'success').then(function(){
							document.location.href=document.location.href;
						});
					}
					else{
                        swal('error',response.msg,'error').then(function(){
							document.location.href=document.location.href;
						});
                    }
                }
            })
        });
        
    document.addEventListener("DOMContentLoaded", function () {
        const sizeLinks = document.querySelectorAll('.size ul li a');
        const hiddenInput = document.getElementById('selected_size');

        sizeLinks.forEach(function (link) {
            link.addEventListener('click', function (e) {
                e.preventDefault();

                // Remove active class from all
                sizeLinks.forEach(function (l) {
                    l.classList.remove('selected');
                });

                // Add active class to current
                this.classList.add('selected');

                // Set value in hidden input
                hiddenInput.value = this.textContent.trim();
            });
        });
    });



    </script> --}}
    @endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const addToCartButton = document.getElementById('add-to-cart-button');
    const addToCartForm = document.getElementById('add-to-cart-form');

    addToCartForm.addEventListener('submit', function (event) {
        event.preventDefault();

        const sizeSelect = document.getElementById('sizeSelect');
        if (sizeSelect.value === "") {
            swal('Error', 'Please select a size before adding to the cart.', 'error');
            return;
        }

        addToCartButton.disabled = true;
        addToCartButton.innerText = 'Adding...';

        $.ajax({
            url: addToCartForm.action,
            type: 'POST',
            data: $(addToCartForm).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (typeof(response) !== 'object') {
                    response = $.parseJSON(response);
                }

                if (response.status === 'success') {
                    $('#cart-count').text(response.cartCount || 1);
                    swal('Success', response.message || 'Product added to cart.', 'success');
                    addToCartButton.innerText = 'Added to Cart';
                    setTimeout(() => {
                        addToCartButton.innerText = 'Add to Cart';
                        addToCartButton.disabled = false;
                    }, 1000);
                } else {
                    swal('Error', response.message || 'Something went wrong.', 'error');
                    addToCartButton.innerText = 'Add to Cart';
                    addToCartButton.disabled = false;
                }
            },
            error: function(jqXHR) {
                if (jqXHR.status === 401) {
                    window.location.href = "{{ route('login.form') }}";
                } else {
                    swal('Error', 'Something went wrong. Please try again.', 'error');
                    addToCartButton.innerText = 'Add to Cart';
                    addToCartButton.disabled = false;
                }
            }
        });
    });
});
</script>


<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ $product_detail->title }}",
  "image": [
    "{{ asset('uploads/product/' . $product_detail->photo) }}"
  ],
  "description": "{{ Str::limit(strip_tags($product_detail->description), 150) }}",
  "brand": {
    "@type": "Brand",
    "name": "Jayaka"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "NPR",
    "price": "{{ $product_detail->price }}",
    "availability": "https://schema.org/InStock",
    "url": "{{ route('product-detail', $product_detail->slug) }}"
  }
}
</script>
<script>
(function(){
  const input = document.getElementById('rv-input-bs');
  const dz    = document.getElementById('rv-dropzone-bs');
  const prevs = document.getElementById('rv-previews-bs');
  const MAX=5, ACCEPT=['image/jpeg','image/png','image/webp'], MAX_MB=2;

  if (!input || !dz || !prevs) return;

  dz.addEventListener('click',()=>input.click());
  ['dragenter','dragover'].forEach(evn=>dz.addEventListener(evn,e=>{e.preventDefault(); dz.classList.add('border-primary');}));
  ['dragleave','drop'].forEach(evn=>dz.addEventListener(evn,e=>{e.preventDefault(); dz.classList.remove('border-primary');}));

  // IMPORTANT: replace current selection on input change to avoid duplicates
  input.addEventListener('change',()=> add(Array.from(input.files), /*replace=*/true));

  // Drag & drop appends to existing selection
  dz.addEventListener('drop',e=>{
    add(Array.from(e.dataTransfer.files || []), /*replace=*/false);
  });

  function add(files, replace){
    const dt = new DataTransfer();

    // Keep existing files only when appending (drop). On input change, REPLACE.
    if (!replace) Array.from(input.files).forEach(f => dt.items.add(f));

    files.forEach(f=>{
      if(!ACCEPT.includes(f.type)) return toast('Only JPG/PNG/WebP');
      if(f.size>MAX_MB*1024*1024)  return toast('Max 2MB each');
      if(dt.files.length>=MAX)     return toast('Max 5 images');

      // de-dupe by name + size + lastModified
      const exists = Array.from(dt.files).some(x =>
        x.name===f.name && x.size===f.size && x.lastModified===f.lastModified
      );
      if (exists) return;

      dt.items.add(f);
    });

    input.files = dt.files;
    render();
  }

  function removeAt(i){
    const dt=new DataTransfer();
    Array.from(input.files).forEach((f,ix)=>{ if(ix!==i) dt.items.add(f); });
    input.files=dt.files; render();
  }

  function render(){
    prevs.innerHTML='';
    Array.from(input.files).forEach((f,i)=>{
      const url=URL.createObjectURL(f);
      prevs.insertAdjacentHTML('beforeend',`
        <div class="col-6 col-md-4 col-lg-2">
          <div class="position-relative border rounded overflow-hidden bg-white">
            <img src="${url}" class="img-fluid" style="height:120px;object-fit:cover;" alt="selected photo">
            <button type="button" class="btn btn-sm btn-dark position-absolute top-0 end-0 m-1">&times;</button>
            <div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-50 text-white small px-1 text-truncate">${f.name}</div>
          </div>
        </div>`);
      prevs.lastElementChild.querySelector('button').addEventListener('click',()=>removeAt(i));
    });

    const hint = dz.querySelector('.form-text');
    if (hint) hint.textContent = `Up to 5 images • JPG/PNG/WebP • 2MB each • ${Math.max(0, MAX - input.files.length)} left`;
  }

  function toast(msg){
    // works with Bootstrap 4/5; if not present, just alert
    try {
      const el=document.createElement('div');
      el.className='toast align-items-center text-white bg-dark border-0 position-fixed bottom-0 start-50 translate-middle-x mb-3';
      el.role='alert'; el.innerHTML=`<div class="d-flex"><div class="toast-body">${msg}</div></div>`;
      document.body.appendChild(el);
      if (window.bootstrap && bootstrap.Toast) {
        const t=new bootstrap.Toast(el,{delay:2000}); t.show(); el.addEventListener('hidden.bs.toast',()=>el.remove());
      } else {
        alert(msg); el.remove();
      }
    } catch(e){ alert(msg); }
  }
})();
</script>

@endpush