@extends('main.layouts.app')
@include('ckfinder::setup')
@section('content')

    <style>
        #profit {
            position: unset;
            inset-block-end: -13px;
            height: auto !important;
        }

        .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;
        }

        .suggestions {
            border: 1px solid #ccc;
            background-color: white;
            max-height: 200px;
            overflow-y: auto;
            position: absolute;
            z-index: 999;
            width: calc(100% - 20px);
            /* Adjust width to fit under the input */
            display: none;
            /* Start hidden */
        }

        .suggestion-item {
            padding: 10px;
            cursor: pointer;
        }

        .suggestion-item:hover {
            background-color: #f0f0f0;
        }

        .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;
        }

        /* General styles for the Select2 container */
        .select2-container {
            width: 100% !important;
            /* Make the dropdown full width */
        }

        /* Style the select2 dropdown itself */
        .select2-selection {
            height: 38px;
            /* Match the input height */
            border: 1px solid #ced4da;
            /* Border color */
            border-radius: 4px;
            /* Rounded corners */
            padding: 6px 12px;
            /* Padding */
        }

        /* Style for the selected option */
        .select2-selection__rendered {
            line-height: 28px;
            /* Center align text */
            color: #495057;
            /* Text color */
        }

        /* Placeholder style */
        .select2-selection__placeholder {
            color: #999;
            /* Placeholder color */
        }

        /* Focus state */
        .select2-selection--single:focus {
            border-color: #80bdff;
            /* Border color on focus */
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
            /* Shadow effect on focus */
        }

        /* Style the dropdown items */
        .select2-results {
            max-height: 200px;
            /* Max height for dropdown */
            overflow-y: auto;
            /* Scrollable if overflow */
        }

        /* Style for each dropdown item */
        .select2-results__option {
            padding: 8px 12px;
            /* Padding for dropdown items */
            cursor: pointer;
            /* Cursor style */
        }

        /* Highlighted dropdown item */
        .select2-results__option--highlighted {
            background-color: #007bff;
            /* Background color for highlighted item */
            color: white;
            /* Text color for highlighted item */
        }

        .custom-modal-width {
            max-width: 800px;
            /* Set your desired width here */
            width: 100%;
            /* This ensures it is responsive */
        }

        .section-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #eee;
        }

        .card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }

        .card-header {
            background-color: #f8f9fa;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e0e0e0;
        }

        .card-body {
            padding: 1.5rem;
        }

        .file-upload-wrapper {
            border: 2px dashed #ddd;
            padding: 1rem;
            text-align: center;
            border-radius: 4px;
            background-color: #f9f9f9;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .text-muted {
            font-size: 0.85rem;
        }
    </style>




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

    <div class="card mt-4">

        <div class="card-head">
            <div class="row wrapper mx-0 border-bottom white-bg page-heading">
                <div class="col-sm-8">
                    <h2> Product Page </h2>
                    <ol class="breadcrumb">
                        <!-- <li class="breadcrumb-item"> <a class="" href="dashboard"> Home </a> </li> -->
                        <li class="breadcrumb-item"> <a class="" href="{{ route('admin.create-product') }}">Create New
                                Product</a></li>
                    </ol>
                </div>
                <div class="col-sm-4">
                    <div class="title-action"></div>
                </div>
            </div>
        </div>


        <div class="card-body mt-0 pt-0">
            <div class="wrapper wrapper-content m-0 p-0">
                <div class="animated fadeInUp">
                    <form action="{{ route('admin.store-product') }}" method="post" enctype="multipart/form-data">
                        @csrf

                        {{-- Show all validation errors --}}
                        @if ($errors->any())
                            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4"
                                role="alert">
                                <strong class="font-bold">Oops!</strong> There were some problems with your input.
                                <ul class="mt-2 list-disc list-inside">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif


                        <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=""
                                            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
                                            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"></textarea>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label>Select Category*</label>
                                        <select required class="form-control" id="category" name="category">
                                            <option value="">Select Category</option>
                                                                                    </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label>Select Feed*</label>
                                        <select required class="form-control" id="feed" name="feed">
                                            <option value="">Select feed</option>
                                                                                    </select>
                                    </div>

                                    <!-- <div class="form-group col-md-4">
                            <label>Select Attribute*</label>
                            <select required class="form-control" id="attribute" name="attribute">
                                <option value="">Select Attribute</option>
                                                            </select>
                        </div> -->
                                </div>
                            </div>
                        </div>



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


                                {{-- <div class="form-group col-md-4">
                                    <label>Exclusive Gst</label>
                                    <input type="number" name="exclusive_gst" class="form-control" value=""
                                        maxlength="20"> --}}
                                {{-- </div> --}}

                            <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" checked
                                            class="form-radio text-blue-600"
                                            onclick="document.getElementById('gst-field').style.display='none'">
                                        <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'">
                                        <span class="ml-2">Yes</span>
                                    </label>
                                </div>
                            </div>

                            <div id="gst-field" class="mt-3" style="display: none;">
                                <label for="exclusive_gst">GST (%)</label>
                                <input type="number" name="exclusive_gst" id="exclusive_gst" class="form-control form-control-sm"
                                    placeholder="Enter GST %">
                            </div>

                            
                            <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="" 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=""
                                    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="" 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="" 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="0.00"
                                    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" 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">
                        </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">
                        </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" 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">
                        </div>
                    </div>

                </div>
            </div>

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

                    <!-- <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="barrierImages" name="barrier_images" value="1">
                            <label class="form-check-label" for="barrierImages">Barrier Images (500x600)*</label>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="ogImage" name="og_image_check" value="1" checked>
                            <label class="form-check-label" for="ogImage">OG Image (800x900)*</label>
                        </div> -->

                    <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 required accept="image/*">
                            <small class="text-muted">Upload files or drag and drop</small>
                        </div>
                        <div class="img-thumbs img-thumbs-hidden" id="img-preview"></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" required accept="image/png">
                            <small class="text-muted">Upload a file or drag and drop</small>
                        </div>
                    </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/*">
                    </div>
                </div>
            </div>

            <!-- Additional fields (kept from original form) -->
            <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="">
                        <input type="text" id="tags-input" class="form-control" placeholder="Add tags"
                            autocomplete="off">
                        <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="" maxlength="20">
                    </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">
                            <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">
                            <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">Save
                    Product</button>
            </div>
            </form>
        </div>
    </div>

    </div>

    </div>







    {{-- <script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>
    <script>
        CKFinder.config({
            connectorPath: '/ckfinder/connector'
        });
    </script> --}}
    {{-- <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script> --}}
    <script src="https://code.jquery.com/jquery-3.5.1.min.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>
        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());
                }
            });
        });

        document.getElementById('pictures').addEventListener('change', function(event) {
            const imagePreview = document.getElementById('imagePreview');
            imagePreview.innerHTML = ''; // Clear previous previews
            const files = event.target.files;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.width = '100px';
                        img.style.margin = '10px';
                        imagePreview.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });
        document.getElementById('secondVariantForm').addEventListener('submit', function(event) {
            event.preventDefault();
            // Add your AJAX or form submission logic here
            $('#variantModal').modal('hide'); // Close the modal after submission
        });
    </script>
    <!-- jQuery -->





    <script>
        var imgUpload = document.getElementById('upload-img'),
            imgPreview = document.getElementById('img-preview'),
            dataTransfer = new DataTransfer(); // To manage the accumulated files

        imgUpload.addEventListener('change', previewImgs, true);

        function previewImgs(event) {
            const selectedFiles = Array.from(imgUpload.files); // Get the newly selected files

            // Add new files to the DataTransfer object
            selectedFiles.forEach(file => {
                dataTransfer.items.add(file);
            });

            // Update the input element's files with the accumulated list
            imgUpload.files = dataTransfer.files;

            // Clear the preview container and render all accumulated files
            imgPreview.innerHTML = '';

            Array.from(dataTransfer.files).forEach((file, index) => {
                // Create wrapper div for the image and remove button
                const wrapper = document.createElement('div');
                wrapper.classList.add('wrapper-thumb');

                // Create remove button
                const removeBtn = document.createElement("span");
                const nodeRemove = document.createTextNode('x');
                removeBtn.classList.add('remove-btn');
                removeBtn.appendChild(nodeRemove);

                // Create image preview
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.classList.add('img-preview-thumb');

                // Append elements to the wrapper
                wrapper.appendChild(img);
                wrapper.appendChild(removeBtn);
                imgPreview.appendChild(wrapper);

                // Add click event listener to remove button
                removeBtn.addEventListener('click', function() {
                    // Remove the file from the DataTransfer object
                    dataTransfer.items.remove(index);

                    // Update the input element's files
                    imgUpload.files = dataTransfer.files;

                    // Remove the preview thumbnail
                    wrapper.remove();
                });
            });

            // Ensure the preview container is visible
            imgPreview.classList.remove('img-thumbs-hidden');
        }
    </script>


    <script>
        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);
            });
        });

        function calculateProfit() {
            const purchase = parseFloat(document.getElementById("purchase_price").value) || 0;
            const sale = parseFloat(document.getElementById("sale_price").value) || 0;
            const profit = sale - purchase;
            document.getElementById('profit').value = profit.toFixed(2);
        }


        document.getElementById('purchase_price').addEventListener('input', calculateProfit);
        document.getElementById('sale_price').addEventListener('input', calculateProfit);



        document.querySelector('form').addEventListener('submit', function(e) {
            const editorContent = editor.getData().trim(); // Get CKEditor content

            // Validate content
            if (!editorContent) {
                e.preventDefault();
                alert('Description is required');
                editor.editing.view.focus(); // Focus the editor
                return false;
            }

            // Validate word count (1-30 words)
            const wordCount = editorContent.split(/\s+/).length;
            if (wordCount < 1 || wordCount > 1000) {
                e.preventDefault();
                alert('Description must be between 1-512 words');
                return false;
            }
        });
    </script>

@endsection