@extends('layouts.adminmaster')

@section('title', 'Edit Product | Trew India Pvt Ltd')

@section('content')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">

                <!-- Page Title -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h4 class="fw-bold mb-0 text-primary">
                            <i class="bx bx-package me-1"></i> Edit Product
                        </h4>
                    </div>
                </div>

                <form id="product-form" action="{{ route('admin.products.update', $product->id) }}" method="POST"
                    enctype="multipart/form-data" class="shadow-sm p-4 rounded-3 bg-white">
                    @csrf
                    @method('PUT')

                    <!-- Category Selection -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Select Top Category <span
                                    class="text-danger">*</span></label>
                            <select name="top_category_id" id="top_category" class="form-select" required>
                                <option value="">-- Select Top Category --</option>
                                @foreach ($topCategories as $top)
                                    <option value="{{ $top->id }}"
                                        {{ old('top_category_id') == $top->id || (isset($selectedTopId) && $selectedTopId == $top->id) ? 'selected' : '' }}>
                                        {{ $top->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Select Mid Category <span
                                    class="text-danger">*</span></label>
                            <select name="mid_category_id" id="mid_category" class="form-select" required>
                                <option value="">-- Select Mid Category --</option>
                                @foreach ($midCategories as $mid)
                                    <option value="{{ $mid->id }}" data-top="{{ $mid->top_category_id }}"
                                        {{ old('mid_category_id', $product->mid_category_id ?? '') == $mid->id ? 'selected' : '' }}>
                                        {{ $mid->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Product Info -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Product Name</label>
                            <input type="text" name="product_name" id="product_name" class="form-control"
                                placeholder="Enter product name" required
                                value="{{ old('product_name', $product->product_name) }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Slug</label>
                            <input type="text" name="slug" id="slug" class="form-control"
                                placeholder="Auto-generated slug" readonly value="{{ old('slug', $product->slug) }}">
                        </div>



                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Main Image</label>
                            <input type="file" name="main_image" class="form-control" accept="image/*"
                                id="main_image_input">
                            <div id="main_image_preview" class="d-flex flex-wrap gap-2 mt-2">
                                @if (!empty($product->main_image))
                                    <img src="{{ asset('storage/uploads/products/main/' . $product->main_image) }}"
                                        alt="Main image" class="rounded border shadow-sm" width="80" height="80"
                                        style="object-fit:cover;">
                                    <input type="hidden" name="existing_main_image" value="{{ $product->main_image }}">
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Script for Auto Slug -->
                    <script>
                        document.getElementById('product_name').addEventListener('input', function() {
                            const productName = this.value.trim();
                            const slug = productName
                                .toLowerCase()
                                .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
                                .replace(/\s+/g, '-') // Replace spaces with dashes
                                .replace(/-+/g, '-'); // Avoid multiple dashes
                            document.getElementById('slug').value = slug;
                        });
                    </script>


                    <!-- Price / Rating / Best Seller -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Price (₹)</label>
                            <input type="number" name="price" step="0.01" class="form-control" placeholder="e.g. 499"
                                value="{{ old('price', $product->price) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Rating</label>
                            <input type="number" name="rating" step="0.1" max="5" min="0"
                                class="form-control" placeholder="e.g. 4.5" value="{{ old('rating', $product->rating) }}">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <div class="form-check mt-3">
                                <input type="checkbox" class="form-check-input" name="is_best_seller" value="1"
                                    id="is_best_seller"
                                    {{ old('is_best_seller', $product->is_best_seller) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_best_seller">Mark as Best Seller</label>
                            </div>
                        </div>
                    </div>

                    <!-- Short Description -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Short Description</label>
                        <textarea name="short_description" id="short_description" class="form-control rounded-2" rows="4"
                            placeholder="Write a short product description...">{{ old('short_description', $product->short_description) }}</textarea>
                    </div>




                    <!-- Product Volumes -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h5 class="fw-semibold text-secondary mb-0">Product Volumes</h5>
                            <button type="button" class="btn btn-sm btn-outline-success" id="add-volume">
                                <i class="bx bx-plus"></i> Add Volume
                            </button>
                        </div>
                        <div id="volume-wrapper">
                            {{-- Render existing volumes as summary cards so user can edit/delete them --}}
                            @php $vIndex = 0; @endphp
                            @foreach ($volumes as $v)
                                @php $vIndex++; @endphp
                                <div class="card p-3 mb-3 border border-success-subtle volume-summary"
                                    data-saved-index="{{ $vIndex }}" data-volume="{{ $v->volume }}">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="d-flex gap-3 align-items-start">
                                            <div class="volume-thumb">
                                                @if (!empty($v->image_url))
                                                    <img src="{{ $v->image_url }}" width="70" height="70"
                                                        class="rounded border" style="object-fit:cover;">
                                                @else
                                                    <img src="{{ asset('assets/img/placeholder.jpg') }}" width="70"
                                                        height="70" class="rounded border">
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-1 text-success saved-volume-label">{{ $v->volume }}</h6>
                                            </div>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-outline-primary edit-volume"
                                                title="Edit"><i class="bx bx-edit"></i></button>
                                            <button type="button" class="btn btn-sm btn-outline-danger delete-volume"
                                                title="Delete"><i class="bx bx-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="hidden-volume-inputs d-none">
                                        <input type="hidden" name="product_volumes[{{ $vIndex }}][volume]"
                                            value="{{ $v->volume }}">
                                        @if (!empty($v->image_url))
                                            <input type="hidden"
                                                name="product_volumes[{{ $vIndex }}][existing_image]"
                                                value="{{ $v->image_url }}">
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Fragrances -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h5 class="fw-semibold text-secondary mb-0">Fragrances</h5>
                            <button type="button" class="btn btn-sm btn-outline-success" id="add-fragrance">
                                <i class="bx bx-plus"></i> Add Fragrance
                            </button>
                        </div>

                        <div id="fragrance-wrapper">
                            @php $fIndex = 0; @endphp
                            @foreach ($fragrances as $f)
                                @php $fIndex++; @endphp
                                <div class="card p-3 mb-3 border border-info-subtle fragrance-summary"
                                    data-saved-index="{{ $fIndex }}" data-name="{{ $f->name }}"
                                    data-short-desc="{{ $f->short_desc }}" data-key-features="{{ $f->key_features }}"
                                    data-specifications="{{ $f->specifications }}"
                                    data-safety-info="{{ $f->safety_info }}">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="d-flex gap-3 align-items-start">
                                            <div class="fragrance-thumb">
                                                @if (!empty($f->image_url))
                                                    <img src="{{ $f->image_url }}" class="rounded border" width="70"
                                                        height="70" style="object-fit:cover;">
                                                @else
                                                    <img src="{{ asset('assets/img/placeholder.jpg') }}"
                                                        class="rounded border" width="70" height="70">
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-1 text-info saved-fragrance-name">{{ $f->name }}</h6>
                                                <p class="mb-1 small saved-fragrance-desc">
                                                    {{ Str::limit($f->short_desc, 120) }}</p>
                                                <small><strong>Key Features:</strong> <span
                                                        class="saved-fragrance-features">{{ $f->key_features ?: '-' }}</span></small><br>
                                                <small><strong>Specifications:</strong> <span
                                                        class="saved-fragrance-specs">{{ $f->specifications ?: '-' }}</span></small><br>
                                                <small><strong>Safety:</strong> <span
                                                        class="saved-fragrance-safety">{{ $f->safety_info ?: '-' }}</span></small>
                                            </div>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-outline-primary edit-fragrance"
                                                title="Edit"><i class="bx bx-edit"></i></button>
                                            <button type="button" class="btn btn-sm btn-outline-danger delete-fragrance"
                                                title="Delete"><i class="bx bx-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="hidden-fragrance-inputs d-none">
                                        <input type="hidden" name="fragrances[{{ $fIndex }}][name]"
                                            value="{{ $f->name }}">
                                        <input type="hidden" name="fragrances[{{ $fIndex }}][short_desc]"
                                            value="{{ $f->short_desc }}">
                                        <input type="hidden" name="fragrances[{{ $fIndex }}][key_features]"
                                            value="{{ $f->key_features }}">
                                        <input type="hidden" name="fragrances[{{ $fIndex }}][specifications]"
                                            value="{{ $f->specifications }}">
                                        <input type="hidden" name="fragrances[{{ $fIndex }}][safety_info]"
                                            value="{{ $f->safety_info }}">
                                        @if (!empty($f->image_url))
                                            <input type="hidden" name="fragrances[{{ $fIndex }}][existing_image]"
                                                value="{{ $f->image_url }}">
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Submit -->
                    <div class="text-center mt-5">
                        <button type="submit" class="btn btn-success btn-lg px-5 me-3">
                            <i class="bx bx-save me-1"></i> Update Product
                        </button>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-outline-primary btn-lg px-5">
                            <i class="bx bx-list-ul me-1"></i> View Products
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- Script for filtering mid-categories based on top-category -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const topSelect = document.getElementById('top_category');
                const midSelect = document.getElementById('mid_category');

                // Store original mid-category options
                const originalMidOptions = Array.from(midSelect.querySelectorAll('option')).map(opt => opt.cloneNode(
                    true));

                function filterMidOptions() {
                    const topId = topSelect.value;
                    const selectedMidId = "{{ old('mid_category_id', $product->mid_category_id ?? '') }}";

                    // Clear and reset dropdown
                    midSelect.innerHTML = '';
                    midSelect.appendChild(originalMidOptions[0].cloneNode(true)); // placeholder

                    // Add only matching mid-categories
                    originalMidOptions.slice(1).forEach(opt => {
                        if (!topId || opt.dataset.top === topId) {
                            midSelect.appendChild(opt.cloneNode(true));
                        }
                    });

                    // Re-select previously selected mid-category if still valid
                    if (selectedMidId) {
                        const match = Array.from(midSelect.options).find(o => o.value === selectedMidId);
                        midSelect.value = match ? selectedMidId : '';
                    }
                }

                topSelect.addEventListener('change', filterMidOptions);

                // Filter once when page loads (important for edit mode)
                filterMidOptions();
            });
        </script>


        <script>
            /* initialize CKEditor for short description */
            ClassicEditor.create(document.querySelector('#short_description')).catch(console.error);

            /* ---- Counter indexes ---- */
            let fragranceFormIndex = 0;
            let savedFragranceIndex = {{ $fIndex ?? 0 }};
            let volumeFormIndex = 0;
            let savedVolumeIndex = {{ $vIndex ?? 0 }};

            /* === Utility: escape html for injecting values safely === */
            function escapeHtml(unsafe) {
                if (unsafe === null || unsafe === undefined) return '';
                return String(unsafe)
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }

            /* ========================= VOLUME: build editable form ========================= */
            function buildVolumeForm(prefill = null, formId = null) {
                volumeFormIndex++;
                const idx = formId !== null ? formId : volumeFormIndex;
                const html = `
    <div class="card p-3 mb-3 border border-success-subtle volume-item" data-temporary-id="${idx}">
        <div class="d-flex justify-content-between align-items-center">
            <strong class="text-success">Volume</strong>
            <button type="button" class="btn btn-sm btn-danger remove-volume"><i class="bx bx-trash"></i> Remove</button>
        </div>
        <div class="row mt-2">
            <div class="col-md-4">
                <input type="text" name="product_volumes[__IDX__][volume]" class="form-control volume-label" placeholder="e.g. 500ml" required value="${escapeHtml(prefill?.volume ?? '')}">
            </div>
            <div class="col-md-8">
                <input type="file" name="product_volumes[__IDX__][image]" accept="image/*" class="form-control volume-image-input">
                <div class="preview-container mt-2 d-flex gap-2 flex-wrap">
                    ${prefill?.image ? `<img src="${escapeHtml(prefill.image)}" class="rounded border shadow-sm" width="70" height="70" style="object-fit:cover;">` : ''}
                </div>
            </div>
        </div>
        <div class="text-end mt-3">
            <button type="button" class="btn btn-success btn-sm save-volume"><i class="bx bx-check"></i> Save Volume</button>
        </div>
    </div>`.replaceAll('__IDX__', idx);
                return {
                    html,
                    idx
                };
            }

            /* === Add Volume Form (empty) === */
            $('#add-volume').on('click', function() {
                const {
                    html,
                    idx
                } = buildVolumeForm(null);
                $('#volume-wrapper').append(html);
            });

            /* === Save Volume: convert editable form to summary card, move file input into summary, add hidden fields === */
            $(document).on('click', '.save-volume', function() {
                const card = $(this).closest('.volume-item');
                const tempIdx = card.attr('data-temporary-id') || card.find('[name^="product_volumes["]').first().attr(
                    'name').match(/^product_volumes\[(\d+)\]/)?.[1];

                const volumeLabel = card.find('.volume-label').val() || '';
                if (!volumeLabel.trim()) {
                    alert('Please enter volume label.');
                    return;
                }

                // preview or placeholder
                const previewImgSrc = card.find('.preview-container img').attr('src') || '';

                // move file input (if user uploaded) into the summary (so file will be submitted)
                const fileInput = card.find('.volume-image-input');
                // assign savedVolumeIndex
                savedVolumeIndex++;
                const saveIdx = savedVolumeIndex;

                // if fileInput exists, rename so server receives product_volumes[saveIdx][image]
                if (fileInput && fileInput.length) {
                    fileInput.attr('name', `product_volumes[${saveIdx}][image]`);
                }

                // create hidden inputs for other fields
                const hiddenInputs = $(`
        <input type="hidden" name="product_volumes[${saveIdx}][volume]" value="${escapeHtml(volumeLabel)}">
    `);

                // build summary HTML with Edit & Delete
                const summary = $(`
    <div class="card p-3 mb-3 border border-success-subtle volume-summary" data-saved-index="${saveIdx}">
        <div class="d-flex justify-content-between align-items-start">
            <div class="d-flex gap-3 align-items-start">
                <div class="volume-thumb">
                    ${previewImgSrc ? `<img src="${escapeHtml(previewImgSrc)}" width="70" height="70" class="rounded border">` : `<img src="{{ asset('assets/img/placeholder.jpg') }}" width="70" height="70" class="rounded border">`}
                </div>
                <div>
                    <h6 class="mb-1 text-success saved-volume-label">${escapeHtml(volumeLabel)}</h6>
                </div>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-primary edit-volume" title="Edit"><i class="bx bx-edit"></i></button>
                <button type="button" class="btn btn-sm btn-outline-danger delete-volume" title="Delete"><i class="bx bx-trash"></i></button>
            </div>
        </div>
        <div class="hidden-volume-inputs d-none"></div>
    </div>`);

                // attach hidden inputs to the summary and to main form
                summary.find('.hidden-volume-inputs').append(hiddenInputs.clone());
                $('#product-form').append(hiddenInputs);

                // move file input into summary (hidden) so file will be uploaded during final submit
                if (fileInput && fileInput.length) {
                    const movedFile = fileInput.detach();
                    movedFile.prop('required', false);
                    movedFile.addClass('d-none');
                    summary.append(movedFile);
                }

                // If no file input but previewImgSrc is an existing URL, store that as existing_image hidden input
                if ((!fileInput || !fileInput.length) && previewImgSrc && previewImgSrc.indexOf('http') === 0) {
                    const hiddenExisting = $(
                        `<input type="hidden" name="product_volumes[${saveIdx}][existing_image]" value="${escapeHtml(previewImgSrc)}">`
                    );
                    summary.append(hiddenExisting);
                    $('#product-form').append(hiddenExisting.clone());
                }

                // replace editable form with summary
                card.replaceWith(summary);

                // store meta to allow editing
                summary.attr('data-volume', volumeLabel);
            });

            /* === Edit Volume: move summary back to editable form populated with values === */
            $(document).on('click', '.edit-volume', function() {
                const summary = $(this).closest('.volume-summary');
                const saveIdx = summary.attr('data-saved-index');

                // read saved values
                const savedLabel = summary.attr('data-volume') || $(`input[name="product_volumes[${saveIdx}][volume]"]`)
                    .val() || summary.find('.saved-volume-label').text();
                const existingImage = $(`input[name="product_volumes[${saveIdx}][existing_image]"]`).val() || summary
                    .find('.volume-thumb img').attr('src') || '';

                // remove hidden inputs from main form (they will be recreated on save)
                $(`input[name="product_volumes[${saveIdx}][volume]"], input[name="product_volumes[${saveIdx}][existing_image]"]`)
                    .remove();

                // get moved file input if exists inside summary and detach it
                const movedFileInput = summary.find('input[type="file"]').length ? summary.find('input[type="file"]')
                    .detach() : null;

                // build a new temporary form with prefill
                const {
                    html,
                    idx
                } = buildVolumeForm({
                    volume: savedLabel,
                    image: existingImage
                }, null);
                const formEl = $(html);

                // if there's a movedFileInput, append it into the form and rename to the temporary name
                if (movedFileInput) {
                    movedFileInput.attr('name', `product_volumes[${idx}][image]`);
                    movedFileInput.removeClass('d-none');
                    formEl.find('.volume-image-input').replaceWith(movedFileInput);
                }

                // replace summary with editable form
                summary.replaceWith(formEl);
            });

            /* === Delete Volume with confirmation === */
            $(document).on('click', '.delete-volume', function() {
                if (!confirm('Are you sure you want to delete this volume?')) return;
                const summary = $(this).closest('.volume-summary');
                const saveIdx = summary.attr('data-saved-index');

                // remove hidden inputs in main form relating to this saved index
                $(`input[name="product_volumes[${saveIdx}][volume]"], input[name="product_volumes[${saveIdx}][existing_image]"]`)
                    .remove();

                // remove moved file input if present
                summary.find('input[type="file"]').remove();

                // remove card
                summary.remove();
            });

            /* === Remove volume while still editing (before saving) === */
            $(document).on('click', '.remove-volume', function() {
                const card = $(this).closest('.volume-item, .volume-summary');
                if (card.hasClass('volume-summary')) {
                    if (!confirm('Are you sure you want to delete this volume?')) return;
                    // remove any related hidden inputs
                    const saveIdx = card.attr('data-saved-index');
                    if (saveIdx) $(
                        `input[name="product_volumes[${saveIdx}][volume]"], input[name="product_volumes[${saveIdx}][existing_image]"]`
                    ).remove();
                    card.remove();
                } else {
                    card.remove();
                }
            });

            /* ========================= FRAGRANCE: build form ========================= */
            function buildFragranceForm(prefill = null, formId = null) {
                fragranceFormIndex++;
                const idx = formId !== null ? formId : fragranceFormIndex;
                const idShort = `fragrance_short_${idx}`;
                const idSafety = `fragrance_safety_${idx}`;

                const nameVal = prefill?.name ?? '';
                const keyFeaturesVal = prefill?.key_features ?? '';
                const specsVal = prefill?.specifications ?? '';
                const shortDescVal = prefill?.short_desc ?? '';
                const safetyVal = prefill?.safety_info ?? '';

                const html = `
    <div class="card p-3 mb-3 border border-info-subtle fragrance-item" data-temporary-id="${idx}">
        <div class="d-flex justify-content-between align-items-center">
            <strong class="text-info">Fragrance</strong>
            <button type="button" class="btn btn-sm btn-danger remove-fragrance"><i class="bx bx-trash"></i> Remove</button>
        </div>

        <div class="row mt-2">
            <div class="col-md-4">
                <input type="text" name="fragrances[__IDX__][name]" class="form-control fragrance-name" placeholder="Fragrance Name" required value="${escapeHtml(nameVal)}">
            </div>
            <div class="col-md-4">
                <input type="file" name="fragrances[__IDX__][image]" accept="image/*" class="form-control fragrance-image-input">
                <div class="preview-container mt-2 d-flex gap-2 flex-wrap">
                    ${prefill?.image ? `<img src="${escapeHtml(prefill.image)}" class="rounded border shadow-sm" width="70" height="70" style="object-fit:cover;">` : ''}
                </div>
            </div>
        </div>

        <div class="mt-3">
            <label class="form-label">Short Description</label>
            <textarea name="fragrances[__IDX__][short_desc]" id="${idShort}" class="form-control fragrance-editor short_desc" rows="3">${escapeHtml(shortDescVal)}</textarea>
        </div>

        <div class="row mt-3">
            <div class="col-md-6">
                <label class="form-label">Key Features</label>
                <input type="text" name="fragrances[__IDX__][key_features]" class="form-control key_features" placeholder="Comma-separated values" value="${escapeHtml(keyFeaturesVal)}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Specifications</label>
                <input type="text" name="fragrances[__IDX__][specifications]" class="form-control specifications" placeholder="key:value, key:value" value="${escapeHtml(specsVal)}">
            </div>
        </div>

        <div class="mt-3">
            <label class="form-label">Safety Info</label>
            <textarea name="fragrances[__IDX__][safety_info]" id="${idSafety}" class="form-control fragrance-editor safety_info" rows="3">${escapeHtml(safetyVal)}</textarea>
        </div>

        <div class="text-end mt-3">
            <button type="button" class="btn btn-success btn-sm save-fragrance"><i class="bx bx-check"></i> Save Fragrance</button>
        </div>
    </div>`.replaceAll('__IDX__', idx);

                return {
                    html,
                    idx,
                    idShort,
                    idSafety
                };
            }

            /* === ADD FRAGRANCE === */
            $('#add-fragrance').on('click', function() {
                const {
                    html,
                    idx,
                    idShort,
                    idSafety
                } = buildFragranceForm(null);
                $('#fragrance-wrapper').append(html);
                setTimeout(() => {
                    ClassicEditor.create(document.querySelector(`#${idShort}`)).catch(console.error);
                    ClassicEditor.create(document.querySelector(`#${idSafety}`)).catch(console.error);
                }, 120);
            });

            /* === SAVE FRAGRANCE === */
            $(document).on('click', '.save-fragrance', function() {
                const card = $(this).closest('.fragrance-item');
                const tempIdx = card.attr('data-temporary-id') || card.find('[name^="fragrances["]').first().attr(
                    'name').match(/^fragrances\[(\d+)\]/)?.[1];
                const name = card.find('.fragrance-name').val() || '';
                let shortDesc = card.find('.short_desc').val() || '';
                const keyFeatures = card.find('.key_features').val() || '';
                const specifications = card.find('.specifications').val() || '';
                let safetyInfo = card.find('.safety_info').val() || '';

                if (!name.trim()) {
                    alert('Please enter fragrance name.');
                    return;
                }

                const previewSrc = card.find('.preview-container img').attr('src') || '';

                const fileInput = card.find('.fragrance-image-input');
                savedFragranceIndex++;
                const saveIdx = savedFragranceIndex;

                if (fileInput && fileInput.length) {
                    fileInput.attr('name', `fragrances[${saveIdx}][image]`);
                }

                const hiddenInputs = $(`
        <input type="hidden" name="fragrances[${saveIdx}][name]" value="${escapeHtml(name)}">
        <input type="hidden" name="fragrances[${saveIdx}][short_desc]" value="${escapeHtml(shortDesc)}">
        <input type="hidden" name="fragrances[${saveIdx}][key_features]" value="${escapeHtml(keyFeatures)}">
        <input type="hidden" name="fragrances[${saveIdx}][specifications]" value="${escapeHtml(specifications)}">
        <input type="hidden" name="fragrances[${saveIdx}][safety_info]" value="${escapeHtml(safetyInfo)}">
    `);

                const summaryHtml = $(`
        <div class="card p-3 mb-3 border border-info-subtle fragrance-summary" data-saved-index="${saveIdx}">
            <div class="d-flex justify-content-between align-items-start">
                <div class="d-flex gap-3 align-items-start">
                    <div class="fragrance-thumb">
                        ${previewSrc ? `<img src="${escapeHtml(previewSrc)}" class="rounded border" width="70" height="70">` : `<img src="{{ asset('assets/img/placeholder.jpg') }}" class="rounded border" width="70" height="70">`}
                    </div>
                    <div>
                        <h6 class="mb-1 text-info saved-fragrance-name">${escapeHtml(name)}</h6>
                        <p class="mb-1 small saved-fragrance-desc">${escapeHtml(shortDesc)}</p>
                        <small><strong>Key Features:</strong> <span class="saved-fragrance-features">${escapeHtml(keyFeatures) || '-'}</span></small><br>
                        <small><strong>Specifications:</strong> <span class="saved-fragrance-specs">${escapeHtml(specifications) || '-'}</span></small><br>
                        <small><strong>Safety:</strong> <span class="saved-fragrance-safety">${escapeHtml(safetyInfo) || '-'}</span></small>
                    </div>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-primary edit-fragrance" title="Edit"><i class="bx bx-edit"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-danger delete-fragrance" title="Delete"><i class="bx bx-trash"></i></button>
                </div>
            </div>
            <div class="hidden-fragrance-inputs d-none"></div>
        </div>
    `);

                summaryHtml.find('.hidden-fragrance-inputs').append(hiddenInputs.clone());
                $('#product-form').append(hiddenInputs);

                if (fileInput && fileInput.length) {
                    const moved = fileInput.detach();
                    moved.prop('required', false);
                    moved.addClass('d-none');
                    summaryHtml.append(moved);
                } else if (previewSrc && previewSrc.indexOf('http') === 0) {
                    const hiddenImagePath = $(
                        `<input type="hidden" name="fragrances[${saveIdx}][existing_image]" value="${escapeHtml(previewSrc)}">`
                    );
                    summaryHtml.append(hiddenImagePath);
                    $('#product-form').append(hiddenImagePath.clone());
                }

                card.replaceWith(summaryHtml);

                summaryHtml.attr('data-name', name);
                summaryHtml.attr('data-short-desc', shortDesc);
                summaryHtml.attr('data-key-features', keyFeatures);
                summaryHtml.attr('data-specifications', specifications);
                summaryHtml.attr('data-safety-info', safetyInfo);
            });

            /* === FRAGRANCE: Edit/Delete handlers === */
            $(document).on('click', '.edit-fragrance', function() {
                const summary = $(this).closest('.fragrance-summary');
                const saveIdx = summary.attr('data-saved-index');

                const name = summary.attr('data-name') || $(`input[name="fragrances[${saveIdx}][name]"]`).val() ||
                    summary.find('.saved-fragrance-name').text();
                const shortDesc = summary.attr('data-short-desc') || $(
                    `input[name="fragrances[${saveIdx}][short_desc]"]`).val() || summary.find(
                    '.saved-fragrance-desc').text();
                const keyFeatures = summary.attr('data-key-features') || $(
                    `input[name="fragrances[${saveIdx}][key_features]"]`).val() || summary.find(
                    '.saved-fragrance-features').text();
                const specifications = summary.attr('data-specifications') || $(
                    `input[name="fragrances[${saveIdx}][specifications]"]`).val() || summary.find(
                    '.saved-fragrance-specs').text();
                const safetyInfo = summary.attr('data-safety-info') || $(
                    `input[name="fragrances[${saveIdx}][safety_info]"]`).val() || summary.find(
                    '.saved-fragrance-safety').text();

                $(`input[name="fragrances[${saveIdx}][name]"], input[name="fragrances[${saveIdx}][short_desc]"], input[name="fragrances[${saveIdx}][key_features]"], input[name="fragrances[${saveIdx}][specifications]"], input[name="fragrances[${saveIdx}][safety_info]"], input[name="fragrances[${saveIdx}][existing_image]"]`)
                    .remove();

                const movedFileInput = summary.find('input[type="file"]').length ? summary.find('input[type="file"]')
                    .detach() : null;

                const {
                    html,
                    idx,
                    idShort,
                    idSafety
                } = buildFragranceForm({
                    name,
                    short_desc: shortDesc,
                    key_features: keyFeatures,
                    specifications: specifications,
                    safety_info: safetyInfo,
                    image: summary.find('.fragrance-thumb img').attr('src') || ''
                }, null);

                const formEl = $(html);

                if (movedFileInput) {
                    movedFileInput.attr('name', `fragrances[${idx}][image]`);
                    movedFileInput.removeClass('d-none');
                    formEl.find('.fragrance-image-input').replaceWith(movedFileInput);
                }

                summary.replaceWith(formEl);

                setTimeout(() => {
                    ClassicEditor.create(document.querySelector(`#${idShort}`)).then(editor => {
                        if (shortDesc) editor.setData(shortDesc);
                    }).catch(console.error);

                    ClassicEditor.create(document.querySelector(`#${idSafety}`)).then(editor => {
                        if (safetyInfo) editor.setData(safetyInfo);
                    }).catch(console.error);
                }, 120);
            });

            $(document).on('click', '.delete-fragrance', function() {
                if (!confirm('Are you sure you want to delete this fragrance?')) return;
                const summary = $(this).closest('.fragrance-summary');
                const saveIdx = summary.attr('data-saved-index');

                $(`input[name="fragrances[${saveIdx}][name]"], input[name="fragrances[${saveIdx}][short_desc]"], input[name="fragrances[${saveIdx}][key_features]"], input[name="fragrances[${saveIdx}][specifications]"], input[name="fragrances[${saveIdx}][safety_info]"], input[name="fragrances[${saveIdx}][existing_image]"]`)
                    .remove();
                summary.find('input[type="file"]').remove();
                summary.remove();
            });

            /* === Image previews for dynamic inputs === */
            $(document).on('change', '.volume-image-input, .fragrance-image-input', function() {
                const container = $(this).siblings('.preview-container');
                container.html('');
                Array.from(this.files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = e => {
                        container.append(
                            `<img src="${e.target.result}" class="rounded border shadow-sm" width="70" height="70" style="object-fit:cover;">`
                        );
                    };
                    reader.readAsDataURL(file);
                });
            });

            /* === Main image preview === */
            $('#main_image_input').on('change', function() {
                $('#main_image_preview').html('');
                const file = this.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = e => {
                    $('#main_image_preview').append(
                        `<img src="${e.target.result}" class="rounded border shadow-sm" width="80" height="80" style="object-fit:cover;">`
                    );
                    // remove existing_main_image hidden if user replaced the image
                    $('input[name="existing_main_image"]').remove();
                };
                reader.readAsDataURL(file);
            });
        </script>
    @endpush

@endsection