@extends('main.layouts.app')
@include('ckfinder::setup')
@section('content')
    {{-- @include('ckfinder::setup') --}}
    <style>
        #profit {
            position: unset;
            inset-block-end: -13px;
            height: auto !important;
        }

        .wrapper-thumb.hidden {
            visibility: hidden;
            position: absolute;
        }

        .img-thumbs {
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            margin: 1.5rem 0;
            padding: 0.75rem;
        }

        .img-thumbs-hidden {
            display: none;
        }

        .wrapper-thumb {
            position: relative;
            display: inline-block;
            margin: 1rem 0;
            justify-content: space-around;
        }

        .img-preview-thumb {
            background: #fff;
            border: 1px solid none;
            border-radius: 0.25rem;
            box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
            margin-right: 1rem;
            max-width: 140px;
            padding: 0.25rem;
        }

        .remove-btn {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .7rem;
            top: -5px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        .remove-btn:hover {
            box-shadow: 0px 0px 3px grey;
            transition: all .3s ease-in-out;
        }


        .tag-bubble {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            background-color: #007bff;
            color: white;
            border-radius: 15px;
        }

        .remove-tag {
            margin-left: 8px;
            cursor: pointer;
            color: white;
            font-weight: bold;
        }

        /* .ck-content ul li{ list-style-position: inside; }
                 .ck-content {color:#000;}
                 .ck.ck-editor__top.ck-reset_all { position:absolute !important; top:0px !important; width:100% !important; z-index:999;  }
                    .ck.ck-editor__main { height:600px !important; overflow-y:scroll !important; padding-top:40px; }
                    main .content-container  { overflow-x: hidden; color:black;}
                    main .ck.ck-content { min-height:600px !important; }

                    .blog_after_crop  { height:250px !important; margin-bottom:12px !important; }
                    .ck-content a {text-decoration: underline;} */
    </style>

    <div class="card mt-4">
        <div class="card-header">
            <div class="row wrapper m-0 p-0 white-bg page-heading w-100">
                <div class="">
                    <h2> Product Page</h2>
                    <ol class="breadcrumb">
                        <!-- <li class="breadcrumb-item"> <a class="" href="{{ route('dashboard') }}"> Home </a> </li> -->
                        <li class="breadcrumb-item"> <a class="" href="{{ route('admin.create-product') }}">Add
                                Products</a></li>

                    </ol>
                </div>
            </div>
        </div>
        <div class="card-body">






            <div class="wrapper wrapper-content m-0 p-0">

                @if ($errors->any())
                    <div class="error">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>⚠️ {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="animated fadeInUp">

                    <form action="{{ route('admin.store-product') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="table_id" value="{{ $product_details->id }}">

                        <div class="card mb-4">
                            <div class="card-body">
                                <h3 class="section-title">Product Information</h3>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label>Product Title* <small class="text-muted">(Max 7-10 words)</small></label>
                                        <input type="text" name="product_title" class="form-control"
                                            value="{{ $product_details->product_title }}" required>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>Product URL* <small class="text-muted">(e.g.,
                                                info-tech-wine-protein)</small></label>
                                        <input type="text" class="form-control" name="product_url" required
                                            value="{{ $product_details->product_url }}" placeholder="Enter product URL">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Description* <small class="text-muted">(Max 1-512 words)</small></label>
                                    <textarea class="ckeditor" id="editor" name="description" required>{{ $product_details->description }}</textarea>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label>Select Category*</label>
                                        <select required class="form-control" id="category" name="category">
                                            <option value="">Select Category</option>
                                            @foreach ($allCategory as $category)
                                                <option value="{{ $category['category_name'] }}"
                                                    {{ $product_details->category == $category['category_name'] ? 'selected' : '' }}>
                                                    {{ $category['category_name'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>Select Feed*</label>
                                        <select required class="form-control" id="feed" name="feed">
                                            <option value="">Select feed</option>
                                            @foreach ($feed as $fe)
                                                <option value="{{ $fe['id'] }}"
                                                    {{ $product_details->feed == $fe['id'] ? 'selected' : '' }}>
                                                    {{ $fe['name'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-body">
                                <h3 class="section-title">Pricing & Inventory</h3>

                                <div class="row">

                                    {{-- <div class="form-group col-md-4">
                                        <label>Exclusive Gst <small class="text-muted">(e.g., 20%)</small></label>
                                        <input type="number" name="exclusive_gst" class="form-control"
                                            value="{{ $product_details->exclusive_gst }}" maxlength="20">
                                    </div> --}}

                                    {{-- gst --}}
                                    <div class="mb-4 col-md-12">
                                        <label class="block text-slate-700 font-medium">Apply GST?</label>
                                        <div class="flex space-x-4 mt-2">
                                            <label class="inline-flex items-center">
                                                <input type="radio" name="apply_gst" value="no"
                                                    class="form-radio text-blue-600"
                                                    onclick="document.getElementById('gst-field').style.display='none'"
                                                    {{ empty($product_details->exclusive_gst) ? 'checked' : '' }}>
                                                <span class="ml-2">No</span>
                                            </label>

                                            <label class="inline-flex items-center">
                                                <input type="radio" name="apply_gst" value="yes"
                                                    class="form-radio text-blue-600"
                                                    onclick="document.getElementById('gst-field').style.display='block'"
                                                    {{ !empty($product_details->exclusive_gst) ? 'checked' : '' }}>
                                                <span class="ml-2">Yes</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div id="gst-field" class="mt-3"
                                        style="{{ !empty($product_details->exclusive_gst) ? '' : 'display: none;' }}">
                                        <label for="exclusive_gst">GST (%)</label>
                                        <input type="number" name="exclusive_gst" id="exclusive_gst"
                                            class="form-control form-control-sm" value="{{ $product_details->exclusive_gst }}"
                                            placeholder="Enter GST %">
                                    </div>
                                    {{-- end gst --}}


                                    <div class="form-group col-md-4">
                                        <label>MRP Amount* <small class="text-muted">(e.g., 99.99)</small></label>
                                        <input type="text" name="price" class="form-control"
                                            value="{{ $product_details->price }}" maxlength="20" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label>Quantity* <small class="text-muted">(e.g., 50)</small></label>
                                        <input type="text" name="quantity" class="form-control"
                                            value="{{ $product_details->quantity }}" maxlength="20" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label>Purchase Amount* <small class="text-muted">(e.g., 49.99)</small></label>
                                        <input type="text" id="purchase_price" name="purchase_price"
                                            class="form-control" value="{{ $product_details->purchase_price }}"
                                            maxlength="20" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label>Sale Amount* <small class="text-muted">(e.g., 79.99)</small></label>
                                        <input type="text" id="sale_price" name="sale_price" class="form-control"
                                            value="{{ $product_details->sale_price }}" maxlength="20" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label>Profit <small class="text-muted">(Calculated)</small></label>
                                        <input type="text" id="profit" name="profit" class="form-control"
                                            value="{{ $product_details->profit }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-body">
                                <h3 class="section-title">SEO & Marketing</h3>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label>Meta Title* <small class="text-muted">(Max 60 characters)</small></label>
                                        <input type="text" name="meta_title" class="form-control"
                                            value="{{ $product_details->meta_title }}" required>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>Meta Description* <small class="text-muted">(Max 100
                                                characters)</small></label>
                                        <input class="form-control" required type="text" name="meta_desc"
                                            value="{{ $product_details->meta_desc }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>Meta Keywords* <small class="text-muted">(Keywords separated by
                                                commas)</small></label>
                                        <input class="form-control" required type="text" name="meta_keywords"
                                            value="{{ $product_details->meta_keywords }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>OG Title* <small class="text-muted">(For social media)</small></label>
                                        <input type="text" name="og_title" class="form-control"
                                            value="{{ $product_details->og_title }}" required>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>OG Description* <small class="text-muted">(Description for social
                                                media)</small></label>
                                        <input class="form-control" required type="text" name="og_desc"
                                            value="{{ $product_details->og_desc }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-body">
                                <h3 class="section-title">Images</h3>

                                <div class="form-group">
                                    <label>Product Images* <small class="text-muted">(1200px × 800px, File size must be
                                            less than 1MB)</small></label>
                                    <div class="file-upload-wrapper">
                                        <input class="form-control form-control-sm" name="pictures[]" id="upload-img"
                                            type="file" multiple accept="image/*">
                                        <small class="text-muted">Upload files or drag and drop</small>
                                    </div>

                                    <div class="img-thumbs img-thumbs-hidden" id="img-preview">
                                        @if ($product_details->pictures)
                                            @foreach (json_decode($product_details->pictures, true) as $img)
                                                <img src="{{ asset($img) }}" width="100" />
                                            @endforeach
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Card Image* <small class="text-muted">(1200px × 1200px, File size must be less
                                            than 1MB, PNG only)</small></label>
                                    <div class="file-upload-wrapper">
                                        <input class="form-control form-control-sm" name="banner_image" id="banner_image"
                                            type="file" accept="image/png">
                                        <small class="text-muted">Upload a file or drag and drop</small>
                                    </div>
                                    @if ($product_details->images)
                                        <img src="{{ asset($product_details->images) }}" width="100" />
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label>OG Image*</label>
                                    <input class="form-control form-control-sm" name="og_image" id="og_image"
                                        type="file" accept="image/*">
                                    @if ($product_details->og_image)
                                        <img src="{{ asset($product_details->og_image) }}" width="100" />
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Tags*</label>
                                    <div id="tag-container" class="tag-container">
                                        <!-- Selected tags will be displayed here as bubbles -->
                                    </div>
                                    <input type="hidden" name="tag" id="tags-input-hidden"
                                        value="{{ $product_details->tag }}">
                                    <input type="text" id="tags-input" class="form-control" placeholder="Add tags"
                                        autocomplete="off" value="{{ $product_details->tag }}">
                                    <div id="tag-suggestions" class="suggestions"></div>
                                </div>

                                <div class="form-group">
                                    <label>HSN code*</label>
                                    <input type="text" name="productcode" class="form-control"
                                        value="{{ $product_details->productcode }}">
                                </div>

                                <div class="form-group mb-0">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="best_seller"
                                            value="1" id="bestSeller"
                                            {{ $product_details->best_seller ? 'checked' : '' }}>
                                        <label class="form-check-label" for="bestSeller">Best Seller</label>
                                    </div>

                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="home" value="1"
                                            id="home" {{ $product_details->home ? 'checked' : '' }}>
                                        <label class="form-check-label" for="home">Home</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg" name="save" value="submit">Update
                                Product</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    {{-- <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script> --}}

    {{-- <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script> --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
    <link href="{{ url('css/bootstrap-tokenfield.css') }}" rel="stylesheet" />
    <script src="{{ url('js/bootstrap-tokenfield.js') }}"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>



    <!-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get references to the input and suggestions box
            const tagsInput = document.getElementById('tags-input');
            const tagsContainer = document.getElementById('tag-container');
            const hiddenInput = document.getElementById('tags-input-hidden');
            const suggestionsContainer = document.getElementById('tag-suggestions');

            let tags = [];

            function addTag(tag) {
                if (!tags.includes(tag)) {
                    tags.push(tag);
                    const tagBubble = document.createElement('div');
                    tagBubble.className = 'tag-bubble';
                    tagBubble.innerText = tag;

                    const removeBtn = document.createElement('span');
                    removeBtn.innerText = 'x';
                    removeBtn.className = 'remove-tag';
                    removeBtn.onclick = () => {
                        removeTag(tagBubble, tag);
                    };

                    tagBubble.appendChild(removeBtn);
                    tagsContainer.appendChild(tagBubble);
                    updateHiddenInput();
                }
                tagsInput.value = '';
                suggestionsContainer.innerHTML = ''; // Clear suggestions
                suggestionsContainer.style.display = 'none'; // Hide suggestions
            }

            function removeTag(tagBubble, tag) {
                tagsContainer.removeChild(tagBubble); // Remove the tag visually
                tags = tags.filter(t => t !== tag); // Remove from tags array
                updateHiddenInput(); // Update the hidden input
            }

            function updateHiddenInput() {
                hiddenInput.value = tags.join(',');
            }

            tagsInput.addEventListener('input', function() {
                const inputValue = this.value.trim();
                suggestionsContainer.innerHTML = '';

                if (inputValue.length > 0) {
                    fetch(`/admin/tags/suggestions?query=${inputValue}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.length > 0) {
                                suggestionsContainer.style.display = 'block'; // Show suggestions
                                data.forEach(tag => {
                                    const suggestionItem = document.createElement('div');
                                    suggestionItem.className = 'suggestion-item';
                                    suggestionItem.innerText = tag;
                                    suggestionItem.onclick = () => {
                                        addTag(tag);
                                        suggestionsContainer.innerHTML = '';
                                        suggestionsContainer.style.display =
                                            'none'; // Hide suggestions after selection
                                    };
                                    suggestionsContainer.appendChild(suggestionItem);
                                });
                            } else {
                                suggestionsContainer.style.display = 'none'; // Hide if no suggestions
                            }
                        })
                        .catch(error => console.error('Error fetching tags:', error));
                } else {
                    suggestionsContainer.style.display = 'none'; // Hide if input is empty
                }
            });

            tagsInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter' && this.value.trim() !== '') {
                    event.preventDefault();
                    addTag(this.value.trim());
                }
            });
        });
    </script> -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tagsInput = document.getElementById('tags-input');
            const tagsContainer = document.getElementById('tag-container');
            const hiddenInput = document.getElementById('tags-input-hidden');
            const suggestionsContainer = document.getElementById('tag-suggestions');
            let tags = hiddenInput.value ? hiddenInput.value.split(',').map(tag => tag.trim()) : [];

            function addTag(tag) {
                if (!validateTag(tag) || tags.some(t => t.toLowerCase() === tag.toLowerCase())) return;

                tags.push(tag);
                const tagBubble = document.createElement('span');
                tagBubble.className = 'tag-bubble';
                tagBubble.innerHTML = `${tag} <span class="remove-tag">×</span>`;
                tagBubble.querySelector('.remove-tag').onclick = () => removeTag(tagBubble, tag);

                tagsContainer.appendChild(tagBubble);
                updateHiddenInput();
                tagsInput.value = '';
                suggestionsContainer.innerHTML = '';
                suggestionsContainer.style.display = 'none';
            }

            function removeTag(tagBubble, tag) {
                tagsContainer.removeChild(tagBubble);
                tags = tags.filter(t => t !== tag);
                updateHiddenInput();
            }

            function updateHiddenInput() {
                hiddenInput.value = tags.join(',');
            }

            function validateTag(tag) {
                const tagPattern = /^[a-zA-Z0-9-]{1,30}$/;
                return tagPattern.test(tag);
            }

            function debounce(func, delay) {
                let timeout;
                return function(...args) {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => func.apply(this, args), delay);
                };
            }

            tagsInput.addEventListener(
                'input',
                debounce(function() {
                    const inputValue = tagsInput.value.trim();
                    suggestionsContainer.innerHTML = '';

                    if (inputValue.length > 0) {
                        fetch(`/admin/tags/suggestions?query=${inputValue}`)
                            .then(response => response.json())
                            .then(data => {
                                if (data.length > 0) {
                                    suggestionsContainer.style.display = 'block';
                                    data.forEach(tag => {
                                        const suggestionItem = document.createElement('div');
                                        suggestionItem.className = 'suggestion-item';
                                        suggestionItem.innerText = tag;
                                        suggestionItem.onclick = () => addTag(tag);
                                        suggestionsContainer.appendChild(suggestionItem);
                                    });
                                } else {
                                    const noSuggestions = document.createElement('div');
                                    noSuggestions.className = 'suggestion-item no-suggestions';
                                    noSuggestions.innerText = 'No suggestions found';
                                    suggestionsContainer.appendChild(noSuggestions);
                                    suggestionsContainer.style.display = 'block';
                                }
                            })
                            .catch(error => console.error('Error fetching tags:', error));
                    } else {
                        suggestionsContainer.style.display = 'none';
                    }
                }, 300)
            );

            tagsInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter' && tagsInput.value.trim() !== '') {
                    event.preventDefault();
                    addTag(tagsInput.value.trim());
                }
            });

            // Populate tags on page load
            tags.forEach(tag => {
                const tagBubble = document.createElement('span');
                tagBubble.className = 'tag-bubble';
                tagBubble.innerHTML = `${tag} <span class="remove-tag">×</span>`;
                tagBubble.querySelector('.remove-tag').onclick = () => removeTag(tagBubble, tag);
                tagsContainer.appendChild(tagBubble);
            });
        });
    </script>
    {{-- <script>

const imgUpload = document.getElementById('upload-img');
const imgPreview = document.getElementById('img-preview');
const existingPicturesInput = document.getElementById('existing-pictures');

// DataTransfer object to handle new images
const dataTransfer = new DataTransfer();
const newFilesRendered = new Set(); // Track new files by name

// Parse existing pictures from the hidden input
const existingPictures = JSON.parse(existingPicturesInput.value || '[]');

// Initialize previews for existing images
document.addEventListener('DOMContentLoaded', () => {
    renderExistingImages(existingPictures);
});

// Handle file selection
imgUpload.addEventListener('change', (event) => {
    const selectedFiles = Array.from(imgUpload.files);

    // Add new files to DataTransfer and avoid duplicates
    selectedFiles.forEach(file => {
        if (!newFilesRendered.has(file.name)) {
            dataTransfer.items.add(file);
            newFilesRendered.add(file.name);
        }
    });

    // Update input files
    imgUpload.files = dataTransfer.files;

    // Re-render all previews
    renderPreviews();
});

// Render previews (existing + new images)
function renderPreviews() {
    imgPreview.innerHTML = ''; // Clear previous previews
    renderExistingImages(existingPictures);
    renderNewImages(Array.from(dataTransfer.files));
}

// Render existing images
function renderExistingImages(images) {
    images.forEach((imageUrl) => {
        const wrapper = createPreviewWrapper(imageUrl, false);
        imgPreview.appendChild(wrapper);
    });
}

// Render new images
function renderNewImages(files) {
    files.forEach((file, index) => {
        const wrapper = createPreviewWrapper(URL.createObjectURL(file), true, index);
        imgPreview.appendChild(wrapper);
    });
}

// Create preview wrapper for images
function createPreviewWrapper(source, isNew, index = null) {
    const wrapper = document.createElement('div');
    wrapper.classList.add('wrapper-thumb');

    const img = document.createElement('img');
    img.src = source;
    img.classList.add('img-preview-thumb');
    wrapper.appendChild(img);

    const removeBtn = document.createElement('span');
    removeBtn.classList.add('remove-btn');
    removeBtn.textContent = 'x';
    wrapper.appendChild(removeBtn);

    // Handle removal
    removeBtn.addEventListener('click', () => {
        if (isNew) {
            // Remove new file from DataTransfer and update files
            dataTransfer.items.remove(index);
            imgUpload.files = dataTransfer.files;
            newFilesRendered.delete(dataTransfer.files[index]?.name || '');
        } else {
            // Remove existing image
            const imageIndex = existingPictures.indexOf(source);
            if (imageIndex > -1) {
                existingPictures.splice(imageIndex, 1);
                existingPicturesInput.value = JSON.stringify(existingPictures);
            }
        }
        wrapper.remove(); // Remove from DOM
    });

    return wrapper;
}


</script> --}}


    <script>
        // DOM Elements
        const imgUpload = document.getElementById('upload-img');
        const imgPreview = document.getElementById('img-preview');
        const existingPicturesInput = document.getElementById('existing-pictures');
        const tableIdInput = document.querySelector('input[name="table_id"]'); // Get the hidden table_id input
        const csrfToken = document.querySelector('#update-product input[name="_token"]').value;

        // DataTransfer object to handle new images
        const dataTransfer = new DataTransfer();
        const newFilesRendered = new Set(); // Track new files by name

        // Parse existing pictures from the hidden input
        const existingPictures = JSON.parse(existingPicturesInput.value || '[]');

        // Initialize previews for existing images
        document.addEventListener('DOMContentLoaded', () => {
            renderExistingImages(existingPictures);
        });

        // Handle file selection
        imgUpload.addEventListener('change', (event) => {
            const selectedFiles = Array.from(imgUpload.files);

            // Add new files to DataTransfer and avoid duplicates
            selectedFiles.forEach(file => {
                if (!newFilesRendered.has(file.name)) {
                    dataTransfer.items.add(file);
                    newFilesRendered.add(file.name);
                }
            });

            // Update input files
            imgUpload.files = dataTransfer.files;

            // Re-render all previews
            renderPreviews();

            // Send AJAX call to upload new files
            uploadImages(Array.from(dataTransfer.files), tableIdInput.value); // Pass table_id
        });

        // Render previews (existing + new images)
        function renderPreviews() {
            imgPreview.innerHTML = ''; // Clear previous previews
            renderExistingImages(existingPictures);
            renderNewImages(Array.from(dataTransfer.files));
        }

        // Render existing images
        function renderExistingImages(images) {
            images.forEach((imageUrl) => {
                const wrapper = createPreviewWrapper(imageUrl, false);
                imgPreview.appendChild(wrapper);
            });
        }

        // Render new images
        function renderNewImages(files) {
            files.forEach((file, index) => {
                const wrapper = createPreviewWrapper(URL.createObjectURL(file), true, index);
                imgPreview.appendChild(wrapper);
            });
        }

        // Create preview wrapper for images
        function createPreviewWrapper(source, isNew, index = null) {
            const wrapper = document.createElement('div');
            wrapper.classList.add('wrapper-thumb');

            const img = document.createElement('img');
            img.src = source;
            img.classList.add('img-preview-thumb');
            wrapper.appendChild(img);

            const removeBtn = document.createElement('span');
            removeBtn.classList.add('remove-btn');
            removeBtn.textContent = 'x';
            wrapper.appendChild(removeBtn);

            // Handle removal
            removeBtn.addEventListener('click', () => {
                if (isNew) {
                    // Remove new file from DataTransfer and update files
                    dataTransfer.items.remove(index);
                    imgUpload.files = dataTransfer.files;
                    newFilesRendered.delete(dataTransfer.files[index]?.name || '');

                    // Send AJAX call to remove unsaved image
                    removeImageFromDatabase(source, true);
                } else {
                    // Remove existing image
                    const imageIndex = existingPictures.indexOf(source);
                    if (imageIndex > -1) {
                        existingPictures.splice(imageIndex, 1);
                        existingPicturesInput.value = JSON.stringify(existingPictures);

                        // Send AJAX call to remove image from the database
                        removeImageFromDatabase(source, false);
                    }
                }
                wrapper.remove(); // Remove from DOM
            });

            return wrapper;
        }
        const csrfTokens = document.querySelector('#update-product input[name="_token"]').value;
        // AJAX call to upload new images
        function uploadImages(files, tableId) {
            const formData = new FormData();
            files.forEach(file => {
                formData.append('images[]', file);
            });
            formData.append('id', tableId); // Append the table_id

            $.ajax({
                url: '/admin/upload-images', // Adjust the endpoint
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // For CSRF token
                    'X-CSRF-TOKEN': csrfTokens // For CSRF token
                },
                success: (response) => {
                    if (response.success) {
                        window.location.reload();
                    } else {
                        alert('Failed to upload images');
                    }
                },
                error: (error) => {
                    console.error('Error uploading images:', error);
                }
            });
        }

        // AJAX call to remove image from the database
        function removeImageFromDatabase(imageUrl, isNew) {

            $.ajax({
                url: '/admin/remove-image', // Adjust the endpoint
                method: 'POST',
                data: {
                    image: imageUrl,
                    isNew: isNew,
                    imageId: tableIdInput.value,
                },
                headers: {
                    // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // For CSRF token
                    'X-CSRF-TOKEN': csrfTokens // For CSRF token
                },
                success: (response) => {
                    if (response.success) {
                        window.location.reload();
                    } else {
                        alert('Failed to remove image');
                    }
                },
                error: (error) => {
                    console.error('Error removing image:', error);
                }
            });
        }
    </script>

    <script>
        //  ClassicEditor
        //   .create( document.querySelector( '#editor' ) )
        //   .catch( error => {
        //       console.error( error );
        //   } );

        var IFRAME_SRC = "//cdn.iframe.ly/api/iframe";
        var IFRAME_API_KEY = "987e17dcd381083dc5b148";
        //Do not add WatchDog and Markdown plugins in ckeditor5
        //Latest ckeditor5 v29.0.0
        ClassicEditor.create(document.querySelector("#editor"), {
                removePlugins: ["Title", "Markdown"],
                toolbar: {
                    items: [
                        "heading",
                        "|",
                        "fontSize",
                        "fontFamily",
                        "alignment",
                        "bold",
                        "italic",
                        "underline",
                        "link",
                        "bulletedList",
                        "numberedList",
                        "|",
                        "indent",
                        "outdent",
                        "|",
                        "CKFinder",
                        "ImageInsert",
                        "ImageResize",
                        "ImageUpload",
                        "blockQuote",
                        "insertTable",
                        "mediaEmbed",
                        "undo",
                        "redo",
                        "fontColor",
                        "fontBackgroundColor",
                        "highlight",
                        "|",
                        "horizontalLine",
                        "pageBreak",
                        "superscript",
                        "subscript",
                        "codeBlock",
                    ],
                },
                // autosave: {
                // 	save( editor ) {
                // 	var form = $("#saveblog")[0];
                // 	var formData= new FormData(form);
                // 	formData.append('editor',editor.getData());
                // 		return saveBlog(formData );
                // 	}
                // },
                fontFamily: {
                    options: [
                        "default",
                        'Times, "Times New Roman", serif',
                        "Helvetica, Arial, sans-serif",
                        "Ubuntu Mono, Courier New, Courier, monospace",
                        "Open Sans, sans-serif",
                        "serif",
                        "script",
                        "sans-serif",
                        "cursive",
                        "fantasy",
                        "Poly",
                        "Good Times Rg",
                        "Colus",
                        "Amagro",
                        "Butler",
                        "Foundry Sterling",
                        "Butler Stencil",
                    ],
                    supportAllValues: true,
                },
                language: "en",
                fontSize: {
                    options: [
                        "default", 9, 10, 11, 13, 15, 17, 18, 19, 21, 23, 25, 27, 29, 30, 32, 34, 35,
                        37, 39, 40, 42, 44, 46, 48,
                    ],
                },
                fontColor: {
                    columns: 10,
                    documentColors: 200,
                    colors: [{
                            color: "hsl(205, 62%, 67%)",
                            label: " "
                        },
                        {
                            color: "hsl(208, 53%, 26%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 54%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 54%, 89%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 54%, 78%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 54%, 68%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 54%, 57%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 63%, 46%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 63%, 41%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 63%, 35%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 63%, 29%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 63%, 24%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 78%, 96%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 78%, 91%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 78%, 83%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 78%, 74%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 78%, 66%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 78%, 57%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 59%, 50%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 59%, 43%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 59%, 37%)",
                            label: " "
                        },
                        {
                            color: "hsl(6, 59%, 30%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 39%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 39%, 91%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 39%, 81%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 39%, 72%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 39%, 63%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 39%, 53%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 34%, 47%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 34%, 40%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 34%, 34%)",
                            label: " "
                        },
                        {
                            color: "hsl(283, 34%, 28%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 39%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 39%, 89%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 39%, 79%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 39%, 68%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 39%, 58%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 44%, 47%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 44%, 42%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 44%, 36%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 44%, 30%)",
                            label: " "
                        },
                        {
                            color: "hsl(282, 44%, 25%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 51%, 94%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 51%, 89%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 51%, 78%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 51%, 67%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 51%, 55%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 64%, 44%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 64%, 39%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 64%, 34%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 64%, 28%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 64%, 23%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 70%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 70%, 91%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 70%, 81%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 70%, 72%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 70%, 63%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 70%, 53%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 62%, 47%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 62%, 40%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 62%, 34%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 62%, 28%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 55%, 94%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 55%, 88%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 55%, 77%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 55%, 65%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 55%, 54%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 42%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 37%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 32%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 27%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 22%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 42%, 94%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 42%, 87%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 42%, 74%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 42%, 61%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 45%, 49%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 36%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 31%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 27%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 23%)",
                            label: " "
                        },
                        {
                            color: "hsl(168, 76%, 19%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 45%, 94%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 45%, 88%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 45%, 77%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 45%, 65%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 45%, 53%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 42%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 37%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 32%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 27%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 22%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 61%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 61%, 90%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 61%, 80%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 61%, 69%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 61%, 59%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 49%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 43%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 37%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 31%)",
                            label: " "
                        },
                        {
                            color: "hsl(145, 63%, 25%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 89%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 89%, 90%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 89%, 80%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 89%, 70%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 89%, 60%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 89%, 50%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 88%, 44%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 88%, 38%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 88%, 32%)",
                            label: " "
                        },
                        {
                            color: "hsl(48, 88%, 26%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 90%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 90%, 90%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 90%, 80%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 90%, 71%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 90%, 61%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 90%, 51%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 86%, 45%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 86%, 39%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 86%, 33%)",
                            label: " "
                        },
                        {
                            color: "hsl(37, 86%, 27%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 80%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 80%, 90%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 80%, 81%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 80%, 71%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 80%, 61%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 80%, 52%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 74%, 46%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 74%, 39%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 74%, 33%)",
                            label: " "
                        },
                        {
                            color: "hsl(28, 74%, 27%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 71%, 94%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 71%, 88%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 71%, 77%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 71%, 65%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 71%, 53%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 100%, 41%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 100%, 36%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 100%, 31%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 100%, 26%)",
                            label: " "
                        },
                        {
                            color: "hsl(24, 100%, 22%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 15%, 99%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 15%, 99%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 15%, 97%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 15%, 96%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 15%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 15%, 94%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 5%, 82%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 3%, 71%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 2%, 60%)",
                            label: " "
                        },
                        {
                            color: "hsl(192, 1%, 49%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 8%, 98%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 8%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 8%, 90%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 8%, 86%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 8%, 81%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 8%, 76%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 5%, 67%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 4%, 58%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 3%, 49%)",
                            label: " "
                        },
                        {
                            color: "hsl(204, 3%, 40%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 9%, 96%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 9%, 92%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 9%, 85%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 9%, 77%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 9%, 69%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 9%, 62%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 54%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 47%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 40%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 32%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 95%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 91%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 81%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 72%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 62%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 6%, 53%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 46%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 40%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 34%)",
                            label: " "
                        },
                        {
                            color: "hsl(184, 5%, 27%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 12%, 93%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 12%, 86%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 12%, 71%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 12%, 57%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 15%, 43%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 29%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 25%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 22%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 18%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 15%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 9%, 92%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 9%, 85%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 9%, 70%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 9%, 55%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 14%, 39%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 24%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 21%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 18%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 16%)",
                            label: " "
                        },
                        {
                            color: "hsl(210, 29%, 13%)",
                            label: " "
                        },
                    ],
                },
                image: {
                    resizeOptions: [{
                            name: 'resizeImage:original',
                            value: null,
                            icon: 'original'
                        },
                        {
                            name: 'resizeImage:25',
                            value: '25',
                            icon: 'small'
                        },
                        {
                            name: 'resizeImage:50',
                            value: '50',
                            icon: 'medium'
                        },
                        {
                            name: 'resizeImage:75',
                            value: '75',
                            icon: 'large'
                        }
                    ],
                    toolbar: [
                        "imageTextAlternative",
                        "|",
                        "imageStyle:alignLeft",
                        "imageStyle:block",
                        "imageStyle:inline",
                        "imageStyle:alignRight",
                        'imageStyle:side',
                        'resizeImage:25',
                        'resizeImage:50',
                        'resizeImage:75',
                        'resizeImage:original',
                        '|',
                        'toggleImageCaption',
                    ],
                    styles: ["full", "alignLeft", "alignRight", "side"],
                    options: ['inline', 'block', 'side'],
                },
                ckfinder: {
                    uploadUrl: "/ckfinder/connector?command=QuickUpload&type=Files&responseType=json",
                },
                table: {
                    contentToolbar: [
                        "tableCellProperties",
                        "tableColumn",
                        "tableRow",
                        "mergeTableCells",
                        "tableProperties",
                    ],
                },
                mediaEmbed: {
                    // Previews are always enabled if there’s a provider for a URL (below regex catches all URLs)
                    // By default `previewsInData` are disabled, but let’s set it to `false` explicitely to be sure
                    previewsInData: false,

                    providers: [{
                        // hint: this is just for previews. Get actual HTML codes by making API calls from your CMS
                        name: "iframely previews",

                        // Match all URLs or just the ones you need:
                        url: /.+/,

                        html: (match) => {
                            const url = match[0];

                            var iframeUrl =
                                IFRAME_SRC +
                                "?app=1&api_key=" +
                                IFRAME_API_KEY +
                                "&url=" +
                                encodeURIComponent(url);
                            // alternatively, use &key= instead of &api_key with the MD5 hash of your api_key
                            // more about it: https://iframely.com/docs/allow-origins
                            return (
                                // If you need, set maxwidth and other styles for 'iframely-embed' class - it's yours to customize
                                '<div class="iframely-embed">' +
                                '<div class="iframely-responsive">' +
                                `<iframe src="${iframeUrl}" ` +
                                'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
                                "</iframe>" +
                                "</div>" +
                                "</div>"
                            );
                        },
                    }, ],
                },
            })
            .then((editor) => {
                window.editor = editor;
            })
            .catch((error) => {
                console.error("Oops, Something gone wrong!");
                console.error("Please, report the following error.");
                console.warn("Build id: soklze91xmth-mb246bfgkmve");
                console.error(error);
            });

        document.addEventListener("DOMContentLoaded", function() {
            const price = document.querySelector("input[name='price']");
            const afterDiscount = document.querySelector("input[name='after_discount']");
            const discountInput = document.querySelector("input[name='discount']");
            const gstInput = document.querySelector("input[name='Gst']");

            discountInput.addEventListener("input", function() {
                let discountPrice = parseFloat(discountInput.value) || 0;
                let gstRate = 18; // Assuming 18% GST
                let priceValue = parseFloat(price.value) || 0;

                let discountedPrice = priceValue - discountPrice; // Calculating discounted price
                afterDiscount.value = discountedPrice.toFixed(2);

                let gstAmount = (discountedPrice * gstRate) / 100;

                gstInput.value = gstAmount.toFixed(2);
            });
        });
    </script>

@endsection