@extends('layouts.app')

@section('content')

<style>
  .price-wrapper {display:flex;align-items:center;gap:14px;margin:20px 0;}
.price-now {font-size:26px;font-weight:700;color:#c55353;}
/* General Container */
.custom-install-form {
  margin: 20px auto;
  background: #fff;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  font-family: "Poppins", sans-serif;
  color: #222;
}
    a.rad_more {
    color: red;
    text-decoration: underline;
    font-size: 12px;
}
/* Headings */
.install-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #111;
}
.disabled{
	background-color:#5c8acc !important;
	pointer-events:none;
}
/* Radio Groups */
.options-group {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.custom-radio {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #333;
  gap: 6px;
  cursor: pointer;
}

.custom-radio input {
  accent-color: #007bff;
  transform: scale(1.2);
}

/* Measurements */
.measurements {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.input-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.input-box label {
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #555;
}

.input-box input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border-color 0.3s;
}

.input-box input:focus {
  border-color: #007bff;
  outline: none;
}

/* Buttons */
.btn-primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #007bff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.btn-primary:hover {
  background: #0056d2;
  transform: translateY(-2px);
}

/* Hidden Sections */
.hidden-section {
  display: none;
  margin-top: 25px;
}

/* Accordion Styles */
.accordion-item {
  border-bottom: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #f9f9f9;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-header {
  padding: 12px 16px;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  background: #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.accordion-header:hover {
  background: #e8efff;
}

.accordion-header::after {
  content: "+";
  color: #007bff;
  font-weight: bold;
  transition: transform 0.3s;
}

.accordion-item.active .accordion-header::after {
  content: "–";
  transform: rotate(180deg);
}

.accordion-body {
  display: none;
  flex-direction: column;
  padding: 12px 16px;
  background: #fff;
}

.accordion-item.active .accordion-body {
  display: flex;
}

.accordion-body label {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 6px;
  gap: 6px;
}

.accordion-body input {
  accent-color: #007bff;
}

/* Error Message */
.error-message {
  color: #d93025;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 8px;
  text-align: center;
  display: none;
}

/* Responsive */
@media (max-width: 500px) {
  .measurements {
    flex-direction: column;
  }
}
</style>
<nav class="dsdsd" aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb custom-breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('products', ['category_id' => $product->category->slug]) }}">{{ $product->category->name ?? 'Blinds' }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ ucfirst($product->name) }}</li>
        </ol>
    </div>
</nav>


@php
    // Handle both single product and multiple products scenarios
    $productList = isset($product) ? collect([$product]) : $products;
@endphp

