{{-- resources/views/product-details.blade.php --}}
@extends('layouts.master')

@section('title', ($midCategory->name ?? 'Products') . ' | Trew India Pvt Ltd')

@section('content')
    <style>
        /* existing CSS (trimmed for brevity) */
        .shop-single {
            background: #f9fcff;
        }

        .shop-single-gallery {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
            padding: 18px;
            transition: all .25s;
        }

        .shop-single-gallery:hover {
            transform: scale(1.005);
        }

        .main-image-wrap {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            display: block;
            background: #fff;
            aspect-ratio: 3/2;
            max-height: 640px;
            position: relative;
        }

        .main-image-wrap img {
            width: 100%;
            height: 400px;
            object-fit: contain;
            display: block;
            transition: opacity .28s ease, transform .28s ease;
            opacity: 1;
            background: linear-gradient(180deg, #fff, #f8fafb);
        }

        .main-image-wrap img.fade-out {
            opacity: 0;
            transform: scale(.995);
        }

        .shop-single-info {
            background: #fff;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
        }

        .shop-single-title {
            font-size: 28px;
            font-weight: 700;
            color: #1d3557;
            margin-bottom: 6px;
        }

        .theme-btn-liter,
        .fragrance {
            background: #fff;
            border: 2px solid #f27127;
            color: #333;
            padding: 8px 18px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 14px;
            margin: 6px;
            transition: all .18s;
        }

        .theme-btn-liter:hover,
        .fragrance:hover {
            background: #f27127;
            color: #fff;
            transform: translateY(-3px);
        }

        .selected {
            background: #f27127 !important;
            color: #fff !important;
        }

        .theme-btn {
            background: linear-gradient(90deg, #f27127, #f48f45);
            color: #fff;
            border-radius: 50px;
            padding: 10px 22px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(242, 113, 39, .3);
            display: inline-block;
        }

        .shop-single-details {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
            margin-top: 50px;
            padding: 25px;
        }

        #fragrance-thumbs {
            margin-top: 14px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
        }

        .frag-thumb {
            cursor: pointer;
            width: 84px;
            text-align: center;
        }

        .frag-thumb .thumb-img {
            width: 84px;
            height: 84px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
            display: inline-block;
            background: #fff;
        }

        .frag-thumb .thumb-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .frag-caption {
            font-size: 12px;
            margin-top: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 84px;
        }

        .frag-thumb.thumb-active .thumb-img {
            outline: 3px solid #f27127;
            border-radius: 10px;
        }

        .price {
            font-size: 22px;
            color: #f27127;
            font-weight: 700;
        }

        .old-price {
            text-decoration: line-through;
            color: #999;
            margin-left: 10px;
            font-size: 16px;
        }

        @media (max-width:991px) {
            .main-image-wrap {
                aspect-ratio: 2/3;
                max-height: 420px;
            }

            .frag-thumb {
                width: 64px;
            }

            .frag-thumb .thumb-img {
                width: 64px;
                height: 64px;
            }

            .frag-caption {
                max-width: 64px;
                font-size: 11px;
            }
        }
    </style>

    <main class="main">
        <div class="site-breadcrumb">
            <div class="site-breadcrumb-bg" style="background:#d8f5fd"></div>
            <div class="container">
                <div class="site-breadcrumb-wrap">
                    <h4 class="breadcrumb-title">Product Details</h4>
                    <ul class="breadcrumb-menu">
                        <li><a href="{{ url('/') }}"><i class="far fa-home"></i> Home</a></li>
                        <li class="active">{{ $midCategory->name ?? 'Products' }}</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="shop-single py-90">
            <div class="container">
                <div class="row g-4 align-items-start">
                    <!-- LEFT: main image + fragrance-only thumbnails -->
                    <div class="col-lg-6">
                        <div class="shop-single-gallery text-center" aria-labelledby="product-name">
                            <div class="main-image-wrap" id="main-image-wrap" aria-live="polite">
                                <img id="main-product-img" src="{{ asset('assets/img/product/fresh.png') }}"
                                    alt="Product main image" title="Main product image"
                                    data-large="{{ asset('assets/img/product/fresh.png') }}" loading="lazy">
                            </div>

                            <!-- Wrapper allows hiding when no fragrance images -->
                            <div id="fragrance-thumbs-wrap">
                                <div id="fragrance-thumbs" role="list" aria-label="Fragrance images"></div>
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT: info, volume and fragrance name buttons -->
                    <div class="col-lg-6 position-relative">
                        <div class="shop-single-info">
                            <h4 class="shop-single-title" id="product-name">Product Name</h4>

                            <div class="shop-single-sortinfo mt-3" id="product-meta"></div>

                            <div class="mb-4 mt-4">
                                <h6>Choose Product Volume:</h6>
                                <div id="volumes-container" role="radiogroup" aria-label="Product volumes"></div>
                            </div>

                            <!-- Fragrance block (can be hidden if none) -->
                            <div id="fragrance-block">
                                <h6>Choose Fragrance:</h6>
                                <div id="fragrances-container" role="listbox" aria-label="Fragrance options"></div>
                            </div>

                            <div class="proceed-btn-wrap text-end mt-4">
                                <a href="{{ route('products.checkout') }}" id="proceed-btn" class="theme-btn"
                                    aria-label="Proceed to checkout">
                                    Proceed <i class="fa-solid fa-arrow-right ms-2"></i>
                                </a>
                            </div>

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

                <!-- TABS -->
                <div class="shop-single-details mt-5">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <button class="nav-link active" id="tab-desc" data-bs-toggle="tab" data-bs-target="#desc"
                                type="button">Description</button>
                            <button class="nav-link" id="tab-safety" data-bs-toggle="tab" data-bs-target="#safety"
                                type="button">Safety Info</button>
                        </div>
                    </nav>

                    <div class="tab-content mt-3">
                        <div class="tab-pane fade show active" id="desc">
                            <div id="fragrance-description" aria-live="polite"></div>

                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <div class="shop-single-list">
                                        <h5 class="title">Key Features</h5>
                                        <ul id="key-features"></ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="shop-single-list">
                                        <h5 class="title">Specifications</h5>
                                        <ul>
                                            <li><span>Volume:</span> <span id="selected-volume">-</span></li>
                                            <li><span>Fragrance:</span> <span id="selected-fragrance">-</span></li>
                                            <li><span>Origin:</span> <span id="spec-origin">India</span></li>
                                            <li><span>Manufacturer:</span> <span id="spec-manufacturer">Trew India Pvt
                                                    Ltd</span></li>
                                            <li><span>Ingredients:</span> <span id="spec-ingredients">Aqua, Surfactants,
                                                    Fragrance Oils, Preservatives</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="safety">
                            <div class="shop-single-list">
                                <h5 class="title">Safety Instructions</h5>
                                <ul id="safety-list">
                                    {{-- will be filled by JS from fragrance or product safety info --}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </main>

    <script>
        // Server-provided product JSON (emit null if not set)
        const PRODUCT_JSON = @json($product ?? null);
        const product = PRODUCT_JSON || {};
        const MID_CATEGORY_NAME = @json($midCategory->name ?? null);
        const CHECKOUT_ROUTE = @json(route('products.checkout'));
        const FALLBACK_IMG = @json(asset('assets/img/product/fresh.png'));

        // ---------- helpers ----------
        // Convert various stored image paths to a public URL:
        // - full URLs (http/https) returned as-is
        // - root-relative '/...' returned as-is
        // - storage path 'products/abc.jpg' -> '/storage/products/abc.jpg'
        function toPublicUrl(path) {
            if (!path) return '';
            path = String(path).trim();
            if (!path) return '';
            if (/^https?:\/\//i.test(path)) return path;
            if (path.startsWith('/')) return path;
            return '/storage/' + path.replace(/^\/+/, '');
        }

        function fallbackImg() {
            try {
                return FALLBACK_IMG || '/assets/img/product/fresh.png';
            } catch (e) {
                return '/assets/img/product/fresh.png';
            }
        }

        function preloadImage(src) {
            return new Promise((resolve) => {
                if (!src) return resolve(null);
                const img = new Image();
                img.src = src;
                img.onload = () => resolve(img);
                img.onerror = () => resolve(null);
            });
        }

        async function swapMainImageTo(src, {
            alt = '',
            title = '',
            dataLarge = ''
        } = {}) {
            const imgEl = document.getElementById('main-product-img');
            if (!imgEl) return;
            const pre = await preloadImage(src || '');
            const newSrc = pre ? pre.src : (src || fallbackImg());

            imgEl.classList.add('fade-out');
            await new Promise(r => setTimeout(r, 260));

            imgEl.src = newSrc;
            if (alt) imgEl.alt = alt;
            if (title) imgEl.title = title;
            if (dataLarge) imgEl.dataset.large = dataLarge;

            requestAnimationFrame(() => imgEl.classList.remove('fade-out'));
        }

        // ---------- content rendering helpers ----------
        function looksLikeHtml(str) {
            return /<\/?[a-z][\s\S]*>/i.test(String(str || '').trim());
        }

        function escapeHtml(text) {
            return String(text)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function setDescriptionToElement(el, content, fallbackPlain = '') {
            if (!el) return;
            if (!content || (typeof content === 'string' && !String(content).trim())) {
                el.textContent = fallbackPlain || '';
                return;
            }
            if (content && typeof content === 'object' && content.html) {
                el.innerHTML = content.html;
                return;
            }
            if (typeof content === 'string' && looksLikeHtml(content)) {
                el.innerHTML = content;
                return;
            }
            if (typeof content === 'string' && content.indexOf('\n') !== -1) {
                const lines = String(content).split(/\r?\n/).map(s => s.trim()).filter(Boolean);
                el.innerHTML = lines.map(l => `<p>${escapeHtml(l)}</p>`).join('');
                return;
            }
            el.textContent = String(content);
        }

        // ---------- main UI logic ----------
        // Priority: fragrance.image -> volume.image -> product.main_images[0] -> fallback
        function chooseMainImage(product, selectedVolumeIndex = null, selectedFragranceIndex = null) {
            if (selectedFragranceIndex !== null) {
                const frag = (product.fragrances && product.fragrances[selectedFragranceIndex]) || null;
                if (frag && frag.image) {
                    const url = toPublicUrl(frag.image);
                    if (url) return url;
                }
            }
            if (selectedVolumeIndex !== null) {
                const vol = (product.product_volumes && product.product_volumes[selectedVolumeIndex]) || null;
                if (vol && vol.image) {
                    const url = toPublicUrl(vol.image);
                    if (url) return url;
                }
            }
            if (product.main_images && product.main_images.length) {
                return toPublicUrl(product.main_images[0]);
            }
            return fallbackImg();
        }

        function updateProceedHref(product) {
            const base = CHECKOUT_ROUTE;
            const params = new URLSearchParams();
            params.set('product', product.id ?? '');

            const vol = document.querySelector('.theme-btn-liter.selected');
            if (vol) {
                params.set('volume_index', vol.dataset.index);
                params.set('volume_name', vol.textContent.trim());
            }

            const frag = document.querySelector('.fragrance.selected');
            if (frag) {
                params.set('fragrance_index', frag.dataset.index);
                params.set('fragrance_name', frag.dataset.name ?? frag.textContent.trim());
            }

            const proceedBtn = document.getElementById('proceed-btn');
            if (proceedBtn) proceedBtn.href = base + '?' + params.toString();
        }

        function populateKeyFeatures(raw) {
            const el = document.getElementById('key-features');
            if (!el) return;
            el.innerHTML = '';

            if (!raw || (Array.isArray(raw) && raw.length === 0) || (typeof raw === 'string' && !raw.trim())) {
                [
                    'Effectively removes tough grease and stains',
                    'Provides streak-free, spotless surface finish',
                    'Leaves a pleasant and refreshing fragrance',
                    'Safe and gentle on hands and surfaces'
                ].forEach(txt => {
                    const li = document.createElement('li');
                    li.textContent = txt;
                    el.appendChild(li);
                });
                return;
            }


            if (raw && typeof raw === 'object' && raw.html) {
                el.innerHTML = raw.html;
                return;
            }

            if (typeof raw === 'string' && looksLikeHtml(raw)) {
                el.innerHTML = raw;
                return;
            }

            const items = Array.isArray(raw) ? raw : String(raw).split(/\r?\n|,/).map(s => s.trim()).filter(Boolean);
            items.forEach(i => {
                const li = document.createElement('li');
                li.textContent = i;
                el.appendChild(li);
            });
        }

        function populateSafety(raw) {
            const list = document.getElementById('safety-list');
            if (!list) return;
            list.innerHTML = '';

            if (!raw || (Array.isArray(raw) && raw.length === 0) || (typeof raw === 'string' && !raw.trim())) {
                [
                    'Keep out of reach of children and pets.',
                    'Avoid direct contact with eyes and prolonged skin exposure.',
                    'Do not mix with acids, bleach, or other cleaning chemicals.',
                    'Store tightly closed in a cool, dry, and well-ventilated place.',
                    'Wash hands thoroughly after use and avoid inhalation of vapors.'
                ].forEach(txt => {
                    const li = document.createElement('li');
                    li.textContent = txt;
                    list.appendChild(li);
                });
                return;
            }

            if (raw && typeof raw === 'object' && raw.html) {
                list.innerHTML = raw.html;
                return;
            }

            if (typeof raw === 'string' && looksLikeHtml(raw)) {
                list.innerHTML = raw;
                return;
            }

            const items = Array.isArray(raw) ? raw : String(raw).split(/\r?\n|,/).map(s => s.trim()).filter(Boolean);
            items.forEach(it => {
                const li = document.createElement('li');
                li.textContent = it;
                list.appendChild(li);
            });
        }

        // when user selects a volume
        function selectVolume(product, volumeIndex) {
            document.querySelectorAll('.theme-btn-liter').forEach(b => {
                b.classList.remove('selected');
                b.setAttribute('aria-checked', 'false');
            });
            const btn = document.querySelector(`.theme-btn-liter[data-index="${volumeIndex}"]`);
            if (btn) {
                btn.classList.add('selected');
                btn.setAttribute('aria-checked', 'true');
            }

            const vol = (product.product_volumes && product.product_volumes[volumeIndex]) || null;
            const selVolEl = document.getElementById('selected-volume');
            if (selVolEl) selVolEl.textContent = vol?.volume || '-';

            const fragBtn = document.querySelector('.fragrance.selected');
            const fragIndex = fragBtn ? parseInt(fragBtn.dataset.index, 10) : null;
            const chosen = chooseMainImage(product, volumeIndex, fragIndex);

            const alt = (fragIndex !== null && product.fragrances && product.fragrances[fragIndex] ? (product.fragrances[
                fragIndex].name + ' - ' + product.product_name) : (product.product_name || 'Product'));
            swapMainImageTo(chosen, {
                alt,
                title: vol ? vol.volume : '',
                dataLarge: chosen
            });

            updateProceedHref(product);
        }

        // when user selects a fragrance (side or thumb)
        async function selectFragrance(product, fragIndex) {
            document.querySelectorAll('.fragrance').forEach(b => {
                b.classList.remove('selected');
                b.setAttribute('aria-pressed', 'false');
            });
            const sideBtn = document.querySelector(`.fragrance[data-index="${fragIndex}"]`);
            if (sideBtn) {
                sideBtn.classList.add('selected');
                sideBtn.setAttribute('aria-pressed', 'true');
            }

            document.querySelectorAll('#fragrance-thumbs .frag-thumb').forEach(t => t.classList.remove('thumb-active'));
            const thumb = document.querySelector(`#fragrance-thumbs [data-index="${fragIndex}"]`);
            if (thumb) thumb.classList.add('thumb-active');

            const frag = (product.fragrances && product.fragrances[fragIndex]) || {};
            const selectedFragEl = document.getElementById('selected-fragrance');
            const fragDescEl = document.getElementById('fragrance-description');
            if (selectedFragEl) selectedFragEl.textContent = frag.name || '-';
            setDescriptionToElement(fragDescEl, frag.short_desc_html || frag.short_desc || product
                .short_description_html || product.short_description || '');

            populateKeyFeatures(frag.key_features_html || frag.key_features || product.key_features || []);
            populateSafety(frag.safety_info_html || frag.safety_info || product.safety_info || []);

            // choose the image: prefer frag.image
            let chosen;
            if (frag && frag.image) {
                chosen = toPublicUrl(frag.image);
            } else {
                const volBtn = document.querySelector('.theme-btn-liter.selected');
                const volIndex = volBtn ? parseInt(volBtn.dataset.index, 10) : null;
                chosen = chooseMainImage(product, volIndex, fragIndex);
            }
            const alt = (frag.name ? frag.name + ' - ' : '') + (product.product_name || '');
            await swapMainImageTo(chosen, {
                alt,
                title: frag.name || '',
                dataLarge: chosen
            });

            updateProceedHref(product);
        }

        // Renders fragrance thumbnails and ensures each uses its own image (converted to public URL)
        function renderFragranceThumbs(product) {
            const wrap = document.getElementById('fragrance-thumbs-wrap');
            const container = document.getElementById('fragrance-thumbs');
            if (!container) return;
            container.innerHTML = '';
            const frags = Array.isArray(product.fragrances) ? product.fragrances : [];

            if (!frags.length) {
                if (wrap) wrap.style.display = 'none';
                const div = document.createElement('div');
                div.className = 'frag-thumb thumb-active';
                const wrapper = document.createElement('div');
                wrapper.className = 'thumb-img';
                const img = document.createElement('img');
                img.src = toPublicUrl((product.main_images && product.main_images[0]) ? product.main_images[0] :
                    fallbackImg());
                img.alt = product.product_name || 'Product';
                wrapper.appendChild(img);
                const caption = document.createElement('div');
                caption.className = 'frag-caption';
                caption.textContent = 'Default';
                div.appendChild(wrapper);
                div.appendChild(caption);
                container.appendChild(div);
                return;
            }

            if (wrap) wrap.style.display = '';
            frags.forEach((f, idx) => {
                const div = document.createElement('div');
                div.className = 'frag-thumb';
                div.dataset.index = idx;
                div.setAttribute('role', 'button');
                div.setAttribute('aria-pressed', 'false');
                div.tabIndex = 0;

                const wrapper = document.createElement('div');
                wrapper.className = 'thumb-img';
                const img = document.createElement('img');

                // Use the fragrance image if provided; convert to public URL
                const fragImgUrl = f && f.image ? toPublicUrl(f.image) : (product.main_images && product
                    .main_images[0] ? toPublicUrl(product.main_images[0]) : fallbackImg());
                img.src = fragImgUrl;
                img.alt = `${f && f.name ? f.name : 'Fragrance'} - ${product.product_name || ''}`;
                img.loading = 'lazy';
                img.title = f && f.name ? f.name : '';
                wrapper.appendChild(img);

                // helpful for debugging / QA
                div.dataset.image = fragImgUrl;

                const caption = document.createElement('div');
                caption.className = 'frag-caption';
                caption.textContent = f && f.name ? f.name : `Fragrance ${idx+1}`;

                div.addEventListener('click', () => selectFragrance(product, idx));
                div.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter' || e.key === ' ') selectFragrance(product, idx);
                });

                div.appendChild(wrapper);
                div.appendChild(caption);
                container.appendChild(div);
            });
        }

        // Volumes + right-side fragrance controls
        function renderVolumeAndFragranceControls(product) {
            // VOLUMES
            const volumesContainer = document.getElementById('volumes-container');
            if (!volumesContainer) return;
            volumesContainer.innerHTML = '';
            const volumes = Array.isArray(product.product_volumes) ? product.product_volumes : [];
            if (!volumes.length) {
                const btn = document.createElement('button');
                btn.className = 'theme-btn-liter selected';
                btn.type = 'button';
                btn.dataset.index = 0;
                btn.textContent = 'Default';
                volumesContainer.appendChild(btn);
                const selVolEl = document.getElementById('selected-volume');
                if (selVolEl) selVolEl.textContent = 'Default';
            } else {
                volumes.forEach((v, i) => {
                    const btn = document.createElement('button');
                    btn.className = 'theme-btn-liter' + (i === 0 ? ' selected' : '');
                    btn.type = 'button';
                    btn.dataset.index = i;
                    btn.dataset.image = v.image || '';
                    btn.textContent = v.volume || `Vol ${i+1}`;
                    btn.addEventListener('click', () => selectVolume(product, i));
                    volumesContainer.appendChild(btn);
                });
                const selVolEl = document.getElementById('selected-volume');
                if (selVolEl) selVolEl.textContent = volumes[0]?.volume || '-';
            }

            // FRAGRANCES (right side)

            // Hide the "Fragrance:" specification line if no fragrances exist
            const fragranceSpecLine = document.querySelector('li span#selected-fragrance')?.closest('li');

            if (fragranceSpecLine) {
                if (!product.fragrances || !Array.isArray(product.fragrances) || product.fragrances.length === 0) {
                    fragranceSpecLine.style.display = 'none';
                } else {
                    fragranceSpecLine.style.display = '';
                }
            }

            const fragsContainer = document.getElementById('fragrances-container');
            const fragBlock = document.getElementById('fragrance-block');
            if (!fragsContainer) return;
            fragsContainer.innerHTML = '';
            const frags = Array.isArray(product.fragrances) ? product.fragrances : [];

            if (!frags.length) {
                if (fragBlock) fragBlock.style.display = 'none';
                const selFragEl = document.getElementById('selected-fragrance');
                if (selFragEl) selFragEl.textContent = 'Default';
                const fragDescEl = document.getElementById('fragrance-description');
                setDescriptionToElement(fragDescEl, product.short_description_html || product.short_description || '');
                populateKeyFeatures(product.key_features_html || product.key_features || []);
                populateSafety(product.safety_info_html || product.safety_info || []);
            } else {
                if (fragBlock) fragBlock.style.display = '';
                frags.forEach((f, i) => {
                    const btn = document.createElement('button');
                    btn.className = 'fragrance' + (i === 0 ? ' selected' : '');
                    btn.type = 'button';
                    btn.dataset.index = i;
                    btn.dataset.name = f.name || '';
                    btn.dataset.image = f.image || '';
                    btn.textContent = f.name || `Fragrance ${i+1}`;
                    btn.setAttribute('aria-pressed', i === 0 ? 'true' : 'false');
                    btn.addEventListener('click', () => selectFragrance(product, i));
                    fragsContainer.appendChild(btn);
                });

                const f0 = frags[0] || {};
                const selFragEl = document.getElementById('selected-fragrance');
                if (selFragEl) selFragEl.textContent = f0?.name || '-';
                const fragDescEl = document.getElementById('fragrance-description');
                setDescriptionToElement(fragDescEl, f0?.short_desc_html || f0?.short_desc || product
                    .short_description_html || product.short_description || '');
                populateKeyFeatures(f0?.key_features_html || f0?.key_features || product.key_features || []);
                populateSafety(f0?.safety_info_html || f0?.safety_info || product.safety_info || []);
            }
        }

        // Update UI
        function updateUI(product) {
            if (!product) return;
            const nameEl = document.getElementById('product-name');
            if (nameEl) nameEl.textContent = product.product_name || 'Product';
            const priceEl = document.getElementById('product-price');
            if (priceEl) {
                let html = product.price ? `₹${product.price}` : '₹0';
                if (product.old_price) html += ` <span class="old-price">₹${product.old_price}</span>`;
                priceEl.innerHTML = html;
            }

            const meta = document.getElementById('product-meta');
            if (meta && (product.short_description_html || product.short_description)) {
                setDescriptionToElement(meta, product.short_description_html || product.short_description || '');
            }

            renderFragranceThumbs(product);
            renderVolumeAndFragranceControls(product);

            // initial main image: chooseMainImage returns public URL
            const initialMain = chooseMainImage(product, 0, (product.fragrances && product.fragrances.length ? 0 : null));
            const alt = ((product.fragrances && product.fragrances[0] && product.fragrances[0].name) ? product.fragrances[0]
                .name + ' - ' : '') + (product.product_name || '');
            swapMainImageTo(initialMain, {
                alt,
                title: product.product_name || '',
                dataLarge: initialMain
            });

            const firstThumb = document.querySelector('#fragrance-thumbs [data-index="0"]');
            if (firstThumb) {
                document.querySelectorAll('#fragrance-thumbs .frag-thumb').forEach(t => t.classList.remove('thumb-active'));
                firstThumb.classList.add('thumb-active');
            }

            updateProceedHref(product);
        }

        // Init
        (function init() {
            if (!product) return;
            updateUI(product);
        })();
    </script>
@endsection