if (window.File && window.FileList && window.FileReader) {
    // استماع للأحداث على كل input بحقل class file-input
    $(document).on("change", ".file-input", function (e) {
        var files = e.target.files; // الحصول على الملفات
        var inputElement = $(this); // العنصر الحالي
        var previewContainer = $(this).data('preview-container'); // الحاوية لعرض الصور
        handleFiles(files, previewContainer); // معالجة الصور
    });

    function handleFiles(files, previewContainer) {
        // مسح الصور القديمة في الحاوية قبل إضافة جديدة
        $(`#${previewContainer}`).html("");

        var filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i];
            var fileReader = new FileReader();

            fileReader.onload = (function (file) {
                return function (e) {
                    // تصميم الصورة والمعاينة
                    var image = `
                        <div class="image_append" style="position: relative;">
                            <img class="img-fluid"
                                 src="${e.target.result}"
                                 title="${file.name}"
                                 alt="Preview Image"
                                 style="width: 100px; height: 100px; object-fit: cover; border: 1px solid #ccc;" />
                            <button type="button"
                                    class="btn btn-danger remove"
                                    style="position: absolute; top: 5px; right: 5px;">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>`;
                    // إضافة الصورة للحاوية
                    $(`#${previewContainer}`).append(image);

                    // التعامل مع حذف الصورة
                    $(".remove").last().click(function () {
                        $(this).parent(".image_append").remove();
                        updateFileInput(files, previewContainer);
                    });
                };
            })(f);

            fileReader.readAsDataURL(f);
        }
    }

    function updateFileInput(files, previewContainer) {
        var updatedFiles = [];
        $(`#${previewContainer} img`).each(function () {
            var title = $(this).attr("title"); // اسم الملف من المعاينة
            for (var i = 0; i < files.length; i++) {
                if (files[i].name === title) {
                    updatedFiles.push(files[i]);
                    break;
                }
            }
        });

        var dataTransfer = new DataTransfer();
        for (var i = 0; i < updatedFiles.length; i++) {
            dataTransfer.items.add(updatedFiles[i]);
        }

        // تحديث الملفات في الحقل
        $(`input[data-preview-container="${previewContainer}"]`)[0].files = dataTransfer.files;
    }
} else {
    alert("Your browser doesn't support File API");
}
