@extends ('layouts.front-layout')
@section('content')
 <style>
      .card-custom {
        border-radius: 10px;
        border: 1px solid #ddd;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      }
      .recommended-badge {
        background: #30bfac;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.9rem;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
      }
      .strength-btn {
        border: 1px solid #ccc;
        border-radius: 0;
        min-width: 80px;
      }
      .strength-btn.active {
        background-color: #30bfac;
        color: #fff;
      }
      .price-list {
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
      }
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        background: #fff;
      }
      .price-row:last-child {
        border-bottom: none;
      }
      .price-row:hover {
        background: #f9f9f9;
      }
      .buy-btn {
        background-color: #f48024;
        border: none;
        padding: 10px 20px;
      }
      .buy-btn:hover {
        background-color: #d96e1e;
      }
    </style>
    <div class="container my-5">
      <!-- Stepper -->
      <div class="stepper">
        <div class="step">
          <div class="circle"></div>
          <small>Consultation</small>
        </div>
        <div class="step">
          <div class="circle active"></div>
          <small>Treatments</small>
        </div>
        <div class="step">
          <div class="circle"></div>
          <small>Delivery</small>
        </div>
        <div class="step">
          <div class="circle"></div>
          <small>Payment</small>
        </div>
      </div>

      <div class="container my-5 shadow-sm p-5 bg-white rounded product_data">
        <h4 class="text-center mb-4">Choose your preferred treatment</h4>

        <div style="transform: none;" class="card card-custom position-relative p-4 my-5">
          <!-- Badge -->
          <div class="recommended-badge">Recommended</div>

{{--            <div class="row g-4">--}}
{{--                @forelse($products as $product)--}}
{{--                    <div class="col-md-8">--}}
{{--                        <h4 class="fw-bold">{{ $product->product_name }}</h4>--}}
{{--                        <p class="text-muted">{{ $product->product_full_name }}</p>--}}

{{--                        <div class="mb-3">--}}
{{--                            <span class="badge bg-success me-1">Most Popular</span>--}}
{{--                            <span class="badge bg-success me-1">Cost-Effective</span>--}}
{{--                            <span class="badge bg-success">Equivalent To Viagra</span>--}}
{{--                        </div>--}}

{{--                        <input type="hidden" class="product_id" value="{{ $product->id }}">--}}
{{--                        <p><strong>About this treatment:</strong></p>--}}
{{--                        {!! $product->product_detail_page_short_description !!}--}}
{{--                    </div>--}}

