@extends('layouts.app')

@section('content')
<div id="category-container">
    <div id="category-header">
        <a id="back-to-categories" href="{{ route('web.customer.myListing') }}"  style="text-decoration: none;">
            <span style="font-size: 22px;">&#8592;</span> 
            <span style="font-weight: 500;">{{ __('messages.back') }}</span>
        </a>
        <h4 id="category-title" style="margin: 0; font-size: 1.25rem; font-weight: 600; color: #222;"></h4>
    </div>
    
    <div id="form-fields">
        
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {

    const formFields = document.getElementById('form-fields');
    const categoryHeader = document.getElementById('category-header');
    const backBtn = document.getElementById('back-to-categories');
    const searchBar = document.getElementById('category-search-bar');
    const categoryTitle = document.getElementById('category-title');
    const itemHashcode = "{{ $data->hashcode }}";
    const hashcode = "{{ $data->category->hashcode }}";
    const screenFieldsVariants = {};
    // Prepare fixed field values from $data
    const fixedFieldValues = {
        name: @json($data->name ?? ''),
        description: @json($data->description ?? ''),
        price: @json($data->new_price ?? $data->price ?? ''),
        latitude: @json($data->latitude ?? ''),
        longitude: @json($data->longitude ?? ''),
        status: @json($data->status ?? 0)
    };
    const existingImages = @json($data->images ?? []);
    const thumbnails = [];
    const deletedImages = new Set();

    // Prepare variants as a map: variant_hashcode => value(s)
    const variantValues = {};
    @if(!empty($data->variants))
        @foreach($data->variants as $variant)
            @if(is_array($variant))
                @php
                    $hash = $variant['variant_hashcode'];
                    $value = $variant['value'];
                    $type = $variant['variant_type'] ?? null;
                @endphp
                // For CK or MO, collect all values as array
                @if(in_array($type, ['CK', 'MO']))
                    if (!variantValues["{{ $hash }}"]) variantValues["{{ $hash }}"] = [];
                    variantValues["{{ $hash }}"].push(@json($value));
                @else
                    variantValues["{{ $hash }}"] = @json($value);
                @endif
            @endif
        @endforeach
    @endif

    // categoryHeader.style.display = 'none';

    let currentPage = 1;
    let loading = false;
    let lastPage = false;
    let currentSearch = '';
    let parentCategory = null;

    function getFilters() {
        return {
            name: currentSearch,
            type: new URLSearchParams(window.location.search).get('type') || 'MS'
        };
    }

    function renderThumbnails() {
        const container = document.getElementById('photo-thumbnails');
        container.innerHTML = '';

        // Helper to create a thumbnail div
        function createThumb({ imgSrc = null, onDelete = null, onAdd = null, isEmpty = false }) {
            const thumb = document.createElement('div');
            thumb.style.position = 'relative';
            thumb.style.width = '80px';
            thumb.style.height = '80px';
            thumb.style.border = isEmpty ? '1px dashed #bbb' : '1px solid #ccc';
            thumb.style.borderRadius = '6px';
            thumb.style.overflow = 'hidden';
            thumb.style.background = isEmpty ? '#f5f5f5' : '#f9f9f9';
            thumb.style.display = 'flex';
            thumb.style.alignItems = 'center';
            thumb.style.justifyContent = 'center';
            thumb.style.cursor = isEmpty ? 'pointer' : 'default';

            if (imgSrc) {
                const image = document.createElement('img');
                image.src = imgSrc;
                image.style.width = '100%';
                image.style.height = '100%';
                image.style.objectFit = 'cover';
                thumb.appendChild(image);

                if (onDelete) {
                    const del = document.createElement('span');
                    del.innerHTML = '&times;';
                    del.title = '{{ __("messages.remove") }}';
                    del.style.position = 'absolute';
                    del.style.top = '2px';
                    del.style.right = '6px';
                    del.style.cursor = 'pointer';
                    del.style.background = 'rgba(0,0,0,0.5)';
                    del.style.color = '#fff';
                    del.style.borderRadius = '50%';
                    del.style.width = '20px';
                    del.style.height = '20px';
                    del.style.display = 'flex';
                    del.style.alignItems = 'center';
                    del.style.justifyContent = 'center';
                    del.style.fontSize = '16px';
                    del.onclick = onDelete;
                    thumb.appendChild(del);
                }
            } else if (isEmpty) {
                // Camera icon SVG
                thumb.innerHTML = `<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="38" height="38" rx="8" fill="#f5f5f5"/>
                    <path d="M19 13V25M13 19H25" stroke="#bbb" stroke-width="2.5" stroke-linecap="round"/>
                </svg>`;
                thumb.title = '{{ __("messages.add_photo") }}';
                thumb.onclick = onAdd;
            }
            return thumb;
        }

        // Gather all current images (existing and new uploads)
        let currentImages = [];
        existingImages.forEach((img) => {
            if (!deletedImages.has(img.hashcode)) {
                currentImages.push({
                    imgSrc: "{{ asset('') }}".replace(/\/$/, '') + '/' + (img.source ? img.source.replace(/^\/+/, '') : ''),
                    onDelete: function() {
                        deletedImages.add(img.hashcode);
                        renderThumbnails();
                    }
                });
            }
        });
        thumbnails.forEach((fileObj, idx) => {
            currentImages.push({
                imgSrc: fileObj.url,
                onDelete: function() {
                    thumbnails.splice(idx, 1);
                    renderThumbnails();
                }
            });
        });

        // Always render 16 thumbnails
        for (let i = 0; i < 16; i++) {
            if (i < currentImages.length) {
                container.appendChild(createThumb(currentImages[i]));
            } else {
                container.appendChild(createThumb({
                    isEmpty: true,
                    onAdd: function() {
                        // Create a hidden file input for this slot
                        let input = document.createElement('input');
                        input.type = 'file';
                        input.accept = 'image/*';
                        input.multiple = true;
                        input.style.display = 'none';
                        input.onchange = function(e) {
                            if (!this.files.length) return;
                            // Limit to max 16 images
                            let availableSlots = 16 - (existingImages.length - deletedImages.size + thumbnails.length);
                            let filesToAdd = Array.from(this.files).slice(0, availableSlots);
                            filesToAdd.forEach(file => {
                                if (!file.type.startsWith('image/')) return;
                                const reader = new FileReader();
                                reader.onload = function(ev) {
                                    thumbnails.push({ file: file, url: ev.target.result });
                                    renderThumbnails();
                                };
                                reader.readAsDataURL(file);
                            });
                        };
                        document.body.appendChild(input);
                        input.click();
                        // Remove input after use
                        input.addEventListener('change', () => setTimeout(() => input.remove(), 100));
                    }
                }));
            }
        }
    }
    function showForm(formHtml) {
        formFields.innerHTML = formHtml;
        // After rendering, set fixed field values
        document.getElementById('fixed_name').value = fixedFieldValues.name || '';
        document.getElementById('fixed_description').value = fixedFieldValues.description || '';
        document.getElementById('fixed_price').value = fixedFieldValues.price || '';
        document.getElementById('fixed_lat').value = fixedFieldValues.latitude || '';
        document.getElementById('fixed_lng').value = fixedFieldValues.longitude || '';
        document.getElementById('fixed_status').checked = fixedFieldValues.status == 1;
        
        // Set dynamic fields values
        Object.keys(variantValues).forEach(function(hash) {
            let value = variantValues[hash];
            let el = document.getElementById(hash);
            if (!el) {
            // Try for checkbox container
            let ckContainer = document.getElementById('CK_' + hash);
            if (ckContainer) {
                let values = Array.isArray(value) ? value : [value];
                values.forEach(function(val) {
                // Try to match by value first
                let cb = ckContainer.querySelector('input[type="checkbox"][value="' + val + '"]');
                if (cb) {
                    cb.checked = true;
                    if (cb.getAttribute('data-has-option-relation') === "true") {
                    window.fetchVariantRelatedOptions(cb.value);
                    }
                } else {
                    // If not found by value, try to match by label text
                    ckContainer.querySelectorAll('input[type="checkbox"]').forEach(function(cb2) {
                    let labelText = cb2.parentNode.textContent.trim();
                    if (labelText === val) {
                        cb2.checked = true;
                        if (cb2.getAttribute('data-has-option-relation') === "true") {
                        window.fetchVariantRelatedOptions(cb2.value);
                        }
                    }
                    });
                }
                });
            }
            return;
            }
            if (el.type === 'checkbox') {
                el.checked = value == el.value || value == 1 || value === true;
                if (el.checked && el.getAttribute('data-has-option-relation') === "true") {
                    window.fetchVariantRelatedOptions(el.value);
                }
            } else if (el.type === 'radio') {
                let radios = document.querySelectorAll('input[type="radio"][name="' + el.name + '"]');
                radios.forEach(function(radio) {
                    radio.checked = radio.value == value;
                    if (radio.checked && radio.getAttribute('data-has-option-relation') === "true") {
                        window.fetchVariantRelatedOptions(radio.value);
                    }
                });
            } else if (el.tagName === 'SELECT' && el.multiple) {
                let values = Array.isArray(value) ? value : (value !== undefined && value !== null ? [String(value)] : []);
                Array.from(el.options).forEach(function(opt) {
                    
                    // Find the original option object from screenFieldsVariants[hash]
                    let idx = Array.from(el.options).indexOf(opt);
                    let variantObj = screenFieldsVariants[hash] && screenFieldsVariants[hash][idx];
                    let optLabel = variantObj ? variantObj.label : opt.text;
                    let optOriginalValue = variantObj ? variantObj.value : opt.value;
                    // Check if either the hashcode, label, or original value is in values
                    opt.selected = values.includes(opt.value) || values.includes(opt.text) || values.includes(optLabel) || values.includes(optOriginalValue);
                    if (opt.selected && opt.getAttribute('data-has-option-relation') === "true") {
                        window.fetchVariantRelatedOptions(opt.value);
                    }
                });
            } else if (el.tagName === 'SELECT') {
                el.value = value;
                let selectedOpt = el.options[el.selectedIndex];
                if (selectedOpt && selectedOpt.getAttribute('data-has-option-relation') === "true") {
                    window.fetchVariantRelatedOptions(selectedOpt.value);
                }
            } else {
            el.value = value;
            }
        });

        renderThumbnails();

        const photosInput = document.getElementById('photos');
        photosInput.addEventListener('change', function(e) {
            if (this.files.length + existingImages.length - deletedImages.size + thumbnails.length > 16) {
                customAlert('{{ __("messages.upload_up_to_16_photos") }}', 'warning');
                this.value = '';
                return;
            }
            Array.from(this.files).forEach(file => {
                if (!file.type.startsWith('image/')) return;
                const reader = new FileReader();
                reader.onload = function(ev) {
                    thumbnails.push({file: file, url: ev.target.result});
                    renderThumbnails();
                };
                reader.readAsDataURL(file);
            });
            // Clear input so same file can be re-added if removed
            this.value = '';
        });
        loadGoogleMapsScript(window.initMap);
    }

    parentCategory = null;
    // Show loader before fetching
    formFields.innerHTML = `
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0;">
            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">{{ __('messages.loading_fields') }}</span>
            </div>
            <div style="margin-top: 18px; font-size: 1.1rem; color: #555; letter-spacing: 0.02em;">
                {{ __('messages.loading_fields') }}
            </div>
        </div>
    `;

    fetch(`{{ route('web.marketplace.listing.screenFields') }}?category_hashcode=${hashcode}`,{
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    }).then(res => res.json())
        .then(result => {
            

            if (!result.success || !Array.isArray(result.data)) {
                showForm('<div style="padding:20px;color:#888;">{{ __("messages.no_fields_found") }}</div>');
                return;
            }
            categoryTitle.innerHTML =  result.data[0].category_name;
            function escapeHtml(text) {
                return text
                    ? text.replace(/[&<>"']/g, function (m) {
                        return ({
                            '&': '&amp;',
                            '<': '&lt;',
                            '>': '&gt;',
                            '"': '&quot;',
                            "'": '&#39;'
                        })[m];
                    })
                    : '';
            }
            function fetchVariantRelatedOptions(optionHashcode) {
                if (!optionHashcode) return;
                fetch(`{{ route('web.marketplace.listing.fetchVariantRelatedOptions') }}?category_variant_option_hashcode=` + encodeURIComponent(optionHashcode))
                    .then(res => res.json())
                    .then(data => {
                        if (data.success && Array.isArray(data.data)) {
                            data.data.forEach(function(depVariant) {
                                const depHash = depVariant.variant_hashcode;
                                const options = depVariant.options || [];
                                let select = document.getElementById(depHash);
                                if (select) {
                                    let opts = `<option value="">{{ __('messages.select') }}</option>`;
                                    options.forEach(function(opt) {
                                        if (opt.status == 1) {
                                            // Check if this option should be selected based on variantValues
                                            let selected = '';
                                            if (variantValues[depHash] !== undefined) {
                                                if (Array.isArray(variantValues[depHash])) {
                                                    if (variantValues[depHash].includes(opt.hashcode)) {
                                                        selected = ' selected';
                                                    }
                                                } else {
                                                    if (variantValues[depHash] == opt.hashcode) {
                                                        selected = ' selected';
                                                    }
                                                }
                                            }
                                            opts += '<option value="' + opt.hashcode + '"' + selected + '>' + (opt.label ? opt.label : opt.value) + '</option>';
                                        }
                                    });
                                    select.innerHTML = opts;
                                }
                            });
                        }
                    });
            }
            
            // To be accessible globally from other scripts and not just the current function scope
            window.fetchVariantRelatedOptions = fetchVariantRelatedOptions;
            
            function renderField(field) {
                
                if (field.status != 1) return '';
                let html = '';
                let required = field.required ? 'required' : '';
                let label = `<label for="${field.hashcode}">${escapeHtml(field.label)}${field.required ? ' <span style="color:red">*</span>' : ''}</label>`;
                let input = '';
                let name = escapeHtml(field.name);
                let fieldContainerId = field.input_type == 'CK' ? 'CK_' + field.hashcode : (field.input_type == 'MO' ? 'MO_' + field.hashcode : '');

                // Helper for options
                function renderOptions(options, type, fieldHash, dependentVariantHashcodes) {
                    let opts = '';
                    if (!screenFieldsVariants[fieldHash]) screenFieldsVariants[fieldHash] = [];

                    options.filter(opt => opt.status == 1).forEach(opt => {
                        let optLabel = escapeHtml(opt.label); // AR
                        let optOriginalValue = opt.value || ''; //En
                        let optValue = escapeHtml(opt.hashcode);                        

                        screenFieldsVariants[fieldHash].push({'label': optLabel, 'value': optOriginalValue}); // Only for MO

                        let hasOptionRelation =  `data-has-option-relation="${opt.has_option_relation}"`;
                        if (type === 'SO' || type === 'RD') {
                            opts += `<option ${hasOptionRelation} value="${optValue}">${optLabel}</option>`;
                        } else if (type === 'MO') {
                            opts += `<option ${hasOptionRelation} value="${optValue}">${optLabel}</option>`;
                        } else if (type === 'CK') {
                            opts += `<label style="margin-right:12px;"><input type="checkbox" name="${name}[]" value="${optValue}" ${hasOptionRelation}> ${optLabel}</label>`;
                        }
                    });
                    return opts;
                }

                // Get value for this field from variantValues
                let fieldValue = variantValues[field.hashcode];

                switch (field.input_type) {
                    case 'FT':
                        input = `<input type="text" id="${field.hashcode}" name="${name}" class="form-control" ${required} value="${escapeHtml(fieldValue !== undefined ? fieldValue : (field.default_value || ''))}">`;
                        break;
                    case 'DI':
                        input = `<input type="date" id="${field.hashcode}" name="${name}" class="form-control" ${required} value="${escapeHtml(fieldValue !== undefined ? fieldValue : (field.default_value || ''))}">`;
                        break;
                    case 'NB':
                        input = `<input type="number" id="${field.hashcode}" name="${name}" class="form-control" ${required} min="${field.min !== null ? field.min : ''}" max="${field.max !== null ? field.max : ''}" value="${escapeHtml(fieldValue !== undefined ? fieldValue : (field.default_value || ''))}">`;
                        break;
                    case 'PR':
                        input = `<input type="number" step="0.01" id="${field.hashcode}" name="${name}" class="form-control" ${required} value="${escapeHtml(fieldValue !== undefined ? fieldValue : (field.default_value || ''))}">`;
                        break;
                    case 'SO':
                        if (field.has_variant_options) {
                            let onchange = '';
                            if (Array.isArray(field.dependent_variant_hashcodes) && field.dependent_variant_hashcodes.length) {
                                onchange = `onchange="fetchVariantRelatedOptions(this.value)"`;
                            }
                            input = `<select id="${field.hashcode}" name="${name}" class="form-control" ${required} ${onchange}>` +
                                `<option value="">{{ __('messages.select') }}</option>` +
                                renderOptions(field.category_variant_options, 'SO', field.hashcode, field.dependent_variant_hashcodes) +
                                `</select>`;
                        }
                        break;
                    case 'MO':
                        if (field.has_variant_options) {
                            let onchange = '';
                            if (Array.isArray(field.dependent_variant_hashcodes) && field.dependent_variant_hashcodes.length) {
                                onchange = `onchange="fetchVariantRelatedOptions(this.value)"`;
                            }
                            input = `<select id="${field.hashcode}" name="${name}[]" class="form-control" multiple ${required} ${onchange}>` +
                                renderOptions(field.category_variant_options, 'MO', field.hashcode, field.dependent_variant_hashcodes) +
                                `</select>`;
                        }
                        break;
                    case 'RD':
                        if (field.has_variant_options) {
                            let onchange = '';
                            if (Array.isArray(field.dependent_variant_hashcodes) && field.dependent_variant_hashcodes.length) {
                                onchange = `onchange="fetchVariantRelatedOptions(this.value)"`;
                            }
                            input = `<select id="${field.hashcode}" name="${name}" class="form-control" ${required} ${onchange}>` +
                                `<option value="">{{ __('messages.select') }}</option>` +
                                renderOptions(field.category_variant_options, 'RD', field.hashcode, field.dependent_variant_hashcodes) +
                                `</select>`;
                        }
                        break;
                    case 'CK':
                        if (field.has_variant_options) {
                            input = renderOptions(field.category_variant_options, 'CK', field.hashcode, field.dependent_variant_hashcodes);
                            fetchVariantRelatedOptions(this.value, '${field.hashcode}');
                        }
                        break;
                    default:
                        input = `<input type="text" id="${field.hashcode}" name="${name}" class="form-control" ${required}>`;
                }

                return `<div class="form-group" style="margin-bottom:18px;">${label}<div id="${fieldContainerId}">${input}</div></div>`;
            }

            // Fixed fields HTML
            let fixedFieldsHtml1 = `
                    <!-- Category -->
                    <input type="hidden" id="category_hashcode" name="category_hashcode" value="${hashcode}">
                    <!-- Photos Upload -->
                    <div class="form-group" style="margin-bottom:18px;">
                        <label for="photos">{{ __('messages.photos_up_to_16') }}<span style="color:red">*</span></label>
                        <input type="file" id="photos" name="photos[]" class="form-control" accept="image/*" multiple style="margin-bottom:10px; display:none;">
                        <small class="form-text text-muted">{{ __('messages.select_up_to_16_images') }}</small>
                        <div id="photo-thumbnails" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;"></div>
                    </div>
                    
                    <!-- Name -->
                    <div class="form-group" style="margin-bottom:18px;">
                        <label for="fixed_name">{{ __('messages.ad_title') }} <span style="color:red">*</span></label>
                        <input type="text" id="fixed_name" name="name" class="form-control" required>
                    </div>
                    <!-- Description -->
                    <div class="form-group" style="margin-bottom:18px;">
                        <label for="fixed_description">{{ __('messages.description') }} <span style="color:red">*</span></label>
                        <textarea id="fixed_description" name="description" class="form-control" rows="4" required></textarea>
                    </div>
            `;
            let fixedFieldsHtml2 = `<!-- Price -->
                    <div class="form-group" style="margin-bottom:18px;">
                        <label for="fixed_price">{{ __('messages.price') }} ($)<span style="color:red">*</span></label>
                        <input type="number" step="0.01" id="fixed_price" name="price" class="form-control" required>
                    </div>
                    <!-- Location (Lat/Lng) -->
                    <div class="form-group" style="margin-bottom:18px;">
                        <label>{{ __('messages.location') }} <span style="color:red">*</span></label>
                        <div style="display:flex; gap:10px;">
                            <input type="text" id="fixed_lat" name="latitude" class="form-control" placeholder="{{ __('messages.latitude') }}" required>
                            <input type="text" id="fixed_lng" name="longitude" class="form-control" placeholder="{{ __('messages.longitude') }}" required>
                        </div>
                        <div id="map" style="width:100%;height:220px;margin-top:10px;background:#eaeaea;"></div>
                        
                        <small class="form-text text-muted">{{ __('messages.select_location_on_map') }}</small>
                    </div>
                    <!-- Status -->
                    <div class="form-group" style="margin-bottom:18px;">
                        <label for="fixed_status">{{ __('messages.status') }}</label>
                        <div>
                            <input type="checkbox" id="fixed_status" name="status" value="1">
                            <label for="fixed_status" style="display:inline;">{{ __('messages.active') }}</label>
                        </div>
                    </div>
                    <!-- Save Button -->
                    <div class="form-group" style="margin-top: 24px;">
                        <button type="button" id="save-listing-btn" class="btn btn-primary-custom" style="width: 100%;">{{ __('messages.save_listing') }}</button>
                    </div>
            `;

            let formHtml = '<form id="dynamic-category-form" enctype="multipart/form-data" style="margin-bottom: 24px;">' + fixedFieldsHtml1;
            result.data.forEach(field => {
                formHtml += renderField(field);
            });
            formHtml += fixedFieldsHtml2 + '</form>';

            showForm(formHtml);
        });

    function validateForm(formData, form) {
        // Check required fields
        const requiredFields = form.querySelectorAll('[required]');
        let isValid = true;
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        const totalPhotos = existingImages.length - deletedImages.size + thumbnails.length;
        if (totalPhotos < 1 || totalPhotos > 16) {
            document.getElementById('photos').classList.add('is-invalid');
            isValid = false;
        } else {
            document.getElementById('photos').classList.remove('is-invalid');
        }
        if (!isValid) {
            customAlert('{{ __("messages.fill_required_fields") }}', 'warning');
            return false;
        }
        return true;
    }
    document.body.addEventListener('click', function(e) {
        if (e.target && e.target.id === 'save-listing-btn') {
            const form = document.getElementById('dynamic-category-form');
            if (!form) return;

            // Show loader and disable button
            const saveBtn = document.getElementById('save-listing-btn');
            saveBtn.disabled = true;
            const originalBtnHtml = saveBtn.innerHTML;
            saveBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> {{ __('messages.saving') }}`;

            const formData = new FormData(form);

            if (!validateForm(formData, form)) {
                // Hide loader and enable button
                saveBtn.disabled = false;
                saveBtn.innerHTML = originalBtnHtml;
                return;
            }

            // Fixed fields
            const fixedFields = {
                category_hashcode: formData.get('category_hashcode'),
                name: formData.get('name'),
                description: formData.get('description'),
                price: formData.get('price'),
                latitude: formData.get('latitude'),
                longitude: formData.get('longitude'),
                status: formData.get('status') ? 1 : 0,
                item_hashcode: itemHashcode
            };

            // Handle photos

            // Remove all images[] and deleted_images[] keys
            for (let key of formData.keys()) {
                if (key === 'images[]' || key === 'deleted_images[]') {
                    formData.delete(key);
                }
            }

            // Append new images
            thumbnails.forEach(obj => {
                formData.append('photos[]', obj.file);
            });

            // Append deleted images hashcodes
            deletedImages.forEach(hash => {
                formData.append('deleted_images[]', hash);
            });

            // Patch fetch to use our FormData
            const origFetch = window.fetch;
            window.fetch = function(url, opts) {
                if (opts && opts.body instanceof FormData) {
                    // Remove images[] and deleted_images[] from original FormData
                    for (let key of opts.body.keys()) {
                        if (key === 'images[]' || key === 'deleted_images[]') {
                            opts.body.delete(key);
                        }
                    }
                    // Append our images and deleted images
                    thumbnails.forEach(obj => {
                        opts.body.append('images[]', obj.file);
                    });
                    deletedImages.forEach(hash => {
                        opts.body.append('deleted_images[]', hash);
                    });
                }
                window.fetch = origFetch;
                return origFetch.apply(this, arguments);
            };


            const photos = formData.getAll('photos[]');

            const variants = {};

            // Handle checkbox containers (divs with id starting with CK_)
            form.querySelectorAll('div[id^="CK_"]').forEach(function(container) {
                const hashcode = container.id.replace('CK_', '');
                const checkboxes = container.querySelectorAll('input[type="checkbox"]');
                const checkedValues = Array.from(checkboxes)
                    .filter(cb => cb.checked)
                    .map(cb => cb.value);
                if (checkedValues.length > 0) {
                    variants[hashcode] = checkedValues;
                }
            });

            // Handle other dynamic fields (exclude fixed fields and CK_ containers)
            form.querySelectorAll('[id]').forEach(function(input) {
                const hash = input.id;
                if (
                    ['category_hashcode', 'fixed_name', 'fixed_description', 'fixed_price', 'fixed_lat', 'fixed_lng', 'fixed_status', 'photos'].includes(hash)
                ) return;

                // Skip CK_ containers (already handled)
                if (hash.startsWith('CK_')) return;

                // Only process fields with a hashcode id
                if (!/^[a-zA-Z0-9]+$/.test(hash)) return;

                if (input.type === 'radio') {
                    if (input.checked) variants[hash] = input.value;
                } else if (input.tagName === 'SELECT' && input.multiple) {
                    variants[hash] = Array.from(input.selectedOptions).map(opt => opt.value);
                } else if (input.tagName === 'SELECT') {
                    variants[hash] = input.value;
                } else {
                    variants[hash] = input.value;
                }
            });

            // Remove empty arrays from variants
            Object.keys(variants).forEach(k => {
                if (Array.isArray(variants[k]) && variants[k].length === 0) delete variants[k];
            });

            // Prepare payload
            const payload = new FormData();
            Object.entries(fixedFields).forEach(([k, v]) => payload.append(k, v));
            // Add photos
            photos.forEach((file, idx) => {
                if (file && file.name) payload.append('images[]', file);
            });
            payload.append('variants', JSON.stringify(variants));
            const type = new URLSearchParams(window.location.search).get('type') === 'MS' ? 'service' : 'item';
            payload.append('type', type);
            payload.append('barter_status', 0); //For now

            // AJAX request
            fetch('{{ route("web.marketplace.listing.editItem") }}', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: payload
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    customAlert('{{ __("messages.listing_saved") }}');
                    window.location.href ='{{ route("web.customer.myListing") }}';
                } else {
                    customAlert(data.message || '{{ __("messages.failed_to_save_listing") }}', 'warning');
                }
            })
            .catch((error) => {
                console.error('Save listing error:', error);
                customAlert('{{ __("messages.error_while_saving") }}', 'warning');
            })
            .finally(() => {
                // Hide loader and enable button
                saveBtn.disabled = false;
                saveBtn.innerHTML = originalBtnHtml;
            });
        }
    });
});
window.translations = @json(__('messages'));
</script>
<script src="{{ asset('web/js/google-maps.js') }}?v={{ time() }}"></script>
@endpush