@extends('admin.layouts.main')
@section('title', 'Edit Product')
@section('main')
    <h2 class="mb-4">Edit Product</h2>
    <a href="{{ route('admin.products') }}" class="btn btn-secondary mb-3">
        <i class="bi bi-arrow-left"></i> Back to Products
    </a>
    <div class="container  row mt-5">
        <form id="product-form" method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="product_id" value="{{$product->id}}">

            <div class="row mb-3">
                <div class="col-md-6 selectErr">
                    <label for="category_id" class="form-label">Category</label>
                    <select name="category_id" id="category_id" class="form-select select2">
                        <option value=""></option>
                        @foreach($category as $key => $val)
                            <option
                                value="{{$val->id}}" {{ $product->category_id == $val->id ? 'selected' : '' }}>{{$val->name}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6 selectErr">
                    <label for="sub_category_id" class="form-label">Sub Category</label>
                    <select name="sub_category_id" id="sub_category_id" class="form-select select2" disabled>
                        <option value="">Select a subcategory</option>
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" name="name" id="name" class="form-control" required
                           value="{{ old('name',$product->name) }}">
                </div>
            </div>


            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="slug" class="form-label">Slug</label>
                    <input type="text" name="slug" id="slug" class="form-control" required
                           value="{{ old('slug',$product->slug) }}">
                </div>

                <div class="col-md-6">
                    <label for="active" class="form-label">Active</label>
                    <select name="active" id="active" class="form-select select2">
                        <option value=""></option>
                        <option value="yes" {{ old('active',$product->active) == 'yes' ? 'selected' : '' }}>Yes</option>
                        <option value="no" {{ old('active',$product->active) == 'no' ? 'selected' : '' }}>No</option>
                    </select>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="brand" class="form-label">Brand</label>
                    <input type="text" name="brand" id="brand" class="form-control"
                           value="{{ old('brand',$product->brand) }}">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6 selectErr">
                    <label for="supplier_id" class="form-label">Supplier</label>
                    <select name="supplier_id" id="supplier_id" class="form-select select2">
                        <option value=""></option>
                        @foreach($supplier as $key => $val)
                            <option
                                value="{{$val->id}}" {{ old('supplier_id',$product->supplier_id) == $val->id ? 'selected' : '' }}>{{$val->name}}</option>
                        @endforeach
                    </select>

                </div>

                <div class="col-md-6 selectErr">
                    <label for="waiting_time_type" class="form-label">Waiting Time Type</label>
                    <select name="waiting_time_type" id="waiting_time_type" class="form-select select2">
                        <option value=""></option>
                        @foreach(config('enum.waiting_time_type') as $val)
                            <option
                                value="{{$val}}" {{ old('waiting_time_type',$product->waiting_time_type) == $val ? 'selected' : '' }}>{{$val}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6 mt-2" id="waiting_time_container" style="display: none">
                    <label for="waiting_time" class="form-label">Waiting Time</label>
                    <input type="text" name="waiting_time" id="waiting_time" class="form-control"
                           value="{{ old('waiting_time',$product->waiting_time) }}">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6 mb-3 selectErr">
                    <label for="dangerous_good" class="form-label">Dangerous Good</label>
                    <select name="dangerous_good" id="dangerous_good" class="form-select select2">
                        <option value=""></option>
                        @foreach(config('enum.yes_no') as $key => $val)
                            <option
                                value="{{$key}}" {{ old('dangerous_good',$product->dangerous_good) == $key ? 'selected' : '' }}>{{$val}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6 mb-3 selectErr">
                    <label for="product_type" class="form-label">Product Type</label>
                    <select name="product_type" id="product_type" class="form-select select2">
                        <option value=""></option>
                        @foreach(config('enum.product_type') as $val)
                            <option
                                value="{{$val}}" {{ old('product_type',$product->type) == $val ? 'selected' : '' }}>{{$val}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row mb-3">

                <hr>
                <div class="col-md-12 my-3">
                    <label class="form-label"><b>Existing Technical Image</b></label>
                    @if(isset($product->technical_image) && !is_null($product->technical_image) && json_decode($product->technical_image,true))
                        <div class="technical-images">
                            @foreach (json_decode($product->technical_image,true) as $timage)
                                <img src="{{ asset('storage/products/' . $timage) }}" class="img-fluid mb-3"
                                     alt="Technical Image" style="height: 100px;">
                            @endforeach
                        </div>
                    @endif
                    <label for="technical_image" class="form-label">Technical Images</label>
                    <input type="file" name="technical_image[]" id="technical_image" class="form-control" multiple
                           accept="image/*">
                    <div id="technical_image_preview_container"
                         style="display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px;"></div>
                </div>
                <hr>
                <div class="col-md-12 my-3">
                    <label class="form-label"><b>Existing Feature Video</b></label>
                    @if(isset($product->feature_video) && !is_null($product->feature_video))
                        <div class="technical-images">
                            <video style="height: 100px;" controls>
                                <source src="{{ asset('storage/products/' . $product->feature_video) }}"
                                        type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    @endif

                    <label for="feature_video" class="form-label">Feature Video</label>
                    <input type="file" name="feature_video" id="feature_video" class="form-control" accept="video/*">
                    <video id="videoPreview" width="150" height="150" controls
                           style="display: none; margin-top: 10px;"></video>
                    <button type="button" id="removeVideo" class="btn btn-danger"
                            style="display: none; margin-top: 10px;"><i class="bi bi-trash"></i></button>
                </div>
                <hr>
                <div class="col-md-12 my-3">
                    <label class="form-label"><b>Existing Technical Video</b></label>
                    @if(isset($product->technical_video) && !is_null($product->technical_video))
                        <div class="technical-images">
                            <video style="height: 100px;" controls>
                                <source src="{{ asset('storage/products/' . $product->technical_video) }}"
                                        type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    @endif


                    <label class="form-label">Technical Video</label>
                    <input type="file" name="technical_video" id="technical_video" class="form-control"
                           accept="video/*">
                    <video id="technicalVideoPreview" width="150" height="150" controls
                           style="display: none; margin-top: 10px;"></video>
                    <button type="button" id="removeTechnicalVideo" class="btn btn-danger"
                            style="display: none; margin-top: 10px;">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                <hr>
                <div class="col-md-12 my-3">
                    <label class="form-label"><b>Existing Videos</b></label>
                    @if(isset($product->videos) && !is_null($product->videos) && json_decode($product->videos,true))
                        <div class="technical-images">
                            @foreach (json_decode($product->videos,true) as $timage)
                                <div class="technical-images">
                                    <video style="height: 100px;" controls>
                                        <source src="{{ asset('storage/products/' . $timage) }}" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <label for="video" class="form-label">Videos</label>
                    <input type="file" name="video[]" id="video" class="form-control" multiple accept="video/*">
                    <div id="videoPreviewContainer" style="margin-top: 10px;"></div>
                </div>
                <hr>
            </div>

            <div class="row mb-3">
                <hr>
                <div class="col-md-12 my-3">
                    <label class="form-label"><b>Existing Feature Image</b></label>
                    <div>
                        <img id="main-image" src="{{ asset('storage/products/' . $product->feature_image) }}"
                             class="img-fluid mb-3"
                             alt="" style="height: 100px;">
                    </div>
                    <label for="feature_image" class="form-label">Feature Image</label>
                    <input type="file" name="feature_image" id="feature_image" class="form-control" accept="image/*">
                    <label id="feature_image-error" class="error" style="display: none; color: red;"></label>
                    <div id="feature_image_preview_container" style="margin-top: 10px;">
                        <img id="feature_image_preview" src="#" alt="Feature Image Preview" style="display:none;"
                             width="150">
                        <button type="button" id="remove_feature_image" style="display:none;"
                                class="btn btn-danger btn-sm mt-2"><i class="bi bi-trash"></i></button>
                    </div>
                </div>
                <hr>
                <div class="col-md-12">
                    <label class="form-label"><b>Existing Product Images</b></label>
                    @if(isset($product->images) && !is_null($product->images) && json_decode($product->images,true))
                        <div class="technical-images">
                            @foreach (json_decode($product->images,true) as $timage)
                                <img src="{{ asset('storage/products/' . $timage) }}" class="img-fluid mb-3"
                                     alt="Product Image" style="height: 100px;">
                            @endforeach
                        </div>
                    @endif
                    <label for="product_image" class="form-label">Product Images</label>
                    <input type="file" name="product_image[]" id="product_image" class="form-control" multiple
                           accept="image/*">
                    <div id="product_image_preview_container"
                         style="display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px;"></div>
                </div>

                <div class="col-md-12">
                    <label for="ai_tip" class="form-label">Admin’s AI Product Tip</label>
                    <input type="text" name="ai_tip" id="ai_tip" class="form-control">
                    <label id="ai_tip-error" class="error" style="display: none; color: red;"></label>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6 mb-3">
                    <button type="button" id="fetchDetailsFromAI" class="btn btn-warning">
                        Generate Contents
                    </button>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="title" class="form-label">Product Title</label>
                    <input type="text" name="title" id="title" class="form-control"
                           value="{{ old('title',$product->title) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="features" class="form-label">Features</label>
                    <textarea name="features" id="features" class="form-control" rows="4"
                              placeholder="Enter features">{{ old('features', $product->features) }}</textarea>

                </div>
                <div class="col-md-6">
                    <label for="inclusions" class="form-label">Inclusions</label>
                    <textarea name="inclusions" id="inclusions" class="form-control" rows="4"
                              placeholder="Enter inclusions">{{ old('inclusions', $product->inclusions) }}</textarea>
                </div>
                <div class="col-md-6">
                    <label for="description" class="form-label">Description</label>
                    <textarea name="description" id="description" class="form-control" rows="4"
                              placeholder="Enter description">{{ old('description', $product->description) }}</textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Update Product</button>
        </form>
    </div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            $('#fetchDetailsFromAI').on('click', function () {
                $('#feature_image-error').hide();
                $('#ai_tip-error').hide();
                $('#ai_tip').removeClass('error');

                let isValid = true;

                if ($('#feature_image')[0].files.length === 0) {
                    $('#feature_image-error').text('Feature image is required.').show();
                    $('#feature_image').addClass('error');
                    isValid = false;
                }

                // Check if ai_tip has value
                if ($('#ai_tip').val().trim() === '') {
                    $('#ai_tip-error').text('Admin’s AI Product Tip is required.').show();
                    $('#ai_tip').addClass('error');
                    isValid = false;
                }

                if (isValid) {
                    let formData = new FormData();
                    formData.append('_token', '{{ csrf_token() }}');

                    let allImages = [];
                    let productImages = $('#product_image')[0].files;
                    for (let i = 0; i < productImages.length; i++) {
                        allImages.push(productImages[i]);
                    }
                    let featureImage = $('#feature_image')[0].files[0];
                    if (featureImage) {
                        allImages.push(featureImage);
                    }

                    for (let i = 0; i < allImages.length; i++) {
                        formData.append('images[]', allImages[i]);
                    }
                    formData.append('prompt', $('#ai_tip').val());

                    // AJAX call
                    $.ajax({
                        url: "{{ route('content-generate') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {

                            let parsedResponse = response.response;
                            if (response.success == true) {

                                $('#description,#features,#title').val('');

                                $('#title').val(parsedResponse.ai_title);

                                let descriptionArray = response.response.ai_description;
                                let formattedDescription = descriptionArray.map(item => "- " + item).join('\n');
                                $('#description').val(formattedDescription);

                                let featuresArray = response.response.ai_features;
                                let featuresDescription = featuresArray.map(item => "- " + item).join('\n');
                                $('#features').val(featuresDescription);
                            }

                        },
                        error: function (xhr, status, error) {
                            console.error('Error:', error);
                        }
                    });
                } else {
                    // toastr.error('Product images and product tip is required');
                }
            });

            $('#feature_image').on('change', function () {
                if ($(this)[0].files.length > 0) {
                    $('#feature_image-error').hide();
                    $(this).removeClass('error');
                }
            });

            $('#ai_tip').on('input', function () {
                if ($(this).val().trim() !== '') {
                    $('#ai_tip-error').hide();
                    $(this).removeClass('error');
                }
            });
        });
    </script>
    <script>
        var featureImageRequired = "{{ $product->feature_image ? 'false' : 'true' }}";
        var subCategories = '{{$product->sub_category_id}}';
        $(document).ready(function () {

            getSubCategories();
            showWaitingTime();

            $('#category_id').on('change', function () {
                getSubCategories();
            });


            $('#waiting_time_type').on('change', function () {
                showWaitingTime();
            });

            function showWaitingTime() {
                var selectedValue = $('#waiting_time_type').val();
                if (selectedValue == 'number') {
                    $('#waiting_time_container').show();
                    $('#waiting_time').prop('required', true);
                } else {
                    $('#waiting_time_container').hide();
                    $('#waiting_time').prop('required', false);
                }
            }


            function getSubCategories() {
                var categoryId = $('#category_id').val();

                if (categoryId) {
                    $.ajax({
                        url: "{{ route('get-sub-categories') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            category_id: categoryId
                        },
                        success: function (response) {
                            var subCategory = $('#sub_category_id');
                            subCategory.empty();
                            subCategory.append('<option value="">Select a subcategory</option>');
                            // Populate the subcategory dropdown
                            $.each(response.subcategories, function (key, subcategory) {
                                var selected = subCategories == subcategory.sub_category_id ? 'selected' : '';
                                subCategory.append('<option value="' + subcategory.sub_category_id + '" ' + selected + '>' + subcategory.name + '</option>');
                            });
                            subCategory.prop('disabled', false);
                            subCategory.select2();
                        },
                        error: function () {
                            console.log('An error occurred while fetching subcategories.');
                        }
                    });
                } else {
                    $('#sub_category_id').empty().append('<option value="">Select a subcategory</option>').prop('disabled', true);
                }
            }


        });


        //feature_image Preview start
        $('#feature_image').change(function (event) {
            previewImage(event, '#feature_image_preview', '#feature_image_preview_container', '#remove_feature_image');
        });
        $('#remove_feature_image').click(function () {
            removeImage('#feature_image', '#feature_image_preview', '#remove_feature_image');
        });

        function removeImage(inputSelector, previewElementSelector, removeButtonSelector) {
            $(inputSelector).val('');  // Clear the file input
            $(previewElementSelector).hide();  // Hide the image preview
            $(removeButtonSelector).hide();  // Hide the remove button
        }

        function previewImage(event, previewElementSelector, previewContainerSelector, removeButtonSelector) {
            var file = event.target.files[0];

            if (file) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $(previewElementSelector).attr('src', e.target.result).show();
                    $(removeButtonSelector).show();
                }

                reader.readAsDataURL(file);
            }
        }

        //feature_image Preview end

        // technical_image Preview start

        $('#technical_image').change(function (event) {
            selectedFiles = Array.from(event.target.files); // Store selected files
            previewMultipleImages(selectedFiles, '#technical_image_preview_container');
        });

        // Function to preview multiple images with individual remove options
        function previewMultipleImages(files, previewContainerSelector) {
            var $previewContainer = $(previewContainerSelector);

            // Clear the container first to avoid duplicate previews
            $previewContainer.empty();

            files.forEach(function (file, index) {
                if (file) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        // Create a container for each image preview
                        var $imgContainer = $('<div>').css({
                            'position': 'relative',
                            'display': 'inline-block',
                            'margin-bottom': '10px'
                        });

                        // Create the image element
                        var $imgElement = $('<img>').attr('src', e.target.result).css('width', '100px');

                        // Create the remove button
                        var $removeButton = $('<button type="button" class="btn btn-danger btn-sm mt-2"><i class="bi bi-trash"></i></button>').click(function () {
                            $imgContainer.remove(); // Remove the image container on button click
                            selectedFiles.splice(index, 1); // Remove the file from the selected files array
                            updateFileInput(); // Update the file input element
                        });

                        // Append the image and the remove button to the container
                        $imgContainer.append($imgElement).append($removeButton);

                        // Append the container to the preview area
                        $previewContainer.append($imgContainer);
                    }

                    reader.readAsDataURL(file);
                }
            });
        }

        // Function to update the file input element after removing a file
        function updateFileInput() {
            var dataTransfer = new DataTransfer();

            selectedFiles.forEach(function (file) {
                dataTransfer.items.add(file);
            });

            $('#technical_image')[0].files = dataTransfer.files;

            previewMultipleImages(selectedFiles, '#technical_image_preview_container'); // Re-render previews
        }

        // technical_image Preview end

        // feature_video Preview start

        $('#feature_video').on('change', function (event) {
            var file = event.target.files[0];
            if (file) {
                var videoURL = URL.createObjectURL(file);
                $('#videoPreview').attr('src', videoURL).show();
                $('#removeVideo').show();
            }
        });

        $('#removeVideo').on('click', function () {
            $('#feature_video').val('');
            $('#videoPreview').hide().attr('src', '');
            $(this).hide();
        });
        // feature_video Preview end

        // Technical Video preview
        $('#technical_video').on('change', function (event) {
            var file = event.target.files[0];
            if (file) {
                var videoURL = URL.createObjectURL(file);
                $('#technicalVideoPreview').attr('src', videoURL).show();
                $('#removeTechnicalVideo').show();
            }
        });

        $('#removeTechnicalVideo').on('click', function () {
            $('#technical_video').val('');
            $('#technicalVideoPreview').hide().attr('src', '');
            $(this).hide();
        });
        // technical_video Preview end


        // preview multiple images Preview start


        $('#product_image').change(function (event) {
            selectedFiles = Array.from(event.target.files); // Store selected files
            previewMultipleProductImages(selectedFiles, '#product_image_preview_container');
        });

        function previewMultipleProductImages(files, previewContainerSelector) {
            var $previewContainer = $(previewContainerSelector);

            // Clear the container first to avoid duplicate previews
            $previewContainer.empty();

            files.forEach(function (file, index) {
                if (file) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        // Create a container for each image preview
                        var $imgContainer = $('<div>').css({
                            'position': 'relative',
                            'display': 'inline-block',
                            'margin-bottom': '10px'
                        });

                        // Create the image element
                        var $imgElement = $('<img>').attr('src', e.target.result).css('width', '100px');

                        // Create the remove button
                        var $removeButton = $('<button type="button" class="btn btn-danger btn-sm mt-2"><i class="bi bi-trash"></i></button>').click(function () {
                            $imgContainer.remove(); // Remove the image container on button click
                            selectedFiles.splice(index, 1); // Remove the file from the selected files array
                            updateProductFileInput(); // Update the file input element
                        });

                        // Append the image and the remove button to the container
                        $imgContainer.append($imgElement).append($removeButton);

                        // Append the container to the preview area
                        $previewContainer.append($imgContainer);
                    }

                    reader.readAsDataURL(file);
                }
            });
        }

        // Function to update the file input element after removing a file
        function updateProductFileInput() {
            var dataTransfer = new DataTransfer();

            selectedFiles.forEach(function (file) {
                dataTransfer.items.add(file);
            });

            $('#product_image')[0].files = dataTransfer.files;

            previewMultipleProductImages(selectedFiles, '#product_image_preview_container'); // Re-render previews
        }

        // preview multiple images Preview end


        $(document).ready(function () {
            let filesArray = [];

            $('#video').on('change', function (event) {
                let files = event.target.files;

                // Check if adding new files will exceed the limit
                if (filesArray.length + files.length > 5) {
                    toastr.error('You can only upload a maximum of 5 videos.');
                    return;
                }

                // Add new files to the filesArray
                $.each(files, function (index, file) {
                    filesArray.push(file);
                });

                // Update the preview container
                updateVideoPreviews();
            });

            // Function to update video previews
            function updateVideoPreviews() {
                $('#videoPreviewContainer').empty();

                $.each(filesArray, function (index, file) {
                    let videoURL = URL.createObjectURL(file);
                    let videoId = 'video_' + index;
                    let videoHtml = `
                    <div id="${videoId}" style="margin-bottom: 10px;">
                        <video width="150" height="150" controls>
                            <source src="${videoURL}" type="video/mp4">
                        </video>
                        <button type="button" class="btn btn-danger remove-video" data-index="${index}">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>`;
                    $('#videoPreviewContainer').append(videoHtml);
                });
            }

            // Remove video functionality
            $('#videoPreviewContainer').on('click', '.remove-video', function () {
                let index = $(this).data('index');

                // Remove the file from the filesArray
                filesArray.splice(index, 1);

                // Update the preview container
                updateVideoPreviews();

                // If all videos are removed, clear the input field
                if (filesArray.length === 0) {
                    $('#video').val('');
                }
            });
        });


        $.validator.addMethod("atLeastOneImage", function (value, element) {
            // Check if the file input has at least one file selected
            return $(element).prop('files').length > 0;
        }, "Please select at least one technical image.");

        $.validator.addMethod('slug', function (value, element) {
            return this.optional(element) || /^[a-zA-Z0-9-]+$/.test(value);
        }, 'Slug can only contain letters, numbers, and dashes. No spaces allowed.');

        $("#product-form").validate({
            rules: {
                category_id: {
                    required: true
                },
                sub_category_id: {
                    required: true
                },
                title: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
                slug: {
                    required: true,
                    minlength: 2,
                    maxlength: 100,
                    slug: true
                },
                active: {
                    required: true
                },
                brand: {
                    minlength: 2,
                    maxlength: 100
                },
                supplier_id: {
                    required: true
                },
                waiting_time_type: {
                    required: true
                },
                waiting_time: {
                    required: true,
                    number: true,
                    min: 0,
                    max: 100,
                },
                feature_image: {
                    required: featureImageRequired === 'true',
                    extension: "jpg|jpeg|png"
                },
                'technical_image[]': {
                    extension: "jpg|jpeg|png",
                },
                'product_image[]': {
                    extension: "jpg|jpeg|png",
                },
                dangerous_good: {
                    required: true
                },
                product_type: {
                    required: true
                },
                feature_video: {
                    extension: "mp4|avi|mov|wmv" // Add more extensions if needed
                },
                technical_video: {
                    extension: "mp4|avi|mov|wmv"
                },
                "video[]": {
                    extension: "mp4|avi|mov|wmv"
                }
            },
            messages: {
                available_quantity: {
                    required: "Please enter available quantity."
                },
                category_id: "Please select category.",
                sub_category_id: "Please select subcategory.",
                title: {
                    required: "Please enter the title.",
                    minlength: "Title must be at least 2 characters long.",
                    maxlength: "Title cannot exceed 100 characters."
                },
                name: {
                    required: "Please enter the name.",
                    minlength: "Name must be at least 2 characters long.",
                    maxlength: "Name cannot exceed 100 characters."
                },
                slug: {
                    required: "Please enter a slug.",
                    minlength: "Slug must be at least 2 characters long.",
                    maxlength: "Slug cannot be more than 100 characters long.",
                    slug: "Slug can only contain letters, numbers, and dashes. No spaces allowed."
                },
                brand: {
                    required: "Please enter the brand.",
                    minlength: "Brand must be at least 2 characters long.",
                    maxlength: "Brand cannot exceed 100 characters."
                },
                active: "Please select if the product is active",
                supplier_id: "Please select product supplier.",
                waiting_time_type: "Please select product waiting time type.",
                // tax_rate: {
                //     required: "Please enter the tax rate.",
                //     number: "Please enter a valid number for the tax rate.",
                //     min: "Tax rate must be at least 0.",
                //     max: "Tax rate cannot be more than 100.",
                //     pattern: "Please enter a valid tax rate with up to two decimal places."
                // },
                waiting_time: {
                    required: "Please enter the waiting time.",
                    number: "Please enter a valid number.",
                    min: "Waiting time must be at least 0.",
                    max: "Waiting time cannot be more than 100."
                },
                feature_image: {
                    required: "Feature image is required.",
                    extension: "Please upload an image file (jpg, jpeg, png)."
                },
                'technical_image[]': {
                    extension: "Only jpg, jpeg, and png files are allowed.",
                    atLeastOneImage: "Please select at least one technical image."
                },
                'product_image[]': {
                    extension: "Only jpg, jpeg, and png files are allowed.",
                    atLeastOneImage: "Please select at least one product image."
                },
                dangerous_good: "Please select product is a dangerous?",
                product_type: "Please select the product type",
                variable_structure: "Please enter the variable structure if applicable",
                feature_video: {
                    required: "Please select a feature video.",
                    extension: "Please select a valid video format."
                },
                technical_video: {
                    required: "Please select a technical video.",
                    extension: "Please select a valid video format."
                },
                "video[]": {
                    required: "Please select at least one video.",
                    extension: "Please select a valid video format."
                }
            },
            errorPlacement: function (error, element) {
                if (element.is('select')) {
                    console.log(element)
                    element.parents('.selectErr').append(error);
                } else {
                    element.after(error);
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    </script>
@endsection