@extends('layout.template')
@section('title','Cusella Home Furnishing | Curtains, Sofas, Wallpapers & Interior Solutions')
@section('content')
<div class="product-details-area pb-100 pt-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="product-details-img-wrap product-details-vertical-wrap" data-aos="fade-up">
                    <div class="product-details-small-img-wrap">
                        <div class="swiper-container product-details-small-img-slider-1 pd-small-img-style">
                            <div class="swiper-wrapper" id="thumbWrapper">
                                @foreach($variants[0]['images'] ?? [] as $img)
                                <div class="swiper-slide">
                                    <div class="product-details-small-img">
                                        <img src="{{ $img['image'] }}" alt="">
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="pd-prev pd-nav-style"> <i class="ti-angle-up"></i></div>
                        <div class="pd-next pd-nav-style"> <i class="ti-angle-down"></i></div>
                    </div>
                    <div class="swiper-container product-details-big-img-slider-1 pd-big-img-style">
                        <div class="swiper-wrapper" id="bigImageWrapper">
                            @foreach($variants[0]['images'] ?? [] as $img)
                            <div class="swiper-slide">
                                <div class="easyzoom-style">
                                    <div class="easyzoom easyzoom--overlay">
                                        <a href="{{ $img['image'] }}">
                                            <img src="{{ $img['image'] }}" alt="">
                                        </a>
                                    </div>
                                    <a class="easyzoom-pop-up img-popup" href="{{ $img['image'] }}">
                                        <i class="pe-7s-search"></i>
                                    </a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                @php


                $mrp = $variants[0]['mrp'] ?? 0;
                $offer = $variants[0]['offer_price'] ?? 0;

                $discount = 0;
                if ($mrp > 0) {
                $discount = round((($mrp - $offer) / $mrp) * 100);
                }
                @endphp


                <div class="product-details-content" data-aos="fade-up">
                    <h2>{{ $product['name'] }}</h2>
                    <div class="product-details-review mb-2 mt-2">
                        <div class="product-rating">
                            @for($i = 0; $i < 5; $i++)
                                <i class="ti-star"></i>
                                @endfor
                        </div>

                        <span>
                            @if(($product['review_count'] ?? 0) > 0)
                            ( {{ $product['review_count'] }} Reviews )
                            @else
                            (No reviews yet)
                            @endif
                        </span>
                    </div>
                    <ul class="mb-3 mt-3 d-flex text-secondary">
                        <li><span class="title">SKU:</span> {{ $variants[0]['sku'] ?? '' }}</li>
                        <li class="mlr"> | </li>
                        <li><span class="title">Category:</span>
                            {{ $product['category']['name'] ?? '' }}
                            {{ $product['subcategory']['name'] ?? '' }}
                        </li>

                    </ul>

                    <div class="product-details-price">
                        <span class="old-price text-muted" id="old_price" style="text-decoration: line-through;">
                            ₹{{ $mrp }}
                        </span>
                        @if($discount > 0)
                        <span class="badge bg-danger" id="discount">
                            {{ $discount }}% OFF
                        </span>
                        @endif
                        <br>
                        <span class="new-price fw-bold" id="price">
                            ₹{{ $offer }}
                        </span>
                        <small>
                            (Incl. of all taxes)</small>

                    </div>


                    @if( $product['category']['id'] !=8)
                    <div class="product-color product-details-color">
                        <span>Color :</span>
                        <ul>
                            @foreach($variants as $key => $variant)
                            <li>
                                <a href="javascript:void(0)"
                                    class="variant-btn {{ $key == 0 ? 'active' : '' }}"
                                    data-images='@json($variant["images"])'
                                    data-price="{{ $variant['offer_price'] }}"
                                    style="background: {{ $variant['color_code'] ?? '#000' }}; width:20px;height:20px;display:inline-block;border-radius:50%;">
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>

                    @endif

                    <div class="product-details-meta mb-3">

                       @if($product['category']['slug'] == 'curtain')