@if($productList->count() > 0)
    @foreach($productList as $index => $product)
    <section class="flat-single-product {{ $index > 0 ? 'mt-5' : '' }}">
        <div class="tf-main-product section-image-zoom">
            <div class="container">
                <div class="row">
                    <!-- Product Images -->
                    <div class="col-md-7">
                        <div class="tf-product-media-wrap sticky-top">
                            <div class="product-thumbs-slider">
                                <div dir="ltr" class="swiper tf-product-media-thumbs other-image-zoom" data-preview="4" data-direction="vertical">
                                    <div class="swiper-wrapper stagger-wrap">
                                           
                                            <div class="swiper-slide stagger-item">
                                                <div class="item">
                                                    <img class="lazyload"
                                                        data-src="{{ asset('storage/' . $product->primary_image) }}"
                                                        src="{{ asset('storage/' . $product->primary_image) }}"
                                                        alt="{{ $product->name }}">
                                                </div>
                                            </div>
                                            <div class="swiper-slide stagger-item">
                                                <div class="item">
                                                    <img class="lazyload"
                                                        data-src="{{ asset('storage/' . $product->secondary_image) }}"
                                                        src="{{ asset('storage/' . $product->secondary_image) }}"
                                                        alt="{{ $product->name }}">
                                                </div>
                                            </div>
                                            <!--div class="swiper-slide stagger-item">
                                                <div class="item">
                                                    <img class="lazyload"
                                                        data-src="{{ asset('assets/img/grey_blackout_roller_fully_closed_-_bedroom_23_.png') }}"
                                                        src="{{ asset('assets/img/grey_blackout_roller_fully_closed_-_bedroom_23_.png') }}"
                                                        alt="{{ $product->name }}">
                                                </div>
                                            </div-->
                                    </div>
                                </div>

                                <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started">
                                    <div class="swiper-wrapper">
											<div class="swiper-slide">
                                                <a href="{{ asset('storage/' . $product->primary_image) }}" target="_blank" class="item" data-pswp-width="552px" data-pswp-height="827px">
                                                    <img class="tf-image-zoom lazyload"
                                                        data-zoom="{{ asset('storage/' . $product->primary_image) }}"
                                                        data-src="{{ asset('storage/' . $product->primary_image) }}"
                                                        src="{{ asset('storage/' . $product->primary_image) }}"
                                                        alt="{{ $product->name }}">
                                                </a>
                                            </div>
											<div class="swiper-slide">
                                                <a href="{{ asset('storage/' . $product->secondary_image) }}" target="_blank" class="item" data-pswp-width="552px" data-pswp-height="827px">
                                                    <img class="tf-image-zoom lazyload"
                                                        data-zoom="{{ asset('storage/' . $product->secondary_image) }}"
                                                        data-src="{{ asset('storage/' . $product->secondary_image) }}"
                                                        src="{{ asset('storage/' . $product->secondary_image) }}"
                                                        alt="{{ $product->name }}">
                                                </a>
                                            </div>
                                            <!--div class="swiper-slide">
                                                <a href="{{ asset('assets/img/grey_blackout_roller_fully_closed_-_bedroom_23_.png') }}" target="_blank" class="item" data-pswp-width="552px" data-pswp-height="827px">
                                                    <img class="tf-image-zoom lazyload"
                                                        data-zoom="{{ asset('assets/img/grey_blackout_roller_fully_closed_-_bedroom_23_.png') }}"
                                                        data-src="{{ asset('assets/img/grey_blackout_roller_fully_closed_-_bedroom_23_.png') }}"
                                                        src="{{ asset('assets/img/grey_blackout_roller_fully_closed_-_bedroom_23_.png') }}"
                                                        alt="{{ $product->name }}">
                                                </a>
                                            </div-->
                                    </div>
                                    <div class="swiper-button-next nav-swiper thumbs-next"></div>
                                    <div class="swiper-button-prev nav-swiper thumbs-prev"></div>
                                </div>
                            </div>
                        </div>
						
                    </div>
                    <!-- /Product Images -->

                    <!-- Product Info -->
                    <div class="col-md-5">
                        <div class="tf-zoom-main"></div>
                        <div class="tf-product-info-wrap other-image-zoom">
                            <div class="tf-product-info-list">
                                <div class="tf-product-heading">
                                    <h5 class="product-name fw-medium">{{ ucfirst($product->name) }}</h5>
									<span class="brand-product">{{ $product->brand->name ?? 'Blinds' }} <a href="#read" class="rad_more"> More Details</a></span>
									<!-- PRICE SECTION -->
									<div class="price-wrapper">
										<span class="price-now" id="newPrice">From £{{$product->start_from}}</span>
									</div>
                                    <div class="product-rate">
                                        <div class="list-star">
                                            @php
                                                $avgRating = $product->averageRating();
                                                $fullStars = floor($avgRating);
                                                $hasHalfStar = ($avgRating - $fullStars) >= 0.5;
                                            @endphp
                                            @for($i = 1; $i <= 5; $i++)
                                                @if($i <= $fullStars)
                                                    <i class="icon icon-star"></i>
                                                @elseif($i == $fullStars + 1 && $hasHalfStar)
                                                    <i class="icon icon-star-half"></i>
                                                @else
                                                    <i class="icon icon-star-o"></i>
                                                @endif
                                            @endfor
                                        </div>
                                        <span class="count-review">({{ $product->totalReviews() }} reviews)</span>
                                    </div>
                                    <!--div class="product-price">
                                        @if($product->sale_price && $product->sale_price < $product->price)
                                            <div class="display-sm price-new price-on-sale">£{{ number_format($product->sale_price, 2) }}</div>
                                            <div class="display-sm price-old">£{{ number_format($product->price, 2) }}</div>
                                            @php
                                                $discount = round((($product->price - $product->sale_price) / $product->price) * 100);
                                            @endphp
                                            <span class="badge-sale">{{ $discount }}% Off</span>
                                        @else
                                            <div class="display-sm price-new">£{{ number_format($product->price, 2) }}</div>
                                        @endif
                                    </div-->
                                </div>

                                <div class="product-description">
                                    <p>{{ $product->short_description ?? 'High-quality blinds perfect for any room.' }}</p>
                                </div>

                                <div class="install-form">
                                    <div id="installMethodSection">
    <h3 class="install-title">Select Installation Method</h3>
    <div class="options-group">
      <label class="custom-radio">
        <input type="radio" name="installMethod" id="recessOption" checked>
        <span>Recess</span>
      </label>
      <label class="custom-radio">
        <input type="radio" name="installMethod" id="exactOption">
        <span>Exact</span>
      </label>
    </div>
  </div>
