@extends('admin.layouts.main')
@section('title', 'Add New Product')
@section('main')
    <h2 class="mb-4">Add New 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

            <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}}" {{ old('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') }}">
                </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') }}">
                </div>

                <div class="col-md-6 selectErr">
                    <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') == 'yes' ? 'selected' : '' }}>Yes</option>
                        <option value="no" {{ old('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') }}">
                </div>
                {{--                <div class="col-md-6 selectErr">--}}
                {{--                    <label for="limited" class="form-label">Limited</label>--}}
                {{--                    <select name="limited" id="limited" class="form-select select2">--}}
                {{--                        <option value="" ></option>--}}
                {{--                        <option value="yes">Yes</option>--}}
                {{--                        <option value="no">No</option>--}}
                {{--                    </select>--}}
                {{--                </div>--}}

                {{--                <div class="col-md-6 mt-3" id="available_quantity_div" style="display: none">--}}
                {{--                    <label for="available_quantity" class="form-label">Available Quantity</label>--}}
                {{--                    <input type="text" name="available_quantity" id="available_quantity"--}}
                {{--                           placeholder="Enter available quantity"--}}
                {{--                           class="form-control" value="{{ old('available_quantity') }}">--}}
                {{--                </div>--}}
                {{--                <div class="col-md-6">--}}
                {{--                    <label for="tax_rate" class="form-label">Tax Rate</label>--}}
                {{--                    <input type="text"  name="tax_rate" id="tax_rate" class="form-control" value="{{ old('tax_rate') }}">--}}
                {{--                </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') == $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') == $val ? 'selected' : '' }}>{{$val}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6" 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') }}">
                </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') == $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') == $val ? 'selected' : '' }}>{{$val}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6 my-3">
                    <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>

                <div class="col-md-6 my-3">
                    <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>

                <div class="col-md-6 my-3">
                    <label for="technical_video" 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>
                <div class="col-md-6 my-3">
                    <label for="video" class="form-label">Video</label>
                    <input type="file" name="video[]" id="video" class="form-control" multiple accept="video/*">
                    <div id="videoPreviewContainer" style="margin-top: 10px;"></div>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <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>

                <div class="col-md-6">
                    <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-6">
                    <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" value="{{ old('title') }}">
                    <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 ai_fields" value="{{ old('title') }}"
                           disabled>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="features" class="form-label">Features</label>
                    <textarea name="features" id="features" class="form-control ai_fields" rows="4"
                              placeholder="Enter features" disabled></textarea>
                </div>
                <div class="col-md-6">
                    <label for="inclusions" class="form-label">Inclusions</label>
                    <textarea name="inclusions" id="inclusions" class="form-control ai_fields" rows="4"
                              placeholder="Enter inclusions" disabled></textarea>
                </div>
                <div class="col-md-6">
                    <label for="description" class="form-label">Description</label>
                    <textarea name="description" id="description" class="form-control ai_fields" rows="4"
                              placeholder="Enter description" disabled></textarea>
                </div>
            </div>

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

@endsection

@section('scripts')
    <script>
        $(document).ready(function () {


            $('#fetchDetailsFromAI').on('click', function () {
                $('#feature_image-error').hide();
                $('#ai_tip-error').hide();
                // $('#product_image').removeClass('error');
                $('#ai_tip').removeClass('error');

                // Validate inputs
                let isValid = true;

                // Check if product_image has files
                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) {

                                $('.ai_fields').prop('disabled', false);
                                $('#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>

        // $('#limited').on('change', function () {
        //     var selectedValue = $(this).val();
        //     if (selectedValue == 'yes') {
        //         $('#available_quantity_div').show();
        //         $('#available_quantity').prop('required', true);
        //     } else {
        //         $('#available_quantity_div').hide();
        //         $('#available_quantity').prop('required', false);
        //     }
        // });


        $(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('');
                }
            });
        });

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

        });
        $(document).ready(function () {

            //pre view videos start
            // Feature Video preview
            $('#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();
            });

            // 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();
            });
            //pre view videos end

            //Preview selected images 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);
                }
            }

            $('#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
            }


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

            // Function to preview multiple images with individual remove options
            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 selected images End


            $('#category_id').change(function () {
                var categoryId = $(this).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>'); // Add default option

                            $.each(response.subcategories, function (key, subcategory) {
                                subCategory.append('<option value="' + subcategory.sub_category_id + '">' + 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);
                }
            });

            $.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: {
                        // required: true,
                        minlength: 2,
                        maxlength: 100
                    },

                    // tax_rate: {
                    //     required: true,
                    //     number: true,
                    //     min: 0,
                    //     max: 100,
                    //     pattern: /^\d+(\.\d{1,2})?$/
                    // },
                    supplier_id: {
                        required: true
                    },
                    waiting_time_type: {
                        required: true
                    },
                    waiting_time: {
                        required: true,
                        number: true,
                        min: 0,
                        max: 100,
                    },
                    feature_image: {
                        required: true,
                        extension: "jpg|jpeg|png"
                    },
                    'technical_image[]': {
                        extension: "jpg|jpeg|png",
                        // atLeastOneImage: true
                    },
                    'product_image[]': {
                        extension: "jpg|jpeg|png",
                        // atLeastOneImage: true
                    },
                    dangerous_good: {
                        required: true
                    },
                    total_units_sold: {
                        number: true,
                        min: 0
                    },
                    total_price_charged: {
                        number: true,
                        min: 0
                    },
                    product_type: {
                        required: true
                    },
                    // limited: {
                    //     required: true
                    // },
                    feature_video: {
                        // required: true,
                        extension: "mp4|avi|mov|wmv" // Add more extensions if needed
                    },
                    technical_video: {
                        // required: true,
                        extension: "mp4|avi|mov|wmv"
                    },
                    "video[]": {
                        // required: true,
                        extension: "mp4|avi|mov|wmv"
                    }
                },
                messages: {
                    available_quantity: {
                        required: "Please enter available quantity."
                    },
                    // limited: {
                    //     required: "Please select whether the product is limited."
                    // },
                    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();
                }
            });

            // Show or hide variable_structure_div based on type selection
            $("#type").change(function () {
                if ($(this).val() === "variable") {
                    $("#variable_structure_div").show();
                } else {
                    $("#variable_structure_div").hide();
                }
            }).trigger("change"); // Trigger change event on page load
        });
    </script>

@endsection