@extends('layouts.app')

@section('content')

<!-- Swiper JS -->

<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"><span>{{ ucfirst($product->name) }}</span></li>
        </ol>
    </div>
</nav>

<div class="prod_detai_h_sticky_pr">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="prod_detai_h_stick_titl">
<h3>{{ ucfirst($product->name) }}</h3>
<p>{{ $product->brand->name ?? 'Blinds' }}</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="prod_detai_h_stick_price">
<span class="text-gray-900 font-semibold" id="newPrice">£{{$product->start_from}}</span>
</div>
</div> 
</div>    
</div>            
</div>

@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-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
                        <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">
                                           	@if($product->primary_image)
                                            <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>
											@endif
												@if($product->secondary_image)
                                            <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>
											@endif
												@if($product->secondary_image_2)
                                            <div class="swiper-slide stagger-item">
                                                <div class="item">
                                                    <img class="lazyload"
                                                        data-src="{{ asset('storage/' . $product->secondary_image_2) }}"
                                                        src="{{ asset('storage/' . $product->secondary_image_2) }}"
                                                        alt="{{ $product->name }}">
                                                </div>
                                            </div>
											@endif
                                            <!--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">
									@if($product->primary_image)
											<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>
									@endif
									@if($product->secondary_image)
											<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>
											@endif
									@if($product->secondary_image_2)   
											<div class="swiper-slide">
                                                <a href="{{ asset('storage/' . $product->secondary_image_2) }}" 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_2) }}"
                                                        data-src="{{ asset('storage/' . $product->secondary_image_2) }}"
                                                        src="{{ asset('storage/' . $product->secondary_image_2) }}"
                                                        alt="{{ $product->name }}">
                                                </a>
                                            </div>
											@endif
                                            <!--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>
									

            {{-- Display individual tag --}}
                                    <div class="product_badge product_de_tag"> @foreach($product->tags as $tag)<span>{{ $tag->name }}</span>    @endforeach</div>

    
                                </div>
                            </div>
                            
                        </div>
						
                    </div>
                    <!-- /Product Images -->

                    <!-- Product Info -->
                    <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
                        <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">
                                    <h3 class="product-name">{{ ucfirst($product->name) }}</h3>
									<span class="brand-product">{{ $product->brand->name ?? 'Blinds' }} </span>
									<!-- PRICE SECTION -->
                                     <div class="text-md price_details_prod">
											<span class="text-gray-900 font-semibold" id="newPrice">£{{$product->start_from}}</span>
										
										</div>
									<!--<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 style="display:none;" 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 class="product-description">
									<p>@php
    $desc = $product->short_description ?? 'High-quality blinds perfect for any room.';
@endphp

@if(strlen($desc) > 120)
    {{ substr($desc, 0, 120) }}... 
    <a href="#read">Read More</a>
@else
    {{ $desc }}
@endif</p>
                                </div>
                                </div>

                                
								{{-- Check if the product has any tags assigned --}}
@if($product->tags->isNotEmpty())

    {{-- Wrapper for product tags --}}
    <div class="product-tags" style="display:none;">

        {{-- Loop through each tag assigned to the product --}}
        @foreach($product->tags as $tag)

            {{-- Display individual tag --}}
            <span class="product-tag">
                {{ $tag->name }}
            </span>

        @endforeach

    </div>
