@extends('admin.layouts.main')
@section('title', 'Add Variables')
@section('main')
    <h2 class="mb-4">Add Variables For 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 mt-4">
        <form id="product-variable-form" name="product-variable-form">
            @csrf
            <div class="row" id="refresh-form">
                <div class="col-12">
                    <h5>Add variables for {{ $product->name }}.</h5>

                    @if(isset($product->variable_structure['attribute']) && $product->type == 'variable')
                        <div id="attribute-form">
                            <div class="row">
                                @foreach($product->variable_structure['attribute'] as $key => $options)
                                    <div class="col-md-4 mb-3">
                                        <label for="{{ $key }}">{{ str_replace('_', ' ', ucfirst($key)) }}:</label>
                                        <select id="{{ $key }}" name="{{ $key }}" class="form-select">
                                            <option value="">Select {{ str_replace('_', ' ', ucfirst($key)) }}</option>
                                            @foreach($options as $option)
                                                <option
                                                    value="{{ $option }}" {{ (isset($product->base_product[$key]) && $option == $product->base_product[$key]) ? 'selected' : '' }}>
                                                    {{ $option }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-12" id="product_variable_details" style="display: none">
                    <div class="m-4">
                        <button type="button" id="delete-product-variable" class="btn btn-danger">
                            <i class="bi bi-trash"></i>
                        </button>
                        <button type="button" id="pause-product-variable" class="btn btn-danger" title="Pause" style="display: none">
                            <i class="bi bi-pause"></i>
                        </button>
                        <button type="button" id="resume-product-variable" class="btn btn-success" title="Resume" style="display: none">
                            <i class="bi bi-play"></i>
                        </button>
                    </div>
                    <input type="hidden" name="variable_id" id="variable_id">
                    <input type="hidden" name="variable_status" id="variable_status">
                    <div class="row">
                        <!-- First Column -->
                        <div class="col-md-6">
                            <p>Variable Status: <span id="variable_status_s"></span></p>
                            <p>Variable Price Type: <span id="variable_price_type_s"></span></p>
                            <p>Listed Price: $<span id="listed_price_s"></span></p>
                            <p>Original Price: $<span id="original_price_s"></span></p>
                            <p>Base Price: <span id="base_price_s"></span></p>
                            <p>Manufacturer Price: <span id="manufacturer_price_s"></span></p>
                            <p>Domestic Shipping Fee: <span id="domestic_shipping_fee_s"></span></p>
                            <p>International Shipping Fee: <span id="international_shipping_fee_s"></span></p>
                        </div>

                        <!-- Second Column -->
                        <div class="col-md-6">
                            <p>Waiting Time: <span id="waiting_time_s"></span> days</p>
                            <p>Box Size: <span id="box_size_s"></span></p>
                            <p>Weight: <span id="weight_s"></span></p>
                            <p>Total Weight: <span id="total_weight_s"></span></p>
                            <p>In Stock: <span id="in_stock_s"></span></p>
                            <p>Limited: <span id="limited_s"></span></p>
                            <p id="quantity_available_s" style="display: none">Quantity Available:</p>
                        </div>
                    </div>
                    <h4 id="specification-header" >Specification:</h4>
                    <ul id="specification-list">
                    </ul>
                    <h4>Product Images:</h4>
                    <div class="additional-images">
                    </div>
                </div>
            </div>

            <div class="  row mt-5" id="add-variable-form">
{{--            <div class="  row mt-5" id="add-variable-form"--}}
{{--                 style="display: {{ $product->type == 'simple' ? '' : 'none' }}">--}}
                <div class="card col-md-12 ">
                    <div class="card-header">
                        <label class="form-label">Variable details</label>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6 selectErr">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select select2">
                                    <option value="" {{ old('status') == '' ? 'selected' : '' }}></option>
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Yes
                                    </option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>No
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-6  selectErr">
                                <label for="in_stock" class="form-label">In Stock</label>
                                <select name="in_stock" id="in_stock" 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 selectErr">
                                <label for="limited" class="form-label">Limited</label>
                                <select name="limited" id="limited" class="form-select select2">
                                    <option value="" {{ old('limited') == '' ? 'selected' : '' }}></option>
                                    <option value="yes" {{ old('limited') == 'yes' ? 'selected' : '' }}>Yes</option>
                                    <option value="no" {{ old('limited') == 'no' ? 'selected' : '' }}>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 mt-3">
                                <label for="specification" class="form-label">Specification</label>
                                <textarea name="specification" id="specification" class="form-control" rows="4"
                                          placeholder="Enter specification"></textarea>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="card col-md-12 my-4">
                    <div class="card-header">
                        <label class="form-label">Variable Prices</label>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div id="dynamic-fields">
                                <div class="row mb-2">
                                    <div class="col-md-3">
                                        <label for="weight" class="form-label">Product weight (In KG)</label>
                                        <input type="number" name="weight[]" class="form-control"
                                               placeholder="Product weight" required>
                                        <label class="error weight-error" style="display: none; color: red;"></label>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="box_size" class="form-label">Product box size (In CM)</label>
                                        <input type="text" name="box_size[]" class="form-control"
                                               placeholder="Product box size" pattern="[0-9*]+"
                                               title="Only numbers (0-9) and asterisks (*) are allowed." required>
                                        <label class="error box_size-error" style="display: none; color: red;"></label>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="box_name" class="form-label">Box friendly name</label>
                                        <input type="text" name="box_name[]" class="form-control"
                                               placeholder="Box friendly name">
                                        <label class="error box_name-error" style="display: none; color: red;"></label>
                                    </div>
                                    <div class="col-md-1 mt-4">
                                        <button type="button" class="btn btn-success add-field">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>

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

                            <div class="col-md-6">
                                <label for="manufacturer_price" class="form-label">Manufacturer Price</label>
                                <input type="text" name="manufacturer_price" id="manufacturer_price"
                                       placeholder="Enter manufacturer price"
                                       class="form-control" value="{{ old('manufacturer_price') }}">
                                <label id="manufacturer_price-error" class="error"
                                       style="display: none; color: red;"></label>
                            </div>
                        </div>

                        <div class="row mb-3" id="static_div" style="display: none">
                            <div class="col-md-6">
                                <label for="listed_price" class="form-label">Listed Price</label>
                                <input type="text" name="listed_price" id="listed_price"
                                       placeholder="Enter listed price"
                                       class="form-control" value="{{ old('listed_price') }}">
                            </div>
                            <label id="listed_price-error" class="error" style="display: none; color: red;"></label>
                        </div>
                        <div class="col-md-6">
                            <button type="button" id="calculatePrices" class="btn btn-primary" disabled>Calculation of
                                pricing for variables
                            </button>
                        </div>

                        <div class="row mb-3 my-2">
                            <div class="col-md-6 my-3">
                                <label for="international_shipping_fee" class="form-label">International Shipping
                                    Fee</label>
                                <input type="text" name="international_shipping_fee" id="international_shipping_fee"
                                       placeholder="Enter international shipping fee"
                                       class="form-control" value="{{ old('international_shipping_fee') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="domestic_shipping_fee" class="form-label">Domestic Shipping Fee</label>
                                <input type="text" name="domestic_shipping_fee" id="domestic_shipping_fee"
                                       placeholder="Enter domestic shipping fee"
                                       class="form-control" value="{{ old('domestic_shipping_fee') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="import_tax" class="form-label">Import Tax</label>
                                <input type="text" name="import_tax" id="import_tax"
                                       placeholder="Enter import tax"
                                       class="form-control" value="{{ old('import_tax') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="base_price" class="form-label">Base Price</label>
                                <input type="text" name="base_price" id="base_price" placeholder="Enter base price"
                                       class="form-control" value="{{ old('base_price') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="tax_on_sale" class="form-label">Tax On Sale</label>
                                <input type="text" name="tax_on_sale" id="tax_on_sale"
                                       placeholder="Enter tax on sale"
                                       class="form-control" value="{{ old('tax_on_sale') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="original_price" class="form-label">Original Price</label>
                                <input type="text" name="original_price" id="original_price"
                                       placeholder="Enter original price"
                                       class="form-control" value="{{ old('original_price') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="listed_price_inherit" class="form-label">Listed Price Inherit</label>
                                <input type="text" name="listed_price_inherit" id="listed_price_inherit"
                                       placeholder="Enter listed price inherit"
                                       class="form-control" value="{{ old('listed_price_inherit') }}" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="tcm" class="form-label">Total Cubic Meter</label>
                                <input type="tcm" name="tcm" id="tcm"
                                       placeholder="Enter total cubic meter"
                                       class="form-control" disabled>
                            </div>
                            <div class="col-md-6 my-3">
                                <label for="total_weight" class="form-label">Total Weight</label>
                                <input type="text" name="total_weight" id="total_weight"
                                       placeholder="Enter total weight"
                                       class="form-control" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card col-md-12 my-4">
                    <div class="card-header">
                        <label class="form-label">Variable Images</label>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12">
                            <label for="feature_image" class="form-label">Feature Image</label>
                            <input type="file" name="feature_image" id="feature_image" class="form-control"
                                   accept="image/*">
                            <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-12">
                            <label for="total_weight" class="form-label">Images</label>
                            <input type="file" name="image[]" id="image" class="form-control" multiple
                                   accept="image/*">
                            <div id="image_preview_container"
                                 style="display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px;"></div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Add Variable</button>

            </div>
        </form>
    </div>
@endsection

@section('scripts')

    <script>
        var productId = "{{$product->id}}";
        var productType = "{{$product->type}}";


        $(document).ready(function () {
            // Trigger the delete functionality when the button is clicked
            $('#delete-product-variable').on('click', function () {
                handleDeleteProductVariable();
            });

            $('#pause-product-variable').click(function() {
                updateStatus('paused');
            });

            // Handle Resume button click
            $('#resume-product-variable').click(function() {
                updateStatus('resumed');
            });
        });

        function updateStatus() {
            var variable_id = $('#variable_id').val();
            const newStatus = $('#variable_status').val();
            const statusText = newStatus === 'active' ? 'Pause' : 'Resume';

            Swal.fire({
                title: `Are you sure you want to ${statusText} this variable?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, change it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        url: "{{ route('change.product_variable_status') }}",
                        method: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            product_id: "{{ $product->id }}",
                            variable_id: variable_id,
                            status: newStatus
                        },
                        success: function (response) {
                            if (response.success) {
                                fetchAndDisplayProductDetails();
                                Swal.fire('Updated!',`Product status has been ${statusText.toLowerCase()}d.`,'success');
                            } else {
                                Swal.fire('Error!',response.message,'error');
                            }
                        },
                        error: function (xhr, status, error) {
                            Swal.fire('Error!','There was an error updating the status.','error');
                        }
                    });
                }
            });
        }

        function handleDeleteProductVariable() {
            var variable_id = $('#variable_id').val();
            // Show Swal confirmation dialog
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {

                    // Make the AJAX request to delete the product variable
                    $.ajax({
                        url: "{{ route('delete.product_variable') }}",
                        method: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            product_id: "{{ $product->id }}",
                            variable_id: variable_id
                        },
                        success: function (response) {
                            if (response.success) {

                                $('#attribute-form').find('select').each(function () {
                                    $(this).val('').trigger('change'); // Reset value and trigger change event
                                });

                                // Show a success message and hide the product variable details
                                Swal.fire(
                                    'Deleted!',
                                    'The product variable has been deleted.',
                                    'success'
                                );
                                $('#product_variable_details').hide();
                            } else {
                                Swal.fire(
                                    'Error!',
                                    response.message,
                                    'error'
                                );
                            }
                        },
                        error: function (xhr, status, error) {
                            Swal.fire(
                                'Error!',
                                'An error occurred while deleting the product variable.',
                                'error'
                            );
                        }
                    });
                }
            });
        }

        $(document).ready(function() {
            // Check the product type and apply CSS dynamically
            if (productType === 'simple') {
                // Show the form (remove 'none' from the display property)
                $('#add-variable-form').css('display', '');
            } else {
                // Hide the form (set display to 'none')
                $('#add-variable-form').css('display', 'none');
            }
        });

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



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

        $(document).on('click', '#calculatePrices', function () {
            // Clear previous error messages
            $('#price_type-error,#manufacturer_price-error,#listed_price-error').hide().empty();
            $('.box_size-error, .weight-error').hide().empty();

            // Gather input values
            var priceType = $('#price_type').val();
            var manufacturerPrice = $('#manufacturer_price').val();
            var listedPrice = $('#listed_price').val();

            // Validate inputs

            var hasError = false;
            if (!priceType) {
                $('#price_type-error').text('Price type is required.').show();
                hasError = true;
            }

            if (!manufacturerPrice) {
                $('#manufacturer_price-error').text('Please enter manufacturer price.').show();
                hasError = true;
            }

            if (priceType === 'static' && !listedPrice) {
                $('#listed_price-error').text('Listed price is required for this price type.').show();
                hasError = true;
            }
            var weights = $("input[name='weight[]']");
            var boxSizes = $("input[name='box_size[]']");
            var allFilled = true;

            weights.each(function (index) {
                var errorLabel = $(this).siblings('label.weight-error');
                if ($(this).val() === '') {
                    allFilled = false;
                    errorLabel.text('Product weight is required.').show();
                }
            });

            boxSizes.each(function (index) {
                var errorLabel = $(this).siblings('label.box_size-error');
                if ($(this).val() === '') {
                    allFilled = false;
                    errorLabel.text('Product box size is required.').show();
                }
            });


            if (!allFilled) {
                hasError = true;
            }

            if (hasError) {
                return;
            }

            var data = {
                _token: '{{ csrf_token() }}',
                price_type: priceType,
                manufacturer_price: manufacturerPrice,
                listed_price: listedPrice,
                productId: productId,
                weights: weights.map(function () {
                    return $(this).val();
                }).get(),
                box_sizes: boxSizes.map(function () {
                    return $(this).val();
                }).get()
            };
            $.ajax({
                url: '{{route('calculate-prices')}}',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (response) {
                    var productDetails = response.data;

                    console.log('Response:', productDetails);

                    if (priceType !== 'static') {
                        $('#static_div').show();
                        $('#listed_price').prop('disabled', true);
                        $('#listed_price').val(parseFloat(productDetails.listed_price).toFixed(2));
                    }
                    $('#original_price').val(parseFloat(productDetails.original_price).toFixed(2));
                    $('#base_price').val(parseFloat(productDetails.base_price).toFixed(2));
                    $('#domestic_shipping_fee').val(parseFloat(productDetails.domestic_shipping_fee).toFixed(2));
                    $('#international_shipping_fee').val(parseFloat(productDetails.international_shipping_fee).toFixed(2));
                    $('#import_tax').val(parseFloat(productDetails.import_tax).toFixed(2));
                    $('#tax_on_sale').val(parseFloat(productDetails.tax_on_sale).toFixed(2));
                    $('#listed_price_inherit').val(parseFloat(productDetails.listed_price_inherit).toFixed(2));
                    $('#tcm').val(parseFloat(productDetails.cubic_meter).toFixed(2));
                    $('#total_weight').val(parseFloat(productDetails.total_weight).toFixed(2));

                },
                error: function (xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        });


        $(document).ready(function () {
            // Initialize the jQuery Validation Plugin
            $('#product-variable-form').validate({
                rules: {
                    status: {
                        required: true
                    },
                    in_stock: {
                        required: true
                    },
                    price_type: {
                        required: true
                    },
                    manufacturer_price: {
                        required: true,
                        number: true
                    },
                    feature_image: {
                        required: true,
                        extension: "jpg|jpeg|png"
                    },
                    limited: {
                        required: true
                    },
                },
                messages: {
                    feature_image: {
                        required: "Feature image is required.",
                        extension: "Please upload an image file (jpg, jpeg, png)."
                    },
                    status: {
                        required: "Please select a status."
                    },
                    limited: {
                        required: "Please select whether the product is limited."
                    },
                    in_stock: {
                        required: "Please specify if the product is in stock."
                    },
                    price_type: {
                        required: "Please select price type."
                    },
                    manufacturer_price: {
                        required: "Please enter the manufacturer price.",
                        number: "Please enter a valid number for the manufacturer price."
                    },
                },
                errorPlacement: function (error, element) {
                    if (element.is('select')) {
                        element.parents('.selectErr').append(error);
                    } else {
                        element.after(error);
                    }
                },
                submitHandler: function (form) {
                    var formData = new FormData($(form)[0]);
                    formData.append('_token', '{{ csrf_token() }}');
                    formData.append('productId', '{{$product->id}}');

                    // Perform AJAX request
                    $.ajax({
                        url: '{{route('store-variable')}}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {

                            toastr.success(response.message);

                            $('#attribute-form').find('select').each(function () {
                                $(this).val('').trigger('change'); // Reset value and trigger change event
                            });

                            // $('#add-variable-form').load(window.location.href + " #add-variable-form");

                            $('#add-variable-form').load(window.location.href + " #add-variable-form", function() {
                                $('#price_type').on('change', function () {
                                    var selectedValue = $(this).val();
                                    $('#calculatePrices').prop('disabled', false);
                                    if (selectedValue == 'static') {
                                        $('#static_div').show();
                                        $('#listed_price').prop('disabled', false);
                                        $('#listed_price').val('');
                                    } else {
                                        $('#static_div').hide();
                                    }
                                });
                            });
                            $('#add-variable-form').css('display', 'none');
                        },
                        error: function (xhr, status, error) {
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                let errors = xhr.responseJSON.errors;
                                $.each(errors, function (field, messages) {
                                    toastr.error(messages.join(', ')); // Display each error message
                                });
                            } else {
                                toastr.error(xhr.responseJSON.message || "Please try again.");
                            }
                        }
                    });
                }
            });
        });

        $(document).ready(function () {
            $('#image').change(function (event) {
                selectedFiles = Array.from(event.target.files); // Store selected files
                previewMultipleImages(selectedFiles, '#image_preview_container');
            });


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

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

                            $imgContainer.append($imgElement).append($removeButton);

                            $previewContainer.append($imgContainer);
                        }

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

            function updateFileInput() {
                var dataTransfer = new DataTransfer();

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

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

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


            $('#price_type').on('change', function () {
                console.log(6666)
                var selectedValue = $(this).val();
                $('#calculatePrices').prop('disabled', false);
                if (selectedValue == 'static') {
                    $('#static_div').show();
                    $('#listed_price').prop('disabled', false);
                    $('#listed_price').val('');
                } else {
                    $('#static_div').hide();
                }
            });


            $(document).on('click', '.add-field', function () {
                var fieldRow = `
        <div class="row mb-2">
            <div class="col-md-3">
                <input type="number" name="weight[]" class="form-control" placeholder="Product weight" required >
                <label class="error weight-error" style="display: none; color: red;"></label>
            </div>
            <div class="col-md-4">
                <input type="text" name="box_size[]" class="form-control" placeholder="Product box size"  required pattern="[0-9*]+" title="Only numbers (0-9) and asterisks (*) are allowed.">
                <label class="error box_size-error" style="display: none; color: red;"></label>
            </div>
           <div class="col-md-4">
            <input type="text" name="box_name[]" class="form-control" placeholder="Box friendly name" >
            <label class="error box_name-error" style="display: none; color: red;"></label>
        </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger remove-field">-</button>
            </div>
        </div>`;
                $('#dynamic-fields').append(fieldRow);
            });

            $(document).on('click', '.remove-field', function () {
                $(this).closest('.row').remove();
            });


        });


        function areAllDropdownsSelected() {
            var allSelected = true;
            $('#attribute-form select').each(function () {
                if (!$(this).val()) {
                    allSelected = false;
                    return false; // Exit the loop early
                }
            });
            return allSelected;
        }

        $('#attribute-form select').on('change', function () {
            fetchAndDisplayProductDetails();
        });
        function fetchAndDisplayProductDetails(){
            if (areAllDropdownsSelected()) {
                var selectedAttributes = {};

                $('#attribute-form select').each(function () {
                    if ($(this).val()) {
                        selectedAttributes[$(this).attr('id')] = $(this).val();
                    }
                });
                $.ajax({
                    url: "{{ route('check.product_variable_details') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        product_id: "{{ $product->id }}",
                        selected_attributes: selectedAttributes
                    },
                    success: function (response) {
                        // Check if the response indicates success 1234
                        if (response.success) {
                            if (Array.isArray(response.data) && response.data.length > 0) {
                                $('#add-variable-form').hide();
                                // Populate product details
                                var productDetails = response.data[0];
                                $('#variable_id').val(productDetails.uid);
                                $('#original_price_s').text(parseFloat(productDetails.original_price).toFixed(2));
                                $('#listed_price_s').text(parseFloat(productDetails.listed_price).toFixed(2));
                                $('#quantity_available_s').text('Quantity Available: ' + productDetails.quantity_available);
                                $('#box_size_s').text(productDetails.box_size);
                                $('#weight_s').text(productDetails.weight + ' kg');
                                $('#total_weight_s').text(productDetails.total_weight + ' kg');
                                $('#in_stock_s').text(productDetails.in_stock === 'yes' ? 'Yes' : 'No');
                                $('#limited_s').text(productDetails.limited === 'yes' ? 'Yes' : 'No');
                                $('#variable_status_s').text(productDetails.status);
                                $('#variable_status').val(productDetails.status);
                                $('#variable_price_type_s').text(productDetails.price_type);
                                $('#manufacturer_price_s').text(productDetails.manufacturer_price);
                                $('#base_price_s').text(productDetails.base_price);
                                $('#domestic_shipping_fee_s').text(productDetails.domestic_shipping_fee);
                                $('#international_shipping_fee_s').text(productDetails.international_shipping_fee);

                                if (productDetails.limited === 'yes') {
                                    $('#quantity_available_s').show();
                                } else {
                                    $('#quantity_available_s').hide();
                                }

                                if (productDetails.status === 'active') {
                                    $('#resume-product-variable').hide();
                                    $('#pause-product-variable').show();
                                } else {
                                    $('#pause-product-variable').hide();
                                    $('#resume-product-variable').show();
                                }


                                var specificationList = $('#specification-list');
                                if (productDetails.specification && productDetails.specification.length > 0) {
                                    var specifications = JSON.parse(productDetails.specification);

                                    if (specifications.length > 0) {
                                        var specHtml = '';
                                        specifications.forEach(function(specification) {
                                            specHtml += '<li>' + specification + '</li>';
                                        });
                                        specificationList.html(specHtml);
                                        $('#specification-header').show();
                                    } else {
                                        specificationList.empty();
                                        $('#specification-header').hide();
                                    }
                                } else {
                                    specificationList.empty();
                                    $('#specification-header').hide();
                                }

                                var imageContainer = $('.additional-images');
                                imageContainer.empty();
                                productDetails.images.forEach(function (image) {
                                    imageContainer.append(
                                        '<img src="/storage/products/' + image + '" class="img-fluid mb-3" alt="Product Image">'
                                    );
                                });

                                $('#product_variable_details').show();
                            } else {
                                $('.select2').select2({
                                    placeholder: '--SELECT--',
                                    width: '100%'
                                });
                                $('#product_variable_details').hide();
                                console.log('No data');
                                $('#add-variable-form').show();
                            }
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        toastr.error('An error occurred while fetching product details.');
                    }
                });
            }
        };

    </script>

@endsection