<div class="custom-box mt-3">
    <h5>Select Curtain Model</h5>

    <div class="d-flex gap-2 flex-wrap">
        @foreach($models as $model)
        <div class="model-card" data-id="{{ $model['id'] }}">
            <img src="{{ $model['image'] }}" width="60">
            <p>{{ $model['name'] }}</p>
        </div>
        @endforeach
    </div>

    <div class="row mt-3">
        <div class="col-md-4">
            <label>Width (cm)</label>
            <input type="number" id="curtain_width" class="form-control">
        </div>

        <div class="col-md-4">
            <label>Height (cm)</label>
            <input type="number" id="curtain_height" class="form-control">
        </div>

        <div class="col-md-4">
            <label>Quantity(pieces)</label>
            <input type="number" id="curtain_qty" value="1" class="form-control">
        </div>
    </div>

    <!-- ✅ CALCULATE BUTTON -->
    <div class="mt-3">
        <button class="btn btn-dark w-100" onclick="calculateCurtain()">
            Calculate Curtain Price
        </button>
    </div>

    <!-- ✅ RESULT BOX -->
    <div class="mt-3 p-3" style="background:#f5f1e8;border-radius:10px;display:none;">
        <p>Panels: <span id="curtain_panels">0</span></p>
        <p>Fabric Meter: <span id="curtain_meter">0</span> m</p>
        <p>Fabric Total: ₹<span id="curtain_fabric_total">0</span></p>
        <p>Stitch Total: ₹<span id="curtain_stitch_total">0</span></p>
        <hr>
        <h5>Total: ₹<span id="curtain_total">0</span></h5>
    </div>
</div>

