/*
* overriding the datepicker function to intercept the arguments
* -> https://stackoverflow.com/questions/26667720/how-to-get-the-selected-date-from-jquery-datepicker
* then create an hidden input with the date in acf format 'yymmdd'
*
*/
// store the original jQuery UI datepicker function
const original_datepicker = jQuery.fn.datepicker;
// override the datepicker function
jQuery.fn.datepicker = function(options) {
	options.onSelect = function(date_text, inst) {
		const acf_date_format = "yymmdd";
		const selected_date = jQuery(this).datepicker('getDate');
		const formated_date = jQuery.datepicker.formatDate(acf_date_format, selected_date);

		const instance_element = document.getElementById(inst.id);
		console.log("instance_element:", instance_element);
		const hidden_field_id = inst.id + '_acf_date_hidden';
		if (document.getElementById(hidden_field_id) === null) {
			var acf_date = document.createElement("input");
			acf_date.setAttribute('type', 'hidden');
			acf_date.setAttribute('id', hidden_field_id);
			acf_date.setAttribute('name', 'acf_date_hidden_for_' + instance_element.name);
			instance_element.insertAdjacentElement('afterend', acf_date, acf_date);
		}
		else {
			var acf_date = document.getElementById(hidden_field_id);
		}
		acf_date.value = formated_date;
	}

	// call the original datepicker function with the updated option
	return original_datepicker.call(this, options);
};