@endif
@if($product->category_id !== 49)
       <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="recess" checked>
        <span>Recess</span>
      </label>
      <label class="custom-radio">
        <input type="radio" name="installMethod" id="exact">
        <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="cm" checked>
      <span>Centimeters</span>
    </label>
    <label class="custom-radio">
      <input type="radio" name="unit" id="mm">
      <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>
 @else
	 <div class="product-config">

    <div class="Measuring_Guides_box">
         <div class="config-header"> 
		<h6>Measuring Guides</h6>
        </div>
        <div class="Measuring_Guides_box_list">
		@if($systemTypes )
			@foreach($systemTypes as $s)
        <label class="Measuring_Guides_radio">
            <input type="radio" name="Measuring_Guides" value="{{$s->system_type}}">
            <span>{{$s->system_type}}</span>
        </label>
		@endforeach
		@endif
        
    </div>

    <!-- Frame Colour -->
    <div class="fame_color_box">
        <h6>Frame colour</h6>
        <div class="color_options">
				@if($option )
				@foreach ($option['Fascia'] ?? [] as $fascia)
			
				<label class="color_card_radio text-center">
					<span class="color_swatch {{ $fascia->value }}"></span>
					<input type="radio" name="Fascia" id="color_{{ $fascia->option_type_id }}" value="{{ $fascia->id }}">
					<label for="color_{{ $fascia->option_type_id }}" class="color-name">{{ $fascia->value }}</label>
				</label>
				@endforeach
		@endif
        </div>
    </div>

    <!-- Model / Kit -->
    <div class="details_Model_box" style="display:none">
        <h6>Model</h6>
        <select class="form-select form-control" id= "kits_list">
            <option value="">-- Please Select --</option>
            <option value="kit-1">Kit 1</option>
            <option value="kit-2">Kit 2</option>
            <option value="kit-3">Kit 3</option>
        </select>
    </div>
	<button id="getPriceBtn1" class="btn-primary disabled " style="display:none;">Out of Stock</button>

</div>

 @endif

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

<script>
$(document).ready(function () {
    $('input[name="Measuring_Guides"]').on('change', function () {
        // sab label se active hatao
        $('.Measuring_Guides_radio').removeClass('active');

        // clicked radio ke parent label me active add karo
        $(this).parent('.Measuring_Guides_radio').addClass('active');
    });
});
</script>
<script>
$(document).ready(function () {
    $('input[name="Fascia"]').on('change', function () {
        // sab label se active hatao
        $('.color_card_radio').removeClass('active');

        // clicked radio ke parent label me active add karo
        $(this).parent('.color_card_radio').addClass('active');
    });
});

document.querySelectorAll('input[name="Measuring_Guides"]').forEach(radio => {
    radio.addEventListener('change', function () {

        // Show box

        const brand = this.value;
		const priceGroup = "{{$product->price_group}}";

        fetch("{{ route('kits.by.brand') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": document
                    .querySelector('meta[name="csrf-token"]')
                    .getAttribute('content'),
            },
            body: JSON.stringify({  brand: brand,
				price_group: priceGroup
		 })
        })
        .then(res => res.json())
        .then(data => {

            let html = '';

            if (data.length) {
                data.forEach(kit => {
                    html += '<option value="' + kit.id + '">' + kit.code + '</option>';
					
                });
				document.getElementById('kits_list').innerHTML = html;
				document.querySelector('.details_Model_box').style.display = 'block';
            } else {
                html = '<p>No kits available</p>';
				
				document.getElementById('getPriceBtn1').style.display = 'block';
            }

            

        })
        .catch(err => console.error(err));
    });
});
document.getElementById('kits_list').addEventListener('change', function () {
    const buyButtonSection = document.getElementById('buyButtonSection');

    const kitId = this.value;

    // Reset price if no selection

    // Optional loader
    //document.getElementById('kit_price').value = 'Loading...';

    fetch("{{ route('kits.price') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document
                .querySelector('meta[name="csrf-token"]')
                .getAttribute('content'),
        },
        body: JSON.stringify({
            kit_id: kitId
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data && data.price !== null) {
			        //buyButtonSection.style.display = 'block';
					

			console.log("Price is "+data.price);
            document.querySelector('.p_price').innerText = data.price;
			const addToCartBtn   = document.getElementById('addToCartBtn');
			addToCartBtn.style.pointerEvents = 'auto';
			addToCartBtn.style.opacity = '1';
			enableCart();
        } else {
            document.querySelector('.p_price').innerText = 'Price not available';
        }
    })
    .catch(error => {
        console.error(error);
    });
});

</script>
                      
                                
<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('recess');
const exactOption = document.getElementById('exact');

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

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

function updateInstallValues() {

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

    const isCm    = document.getElementById('cm').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;
}

