חוויית העלאת קבצים משופרת עבור טפסי JetFormBuilder

<style>
    /* עיצוב מותאם לשדה העלאת קבצים */
    .jet-form-builder__field-wrap.jet-form-builder-file-upload {
        background: #ffffff !important;
        border: 1px dashed #D3D3D3 !important;
        padding: 20px !important;
        text-align: center;
        position: relative;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px !important;
    }
    
    /* עיצוב לתמונה שהועלתה */
    .jet-form-builder-file-upload__file img {
        display: block;
        width: 100%;
        height: 100% !important;
        padding: 0;
        margin: 0;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center center;
        object-position: center center;
        border-radius: 6px !important;
        box-shadow: 0 0 30px -8px rgba(0, 0, 0, 0.24) !important;
    }
    
    /* עיצוב לאזור התוכן של הקובץ */
    .jet-form-builder-file-upload__content {
        min-height: auto !important;
    }
    
    /* עיצוב לכפתור "בחר קובץ" ולתווית מצב העלאה */
    .addfile {
        padding: 10px 20px;
        background-color: #DF2537 !important;
        color: #ffffff !important;
        border: none !important;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 6px;
        margin-top: 10px;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .addfile:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
    }
    
    /* תווית מצב העלאה */
    .labeladdfile {
        padding: 6px 12px;
        background-color: transparent;
        color: #000000 !important;
        font-size: 12px;
        font-weight: 400;
        display: block;
        margin-top: 10px;
        border-radius: 6px;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    /* עיצוב בעת שיש קבצים */
    .files-uploaded {
        background-color: #09b872 !important; 
        padding: 6px 12px;
        color: #ffffff !important;
        border-radius: 6px;
    }
    
    /* הסתרת קלט הקובץ */
    .jet-form-builder-file-upload__input {
        display: none;
    }
    
    /* התאמה למסכים קטנים */
    @media (max-width: 767px), (max-width: 1024px) {
        .addfile, .labeladdfile {
            padding: 8px 16px;
            font-size: 12px;
        }
    }
    </style>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const { addAction } = window.JetPlugins.hooks;
    
        addAction('jet.fb.input.makeReactive', 'set-upload-labels', function(input) {
            if (!input?.nodes?.length || !input.nodes[0].classList.contains('jet-form-builder-file-upload__input')) {
                return;
            }
    
            const $ = jQuery;
            const upload = $(input.nodes[0]);
            const fields = $(input.nodes[0].closest('.jet-form-builder-file-upload__fields'));
    
            if (!fields.find('.addfile').length) {
                fields.append(`<input type="button" class="addfile" value="בחירת קובץ"/>`);
                fields.append(`<div class="labeladdfile">בחירת קובץ</div>`);
            }
    
            const labelAdd = fields.find('.labeladdfile');
            const buttonAdd = fields.find('.addfile');
    
            upload.css('display', 'none');
    
            buttonAdd.click(function() {
                upload.trigger('click');
            });
    
            function updateFileLabel() {
                const fileCount = upload[0].files.length;
                if (fileCount > 0) {
                    buttonAdd.val('קובץ הועלה');
                    labelAdd.html(`הועלו (${fileCount}) קבצים`);
                    labelAdd.addClass('files-uploaded');
                    buttonAdd.css({ opacity: 1, transform: 'scale(1)' });
                    labelAdd.css({ opacity: 1, transform: 'scale(1)' });
                } else {
                    resetFileLabel();
                }
            }
    
            function resetFileLabel() {
                buttonAdd.css({ opacity: 0, transform: 'scale(0.9)' });
                labelAdd.css({ opacity: 0, transform: 'scale(0.9)' });
    
                setTimeout(() => {
                    buttonAdd.val('בחירת קובץ');
                    labelAdd.html('בחירת קובץ');
                    labelAdd.removeClass('files-uploaded');
                    buttonAdd.css({ opacity: 1, transform: 'scale(1)' });
                    labelAdd.css({ opacity: 1, transform: 'scale(1)' });
                    $('.jet-form-builder-file-upload__file').remove();
                }, 300);
            }
    
            upload.on('change', updateFileLabel);
    
            // כפתור הסרה של קובץ
            $(document).on('click', '.jet-form-builder-file-upload__file-remove', function() {
                setTimeout(() => {
                    if ($('.jet-form-builder-file-upload__file').length === 0) {
                        resetFileLabel();
                    }
                    if ($('.jet-form-builder-file-upload__file').length > 0) {
                        buttonAdd.val('קובץ הועלה');
                        labelAdd.html(`הועלו (${ $('.jet-form-builder-file-upload__file').length }) קבצים`);
                        labelAdd.addClass('files-uploaded');
                        buttonAdd.css({ opacity: 1, transform: 'scale(1)' });
                        labelAdd.css({ opacity: 1, transform: 'scale(1)' });
                    }
                }, 100);
            });
    
            // התנהגות לאחר שליחה מוצלחת של הטופס
            const successMessageObserver = new MutationObserver((mutationsList) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                        const successMessage = $(mutation.addedNodes).find('.jet-form-builder-message--success');
                        if (successMessage.length > 0) {
                            resetFileLabel();
                        }
                    }
                }
            });
    
            const formContainer = $('.jet-form-builder')[0];
            if (formContainer) {
                successMessageObserver.observe(formContainer, { childList: true, subtree: true });
            }
    
            function resetFileInput() {
                upload.val('');
                resetFileLabel();
                input.value.set([]);
            }
    
            /*
             * == בדיקת קבצים לפי מגבלות גודל וכמות ==
             */
            function validateFiles(files) {
                const maxFileSize = 2 * 1024 * 1024; // 2 מגה
                const maxFileCount = 2;              // מקסימום 2 קבצים
                let valid = true;
    
                if (files.length > maxFileCount) {
                    valid = false;
                } else {
                    Array.from(files).forEach(file => {
                        if (file.size > maxFileSize) {
                            valid = false;
                        }
                    });
                }
                return valid;
            }
    
            // הצגת שגיאה אם הקבצים לא תקינים
            function showErrorMessage() {
                const errorMessage = $('.jet-form-builder-row.field-has-error .error-message').text().trim();
                if (errorMessage) {
                    alert(errorMessage);
                    resetFileInput();
                    setTimeout(() => {
                        window.location.reload();
                    }, 700);
                }
            }
    
            // בדיקת תקינות הקבצים בעת בחירה
            upload.on('change', function() {
                const files = upload[0].files;
                if (!validateFiles(files)) {
                    showErrorMessage();
                }
            });
        });
    });
    </script>