@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">{{ ucfirst($product->name) }}</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' }} <a href="#read" class=""> More Details</a></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>{{ $product->short_description ?? 'High-quality blinds perfect for any room.' }}</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="frame_colour" id="color_{{ $fascia->option_type_id }}" value="{{ $fascia->option_type_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="frame_colour"]').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;
        } 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" 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 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: 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">
        <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->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 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 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>
    </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" }}'
                })
            }
        );

        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';
        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="frame_colour"]: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 = {};
const optionInputs = document.querySelectorAll('#optionsSection input[type="radio"]:checked');
let selectedOptions = {};

optionInputs.forEach(input => {
    const optionName = input.name;          // e.g. "Control Type"
    const optionId   = input.value;         // e.g. 5
    const optionText = input.closest('label')?.innerText.trim() || '';

    selectedOptions[optionName] = {
        id: optionId,
        value: optionText
    };
});
if (Object.keys(selectedOptions).length > 0) {
    customAttributes["Selected Options"] = selectedOptions;
}

		if (installMethod)   customAttributes["Installation Method"] = installMethod;
		if (unit)            customAttributes["Unit"] = unit;
		if (width)           customAttributes["Width"] = width;
		if (height)          customAttributes["Height"] = height;
if (selectedOptions && Object.keys(selectedOptions).length > 0) {
    customAttributes["Selected Options"] = selectedOptions;
}		
		if (brand)           customAttributes["Brand"] = brand;
		if (color)           customAttributes["Color"] = color_name; 
		if (color) customAttributes["Color Id"] = color; 
		if (selected_Model)  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>
// 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);

          //  console.log("Price Response:", data);

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

});


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

    </script>
@endsection