document.addEventListener('click', function (e) {
    if (e.target && e.target.id === 'getPriceBtn') {

        const installSelected = document.querySelector('input[name="installMethod"]:checked');
        const width = widthInput?.value.trim();
        const height = heightInput?.value.trim();

        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';
            e.target.innerText = "Options Shown Below";
            e.target.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">
    <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 flex-grow-1"
           style="pointer-events:none;opacity:.5;">
            <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 d-none">
					 <div class="col-lg-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <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 <br>entire order.</div>
                    </div>
                </div>
					 <div class="col-lg-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <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 col-lg-3 col-md-6 col-sm-6 col-12">
                    <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. <br>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-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;
                }
                
        
        
          .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 #7CCABA;
          }
        
          .accordion-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.12);
          }
       
          .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 #7CCABA;
            transition: max-height 0.4s ease, padding 0.4s ease;
            line-height: 1.7;
          }
        
          .accordion-item.active .accordion-content {
            max-height: initial;
            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">
        <div id="featureSlider">
            <div class="carousel_inner">

                <!-- SLIDE 1 -->
              
					
					  @if(isset($homeSections['features']) && $homeSections['features']->isNotEmpty())
    @php
        // ✅ Take ONLY the first feature section (lowest sort_order)
        $featureSection = $homeSections['features']->last();

        // ✅ Take only 4 feature items from that section
        $featureItems = collect($featureSection->content['items'] ?? [])
                            ->take(4);
    @endphp

    <div class="row">
        @foreach($featureItems as $item)
<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="bi bi-{{ $item['icon'] }}"></i>
                    </div>

                    <h5 class="unique-feature-title">
                        {{ $item['title'] }}
                    </h5>

                    <p class="unique-feature-text">
                        {{ $item['subtitle'] ?? '' }}
                    </p>

                </div>
            </div>
        @endforeach
    </div>
@endif

                   

                <!-- SLIDE 2 -->
               

            </div>
        </div>

    </div>
</section>



                  <style>
  .price-wrapper {display:flex;align-items:center;gap:14px;margin:20px 0;}
.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;}