<!-- STEP 3: Measurements -->
  <h3 class="install-title">Enter Your Measurements</h3>
  <div class="options-group">
    <label class="custom-radio">
      <input type="radio" name="unit" id="cmUnit" checked>
      <span>Centimeters</span>
    </label>
    <label class="custom-radio">
      <input type="radio" name="unit" id="mmUnit">
      <span>Millimetres</span>
    </label>
  </div>

  <div class="measurements">
    <div class="input-box">
      <label for="widthInput">Width</label>
      <input type="number" id="widthInput" placeholder="min {{ optional($price)->width ? $price->width / 10 : 0 }}">
    </div>
    <div class="input-box">
      <label for="heightInput">Height</label>
      <input type="number" id="heightInput" placeholder="min {{ optional($price)->drop ? $price->drop / 10 : 0 }}">
    </div>
  </div>

  <!-- STEP 4: Button -->
  <button id="getPriceBtn" class="btn-primary disabled " disabled>Out of Stock</button>  <div id="errorMsg" class="error-message"></div>

  <!-- STEP 5: Accordion Options Section -->
  <div id="optionsSection" class="hidden-section">
  @if(isset($optionTypes))
    @foreach($optionTypes as $option)
  <div class="option-group">
  <h3>{{ $option->name }}</h3>
          <div class="pill-container">
          @foreach($option->optionValues as $val)
            <label class="pill-option  @if($val->is_default == 1) selected @endif">
              <input 
                type="radio" 
                name="{{ $option->name }}" 
                value="{{ $val->id }}" 
                @if($val->is_default == 1) checked @endif
              > 
              {{ $val->value }}
            </label>
          @endforeach
        </div>
      </div>
    @endforeach
  @endif
</div>
</div>
 
                        
<script>
const installSection = document.getElementById('installMethodSection');
const operationRadios = document.querySelectorAll('input[name="operationType"]');
const widthInput = document.getElementById('widthInput');
const heightInput = document.getElementById('heightInput');
const optionsSection = document.getElementById('optionsSection');
const getPriceBtn = document.getElementById('getPriceBtn');
const errorMsg = document.getElementById('errorMsg');

// Show install section after operation type selected
operationRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    installSection.style.display = 'block';
  });
});
const recessOption = document.getElementById('recessOption');
const exactOption = document.getElementById('exactOption');

document.querySelectorAll('input[name="installMethod"]').forEach(method => {
    method.addEventListener('change', updateInstallValues);
});

document.querySelectorAll('input[name="unit"]').forEach(unit => {
    unit.addEventListener('change', updateInstallValues);
});
let prevUnit = 'cmUnit'; // default selected unit

function updateInstallValues() {

    let width = Number('{{ optional($price)->width }}' || 0);
    let drop  = Number('{{ optional($price)->drop }}' || 0);

    const isCm    = document.getElementById('cmUnit').checked;
    const isExact = exactOption.checked;

    let currentUnit = isCm ? 'cm' : 'mm';
    let displayWidth, displayDrop;

    // --------------------------
    //   CALCULATE DISPLAY VALUES
    // --------------------------
    if (isExact) {
        if (isCm) {
            displayWidth = (width / 10) - 1;
            displayDrop  = drop / 10;
        } else {
            displayWidth = width - 10;
            displayDrop  = drop;
        }
    } else {
        if (isCm) {
            displayWidth = width / 10;
            displayDrop  = drop / 10;
        } else {
            displayWidth = width;
            displayDrop  = drop;
        }
    }

    // --------------------------
    // UPDATE PLACEHOLDER
    // --------------------------
    widthInput.placeholder  = `min (${displayWidth} ${currentUnit})`;
    heightInput.placeholder = `min (${displayDrop} ${currentUnit})`;

    // --------------------------
    //  ONLY CONVERT IF UNIT CHANGED
    // --------------------------
    if (currentUnit !== prevUnit) {

        if (widthInput.value !== '') {
            let w = Number(widthInput.value);
            widthInput.value = isCm ? (w / 10) : (w * 10);
        }

        if (heightInput.value !== '') {
            let h = Number(heightInput.value);
            heightInput.value = isCm ? (h / 10) : (h * 10);
        }
    }

    // Update last used unit
    prevUnit = currentUnit;
}


// Validation before showing options
getPriceBtn.addEventListener('click', () => {
  //const operationSelected = document.querySelector('input[name="operationType"]:checked');
  const installSelected = document.querySelector('input[name="installMethod"]:checked');
  const width = widthInput.value.trim();
  const height = heightInput.value.trim();

  /*if (!operationSelected) {
    showError("Please select an Operation Type (Manual or Motor).");
  } else */ if (!installSelected) {
    showError("Please select an Installation Method (Recess or Exact).");
  } else 
 if (!width || !height) {
    showError("Please enter both Width and Height values.");
  } else {
    hideError();
    optionsSection.style.display = 'block';
    getPriceBtn.innerText = "Options Shown Below";
    getPriceBtn.scrollIntoView({ behavior: 'smooth' });
	document.querySelectorAll('#optionsSection .accordion-item')
        .forEach(item => item.classList.add('active'));
  }
});