{{--                    <div class="col-md-4 text-center">--}}
{{--                        <div class="d-flex flex-column align-items-center">--}}
{{--                            <div class="mb-2">--}}
{{--                                <strong>4.8/5</strong>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star-half-stroke text-warning"></i>--}}
{{--                            </div>--}}
{{--                            <p class="small text-muted">Based on 27,133 reviews</p>--}}
{{--                            <img src="{{ $product->productImage('product_main_image') }}"--}}
{{--                                 alt="{{ $product->product_name }}"--}}
{{--                                 class="img-fluid rounded"/>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="container d-flex flex-column align-items-center gap-3 my-3 product_data">--}}
{{--                        <p><em>Which strength is best for me?</em> <i class="fa-regular fa-circle-question"></i></p>--}}

{{--                        <div class="container my-5">--}}

{{--                            --}}{{-- Strength Buttons --}}
{{--                            <div class="mb-3 d-flex flex-column align-items-center">--}}
{{--                                <div class="btn-group" role="group" id="strengthButtons-{{ $product->id }}">--}}
{{--                                    @foreach($product->groupedQuantities as $strength => $quantities)--}}
{{--                                        @php--}}
{{--                                            $variation = $quantities->first()->productVariation;--}}
{{--                                            $isAvailable = $variation && $variation->variation_qty > 0;--}}
{{--                                        @endphp--}}

{{--                                        @if($isAvailable)--}}
{{--                                            <button type="button"--}}
{{--                                                    class="btn strength-btn {{ $loop->first ? 'active' : '' }}"--}}
{{--                                                    data-strength="{{ $strength }}"--}}
{{--                                                    data-product-id="{{ $product->id }}"--}}
{{--                                                    data-product-variation-id="{{ $variation->id }}">--}}
{{--                                                {{ $strength }}--}}
{{--                                            </button>--}}
{{--                                        @endif--}}
{{--                                    @endforeach--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            --}}{{-- Price Groups --}}
{{--                            @foreach($product->groupedQuantities as $strength => $quantities)--}}
{{--                                @php--}}
{{--                                    $variation = $quantities->first()->productVariation;--}}
{{--                                    $isAvailable = $variation && $variation->variation_qty > 0;--}}
{{--                                @endphp--}}

{{--                                @if($isAvailable)--}}
{{--                                    <div class="price-group card p-3 mb-4"--}}
{{--                                         data-strength-group="{{ $strength }}"--}}
{{--                                         data-product-id="{{ $product->id }}"--}}
{{--                                         style="{{ !$loop->first ? 'display:none' : '' }}">--}}

{{--                                        <h5 class="text-center mb-3">{{ $strength }}</h5>--}}

{{--                                        @foreach($quantities->unique('quantity_id') as $qa)--}}
{{--                                            @php--}}
{{--                                                $quantity = $qa->quantity;--}}
{{--                                                $variation = $qa->productVariation;--}}

{{--                                                $packPrice = (float) ($variation->variation_unit_price ?? 0);--}}
{{--                                                $tabletsInPack = (int) ($variation->variation_qty ?? 1);--}}
{{--                                                $selectedTabletCount = (int) ($quantity->quantity_number ?? 1);--}}

{{--                                                // ✅ Safe division (avoid divide by zero)--}}
{{--                                                $perTabletPrice = ($tabletsInPack > 0) ? ($packPrice / $tabletsInPack) : 0;--}}
{{--                                                $totalPrice = $perTabletPrice * $selectedTabletCount;--}}
{{--                                            @endphp--}}

{{--                                            --}}{{-- Agar variation_qty > 0 to hi quantity row dikhao --}}
{{--                                            @if($variation->variation_qty > 0)--}}
{{--                                                <div class="price-row d-flex justify-content-between align-items-center border rounded p-2 my-2">--}}
{{--                                                    <div class="form-check">--}}
{{--                                                        <input--}}
{{--                                                            class="form-check-input price-radio"--}}
{{--                                                            type="radio"--}}
{{--                                                            name="tablets_{{ $product->id }}_{{ $strength }}"--}}
{{--                                                            data-strength="{{ $strength }}"--}}
{{--                                                            data-product-id="{{ $product->id }}"--}}
{{--                                                            data-quantity="{{ $selectedTabletCount }}"--}}
{{--                                                            data-pack-price="{{ $packPrice }}"--}}
{{--                                                            data-tablets-in-pack="{{ $tabletsInPack }}"--}}
{{--                                                            data-quantity-assignment-id="{{ $qa->id }}"--}}
{{--                                                            data-available-stock="{{ $variation->variation_qty }}"--}}
{{--                                                            {{ $loop->first ? 'checked' : '' }}--}}
{{--                                                        >--}}

{{--                                                        <label class="form-check-label">--}}
{{--                                                            {{ $quantity->quantity_name }}--}}
{{--                                                        </label>--}}
{{--                                                    </div>--}}

{{--                                                    <div class="unit-price">--}}
{{--                                                        <strong>Per Unit £{{ number_format($perTabletPrice, 2) }}</strong>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="total-price">--}}
{{--                                                        <strong>Total £{{ number_format($totalPrice, 2) }}</strong>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            @endif--}}
{{--                                        @endforeach--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            @endforeach--}}


{{--                            @php--}}
{{--                                $hasAvailableVariation = false;--}}

{{--                                // Check if product has at least one variation with qty > 0--}}
{{--                                foreach ($product->groupedQuantities as $group) {--}}
{{--                                    foreach ($group as $qa) {--}}
{{--                                        if ($qa->productVariation && $qa->productVariation->variation_qty > 0) {--}}
{{--                                            $hasAvailableVariation = true;--}}
{{--                                            break 2;--}}
{{--                                        }--}}
{{--                                    }--}}
{{--                                }--}}
{{--                            @endphp--}}

{{--                            @if($hasAvailableVariation)--}}
{{--                                <div class="mt-3 text-center">--}}
{{--                                    <a href="#"--}}
{{--                                       class="btn btn-success text-white product_variation_add_to_cart_btn"--}}
{{--                                       data-product-id="{{ $product->id }}"--}}
{{--                                       data-product-variation-id="{{ $firstVariationId ?? '' }}"--}}
{{--                                       data-user-select-quantity="">--}}
{{--                                        Buy Now <span class="selected-total-button"></span>--}}
{{--                                    </a>--}}
{{--                                </div>--}}
{{--                            @else--}}
{{--                                <div class="mt-3 text-center">--}}
{{--                                    <button class="btn btn-secondary text-white" disabled>--}}
{{--                                        Out of Stock--}}
{{--                                    </button>--}}
{{--                                </div>--}}
{{--                            @endif--}}


{{--                        </div>--}}
{{--                    </div>--}}
{{--                @empty--}}
{{--                    <p>No products found.</p>--}}
{{--                @endforelse--}}

{{--            </div>--}}
{{--            <div class="row g-4">--}}
{{--                @forelse($products as $product)--}}
{{--                    <div class="col-md-8">--}}
{{--                        <h4 class="fw-bold">{{ $product->product_name }}</h4>--}}
{{--                        <p class="text-muted">{{ $product->product_full_name }}</p>--}}

{{--                        <div class="mb-3">--}}
{{--                            <span class="badge bg-success me-1">Most Popular</span>--}}
{{--                            <span class="badge bg-success me-1">Cost-Effective</span>--}}
{{--                            <span class="badge bg-success">Equivalent To Viagra</span>--}}
{{--                        </div>--}}

{{--                        <input type="hidden" class="product_id" value="{{ $product->id }}">--}}
{{--                        <p><strong>About this treatment:</strong></p>--}}
{{--                        {!! $product->product_detail_page_short_description !!}--}}
{{--                    </div>--}}

{{--                    <div class="col-md-4 text-center">--}}
{{--                        <div class="d-flex flex-column align-items-center">--}}
{{--                            <div class="mb-2">--}}
{{--                                <strong>4.8/5</strong>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star text-warning"></i>--}}
{{--                                <i class="fa-solid fa-star-half-stroke text-warning"></i>--}}
{{--                            </div>--}}
{{--                            <p class="small text-muted">Based on 27,133 reviews</p>--}}
{{--                            <img src="{{ $product->productImage('product_main_image') }}"--}}
{{--                                 alt="{{ $product->product_name }}"--}}
{{--                                 class="img-fluid rounded"/>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="container d-flex flex-column align-items-center gap-3 my-3 product_data">--}}
{{--                        <p><em>Which strength / brand is best for me?</em> <i class="fa-regular fa-circle-question"></i></p>--}}

{{--                        <div class="container my-5">--}}

{{--                            --}}{{-- Strength or Brand Buttons --}}
{{--                            <div class="mb-3 d-flex flex-column align-items-center">--}}
{{--                                <div class="btn-group" role="group" id="optionButtons-{{ $product->id }}">--}}
{{--                                    @foreach($product->groupedQuantities as $label => $quantities)--}}
{{--                                        @php--}}
{{--                                            $qaSample = $quantities->first();--}}
{{--                                            $variation = $qaSample->productVariation;--}}
{{--                                            $brand = $qaSample->brand;--}}
{{--                                            $isAvailable = ($variation && $variation->variation_qty > 0) || $brand;--}}
{{--                                        @endphp--}}

{{--                                        @if($isAvailable)--}}
{{--                                            <button type="button"--}}
{{--                                                    class="btn strength-btn {{ $loop->first ? 'active' : '' }}"--}}
{{--                                                    data-label="{{ $label }}"--}}
{{--                                                    data-product-id="{{ $product->id }}">--}}
{{--                                                {{ $label }}--}}
{{--                                            </button>--}}
{{--                                        @endif--}}
{{--                                    @endforeach--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            --}}{{-- Price Groups --}}
{{--                            @foreach($product->groupedQuantities as $label => $quantities)--}}
{{--                                @php--}}
{{--                                    $qaSample = $quantities->first();--}}
{{--                                    $variation = $qaSample->productVariation;--}}
{{--                                    $brand = $qaSample->brand;--}}
{{--                                    $isAvailable = ($variation && $variation->variation_qty > 0) || $brand;--}}
{{--                                @endphp--}}

{{--                                @if($isAvailable)--}}
{{--                                    <div class="price-group card p-3 mb-4"--}}
{{--                                         data-label-group="{{ $label }}"--}}
{{--                                         data-product-id="{{ $product->id }}"--}}
{{--                                         style="{{ !$loop->first ? 'display:none' : '' }}">--}}

{{--                                        <h5 class="text-center mb-3">{{ $label }}</h5>--}}

{{--                                        @foreach($quantities->unique('quantity_id') as $qa)--}}
{{--                                            @php--}}
{{--                                                $quantity = $qa->quantity;--}}
{{--                                                $variation = $qa->productVariation;--}}
{{--                                                $brand = $qa->brand;--}}

{{--                                                $packPrice = (float) ($variation->variation_unit_price ?? 0);--}}
{{--                                                $tabletsInPack = (int) ($variation->variation_qty ?? 1);--}}
{{--                                                $selectedTabletCount = (int) ($quantity->quantity_number ?? 1);--}}

{{--                                                $perTabletPrice = ($tabletsInPack > 0) ? ($packPrice / $tabletsInPack) : 0;--}}
{{--                                                $totalPrice = $perTabletPrice * $selectedTabletCount;--}}
{{--                                            @endphp--}}

{{--                                            @if(($variation && $variation->variation_qty > 0) || $brand)--}}
{{--                                                <div class="price-row d-flex justify-content-between align-items-center border rounded p-2 my-2">--}}
{{--                                                    <div class="form-check">--}}
{{--                                                        <input--}}
{{--                                                            class="form-check-input price-radio"--}}
{{--                                                            type="radio"--}}
{{--                                                            name="options_{{ $product->id }}_{{ $label }}"--}}
{{--                                                            data-product-id="{{ $product->id }}"--}}
{{--                                                            data-quantity="{{ $selectedTabletCount }}"--}}
{{--                                                            data-pack-price="{{ $packPrice }}"--}}
{{--                                                            data-quantity-assignment-id="{{ $qa->id }}"--}}
{{--                                                            {{ $loop->first ? 'checked' : '' }}--}}
{{--                                                        >--}}
{{--                                                        <label class="form-check-label">--}}
{{--                                                            {{ $quantity->quantity_name }}--}}
{{--                                                        </label>--}}
{{--                                                    </div>--}}

{{--                                                    <div class="unit-price">--}}
{{--                                                        <strong>£{{ number_format($perTabletPrice, 2) }} per unit</strong>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="total-price">--}}
{{--                                                        <strong>Total £{{ number_format($totalPrice, 2) }}</strong>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            @endif--}}
{{--                                        @endforeach--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            @endforeach--}}

{{--                            --}}{{-- Buy Now / Out of Stock --}}
{{--                            @php--}}
{{--                                $hasAvailable = false;--}}
{{--                                foreach ($product->groupedQuantities as $group) {--}}
{{--                                    foreach ($group as $qa) {--}}
{{--                                        if ($qa->productVariation || $qa->brand) {--}}
{{--                                            $hasAvailable = true;--}}
{{--                                            break 2;--}}
{{--                                        }--}}
{{--                                    }--}}
{{--                                }--}}
{{--                            @endphp--}}

{{--                            @if($hasAvailable)--}}
{{--                                <div class="mt-3 text-center">--}}
{{--                                    <a href="#"--}}
{{--                                       class="btn btn-success text-white product_variation_add_to_cart_btn"--}}
{{--                                       data-product-id="{{ $product->id }}">--}}
{{--                                        Buy Now--}}
{{--                                    </a>--}}
{{--                                </div>--}}
{{--                            @else--}}
{{--                                <div class="mt-3 text-center">--}}
{{--                                    <button class="btn btn-secondary text-white" disabled>--}}
{{--                                        Out of Stock--}}
{{--                                    </button>--}}
{{--                                </div>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @empty--}}
{{--                    <p>No products found.</p>--}}
{{--                @endforelse--}}
{{--            </div>--}}
            <div class="row g-4">
                @forelse($products as $product)
                    {{-- Product Info --}}
                    <div class="col-md-8">
                        <h4 class="fw-bold">{{ $product->product_name }}</h4>
                        <p class="text-muted">{{ $product->product_full_name }}</p>

                        <div class="mb-3">
                            <span class="badge bg-success me-1">Most Popular</span>
                            <span class="badge bg-success me-1">Cost-Effective</span>
                            <span class="badge bg-success">Equivalent To Viagra</span>
                        </div>

                        <input type="hidden" class="product_id" value="{{ $product->id }}">
                        <p><strong>About this treatment:</strong></p>
                        {!! $product->product_detail_page_short_description !!}
                    </div>

                    {{-- Product Image & Rating --}}
                    <div class="col-md-4 text-center">
                        <div class="d-flex flex-column align-items-center">
                            <div class="mb-2">
                                <strong>4.8/5</strong>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star text-warning"></i>
                                <i class="fa-solid fa-star-half-stroke text-warning"></i>
                            </div>
                            <p class="small text-muted">Based on 27,133 reviews</p>
                            <img src="{{ $product->productImage('product_main_image') }}"
                                 alt="{{ $product->product_name }}"
                                 class="img-fluid rounded"/>
                        </div>
                    </div>

                    {{-- Strength / Brand Options --}}
                    <div class="container d-flex flex-column align-items-center gap-3 my-3 product_data">
                        <div class="container my-5">

                            {{-- Top Buttons --}}
                            <div class="mb-3 d-flex flex-column align-items-center">
                                <div class="btn-group" role="group" id="optionButtons-{{ $product->id }}">
                                    @foreach($product->groupedQuantities as $label => $quantities)
                                        @php
                                            $qaSample = $quantities->first();
                                            $variation = $qaSample->productVariation;
                                            $brandOption = $qaSample->brandOption;
                                            $isAvailable = ($variation && $variation->variation_qty > 0) || $brandOption;
                                        @endphp

                                        @if($isAvailable)
                                            <button type="button"
                                                    class="btn strength-btn {{ $loop->first ? 'active' : '' }}"
                                                    data-label="{{ $label }}"
                                                    data-product-id="{{ $product->id }}">
                                                {{ $label }}
                                            </button>
                                        @endif
                                    @endforeach
                                </div>
                            </div>

                            {{-- Price Groups --}}
                            @foreach($product->groupedQuantities as $label => $quantities)
                                @php
                                    $qaSample = $quantities->first();
                                    $variation = $qaSample->productVariation;
                                    $brandOption = $qaSample->brandOption;
                                    $isAvailable = ($variation && $variation->variation_qty > 0) || $brandOption;
                                @endphp

                                @if($isAvailable)
                                    <div class="price-group card p-3 mb-4"
                                         data-label-group="{{ $label }}"
                                         data-product-id="{{ $product->id }}"
                                         style="{{ !$loop->first ? 'display:none' : '' }}">
                                        <h5 class="text-center mb-3">{{ $label }}</h5>

                                        @foreach($quantities as $qa)
                                            @php
                                                $quantity = $qa->quantity;
                                                $variation = $qa->productVariation;
                                                $brandOption = $qa->brandOption;
                                            @endphp

                                            {{-- Variation Price --}}
                                            @if($variation)
                                                @php
                                                    $packPrice = (float) ($variation->variation_unit_price ?? 0);
                                                    $tabletsInPack = (int) ($variation->variation_qty ?? 1);
                                                    $selectedTabletCount = (int) ($quantity->quantity_number ?? 1);
                                                    $perTabletPrice = $packPrice / $tabletsInPack;
                                                    $totalPrice = $perTabletPrice * $selectedTabletCount;
                                                @endphp
                                                <div class="price-row d-flex justify-content-between align-items-center border rounded p-2 my-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input price-radio"
                                                               type="radio"
                                                               name="options_{{ $product->id }}_{{ $label }}"
                                                               data-product-id="{{ $product->id }}"
                                                               data-quantity="{{ $selectedTabletCount }}"
                                                               data-pack-price="{{ $packPrice }}"
                                                               data-product-variation-id="{{ $variation->id }}"
                                                               data-brand-option-id=""
                                                            {{ $loop->first ? 'checked' : '' }}>
                                                        <label class="form-check-label">{{ $quantity->quantity_name }}</label>
                                                    </div>
                                                    <div class="unit-price"><strong>£{{ number_format($perTabletPrice,2) }} per unit</strong></div>
                                                    <div class="total-price"><strong>Total £{{ number_format($totalPrice,2) }}</strong></div>
                                                </div>

                                                {{-- Brand Option Price --}}
                                            @elseif($brandOption)
                                                @php
                                                    $packPrice = (float) ($brandOption->brand_option_per_price ?? 0);
                                                    $tabletsInPack = 1;
                                                    $selectedTabletCount = (int) ($quantity->quantity_number ?? 1);
                                                    $perTabletPrice = $packPrice / $tabletsInPack;
                                                    $totalPrice = $perTabletPrice * $selectedTabletCount;
                                                @endphp
                                                <div class="price-row d-flex justify-content-between align-items-center border rounded p-2 my-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input price-radio"
                                                               type="radio"
                                                               name="options_{{ $product->id }}_{{ $label }}"
                                                               data-product-id="{{ $product->id }}"
                                                               data-quantity="{{ $selectedTabletCount }}"
                                                               data-pack-price="{{ $packPrice }}"
                                                               data-product-variation-id=""
                                                               data-brand-option-id="{{ $brandOption->id }}"
                                                            {{ $loop->first ? 'checked' : '' }}>
                                                        <label class="form-check-label">
                                                            {{ $brandOption->brand_option_name }} ({{ $quantity->quantity_name }})
                                                        </label>
                                                    </div>
                                                    <div class="unit-price"><strong>£{{ number_format($perTabletPrice,2) }} per unit</strong></div>
                                                    <div class="total-price"><strong>Total £{{ number_format($totalPrice,2) }}</strong></div>
                                                </div>
                                            @endif

                                        @endforeach
                                    </div>
                                @endif
                            @endforeach

                            {{-- Buy Now / Out of Stock --}}
                            @php
                                $hasAvailable = false;
                                foreach ($product->groupedQuantities as $group) {
                                    foreach ($group as $qa) {
                                        if ($qa->productVariation || $qa->brandOption) {
                                            $hasAvailable = true;
                                            break 2;
                                        }
                                    }
                                }
                            @endphp

                            @if($hasAvailable)
                                <div class="mt-3 text-center">
                                    <a href="#"
                                       class="btn btn-success text-white product_variation_add_to_cart_btn"
                                       data-product-id="{{ $product->id }}">
                                        Buy Now
                                    </a>
                                </div>
                            @else
                                <div class="mt-3 text-center">
                                    <button class="btn btn-secondary text-white" disabled>
                                        Out of Stock
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <p>No products found.</p>
                @endforelse
            </div>




        </div>
        <button class="btn btn-outline-secondary"> View Other Treatments</button>
      </div>
    </div>


@endsection
@section('script')

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

{{--            // ✅ Strength button click handler--}}
{{--            document.querySelectorAll(".strength-btn").forEach(btn => {--}}
{{--                btn.addEventListener("click", function () {--}}
{{--                    const productId = this.dataset.productId;--}}
{{--                    const strength = this.dataset.strength;--}}
{{--                    const variationId = this.dataset.productVariationId;--}}

{{--                    // Remove active class from all buttons--}}
{{--                    const group = document.querySelector(`#strengthButtons-${productId}`);--}}
{{--                    group.querySelectorAll(".strength-btn").forEach(b => b.classList.remove("active"));--}}
{{--                    this.classList.add("active");--}}

{{--                    // Show only selected group--}}
{{--                    document.querySelectorAll(`[data-product-id="${productId}"][data-strength-group]`).forEach(g => {--}}
{{--                        g.style.display = g.dataset.strengthGroup === strength ? "block" : "none";--}}
{{--                    });--}}

{{--                    // ✅ Update Buy Now button variation id--}}
{{--                    const cartBtn = document.querySelector(`.product_variation_add_to_cart_btn[data-product-id="${productId}"]`);--}}
{{--                    if (cartBtn) {--}}
{{--                        cartBtn.dataset.productVariationId = variationId;--}}
{{--                    }--}}

{{--                    // Trigger update for default checked radio in selected group--}}
{{--                    const activeGroup = document.querySelector(`.price-group[data-product-id="${productId}"][data-strength-group="${strength}"]`);--}}
{{--                    if (activeGroup) {--}}
{{--                        const checkedRadio = activeGroup.querySelector(".price-radio:checked");--}}
{{--                        if (checkedRadio) updateSelection(checkedRadio);--}}
{{--                    }--}}
{{--                });--}}
{{--            });--}}


{{--            // ✅ Quantity radio change handler--}}
{{--            document.querySelectorAll(".price-radio").forEach(radio => {--}}
{{--                radio.addEventListener("change", function () {--}}
{{--                    updateSelection(this);--}}
{{--                });--}}
{{--            });--}}

{{--            // ✅ Main logic (update UI + button data)--}}
{{--            function updateSelection(radio) {--}}
{{--                const selectedQty = parseInt(radio.dataset.quantity) || 1;--}}
{{--                const packPrice = parseFloat(radio.dataset.packPrice) || 0;--}}
{{--                const tabletsInPack = parseInt(radio.dataset.tabletsInPack) || 1;--}}
{{--                const variationId = radio.dataset.quantityAssignmentId || '';--}}
{{--                const productId = radio.dataset.productId;--}}

{{--                const perTabletPrice = tabletsInPack > 0 ? (packPrice / tabletsInPack) : 0;--}}
{{--                const totalPrice = perTabletPrice * selectedQty;--}}

{{--                const group = radio.closest(".price-group");--}}

{{--                group.querySelectorAll(".price-row").forEach(row => {--}}
{{--                    row.style.backgroundColor = "";--}}
{{--                    row.style.borderColor = "#dee2e6";--}}
{{--                });--}}

{{--                const selectedRow = radio.closest(".price-row");--}}
{{--                selectedRow.style.backgroundColor = "#e8f5e8";--}}
{{--                selectedRow.style.borderColor = "#28a745";--}}

{{--                const selectedUnitElem = selectedRow.querySelector(".unit-price");--}}
{{--                const selectedTotalElem = selectedRow.querySelector(".total-price");--}}
{{--                if (selectedUnitElem)--}}
{{--                    selectedUnitElem.innerHTML = `<strong>Per Unit £${perTabletPrice.toFixed(2)}</strong>`;--}}
{{--                if (selectedTotalElem)--}}
{{--                    selectedTotalElem.innerHTML = `<strong>Total £${totalPrice.toFixed(2)}</strong>`;--}}
{{--            }--}}


{{--            // ✅ Auto-select first strength button on page load--}}
{{--            document.querySelectorAll(".btn-group[id^='strengthButtons-']").forEach(group => {--}}
{{--                const firstBtn = group.querySelector(".strength-btn.active");--}}
{{--                if (firstBtn) {--}}
{{--                    const productId = firstBtn.dataset.productId;--}}
{{--                    const variationId = firstBtn.dataset.productVariationId;--}}

{{--                    // 🔹 Set Buy Now button variation id--}}
{{--                    const cartBtn = document.querySelector(`.product_variation_add_to_cart_btn[data-product-id="${productId}"]`);--}}
{{--                    if (cartBtn) {--}}
{{--                        cartBtn.dataset.productVariationId = variationId;--}}
{{--                    }--}}
{{--                }--}}
{{--            });--}}


{{--            // ✅ Initialize default selection for all checked radios--}}
{{--            document.querySelectorAll(".price-radio:checked").forEach(radio => updateSelection(radio));--}}
{{--        });--}}
{{--    </script>--}}



{{--<!-- ✅ AJAX for Buy Now -->--}}

{{--<script>--}}
{{--    $(document).on('click', '.product_variation_add_to_cart_btn', function (e) {--}}
{{--        e.preventDefault();--}}

{{--        var currentURL = window.location.href;--}}
{{--        var baseUrl = currentURL.split('/').slice(0, 5).join('/') + '/';--}}
{{--        let $btn = $(this);--}}
{{--        let $productContainer = $btn.closest('.product_data');--}}

{{--        let product_id = $btn.data('product-id');--}}
{{--        let product_variation_id = $btn.data('product-variation-id');--}}

{{--        // Get selected radio inside active price group only--}}
{{--        let selectedRadio = $productContainer.find('.price-group:visible .price-radio:checked');--}}
{{--        let quantity = selectedRadio.data('quantity') || 1;--}}
{{--        let availableStock = selectedRadio.data('available-stock') || 0;--}}

{{--        console.log("🟢 Product ID:", product_id);--}}
{{--        console.log("🟢 Product Variation ID:", product_variation_id);--}}
{{--        console.log("🟢 Selected Quantity:", quantity);--}}
{{--        console.log("🟢 Available Stock:", availableStock);--}}

{{--        if (!product_variation_id) {--}}
{{--            toastr.error("Please select a strength before buying.");--}}
{{--            return;--}}
{{--        }--}}

{{--        // 🧠 Quantity Check--}}
{{--        if (quantity > availableStock) {--}}
{{--            toastr.error(`Only ${availableStock} units available in stock.`);--}}
{{--            return;--}}
{{--        }--}}

{{--        $.ajaxSetup({--}}
{{--            headers: {--}}
{{--                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')--}}
{{--            }--}}
{{--        });--}}

{{--        $.ajax({--}}
{{--            url: baseUrl + "add/to/cart",--}}
{{--            type: 'POST',--}}
{{--            data: {--}}
{{--                product_id: product_id,--}}
{{--                product_variation_id: product_variation_id,--}}
{{--                user_select_quantity: quantity--}}
{{--            },--}}
{{--            beforeSend: function () {--}}
{{--                $btn.prop('disabled', true).text('Adding...');--}}
{{--            },--}}
{{--            success: function (response) {--}}
{{--                toastr.success(response.status);--}}
{{--                window.location.href = baseUrl + "cart";--}}
{{--            },--}}
{{--            complete: function () {--}}
{{--                $btn.prop('disabled', false).text('Buy Now');--}}
{{--            }--}}
{{--        });--}}
{{--    });--}}

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

        // 🔹 Handle Strength / Brand Option Button Click
        document.querySelectorAll(".strength-btn").forEach(btn => {
            btn.addEventListener("click", function () {
                const productId = this.dataset.productId;
                const label = this.dataset.label; // strength or brand option

                // Remove active class from all buttons in this group
                const group = document.querySelector(`#optionButtons-${productId}`);
                group.querySelectorAll(".strength-btn").forEach(b => b.classList.remove("active"));
                this.classList.add("active");

                // Show only the price group for this label
                document.querySelectorAll(`.price-group[data-product-id="${productId}"]`).forEach(pg => {
                    pg.style.display = pg.dataset.labelGroup === label ? "block" : "none";
                });

                // Auto-select first radio in active group
                const activeGroup = document.querySelector(`.price-group[data-product-id="${productId}"][data-label-group="${label}"]`);
                if (activeGroup) {
                    const firstRadio = activeGroup.querySelector(".price-radio");
                    if (firstRadio) {
                        firstRadio.checked = true;
                        updateSelection(firstRadio);
                    }
                }
            });
        });

        // 🔹 Handle Price Radio Change
        document.querySelectorAll(".price-radio").forEach(radio => {
            radio.addEventListener("change", function () {
                updateSelection(this);
            });
        });

        // 🔹 Update selection function
        function updateSelection(radio) {
            const productId = radio.dataset.productId;
            const quantity = parseInt(radio.dataset.quantity) || 1;
            const packPrice = parseFloat(radio.dataset.packPrice) || 0;
            const tabletsInPack = 1; // always 1 for brand options, can be dynamic for variations
            const variationId = radio.dataset.productVariationId || '';
            const brandOptionId = radio.dataset.brandOptionId || '';

            const perUnitPrice = tabletsInPack > 0 ? packPrice / tabletsInPack : 0;
            const totalPrice = perUnitPrice * quantity;

            // Highlight selected row
            const group = radio.closest(".price-group");
            group.querySelectorAll(".price-row").forEach(row => {
                row.style.backgroundColor = "";
                row.style.borderColor = "#dee2e6";
            });
            const selectedRow = radio.closest(".price-row");
            selectedRow.style.backgroundColor = "#e8f5e8";
            selectedRow.style.borderColor = "#28a745";

            // Update unit and total price
            const unitElem = selectedRow.querySelector(".unit-price");
            const totalElem = selectedRow.querySelector(".total-price");
            if (unitElem) unitElem.innerHTML = `<strong>£${perUnitPrice.toFixed(2)} per unit</strong>`;
            if (totalElem) totalElem.innerHTML = `<strong>Total £${totalPrice.toFixed(2)}</strong>`;

            // Update Buy Now button
            const buyBtn = document.querySelector(`.product_variation_add_to_cart_btn[data-product-id="${productId}"]`);
            if (buyBtn) {
                buyBtn.dataset.productVariationId = variationId;
                buyBtn.dataset.brandOptionId = brandOptionId;
                buyBtn.dataset.quantity = quantity;
                buyBtn.dataset.totalPrice = totalPrice.toFixed(2);
            }
        }

        // 🔹 Auto-select first strength/brand button on page load
        document.querySelectorAll(".btn-group[id^='optionButtons-']").forEach(group => {
            const firstBtn = group.querySelector(".strength-btn.active") || group.querySelector(".strength-btn");
            if (firstBtn) firstBtn.click(); // triggers active state and shows first price group
        });

        // 🔹 Initialize all checked radios
        document.querySelectorAll(".price-radio:checked").forEach(radio => updateSelection(radio));

    });
</script>


<!-- ✅ AJAX for Buy Now -->
<script>
    $(document).on('click', '.product_variation_add_to_cart_btn', function (e) {
        e.preventDefault();
        var currentURL = window.location.href;
            var baseUrl = currentURL.split('/').slice(0, 5).join('/') + '/';
        const $btn = $(this);
        const productId = $btn.data('product-id');
        const productVariationId = $btn.data('product-variation-id') || null;
        const brandOptionId = $btn.data('brand-option-id') || null;
        const quantity = $btn.data('quantity') || 1;

        if (!productVariationId && !brandOptionId) {
            toastr.error("Please select a strength or brand option before buying.");
            return;
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: baseUrl + "add/to/cart",
            type: 'POST',
            data: {
                product_id: productId,
                product_variation_id: productVariationId,
                brand_option_id: brandOptionId,
                user_select_quantity: quantity
            },
            beforeSend: function () {
                $btn.prop('disabled', true).text('Adding...');
            },
            success: function (response) {
                toastr.success(response.status);
                window.location.href = baseUrl + "cart";
            },
            complete: function () {
                $btn.prop('disabled', false).text('Buy Now');
            }
        });
    });

</script>

@endsection