.options-group {display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.custom-radio {display:flex;align-items:center;font-size:13px;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;}


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

.pill-container {display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.pill-option {padding: 7px 12px;border:1px solid #ccc;border-radius:0px;cursor:pointer;font-size:13px;transition:.2s;user-select:none;}
.pill-option input {display:none;}
.pill-option.selected {border-color:#33328f;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: 16px;
}

.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;
}

/***********************
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;
}



.cushion-section {
padding: 40px 20px;
animation: fadeIn 1s ease-in-out;
}


.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;
}


.section-title {
font-size: 34px;
font-weight: 800;
color: #222;
text-align: center;
margin-bottom: 30px;
animation: fadeIn 0.6s ease;
}

.accordion-item:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.accordion-header {
padding: 22px 25px;
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
color: #1e1e1e;
background: #fff;
}

.arrow-icon {
transition: transform 0.35s ease;
font-size: 22px;
}

.accordion-item.active .arrow-icon {
transform: rotate(180deg);
}


@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="custom-title main_heading_default text-center">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->short_description}}
    </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 top_picks_for_you_sec">
   <h4 class="custom-title main_heading_default text-center">Top Picks for You</h4>
  <div class="row g-4">
   
      <div class="hover-sw-nav  wow fadeInUp">
   <div dir="ltr" class="swiper tf-swiper " data-swiper='{
         "slidesPerView": 2,
         "spaceBetween": 12,
         "speed": 800,
         "observer": true,
         "observeParents": true,
         "slidesPerGroup": 1,
         "navigation": {
        "nextEl": ".nav-next-seller",
        "prevEl": ".nav-prev-seller"
         },
         "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 d-flex d-xl-none sw-pagination-tes justify-content-center"></span>
        </div>
      <div class="d-xl-flex swiper-button-next nav-swiper nav-next-seller"></div>
     <div class="d-xl-flex swiper-button-prev nav-swiper nav-prev-seller"></div>
      </div>
    </div>
</section>
<section class="product_detail_testimon" style="background: #eef1f7;">
   <div class="container">
      <div class="">
         <h4 class="custom-title main_heading_default text-center">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.addEventListener('click', async function (e) {
    if (!e.target || e.target.id !== 'getPriceBtn') return;

    const installSelected = document.querySelector('input[name="installMethod"]:checked');
    const widthInput = document.getElementById('widthInput');
    const heightInput = document.getElementById('heightInput');
    const buyButtonSection = document.getElementById('buyButtonSection');

    const width  = widthInput?.value.trim();
    const height = heightInput?.value.trim();
    const unit   = document.getElementById('cm')?.checked ? 'cm' : 'mm';

    if (!installSelected) {
        showError("Please select Installation Method.");
        return;
    }

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

    try {
        const response = await fetch(
            'https://famepixelsoft.site/decora/public/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" }}',
					product_id: '{{ $product->id  }}'
                })
            }
        );

        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
        document.querySelector('.p_price').innerText =
            parseFloat(data.price).toFixed(2);

        // ✅ Show Add to Cart
      //  buyButtonSection.style.display = 'block';
		enableCart();

        e.target.innerText = "Select Options Below";

    } catch (error) {
        showError("Error fetching price. Please try again.");
        console.error(error);
    }
}); */
document.addEventListener('change', function (e) {
    if (e.target.id === 'kits_list') {
        console.log('Selected Model:', e.target.value);
    }
});


document.getElementById('addToCartBtn').addEventListener('click', function () {
	//alert('Adding to cart ');
    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 || '';
	const brand =
    document.querySelector('input[name="Measuring_Guides"]:checked')?.value || '';

//const color =
  //  document.querySelector('input[name="frame_colour"]:checked')?.value || '';
    const colorInput = document.querySelector('input[name="Fascia"]:checked');

let color = '';
let color_name = '';

if (colorInput) {
    color = colorInput.value; // id / value
    const label = document.querySelector(`label[for="${colorInput.id}"]`);
    color_name = label ? label.textContent.trim() : '';
}

  //  return color_name ? color_name.textContent.trim() : '';

	
	const selected_Model_id = document.getElementById('kits_list')?.value || '';
	const select = document.getElementById('kits_list');
const selected_Model = select
    ? select.options[select.selectedIndex]?.text
    : '';


console.log('Brand '+brand+' color '+color+' Kit '+selected_Model);
    // Capture all selected accordion options

  // Prepare data (ONLY include values if they exist)
	const customAttributes = {};
let selectedOptions = {};

/* -------------------------
   1. Radio options
------------------------- */
document
  .querySelectorAll('#optionsSection input[type="radio"]:checked')
  .forEach(input => {
      const optionName = input.name;
      const optionId   = input.value;
      const optionText = input.closest('label')?.innerText.trim() || '';

      selectedOptions[optionName] = {
          id: optionId,
          value: optionText
      };
  });


/* -------------------------
   2. Add color (Fascia)
------------------------- */
if (color) {
    selectedOptions['Fascia'] = {
        id: color,
        value: color_name
    };
}


/* -------------------------
   3. Add model (VeluxCode_)
------------------------- */
if (selected_Model) {
    selectedOptions['VeluxCode_'] = { // ❌ removed space
        id: '',
        value: selected_Model
    };
}


/* -------------------------
   4. Now assign once
------------------------- */
if (Object.keys(selectedOptions).length > 0) {
    customAttributes["Selected Options"] = selectedOptions;
}


/* -------------------------
   5. Other attributes
------------------------- */
if (installMethod) customAttributes["Installation Method"] = installMethod;
if (unit)          customAttributes["Unit"] = unit;
if (width)         customAttributes["Width"] = width;
if (height)        customAttributes["Height"] = height;
if (brand)         customAttributes["Brand"] = brand;

		//customAttributes["Selected Model"] = selected_Model;
		//if (selected_Model_id)  customAttributes["Selected Model Id"] = selected_Model_id;
		
    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';

			// Reload current page after 5 seconds
			location.reload();
			}, 2000);

        } else {
            alert(data.message || 'Something went wrong');
        }
    })
    .catch(err => {
        console.error('Error:', err);
    });
});

