@extends('admin/app/layout')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-4">


            <div class="col-lg-auto  col-md-auto col-sm-auto">
                <div class="d-flex align-items-center">
                    <div id="reportrange" class="daterange">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span>March 25, 2024 - November 23, 2024</span> <i class="fa fa-caret-down"></i>
                    </div>
                    <input type="hidden" name="datefilter" id="datefilter">

                    <button id="applyfilter" class="btn btn-primary ms-2"><i class="fa fa-search"></i></button>
                    <button id="clearfilter" class="btn btn-danger ms-2"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto my-auto col-12 text-center">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_products"><i
                        class="fa-solid fa-plus me-2"></i>Add Products</button>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto my-auto col-12 text-center">
                <button type="button" id="ExportProductData" class="btn btn-light"> <img
                        src="{{ asset('admin-assets/images/excel.png') }}" class="me-2"> Export</button>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table class="table table-striped datatable" id="table_1" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Product Name</th>
                                <th>Product description</th>
                                <th>Price</th>
                                <!-- <th>SKU code <br> (should be unique)</th> -->
                                <th>Action</th>
                                <th>Status</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- <tr>
                                <td>01</td>
                                <td>Mobile </td>
                                <td>Portable device for connecting to a telecommunications network in order </td>
                                <td>
                                    <span class="badge text-bg-success">15,000/-</span>
                                </td>
                                <!-- <td>AKD879</td> -->
                                <td>
                                    <button type="button" class="btn btn-outline-primary small_bt" data-bs-toggle="modal"
                                        data-bs-target="#add_products">
                                        <i class="fa-regular fa-pen-to-square"></i>
                                    </button>
                                </td>
                                <td>
                                    <div class="toggle-group">
                                        <input type="checkbox" name="on-off-switch" id="on-off-switch1" checked=""
                                            tabindex="1">
                                        <label for="on-off-switch1">

                                        </label>
                                        <div class="onoffswitch pull-right" aria-hidden="true">
                                            <div class="onoffswitch-label">
                                                <div class="onoffswitch-inner"></div>
                                                <div class="onoffswitch-switch"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0">
                                        <span class="d-flex justify-content-center align-items-center"><i
                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                        <span class="d-flex justify-content-center align-items-center time_span"><i
                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>02</td>
                                <td>Mobile </td>
                                <td>Portable device for connecting to a telecommunications network in order </td>
                                <td>
                                    <span class="badge text-bg-success">15,000/-</span>
                                </td>
                                <!-- <td>AKD879</td> -->
                                <td>
                                    <button type="button" class="btn btn-outline-primary small_bt" data-bs-toggle="modal"
                                        data-bs-target="#add_products">
                                        <i class="fa-regular fa-pen-to-square"></i>
                                    </button>
                                </td>
                                <td>
                                    <div class="toggle-group">
                                        <input type="checkbox" name="on-off-switch" id="on-off-switch2" checked=""
                                            tabindex="1">
                                        <label for="on-off-switch2">

                                        </label>
                                        <div class="onoffswitch pull-right" aria-hidden="true">
                                            <div class="onoffswitch-label">
                                                <div class="onoffswitch-inner"></div>
                                                <div class="onoffswitch-switch"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0">
                                        <span class="d-flex justify-content-center align-items-center"><i
                                                class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                        <span class="d-flex justify-content-center align-items-center time_span"><i
                                                class="fa fa-clock me-2"></i>07:00AM</span>
                                    </p>
                                </td>
                            </tr> --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add_products" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Add Products </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>

                <div class="modal-body">
                    {{ Form::open(['url' => '#', 'name' => 'productForm', 'id' => 'productForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label for="" class="form-label">Product image <span
                                        class="red_star">*</span></label>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="multi_img_slider" id="sliderImages">
                                            <div class="item westBank">
                                                <div class="upload_photo">
                                                    <span>
                                                        <img src="{{ asset('admin-assets/images/upload.png') }}">
                                                    </span>
                                                    <p class="m-0">Browse Files</p>
                                                    <input type="file" class="content_file" name="content_file[]"
                                                        accept="image/*">
                                                    <input type="hidden" class="content_file_name" required
                                                        name="content_file_name[]">
                                                    {{-- <button class="btn removeImages"><i
                                                            class="fa-solid fa-trash-can"></i></button> --}}
                                                    <div class="upload_preview">
                                                        <img class="content_file_preview" src="">
                                                    </div>
                                                </div>
                                            </div>



                                        </div>
                                    </div>

                                    <div class="w-100"></div>
                                    <div class="col-lg-auto col-md-auto col-sm-auto col-12 m-auto mb-2 mt-2">
                                        <div class="upload_photo add_more_images" id="addMoreImages">
                                            <span>
                                                <i class="fa-solid fa-plus"></i>
                                            </span>
                                            <p class="m-0">Add More Picture</p>
                                        </div>
                                        <label id="content_file_name[]-error" class="error text-center d-block"
                                            for="content_file_name[]"></label>

                                    </div>
                                </div>

                            </div>
                        </div>
                        <input type="hidden" name="edit_product_id" id="edit_product_id">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="product_name" class="form-label">Product Name <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id="product_name" name="product_name"
                                    placeholder="Enter Product name">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="product_prize" class="form-label">Product Price <span
                                        class="red_star">*</span></label>
                                <input type="number" class="form-control br_from" id="product_prize"
                                    name="product_prize" placeholder="Enter Product price">
                            </div>
                        </div>
                        <div class="w-100"></div>
                        <div class="col-lg-5 col-md-5 col-sm-12 my-auto">
                            <div class="mb-3 error_one_section">
                                <label for="category_id" class="form-label">Category <span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br" id="category_id"
                                    name="category_id" aria-label="Default select example">
                                    <option selected value="">Select Category</option>
                                    @foreach ($categories as $category)
                                        <option data-index="{{ $category->id }}"
                                            value="{{ Crypt::encrypt($category->id) }}">{{ $category->category_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <label id="category_id-error" class="error" for="category_id"></label>
                            </div>
                        </div>
                        {{-- <input type="hidden" id="select_size" name="select_size">
                        <input type="hidden" id="select_size_error" name="select_size_error">
                        <input type="hidden" id="addButton" name="addButton">
                         <input type="hidden" id="productTableBody" name="productTableBody"> --}}


                        <div class="col-lg-5 col-md-5 col-sm-12 my-auto" style="display: none">
                            <div class="mb-3 error_one_section">
                                <label for="select_size" class="form-label">Size<span class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br" id="select_size"
                                    name="select_size" aria-label="Default select example">
                                    <option selected value="">Select Size</option>
                                </select>
                                <input type="hidden" id="select_size_error" name="select_size_error">
                                <label id="select_size_error-error" class="error" for="select_size_error"></label>

                            </div>
                        </div>

                        <div class="col-lg-2 col-md-2 col-sm-12 mt-auto" style="display: none">
                            <div class="mb-3 error_one_section">
                                <button type="button" disabled class="btn btn-info" id="addButton"><i
                                        class="fa-solid fa-plus me-2"></i>
                                    Add</button>
                            </div>
                        </div>
                        <div class="col-12" style="display: none">
                            <div class="table-responsive">
                                <table class="table table-bordered custom_table">
                                    <thead>
                                        <tr>
                                            <th>Sr No.</th>
                                            <th>Product Size</th>
                                            <th>SKU Code</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="productTableBody">
                                        {{-- <tr>
                                            <td>1</td>
                                            <td>
                                                <input type="text" class="form-control" id="product_size_1"
                                                    name="product_size[]" readonly required placeholder="Enter Size here">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="sku_code_1"
                                                    name="sku_code[]" readonly required placeholder="Enter SKU Code">
                                            </td>
                                            <td>
                                            </td>
                                        </tr> --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label for="short_description" class="form-label">Product Description (short)<span
                                        class="red_star">*</span></label>
                                <textarea id="short_description" name="short_description" class="form-control" rows="1"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label for="long_description" class="form-label">Product Description (long)</label>
                                <textarea id="long_description" name="long_description" class="form-control" rows="3"></textarea>
                            </div>
                        </div>

                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="productFormSubmit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>


            </div>
        </div>
    </div>

    <div id="uploadimageModal" class="modal " role="dialog" data-keyboard="false" data-backdrop="static"
        data-aos="fade-in">
        <div class="modal-dialog modal-dialog-centered modal-md ">
            <div class="modal-content ">
                <div class="d-flex justify-content-end border-bottom-0 py-1 px-1">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="closeModal()">
                        <span aria-hidden="true">×</span>
                    </button>

                </div>
                <div class="modal-body">
                    <div>
                        <div class="col-md-12 text-center">
                            <div id="image_demo" class="responsive"></div>
                            {{-- <input type="hidden" id="frameId"> --}}
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <div class="d-lg-flex d-md-flex justify-content-center">
                        <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="-90" type="submit"><i
                                class="fas fa-undo" aria-hidden="true"></i></button>
                        {{-- <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="90" type="submit"><i
                                class="fas fa-undo" aria-hidden="true"></i></button> --}}
                        <button class="btn btn-primary mt-3 crop_image p-3">Save</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(function() {
            var html = []
            for (var i = 0; i < 10; i++) {
                html.push('<option value="' + i + '">' + i + '</option>')
            }
            $('#select').html(html.join('')).multipleSelect({
                filter: true,
                placeholder: 'Product Size'
            })
        })
    </script>
    <script>
        $('#applyfilter').click(function() {
            filterData();
        });

        $('#clearfilter').click(function() {
            window.location.reload();
        });

        $('#add_products').on('hidden.bs.modal', function() {
            // Reset the form

            $("#category_id").val('').trigger('change');
            $("#edit_product_id").val('');
            $('#category_id').select2();


            $('#productForm')[0].reset();
            var validator = $('#productForm').validate();
            validator.resetForm();
            $('#sliderImages').html('');

            $('.multi_img_slider').slick('unslick');
            $('.item').remove();


            var newItem = `
            <div class="item westBank">
                                                <div class="upload_photo">
                                                    <span>
                                                        <img src="{{ asset('admin-assets/images/upload.png') }}">
                                                    </span>
                                                    <p class="m-0">Browse Files</p>
                                                    <input type="file" class="content_file" name="content_file[]" accept="image/*">

                                                    {{-- <button class="btn removeImages"><i
                                                            class="fa-solid fa-trash-can"></i></button> --}}
                                                    <div class="upload_preview">
                                                        <img class="content_file_preview" src="">
                                                    </div>
                                                </div>
                                            </div>`;
            $('#sliderImages').append(newItem);
            initializeSlider();

            $('#addButton').prop('disabled', true);

            $('#productTableBody tr').remove();

        });


        $('#ExportProductData').on('click', function() {
            // var select_user = $('#select_user').val();
            var datefilter = $('#datefilter').val();
            var url = "{{ route('downloadProductData') }}" + "?datefilter=" + datefilter;
            window.location.replace(url);
        });

        function filterData() {
            var i = 1;
            var table = $('#table_1').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search"
                },
                ajax: {
                    url: "{{ route('productDetailPaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"; // Fix missing token assignment
                        let datefilter = $('#datefilter').val();
                        if (datefilter) {
                            d.datefilter = datefilter;
                        }
                    },
                },
                "drawCallback": function(settings) {
                    // new VenoBox({
                    //     selector: ".vbox-item",
                    //     numeration: true,
                    //     infinigall: true,
                    //     share: true,
                    //     spinner: 'plane'
                    // });
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'product_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'short_description',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'product_prize',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: true
                    },

                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6],
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],

            });

        }
    </script>

    <script>
        function initializeSlider() {
            $('.multi_img_slider').slick({
                dots: true,
                infinite: false,
                speed: 300,
                autoplay: false,
                autoplaySpeed: 2000,
                arrows: false,
                slidesToShow: 3,
                slidesToScroll: 1,
                responsive: [{
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        }


        function status(id) {
            $.ajax({
                url: "{{ route('updateProductStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        filterData()
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                }
            });
        }

        function getProductDetails(id) {
            $('.loader').css('display', 'flex');

            $.ajax({
                url: "{{ route('getProductDetailsAdmin') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (xhr.status == 200) {

                        $('#category_id option').each(function() {
                            var dataIndex = $(this).data('index');
                            if (dataIndex == response.product.category_id) {
                                $('#category_id').val($(this).val()).trigger('change');
                                return false;
                            }
                        });


                        $('#edit_product_id').val(response.product_id);
                        $('#product_name').val(response.product.product_name);
                        $('#product_prize').val(response.product.product_prize);
                        $('#short_description').val(response.product.short_description);
                        if (response.product.long_description) {
                            $('#long_description').val(response.product.long_description);
                        }

                        $('.westBank').remove();

                        response.product_images.forEach(function(image, index) {
                            appendImageItem(image.image, index);

                        });

                        setTimeout(function() {

                            response.product_sizes.forEach(function(size) {
                                $('#select_size option').each(function() {
                                    if ($(this).text() === size.size) {
                                        // Disable the option
                                        $(this).prop('disabled', true);
                                    }
                                });
                                $('#select_size').select2();
                                $('#select_size').trigger('change.select2');

                                var rowCount = $('#productTableBody tr').length + 1;

                                var newRow = `
                            <tr>
                                <td>${rowCount}</td>
                                <td>
                                    <input type="text" class="form-control" id="product_size_${rowCount}" name="product_size[]" readonly required value="${size.size}" placeholder="Enter Size here">
                                </td>
                                <td>
                                    <input type="text" class="form-control" id="sku_code_${rowCount}" name="sku_code[]" required value="${size.sku_code}" placeholder="Enter SKU Code">
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger removeButton"><i class="fa-solid fa-minus me-2"></i> Remove</button>
                                </td>
                            </tr>`;

                                $('#productTableBody').append(newRow);
                            });


                            var nonDisabledOptions = $('#select_size option:not([disabled])');
                            if (nonDisabledOptions.length === 0) {
                                $('#addButton').prop('disabled', true);
                            } else {
                                var firstNonDisabledOption = nonDisabledOptions.first().val();
                                if (firstNonDisabledOption) {
                                    $('#select_size').val(firstNonDisabledOption).trigger('change');
                                }
                            }

                            $('.loader').css('display', 'none');

                        }, 3000);

                    } else {
                        $.notify(response.error, "error");
                        $('.loader').css('display', 'none');

                    }
                }
            });

        }


        function appendImageItem(imageSrc, index) {
            $('.multi_img_slider').slick('unslick');
            var removeButton = '';
            if (index > 0) {
                removeButton = `<button class="btn removeImages"><i class="fa-solid fa-trash-can"></i></button>`;
            }
            var newItem = `
    <div class="item">
        <div class="upload_photo">
            <span>
                <img src="{{ asset('admin-assets/images/upload.png') }}">
            </span>
            <p class="m-0">Browse Files</p>
            <input type="file" class="content_file" name="content_file[]" accept="image/*">
            <input type="hidden" class="content_file_name" required name="content_file_name[]" value="${imageSrc}">
            ${removeButton}
            <div class="upload_preview">
                <img class="content_file_preview" src="{{ asset('storage/product-images/') }}/${imageSrc}">
            </div>
        </div>
    </div>`;
            $('#sliderImages').append(newItem);
            // Ensure .upload_photo has active even if template above missed
            $('#sliderImages .item:last .upload_photo').addClass('active');
            initializeSlider();
        }



        $(document).ready(function() {
            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return $.trim(value).length > 0;
            }, "This field cannot be just spaces.");

            $('#productForm').validate({
                ignore: ".ignore",
                rules: {
                    product_name: {
                        required: true,
                        maxlength: 50,
                        notOnlySpaces: true,
                    },
                    product_prize: {
                        required: true,
                        digits: true,
                        maxlength: 2000,
                        minlength: 1,
                        notOnlySpaces: true,
                    },
                    category_id: {
                        required: true,
                    },
                    // select_size_error: {
                    //     required: {
                    //         depends: function(element) {
                    //             var noRows = $('#productTableBody tr').length === 0;
                    //             var selectedIndex = $('#category_id option:selected').data('index');
                    //             return noRows && selectedIndex !== 6;
                    //         }
                    //     }
                    // },
                    short_description: {
                        required: true,
                        maxlength: 120,
                        notOnlySpaces: true,
                    },
                    long_description: {
                        required: false,
                        maxlength: 500,
                        // notOnlySpaces: true,
                    },
                    // 'sku_code[]': {
                    //     required: true,
                    // },
                    // 'content_file_name[]': {
                    //     required: true,
                    // }
                },
                messages: {
                    select_size_error: {
                        required: "Please select a size and add sku code."
                    }
                },
                submitHandler: function(form) {

                    $("#productFormSubmit").attr('disabled', true);

                    var formData = new FormData($("#productForm")[0]);

                    $.ajax({
                        url: "{{ route('addUpdateProduct') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 2) {

                                var flag = 0;
                                $("#productFormSubmit").attr('disabled', false);
                            } else if (response.status == 0) {

                                $("#productFormSubmit").attr('disabled', false);
                                $.notify(response.msg, "error");

                            } else {
                                $.notify(response.msg, "success");
                                $('#add_products').modal('hide');
                                $("#productFormSubmit").attr('disabled', false);
                                filterData()
                            }
                        }
                    });
                }
            });




            filterData();


            $('#addButton').click(function() {

                var categoryValue = $('#category_id').val();
                var sizeValue = $('#select_size').val();

                if (categoryValue !== '' && sizeValue !== '') {
                    var rowCount = $('#productTableBody tr').length + 1;

                    var newRow = `
                    <tr>
                        <td>${rowCount}</td>
                        <td>
                            <input type="text" class="form-control" id="product_size_${rowCount}" name="product_size[]" readonly required value="" placeholder="Enter Size here">
                        </td>
                        <td>
                            <input type="text" class="form-control" id="sku_code_${rowCount}" name="sku_code[]" required placeholder="Enter SKU Code">
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger removeButton"><i class="fa-solid fa-minus me-2"></i> Remove</button>
                        </td>
                    </tr>`;

                    $('#productTableBody').append(newRow);
                    toggleAddButton2();

                    if (sizeValue) {
                        $('#select_size option[value="' + sizeValue + '"]').attr('disabled', 'disabled');
                        $('#select_size').select2();
                    }
                    var nonDisabledOptions = $('#select_size option:not([disabled])');



                    if (nonDisabledOptions.length === 0) {
                        // nonDisabledOptions.attr('disabled', 'disabled');
                        // $('#select_size').select2();
                        $('#addButton').prop('disabled', true);
                    } else {
                        var firstNonDisabledOption = nonDisabledOptions.first().val();
                        if (firstNonDisabledOption) {
                            $('#select_size').val(firstNonDisabledOption).trigger('change');
                        }
                    }
                }
            });

            $(document).on('click', '.removeButton', function() {
                var removedInputSize = $(this).closest('tr').find('input[name="product_size[]"]')
                    .val(); // Get the value of the removed input

                // // Find the object in sizesArray with size equal to removedInputSize
                // var sizeObject = sizesArray.find(function(size) {
                //     return size.size === removedInputSize;
                // });



                // console.log(removedInputSize);
                // if (sizeObject) {
                //     $('#select_size option[value="' + sizeObject.id + '"]').removeAttr('disabled')
                //         .removeProp('disabled');
                //     $('#select_size').trigger('change.select2');
                // }
                $('#select_size option').each(function() {
                    if ($(this).text() === removedInputSize) {
                        // Re-enable the option
                        $(this).prop('disabled', false);
                    }
                });
                $('#select_size').select2();
                $('#select_size').trigger('change.select2');


                $(this).closest('tr').remove(); // Remove the closest <tr>
                updateRowNumbers(); // Update any row numbers or indices if needed

                var categoryValue = $('#category_id').val();
                var sizeValue = $('#select_size').val();

                if (categoryValue !== '' && sizeValue !== '') {
                    $('#addButton').prop('disabled', false);
                }
            });



            function updateRowNumbers() {
                $('#productTableBody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                    $(this).find('input').each(function() {
                        var id = $(this).attr('id');
                        var newId = id.replace(/\d+$/, index + 1);
                        $(this).attr('id', newId);
                    });
                });
            }


            function toggleAddButton() {
                var categoryValue = $('#category_id').val();
                var sizeValue = $('#select_size').val();
                var sizeOptionText = $('#select_size option[value="' + sizeValue + '"]').text();

                if (categoryValue !== '' && sizeValue !== '') {
                    var lastRow = $('#productTableBody tr:last');
                    lastRow.find('input[name="product_size[]"]').val(sizeOptionText);
                    $('#addButton').prop('disabled', false);
                    $('#sku_code_1').prop('readonly', false);
                } else {
                    $('#addButton').prop('disabled', true);
                    $('#sku_code_1').prop('readonly', true);
                    $('#productTableBody tr').remove();
                }
            }



            // function toggleAddButton2() {
            //     var categoryValue = $('#category_id').val();
            //     var sizeValue = $('#select_size').val();
            //     var sizeOptionText = $('#select_size option:first').text();
            //     if (categoryValue !== '' && sizeValue !== '') {
            //         var lastRow = $('#productTableBody tr:last');
            //         lastRow.find('input[name="product_size[]"]').val(sizeOptionText);
            //         $('#addButton').prop('disabled', false);
            //         $('#sku_code_1').prop('readonly', false);
            //     } else {
            //         $('#addButton').prop('disabled', true);
            //         $('#sku_code_1').prop('readonly', true);
            //         $('#productTableBody tr').remove();
            //     }
            // }

            function toggleAddButton2() {

                var categoryValue = $('#category_id').val();
                var sizeValue = $('#select_size').val();
                var sizeOptionText = $('#select_size option[value="' + sizeValue + '"]').text();
                if (sizeValue == null) {
                    $('#addButton').prop('disabled', true);
                }
                if (categoryValue && sizeValue) {
                    var lastRow = $('#productTableBody tr:last');
                    lastRow.find('input[name="product_size[]"]').val(sizeOptionText);
                    $('#addButton').prop('disabled', false);
                } else {
                    $('#addButton').prop('disabled', true);
                }
            }

            function clearRows() {
                var categoryValue = $('#category_id').val();
                var sizeValue = $('#select_size').val();

                if (sizeValue == null) {
                    $('#addButton').prop('disabled', true);
                }
                if (categoryValue && sizeValue) {
                    $('#productTableBody tr').remove();
                    $('#addButton').prop('disabled', false);
                } else {
                    $('#addButton').prop('disabled', true);
                }
                var nonDisabledOptions = $('#select_size option:not([disabled])');
                if (nonDisabledOptions.length === 0) {
                    $('#addButton').prop('disabled', true);
                }
            }


            var csrfToken = "{{ csrf_token() }}";



            $('#category_id').on('change', function() {
                var categoryId = $(this).val();
                var selectedText = $('#category_id option:selected').text();

                if (categoryId !== '' && selectedText != 'No Size') {

                    $.ajax({
                        url: '/get-sizes',
                        type: 'POST',
                        data: {
                            'category_id': categoryId,
                            '_token': csrfToken
                        },
                        success: function(response) {
                            var options = '';
                            $.each(response.sizes, function(index, size) {
                                options += '<option value="' + size.id + '">' + size
                                    .size + '</option>';
                            });
                            $('#select_size').html(options);
                            clearRows();
                        },
                        error: function(xhr, status, error) {
                            console.error('Error fetching sizes:', error);
                        }
                    });
                } else {
                    $('#select_size').html('<option selected value="">Select Size</option>');
                    $('#productTableBody tr').remove();

                }
            });

            $('#sliderImages').on('click', '.removeImages', function() {
                // Uninitialize the slider
                $('.multi_img_slider').slick('unslick');

                // Remove the parent .item of the clicked remove button
                $(this).closest('.item').remove();

                // Reinitialize the slider
                initializeSlider();
            });

            $('#addMoreImages').click(function() {
                // Uninitialize the slider
                $('.multi_img_slider').slick('unslick');

                // Define the new item HTML
                var newItem = `
                <div class="item">
                    <div class="upload_photo">
                        <span>
                            <img src="{{ asset('admin-assets/images/upload.png') }}">
                        </span>
                        <p class="m-0">Browse Files</p>
                        <input type="file" class="content_file" name="content_file[]" accept="image/*">
                        <button class="btn removeImages"><i class="fa-solid fa-trash-can"></i></button>
                        <div class="upload_preview">
                            <img class="content_file_preview" src="">
                        </div>
                    </div>
                </div>`;
                $('#sliderImages').append(newItem);

                initializeSlider();
            });
        });
    </script>
    <script>
        // Handle image preview without crop
        $(document).on('change', '.content_file', function() {
            var file = this.files[0];
            var $uploadPhoto = $(this).closest('.upload_photo');
            var $previewImage = $uploadPhoto.find('.content_file_preview');
            var $hiddenInput = $uploadPhoto.find('.content_file_name');

            if (file) {
                // File size validation (10 MB = 10 * 1024 * 1024 bytes)
                if (file.size > 10 * 1024 * 1024) {
                    $.notify("File size must be less than 10MB.","error");
                    $(this).val(""); // reset file input
                    $previewImage.attr("src", ""); // clear preview
                    $hiddenInput.val(""); // clear hidden input
                    $uploadPhoto.removeClass('active');
                    return;
                }

                var reader = new FileReader();
                reader.onload = function(e) {
                    $previewImage.attr("src", e.target.result); // show preview
                    $hiddenInput.val(file.name); // store filename
                    $uploadPhoto.addClass('active');
                };
                reader.readAsDataURL(file);
            }
        });
    </script>

    {{-- <script>
        var $image_crop;

        function closeModal() {
            $('#uploadimageModal').modal('hide');
        }


        function handleFileInput(fileInput, previewImage, hiddenInput) {
            if (!$image_crop) {
                boundaryWidth = 400;
                boundaryHeight = 400;
                viewportWidth = 300;
                viewportHeight = 300;

                $image_crop = $('#image_demo').croppie({
                    viewport: {
                        width: viewportWidth,
                        height: viewportHeight,
                    },
                    boundary: {
                        height: boundaryHeight,
                        width: boundaryWidth,
                    },
                    showZoomer: true,
                    enableExif: true,
                    enableOrientation: true,
                });
            }

            if (fileInput.files && fileInput.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    var imageDataURL = e.target.result;

                    $image_crop.croppie('bind', {
                        url: imageDataURL
                    }).then(function() {
                        // console.log('Croppie bind complete');
                    });

                    $('#uploadimageModal').modal('show');

                    // Clear the value only for the specific input with data-index
                    fileInput.value = '';
                };

                reader.readAsDataURL(fileInput.files[0]);
            }

            $('.imgRotate').on('click', function(ev) {
                $image_crop.croppie('rotate', parseInt($(this).data('rotate')));
            });

            $('.crop_image').off('click').on('click', function(event) {
                var $this = $(this);
                var $upload_photo = $this.closest('.upload_photo');
                var $content_file_preview = $upload_photo.find('.content_file_preview');
                var $content_file_name = $upload_photo.find('.content_file_name');
                var croppieResultHeight = '1368';
                var croppieResultWidth = '1310';
                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: {
                        height: croppieResultHeight,
                        width: croppieResultWidth
                    },
                }).then(function(response) {
                    $(".crop_image").html('Uploading.....');
                    $(".crop_image").attr('disabled', true);
                    $.ajax({
                        url: "{{ url('uploadCroppedImage') }}",
                        type: "POST",
                        data: {
                            "image": response,
                            '_token': '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            data = JSON.parse(data);
                            $('#uploadimageModal').modal('hide');

                            // Update only the elements with the specific data-index
                            previewImage.attr('src',
                                "{{ asset('storage/product-images') }}/" + data);
                            hiddenInput.val(data);

                            $(".crop_image").html('Save');
                            $(".crop_image").attr('disabled', false);
                            return data;

                            // // Clear the value only for the specific input with data-index
                            // var fileInput = document.querySelector(
                            //     '.content_file');
                            // if (fileInput) {
                            //     fileInput.value = '';
                            // }
                        }
                    });
                });
            });


        }


        // Example for one set of cloned elements
        $(document).on('change', '.content_file', function() {
            var $uploadPhoto = $(this).closest('.upload_photo');
            var $previewImage = $uploadPhoto.find('.content_file_preview');
            var $hiddenInput = $uploadPhoto.find('.content_file_name');
            handleFileInput(this, $previewImage, $hiddenInput);
        });
    </script> --}}
@endsection