@endif
                        @if($product['category']['slug'] == 'fabric')

                        <div class="custom-box mt-3 p-3" style="border:1px solid #eee;border-radius:12px;">

                            <h5>Fabric Quantity</h5>
                            <small class="text-muted">Enter the meters of fabric you need</small>

                            <!-- INPUT ROW -->
                            <div class="row mt-3 align-items-end">

                                <div class="col-6">
                                    <label class="form-label">Meters</label>
                                    <input type="number" id="fabric_meter" class="form-control" placeholder="Eg: 2.5">
                                </div>

                                <div class="col-6 text-center">
                                    <div style="background:#f5f1e8;padding:12px;border-radius:10px;">
                                        <small class="text-muted">Unit</small>
                                        <h6 class="mb-0">m</h6>
                                    </div>
                                </div>

                            </div>

                            <!-- PRICE BOX -->
                            <div class="row mt-3">

                                <div class="col-6">
                                    <div class="p-2" style="background:#f5f1e8;border-radius:10px;">
                                        <small class="text-muted">Price / meter</small>
                                        <h6>₹<span id="fabric_price_per_meter">{{ $variants[0]['offer_price'] }}</span></h6>
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="p-2" style="background:#f5f1e8;border-radius:10px;">
                                        <small class="text-muted">Total meters</small>
                                        <h6><span id="fabric_total_meter">0</span> m</h6>
                                    </div>
                                </div>

                            </div>

                            <!-- TOTAL -->
                            <div class="mt-3 p-3" style="background:#f5f1e8;border-radius:10px;">
                                <h5 class="mb-0">
                                    Total Price: ₹<span id="fabric_total_price">0</span>
                                </h5>
                            </div>

                        </div>

                        @endif
                        @if($product['category']['slug'] == 'wallpaper')

                        <div class="custom-box mt-2">
                            <h6>Wallpaper Roll Calculator</h6>

                            <div class="row mt-3 mb-3">
                                <div class="col-md-5">

                                    <input type="number" id="wall_width" class="form-control" placeholder="Width(meter)">
                                </div>

                                <div class="col-md-5">

                                    <input type="number" id="wall_height" class="form-control" placeholder="Height(meter)">
                                </div>
                                <div class="col-md-2">
                                    <button class="calculate-btn btn btn-dark " onclick="calculateWallpaper()">
                                        Calculate
                                    </button>

                                </div>
                            </div>

                            <div class="row mt-4 mb-5">
                                <div class="col-md-4">
                                    <label> Roll Required : </label>

                                </div>

                                <div class="col-md-8">
                                    <input type="number" id="rolls_required" value="1" readonly
                                        class="form-control" style="background-color: #f3df9a;width:50%">
                                </div>

                            </div>

                            @endif
                            @if(!empty($mattressConfig))

                            <div>
                                <div class="mb-3">
                                    <h6>Select Category</h6>
                                    @foreach($mattressConfig['categories'] as $cat)
                                    <button class="category-btn btn btn-outline-dark m-1"
                                        data-category="{{ $cat }}">
                                        {{ ucfirst($cat) }}
                                    </button>
                                    @endforeach
                                </div>
                                <div class="mb-3">
                                    <h6>Select Thickness</h6>
                                    @foreach($mattressConfig['thickness'] as $thick)
                                    <button class="thickness-btn btn btn-outline-dark m-1"
                                        data-thickness="{{ $thick }}">
                                        {{ $thick }}
                                    </button>
                                    @endforeach
                                </div>

                                <div class="mb-3">
                                    <h6>Select Unit</h6>
                                    @foreach($mattressConfig['units'] as $unit)
                                    <button class="unit-btn btn btn-outline-dark m-1"
                                        data-unit="{{ $unit }}">
                                        {{ strtoupper($unit) }}
                                    </button>
                                    @endforeach
                                </div>

                                <div class="mb-3">
                                    <h6>Select Size</h6>


                                    <div id="sizeContainer"></div>
                                </div>

                            </div>
                            @endif
                        </div>

                        <div class="product-details-action-wrap ">

                            <div class="single-product-cart btn-hover">
                                <a href="javascript:void(0)"
                                    class="addToCartBtn"  id="addToCartBtn"
                                    data-product="{{ $product['id'] }}"
                                    data-variant="{{ $variants[0]['variant_id'] }}"
                                    data-sample="0">
                                    Add to cart
                                </a>
                            </div>
                           @if(in_array($product['category']['slug'], ['mattress', 'sofa', 'sleep-comfort', 'accessories']))
                            <div class="product-quality">
                                <input class="cart-plus-minus-box input-text qty text" name="qtybutton" value="1">
                            </div>
                            @endif

                            <div class="single-product-wishlist">
                                <a title="Wishlist" href="wishlist.html"><i class="pe-7s-like"></i></a>
                            </div>

                        </div>

                        @if(($product['category']['slug'] == 'wallpaper' || $product['category']['slug'] == 'fabric') && $product['sample_purchase'] == 1)
                        <div class="product-details-action-wrap mt-2">
                            <div class="single-product-cart sample btn-hover">
                                <a href="javascript:void(0)"
                                    class="addToCartBtn"
                                    data-product="{{ $product['id'] }}"
                                    data-variant="{{ $variants[0]['variant_id'] }}"
                                    data-sample="1"
                                    data-price="{{ $product['sample_purchase_rate'] }}">
                                    Buy Sample Product - ₹{{ number_format($product['sample_purchase_rate'], 2) }}
                                </a>
                            </div>
                        </div>
                        @endif



                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="description-review-area pb-85 ">
        <div class="container">
            <div class="description-review-topbar nav" data-aos="fade-up">
                <a class="active" data-bs-toggle="tab" href="#des-details1"> Description </a>
                <a data-bs-toggle="tab" href="#des-details2" class="">Measurement </a>
                <a data-bs-toggle="tab" href="#des-details3" class=""> Material </a>
                <a data-bs-toggle="tab" href="#des-details4" class=""> Reviews </a>
            </div>
            <div class="tab-content mb-75">
                <div id="des-details1" class="tab-pane active">
                    <div class="product-description-content text-center">
                        @if(!empty($product['description']))
                        <p>{{ $product['description'] }}</p>
                        @endif
                        <p>
                            The <strong>{{ $product['name'] }}</strong> from our
                            <strong>{{ $product['category']['name'] ?? '' }}</strong> collection
                            is designed to deliver superior comfort and durability.
                        </p>

                        <p>
                            Ideal for
                            <strong>{{ implode(', ', $product['rooms'] ?? []) }}</strong>,
                            this product ensures quality performance and long-lasting support.
                        </p>

                        @if(!empty($product['warranty_certification']))
                        <p>
                            Comes with <strong>{{ $product['warranty_certification'] }}</strong>
                            for added peace of mind.
                        </p>
                        @endif

                        @if(!empty($product['tags']))
                        <p>
                            Tagged as: <strong>{{ implode(', ', $product['tags']) }}</strong>
                        </p>
                        @endif

                    </div>
                </div>

                <div id="des-details2" class="tab-pane">
                    <div class="specification-wrap table-responsive">

                        @if($product['category']['slug'] == 'mattress' && !empty($mattressConfig))

                        @foreach($mattressConfig['sizes'] as $type => $sizes)
                        <h4 class="mb-2 text-capitalize">{{ $type }} Size</h4>

                        <table class="table mb-4">
                            <thead>
                                <tr>
                                    <th>Variant</th>
                                    <th>Inch</th>
                                    <th>Feet</th>
                                    <th>CM</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($sizes as $size)
                                <tr>
                                    <td>#{{ $size['variant_id'] }}</td>
                                    <td>{{ $size['inch'] }}</td>
                                    <td>{{ $size['ft'] }}</td>
                                    <td>{{ $size['cm'] }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @endforeach

                        <h5>Available Thickness</h5>
                        <p>{{ implode(', ', $mattressConfig['thickness']) }} inches</p>

                        @endif
                        @if($product['category']['slug'] != 'mattress')

                        @php
                        $variant = $variants[0] ?? null;

                        function cmToInch($cm) {
                        return $cm ? round($cm / 2.54, 2) : 0;
                        }
                        @endphp

                        @if(!empty($variant['dimensions']))
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Dimension</th>
                                    <th>CM</th>
                                    <th>Inches</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Length</td>
                                    <td>{{ $variant['dimensions']['length'] ?? 0 }}</td>
                                    <td>{{ cmToInch($variant['dimensions']['length'] ?? 0) }}</td>
                                </tr>
                                <tr>
                                    <td>Width</td>
                                    <td>{{ $variant['dimensions']['width'] ?? 0 }}</td>
                                    <td>{{ cmToInch($variant['dimensions']['width'] ?? 0) }}</td>
                                </tr>
                                <tr>
                                    <td>Height</td>
                                    <td>{{ $variant['dimensions']['height'] ?? 0 }}</td>
                                    <td>{{ cmToInch($variant['dimensions']['height'] ?? 0) }}</td>
                                </tr>
                            </tbody>
                        </table>
                        @else
                        <p>No measurement data available.</p>
                        @endif

                        @endif

                    </div>
                </div>


                <div id="des-details3" class="tab-pane">
                    <div id="des-details3" class="tab-pane">
                        <div class="product-description-content">

                            @if(!empty($product['material']) || !empty($product['pattern']) || !empty($product['features']))

                            <ul>
                                @if(!empty($product['material']))
                                <li><strong>Material:</strong> {{ $product['material'] }}</li>
                                @endif

                                @if(!empty($product['pattern']))
                                <li><strong>Pattern:</strong> {{ $product['pattern'] }}</li>
                                @endif

                                @if(!empty($product['features']))
                                <li><strong>Features:</strong> {{ $product['features'] }}</li>
                                @endif

                                @if(!empty($product['maintenance']))
                                <li><strong>Maintenance:</strong> {{ $product['maintenance'] }}</li>
                                @endif
                            </ul>

                            @else
                            {{-- AUTO GENERATED --}}
                            <p>
                                The <strong>{{ $product['name'] }}</strong> is crafted with high-quality materials
                                to ensure durability and long-lasting performance.
                            </p>

                            <p>
                                Designed for <strong>{{ implode(', ', $product['rooms'] ?? []) }}</strong>,
                                it offers both comfort and style, making it a perfect addition to your space.
                            </p>

                            <p>
                                Built with premium finishing and attention to detail, this product is ideal
                                for everyday use.
                            </p>
                            @endif

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

                <div id="des-details4" class="tab-pane">
                    <div class="review-wrapper">

                        <h3>
                            {{ count($reviews) }} review(s) for {{ $product['name'] }}
                        </h3>

                        @forelse($reviews as $review)
                        <div class="single-review">
                            <div class="review-img">
                                <img src="{{ asset('assets/images/product-details/review-1.png') }}" alt="">
                            </div>

                            <div class="review-content">

                                {{-- Rating Stars --}}
                                <div class="review-rating">
                                    @for($i = 1; $i <= 5; $i++)
                                        @if($i <=$review['rating'])
                                        <i class="ti-star"></i>
                                        @else
                                        <i class="ti-star text-muted"></i>
                                        @endif
                                        @endfor
                                </div>

                                <h5>
                                    <span>{{ $review['user_name'] }}</span>
                                    - {{ $review['date'] }}
                                </h5>

                                <p>{{ $review['review'] }}</p>

                            </div>
                        </div>
                        @empty

                        {{-- NO REVIEWS UI --}}
                        <div class="text-center py-4">
                            <h4>No reviews yet</h4>
                            <p>Be the first to review this product</p>
                        </div>

                        @endforelse

                    </div>

                    {{-- REVIEW FORM --}}
                    <div class="ratting-form-wrapper">
                        <h3>Add a Review</h3>
                        <p>Your email address will not be published. Required fields are marked <span>*</span></p>

                        <form action="#" method="POST">
                            @csrf

                            <input type="hidden" name="product_id" value="{{ $product['id'] }}">

                            <div class="your-rating-wrap mb-3">
                                <span>Your rating</span>
                                <select name="rating" class="form-control">
                                    <option value="">Select Rating</option>
                                    @for($i=5; $i>=1; $i--)
                                    <option value="{{ $i }}">{{ $i }} Star</option>
                                    @endfor
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <input type="text" name="name" placeholder="Name *" required>
                                </div>

                                <div class="col-lg-6">
                                    <input type="email" name="email" placeholder="Email *" required>
                                </div>

                                <div class="col-md-12">
                                    <textarea name="review" placeholder="Your Review *" required></textarea>
                                </div>

                                <div class="col-12 mt-2">
                                    <button type="submit" class="btn btn-primary">
                                        Submit Review
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


            </div>

        </div>
    </div>
    <div class="related-product-area pb-95">
        <div class="container">
            <div class="section-title-2 st-border-center text-center mb-75" data-aos="fade-up">
                <h2>Related Products</h2>
            </div>

            <div class="related-product-active swiper-container">
                <div class="swiper-wrapper">

                    @forelse($recommendations as $item)
                    <div class="swiper-slide">
                        <div class="product-wrap" data-aos="fade-up">

                            {{-- IMAGE --}}
                            <div class="product-img img-zoom mb-25">
                                <a href="{{ route('product', Str::slug($item['name']).'-'.$item['product_id']) }}">
                                    <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}">
                                </a>

                                {{-- OFFER BADGE --}}
                                @if(!empty($item['offer_percent']))
                                <div class="product-badge badge-top badge-right badge-pink">
                                    <span>-{{ $item['offer_percent'] }}%</span>
                                </div>
                                @endif

                                {{-- ACTION BUTTONS --}}
                                <div class="product-action-wrap">
                                    <button class="product-action-btn-1" title="Wishlist">
                                        <i class="pe-7s-like"></i>
                                    </button>

                                    <a href="{{ route('product', Str::slug($item['name']).'-'.$item['product_id']) }}" class="product-action-btn-1" title="Quick View">
                                        <i class="pe-7s-look"></i>
                                    </a>
                                </div>

                                <div class="product-action-2-wrap">
                                    <button class="product-action-btn-2" title="Add To Cart">
                                        <i class="pe-7s-cart"></i> Add to cart
                                    </button>
                                </div>
                            </div>

                            {{-- CONTENT --}}
                            <div class="product-content">
                                <h3>
                                    <a href="{{ route('product', Str::slug($item['name']).'-'.$item['product_id']) }}">
                                        {{ $item['name'] }}
                                    </a>
                                </h3>

                                {{-- PRICE --}}
                                <div class="product-price">
                                    @if(!empty($item['offer_price']))
                                    <span class="old-price">₹{{ $item['price'] }}</span>
                                    <span class="new-price">₹{{ $item['offer_price'] }}</span>
                                    @else
                                    <span>₹{{ $item['price'] }}</span>
                                    @endif
                                </div>

                                {{-- RATING --}}
                                <div class="product-rating">
                                    @for($i=1; $i<=5; $i++)
                                        @if($i <=$item['rating'])
                                        <i class="ti-star"></i>
                                        @else
                                        <i class="ti-star text-muted"></i>
                                        @endif
                                        @endfor
                                        <span>({{ $item['review_count'] }})</span>
                                </div>
                            </div>

                        </div>
                    </div>
                    @empty

                    {{-- EMPTY STATE --}}
                    <div class="text-center w-100">
                        <p>No related products found</p>
                    </div>

                    @endforelse

                </div>
            </div>
        </div>
    </div>
    <script id="cartUrls">
        window.cartUrls = {
            calculate: "{{ url('/cart/calculate') }}",
            add: "{{ url('/cart/add') }}"
        };
    </script>
    <script src="{{asset('assets/js/cart.js')}}"></script>
    @if($product['category']['id'] == 8)
    <script>
        let variants = @json($variants);
        let mattressSizes = @json($mattressConfig['sizes']);



        // ======================== mattress variant ===========================

        let selectedCategory = null;
        let selectedUnit = 'inch'; // default
        let selectedVariant = null;


        // CATEGORY CLICK
        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.addEventListener('click', function() {

                document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                selectedCategory = this.dataset.category;

                // render sizes
                renderSizes();

                // ✅ AUTO SELECT FIRST SIZE OF CATEGORY
                let firstSize = mattressSizes[selectedCategory][0];

                if (firstSize) {
                    selectedVariant = firstSize.variant_id;

                    // update price immediately
                    updatePrice();

                    // auto select radio button after render
                    setTimeout(() => {
                        let firstRadio = document.querySelector('.size-radio');
                        if (firstRadio) firstRadio.checked = true;
                    }, 100);
                }
            });
        });

        let selectedThickness = null;

        document.querySelectorAll('.thickness-btn').forEach(btn => {
            btn.addEventListener('click', function() {

                document.querySelectorAll('.thickness-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                selectedThickness = this.dataset.thickness;

                // optional: if thickness affects price later
                updatePrice();
            });
        });

        // UNIT CLICK (inch / ft / cm)
        document.querySelectorAll('.unit-btn').forEach(btn => {
            btn.addEventListener('click', function() {

                document.querySelectorAll('.unit-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                selectedUnit = this.dataset.unit;

                renderSizes();
            });
        });

        // RENDER SIZE BASED ON CATEGORY + UNIT
        function renderSizes() {

            let container = document.getElementById('sizeContainer');
            container.innerHTML = '';

            if (!selectedCategory) return;

            let sizes = mattressSizes[selectedCategory];

            let html = `<div style="display:flex;flex-wrap:wrap;gap:10px;">`;

            sizes.forEach(size => {

                let label = size[selectedUnit];

                html += `
            <label class="size-box">
                <input type="radio" name="size"
                    class="size-radio"
                    value="${size.variant_id}">
                <span>${label}</span>
            </label>
        `;
            });

            html += `</div>`;

            container.innerHTML = html;

            // RADIO CLICK
            document.querySelectorAll('.size-radio').forEach(radio => {
                radio.addEventListener('change', function() {

                    selectedVariant = this.value;

                    updatePrice();
                });
            });

            // ✅ AUTO SELECT FIRST SIZE AFTER RENDER (PLACE HERE)
            let firstRadio = document.querySelector('.size-radio');
            if (firstRadio) {
                firstRadio.checked = true;

                // also update selectedVariant + price
                selectedVariant = firstRadio.value;
                updatePrice();
            }
        }

        // UPDATE PRICE
        function updatePrice() {

            if (!selectedVariant) return;

            let variant = variants.find(v => v.variant_id == selectedVariant);

            if (!variant) return;

            document.getElementById('price').innerText = '₹' + variant.offer_price;
        }
        // AUTO INIT EVERYTHING

        // 1. select category
        document.querySelector('.category-btn')?.click();

        // 2. select unit = inch
        document.querySelector('[data-unit="inch"]')?.classList.add('active');
        selectedUnit = 'inch';

        // 3. select thickness from first variant
        let firstVariant = variants[0];
        if (firstVariant?.dimensions?.height) {

            let btn = document.querySelector(`.thickness-btn[data-thickness="${firstVariant.dimensions.height}"]`);

            if (btn) {
                btn.classList.add('active');
                selectedThickness = firstVariant.dimensions.height;
            }
        }
    </script>
    @endif


    <!-- <script>
        const ROLL_COVERAGE = 5; // 1 roll = 5 sq.m (you can change)

        function calculateRoll() {

            let width = document.getElementById('wall_width').value;
            let height = document.getElementById('wall_height').value;

            if (width && height) {

                let area = width * height;
                let rolls = Math.ceil(area / ROLL_COVERAGE);

                document.getElementById('rolls_required').value = rolls;
            }
        }

        document.getElementById('wall_width')?.addEventListener('input', calculateRoll);
        document.getElementById('wall_height')?.addEventListener('input', calculateRoll);
    </script> -->

    @endsection