function showError(msg) {
  errorMsg.innerText = msg;
  errorMsg.style.display = 'block';
}

function hideError() {
  errorMsg.style.display = 'none';
}

// Accordion logic — only one open at a time
document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', () => {
    const parent = header.parentElement;
    const openItem = document.querySelector('.accordion-item.active');
    if (openItem && openItem !== parent) {
      openItem.classList.remove('active');
    }
    parent.classList.toggle('active');
  });
});
 document.querySelectorAll(".pill-container").forEach(group => {
                    const pills = group.querySelectorAll(".pill-option");
                    pills.forEach(pill => {
                        pill.addEventListener("click", () => {
                            pills.forEach(p => p.classList.remove("selected"));
                            pill.classList.add("selected");
                            pill.querySelector("input").checked = true;
                        });
                    });
                });
</script>

                                    <!--div class="tf-product-info-quantity">
                                        <div class="quantity-title fw-6">Quantity</div>
                                        <div class="wg-quantity">
                                            <span class="btn-quantity minus-btn">-</span>
                                            <input type="text" name="number" value="1">
                                            <span class="btn-quantity plus-btn">+</span>
                                        </div>
                                    </div-->

										<div class="tf-product-info-buy-button" id="buyButtonSection" style="display: none;">
											<form id="addToCartForm">
												@csrf
												<input type="hidden" name="product_id" value="{{ $product->id }}">
												<input type="hidden" name="custom_price" id="custom_price">
												<input type="hidden" name="custom_attributes" id="custom_attributes">

												<a href="javascript:void(0);" 
												   id="addToCartBtn"
												   class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn">
													<span>Add to cart - £<span class="p_price">{{ number_format($product->sale_price ?? $product->price, 2) }}</span></span>
												</a>
											</form>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /Product Info -->
					 <div class="row mt-3">
					 
					 <div class="col-lg-3">
                    <div class="feature-item feature-express active">
                        <img src="https://img.icons8.com/ios-filled/50/000000/delivery.png" alt="delivery">
                        <div class="feature-title">Delivery</div>
                        <div class="feature-text">Just £9.99 for your entire order.</div>
                    </div>
                </div>
					  
					 <div class="col-lg-3">
                    <div class="feature-item feature-express active">
                         <img src="https://img.icons8.com/color/48/paypal.png" alt="paypal">
                        <div class="feature-title">Payment</div>
                        <div class="feature-text">Buy now, pay <br>later.</div>
                    </div>
                </div>
					 
		
 
					 <div class="col-lg-3">
                    <div class="feature-item feature-express active">
                          <img src="https://img.icons8.com/ios/50/shield.png" alt="shield">
                        <div class="feature-title">SizeSure Cover</div>
                        <div class="feature-text">FREE replacement blinds. Just £19.95.</div>
                    </div>
                </div>
					 
		

    

    </div>
                </div>
            </div>
        </div>
    </section>
