@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3 ">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('All Blog') }}</h1>
            </div>
            <div class="col-md-6 text-md-right d-flex align-items-center" id="add_modal">
                <a href="javascript:void(0);" class="add-items-btn ml-auto" data-toggle="modal"
                    data-target="#addPost-modal"><span><i class="icons icon-plus"></i></span> Add New Blog</a>

            </div>
        </div>
    </div>
    <div class="admin-list-table pt-0 ">
        <div class="d-flex align-items-center py-3">
            <div class="common-tbl-head m-0 ml-1 ">
                {{-- <div class="selected-prod border-0 pl-0">Selected Products (<span>0</span>)</div> --}}
                <div class="selected-prod border-0 pl-0"  style="display:none">Selected Blog (<span id="sProduct">0</span>)</div>
                <div class="delete-select" id="deletedData" style="display:none">
                    <a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
                </div>
            </div>
            <div class="ml-auto productSearch">
                <div class="form-group mb-0 position-relative">
                    <i class="icons icon-search-s" id="memberSearch"></i>
                    <input type="text" class="form-control form-control-sm" id="search" name="search" placeholder="Search">
                </div>
  
            </div>
            {{-- <a href="javascript:void(0);" class="filter-link ml-2" data-toggle="modal" data-target="#filterFlyout"><i class="icons icon-filter"></i>Filter's</a> --}}
        </div>

        <div class="admin-table table-freezed " id="table_list">
        <div class="loader_main"  style="  position: relative;
    top: 50%;
    left: 40%;
    transform: translate(50%, 50%);
    width: 100px;
    height:50vh;
    text-align: center;">
 <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
        </div>
    </div>
@endsection

@section('modal')
    <!-- Delete Modal -->
    @include('modals.delete_modal')

    <!-- Seller Profile Modal -->
    <div class="modal fade" id="profile_modal">
        <div class="modal-dialog">
            <div class="modal-content" id="profile-modal-content">

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

    <!-- Seller Payment Modal -->
    <div class="modal fade" id="payment_modal">
        <div class="modal-dialog">
            <div class="modal-content" id="payment-modal-content">

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

    <!-- Ban Seller Modal -->
    <div class="modal fade" id="confirm-ban">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{ translate('Confirmation') }}</h5>
                    <button type="button" class="close" data-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ translate('Do you really want to ban this seller?') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ translate('Cancel') }}</button>
                    <a class="btn btn-primary" id="confirmation">{{ translate('Proceed!') }}</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Unban Seller Modal -->
    <div class="modal fade" id="confirm-unban">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{ translate('Confirmation') }}</h5>
                    <button type="button" class="close" data-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ translate('Do you really want to ban this seller?') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ translate('Cancel') }}</button>
                    <a class="btn btn-primary" id="confirmationunban">{{ translate('Proceed!') }}</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal right fade addPost-modal add-blog edit-blog" data-refresh="true" id="addPost-modal" role="dialog">
        <div class="modal-dialog" id="modals_datas" >
            {{-- <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{translate('Add New Post')}}</h4>
                </div>
                    <ul class="nav nav-tabs px-4" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="post-tab" data-toggle="tab" href="#addPost" role="tab" aria-controls="addPost" aria-selected="true">Add Post</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="keyword-tab" data-toggle="tab" href="#addKeyword" role="tab" aria-controls="addKeyword" aria-selected="false">Add Keyword</a>
                        </li>
                    </ul>
                    <form action="{{ route('blog.store') }}"  enctype="multipart/form-data" method="POST">
                        <div class="modal-body pt-1">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="addPost" role="tabpanel" aria-labelledby="post-tab">
                                    @csrf
                                    <div class="row mt-3">
                                        <div class="form-group col-md-12">
                                            <label class="col-from-label" for="title">{{translate('Post Name')}}</label>
                                            <div class="">
                                                <input type="text" placeholder="{{translate('Post Name')}}" id="title" name="title" class="form-control" required>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label class="col-from-label" for="title">{{translate('Post Slug')}}</label>
                                            <div class="">
                                                <input type="text" placeholder="{{translate('Post Slug')}}" id="title" name="slug" class="form-control" required>
                                            </div>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <label class="col-from-label" for="short_description">{{translate('Short Description')}}</label>
                                            <div class="">
                                                <textarea type="text" class="form-control richTextBox aiz-text-editor" name="short_description" placeholder="Short Description" value="" rows="5" ></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12" >
                                            <label class="col-from-label" for="description">{{translate('Description')}}</label>
                                            <div class="">
                                                <textarea type="text" class="form-control richTextBox aiz-text-editor" name="description" placeholder="Description" value="" rows="5" ></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12">
                                        <label>{{translate('Upload Image')}}</label>
                                        <div class="custom-file">
                                            <input type="file" name="image" class="custom-file-input" id="customFile" required>
                                            <label class="custom-file-label" for="customFile">{{translate('Choose file')}}</label>
                                        </div>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="exampleFormControlSelect1">Select Category</label>
                                            <select class="form-control" id="exampleFormControlSelect1" name="post_id">
                                                <option value="">Select</option>
                                            @foreach ($categories as $cat)
                                            <option value="{{$cat->id}}">{{$cat->title}}</option>
                                            @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="addKeyword" role="tabpanel" aria-labelledby="keyword-tab">
                                    @csrf
                                    <div class="row mt-3">
                                        <div class="form-group col-md-12">
                                            <label class="col-from-label" for="meta_title">{{translate('Meta Title')}}</label>
                                            <div class="">
                                                <input type="text" placeholder="{{translate('Meta Title')}}" id="meta_title" name="meta_title" class="form-control" >
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12" >
                                            <label class="col-from-label" for="metadescription">{{translate('Meta Description')}}</label>
                                            <div class="">
                                                <textarea type="text" class="form-control" name="meta_description" placeholder="Meta Description" value="" rows="5"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label class="col-from-label" for="metakeyword">{{translate('Meta Keyword')}}</label>
                                            <div class="">
                                                <input type="text" placeholder="{{translate('Meta Keyword')}}" id="meta_keyword" name="meta_keyword" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <label class="col-from-label">Snippet Preview</label>
                                            <div class="snippetPrev">
                                                <a href="javascript:void(0);" class="titleLink">This is an example title - edit by clicking here</a>
                                                <a href="javascript:void(0);">example.com/</a>
                                                <a href="javascript:void(0);">example-post/</a>
                                                <div class="metaDes">
                                                    <a href="javascript:void(0);">Please provide a meta description by editing the snippet below.</a>
                                                </div>
                                            </div>
                                            <div class="list-Title">Edit your SEO title and meta description by clicking the title and meta description!</div>
                                            <ul class="seoStatus-list">
                                                <li class="scoreBad">No focus keyword was set for this page. If you do not set a focus keyword, no score can be calculated.</li>
                                                <li class="scoreBad">The text contains 15 words. This is far below the recommended minimum of 300 words. Add more content that is relevant for the topic.</li>
                                                <li class="scoreBad">No meta description has been specified. Search engines will display copy from the page instead.</li>
                                                <li class="scoreOk">Please create an SEO title.</li>
                                                <li class="scoreOk">No images appear in this page, consider adding some as appropriate.</li>
                                                <li class="scoreGood">No internal links appear in this page, consider adding some as appropriate.</li>
                                                <li class="scoreGood">No outbound links appear in this page, consider adding some as appropriate.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">{{ translate('Save') }}</button>
                    </div>
                </form>
            </div> --}}
        </div>
    </div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    {{-- <div id="imageCarousel" class="carousel slide mt-4" data-ride="carousel" >
        <div class="carousel-inner" id="carouselItems"></div>
        <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div> --}}
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="min-height: auto;">
            <h3 style="font-size: 18px;margin:0px;">Uploaded Images</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div id="imageCarousel" class="carousel slide" data-ride="carousel" >
                <div class="carousel-inner" id="carouselItems"></div>
                <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
          </div>
        </div>
      </div>
  </div>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var urls = "{{ route('blog.list') }}"
            data_index(urls);

            function show_seller_payment_modal(id) {
                $.post('{{ route('sellers.payment_modal') }}', {
                    _token: '{{ @csrf_token() }}',
                    id: id
                }, function(data) {
                    $('#payment_modal #payment-modal-content').html(data);
                    $('#payment_modal').modal('show', {
                        backdrop: 'static'
                    });
                    $('.demo-select2-placeholder').select2();
                });
            }

            function show_seller_profile(id) {
                $.post('{{ route('sellers.profile_modal') }}', {
                    _token: '{{ @csrf_token() }}',
                    id: id
                }, function(data) {
                    $('#profile_modal #profile-modal-content').html(data);
                    $('#profile_modal').modal('show', {
                        backdrop: 'static'
                    });
                });
            }

            function update_approved(el) {
                if (el.checked) {
                    var status = 1;
                } else {
                    var status = 0;
                }
                $.post('{{ route('sellers.approved') }}', {
                    _token: '{{ csrf_token() }}',
                    id: el.value,
                    status: status
                }, function(data) {
                    if (data == 1) {
                        AIZ.plugins.notify('success', '{{ translate('Approved sellers updated successfully') }}');
                    } else {
                        AIZ.plugins.notify('danger', '{{ translate('Something went wrong') }}');
                    }
                });
            }

            function sort_sellers(el) {
                $('#sort_sellers').submit();
            }

            function confirm_ban(url) {
                $('#confirm-ban').modal('show', {
                    backdrop: 'static'
                });
                document.getElementById('confirmation').setAttribute('href', url);
            }

            function confirm_unban(url) {
                $('#confirm-unban').modal('show', {
                    backdrop: 'static'
                });
                document.getElementById('confirmationunban').setAttribute('href', url);
            }

            $(document).on('click', '#add_modal', function(event) {
                dataList();
            });

            $(document).on('click', '#edit_blog', function(event) {
                let id = $(this).data('id');
                var url = "{{ url('/admin/blog/edit/') }}" + "/" + id + "?lang=" + "{{ env('DEFAULT_LANGUAGE') }}";

                edit_blog(url);
            });

            $(document).on('click', '.openlink', function(event) {
                let id = $(this).data('id');
                var url = "{{ url('/admin/blog/edit/') }}" + "/" + id + "?lang=" + "{{ env('DEFAULT_LANGUAGE') }}";
                $('.imagepopup').show();
              });

            // =============================== Create Blog Data ===========================//

            $(document).on('click', '#saveUnit', function() {
                
                if ($('#keyword-tab').hasClass('active')) {
                    var title = $('#title').val();
                    var short_description = $('#short_description').val();

                    if (title == '' || short_description == '') {
                        AIZ.plugins.notify('danger', 'Blog Fields are required');
                        return;
                    }
                }
                var formData = new FormData($("#form-id")[0]);
                let action = $(this).closest('.modal-content').find('form').attr('action');
                $.ajax({
                    method: "POST",
                    url: action,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $("#form-id .invalid-feedback").remove();
                        if (data.errors) {
                            $.each(data.errors, function(k, val) {
                                var err =
                                    '<span class="invalid-feedback" role="alert" style="display: block;"><p style="margin:0px;font-weight:400">' +
                                    val + '</p></span>';
                                $("#form-id input[name=" + k + "]").after(err);
                                $("#form-id textarea[name=" + k + "]").after(err);
                            });
                        } else {
                            AIZ.plugins.notify('success', 'Blog created successfully');
                            $('#addPost-modal').modal('hide');
                            var urls = "{{ route('blog.list') }}"
                            data_index(urls);
                        }
                    }
                });
            });

            /////////////////////////////// Edit & update blog

            $(document).on('click', '#update_blog', function() {
                // var formData = $('#form-id').serialize();
                var formData = new FormData($("#update_form")[0]);
                let action = $(this).closest('.modal-content').find('form').attr('action');

                $.ajax({
                    method: "POST",
                    url: action,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $("#update_form .invalid-feedback").remove();
                        if (data.errors) {
                            $.each(data.errors, function(k, val) {
                                var err =
                                    '<span class="invalid-feedback" role="alert" style="display: block;"><p style="margin:0px;font-weight:400">' +
                                    val + '</p></span>';
                                var a = $("#update_form input[name=" + k + "]").after(
                                    err);
                                var text = $("#update_form textarea[name=" + k + "]")
                                    .after(err);

                            });
                        } else {
                            AIZ.plugins.notify('success', 'Blog Update successfully');
                            $('#addPost-modal').modal('hide');
                            var urls = "{{ route('blog.list') }}"
                            data_index(urls);
                        }
                    }
                });
            });

            //==================================== Delete Multiple Data ==========================================//

            $(document).on('change', "#checkAll", function () {
                $(document).find(".checkedoptions input:checkbox").prop('checked', $(this).prop("checked"));
            });

            $(document).on('click', '#checkAll', function() {
                $("#sProduct").text("0");
                if ($(this).is(":checked")) {
                    $("#deletedData, .selected-prod").css("display", "block");
                    $("#restoreData").css("display", "block");
                    $(this).closest('table').find('#searchPage tr').addClass('active');
                } else {
                    $("#deletedData, .selected-prod").css("display", "none");
                    $("#restoreData").css("display", "none");
                    $(this).closest('table').find('#searchPage tr').removeClass('active');
                }
                $(".product_checkbox").prop("checked", this.checked);
                $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
            });

            $(document).on('click', '.product_checkbox, #checkAll', function() {
                if ($(this).is(':checked')) {
                    $(this).closest('tr').addClass('active');
                } else {
                    $(this).closest('tr').removeClass('active');
                }
                
                const selectedCount = $('.product_checkbox:checked').length;
                $("#sProduct").text(selectedCount);

                if (selectedCount == $('.product_checkbox').length) {
                    $('#checkAll').prop('checked', true);
                } else {
                    $('#checkAll').prop('checked', false);
                }

                if (selectedCount == 0) {
                    $("#deletedData, .selected-prod").css("display", "none");
                    $("#restoreData").css("display", "none");
                } else {
                    $("#deletedData, .selected-prod").css("display", "block");
                    $("#restoreData").css("display", "block");
                }
            });
            $(document).on('click', '#delete_records', function() {
                var row = $(this).closest('tr');
                var deleteModal = $('#delete-modal');
                var products = [];
                $(".product_checkbox:checked").each(function() {
                    products.push($(this).val());
                });

                if (products.length <= 0) {
                    alert("Please select records.");
                } else {
                    var selected_values = products.join(",");
                    deleteModal.modal({
                        backdrop: 'static',
                        keyboard: false
                    });

                    $('#delete-link').one('click', function(e) {
                        $.ajax({
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: "{{ url('/admin/blog/multi_delete') }}",
                            cache: false,
                            data: 'emp_id=' + selected_values,
                            success: function(response) {
                                var emp_ids = response.split(",");
                                for (var i = 0; i < emp_ids.length; i++) {
                                    $("#" + emp_ids[i]).closest("tr").remove();
                                }
                                $("#sProduct").text("0");
                                if (emp_ids.length > 0) {
                                    AIZ.plugins.notify('success', 'Blog Deleted successfully');
                                    var urls = "{{ route('blog.list') }}"
                                    data_index(urls);
                                } else {
                                    AIZ.plugins.notify('success', 'Blog Not Deleted successfully');
                                }
                                $('#delete-modal').modal('hide');
                                $("#deletedData").hide();
                            }
                        });
                    });
                }
            });
 
            $(document).on('click', '#deletebtn', function() {
                var url = $(this).data('href');
                var checkThis = $(this);
                var deleteModal = $('#delete-modal');
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });
                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(obj) {
                            $('#delete-modal').modal('hide');
                            AIZ.plugins.notify('success', 'Blog deleted successfully');
                            loadStoredPagination();  
                            // var urls = "{{ route('blog.list') }}"
                            // data_index(urls);
                        }
                    });
                });
            });

            $('#delete-modal').on('hidden.bs.modal', function () {
                $(this).find('#delete-link').off('click');
            });

            ///////////////////////////////// Searching
 

            $(document).on("keypress", "input[name='search']", function(event) { 
                if (event.keyCode == 13) {
                    var searchTerm = $(this).val();
                    memberSearchAjax(searchTerm);
                }
            });

            $(document).on("click", "#memberSearch", function(event) {
                var searchTerm = $("input[name='search']").val();
                memberSearchAjax(searchTerm);
            });

            var typingTimer;
            var doneTypingInterval = 1000;
            function memberSearchAjax(searchTerm) {
                var url = "{{ route('blog.list') }}";
 
                if (searchTerm) {
                    var data = {
                        'search': searchTerm
                    };
                    data_index(url,data);
                } else {
                    var data = {
                        'search': ''
                    };
                    data_index(url,data);
                }
            }

            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var url = $(this).attr('href');
                localStorage.setItem('paginationURL', url);
                $.ajax({
                    url: url,
                    cache: false,
                    success: function(html) {
                        $("#table_list").html(html);
                    }
                });
                $('#sProduct').text('0');
                $('#deletedData').hide();
                $('#restoreData').hide();
            });

            function loadStoredPagination() {
                var storedURL = localStorage.getItem('paginationURL');  
                
                if (storedURL) {
                    $.ajax({
                        url: storedURL,
                        cache: false,
                        success: function(data) { 
                            $("#table_list").html(data); 
                        }
                    });
                }
            } 

            function edit_blog(url) {
                $.ajax({
                    url: url,
                    success: function(data) {
                        $("#modals_datas").html(data);
                        AIZ.plugins.textEditor();
                        AIZ.plugins.tagify();
                    }
                });
            }

            function dataList() {
                $.ajax({
                    url: "{{ route('blog.create') }}",
                    //data:{},
                    type: 'GET',
                    success: function(data) {
                        $("#modals_datas").html(data);
                        AIZ.plugins.textEditor();
                        AIZ.plugins.tagify();

                    }
                });
            }

            function data_index(url,data) {
                $.ajax({
                    url: url,
                    data:data,
                    type: 'GET',
                    success: function(data) {
                        $("#table_list").html(data);
                    }
                });
            }

            ////////////// REMOVE GALLERY IMAGES /////////////////////////////////////////////////////////

            $(document).on('click', '.remove-image', function() {
                var imageToRemove = $(this).data('image');
                var imageId = $(this).data('id');
                var column = $(this).data('column');
                var $imageContainer = $(this).closest('.image-container');
                var $imageContainer = $(this).closest('.file-preview');


                $.ajax({
                    type: 'GET',
                    url: "{{ url('admin/blog/remove-gallery-image/') }}" + "/" + imageId,
                    data: {
                        'image_path': imageToRemove,
                        'column': column
                    },
                    success: function(response) {
                        if (response) {
                            AIZ.plugins.notify('success', 'Image removed successfully');
                            $imageContainer.remove();
                        } else {
                            AIZ.plugins.notify('danger', 'Image Not removed');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        AIZ.plugins.notify('danger', 'Error: Image removal failed.');
                    }
                });
            });

            /* $(document).on('change', '#customFile', function() {
                var fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').html(fileName);
            }); */

            ///////////////////////////////////// UPLOAD IMAGE
            $(document).on('change', '#customFile', function() {
                var file = this.files[0];
                var fileName = file.name;
                var fileType = file.type;
                var maxSize = 1 * 1024 * 1024;

                $(this).next('.custom-file-label').html(fileName);
                var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/webp', 'image/svg+xml'];

                if (allowedTypes.indexOf(fileType) === -1) {
                    $("#errorfile1").css("display", "block").text("The image must be a file of type: jpeg, png, gif, jpeg, svg.");
                    checkErrors();
                    return;
                }else if (file.size > maxSize) {
                    $("#errorfile1").css("display", "block").text("The image may not be greater than 500 KB.");
                    checkErrors();
                    return;
                } else {
                    $("#errorfile1").css("display", "none").text("");
                    readURL(this);
                }
                checkErrors();
            });

            ///////////////////////////////////// UPLOAD GALLERY IMAGE
            var initialState = $('#gallery_images').clone();

            $(document).on('change', '#gallery_images', function() {                
                var files = this.files;

                if (!files.length) {
                    $(this).replaceWith(initialState.clone());
                    return false;
                }
                var fileNames = [];
                var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif','image/webp', 'image/svg+xml'];
                var errors = [];
                var maxSize = 3 * 1024 * 1024;

                for (var i = 0; i < files.length; i++) {
                    fileNames.push(files[i].name); 
                    var img = URL.createObjectURL(files[i]); 
                    $('#addimages').append('<div class="col-3 mb-2"> <div class="gallaryImageBox"><img id="previewImage" style="width: 100%;" loading="lazy" src="'+img+'" class="img-responsive"> <div class="crossbtn"><i class="fas fa-times-circle" style="color:#d7282f"></i> </div> </div></div>');

                    if (allowedTypes.indexOf(files[i].type) === -1) {
                        errors.push("The gallery image must be a file of type: jpeg, png, gif, jpeg, svg.");
                        $('#saveUnit').prop('disabled', true).addClass('disableBTN');
                    }
                    if (files[i].size > maxSize) {
                        errors.push("The gallery image may not be greater than 5 MB.");
                        $('#saveUnit').prop('disabled', true).addClass('disableBTN');
                    }
                }

                if (files.length) { 
                    $(this).next('.custom-file-label').html(fileNames.join(', '));
                    initialState = $(this).clone();
                }

                if (errors.length > 0) {
                    $('#errorfile2').css("display", "block").html(errors.join("<br>"));
                } else {
                    $('#errorfile2').css("display", "none").html("");
                    if (files.length) {                        
                        readURLaddurl(this);
                    }
                }
                checkErrors();
            });

            // function checkErrors() {
            //     var error1Visible = $('#errorfile1').is(':visible');
            //     var error2Visible = $('#errorfile2').is(':visible');

            //     if (error1Visible || error2Visible) {
            //         $('#saveUnit').prop('disabled', true).addClass('disableBTN');
            //     } else {
            //         $('#saveUnit').prop('disabled', false).removeClass('disableBTN');
            //     }
            // }

            function readURLaddurl(input) {
                if (input.files) {
                    var imageContainer = $('#imageContainer'); 
                    for (var i = 0; i < input.files.length; i++) {
                        (function(file) {
                            var reader = new FileReader();
                            reader.onload = function(e) {
                                
                                var img = $('<img>').attr('src', e.target.result).addClass('previewImage');
                                
                                imageContainer.append(img);
                            };
                            reader.readAsDataURL(file);
                        })(input.files[i]);
                    }
                }
            }

            ///////////////////////////////////// UPLOAD EDIT IMAGE
            $(document).on('change', '#customFile1', function() {
                var file = this.files[0];  
                var fileName = file.name;
                var fileType = file.type;
                var maxSize = 1 * 1024 * 1024;

                $(this).next('.custom-file-label').html(fileName);
                var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg','image/webp', 'image/svg+xml'];

                if (allowedTypes.indexOf(fileType) === -1) {
                    $("#errorfile_update").css("display", "block").text("The image must be a file of type: jpeg, png, gif, jpeg, svg.");
                    checkError_Update();
                    return;
                }else if (file.size > maxSize) {
                    $("#errorfile_update").css("display", "block").text("The image may not be greater than 1 MB.");
                    checkError_Update();
                    return;
                }else {
                    $("#errorfile_update").css("display", "none").text("");
                    readURL(this);
                }
                checkError_Update();
            });
            
            $(document).on('change', '#fileInput', function() {
                var file = this.files[0];
                var fileName = file.name;
                var fileType = file.type;
                var maxSize = 3 * 1024 * 1024;

                $(this).next('.custom-file-label').html(fileName);
                var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/svg+xml'];

                if (allowedTypes.indexOf(fileType) === -1) {
                    $("#errorfile_update2").css("display", "block").text("The image must be a file of type: jpeg, png, gif, jpeg, svg.");
                    checkError_Update();
                    return;
                }else if (file.size > maxSize) {
                    $("#errorfile_update2").css("display", "block").text("The image may not be greater than 3 MB.");
                    checkError_Update();
                    return;
                }else {
                    $("#errorfile_update2").css("display", "none").text("");
                    readURL(this);
                }
                checkError_Update();
            });

            //////////////////////////////////// Function EDIT IMAGE
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#previewImage').attr('src', e.target.result).show();
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            } 

            ///////////////////////////////////// Function EDIT GALLERY IMAGE 
            let currentFilesInput1 = [];  
            let invalidFilesInput1 = [];  

            window.removeFiledit = function(removeButton, index) {  
                const isInvalidFile = $(removeButton).closest('.file-preview').hasClass('file-preview-errors'); 
                if (isInvalidFile) { 
                    invalidFilesInput1.splice(index, 1);
                } else { 
                    currentFilesInput1.splice(index, 1); 
                    const dataTransfer = new DataTransfer();
                    currentFilesInput1.forEach(file => dataTransfer.items.add(file));
                    $("#fileInput1")[0].files = dataTransfer.files;
                }

                $(removeButton).closest('.new-files').remove();  
                rearrangeFileIndices(); 
                updateButtonStatus();  
                showCarousel(1); 
                saveFileData();
            }

            function rearrangeFileIndices() { 
                $('#filePreviewsInput1 .new-files:not(.file-preview-errors)').each(function(index, element) {
                    $(element).find('.crossIcon').attr('onclick', `removeFiledit(this, ${index})`);
                });
 
                $('#filePreviewsInput1 .file-preview-errors').each(function(index, element) {
                    $(element).find('.crossIcon').attr('onclick', `removeFiledit(this, ${index})`);
                });
            }

            $(document).on('change', "#fileInput1", function(event) { 
                let allValid = true;
                const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/webp', 'image/svg+xml'];

                currentFilesInput1 = [];
                invalidFilesInput1 = [];

                const dataTransfer = new DataTransfer(); 

                Array.from(this.files).forEach((file, i) => {
                    if (file.size > MAX_FILE_SIZE && file.type.startsWith("image/")) {
                        appendErrorPreviewInput1(file.name, 'Maximum size required ' + SETMAXNUMBER + " MB");
                        $("#saveUnit").prop("disabled", true); 
                        invalidFilesInput1.push(file);
                        allValid = false;
                    } else if (!allowedTypes.includes(file.type)) {
                        appendErrorPreviewInput1(file.name, "Images must be jpeg, png, gif, or svg."); 
                        $("#saveUnit").prop("disabled", true); 
                        invalidFilesInput1.push(file); 
                        allValid = false;
                    } else {
                        $("#saveUnit").prop("disabled", false); 
                        currentFilesInput1.push(file); 
                        dataTransfer.items.add(file); 

                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const shortenedFilename = shortenFilename(file.name,10);
                            const preview = `
                                <div class="col-4 mb-2 file-preview new-files">
                                    <div style="border:1px solid #EAEAEA;border-radius:5px;padding:6px;">
                                        <div style="display: flex;align-items:center;width:100%;justify-content:space-between;">
                                            <div style="display:flex;align-items:center;gap:4px;">
                                                <div style="width:40.55px;border-radius:2px;height:30.75px;">
                                                    <img src="${e.target.result}" alt=""
                                                        style="width: 100%;object-fit:cover;height:100%;">
                                                </div>
                                                <div>
                                                    <p style="margin: 0px;font-size:14px;font-weight:400;color:#000;"
                                                        data-toggle="tooltip" data-placement="top" title="${file.name}">
                                                        ${shortenedFilename}
                                                    </p>
                                                </div>
                                            </div><div style="width: 1px;background-color:#D9D9D9;height:22px;"></div>
                                            <div style="cursor: pointer" class="openlink" class="modal-dialog modal-dialog-centered;display:block">
                                                <i class="icons icon-show" data-id="${e.target.result}"
                                                    style="font-size: 18px;line-height:inherit">
                                                </i>
                                            </div><div style="width: 1px;background-color:#D9D9D9;height:22px;"></div>
                                            <div style="cursor:pointer" class="crossIcon" onclick="removeFiledit(this,${i})">
                                                <i class="fa-solid fa-xmark" style="width:13px;"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                            $("#filePreviewsInput1").append(preview);
                        };
                        reader.readAsDataURL(file);  
                    }
                });
 
                this.files = dataTransfer.files; 
                if (allValid) {
                    $("#saveUnit").prop("disabled", false);
                    $("#update_blog").prop("disabled", false); 
                }
 
                rearrangeFileIndices(); 
                updateButtonStatus();
            });

            // Function to append error preview for invalid files
            function appendErrorPreviewInput1(filename, setmessage) {
                const shortenedFilename = shortenFilename(filename,8);
                const   dummy_image='data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMUExQTFBIiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHJlcXVpcmVkRXh0ZW5zaW9ucz0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj48L2ZvcmVpZ25PYmplY3Q+PGcgaTpleHRyYW5lb3VzPSJzZWxmIj48Zz48cGF0aCBkPSJNODYuNSwyOC42aC04LjFsLTEtNy4xYy0wLjQtMi45LTEuOS01LjUtNC4yLTcuM2MtMi4zLTEuOC01LjItMi41LTguMS0yLjFMMTIsMTkuNWMtNiwwLjgtMTAuMiw2LjQtOS40LDEyLjRsNSwzNyAgICAgYzAuOCw1LjUsNS41LDkuNSwxMC45LDkuNWMwLjUsMCwxLDAsMS41LTAuMWwyLjEtMC4zYzAuNSw1LjYsNS4yLDEwLDEwLjksMTBoNTMuNmM2LDAsMTEtNC45LDExLTExVjM5LjYgICAgIEM5Ny41LDMzLjYsOTIuNiwyOC42LDg2LjUsMjguNnogTTkxLjUsMzkuNlY3MUw3NS43LDUyLjljLTIuNi0zLTcuNC0zLTEwLDBMNTIuMSw2OC41bC00LjktNS40Yy0yLjUtMi43LTYuOC0yLjctOS4yLDBMMjgsNzQgICAgIFYzOS42YzAtMi43LDIuMi01LDUtNWg1My42Qzg5LjMsMzQuNiw5MS41LDM2LjksOTEuNSwzOS42eiBNMjIsMzkuNnYzMi4ybC0yLjgsMC40Yy0yLjcsMC40LTUuMi0xLjUtNS42LTQuM0w4LjUsMzEgICAgIGMtMC40LTIuNywxLjUtNS4yLDQuMy01LjZsNTMuMS03LjNjMC4yLDAsMC41LDAsMC43LDBjMi40LDAsNC42LDEuOCw0LjksNC4zbDAuOSw2LjNIMzNDMjYuOSwyOC42LDIyLDMzLjYsMjIsMzkuNnoiPjwvcGF0aD48Y2lyY2xlIGN4PSI0Mi41IiBjeT0iNDcuOCIgcj0iNiI+PC9jaXJjbGU+PC9nPjwvZz48L3N3aXRjaD48L3N2Zz4=';

                const errorPreview = `
                    <div class="col-4 mb-2 file-preview file-preview-errors new-files">
                        <div style="border:1px solid #EAEAEA;border-radius:5px;padding:6px;">
                            <div style="display: flex;align-items:center;width:100%;justify-content:space-between;">
                                <div style="display:flex;align-items:center;gap:6px;">
                                    <div style="width:40.55px;border-radius:2px;height:30.75px;">
                                        <img src="${dummy_image}" alt="" style="width: 100%;object-fit:cover;height:100%;">
                                    </div>
                                    <div>
                                        <p style="margin: 0px;font-size:14px;font-weight:400;color:#000;" 
                                            data-toggle="tooltip" data-placement="top" title="${shortenedFilename}">
                                            ${shortenedFilename}
                                        </p>
                                        
                                    </div><div style="width: 1px;background-color:#D9D9D9;height:22px;"></div>
                                    <div style="cursor: pointer" class="openlink" class="modal-dialog modal-dialog-centered;display:block">
                                                <i class="icons icon-show" data-id="${dummy_image}"
                                                    style="font-size: 18px;line-height:inherit">
                                                </i>
                                            </div><div style="width: 1px;background-color:#D9D9D9;height:22px;"></div>
                                </div>
                                <div style="cursor:pointer" class="crossIcon" onclick="removeFiledit(this)">
                                    <i class="fa-solid fa-xmark" style="width:13px;"></i>
                                </div>
                            </div>
                        </div>
                        <p style="font-size:80%;color:#d7282f;margin:0px;">${setmessage}</p>
                    </div>
                `;
                $("#filePreviewsInput1").append(errorPreview); 
                rearrangeFileIndices();
                updateButtonStatus();
            }
 
            function updateButtonStatus() {
                const errorCount = $("#filePreviewsInput1 .file-preview-errors.new-files").length;
                $("#saveUnit, #update_blog").prop("disabled", errorCount > 0);
            }
 
            function saveFileData() {
                console.log('Saving file data...');
                
            }
 
            function checkError_Update() {
                $('#update_blog').prop('disabled', $('#errorfile_update').is(':visible') || $('#errorfile_gallery_update').is(':visible')).toggleClass('disableBTN', $('#errorfile_update').is(':visible') || $('#errorfile_gallery_update').is(':visible'));
            }
 
            $(document).on('input', '.form-control', function() {
                $(this).siblings('.invalid-feedback').hide();
            });
            ////////////////// Validation For Input Fields//////////////

            $(document).on('input', '#short_description', function() {
                var maxLength = 150;
                var length = $(this).val().length;
                var remainingCharacters = maxLength - length;
 
                if (remainingCharacters >= 0) {
                    $('#short_description_message').text('Remaining characters: ' + remainingCharacters);
                    // $('#saveUnit').prop('disabled', false);
                    $('#update_blog').prop('disabled', false);
                    $('#short_description_message').removeClass('text-danger');
                } else {
                    $('#short_description_message').text('Max Characters Limit Reached!');
                    $('#short_description_message').addClass('text-danger');
                    $('#saveUnit').prop('disabled', true);
                    $('#update_blog').prop('disabled', true);
                }
 
                if (remainingCharacters === 0) {
                    $('#short_description_message').text('');
                }
            });
    
            const SETMAXNUMBER = 3;
            const MAX_FILE_SIZE = SETMAXNUMBER * 1024 * 1024; 
            let currentFiles = []; 

 
            function showCarousel(startIndex,show_hide='0') {
                $("#carouselItems").empty(); 
                var currentFiles = $(document).find('#fileInput')[0].files;
                $.each(currentFiles, function(index, file) {
                    const reader = new FileReader(); 
                    reader.onload = function(e) {
                        const itemClass = index == 0 ? 'carousel-item active' : 'carousel-item';
                        $("#carouselItems").append(`
                            <div class="${itemClass}">
                                <img src="${e.target.result}" style="height:500px;width:100%;object-fit:contain;">
                            </div>
                        `);
                    };
                    reader.readAsDataURL(file);
                }); 

                if(currentFiles==1){
                    setTimeout(function() {  $(document).find('.carousel-item').show();}, 1000);
                } 
            }
 
            function toggleButtonsBasedOnError() { 
                if ($('#filePreviews .file-preview-errors').length > 0 || $('#filePreviewsInput1 .file-preview-errors').length > 0) { 
                    $('#saveUnit').prop('disabled', true);
                    $('#update_blog').prop('disabled', true);
                } else {
                    
                    $('#saveUnit').prop('disabled', false);
                    $('#update_blog').prop('disabled', false);
                }
            }
 
            $(document).ready(function() {
                toggleButtonsBasedOnError();  
                $('#fileInput, #fileInput1').on('change', function() {
                    toggleButtonsBasedOnError(); 
                });
            });
  
            window.removeFile = function(removeButton) { 
                const previewIndex = $(removeButton).closest('.file-preview').index(); 
                currentFiles.splice(previewIndex, 1);  

                const dataTransfer = new DataTransfer();
                currentFiles.forEach(file => dataTransfer.items.add(file)); 
                console.log
                $("#fileInput")[0].files = dataTransfer.files;
                $(removeButton).closest('.file-preview').remove();  
                const errorPreviews = $("#filePreviews .error-preview ");
                $("#submitBtn").prop("disabled", errorPreviews.length > 0);  
                showCarousel(1);  
            }

            $(document).on('click', '.removeBox', function() { 
                $('#saveUnit').prop('disabled', false); 
                const previewIndex = $(this).closest('.file-preview').index();
                currentFiles.splice(previewIndex, 1);
                $(this).closest('.file-preview').remove(); 
                showCarousel(0);
            });
 
            $(document).on('change', "#fileInput", function(event) {
                $("#submitBtn").prop("disabled", true);
                $("#update_form #update_blog").prop("disabled", true);
            
                let allValid = true;
                const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/webp', 'image/svg+xml'];
                let currentFiles = [];
                const dataTransfer = new DataTransfer(); 

                for (let i = 0; i < this.files.length; i++) {
                    const file = this.files[i];

                    if (file.size > MAX_FILE_SIZE && file.type.startsWith("image/")) {
                        var setmessage = 'Maximum size required ' + SETMAXNUMBER + " MB";
                        appendErrorPreview(file.name, setmessage, i);  
                        allValid = false;
                    } else if (!file.type.startsWith("image/")) {
                        var setmessage = "Images must be jpeg, png, gif, or svg.";
                        appendErrorPreview(file.name, setmessage, i);   
                        allValid = false;
                    } else if (!allowedTypes.includes(file.type)) {
                        var setmessage = "  Images must be jpeg, png, gif, or svg."; 
                        appendErrorPreview(file.name, setmessage, i);   
                        allValid = false;
                    } else {
                        currentFiles.push(file);  
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            var shortenedFilename = shortenFilename(file.name , 10);
                            const preview = $(`
                                <div class="col-4 mb-2 file-preview">
                                    <div style="border:1px solid #EAEAEA;border-radius:5px;padding:6px;">
                                        <div style="display: flex;align-items:center;width:100%;justify-content:space-between;">
                                            <div style="display:flex;align-items:center;gap:4px;">
                                                <div style="width:40.55px;border-radius:2px;height:30.75px;">
                                                    <img src="${e.target.result}" alt=""
                                                        style="width: 100%;object-fit:cover;height:100%;">
                                                </div>
                                                <div>
                                                    <p style="margin: 0px;font-size:14px;font-weight:400;color:#000;" data-toggle="tooltip" data-placement="top"
                                                        title="${file.name}">
                                                        ${shortenedFilename}
                                                    </p>
                                                </div>
                                            </div>
                                            <div style="display:flex;align-items:center;gap:6px;"></div>
                                            <div style="width: 1px;background-color:#D9D9D9;height:22px;"></div>
                                            <div style="cursor: pointer" class="openlink" class="modal-dialog modal-dialog-centered;display:block">
                                                <i class="icons icon-show" data-id="${e.target.result}"
                                                    style="font-size: 18px;line-height:inherit">
                                                </i>
                                            </div>
                                            <div style="width: 1px;background-color:#D9D9D9;height:22px;"></div>
                                            <div onclick="removeFile(this)" style="cursor:pointer" class="crossIcon">
                                                <i class="fa-solid fa-xmark" style="width:13px;"></i>
                                            </div>
                                        </div>                                  
                                    </div>                                
                                </div>
                            `);
                            $("#filePreviews").append(preview);
                        };
                        console.log(reader.readAsDataURL(file));
                    }
                }
 
                currentFiles.forEach(file => dataTransfer.items.add(file)); 
                this.files = dataTransfer.files; 
                if (allValid) {
                    $("#saveUnit").prop("disabled", false);
                    $("#update_blog").prop("disabled", false);
                
                }else{
                    $("#saveUnit").prop("disabled", true);
                }
            });

            function shortenFilename(filename, maxfirst=7) {
                const extension = filename.split('.').pop();
                const name = filename.split('.').slice(0, -1).join('.');
                const shortenedName = name.slice(0, maxfirst) + '..';
                return `${shortenedName}.${extension}`;
            }

            function appendErrorPreview(filename, setmessage, fileIndex) {
                var filename = shortenFilename(filename, 10);
                dummy_image='data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMUExQTFBIiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHJlcXVpcmVkRXh0ZW5zaW9ucz0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj48L2ZvcmVpZ25PYmplY3Q+PGcgaTpleHRyYW5lb3VzPSJzZWxmIj48Zz48cGF0aCBkPSJNODYuNSwyOC42aC04LjFsLTEtNy4xYy0wLjQtMi45LTEuOS01LjUtNC4yLTcuM2MtMi4zLTEuOC01LjItMi41LTguMS0yLjFMMTIsMTkuNWMtNiwwLjgtMTAuMiw2LjQtOS40LDEyLjRsNSwzNyAgICAgYzAuOCw1LjUsNS41LDkuNSwxMC45LDkuNWMwLjUsMCwxLDAsMS41LTAuMWwyLjEtMC4zYzAuNSw1LjYsNS4yLDEwLDEwLjksMTBoNTMuNmM2LDAsMTEtNC45LDExLTExVjM5LjYgICAgIEM5Ny41LDMzLjYsOTIuNiwyOC42LDg2LjUsMjguNnogTTkxLjUsMzkuNlY3MUw3NS43LDUyLjljLTIuNi0zLTcuNC0zLTEwLDBMNTIuMSw2OC41bC00LjktNS40Yy0yLjUtMi43LTYuOC0yLjctOS4yLDBMMjgsNzQgICAgIFYzOS42YzAtMi43LDIuMi01LDUtNWg1My42Qzg5LjMsMzQuNiw5MS41LDM2LjksOTEuNSwzOS42eiBNMjIsMzkuNnYzMi4ybC0yLjgsMC40Yy0yLjcsMC40LTUuMi0xLjUtNS42LTQuM0w4LjUsMzEgICAgIGMtMC40LTIuNywxLjUtNS4yLDQuMy01LjZsNTMuMS03LjNjMC4yLDAsMC41LDAsMC43LDBjMi40LDAsNC42LDEuOCw0LjksNC4zbDAuOSw2LjNIMzNDMjYuOSwyOC42LDIyLDMzLjYsMjIsMzkuNnoiPjwvcGF0aD48Y2lyY2xlIGN4PSI0Mi41IiBjeT0iNDcuOCIgcj0iNiI+PC9jaXJjbGU+PC9nPjwvZz48L3N3aXRjaD48L3N2Zz4=';

                const errorPreview = $(`
                <div class="col-4 mb-2 file-preview file-preview-errors">
                    <div style="border:1px solid #EAEAEA;border-radius:5px;padding:6px;">
                        <div style="display: flex;align-items:center;width:100%;justify-content:space-between;">
                            <div style="display:flex;align-items:center;gap:6px;">
                                <div style="width:40.55px;border-radius:2px;height:30.75px;">
                                    <img src="${dummy_image}" alt=""
                                        style="width: 100%;object-fit:cover;height:100%;">
                                </div>
                                <div>
                                    <p style="margin: 0px;font-size:14px;font-weight:400;color:#000;">
                                    ${filename}
                                    </p>
                                </div>
                                <div style="cursor: pointer" class="openlink" class="modal-dialog modal-dialog-centered;display:block">
                                                <i class="icons icon-show" data-id="${dummy_image}"
                                                    style="font-size: 18px;line-height:inherit">
                                                </i>
                                            </div>
                            </div>
                            <div class="removeBox crossIcon" onclick="removeFileFromError(${fileIndex})" style="cursor:pointer;">
                                <i class="fa-solid fa-xmark" style="width:13px;"></i>
                            </div>
                        </div>
                    </div>
                    <p style="font-size:80%;color:#d7282f;margin:0px;">${setmessage}</p>
                </div>
                `);

                $("#filePreviews").append(errorPreview);
            }

            function removeFileFromError(fileIndex) {
                const dataTransfer = new DataTransfer();
                let files = document.getElementById('fileInput').files; 
                for (let i = 0; i < files.length; i++) {
                    if (i !== fileIndex) {
                        dataTransfer.items.add(files[i]);
                    }
                }
 
                document.getElementById('fileInput').files = dataTransfer.files;
            }
 
            $(document).on('click', '.openlinks, .openlink', function () { 
                const clickedElement = $(this).find('.icons');
                const clickedSrc = clickedElement.data('id');
                const images = $('#filePreviews img , #filePreviewsInput1 img ').map((_, img) => $(img).attr('src')).get(); 
                clickedElement.hide();
 
                let carouselItems = `<div class="carousel-item active"><img class="edit_carousel" src="${clickedSrc}" style="height:500px;width:100%;object-fit:contain;">
                         </div>`;
   
                images.forEach(src => {
                    if (src !== clickedSrc) {
                        carouselItems += `<div class="carousel-item">
                                            <img class="edit_carousel" src="${src}" style="height:500px;width:100%;object-fit:contain;">
                                        </div>`;
                    }
                });
 
                $("#carouselItems").html(carouselItems);
                $('#staticBackdrop').modal('show'); 
                $('#staticBackdrop').on('hidden.bs.modal', function () {
                    clickedElement.show();
                });
            });  

            $(document).on('click', ' .openlink', function () { 
                $('.icon-show').show(); 
            });
        });

    </script>
@endsection