</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const addToCartBtn   = document.getElementById('addToCartBtn');
    const buyButtonSection = document.getElementById('buyButtonSection');
    const widthInput     = document.getElementById('widthInput');
    const heightInput    = document.getElementById('heightInput');
    const optionsSection = document.getElementById('optionsSection');
    const getPriceBtn    = document.getElementById('getPriceBtn');


    /*
    |--------------------------------------------------------------------------
    | Disable Cart
    |--------------------------------------------------------------------------
    */
    function disableCart() {
        addToCartBtn.style.pointerEvents = 'none';
        addToCartBtn.style.opacity = '.5';
    }

    /*
    |--------------------------------------------------------------------------
    | Enable Cart
    |--------------------------------------------------------------------------
    */
    function enableCart() {
        addToCartBtn.style.pointerEvents = 'auto';
        addToCartBtn.style.opacity = '1';
    }

    /*
    |--------------------------------------------------------------------------
    | RESET EVERYTHING (when dimensions change)
    |--------------------------------------------------------------------------
    */
    function resetPricing() {

        disableCart();

        // hide options
        optionsSection.style.display = 'none';

        // reset button text
        getPriceBtn.innerText = 'Get Instant Price';

        // optionally reset price display
        document.querySelector('.p_price').innerText =
            '{{ number_format($product->sale_price ?? $product->price, 2) }}';
    }


    // disable on load
    disableCart();


    /*
    |--------------------------------------------------------------------------
    | If width/height changes → reset
    |--------------------------------------------------------------------------
    */
    [widthInput, heightInput].forEach(input => {
        if (!input) return;

        input.addEventListener('input', resetPricing);
    });


    /*
    |--------------------------------------------------------------------------
    | GET PRICE CLICK
    |--------------------------------------------------------------------------
    */
    getPriceBtn.addEventListener('click', async function () {

        const width  = widthInput.value.trim();
        const height = heightInput.value.trim();
        const unit   = document.getElementById('cm').checked ? 'cm' : 'mm';

        if (!width || !height) return;

        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" }}',
                    product_id: '{{ $product->id }}'
                })
            });

            const data = await response.json();

            if (data.success) {

                // update price
                document.querySelector('.p_price').innerText =
                    parseFloat(data.price).toFixed(2);

                // show options
                optionsSection.style.display = 'block';

                // change button text
                getPriceBtn.innerText = 'Options Shown Below';

                // enable cart
                enableCart();

            } else {
				showError(data.message || "Price not found for the selected dimensions.");
				disableCart();
				 resetPricing();
				return;
               
				
            }

        } catch (err) {
            console.error(err);
            resetPricing();
        }
    });

});
</script>

<script>
// Allow clicking label to trigger radio
$(document).ready(function () {

    console.log("jQuery Loaded:", typeof $); // should log "function"

    $(document).on('click', '.pill-option', async function () {

       // console.log("Pill clicked:", this);

        // Find radio and select it
        const radio = $(this).find('input[type="radio"]');

        if (!radio.length) {
            console.error("No radio found inside:", this);
            return;
        }

        radio.prop("checked", true).trigger("change");

     //   console.log("Radio selected:", radio.val());

        let fullText = $(this).text().trim();

        // extract text after first hyphen
        let systemCode = fullText.split("–")[1]?.trim() || fullText.split("-")[1]?.trim() || "";


		if(systemCode == ''){
			  systemCode = fullText.split(" ")[0]?.trim() || fullText.split(" ")[0]?.trim() || "";
		}
       // console.log("SYSTEM TYPE:", systemCode);
        const width  = $("#widthInput").val()?.trim();
        const height = $("#heightInput").val()?.trim();
        const unit   = $("#cm").is(":checked") ? "cm" : "mm";

        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" }}',
                    system_type: systemCode
                })
            });
			//console.log("Response is "+response);

            const data = await response.json();
			document.querySelector('.p_price').innerText = parseFloat(data.price).toFixed(2);
			const addToCartBtn   = document.getElementById('addToCartBtn');
			addToCartBtn.style.pointerEvents = 'auto';
			addToCartBtn.style.opacity = '1';
			//enableCart();
          //  console.log("Price Response:", data);

        } catch (error) {
            console.error("AJAX Error:", error);
        }
    });

});


</script>

    <script>
    new Swiper('.swiper', {
  autoHeight: true,
});

    </script>
@endsection