<!--New Added Section-->


  <style>
                    .cushion-section {
                      padding: 40px 20px;
                      animation: fadeIn 1s ease-in-out;
                    }
                
                    .cushion-card {
                         border-radius: 20px;
                    overflow: hidden;
                    background: #fff;
                    transition: transform 0.3s 
                ease, box-shadow 0.3s 
                ease;
                    box-shadow: 0 2px 5px rgb(52 51 145);
					margin-top: 15px;
                    }
                
                    .cushion-card:hover {
                      transform: translateY(-6px);
                     
                    }
                
                    .cushion-img-wrapper {
                      background: #f5f5f5;
                      padding: 20px;
                      text-align: center;
                    }
                
                    .cushion-img-wrapper img {
                      max-width: 100%;
                      height: auto;
                    }
                
                    .price-tag {
                      font-weight: bold;
                      color: #222;
                    }
                
                    @keyframes fadeIn {
                      from { opacity: 0; transform: translateY(10px); }
                      to { opacity: 1; transform: translateY(0); }
                    }
                    
                    .cushion-section h2 {
                    font-size: 29px;
                }
                
                
                .cushion-card h5 {
                    font-size: 17px;
                    font-weight: 400 !important;
                }
                
                 
        
        .fsfds{
              font-family: "Poppins", sans-serif;
            background: linear-gradient(135deg, #e1f7e7, #e1f1ff);
            padding: 40px;
           
        }
        
          .section-title {
            font-size: 34px;
            font-weight: 800;
            color: #222;
            text-align: center;
            margin-bottom: 30px;
            animation: fadeIn 0.6s ease;
          }
        
          .accordion-item {
            background: white;
            margin-top: 15px;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.10);
            overflow: hidden;
            transition: 0.35s ease;
            cursor: pointer;
            border: 1px solid #f1d5df;
          }
        
          .accordion-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.12);
          }
        
          .accordion-header {
            padding: 22px 25px;
            font-size: 19px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #333;
            background: #fff;
          }
        
          .arrow-icon {
            transition: transform 0.35s ease;
            font-size: 22px;
          }
        
          .accordion-item.active .arrow-icon {
            transform: rotate(180deg);
          }
        
          .accordion-content {
            max-height: 0;
            overflow: hidden;
            padding: 0 25px;
            font-size: 15.5px;
            color: #555;
            background: #fff;
            border-top: 1px solid #d8f3dc;
            transition: max-height 0.4s ease, padding 0.4s ease;
            line-height: 1.7;
          }
        
          .accordion-item.active .accordion-content {
            max-height: 300px;
            padding: 22px 25px;
          }
        
          @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
          }
          
          .flat-spacing-3{
              padding-bottom: 90px;
          }
		  .tf-product-media-thumbs .swiper-slide .item img{
			border-radius: 0 !important;  
		  }
		  .swiper-slide.stagger-item.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active.swiper-slide-thumb-active {
  border-radius: 0 !important;
  border: none !important;
}
.tf-product-media-thumbs .swiper-slide .item::after{
	border:none !important;
}
@media (max-width: 576px) {
    .item img {
        width: 100%;
        height: auto !important; 
        object-fit: cover;
    }
}
  </style>


   <section class="features-section">
    <div class="container">

        <!-- Title + Arrows
        <div class="d-flex justify-content-between align-items-center mb-4"> -->
            <h4 class="title">Features & Benefits</h4>

            <!--div class="feature-arrows">
                <button class="arrow-btn" data-bs-target="#featureSlider" data-bs-slide="prev">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <button class="arrow-btn" data-bs-target="#featureSlider" data-bs-slide="next">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div 
        </div>-->

        <!-- SLIDER -->
        <div id="featureSlider">
            <div class="carousel_inner">

                <!-- SLIDE 1 -->
                <div class="">
                    <div class="row g-4">

                        <!--div class="col-md-3 col-sm-6">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fa-solid fa-border-all"></i>
                                </div>
                                <p class="feature-text">Lining options include thermal and blackout</p>
                            </div>
                        </div-->
						<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
							<div class="unique-feature-card">
								<div class="unique-feature-icon"> <i class="fa-solid fa-ruler-combined"></i></div>
								<p class="unique-feature-text">Made-to-measure for a perfect fit</p>
							</div>
						</div>
						<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
							<div class="unique-feature-card">
								<div class="unique-feature-icon">  <i class="fa-solid fa-envelope-open-text"></i></div>
								<p class="unique-feature-text">Free samples delivered by first class post</p>
							</div>
						</div>
						
                    
						<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
							<div class="unique-feature-card">
								<div class="unique-feature-icon">  <i class="fa-solid fa-thumbs-up"></i></div>
								<p class="unique-feature-text">Practical and easy to operate</p>
							</div>
						</div>
						<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6">
							<div class="unique-feature-card">
								<div class="unique-feature-icon">  <i class="fa-solid fa-palette"></i></div>
								<p class="unique-feature-text">Available in multiple modern colours</p>
							</div>
						</div>
						

                    </div>
                </div>

                <!-- SLIDE 2 -->
               

            </div>
        </div>

    </div>
</section>



                  <style>
  .price-wrapper {display:flex;align-items:center;gap:14px;margin:20px 0;}
