function metaDateValidation() {
    const dateField = document.querySelector("#provider_availability");

    if (dateField) {
        const value = dateField.value;
        const validity = checkValidation(value);
        const wrapper = dateField.closest("p");
        if (!wrapper) {
            return;
        }

        // Remove any previous error message
        const existingErrors = wrapper.querySelectorAll('.error-mes');
        existingErrors.forEach(errorEl => errorEl.remove());

        const saveButton = document.querySelector(".editor-post-publish-button");
        if (!saveButton) {
            return;
        }

        if (!validity) {
            wp.data.dispatch( 'core/editor' ).lockPostSaving( 'provider_availability' );
            wp.data.dispatch( 'core/notices' ).createNotice(
				'error',
				'Check the available date format.',
				{ 
					id: 'provider_availability', 
					isDismissible: false 
				}
			);
        } else {
            wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'provider_availability' );
            wp.data.dispatch( 'core/notices' ).removeNotice( 'provider_availability' );

        }
    }
}

function settingsDateValidation() {
    const dateField = document.querySelector("#schedule_business_holidays");

    if(!dateField) {
        return;
    }

    const value = dateField.value;
    const validity = checkValidation(value);
    const wrapper = dateField.closest("td");
    if (!wrapper) {
        return;
    }
    // Remove any previous error message
    const existingErrors = wrapper.querySelectorAll('.error-mes');
    existingErrors.forEach(errorEl => errorEl.remove());

    const saveButton = document.querySelector(".button-primary");
    if (!saveButton) {
        return;
    }

    if (!validity) {
        saveButton.classList.add('diable-save-option');
        wrapper.insertAdjacentHTML('afterbegin', '<span class="error-mes">Check the format</span>');
    } else {
        saveButton.classList.remove('diable-save-option');
    }

}

function checkValidation(value) {
    let validity = true;

    if (value) {
        const availability_dates = value.split(", ");

        // Check each date format
        for (const date of availability_dates) {
            if (!/^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/[0-9]{4}$/.test(date.trim())) {
                validity = false;
                break;
            }
        }

        // Check for comma and space after every 10 values
        if (availability_dates.length > 10) {
            for (let i = 10; i < availability_dates.length; i += 10) {
                // Find the position in the original string
                const joinedSoFar = availability_dates.slice(0, i).join(", ");
                if (!value.startsWith(joinedSoFar + ", ")) {
                    validity = false;
                    break;
                }
            }
        }
    }

    return validity;
}

document.addEventListener('DOMContentLoaded', () => {
    const dateField = document.querySelector("#provider_availability");

    if (dateField) {
        metaDateValidation();

        dateField.addEventListener("input", metaDateValidation); // Re-validate on typing
    }
});

document.addEventListener('DOMContentLoaded', () => {
    const dateField = document.querySelector("#schedule_business_holidays");

    if (dateField) {
        settingsDateValidation();

        dateField.addEventListener("input", settingsDateValidation); // Re-validate on typing
    }
});