.price-now {font-size:26px;font-weight:700;color:#c55353;}
.price-old {font-size:18px;color:#8f8f8f;text-decoration:line-through;opacity:.8;}

.custom-install-form {margin:20px auto;background:#fff;padding:24px;border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,0.08);font-family:"Poppins",sans-serif;color:#222;}
.install-title {font-size:1rem;font-weight:600;margin-bottom:10px;color:#111;}

.options-group {display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.custom-radio {display:flex;align-items:center;font-size:.95rem;color:#333;gap:6px;cursor:pointer;}
.custom-radio input {accent-color:#007bff;transform:scale(1.2);}

.measurements {display:flex;gap:15px;margin-bottom:25px;}
.input-box {flex:1;display:flex;flex-direction:column;}
.input-box label {font-size:.9rem;margin-bottom:6px;color:#555;}
.input-box input {padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:.95rem;transition:border-color .3s;}
.input-box input:focus {border-color:#007bff;outline:none;}

.btn-primary {width:100%;padding:12px;border:none;border-radius:8px;background:#007bff;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:.3s;}
.btn-primary:hover {background:#0056d2;transform:translateY(-2px);}

.hidden-section {display:none;margin-top:25px;}

.pill-container {display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.pill-option {padding:8px 18px;border:1px solid #ccc;border-radius:20px;cursor:pointer;font-size:14px;transition:.2s;user-select:none;}
.pill-option input {display:none;}
.pill-option.selected {border-color:#007bff;background:#e8f0ff;font-weight:500;}

.error-message {color:#d93025;font-size:.9rem;font-weight:500;margin-top:8px;text-align:center;display:none;}

@media (max-width:500px){
    .measurements {flex-direction:column;}
}
.option-group h3 {
    font-size: 19px;
}

.custom-feature-box p {
    font-size: 11px !important;
}
  
    .custom-feature-box {
                                    padding: 12px !important;
                                    border: 1px solid #e6e6e6;
                                    border-radius: 8px;
                                    background: #fff;
                                    transition: 0.3s 
                                ease;
                                }
                                
                                .custom-feature-box:hover {
                                    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                                }
                                
                                .feature-icon img {
                                    width: 28px;
                                    height: 28px;
                                }
                                
                                .feature-title {
                                    font-weight: 600;
                                    margin-bottom: 8px;
                                }
                                
                                .feature-text {
                                    font-size: 12px;
                                    color: #555;
                                }
                                
                                .feature-text {
                                    background: #f9f9f9;
                                    padding: 3px;
                                    border-radius: 12px;
                                }
                                
  
         /***********************
        SECTION + TITLE
        ************************/
        .features-section {
            background: linear-gradient(180deg, #f8f8f8, #f1f1f1);
            padding: 60px 0;
        }

        .features-title {
            font-size: 34px;
            font-weight: 800;
            color: #1e243a;
        }

        /***********************
        ARROW BUTTONS
        ************************/
        .feature-arrows .arrow-btn {
              width: 44px;
             height: 54px;
            border-radius: 50%;
            border: none;
            background: #ffffff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            font-size: 20px;
            color: #1e243a;
            transition: 0.3s ease;
        }

        .arrow-btn:hover {
            background: #1e243a;
            color: #ffffff;
            transform: scale(1.1);
        }

        /***********************
        FEATURE CARD STYLE
        ************************/
        .feature-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 35px 25px;
            border: 1px solid #e4e4e4;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            transition: 0.35s ease;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.12);
        }

        /***********************
        ICON STYLE
        ************************/
        .feature-icon {
            width: 65px;
            height: 65px;
            border-radius: 16px;
            background: #eef1f7;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            transition: 0.3s ease;
        }

        .feature-card:hover .feature-icon {
            background: #1e243a;
        }

        .feature-icon i {
            font-size: 28px;
            color: #1e243a;
            transition: 0.3s ease;
        }

        .feature-card:hover .feature-icon i {
            color: #ffffff;
        }

        /***********************
        TEXT STYLE
        ************************/
        .feature-text {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            color: #1e243a;
            margin: 0;
        }
        
        
                    .cushion-section {
                      padding: 40px 20px;
                      animation: fadeIn 1s ease-in-out;
                    }
                
                    .cushion-card {
                         border-radius: 20px;
                    overflow: hidden;
                    background: #fff;
                    transition: transform 0.3s 
                ease, box-shadow 0.3s 
                ease;
                    box-shadow: 0 2px 5px rgb(52 51 145);
                    }
                
                    .cushion-card:hover {
                      transform: translateY(-6px);
                     
                    }
                
                    .cushion-img-wrapper {
                      background: #f5f5f5;
                      padding: 20px;
                      text-align: center;
                    }
                
                    .cushion-img-wrapper img {
                      max-width: 100%;
                      height: auto;
                    }
                
                    .price-tag {
                      font-weight: bold;
                      color: #222;
                    }
                
                    @keyframes fadeIn {
                      from { opacity: 0; transform: translateY(10px); }
                      to { opacity: 1; transform: translateY(0); }
                    }
                    
                    .cushion-section h2 {
                    font-size: 29px;
                }
                
                
                .cushion-card h5 {
                    font-size: 17px;
                    font-weight: 400 !important;
                }
                
                 
        
        .fsfds{
              font-family: "Poppins", sans-serif;
            background: linear-gradient(135deg, #e1f7e7, #e1f1ff);
            padding: 40px;
           
        }
        
          .section-title {
            font-size: 34px;
            font-weight: 800;
            color: #222;
            text-align: center;
            margin-bottom: 30px;
            animation: fadeIn 0.6s ease;
          }
        
          .accordion-item {
            background: white;
            margin-top: 15px;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.10);
            overflow: hidden;
            transition: 0.35s ease;
            cursor: pointer;
            border: 1px solid #f1d5df;
          }
        
          .accordion-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.12);
          }
        
          .accordion-header {
            padding: 22px 25px;
            font-size: 19px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #333;
            background: #fff;
          }
        
          .arrow-icon {
            transition: transform 0.35s ease;
            font-size: 22px;
          }
        
          .accordion-item.active .arrow-icon {
            transform: rotate(180deg);
          }
        
          .accordion-content {
            max-height: 0;
            overflow: hidden;
            padding: 0 25px;
            font-size: 15.5px;
            color: #555;
            background: #fffafb;
            border-top: 1px solid #f2c9d6;
            transition: max-height 0.4s ease, padding 0.4s ease;
            line-height: 1.7;
          }
        
          .accordion-item.active .accordion-content {
            max-height: 1000px;
            padding: 22px 25px;
          }
        
          @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
          }
          
          .flat-spacing-3{
              padding-bottom: 90px;
          }
          a.rad_more {
    color: red;
    text-decoration: underline;
    font-size: 12px;
}
    h4.title {
    text-align: center;
	margin-bottom: 20px;
}
.accordion-content ul {

    opacity: 1 !important;
}
.specification_data {
    width: 60%;
    margin: 0 auto; /* centers the block */
    text-align: center;
    padding: 20px 0;
}
  </style>

<section class="fsfds pt-67 pb-67" id="read">

 <h4 class="title">Product Information</h4>

<div class="container">
    
    <div class="row justify-content-center">
    <div class="col-lg-10">

  <div class="accordion-item active">
    <div class="accordion-header">
      About {{ $product->name }}
      
    </div>
    <div class="accordion-content">
     {{ $product->description ?? "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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

" }}
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      The Intricate Breakdown
      
    </div>
    <div class="accordion-content">
	
<ul class="product-features">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </ul>
	</div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      Specifications
      
    </div>
    <div class="accordion-content"><div class="specification_data">Measuring for your new window coverings is quick and effortless.
<br>Simply follow our easy step-by-step guides.
<a class="btn-primary text-center mt-4" href="{{ asset('storage/' . $product->specification_file) }}">Download Specifications</a>

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

  <!--<div class="accordion-item">
    <div class="accordion-header">
      Our Guarantees
      
    </div>
    <div class="accordion-content">Content for guarantees...</div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      Child Safety
      
    </div>
    <div class="accordion-content">Content for child safety...</div>
  </div> -->
  </div>
</div>



</div>
</section>

<section class="cushion-section container">
   <h4 class="title">Top Picks for You</h4>
  <div class="row g-4">

   <div dir="ltr" class="swiper tf-swiper " data-swiper='{
         "slidesPerView": 2,
         "spaceBetween": 12,
         "speed": 800,
         "observer": true,
         "observeParents": true,
         "slidesPerGroup": 1,
         "pagination": { "el": ".sw-pagination-tes", "clickable": true },
         "breakpoints": {
         "768": { "slidesPerView": 2, "spaceBetween": 24, "slidesPerGroup": 2 },
         "1200": { "slidesPerView": 4, "spaceBetween": 24, "slidesPerGroup": 4}
         }
         }'>
         <div class="swiper-wrapper">
           	         </div>
         <span class="sw-dot-default sw-pagination-tes justify-content-center"></span>

  </div>
</section>
<section class="flat-spacing-3 " style="background: #eef1f7;">
   <div class="container">
      <div class="flat-title wow fadeInUp">
         <h4 class="title">What Our Customers Say</h4>
      </div>
      <div dir="ltr" class="swiper tf-swiper " data-swiper='{
         "slidesPerView": 1,
         "spaceBetween": 12,
         "speed": 800,
         "observer": true,
         "observeParents": true,
         "slidesPerGroup": 1,
         "pagination": { "el": ".sw-pagination-tes", "clickable": true },
         "breakpoints": {
         "768": { "slidesPerView": 2, "spaceBetween": 24, "slidesPerGroup": 2 },
         "1200": { "slidesPerView": 3, "spaceBetween": 24, "slidesPerGroup": 3}
         }
         }'>
         <div class="swiper-wrapper">
           	         </div>
         <span class="sw-dot-default sw-pagination-tes justify-content-center"></span>
      </div>
   </div>
</section>





<script>
  const items = document.querySelectorAll('.accordion-item');

  items.forEach(item => {
    item.addEventListener('click', () => {
      if (!item.classList.contains('active')) {
        items.forEach(i => i.classList.remove('active'));
      }
      item.classList.toggle('active');
    });
  });
</script>


<!--New Added Section And-->
    @if($product->reviews->count() > 0)
    <section class="flat-spacing-3">
        <div class="container">
            <div class="flat-title">
                <h4 class="title">Customer Reviews for {{ $product->name }}</h4>
            </div>
            <div class="row">
                @foreach($product->reviews->take(3) as $review)
                <div class="col-md-4 mb-4">
                    <div class="review-card">
                        <div class="review-top">
                            <div class="review-stars">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= $review->rating)
                                        <i class="fa-solid fa-star"></i>
                                    @else
                                        <i class="fa-regular fa-star"></i>
                                    @endif
                                @endfor
                            </div>
                            @if($review->is_verified)
                                <div class="review-verified">Verified</div>
                            @endif
                        </div>
                        <div class="review-title">{{ $review->title }}</div>
                        <div class="review-text">{{ $review->comment }}</div>
                        <div class="review-footer">
                            <span class="review-customer">{{ $review->user->name ?? 'Anonymous' }},</span> 
                            {{ $review->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
	
    @endif
    @endforeach
@else
    <section class="flat-spacing-3">
        <div class="container">
            <div class="text-center">
                <h3>No Products Found</h3>
                <p>No products match your criteria. Please try different filters.</p>
                <a href="{{ route('products') }}" class="tf-btn btn-fill">View All Products</a>
            </div>
        </div>
    </section>
@endif
<script>
document.getElementById('getPriceBtn').addEventListener('click', async () => {
    const installSelected = document.querySelector('input[name="installMethod"]:checked');
    const width = document.getElementById('widthInput').value.trim();
    const height = document.getElementById('heightInput').value.trim();
    const unit = document.getElementById('cmUnit').checked ? 'cm' : 'mm';
    const errorMsg = document.getElementById('errorMsg');
    const buyButtonSection = document.getElementById('buyButtonSection');

    if (!installSelected) {
        showError("Please select Installation Method.");
        return;
    }
    if (!width || !height) {
        showError("Please enter both Width and Height.");
        return;
    }

    hideError();

    try {
        const response = await fetch('{{ route("get.price") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                width,
                height,
                unit,
                category_id: '{{ $product->category_id }}',
                price_group: '{{ $product->price_group ?? "default" }}'
            })
        });

        const data = await response.json();

        if (!data.success) {
            showError(data.message || "Price not found for the selected dimensions.");
            buyButtonSection.style.display = 'none';
            return;
        }

        // Update price and show Add to Cart button
        document.querySelector('.p_price').innerText = parseFloat(data.price).toFixed(2);
        buyButtonSection.style.display = 'block';
        getPriceBtn.innerText = "Select Options Below";

    } catch (error) {
        showError("Error fetching price. Please try again.");
        console.error(error);
    }
});
document.getElementById('addToCartBtn').addEventListener('click', function () {
    const addToCartBtn = this;
    const installMethod = document.querySelector('input[name="installMethod"]:checked')?.id || '';
    const unit = document.querySelector('input[name="unit"]:checked')?.id || '';
    const width = document.getElementById('widthInput').value;
    const height = document.getElementById('heightInput').value;

    // Capture all selected accordion options
    const optionInputs = document.querySelectorAll('#optionsSection input[type="radio"]:checked');
    let selectedOptions = {};
    optionInputs.forEach(input => {
        const optionName = input.name;
        const optionValue = input.nextSibling.textContent.trim();
        selectedOptions[optionName] = optionValue;
    });

    // Prepare data
    const customAttributes = {
        install_method: installMethod,
        unit: unit,
        width: width,
        height: height,
        selected_options: selectedOptions
    };

    const customPrice = document.querySelector('.p_price').textContent.replace('£', '').trim();

    // AJAX Request
    fetch('{{ route("cart.add") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
        },
        body: JSON.stringify({
            product_id: document.querySelector('input[name="product_id"]').value,
            custom_price: customPrice,
            custom_attributes: customAttributes
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Save original button text
            const originalText = addToCartBtn.innerHTML;

            // Change button to "View Cart" state
            addToCartBtn.innerHTML = `
                <span>✅ Product added! <a href="{{ route('cart') }}" class="underline text-white ml-2">View Cart</a></span>
            `;
            addToCartBtn.style.backgroundColor = '#28a745'; // green success color
            addToCartBtn.style.pointerEvents = 'none'; // disable multiple clicks

            // Revert after 5 seconds
            setTimeout(() => {
                addToCartBtn.innerHTML = originalText;
                addToCartBtn.style.backgroundColor = '';
                addToCartBtn.style.pointerEvents = 'auto';
            }, 5000);
        } else {
            alert(data.message || 'Something went wrong');
        }
    })
    .catch(err => {
        console.error('Error:', err);
    });
});

</script>

@endsection