File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>/*
 * Copyright (c) 2022 LatePoint LLC. All rights reserved.
 */


function latepoint_init_order_summary_lightbox() {
    let $lightbox = jQuery(&#039;.customer-dashboard-order-summary-lightbox&#039;);
    latepoint_init_qr_trigger($lightbox);
    latepoint_init_item_details_popup($lightbox);
}

function latepoint_init_qr_trigger($lightbox) {
    $lightbox.on(&#039;click&#039;, &#039;.qr-show-trigger&#039;, function () {
        jQuery(this).closest(&#039;.summary-box-wrapper&#039;).find(&#039;.qr-code-on-full-summary&#039;).toggleClass(&#039;show-vevent-qr-code&#039;);
        return false;
    });
}

function latepoint_init_item_details_popup($lightbox) {

    $lightbox.on(&#039;click&#039;, &#039;.os-item-details-popup-close&#039;, function () {
        var $ligthbox = jQuery(this).closest(&#039;.latepoint-lightbox-content&#039;);
        $ligthbox.find(&#039;.os-item-details-popup.open&#039;).remove();
        $ligthbox.find(&#039;.full-summary-wrapper&#039;).show();
        $ligthbox.find(&#039;.booking-status-info-wrapper&#039;).show();
        return false;
    });

    $lightbox.on(&#039;click&#039;, &#039;.os-trigger-item-details-popup&#039;, function () {
        var $ligthbox = jQuery(this).closest(&#039;.latepoint-lightbox-content&#039;);
        $ligthbox.find(&#039;.full-summary-wrapper&#039;).hide();
        $ligthbox.find(&#039;.booking-status-info-wrapper&#039;).hide();
        $ligthbox.find(&#039;.os-item-details-popup.open&#039;).remove();
        var $popup = $ligthbox.find(&#039;#&#039; + jQuery(this).data(&#039;item-details-popup-id&#039;)).clone();
        $popup.addClass(&#039;open&#039;).appendTo($ligthbox);
        return false;
    });
}

function latepoint_init_bundle_scheduling_summary() {

}


function latepoint_manage_by_key_reload_booking() {
    let $wrapper = jQuery(&#039;.manage-booking-wrapper&#039;);
    $wrapper.addClass(&#039;os-loading&#039;)
    let params = {
        key: $wrapper.data(&#039;key&#039;)
    }
    let data = {
        action: latepoint_helper.route_action,
        route_name: $wrapper.data(&#039;route-name&#039;),
        params: params,
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    };

    jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: latepoint_timestamped_ajaxurl(),
        data: data,
        success: function (data) {
            $wrapper.removeClass(&#039;os-loading&#039;)
            if (data.status === &quot;success&quot;) {
                $wrapper.replaceWith(data.message);
            } else {
                latepoint_show_message_inside_element(data.message, $wrapper, &#039;error&#039;);
            }
        }
    });
}

function latepoint_init_manage_booking_by_key() {
    let $wrapper = jQuery(&#039;.manage-booking-wrapper&#039;);
    if (!$wrapper.length) return;
    jQuery(&#039;.latepoint-w&#039;).on(&#039;change&#039;, &#039;.change-booking-status-trigger&#039;, function () {
        $wrapper.addClass(&#039;os-loading&#039;)
        let params = {
            key: $wrapper.data(&#039;key&#039;),
            status: jQuery(this).val()
        }
        let data = {
            action: latepoint_helper.route_action,
            route_name: jQuery(this).closest(&#039;.change-booking-status-trigger-wrapper&#039;).data(&#039;route-name&#039;),
            params: params,
            layout: &#039;none&#039;,
            return_format: &#039;json&#039;
        };

        jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data,
            success: function (data) {
                $wrapper.removeClass(&#039;os-loading&#039;)
                if (data.status === &quot;success&quot;) {
                    latepoint_manage_by_key_reload_booking();
                } else {
                    latepoint_show_message_inside_element(data.message, $wrapper, &#039;error&#039;);
                }
            }
        });
        return false;
    });


    $wrapper.on(&#039;click&#039;, &#039;.qr-show-trigger&#039;, function () {
        jQuery(this).closest(&#039;.manage-booking-wrapper&#039;).find(&#039;.qr-code-on-full-summary&#039;).addClass(&#039;show-vevent-qr-code&#039;);
        return false;
    });
    $wrapper.on(&#039;click&#039;, &#039;.os-item-details-popup-close&#039;, function () {
        var $wrapper = jQuery(this).closest(&#039;.manage-booking-wrapper&#039;);
        $wrapper.find(&#039;.os-item-details-popup.open&#039;).remove();
        $wrapper.find(&#039;.manage-booking-inner, .manage-booking-controls&#039;).show();
        return false;
    });

    $wrapper.on(&#039;click&#039;, &#039;.os-trigger-item-details-popup&#039;, function () {
        var $wrapper = jQuery(this).closest(&#039;.manage-booking-wrapper&#039;);
        $wrapper.find(&#039;.manage-booking-inner, .manage-booking-controls&#039;).hide();
        $wrapper.find(&#039;.os-item-details-popup.open&#039;).remove();
        var $popup = $wrapper.find(&#039;#&#039; + jQuery(this).data(&#039;item-details-popup-id&#039;)).clone();
        $popup.addClass(&#039;open&#039;).appendTo($wrapper);
        return false;
    });
}

function latepoint_init_form_masks() {
    if ((&#039;lp_intlTelInput&#039; in window) &amp;&amp; (&#039;lp_intlTelInputGlobals&#039; in window)) {
        jQuery(&#039;.os-mask-phone&#039;).each(function () {
            latepoint_mask_phone(jQuery(this));
        });
    }
}

function latepoint_scroll_to_top_of_booking_form($booking_form_element) {
    // if it&#039;s a form shortcode (not lightbox), scroll to top of the form
    if ($booking_form_element.parent().hasClass(&#039;latepoint-inline-form&#039;)) {
        $booking_form_element[0].scrollIntoView({block: &quot;nearest&quot;, behavior: &#039;smooth&#039;}); // SHOULD NOT BE FIRST!! Also need to FIX, scroll only if TOP of the booking form is above the viewport
    }
    // if lightbox - scroll body of lightbox to top
    if ($booking_form_element.parent().hasClass(&#039;latepoint-lightbox-i&#039;)) {
        $booking_form_element.find(&#039;.latepoint-body&#039;).scrollTop(0);
    }
}

async function latepoint_init_payment_method_actions($booking_form_element, payment_method) {
    let callbacks_list = [];
    let is_last_step = $booking_form_element.data(&#039;next-submit-is-last&#039;) == &#039;yes&#039;;
    $booking_form_element.trigger(&#039;latepoint:initPaymentMethod&#039;, [{
        payment_method: payment_method,
        callbacks_list: callbacks_list,
        is_last_step: is_last_step
    }]);
    $booking_form_element.removeClass(&#039;step-content-loaded&#039;).addClass(&#039;step-content-loading&#039;);


    try {
        for (const callback of callbacks_list) {
            await callback.action();
        }
        $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-loaded&#039;).find(&#039;.lp-payment-method-content[data-payment-method=&quot;&#039; + payment_method + &#039;&quot;]&#039;).show();
    } catch (error) {
        latepoint_show_error_and_stop_loading_booking_form(error, $booking_form_element);
    }
}

function latepoint_lightbox_close() {
    jQuery(&#039;body&#039;).removeClass(&#039;latepoint-lightbox-active&#039;);
    jQuery(&#039;.latepoint-lightbox-w&#039;).remove();
}

function latepoint_show_next_btn($booking_form_element) {
    $booking_form_element.find(&#039;.latepoint-next-btn&#039;).removeClass(&#039;disabled&#039;);
    $booking_form_element.removeClass(&#039;hidden-buttons&#039;);
}

function latepoint_clear_step_services($booking_form_element) {
}

function latepoint_clear_step_service_extras($booking_form_element) {
}

function latepoint_clear_step_locations($booking_form_element) {
}

function latepoint_clear_step_agents($booking_form_element) {
}

function latepoint_clear_step_datepicker($booking_form_element) {
}

function latepoint_hide_next_btn($booking_form_element) {
    $booking_form_element.find(&#039;.latepoint-next-btn&#039;).addClass(&#039;disabled&#039;);
    if ($booking_form_element.find(&#039;.latepoint-prev-btn.disabled&#039;).length) $booking_form_element.addClass(&#039;hidden-buttons&#039;);
}


function latepoint_show_prev_btn($booking_form_element) {
    $booking_form_element.find(&#039;.latepoint-prev-btn&#039;).removeClass(&#039;disabled&#039;);
    $booking_form_element.removeClass(&#039;hidden-buttons&#039;);
}

function latepoint_hide_prev_btn($booking_form_element) {
    $booking_form_element.find(&#039;.latepoint-prev-btn&#039;).addClass(&#039;disabled&#039;);
    if ($booking_form_element.find(&#039;.latepoint-next-btn.disabled&#039;).length) $booking_form_element.addClass(&#039;hidden-buttons&#039;);
}


function latepoint_remove_cart_item($trigger) {
    let $booking_form_element = $trigger.closest(&#039;.latepoint-booking-form-element&#039;);
    let cart_item_id = $trigger.data(&#039;cart-item-id&#039;);


    $trigger.addClass(&#039;os-loading&#039;);
    let data = {
        action: latepoint_helper.route_action,
        route_name: $trigger.data(&#039;route&#039;),
        params: jQuery.param({cart_item_id: cart_item_id}),
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }
    jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: latepoint_timestamped_ajaxurl(),
        data: data,
        success: function (data) {
            if (data.status === &quot;success&quot;) {
                if (cart_item_id != $booking_form_element.find(&#039;input[name=&quot;active_cart_item[id]&quot;]&#039;).val()) {
                    // cart has other items - just reload the summary/step
                    if ($trigger.closest(&#039;.latepoint-summary-w&#039;).length) {
                        // removed by clicking on summary side panel
                        latepoint_reload_summary($booking_form_element);
                    } else {
                        // remove by clicking on cart item on verify step
                        latepoint_reload_step($booking_form_element);
                    }
                } else {
                    // this was a last item, need to go back to the start of a booking process
                    latepoint_restart_booking_process($booking_form_element);
                }
            } else {
                $trigger.removeClass(&#039;os-loading&#039;);
                latepoint_show_message_inside_element(data.message, $booking_form_element.find(&#039;.latepoint-body&#039;), &#039;error&#039;);
            }
        }
    });
}

function latepoint_apply_coupon($elem) {
    var $booking_form_element = $elem.closest(&#039;.latepoint-booking-form-element&#039;);

    var $coupon_input = $elem;
    $coupon_input.closest(&#039;.coupon-code-input-w&#039;).addClass(&#039;os-loading&#039;);
    var form_data = new FormData($booking_form_element.find(&#039;.latepoint-form&#039;)[0]);
    var data = {
        action: latepoint_helper.route_action,
        route_name: $elem.data(&#039;route&#039;),
        params: latepoint_formdata_to_url_encoded_string(form_data),
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }
    jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: latepoint_timestamped_ajaxurl(),
        data: data,
        success: function (data) {
            $coupon_input.closest(&#039;.coupon-code-input-w&#039;).removeClass(&#039;os-loading&#039;);
            if (data.status === &quot;success&quot;) {
                latepoint_show_message_inside_element(data.message, $booking_form_element.find(&#039;.latepoint-body&#039;), &#039;success&#039;);
                $booking_form_element.find(&#039;.step-payment-w input[name=&quot;cart[payment_method]&quot;]&#039;).val(&#039;&#039;);
                $booking_form_element.find(&#039;input[name=&quot;cart[payment_token]&quot;]&#039;).val(&#039;&#039;);
                $booking_form_element.find(&#039;input[name=&quot;cart[payment_portion]&quot;]&#039;).val(&#039;&#039;);
                latepoint_reload_step($booking_form_element);
            } else {
                latepoint_show_message_inside_element(data.message, $booking_form_element.find(&#039;.latepoint-body&#039;), &#039;error&#039;);
            }
        }
    });
}

function latepoint_remove_coupon($elem) {
    $elem.closest(&#039;.applied-coupon-code-wrapper&#039;).fadeOut();
    var $booking_form_element = $elem.closest(&#039;.latepoint-booking-form-element&#039;);
    let $coupon_input = $booking_form_element.find(&#039;input[name=&quot;coupon_code&quot;]&#039;);
    $coupon_input.val(&#039;&#039;);
    latepoint_apply_coupon($coupon_input);
}

function latepoint_restart_booking_process($booking_form_element) {
    // first first step
    let first_step_code = $booking_form_element.find(&#039;.latepoint-step-content&#039;).first().data(&#039;step-code&#039;);
    latepoint_reload_step($booking_form_element, first_step_code);
    return false;
}

function latepoint_reload_step($booking_form_element, step_code = false) {

    if (step_code) {
        $booking_form_element.find(&#039;.latepoint_current_step_code&#039;).val(step_code);
        $booking_form_element.removeClass(function (index, className) {
            return (className.match(/(^|\s)current-step-\S+/g) || []).join(&#039; &#039;);
        }).addClass(&#039;current-step-&#039; + step_code);
        if ($booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;)) {
            $booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;).nextAll(&#039;.latepoint-step-content&#039;).remove();
            $booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;).remove();
        }
    }

    $booking_form_element.data(&#039;next-submit-is-last&#039;, &#039;no&#039;);
    $booking_form_element.find(&#039;.latepoint_step_direction&#039;).val(&#039;specific&#039;);
    latepoint_submit_booking_form($booking_form_element.find(&#039;.latepoint-form&#039;));

    return false;
}


function latepoint_reset_password_from_booking_init() {
    jQuery(&#039;.os-step-existing-customer-login-w&#039;).hide();
    jQuery(&#039;.os-password-reset-form-holder&#039;).on(&#039;click&#039;, &#039;.password-reset-back-to-login&#039;, function () {
        jQuery(&#039;.os-password-reset-form-holder&#039;).html(&#039;&#039;);
        jQuery(&#039;.os-step-existing-customer-login-w&#039;).show();
        return false;
    });
}

function latepoint_bundle_selected($item) {
    let $booking_form_element = $item.closest(&#039;.latepoint-booking-form-element&#039;);
    $booking_form_element.find(&#039;input[name=&quot;active_cart_item[variant]&quot;]&#039;).val(&#039;bundle&#039;);
    $booking_form_element.find(&#039;input[name=&quot;booking[service_id]&quot;]&#039;).val(&#039;&#039;);
}

function latepoint_service_selected($item) {
    let $booking_form_element = $item.closest(&#039;.latepoint-booking-form-element&#039;);
    $booking_form_element.find(&#039;input[name=&quot;active_cart_item[variant]&quot;]&#039;).val(&#039;booking&#039;);
}

async function latepoint_reload_summary($booking_form_element) {
    let $summary_panel = $booking_form_element.closest(&#039;.latepoint-with-summary&#039;);
    if (!$summary_panel.length) return;

    if ($booking_form_element.hasClass(&#039;is-bundle-scheduling&#039;)) {
        return;
    }

    let current_step = $booking_form_element.find(&#039;.latepoint_current_step_code&#039;).val();

    $booking_form_element.find(&#039;.latepoint-summary-w&#039;).addClass(&#039;os-loading&#039;);
    let $booking_form = $booking_form_element.find(&#039;.latepoint-form&#039;);
    let form_data = new FormData($booking_form[0]);
    let data = {
        action: latepoint_helper.route_action,
        route_name: latepoint_helper.reload_booking_form_summary_route,
        params: latepoint_formdata_to_url_encoded_string(form_data),
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }

    let response = await jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: latepoint_timestamped_ajaxurl(),
        data: data
    });
    if (response.status === &#039;success&#039;) {
        $booking_form_element.find(&#039;.os-summary-contents&#039;).html(response.message);
        $booking_form_element.find(&#039;.latepoint-summary-w&#039;).removeClass(&#039;os-loading&#039;);
        // hide on verify and confirmation steps
        if (current_step &amp;&amp; ![&#039;verify&#039;, &#039;confirmation&#039;].includes(current_step) &amp;&amp; response.message) {
            $summary_panel.addClass(&#039;latepoint-summary-is-open&#039;);
        } else {
            $summary_panel.removeClass(&#039;latepoint-summary-is-open&#039;);
        }
        latepoint_init_booking_summary_panel($booking_form_element);
    } else {
        throw new Error(response.message ? response.message : &#039;Error reloading summary&#039;);
    }
}

function latepoint_init_booking_summary_panel($booking_form_element) {
    let $summary_panel = $booking_form_element.find(&#039;.latepoint-summary-w&#039;);
    if (!$summary_panel.length) return;

    $summary_panel.find(&#039;.load-customer-step-trigger&#039;).on(&#039;click&#039;, function () {
        jQuery(this).addClass(&#039;os-loading&#039;);
        latepoint_reload_step($booking_form_element, &#039;customer&#039;);
        return false;
    });

    $summary_panel.find(&#039;.price-breakdown-unfold&#039;).on(&#039;click&#039;, function () {
        jQuery(this).closest(&#039;.summary-price-breakdown-wrapper&#039;).removeClass(&#039;compact-summary&#039;);
        return false;
    });

    $summary_panel.find(&#039;.os-remove-item-from-cart&#039;).on(&#039;click keydown&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        latepoint_remove_cart_item(jQuery(this));
        return false;
    });
}

function latepoint_password_changed_show_login(response) {
    jQuery(&#039;.os-step-existing-customer-login-w&#039;).show();
    jQuery(&#039;.os-password-reset-form-holder&#039;).html(&#039;&#039;);
    latepoint_show_message_inside_element(response.message, jQuery(&#039;.os-step-existing-customer-login-w&#039;), &#039;success&#039;);
}

function latepoint_hide_message_inside_element($elem = jQuery(&#039;.latepoint-body&#039;)) {
    if ($elem.length &amp;&amp; $elem.find(&#039;.latepoint-message&#039;).length) {
        $elem.find(&#039;.latepoint-message&#039;).remove();
    }
}

function latepoint_show_message_inside_element(message, $elem = jQuery(&#039;.latepoint-body&#039;), message_type = &#039;error&#039;) {
    message = message || &#039;Error. Please try again.&#039;;
    if ($elem.length) {
        if ($elem.find(&#039;.latepoint-message&#039;).length) {
            $elem.find(&#039;.latepoint-message&#039;).removeClass(&#039;latepoint-message-success&#039;).removeClass(&#039;latepoint-message-error&#039;).addClass(&#039;latepoint-message-&#039; + message_type + &#039;&#039;).html(message).show();
        } else {
            $elem.prepend(&#039;&lt;div class=&quot;latepoint-message latepoint-message-&#039; + message_type + &#039;&quot;&gt;&#039; + message + &#039;&lt;/div&gt;&#039;);
        }
        // scroll errors into view
        if (message_type == &#039;error&#039;) $elem.find(&#039;.latepoint-message&#039;)[0].scrollIntoView({block: &quot;nearest&quot;, behavior: &#039;smooth&#039;});
    }
}

function latepoint_add_action(callbacks_list, action, priority = 10) {
    callbacks_list.push({priority: priority, action: action});
    callbacks_list.sort((a, b) =&gt; a.priority - b.priority);
    return callbacks_list;
}

function latepoint_update_next_btn_label($booking_form_element) {
    let btn_label = $booking_form_element.find(&#039;.latepoint-step-content&#039;).last().data(&#039;next-btn-label&#039;)
    if (btn_label) {
        $booking_form_element.find(&#039;.latepoint-next-btn span&#039;).text(btn_label);
    }
}

function latepoint_init_step(step_code, $booking_form_element) {
    latepoint_init_step_selectable_items($booking_form_element);
    latepoint_init_step_category_items(step_code);
    switch (step_code) {
        case &#039;customer&#039;:
            latepoint_init_step_customer($booking_form_element);
            break;
        case &#039;booking__datepicker&#039;:
            latepoint_init_step_datepicker($booking_form_element);
            break;
        case &#039;booking__agents&#039;:
            latepoint_init_step_agents();
            break;
        case &#039;booking__locations&#039;:
            latepoint_init_step_locations();
            break;
        case &#039;booking__services&#039;:
            latepoint_init_step_services();
            break;
        case &#039;payment__methods&#039;:
            latepoint_init_step_payment__methods($booking_form_element);
            break;
        case &#039;payment__times&#039;:
            latepoint_init_step_payment__times($booking_form_element);
            break;
        case &#039;payment__portions&#039;:
            latepoint_init_step_payment__portions($booking_form_element);
            break;
        case &#039;payment__pay&#039;:
            latepoint_init_step_payment__pay($booking_form_element);
            break;
        case &#039;verify&#039;:
            latepoint_init_step_verify($booking_form_element);
            break;
        case &#039;confirmation&#039;:
            latepoint_init_step_confirmation($booking_form_element);
            break;
    }

    $booking_form_element.trigger(&quot;latepoint:initStep&quot;, [{step_code: step_code}]);
    $booking_form_element.trigger(&quot;latepoint:initStep:&quot; + step_code);
}


async function latepoint_generate_day_timeslots($day, $wrapper_element = false, $scrollable_wrapper = false) {
    if (!$wrapper_element) $wrapper_element = $day.closest(&#039;.latepoint-booking-form-element&#039;);

    $day.addClass(&#039;selected&#039;);

    var service_duration = $day.data(&#039;service-duration&#039;);
    var interval = $day.data(&#039;interval&#039;);
    var work_start_minutes = $day.data(&#039;work-start-time&#039;);
    var work_end_minutes = $day.data(&#039;work-end-time&#039;);
    var total_work_minutes = $day.data(&#039;total-work-minutes&#039;);
    var bookable_minutes = [];
    var available_capacities_of_bookable_minute = [];
    if ($day.attr(&#039;data-bookable-minutes&#039;)) {
        if ($day.data(&#039;bookable-minutes&#039;).toString().indexOf(&#039;:&#039;) &gt; -1) {
            // has capacity information embedded into bookable minutes string
            let bookable_minutes_with_capacity = $day.data(&#039;bookable-minutes&#039;).toString().split(&#039;,&#039;);
            for (let i = 0; i &lt; bookable_minutes_with_capacity.length; i++) {
                bookable_minutes.push(parseInt(bookable_minutes_with_capacity[i].split(&#039;:&#039;)[0]));
                available_capacities_of_bookable_minute.push(parseInt(bookable_minutes_with_capacity[i].split(&#039;:&#039;)[1]));
            }
        } else {
            bookable_minutes = $day.data(&#039;bookable-minutes&#039;).toString().split(&#039;,&#039;).map(Number);
        }
    }
    var work_minutes = $day.data(&#039;work-minutes&#039;).toString().split(&#039;,&#039;).map(Number);

    var $timeslots = $wrapper_element.find(&#039;.timeslots&#039;);
    $timeslots.html(&#039;&#039;);

    if (total_work_minutes &gt; 0 &amp;&amp; bookable_minutes.length &amp;&amp; work_minutes.length) {
        var prev_minutes = false;
        work_minutes.forEach(function (current_minutes) {
            var ampm = latepoint_am_or_pm(current_minutes);

            var timeslot_class = &#039;dp-timepicker-trigger&#039;;
            var timeslot_available_capacity = 0;
            if (latepoint_helper.time_pick_style == &#039;timeline&#039;) {
                timeslot_class += &#039; dp-timeslot&#039;;
            } else {
                timeslot_class += &#039; dp-timebox&#039;;
            }

            if (prev_minutes !== false &amp;&amp; ((current_minutes - prev_minutes) &gt; service_duration)) {
                // show interval that is off between two work periods
                var off_label = latepoint_minutes_to_hours_and_minutes(prev_minutes + service_duration) + &#039; &#039; + latepoint_am_or_pm(prev_minutes + service_duration) + &#039; - &#039; + latepoint_minutes_to_hours_and_minutes(current_minutes) + &#039; &#039; + latepoint_am_or_pm(current_minutes);
                var off_width = (((current_minutes - prev_minutes - service_duration) / total_work_minutes) * 100);
                $timeslots.append(&#039;&lt;div class=&quot;&#039; + timeslot_class + &#039; is-off&quot; style=&quot;max-width:&#039; + off_width + &#039;%; width:&#039; + off_width + &#039;%&quot;&gt;&lt;span class=&quot;dp-label&quot;&gt;&#039; + off_label + &#039;&lt;/span&gt;&lt;/div&gt;&#039;);
            }

            if (!bookable_minutes.includes(current_minutes)) {
                timeslot_class += &#039; is-booked&#039;;
            } else {
                if (available_capacities_of_bookable_minute.length) timeslot_available_capacity = available_capacities_of_bookable_minute[bookable_minutes.indexOf(current_minutes)];
            }
            var tick_html = &#039;&#039;;
            var capacity_label = &#039;&#039;;
            var capacity_label_html = &#039;&#039;;
            var capacity_internal_label_html = &#039;&#039;;

            if (((current_minutes % 60) == 0) || (interval &gt;= 60)) {
                timeslot_class += &#039; with-tick&#039;;
                tick_html = &#039;&lt;span class=&quot;dp-tick&quot;&gt;&lt;strong&gt;&#039; + latepoint_minutes_to_hours_preferably(current_minutes) + &#039;&lt;/strong&gt;&#039; + &#039; &#039; + ampm + &#039;&lt;/span&gt;&#039;;
            }
            var timeslot_label = latepoint_minutes_to_hours_and_minutes(current_minutes) + &#039; &#039; + ampm;
            if (latepoint_show_booking_end_time()) {
                var end_minutes = current_minutes + service_duration;
                if (end_minutes &gt; 1440) end_minutes = end_minutes - 1440;
                var end_minutes_ampm = latepoint_am_or_pm(end_minutes);
                timeslot_label += &#039; - &lt;span class=&quot;dp-label-end-time&quot;&gt;&#039; + latepoint_minutes_to_hours_and_minutes(end_minutes) + &#039; &#039; + end_minutes_ampm + &#039;&lt;/span&gt;&#039;;
            }
            if (timeslot_available_capacity) {
                var spaces_message = timeslot_available_capacity &gt; 1 ? latepoint_helper.many_spaces_message : latepoint_helper.single_space_message;
                capacity_label = timeslot_available_capacity + &#039; &#039; + spaces_message;
                capacity_label_html = &#039;&lt;span class=&quot;dp-capacity&quot;&gt;&#039; + capacity_label + &#039;&lt;/span&gt;&#039;;
                capacity_internal_label_html = &#039;&lt;span class=&quot;dp-label-capacity&quot;&gt;&#039; + capacity_label + &#039;&lt;/span&gt;&#039;;
            }
            timeslot_label = timeslot_label.trim();
            $timeslots.removeClass(&#039;slots-not-available&#039;).append(&#039;&lt;div tabindex=&quot;0&quot; class=&quot;&#039; + timeslot_class + &#039;&quot; data-minutes=&quot;&#039; + current_minutes + &#039;&quot;&gt;&lt;span class=&quot;dp-label&quot;&gt;&#039; + capacity_internal_label_html + &#039;&lt;span class=&quot;dp-label-time&quot;&gt;&#039; + timeslot_label + &#039;&lt;/span&gt;&#039; + &#039;&lt;/span&gt;&#039; + tick_html + capacity_label_html + &#039;&lt;/div&gt;&#039;);
            prev_minutes = current_minutes;
        });
    } else {
        // No working hours this day
        $timeslots.addClass(&#039;slots-not-available&#039;).append(&#039;&lt;div class=&quot;not-working-message&quot;&gt;&#039; + latepoint_helper.msg_not_available + &quot;&lt;/div&gt;&quot;);
    }
    jQuery(&#039;.times-header-label span&#039;).text($day.data(&#039;nice-date&#039;));
    $wrapper_element.find(&#039;.time-selector-w&#039;).slideDown(200, function () {
        if (!$scrollable_wrapper) $scrollable_wrapper = $wrapper_element.find(&#039;.latepoint-body&#039;);
        $scrollable_wrapper.stop();
        $wrapper_element.find(&#039;.time-selector-w&#039;)[0].scrollIntoView({block: &quot;nearest&quot;, behavior: &#039;smooth&#039;});
    });
}


function latepoint_recurring_option_clicked(event) {
    if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
    let $btn = jQuery(this);
    let $booking_form_element = $btn.closest(&#039;.latepoint-booking-form-element&#039;);
    $booking_form_element.find(&#039;.latepoint_is_recurring&#039;).val($btn.data(&#039;value&#039;));
    latepoint_trigger_next_btn($booking_form_element);
    $booking_form_element.find(&#039;.step-datepicker-w&#039;).removeClass(&#039;show-recurring-prompt&#039;);
    return false;
}

function latepoint_timeslot_clicked(event) {
    if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
    event.preventDefault();
    let $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    let $trigger = jQuery(this);
    if ($trigger.hasClass(&#039;is-booked&#039;) || jQuery(this).hasClass(&#039;is-off&#039;)) {
        // Show error message that you cant select a booked period
    } else {
        if ($trigger.hasClass(&#039;selected&#039;)) {
            $trigger.removeClass(&#039;selected&#039;);
            $trigger.find(&#039;.dp-success-label&#039;).remove();
            $booking_form_element.find(&#039;.latepoint_start_time&#039;).val(&#039;&#039;);
            latepoint_hide_next_btn($booking_form_element);
            latepoint_reload_summary($booking_form_element);
        } else {
            $booking_form_element.find(&#039;.dp-timepicker-trigger.selected&#039;).removeClass(&#039;selected&#039;).find(&#039;.dp-success-label&#039;).remove();
            let selected_timeslot_time = $trigger.find(&#039;.dp-label-time&#039;).html();
            $trigger.addClass(&#039;selected&#039;).find(&#039;.dp-label&#039;).prepend(&#039;&lt;span class=&quot;dp-success-label&quot;&gt;&#039; + latepoint_helper.datepicker_timeslot_selected_label + &#039;&lt;/span&gt;&#039;);

            let start_minutes = parseInt($trigger.data(&#039;minutes&#039;));
            let start_date = $trigger.closest(&#039;.os-dates-and-times-w&#039;).find(&#039;.os-day.selected&#039;).data(&#039;date&#039;);

            if ($booking_form_element.find(&#039;.recurring-bookings-preview-wrapper&#039;).length &amp;&amp; $booking_form_element.find(&#039;.os-recurrence-rules&#039;).length) {
                // recurring datepicker
                if ($booking_form_element.find(&#039;.recurring-bookings-preview-wrapper .recurring-booking-preview.is-editing&#039;).length) {
                    // editing one of timeslots, not the recurrence settings
                    let $recurring_bookings_fields = $booking_form_element.find(&#039;.os-recurrence-selection-fields-wrapper&#039;);
                    let $edited_booking = $booking_form_element.find(&#039;.recurring-bookings-preview-wrapper .recurring-booking-preview.is-editing&#039;);

                    $recurring_bookings_fields.find(&#039;input[name=&quot;recurrence[overrides][&#039; + $edited_booking.data(&#039;stamp&#039;) + &#039;][custom_day]&quot;]&#039;).val(start_date);
                    $recurring_bookings_fields.find(&#039;input[name=&quot;recurrence[overrides][&#039; + $edited_booking.data(&#039;stamp&#039;) + &#039;][custom_minutes]&quot;]&#039;).val(start_minutes);

                    return window.latepointRecurringBookingsFrontFeature.reload_recurrence_rules($booking_form_element, false);
                } else {
                    // editing recurrence start date/time
                    $booking_form_element.find(&#039;.latepoint_start_date&#039;).val(start_date);
                    $booking_form_element.find(&#039;.latepoint_start_time&#039;).val(start_minutes);
                    return window.latepointRecurringBookingsFrontFeature.reload_recurrence_rules($booking_form_element, true);
                }
            } else {
                $booking_form_element.find(&#039;.latepoint_start_date&#039;).val(start_date);
                $booking_form_element.find(&#039;.latepoint_start_time&#039;).val(start_minutes);
                if ($trigger.closest(&#039;.os-dates-and-times-w&#039;).data(&#039;allow-recurring&#039;) === &#039;yes&#039;) {
                    $booking_form_element.find(&#039;.step-datepicker-w&#039;).addClass(&#039;show-recurring-prompt&#039;);
                    $booking_form_element.find(&#039;.os-recurring-suggestion-wrapper&#039;)[0].scrollIntoView({block: &quot;nearest&quot;, behavior: &#039;smooth&#039;});
                    latepoint_hide_next_btn($booking_form_element);
                    latepoint_hide_prev_btn($booking_form_element);
                } else {
                    latepoint_trigger_next_btn($booking_form_element);
                }
            }
        }
    }
    return false;
}

function latepoint_init_timeslots($booking_form_element = false) {
    if (!$booking_form_element) return;
    $booking_form_element.off(&#039;click&#039;, &#039;.dp-timepicker-trigger&#039;, latepoint_timeslot_clicked);
    $booking_form_element.on(&#039;click&#039;, &#039;.dp-timepicker-trigger&#039;, latepoint_timeslot_clicked);
    $booking_form_element.off(&#039;keydown&#039;, &#039;.dp-timepicker-trigger&#039;, latepoint_timeslot_clicked);
    $booking_form_element.on(&#039;keydown&#039;, &#039;.dp-timepicker-trigger&#039;, latepoint_timeslot_clicked);

    $booking_form_element.off(&#039;click&#039;, &#039;.os-recurring-suggestion-option&#039;, latepoint_recurring_option_clicked);
    $booking_form_element.on(&#039;click&#039;, &#039;.os-recurring-suggestion-option&#039;, latepoint_recurring_option_clicked);
    $booking_form_element.off(&#039;keydown&#039;, &#039;.os-recurring-suggestion-option&#039;, latepoint_recurring_option_clicked);
    $booking_form_element.on(&#039;keydown&#039;, &#039;.os-recurring-suggestion-option&#039;, latepoint_recurring_option_clicked);
}

async function latepoint_monthly_calendar_load_next_month($booking_form_element) {
    try {

        if ($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active + .os-monthly-calendar-days-w&#039;).length) {
            $booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).removeClass(&#039;active&#039;).next(&#039;.os-monthly-calendar-days-w&#039;).addClass(&#039;active&#039;);
            $booking_form_element.find(&#039;.os-month-prev-btn&#039;).removeClass(&#039;disabled&#039;);
            latepoint_calendar_set_month_label($booking_form_element);
            return true;
        } else {
            let $btn = $booking_form_element.find(&#039;.os-month-next-btn&#039;);
            let next_month_route_name = $btn.data(&#039;route&#039;);
            $btn.addClass(&#039;os-loading&#039;);
            let $calendar_element = $booking_form_element.find(&#039;.os-monthly-calendar-days-w&#039;).last();
            let calendar_year = $calendar_element.data(&#039;calendar-year&#039;);
            let calendar_month = $calendar_element.data(&#039;calendar-month&#039;);
            if (calendar_month == 12) {
                calendar_year = calendar_year + 1;
                calendar_month = 1;
            } else {
                calendar_month = calendar_month + 1;
            }
            let form_data = new FormData($booking_form_element.find(&#039;.latepoint-form&#039;)[0]);
            form_data.set(&#039;target_date_string&#039;, `${calendar_year}-${calendar_month}-1`);
            let params = latepoint_formdata_to_url_encoded_string(form_data);
            let data = {
                action: latepoint_helper.route_action,
                route_name: next_month_route_name,
                params: params,
                layout: &#039;none&#039;,
                return_format: &#039;json&#039;
            }
            let response = await jQuery.ajax({
                type: &quot;post&quot;,
                dataType: &quot;json&quot;,
                url: latepoint_timestamped_ajaxurl(),
                data: data,
                success: function (data) {
                }
            });
            $btn.removeClass(&#039;os-loading&#039;);
            if (response.status === &quot;success&quot;) {
                $booking_form_element.find(&#039;.os-months&#039;).append(response.message);
                $booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).removeClass(&#039;active&#039;).next(&#039;.os-monthly-calendar-days-w&#039;).addClass(&#039;active&#039;);
                latepoint_calendar_set_month_label($booking_form_element);
                latepoint_calendar_show_or_hide_prev_next_buttons($booking_form_element);
                return true;
            } else {
                console.log(response.message);
                return false;
            }

        }
    } catch (e) {
        console.log(e);
        alert(&#039;Error:&#039; + e);
        return false;
    }
}

function latepoint_init_monthly_calendar_navigation($booking_form_element = false) {
    if (!$booking_form_element) return;
    $booking_form_element.find(&#039;.os-month-next-btn&#039;).on(&#039;click&#039;, async function () {
        let $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        return latepoint_monthly_calendar_load_next_month($booking_form_element);
    });
    $booking_form_element.find(&#039;.os-month-prev-btn&#039;).on(&#039;click&#039;, function () {
        var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        if ($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).prev(&#039;.os-monthly-calendar-days-w&#039;).length) {
            $booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).removeClass(&#039;active&#039;).prev(&#039;.os-monthly-calendar-days-w&#039;).addClass(&#039;active&#039;);
            latepoint_calendar_set_month_label($booking_form_element);
        }
        latepoint_calendar_show_or_hide_prev_next_buttons($booking_form_element);
        return false;
    });
}

function latepoint_calendar_set_month_label($booking_form_element) {
    $booking_form_element.find(&#039;.os-current-month-label .current-year&#039;).text($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).data(&#039;calendar-year&#039;));
    $booking_form_element.find(&#039;.os-current-month-label .current-month&#039;).text($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).data(&#039;calendar-month-label&#039;));
}


function latepoint_calendar_show_or_hide_prev_next_buttons($booking_form_element) {
    $booking_form_element.find(&#039;.os-current-month-label .current-year&#039;).text($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active .os-monthly-calendar-days&#039;).data(&#039;calendar-year&#039;));
    $booking_form_element.find(&#039;.os-current-month-label .current-month&#039;).text($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active .os-monthly-calendar-days&#039;).data(&#039;calendar-month-label&#039;));

    if ($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).prev(&#039;.os-monthly-calendar-days-w&#039;).length) {
        $booking_form_element.find(&#039;.os-month-prev-btn&#039;).removeClass(&#039;disabled&#039;);
    } else {
        $booking_form_element.find(&#039;.os-month-prev-btn&#039;).addClass(&#039;disabled&#039;);
    }
}

function latepoint_format_minutes_to_time(minutes, service_duration) {
    var ampm = latepoint_am_or_pm(minutes);
    var formatted_time = latepoint_minutes_to_hours_and_minutes(minutes) + &#039; &#039; + ampm;
    if (latepoint_show_booking_end_time()) {
        var end_minutes = minutes + service_duration;
        var end_minutes_ampm = latepoint_am_or_pm(end_minutes);
        formatted_time += &#039; - &#039; + latepoint_minutes_to_hours_and_minutes(end_minutes) + &#039; &#039; + end_minutes_ampm;
    }
    formatted_time = formatted_time.trim();
    return formatted_time;
}

function latepoint_monthly_calendar_day_clicked(event) {
    if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
    let $day = jQuery(this);
    if ($day.hasClass(&#039;os-day-passed&#039;)) return false;
    if ($day.hasClass(&#039;os-not-in-allowed-period&#039;)) return false;
    if ($day.closest(&#039;.os-dates-and-times-w&#039;).hasClass(&#039;calendar-style-modern&#039;)) {
        if ($day.hasClass(&#039;os-month-prev&#039;)) return false;
        if ($day.hasClass(&#039;os-month-next&#039;)) return false;
    }
    var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    if ($day.closest(&#039;.os-recurrence-datepicker-wrapper&#039;).length) {
        // recurrent datepicker
        $day.closest(&#039;.os-recurrence-datepicker-wrapper&#039;).find(&#039;.os-day.selected&#039;).removeClass(&#039;selected&#039;);
        $day.addClass(&#039;selected&#039;);
        if ($day.closest(&#039;.os-dates-and-times-w&#039;).hasClass(&#039;days-only&#039;)) {
            $day.closest(&#039;.step-recurring-bookings-w&#039;).find(&#039;input[name=&quot;recurrence[rules][repeat_end_date]&quot;]&#039;).val($day.data(&#039;date&#039;));
            window.latepointRecurringBookingsFrontFeature.reload_recurrence_rules($booking_form_element, true);
        } else {
            latepoint_generate_day_timeslots($day);
            $day.closest(&#039;.os-recurrence-datepicker-wrapper&#039;).find(&#039;.time-selector-w&#039;)[0].scrollIntoView({block: &quot;nearest&quot;, behavior: &#039;smooth&#039;});
        }
    } else {
        // regular datepicker
        if ($day.closest(&#039;.os-monthly-calendar-days-w&#039;).hasClass(&#039;hide-if-single-slot&#039;)) {
            // HIDE TIMESLOT IF ONLY ONE TIMEPOINT
            if ($day.hasClass(&#039;os-not-available&#039;)) {
                // clicked on a day that has no available timeslots
                // do nothing
            } else {
                $booking_form_element.find(&#039;.os-day.selected&#039;).removeClass(&#039;selected&#039;);
                $day.addClass(&#039;selected&#039;);
                // set date
                $booking_form_element.find(&#039;.latepoint_start_date&#039;).val($day.data(&#039;date&#039;));
                if ($day.hasClass(&#039;os-one-slot-only&#039;)) {
                    // clicked on a day that has only one slot available
                    var bookable_minutes = $day.data(&#039;bookable-minutes&#039;).toString().split(&#039;:&#039;)[0];
                    var selected_timeslot_time = latepoint_format_minutes_to_time(Number(bookable_minutes), Number($day.data(&#039;service-duration&#039;)));
                    $booking_form_element.find(&#039;.latepoint_start_time&#039;).val($day.data(&#039;bookable-minutes&#039;));
                    latepoint_show_next_btn($booking_form_element);
                    $booking_form_element.find(&#039;.time-selector-w&#039;).slideUp(200);
                } else {
                    // regular day with more than 1 timeslots available
                    // build timeslots
                    latepoint_generate_day_timeslots($day);
                    // clear time and hide next btn
                    $booking_form_element.find(&#039;.latepoint_start_time&#039;).val(&#039;&#039;);
                    latepoint_hide_next_btn($booking_form_element);
                }
                latepoint_reload_summary($booking_form_element);
            }
        } else {

            // SHOW TIMESLOTS EVEN IF ONLY ONE TIMEPOINT
            $booking_form_element.find(&#039;.latepoint_start_date&#039;).val($day.data(&#039;date&#039;));
            $booking_form_element.find(&#039;.os-day.selected&#039;).removeClass(&#039;selected&#039;);
            $day.addClass(&#039;selected&#039;);

            // build timeslots
            latepoint_generate_day_timeslots($day);
            // clear time and hide next btn
            latepoint_reload_summary($booking_form_element);
            $booking_form_element.find(&#039;.latepoint_start_time&#039;).val(&#039;&#039;);
            latepoint_hide_next_btn($booking_form_element);
        }
    }


    return false;
}

async function latepoint_init_step_datepicker($booking_form_element = false) {
    if (!$booking_form_element) return true;
    latepoint_init_timeslots($booking_form_element);
    latepoint_init_monthly_calendar_navigation($booking_form_element);
    $booking_form_element.off(&#039;click&#039;, &#039;.os-months .os-day&#039;, latepoint_monthly_calendar_day_clicked);
    $booking_form_element.on(&#039;click&#039;, &#039;.os-months .os-day&#039;, latepoint_monthly_calendar_day_clicked);
    $booking_form_element.off(&#039;keydown&#039;, &#039;.os-months .os-day&#039;, latepoint_monthly_calendar_day_clicked);
    $booking_form_element.on(&#039;keydown&#039;, &#039;.os-months .os-day&#039;, latepoint_monthly_calendar_day_clicked);

    if ($booking_form_element.find(&#039;input[name=&quot;booking[start_date]&quot;]&#039;).val()) {
        $booking_form_element.find(&#039;.os-day[data-date=&quot;&#039; + $booking_form_element.find(&#039;input[name=&quot;booking[start_date]&quot;]&#039;).val() + &#039;&quot;]&#039;).trigger(&#039;click&#039;);
    } else {
        if ($booking_form_element.find(&#039;.os-dates-and-times-w&#039;).hasClass(&#039;auto-search&#039;)) {
            let max_number_of_months_to_check = 24;
            let current_year = new Date().getFullYear();
            for (let i = 0; i &lt; max_number_of_months_to_check; i++) {
                let $active_month = $booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;);
                let searching_month_label = $active_month.data(&#039;calendar-month-label&#039;);
                if ($active_month.data(&#039;calendar-year&#039;) != current_year) searching_month_label += &#039; &#039; + $active_month.data(&#039;calendar-year&#039;);
                $booking_form_element.find(&#039;.os-calendar-searching-info span&#039;).text(searching_month_label);
                // check if active month has any days available for booking
                let $first_available = $active_month.find(&#039;.os-day.os-month-current&#039;).not(&#039;.os-not-available&#039;).first();
                if ($first_available.length) {
                    break;
                } else {
                    await latepoint_monthly_calendar_load_next_month($booking_form_element);
                }
            }
        }
    }
    $booking_form_element.find(&#039;.os-dates-and-times-w&#039;).removeClass(&#039;is-searching&#039;);
    return true;
}


function latepoint_init_step_verify($booking_form_element = false) {
    if (!$booking_form_element) return;
    $booking_form_element.closest(&#039;.latepoint-summary-is-open&#039;).removeClass(&#039;latepoint-summary-is-open&#039;);

    $booking_form_element.find(&#039;.latepoint-body .load-customer-step-trigger&#039;).on(&#039;click&#039;, function () {
        jQuery(this).addClass(&#039;os-loading&#039;);
        latepoint_reload_step($booking_form_element, &#039;customer&#039;);
        return false;
    });

    $booking_form_element.find(&#039;.coupon-code-wrapper-on-verify .coupon-code-trigger-on-verify-w a&#039;).on(&#039;click&#039;, function (e) {
        jQuery(this).closest(&#039;.coupon-code-wrapper-on-verify&#039;).addClass(&#039;entering-coupon&#039;).find(&#039;.coupon-code-input&#039;).trigger(&#039;focus&#039;);
        return false;
    });
    $booking_form_element.find(&#039;.coupon-code-wrapper-on-verify .coupon-code-input-cancel&#039;).on(&#039;click&#039;, function (e) {
        jQuery(this).closest(&#039;.coupon-code-wrapper-on-verify&#039;).removeClass(&#039;entering-coupon&#039;);
        return false;
    });

    $booking_form_element.find(&#039;.coupon-code-wrapper-on-verify .coupon-code-input-submit&#039;).on(&#039;click&#039;, function (e) {
        latepoint_apply_coupon(jQuery(this).closest(&#039;.coupon-code-input-w&#039;).find(&#039;.coupon-code-input&#039;));
        return false;
    });

    $booking_form_element.find(&#039;.os-remove-item-from-cart&#039;).on(&#039;click keydown&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        //make sure to clear active cart item so it doesn&#039;t add it again on reload!
        if (confirm(jQuery(this).data(&#039;confirm-text&#039;))) {
            latepoint_remove_cart_item(jQuery(this));
        }
        return false;
    });

    $booking_form_element.find(&#039;.coupon-code-wrapper-on-verify .coupon-code-clear&#039;).on(&#039;click&#039;, function (e) {
        latepoint_remove_coupon(jQuery(this));
        return false;
    });

    $booking_form_element.find(&#039;.coupon-code-wrapper-on-verify input.coupon-code-input&#039;).on(&#039;keyup&#039;, function (e) {
        if (e.which === 13) {
            latepoint_apply_coupon(jQuery(this));
            return false;
        }
    });
}


function latepoint_init_step_payment__pay($booking_form_element = false) {
    var selected_payment_method = $booking_form_element.find(&#039;input[name=&quot;cart[payment_method]&quot;]&#039;).val();
    latepoint_init_payment_method_actions($booking_form_element, selected_payment_method);
}

function latepoint_init_step_payment__portions($booking_form_element = false) {
    // Selecting Payment Time
    $booking_form_element.find(&#039;.lp-payment-trigger-payment-portion-selector&#039;).on(&#039;click keydown&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        $booking_form_element.find(&#039;input[name=&quot;&#039; + jQuery(this).data(&#039;holder&#039;) + &#039;&quot;]&#039;).val(jQuery(this).data(&#039;value&#039;));
        latepoint_show_prev_btn($booking_form_element);
        latepoint_trigger_next_btn($booking_form_element);
        return false;
    });
}

function latepoint_init_step_payment__times($booking_form_element = false) {
    // Selecting Payment Time
    $booking_form_element.find(&#039;.lp-payment-trigger-payment-time-selector&#039;).on(&#039;click keydown&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        $booking_form_element.find(&#039;input[name=&quot;&#039; + jQuery(this).data(&#039;holder&#039;) + &#039;&quot;]&#039;).val(jQuery(this).data(&#039;value&#039;));
        latepoint_show_prev_btn($booking_form_element);
        latepoint_trigger_next_btn($booking_form_element);
        return false;
    });
}


function latepoint_init_step_payment__methods($booking_form_element = false) {
    // Selecting Payment Time
    $booking_form_element.find(&#039;.lp-payment-trigger-payment-method-selector&#039;).on(&#039;click&#039;, function (e) {
        var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        $booking_form_element.find(&#039;input[name=&quot;&#039; + jQuery(this).data(&#039;holder&#039;) + &#039;&quot;]&#039;).val(jQuery(this).data(&#039;value&#039;));
        latepoint_show_prev_btn($booking_form_element);
        latepoint_trigger_next_btn($booking_form_element);
        return false;
    });
}

function latepoint_category_item_clicked(event) {
    if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
    let $item = jQuery(event.target);

    let $booking_form_element = $item.closest(&#039;.latepoint-booking-form-element&#039;);
    latepoint_show_prev_btn($booking_form_element);
    $item.closest(&#039;.latepoint-step-content&#039;).addClass(&#039;selecting-item-category&#039;);
    let $category_wrapper = $item.closest(&#039;.os-item-category-w&#039;);
    let $main_parent = $item.closest(&#039;.os-item-categories-main-parent&#039;);
    if ($category_wrapper.hasClass(&#039;selected&#039;)) {
        $category_wrapper.removeClass(&#039;selected&#039;);
        if ($category_wrapper.parent().closest(&#039;.os-item-category-w&#039;).length) {
            $category_wrapper.parent().closest(&#039;.os-item-category-w&#039;).addClass(&#039;selected&#039;);
        } else {
            $main_parent.removeClass(&#039;show-selected-only&#039;);
        }
    } else {
        $main_parent.find(&#039;.os-item-category-w.selected&#039;).removeClass(&#039;selected&#039;);
        $main_parent.addClass(&#039;show-selected-only&#039;);
        $category_wrapper.addClass(&#039;selected&#039;);
    }
    return false;
}

function latepoint_init_step_category_items(step_code) {
    let $category_items = jQuery(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + step_code + &#039;&quot;] .os-item-category-info&#039;);
    $category_items.on(&#039;click&#039;, latepoint_category_item_clicked);
    $category_items.on(&#039;keydown&#039;, latepoint_category_item_clicked);
}


function latepoint_init_step_selectable_items($booking_form_element) {
    $booking_form_element.off(&#039;click&#039;, &#039;.os-selectable-items .os-selectable-item&#039;, latepoint_selectable_item_clicked);
    $booking_form_element.on(&#039;click&#039;, &#039;.os-selectable-items .os-selectable-item&#039;, latepoint_selectable_item_clicked);

    $booking_form_element.off(&#039;click&#039;, &#039;.os-selectable-items .os-selectable-item .item-quantity-selector-input&#039;, latepoint_selectable_item_quantity_keyup);
    $booking_form_element.on(&#039;click&#039;, &#039;.os-selectable-items .os-selectable-item .item-quantity-selector-input&#039;, latepoint_selectable_item_quantity_keyup);


    $booking_form_element.off(&#039;keydown&#039;, &#039;.os-selectable-items .os-selectable-item&#039;, latepoint_selectable_item_clicked);
    $booking_form_element.on(&#039;keydown&#039;, &#039;.os-selectable-items .os-selectable-item&#039;, latepoint_selectable_item_clicked);
}


function latepoint_update_quantity_for_selectable_items($item) {
    var ids = $item.closest(&#039;.os-selectable-items&#039;)
        .find(&#039;.os-selectable-item.selected&#039;)
        .map(function () {
            if (jQuery(this).hasClass(&#039;has-quantity&#039;)) {
                return jQuery(this).data(&#039;item-id&#039;) + &#039;:&#039; + jQuery(this).find(&#039;input.item-quantity-selector-input&#039;).val();
            } else {
                return jQuery(this).data(&#039;item-id&#039;);
            }
        }).get();
    $item.closest(&#039;.latepoint-booking-form-element&#039;).find($item.data(&#039;id-holder&#039;)).val(ids);
}

function latepoint_selectable_item_quantity_keyup(event) {
    var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    var $item = jQuery(this).closest(&#039;.os-selectable-item&#039;);
    var new_value = jQuery(this).val();
    if (new_value &amp;&amp; new_value.match(/^\d+$/)) {
        var max_quantity = $item.data(&#039;max-quantity&#039;);
        if (max_quantity &amp;&amp; (new_value &gt; max_quantity)) new_value = max_quantity;
    } else {
        new_value = 0;
    }
    jQuery(this).val(new_value);

    if (($item.hasClass(&#039;selected&#039;) &amp;&amp; (new_value &gt; 0)) || (!$item.hasClass(&#039;selected&#039;) &amp;&amp; (new_value == 0))) {
        latepoint_update_quantity_for_selectable_items($item);
        latepoint_reload_summary($booking_form_element);
        return false;
    } else {
        $item.trigger(&#039;click&#039;);
    }
}

function latepoint_selectable_item_clicked(event) {
    if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
    event.stopPropagation();
    event.stopImmediatePropagation();
    var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    if (jQuery(this).hasClass(&#039;has-quantity&#039;)) {
        if (jQuery(event.target).hasClass(&#039;item-quantity-selector&#039;)) {
            var current_value = parseInt(jQuery(this).find(&#039;input.item-quantity-selector-input&#039;).val());
            var new_value = (jQuery(event.target).data(&#039;sign&#039;) == &#039;minus&#039;) ? current_value - 1 : current_value + 1;
            var max_quantity = jQuery(this).data(&#039;max-quantity&#039;);
            if (new_value &lt; 0) new_value = 0;
            if (max_quantity &amp;&amp; (new_value &gt; max_quantity)) new_value = max_quantity;
            jQuery(this).find(&#039;input.item-quantity-selector-input&#039;).val(new_value);
            if ((jQuery(this).hasClass(&#039;selected&#039;) &amp;&amp; (new_value &gt; 0)) || (!jQuery(this).hasClass(&#039;selected&#039;) &amp;&amp; (new_value == 0))) {
                latepoint_update_quantity_for_selectable_items(jQuery(this));
                latepoint_reload_summary($booking_form_element);
                return false;
            }
        }
        if (jQuery(event.target).hasClass(&#039;item-quantity-selector-input&#039;)) {
            latepoint_update_quantity_for_selectable_items(jQuery(this));
            latepoint_reload_summary($booking_form_element);
            return false;
        }
    }
    var summary_value = &#039;&#039;;
    if (jQuery(this).hasClass(&#039;os-allow-multiselect&#039;)) {
        if (jQuery(this).hasClass(&#039;selected&#039;)) {
            jQuery(this).removeClass(&#039;selected&#039;);
            if (jQuery(this).hasClass(&#039;has-quantity&#039;)) jQuery(this).find(&#039;input.item-quantity-selector-input&#039;).val(0);
        } else {
            jQuery(this).addClass(&#039;selected&#039;);
            if (jQuery(this).hasClass(&#039;has-quantity&#039;) &amp;&amp; !(jQuery(this).find(&#039;input.item-quantity-selector-input&#039;).val() &gt; 0)) {
                jQuery(this).find(&#039;input.item-quantity-selector-input&#039;).val(1);
            }
        }
        latepoint_update_quantity_for_selectable_items(jQuery(this));
        latepoint_reload_summary($booking_form_element);
        latepoint_show_next_btn($booking_form_element);
    } else {
        if (!jQuery(this).hasClass(&#039;os-duration-item&#039;)) jQuery(this).closest(&#039;.os-item-categories-main-parent&#039;).find(&#039;.os-selectable-item.selected&#039;).removeClass(&#039;selected&#039;);
        jQuery(this).closest(&#039;.os-selectable-items&#039;).find(&#039;.os-selectable-item.selected&#039;).removeClass(&#039;selected&#039;);
        jQuery(this).addClass(&#039;selected&#039;);
        $booking_form_element.find(jQuery(this).data(&#039;id-holder&#039;)).val(jQuery(this).data(&#039;item-id&#039;));
        if (jQuery(this).data(&#039;cart-item-item-data-key&#039;)) {
            latepoint_update_active_cart_item_item_data($booking_form_element, jQuery(this).data(&#039;cart-item-item-data-key&#039;), jQuery(this).data(&#039;item-id&#039;));
        }
        if (jQuery(this).data(&#039;os-call-func&#039;)) {
            window[jQuery(this).data(&#039;os-call-func&#039;)](jQuery(this));
        }
        if (jQuery(this).data(&#039;activate-sub-step&#039;)) {
            window[jQuery(this).data(&#039;activate-sub-step&#039;)](jQuery(this));
        } else {
            latepoint_trigger_next_btn($booking_form_element);
        }
    }
    return false;
}

function latepoint_update_active_cart_item_item_data($booking_form_element, key, value) {
    let item_data_json = $booking_form_element.find(&#039;input[name=&quot;active_cart_item[item_data]&quot;]&#039;).val();
    let item_data = item_data_json ? JSON.parse($booking_form_element.find(&#039;input[name=&quot;active_cart_item[item_data]&quot;]&#039;).val()) : {};
    item_data[key] = value;
    $booking_form_element.find(&#039;input[name=&quot;active_cart_item[item_data]&quot;]&#039;).val(JSON.stringify(item_data));
}

function latepoint_format_price(price) {
    // replace default decimal separator dot with comma if it&#039;s in settings
    if (latepoint_helper.decimal_separator == &#039;,&#039;) price = String(price).replace(&#039;.&#039;, &#039;,&#039;);
    return latepoint_helper.currency_symbol_before + String(price) + latepoint_helper.currency_symbol_after;
}


function latepoint_init_step_services() {
}


function latepoint_trigger_next_btn($booking_form_element) {
    $booking_form_element.find(&#039;.latepoint_step_direction&#039;).val(&#039;next&#039;);
    latepoint_submit_booking_form($booking_form_element.find(&#039;.latepoint-form&#039;));
}

function latepoint_init_step_locations() {
}

function latepoint_init_agent_details_link($booking_form_element) {
    $booking_form_element.on(&#039;click&#039;, &#039;.os-trigger-item-details-popup&#039;, function () {
        $booking_form_element.find(&#039;.os-item-details-popup.open&#039;).remove();
        var $popup = $booking_form_element.find(&#039;#&#039; + jQuery(this).data(&#039;item-details-popup-id&#039;)).first().clone().attr(&#039;id&#039;, &#039;&#039;);
        $booking_form_element.find(&#039;.latepoint-form-w&#039;).addClass(&#039;showing-item-details-popup&#039;);
        $popup.addClass(&#039;open&#039;).appendTo($booking_form_element.find(&#039;.latepoint-body&#039;));
        return false;
    });
    $booking_form_element.on(&#039;click&#039;, &#039;.os-item-details-popup.open .os-item-details-popup-close&#039;, function () {
        $booking_form_element.find(&#039;.latepoint-form-w&#039;).removeClass(&#039;showing-item-details-popup&#039;);
        jQuery(this).closest(&#039;.os-item-details-popup.open&#039;).remove();
        return false;
    });
}

function latepoint_init_step_agents() {
}


function latepoint_init_booking_summary_lightbox() {
    let $lightbox = jQuery(&#039;.customer-dashboard-booking-summary-lightbox&#039;);
    latepoint_init_qr_trigger($lightbox);
    latepoint_init_item_details_popup($lightbox);
}

function latepoint_init_step_confirmation($booking_form_element = false) {
    if (!$booking_form_element) return;
    $booking_form_element.on(&#039;click&#039;, &#039;.set-customer-password-btn&#039;, function () {
        let $btn = jQuery(this);
        let $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);

        $btn.addClass(&#039;os-loading&#039;);
        let params = {
            password_nonce: jQuery(&#039;input[name=&quot;new_password_nonce&quot;]&#039;).val(),
            password: jQuery(&#039;input[name=&quot;customer[password]&quot;]&#039;).val()
        }
        let data = {
            action: latepoint_helper.route_action,
            route_name: jQuery(this).data(&#039;btn-action&#039;),
            params: jQuery.param(params),
            layout: &#039;none&#039;,
            return_format: &#039;json&#039;
        }
        jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data,
            success: function (data) {
                $btn.removeClass(&#039;os-loading&#039;);
                if (data.status === &quot;success&quot;) {
                    $booking_form_element.find(&#039;.step-confirmation-set-password&#039;).html(&#039;&#039;).hide();
                    $booking_form_element.find(&#039;.confirmation-cabinet-info&#039;).show();
                } else {
                    latepoint_show_message_inside_element(data.message, $booking_form_element.find(&#039;.step-confirmation-set-password&#039;), &#039;error&#039;);
                }
            }
        });
        return false;
    });

    $booking_form_element.on(&#039;click&#039;, &#039;.qr-show-trigger&#039;, function () {
        var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        $booking_form_element.find(&#039;.qr-code-on-full-summary&#039;).addClass(&#039;show-vevent-qr-code&#039;);
        return false;
    });

    $booking_form_element.on(&#039;click&#039;, &#039;.show-set-password-fields&#039;, function () {
        var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);

        $booking_form_element.find(&#039;.step-confirmation-set-password&#039;).show();
        $booking_form_element.find(&#039;#customer_password&#039;).trigger(&#039;focus&#039;);
        jQuery(this).closest(&#039;.info-box&#039;).hide();
        return false;
    });
}

function latepoint_init_customer_login_form(){
    if(jQuery(&#039;.latepoint-login-form-w&#039;).length){
        latepoint_init_auth_form(jQuery(&#039;.latepoint-login-form-w&#039;));
    }
}

function latepoint_init_customer_dashboard() {
    latepoint_init_form_masks();
    jQuery(&#039;.latepoint-customer-timezone-selector-w select&#039;).on(&#039;change&#039;, function (e) {
        var $select_box = jQuery(this);
        $select_box.closest(&#039;.latepoint-customer-timezone-selector-w&#039;).addClass(&#039;os-loading&#039;);
        var data = {
            action: latepoint_helper.route_action,
            route_name: jQuery(this).closest(&#039;.latepoint-customer-timezone-selector-w&#039;).data(&#039;route-name&#039;),
            params: {timezone_name: jQuery(this).val()},
            layout: &#039;none&#039;,
            return_format: &#039;json&#039;
        }
        jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data,
            success: function (data) {
                $select_box.closest(&#039;.latepoint-customer-timezone-selector-w&#039;).removeClass(&#039;os-loading&#039;);
                if (data.status === &quot;success&quot;) {
                    location.reload();
                } else {

                }
            }
        });
    });


    jQuery(&#039;.latepoint-request-booking-cancellation&#039;).on(&#039;click&#039;, function () {
        if (!confirm(latepoint_helper.cancel_booking_prompt)) return false;
        var $this = jQuery(this);
        var $booking_box = $this.closest(&#039;.customer-booking&#039;);

        var route = jQuery(this).data(&#039;route&#039;);
        var params = {id: $booking_box.data(&#039;id&#039;)};

        var data = {
            action: latepoint_helper.route_action,
            route_name: route,
            params: params,
            layout: &#039;none&#039;,
            return_format: &#039;json&#039;
        }
        $this.addClass(&#039;os-loading&#039;);
        jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data,
            success: function (data) {
                if (data.status === &quot;success&quot;) {
                    $this.remove();
                    location.reload();
                } else {
                    $this.removeClass(&#039;os-loading&#039;);
                }
            }
        });
        return false;
    });

}


function latepoint_get_customer_name($wrapper) {
    var customer_name = &#039;&#039;;
    var first_name = $wrapper.find(&#039;input[name=&quot;customer[first_name]&quot;]&#039;).val();
    var last_name = $wrapper.find(&#039;input[name=&quot;customer[last_name]&quot;]&#039;).val();
    if (first_name) customer_name += first_name;
    if (last_name) customer_name += &#039; &#039; + last_name;
    return customer_name.trim();
}

function latepoint_init_customer_otp_code_verify_form($booking_form_element) {
    let $verify_otp_btn = $booking_form_element.find(&#039;.latepoint-verify-otp-button&#039;);
    let $verify_otp_input = $booking_form_element.find(&#039;.os-otp-code-field&#039;);

    if ($verify_otp_btn.length &amp;&amp; $verify_otp_input.length) {
        $verify_otp_input.trigger(&#039;focus&#039;);

        // trigger on enter/space to emulate a button
        $verify_otp_btn.on(&#039;keydown&#039;, function (e) {
            if (e.key === &#039;Enter&#039; || e.key === &#039; &#039;) {
                e.preventDefault();
                jQuery(this).trigger(&#039;click&#039;); // Triggers the click handler above
            }
        });
        // close
        $booking_form_element.find(&#039;.latepoint-customer-otp-resend&#039;).on(&#039;click&#039;, function (e) {
            e.preventDefault();
            latepoint_request_customer_otp_code($booking_form_element, jQuery(this));
        });

        $booking_form_element.find(&#039;.latepoint-customer-otp-close&#039;).on(&#039;click&#039;, function () {
            $booking_form_element.find(&#039;.latepoint-customer-otp-input-container&#039;).html(&#039;&#039;);
            $booking_form_element.find(&#039;.hide-when-entering-otp&#039;).removeClass(&#039;os-hidden&#039;);
            latepoint_show_booking_form_footer($booking_form_element);
            return false;
        });

        // input in code field
        $verify_otp_input.on(&#039;input&#039;, function () {
            // Remove non-numeric characters
            const cleanValue = jQuery(this).val().replace(/[^0-9]/g, &#039;&#039;);
            jQuery(this).val(cleanValue);
            if (cleanValue.length === 6) {
                $verify_otp_btn.trigger(&#039;click&#039;);
            }
        });
        $verify_otp_input.on(&#039;keydown&#039;, function (e) {
            if (e.key === &#039;Enter&#039;) {
                e.preventDefault();
                $verify_otp_btn.trigger(&#039;click&#039;);
            }
        });

        $verify_otp_btn.on(&#039;click&#039;, function (e) {
            return latepoint_verify_customer_otp_code($booking_form_element);
        });
    }

}

async function latepoint_verify_customer_otp_code($booking_form_element) {
    let $verify_otp_btn = $booking_form_element.find(&#039;.latepoint-verify-otp-button&#039;);
    let $verify_otp_input = $booking_form_element.find(&#039;.os-otp-code-field&#039;);

    $verify_otp_input.removeClass(&#039;os-invalid&#039;);
    if ($verify_otp_input.val().length !== 6) {
        $verify_otp_input.addClass(&#039;os-invalid&#039;).addClass(&#039;os-shake&#039;);
        return false;
    }

    $verify_otp_btn.addClass(&#039;os-loading&#039;);

    let form_data = new FormData($booking_form_element.find(&#039;.latepoint-form&#039;)[0]);

    let data = {
        action: &#039;latepoint_route_call&#039;,
        route_name: $verify_otp_btn.data(&#039;route&#039;),
        params: latepoint_formdata_to_url_encoded_string(form_data),
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }
    try {
        let response = await jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data
        });
        $verify_otp_btn.removeClass(&#039;os-loading&#039;);
        if (response.status === &#039;success&#039;) {
            if($booking_form_element.data(&#039;success-action&#039;) === &#039;reload&#039;){
                location.reload();
            }else{
                latepoint_hide_message_inside_element($booking_form_element.find(&#039;.latepoint-customer-otp-input-code-wrapper&#039;));
                $booking_form_element.find(&#039;input[name=&quot;customer_contact_verification_token&quot;]&#039;).val(response.message);
                latepoint_reload_step($booking_form_element);
            }
        } else {
            latepoint_show_message_inside_element(response.message, $booking_form_element.find(&#039;.latepoint-customer-otp-input-code-wrapper&#039;), &#039;error&#039;);
        }
        return false;
    } catch (e) {
        latepoint_show_message_inside_element(&#039;Error generating OTP&#039;, $booking_form_element.find(&#039;.latepoint-customer-otp-input-code-wrapper&#039;), &#039;error&#039;);
        throw e;
    }
}

async function latepoint_show_verify_contact_form_with_otp_code($booking_form_element, form_html) {
    $booking_form_element.find(&#039;.latepoint-customer-otp-input-container&#039;).html(form_html);
    $booking_form_element.find(&#039;.hide-when-entering-otp&#039;).addClass(&#039;os-hidden&#039;);
    $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-loaded&#039;);
    $booking_form_element.find(&#039;.latepoint-next-btn, .latepoint-prev-btn&#039;).removeClass(&#039;os-loading&#039;);
    latepoint_init_customer_otp_code_verify_form($booking_form_element);
    latepoint_hide_booking_form_footer($booking_form_element);
}

function latepoint_hide_booking_form_footer($booking_form_element) {
    $booking_form_element.addClass(&#039;hidden-buttons&#039;);
}

function latepoint_show_booking_form_footer($booking_form_element) {
    $booking_form_element.removeClass(&#039;hidden-buttons&#039;);
}

async function latepoint_request_customer_otp_code($booking_form_element, $request_otp_button) {
    $request_otp_button.addClass(&#039;os-loading&#039;);

    let form_data = new FormData($booking_form_element.find(&#039;.latepoint-form&#039;)[0]);


        // get values from phone number fields
      if ((&#039;lp_intlTelInputGlobals&#039; in window) &amp;&amp; (&#039;lp_intlTelInputUtils&#039; in window)) {
        $booking_form_element.find(&#039;input.os-mask-phone&#039;).each(function () {
          const phoneInputName = this.getAttribute(&#039;name&#039;);
          const phoneInputValue = window.lp_intlTelInputGlobals.getInstance(this).getNumber(window.lp_intlTelInputUtils.numberFormat.E164);
          // override value generated automatically by formdata with a formatted value of a phone field with country code
          form_data.set(phoneInputName, phoneInputValue);
        });
      }

    let data = {
        action: &#039;latepoint_route_call&#039;,
        route_name: $request_otp_button.data(&#039;otp-request-route&#039;),
        params: latepoint_formdata_to_url_encoded_string(form_data),
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }
    try {
        let response = await jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data
        });
        $request_otp_button.removeClass(&#039;os-loading&#039;);
        if (response.status === &#039;success&#039;) {
            latepoint_hide_message_inside_element($booking_form_element.find(&#039;.hide-when-entering-otp&#039;));
            $booking_form_element.find(&#039;.hide-when-entering-otp&#039;).addClass(&#039;os-hidden&#039;);
            $booking_form_element.find(&#039;.latepoint-customer-otp-input-container&#039;).html(response.message);
            latepoint_init_customer_otp_code_verify_form($booking_form_element);
        } else {
            latepoint_show_message_inside_element(response.message, $booking_form_element.find(&#039;.hide-when-entering-otp&#039;), &#039;error&#039;);
        }
        return false;
    } catch (e) {
        latepoint_show_message_inside_element(&#039;Error generating OTP&#039;, $booking_form_element.find(&#039;.hide-when-entering-otp&#039;), &#039;error&#039;);
        throw e;
    }
}

function latepoint_customer_auth_load_next_step($booking_form_element) {

}

function latepoint_init_customer_otp_code_request_form($booking_form_element) {
    let $request_otp_button = $booking_form_element.find(&#039;.latepoint-request-otp-button&#039;);
    if ($request_otp_button.length &gt; 0) {
        $request_otp_button.on(&#039;click&#039;, function (e) {
            return latepoint_request_customer_otp_code($booking_form_element, jQuery(this));
        });
        // trigger on enter/space to emulate a button
        $request_otp_button.on(&#039;keydown&#039;, function (e) {
            if (e.key === &#039;Enter&#039; || e.key === &#039; &#039;) {
                e.preventDefault();
                jQuery(this).trigger(&#039;click&#039;); // Triggers the click handler above
            }
        });
        $booking_form_element.find(&#039;.latepoint-customer-otp-request-wrapper&#039;).find(&#039;input, select&#039;).on(&#039;keydown&#039;, function (e) {
            if (e.key === &#039;Enter&#039;) {
                e.preventDefault();
                $request_otp_button.trigger(&#039;click&#039;);
            }
        });
    }
}

async function latepoint_login_customer($booking_form_element, $request_otp_button) {

    $request_otp_button.addClass(&#039;os-loading&#039;);
    let $form = $booking_form_element.find(&#039;.latepoint-form&#039;);

    let form_data = new FormData($form[0]);

        // get values from phone number fields
      if ((&#039;lp_intlTelInputGlobals&#039; in window) &amp;&amp; (&#039;lp_intlTelInputUtils&#039; in window)) {
        $form.find(&#039;input.os-mask-phone&#039;).each(function () {
          const phoneInputName = this.getAttribute(&#039;name&#039;);
          const phoneInputValue = window.lp_intlTelInputGlobals.getInstance(this).getNumber(window.lp_intlTelInputUtils.numberFormat.E164);
          // override value generated automatically by formdata with a formatted value of a phone field with country code
          form_data.set(phoneInputName, phoneInputValue);
        });
      }

    let data = {
        action: &#039;latepoint_route_call&#039;,
        route_name: $request_otp_button.data(&#039;password-login-route&#039;),
        params: latepoint_formdata_to_url_encoded_string(form_data),
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }
    try {
        let response = await jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data
        });
        $request_otp_button.removeClass(&#039;os-loading&#039;);

        if (response.status === &quot;success&quot;) {
            if($booking_form_element.data(&#039;success-action&#039;) === &#039;reload&#039;){
                location.reload();
                return true;
            }else {
                return latepoint_reload_step($booking_form_element);
            }
        } else {
            throw new Error(response.message);
        }
    } catch (e) {
        latepoint_show_message_inside_element(e.message, $booking_form_element.find(&#039;.os-step-existing-customer-login-w&#039;));
    }

}


function latepoint_init_auth_form($wrapper){

    latepoint_init_customer_otp_code_request_form($wrapper);
    latepoint_init_customer_otp_code_verify_form($wrapper);


    $wrapper.find(&#039;.login-with-password-toggle&#039;).on(&#039;change&#039;, function () {
        if (jQuery(this).hasClass(&#039;os-opposite&#039;)) {
            if (jQuery(this).is(&#039;:checked&#039;)) {
                $wrapper.find(&#039;.os-customer-otp-notice&#039;).hide();
                $wrapper.find(&#039;.os-customer-login-password-fields-w&#039;).show();
            } else {
                $wrapper.find(&#039;.os-customer-otp-notice&#039;).show();
                $wrapper.find(&#039;.os-customer-login-password-fields-w&#039;).hide();
            }
        } else {
            if (jQuery(this).is(&#039;:checked&#039;)) {
                $wrapper.find(&#039;.os-customer-otp-notice&#039;).show();
                $wrapper.find(&#039;.os-customer-login-password-fields-w&#039;).hide();
            } else {
                $wrapper.find(&#039;.os-customer-otp-notice&#039;).hide();
                $wrapper.find(&#039;.os-customer-login-password-fields-w&#039;).show();
            }
        }
    });

    $wrapper.find(&#039;.alternative-login-option&#039;).on(&#039;click&#039;, function () {
        let login_method = jQuery(this).data(&#039;auth-via&#039;);
        let delivery_method = jQuery(this).data(&#039;otp-delivery-method&#039;);
        $wrapper.find(&#039;input[name=&quot;auth[contact_type]&quot;]&#039;).val(login_method);
        $wrapper.find(&#039;input[name=&quot;auth[delivery_method]&quot;]&#039;).val(delivery_method);
        $wrapper.find(&#039;.customer-login-method-wrapper&#039;).addClass(&#039;os-hidden&#039;);
        $wrapper.find(&#039;.customer-login-method-wrapper[data-login-method=&quot;&#039; + login_method + &#039;&quot;]&#039;).removeClass(&#039;os-hidden&#039;);
        $wrapper.find(&#039;.alternative-login-option&#039;).removeClass(&#039;os-hidden&#039;);
        jQuery(this).addClass(&#039;os-hidden&#039;);
        return false;
    });

    $wrapper.find(&#039;.login-options-via-wrapper .login-option&#039;).on(&#039;click&#039;, function () {
        let $wrapper = jQuery(this).closest(&#039;.latepoint-customer-auth-options-wrapper&#039;);
        let login_method = jQuery(this).data(&#039;login-method&#039;);
        let delivery_method = jQuery(this).data(&#039;otp-delivery-method&#039;);

        let otp_enabled = jQuery(this).data(&#039;is-otp-enabled&#039;);
        if(otp_enabled === &#039;no&#039;){
            if($wrapper.find(&#039;.login-with-password-toggle.os-opposite:not(:checked)&#039;).length){
                $wrapper.find(&#039;.login-with-password-toggle.os-opposite&#039;).trigger(&#039;click&#039;);
            }
            $wrapper.find(&#039;.latepoint-customer-otp-option&#039;).hide();
            $wrapper.find(&#039;.step-login-existing-customer-btn&#039;).addClass(&#039;latepoint-btn-block&#039;);
        }else{
            if($wrapper.find(&#039;.latepoint-customer-otp-option&#039;).length){
                $wrapper.find(&#039;.latepoint-customer-otp-option&#039;).show();
                $wrapper.find(&#039;.step-login-existing-customer-btn&#039;).removeClass(&#039;latepoint-btn-block&#039;);
            }
        }
        $wrapper.find(&#039;input[name=&quot;auth[contact_type]&quot;]&#039;).val(login_method);
        $wrapper.find(&#039;input[name=&quot;auth[delivery_method]&quot;]&#039;).val(delivery_method);
        jQuery(this).closest(&#039;.login-options-via-wrapper&#039;).find(&#039;.login-option.os-selected&#039;).removeClass(&#039;os-selected&#039;)
        jQuery(this).addClass(&#039;os-selected&#039;);
        jQuery(&#039;.customer-login-method-wrapper&#039;).addClass(&#039;os-hidden&#039;);
        jQuery(&#039;.customer-login-method-wrapper[data-login-method=&quot;&#039; + login_method + &#039;&quot;]&#039;).removeClass(&#039;os-hidden&#039;);

        return false;
    });

    // Init Login Existing Customer Button
    $wrapper.find(&#039;.os-customer-login-w input&#039;).on(&#039;keyup&#039;, function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();
            $wrapper.find(&#039;.step-login-existing-customer-btn&#039;).trigger(&#039;click&#039;);
            return false;
        }
    });

    $wrapper.find(&#039;.step-login-existing-customer-btn&#039;).on(&#039;click&#039;, function (e) {
        e.preventDefault();
        let via = $wrapper.find(&#039;input[name=&quot;auth[via]&quot;]&#039;).val();
        if ($wrapper.find(&#039;input[name=&quot;auth[via]&quot;]&#039;).is(&#039;:checkbox&#039;)) {
            let is_checked = $wrapper.find(&#039;input[name=&quot;auth[via]&quot;]&#039;).is(&#039;:checked&#039;);
            if (via === &#039;otp&#039; &amp;&amp; !is_checked) {
                via = &#039;password&#039;;
            } else if (via === &#039;password&#039; &amp;&amp; !is_checked) {
                via = &#039;otp&#039;;
            }
        }
        if (via === &#039;otp&#039;) {
            latepoint_request_customer_otp_code($wrapper, jQuery(this));
        } else if (via === &#039;password&#039;) {
            latepoint_login_customer($wrapper, jQuery(this));
        }

    });
}

function latepoint_init_step_customer($booking_form_element) {
    latepoint_init_form_masks();

    latepoint_init_auth_form($booking_form_element);

    // Init Logout button
    $booking_form_element.find(&#039;.step-customer-logout-btn&#039;).on(&#039;click&#039;, function () {
        let $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
        $booking_form_element.find(&#039;input[name=&quot;customer_contact_verification_token&quot;]&#039;).val(&#039;&#039;);
        let data = {
            action: latepoint_helper.route_action,
            route_name: jQuery(this).data(&#039;btn-action&#039;),
            layout: &#039;none&#039;,
            return_format: &#039;json&#039;
        }
        latepoint_step_content_change_start($booking_form_element);
        jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            url: latepoint_timestamped_ajaxurl(),
            data: data,
            success: function (data) {
                $booking_form_element.find(&#039;input[name=&quot;auth[action]&quot;]&#039;).val(&#039;logout&#039;);
                latepoint_reload_step($booking_form_element);
            }
        });
        return false;
    });


}

function latepoint_step_content_change_start($booking_form_element) {
    $booking_form_element.removeClass(&#039;step-content-loaded&#039;).addClass(&#039;step-content-loading&#039;);
}

// TODO
function latepoint_step_content_change_end(new_content, $booking_form_element) {
    if (new_content) $booking_form_element.find(&#039;.latepoint-body .latepoint-step-content&#039;).replaceWith(new_content);
    $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-mid-loading&#039;);
    setTimeout(function () {
        $booking_form_element.removeClass(&#039;step-content-mid-loading&#039;).addClass(&#039;step-content-loaded&#039;);
    }, 50);
}


function latepoint_change_step_desc($booking_form_element, step_code) {
    $booking_form_element.removeClass(&#039;step-changed&#039;).addClass(&#039;step-changing&#039;);
    setTimeout(function () {
        // Progress bar
        var $step_progress = $booking_form_element.find(&#039;.latepoint-progress li[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;);
        $step_progress.addClass(&#039;active&#039;).addClass(&#039;complete&#039;).prevAll().addClass(&#039;complete&#039;).removeClass(&#039;active&#039;);
        $step_progress.nextAll().removeClass(&#039;complete&#039;).removeClass(&#039;active&#039;);
        // Side panel
        var side_panel_desc = $booking_form_element.find(&#039;.latepoint-step-desc-library[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;).html();
        $booking_form_element.find(&#039;.latepoint-step-desc&#039;).html(side_panel_desc);

        // Top header
        var top_header_desc = $booking_form_element.find(&#039;.os-heading-text-library[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;).html();
        $booking_form_element.find(&#039;.os-heading-text&#039;).html(top_header_desc);
        setTimeout(function () {
            $booking_form_element.removeClass(&#039;step-changing&#039;).addClass(&#039;step-changed&#039;);
        }, 50);
    }, 500);
}


function latepoint_progress_prev($booking_form_element, step_code) {
    var $step_progress = $booking_form_element.find(&#039;.latepoint-progress li[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;);
    $step_progress.addClass(&#039;active&#039;).addClass(&#039;complete&#039;).prevAll().addClass(&#039;complete&#039;).removeClass(&#039;active&#039;);
    $step_progress.nextAll().removeClass(&#039;complete&#039;).removeClass(&#039;active&#039;);
}


function latepoint_progress_next($booking_form_element, step_code) {
    var $step_progress = $booking_form_element.find(&#039;.latepoint-progress li[data-step-code=&quot;&#039; + step_code + &#039;&quot;]&#039;);
    $step_progress.addClass(&#039;active&#039;).addClass(&#039;complete&#039;).prevAll().addClass(&#039;complete&#039;).removeClass(&#039;active&#039;);
    $step_progress.nextAll().removeClass(&#039;complete&#039;).removeClass(&#039;active&#039;);
}


function latepoint_next_step_description($booking_form_element, step_code) {
    $booking_form_element.removeClass(&#039;step-changed&#039;).addClass(&#039;step-changing&#039;);
    setTimeout(function () {
        $booking_form_element.find(&#039;.latepoint-step-desc&#039;).html($booking_form_element.find(&#039;.latepoint-step-desc-library.active&#039;).removeClass(&#039;active&#039;).next(&#039;.latepoint-step-desc-library&#039;).addClass(&#039;active&#039;).html());
        $booking_form_element.find(&#039;.os-heading-text&#039;).html($booking_form_element.find(&#039;.os-heading-text-library.active&#039;).removeClass(&#039;active&#039;).next(&#039;.os-heading-text-library&#039;).addClass(&#039;active&#039;).html());
        setTimeout(function () {
            $booking_form_element.removeClass(&#039;step-changing&#039;).addClass(&#039;step-changed&#039;);
        }, 50);
    }, 500);
}

function latepoint_prev_step_description($booking_form_element, step_code) {
    $booking_form_element.removeClass(&#039;step-changed&#039;).addClass(&#039;step-changing&#039;);
    setTimeout(function () {
        $booking_form_element.find(&#039;.latepoint-step-desc&#039;).html($booking_form_element.find(&#039;.latepoint-step-desc-library.active&#039;).removeClass(&#039;active&#039;).prev(&#039;.latepoint-step-desc-library&#039;).addClass(&#039;active&#039;).html());
        $booking_form_element.find(&#039;.os-heading-text&#039;).html($booking_form_element.find(&#039;.os-heading-text-library.active&#039;).removeClass(&#039;active&#039;).prev(&#039;.os-heading-text-library&#039;).addClass(&#039;active&#039;).html());
        setTimeout(function () {
            $booking_form_element.removeClass(&#039;step-changing&#039;).addClass(&#039;step-changed&#039;);
        }, 50);
    }, 500);
}


function latepoint_validate_fields($fields) {
    var is_valid = true;
    $fields.each(function (index) {
        if (jQuery(this).val() == &#039;&#039;) {
            is_valid = false;
            return false;
        }
    });
    return is_valid;
}


async function latepoint_submit_booking_form($booking_form) {
    let $booking_form_element = $booking_form.closest(&#039;.latepoint-booking-form-element&#039;);

    let current_step = $booking_form_element.find(&#039;.latepoint_current_step_code&#039;).val();
    let callbacks_list = [];
    if (latepoint_check_if_booking_form_is_final_submit($booking_form_element)) {
        // check if order intent is still bookable
        latepoint_add_action(callbacks_list, async () =&gt; {
            return await latepoint_check_if_order_intent_still_bookable($booking_form_element);
        }, 1);
    }
    $booking_form_element.trigger(&#039;latepoint:submitBookingForm&#039;, [{
        current_step: current_step,
        callbacks_list: callbacks_list,
        is_final_submit: latepoint_check_if_booking_form_is_final_submit($booking_form_element),
        direction: $booking_form_element.find(&#039;.latepoint_step_direction&#039;).val()
    }]);
    try {
        latepoint_hide_prev_btn($booking_form_element);
        await latepoint_process_list_of_callbacks(callbacks_list, $booking_form_element, $booking_form);
    } catch (error) {
        latepoint_show_prev_btn($booking_form_element);
        latepoint_show_error_and_stop_loading_booking_form(error, $booking_form_element);
        return false;
    }


    $booking_form_element.removeClass(&#039;step-content-loaded&#039;).addClass(&#039;step-content-loading&#039;);
    latepoint_hide_prev_btn($booking_form_element);
    try {
        latepoint_hide_message_inside_element($booking_form_element.find(&#039;.latepoint-body&#039;));
        let response = await jQuery.ajax({
            type: &quot;post&quot;,
            dataType: &quot;json&quot;,
            processData: false,
            contentType: false,
            url: latepoint_timestamped_ajaxurl(),
            data: latepoint_create_form_data($booking_form)
        });

        $booking_form.find(&#039;.latepoint_step_direction&#039;).val(&#039;next&#039;);
        if (response.status === &#039;success&#039;) {
            if (response.fields_to_update) {
                for (const [key, value] of Object.entries(response.fields_to_update)) {
                    $booking_form_element.find(&#039;input[name=&quot;&#039; + key + &#039;&quot;]&#039;).val(value)
                }
            }
            if ($booking_form_element.data(&#039;flash-error&#039;)) {
                latepoint_show_message_inside_element($booking_form_element.data(&#039;flash-error&#039;), $booking_form_element.find(&#039;.latepoint-body&#039;));
                $booking_form_element.data(&#039;flash-error&#039;, &#039;&#039;);
            }
            $booking_form_element.find(&#039;.latepoint_current_step_code&#039;).val(response.step_code);
            $booking_form_element.removeClass(function (index, className) {
                return (className.match(/(^|\s)current-step-\S+/g) || []).join(&#039; &#039;);
            }).addClass(&#039;current-step-&#039; + response.step_code);
            setTimeout(function () {
                $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-mid-loading&#039;);
                $booking_form_element.find(&#039;.latepoint-body&#039;).find(&#039;.latepoint-step-content&#039;).addClass(&#039;is-hidden&#039;);
                if ($booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + response.step_code + &#039;&quot;]&#039;)) {
                    $booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + response.step_code + &#039;&quot;]&#039;).remove();
                }
                $booking_form_element.find(&#039;.latepoint-body&#039;).append(response.message);


                latepoint_update_next_btn_label($booking_form_element);
                latepoint_init_step(response.step_code, $booking_form_element);
                setTimeout(function () {
                    $booking_form_element.removeClass(&#039;step-content-mid-loading&#039;).addClass(&#039;step-content-loaded&#039;);
                    $booking_form_element.find(&#039;.latepoint-next-btn, .latepoint-prev-btn&#039;).removeClass(&#039;os-loading&#039;);
                    latepoint_scroll_to_top_of_booking_form($booking_form_element);
                }, 50);
            }, 500);

            if (response.is_pre_last_step) {
                $booking_form_element.data(&#039;next-submit-is-last&#039;, &#039;yes&#039;);
            } else {
                $booking_form_element.data(&#039;next-submit-is-last&#039;, &#039;no&#039;);
            }
            if (response.is_last_step) {
                $booking_form_element.addClass(&#039;hidden-buttons&#039;).find(&#039;.latepoint-footer&#039;).remove();
                $booking_form_element.find(&#039;.latepoint-progress&#039;).css(&#039;opacity&#039;, 0);
                $booking_form_element.closest(&#039;.latepoint-summary-is-open&#039;).removeClass(&#039;latepoint-summary-is-open&#039;);
                $booking_form_element.closest(&#039;.latepoint-show-side-panel&#039;).removeClass(&#039;latepoint-show-side-panel&#039;).addClass(&#039;latepoint-hide-side-panel&#039;);
                $booking_form_element.addClass(&#039;is-final-step&#039;);
            } else {
                if (response.show_next_btn === true) {
                    latepoint_show_next_btn($booking_form_element);
                } else {
                    latepoint_hide_next_btn($booking_form_element);
                }
                if (response.show_prev_btn === true) {
                    latepoint_show_prev_btn($booking_form_element);
                } else {
                    latepoint_hide_prev_btn($booking_form_element);
                }
            }
            latepoint_change_step_desc($booking_form_element, response.step_code);
            latepoint_reload_summary($booking_form_element);
        } else {
            if (response.fields_to_update) {
                for (const [key, value] of Object.entries(response.fields_to_update)) {
                    $booking_form_element.find(&#039;input[name=&quot;&#039; + key + &#039;&quot;]&#039;).val(value)
                }
            }
            if (response.callback) {
                let func_name = response.callback;
                if (func_name.includes(&#039;.&#039;)) {
                    let func_arr = func_name.split(&#039;.&#039;);
                    if (typeof window[func_arr[0]][func_arr[1]] !== &#039;function&#039;) {
                        console.log(func_name + &#039; is undefined&#039;);
                    }
                    if (response.callback_data) {
                        window[func_arr[0]][func_arr[1]]($booking_form_element, response.callback_data);
                    } else {
                        window[func_arr[0]][func_arr[1]]($booking_form_element);
                    }
                } else {
                    if (typeof window[func_name] !== &#039;function&#039;) {
                        console.log(func_name + &#039; is undefined&#039;);
                    }
                    if (response.callback_data) {
                        window[func_name]($booking_form_element, response.callback_data);
                    } else {
                        window[func_name]($booking_form_element);
                    }
                }
            } else {
                if (response.send_to_step &amp;&amp; response.send_to_step === &#039;resubmit&#039;) {
                    let current_resubmit_count = parseInt($booking_form.data(&#039;resubmit-count&#039;)) ? parseInt($booking_form.data(&#039;resubmit-count&#039;)) : 1;
                    $booking_form.data(&#039;resubmit-count&#039;, current_resubmit_count + 1);
                    if (current_resubmit_count &gt; 6) {
                        latepoint_show_message_inside_element(response.message, $booking_form_element.find(&#039;.latepoint-body&#039;));
                    } else {
                        // resubmission probably caused by order intent still being processed, since
                        // order intent is still processing, give it a little more time and try again
                        await latepoint_sleep(2000);
                        return latepoint_submit_booking_form($booking_form);
                    }
                } else {
                    $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-loaded&#039;);
                    $booking_form_element.find(&#039;.latepoint-next-btn, .latepoint-prev-btn&#039;).removeClass(&#039;os-loading&#039;);
                    if (response.send_to_step &amp;&amp; $booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + response.send_to_step + &#039;&quot;]&#039;).length) {
                        $booking_form_element.data(&#039;flash-error&#039;, response.message);
                        latepoint_reload_step($booking_form_element, response.send_to_step);
                    } else {
                        latepoint_show_message_inside_element(response.message, $booking_form_element.find(&#039;.latepoint-body&#039;));
                        latepoint_show_prev_btn($booking_form_element);
                    }
                }
            }
        }
    } catch (e) {
        console.log(e);
        alert(&#039;Error:&#039; + e);
    }
}

function latepoint_sleep(ms) {
    return new Promise(resolve =&gt; setTimeout(resolve, ms));
}

function latepoint_show_error_and_stop_loading_booking_form(error, $booking_form_element) {
    if (error.send_to_step &amp;&amp; $booking_form_element.find(&#039;.latepoint-step-content[data-step-code=&quot;&#039; + error.send_to_step + &#039;&quot;]&#039;).length) {
        latepoint_reload_step($booking_form_element, error.send_to_step);
        $booking_form_element.data(&#039;flash-error&#039;, error.message);
    } else {
        latepoint_show_message_inside_element(error.message, $booking_form_element.find(&#039;.latepoint-body&#039;), &#039;error&#039;);

        if ($booking_form_element.hasClass(&#039;step-content-loading&#039;)) $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-loaded&#039;);
        $booking_form_element.find(&#039;.latepoint-next-btn&#039;).removeClass(&#039;os-loading&#039;);

        // if previous step exists - show prev button
        if ($booking_form_element.find(&#039;.latepoint-step-content:last-child&#039;).prev(&#039;.latepoint-step-content&#039;).length) latepoint_show_prev_btn($booking_form_element);
        latepoint_scroll_to_top_of_booking_form($booking_form_element);
    }
}

function latepoint_reset_active_cart_item($booking_form_element) {
    $booking_form_element.find(&#039;input[name=&quot;active_cart_item[id]&quot;]&#039;).val(&#039;&#039;);
    $booking_form_element.find(&#039;input[name=&quot;active_cart_item[variant]&quot;]&#039;).val(&#039;&#039;);
    $booking_form_element.find(&#039;input[name=&quot;active_cart_item[item_data]&quot;]&#039;).val(&#039;&#039;);
}

function latepoint_check_if_booking_form_is_final_submit($booking_form_element) {
    return ($booking_form_element.data(&#039;next-submit-is-last&#039;) == &#039;yes&#039;);
}


async function latepoint_check_if_order_intent_still_bookable($booking_form_element) {
    let response = await jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        processData: false,
        contentType: false,
        url: latepoint_timestamped_ajaxurl(),
        data: latepoint_create_form_data($booking_form_element.find(&#039;.latepoint-form&#039;), latepoint_helper.check_order_intent_bookable_route)
    });
    if (response.status === &#039;success&#039;) {
        return true;
    } else {
        throw new Error(response.message);
    }
}

async function latepoint_process_list_of_callbacks(callbacks, $booking_form_element, $booking_form) {
    for (const callback of callbacks) {
        await callback.action();
    }
}

function latepoint_clear_presets($booking_form_element) {
    $booking_form_element.find(&#039;.clear_for_new_item&#039;).val(&#039;&#039;);
}

function latepoint_init_booking_form($booking_form_element) {
    $booking_form_element.on(&#039;click keydown&#039;, &#039;.checkout-from-summary-panel-btn&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        latepoint_reload_step($booking_form_element, jQuery(this).data(&#039;step&#039;));
        jQuery(this).closest(&#039;.latepoint-w&#039;).removeClass(&#039;show-summary-on-mobile&#039;);
        return false;
    });

    $booking_form_element.on(&#039;click keydown&#039;, &#039;.latepoint-add-another-item-trigger&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;

        if (latepoint_helper.reset_presets_when_adding_new_item) {
            latepoint_clear_presets($booking_form_element);
        }
        latepoint_reset_active_cart_item($booking_form_element);
        latepoint_reload_step($booking_form_element, jQuery(this).data(&#039;step&#039;));
        return false;
    });
    $booking_form_element.find(&#039;.latepoint-form&#039;).on(&#039;submit&#039;, function (e) {
        e.preventDefault();
        let $booking_form = jQuery(this);
        latepoint_submit_booking_form($booking_form);
    });

    latepoint_init_booking_summary_panel($booking_form_element);

    $booking_form_element.on(&#039;click keydown&#039;, &#039;.latepoint-lightbox-summary-trigger&#039;, function (event) {
        event.preventDefault();
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        let $wrapper = jQuery(this).closest(&#039;.latepoint-w&#039;);
        $wrapper.toggleClass(&#039;show-summary-on-mobile&#039;);
        return false;
    });

    $booking_form_element.find(&#039;.latepoint-lightbox-close&#039;).on(&#039;click&#039;, function () {

        let params = new URLSearchParams(location.search);
        if (params.has(&#039;latepoint_order_intent_key&#039;)) {
            params.delete(&#039;latepoint_order_intent_key&#039;);
            history.replaceState(null, &#039;&#039;, &#039;?&#039; + params + location.hash);
        }

        jQuery(&#039;body&#039;).removeClass(&#039;latepoint-lightbox-active&#039;);
        jQuery(&#039;.latepoint-lightbox-w&#039;).remove();
        return false;
    });


    $booking_form_element.on(&#039;click keydown&#039;, &#039;.lp-option&#039;, function (event) {
        if (event.type === &#039;keydown&#039; &amp;&amp; event.key !== &#039; &#039; &amp;&amp; event.key !== &#039;Enter&#039;) return;
        jQuery(this).closest(&#039;.lp-options&#039;).find(&#039;.lp-option.selected&#039;).removeClass(&#039;selected&#039;);
        jQuery(this).addClass(&#039;selected&#039;);
    });


    // Next Step button Click
    $booking_form_element.find(&#039;.latepoint-next-btn&#039;).on(&#039;click&#039;, async function (e) {
        e.preventDefault();
        if (jQuery(this).hasClass(&#039;disabled&#039;) || jQuery(this).hasClass(&#039;os-loading&#039;)) return false;
        var $next_btn = jQuery(this);
        $next_btn.addClass(&#039;os-loading&#039;);
        var $booking_form = jQuery(this).closest(&#039;.latepoint-form&#039;);

        var current_step = $booking_form_element.find(&#039;.latepoint_current_step_code&#039;).val();

        $booking_form.find(&#039;.latepoint_step_direction&#039;).val(&#039;next&#039;);
        var callbacks_list = [];

        $booking_form_element.trigger(&#039;latepoint:nextStepClicked&#039;, [{
            current_step: current_step,
            callbacks_list: callbacks_list
        }]);
        latepoint_hide_prev_btn($booking_form_element);

        try {
            await latepoint_process_list_of_callbacks(callbacks_list, $booking_form_element, $booking_form);
            await latepoint_submit_booking_form($booking_form);
        } catch (error) {
            latepoint_show_error_and_stop_loading_booking_form(error, $booking_form_element);
        }
        return false;
    });


    // Previous Step button Click
    $booking_form_element.find(&#039;.latepoint-prev-btn&#039;).on(&#039;click&#039;, function (e) {
        if (jQuery(this).hasClass(&#039;disabled&#039;) || jQuery(this).hasClass(&#039;os-loading&#039;)) return false;

        let $current_step = $booking_form_element.find(&#039;.latepoint-step-content:last-child&#039;);


        // handle categories
        if ($current_step.hasClass(&#039;selecting-item-category&#039;)) {
            if ($current_step.find(&#039;.os-item-category-w .os-item-category-w.selected&#039;).length) {
                $current_step.find(&#039;.os-item-category-w .os-item-category-w.selected&#039;).parents(&#039;.os-item-category-w&#039;).addClass(&#039;selected&#039;).find(&#039;.os-item-category-w.selected&#039;).removeClass(&#039;selected&#039;);
            } else {
                $current_step.removeClass(&#039;selecting-item-category&#039;).find(&#039;.os-item-category-w.selected&#039;).removeClass(&#039;selected&#039;);
                $current_step.removeClass(&#039;selecting-item-category&#039;).find(&#039;.os-item-categories-holder.show-selected-only&#039;).removeClass(&#039;show-selected-only&#039;);
            }
            if (($booking_form_element.find(&#039;.latepoint-step-content&#039;).length &lt;= 1) &amp;&amp; !$current_step.hasClass(&#039;selecting-item-category&#039;)) {
                latepoint_hide_prev_btn($booking_form_element);
            }
            latepoint_reload_summary($booking_form_element);
            return false;
        }

        if ($current_step.data(&#039;clear-action&#039;)) {
            window[$current_step.data(&#039;clear-action&#039;)]($booking_form_element);
        }

        let $back_btn = jQuery(this);
        $back_btn.addClass(&#039;os-loading&#039;);
        $booking_form_element.removeClass(&#039;step-content-loaded&#039;).addClass(&#039;step-content-loading&#039;);
        let $new_current_step = $booking_form_element.find(&#039;.latepoint-step-content.is-hidden&#039;).last();
        let new_current_step_code = $new_current_step.data(&#039;step-code&#039;);
        let current_step_code = $current_step.data(&#039;step-code&#039;);


        let current_parent_code_name = current_step_code.split(&#039;__&#039;)[0];
        let new_parent_code_name = new_current_step_code.split(&#039;__&#039;)[0];

        let active_cart_item_id = $booking_form_element.find(&#039;input[name=&quot;active_cart_item[id]&quot;]&#039;).val();

        latepoint_change_step_desc($booking_form_element, new_current_step_code);
        setTimeout(function () {
            $new_current_step.removeClass(&#039;is-hidden&#039;);
            $current_step.remove();
            $booking_form_element.find(&#039;.latepoint_current_step_code&#039;).val(new_current_step_code);
            $booking_form_element.removeClass(function (index, className) {
                return (className.match(/(^|\s)current-step-\S+/g) || []).join(&#039; &#039;);
            }).addClass(&#039;current-step-&#039; + new_current_step_code);
            $booking_form_element.find(&#039;.latepoint-next-btn span&#039;).text($booking_form_element.find(&#039;.latepoint-next-btn&#039;).data(&#039;label&#039;));
            $booking_form_element.data(&#039;next-submit-is-last&#039;, &#039;no&#039;);

            latepoint_update_next_btn_label($booking_form_element);
            latepoint_show_next_btn($booking_form_element);
            $back_btn.removeClass(&#039;os-loading&#039;);
            if ($booking_form_element.find(&#039;.latepoint-step-content&#039;).length &lt;= 1) {
                if ($new_current_step.hasClass(&#039;selecting-item-category&#039;)) {

                }
                if (new_current_step_code == &#039;booking__services&#039;) {
                    var $services_step = $booking_form_element.find(&#039;.step-services-w&#039;);
                    if ($services_step.hasClass(&#039;selecting-item-category&#039;)) {
                        if ($services_step.find(&#039;.os-services &gt; .os-item.selected&#039;).hasClass(&#039;is-preselected&#039;)) {
                            // if service is preselected check if there are both multiple durations and quantity selector and only then show prev button
                        } else {
                            latepoint_show_prev_btn($booking_form_element);
                        }
                    } else {
                        latepoint_hide_prev_btn($booking_form_element);
                    }
                } else {
                    if (!$new_current_step.hasClass(&#039;selecting-item-category&#039;)) {
                        latepoint_hide_prev_btn($booking_form_element);
                    }
                }
            }
            $booking_form_element.removeClass(&#039;step-content-loading&#039;).addClass(&#039;step-content-mid-loading&#039;);


            if (new_parent_code_name == &#039;booking&#039; &amp;&amp; current_parent_code_name != &#039;booking&#039; &amp;&amp; active_cart_item_id) {

                // we are going back to one of the steps of a booking process, we need to remove the item that was just added to the cart and start over
                $booking_form_element.find(&#039;.latepoint-summary-w&#039;).addClass(&#039;os-loading&#039;);
                let data = {
                    action: latepoint_helper.route_action,
                    route_name: latepoint_helper.remove_cart_item_route,
                    params: jQuery.param({cart_item_id: active_cart_item_id}),
                    layout: &#039;none&#039;,
                    return_format: &#039;json&#039;
                }
                jQuery.ajax({
                    type: &quot;post&quot;,
                    dataType: &quot;json&quot;,
                    url: latepoint_timestamped_ajaxurl(),
                    data: data,
                    success: function (data) {
                        if (data.status === &quot;success&quot;) {
                            $booking_form_element.find(&#039;input[name=&quot;active_cart_item[id]&quot;]&#039;).val(&#039;&#039;);
                            if ($booking_form_element.find(&#039;input[name=&quot;active_cart_item[variant]&quot;]&#039;).val() == &#039;bundle&#039;) {
                                latepoint_update_active_cart_item_item_data($booking_form_element, &#039;bundle_id&#039;, &#039;&#039;);
                                $booking_form_element.find(&#039;input[name=&quot;active_cart_item[variant]&quot;]&#039;).val(&#039;&#039;);
                            }
                            latepoint_reload_summary($booking_form_element);
                        } else {
                            $booking_form_element.find(&#039;.latepoint-summary-w&#039;).removeClass(&#039;os-loading&#039;);
                            latepoint_show_message_inside_element(data.message, $booking_form_element.find(&#039;.latepoint-body&#039;), &#039;error&#039;);
                        }
                    }
                });
            } else {
                latepoint_reload_summary($booking_form_element);
            }
            setTimeout(function () {
                $booking_form_element.removeClass(&#039;step-content-mid-loading&#039;).addClass(&#039;step-content-loaded&#039;);
                latepoint_hide_message_inside_element($booking_form_element.find(&#039;.latepoint-body&#039;));
                latepoint_scroll_to_top_of_booking_form($booking_form_element);

                let callbacks_list = [];
                $booking_form_element.trigger(&#039;latepoint:prevStepReInit&#039;, [{
                    current_step: new_current_step_code,
                    callbacks_list: callbacks_list
                }]);
            }, 150);
        }, 700);
        return false;
    });

    latepoint_init_agent_details_link($booking_form_element);
    $booking_form_element.trigger(&#039;latepoint:initBookingForm&#039;);
}


function latepoint_init_booking_form_by_trigger($trigger) {
    let route = latepoint_helper.booking_button_route;
    let params = {};
    let restrictions = {};
    let presets = {};
    let booking_element_styles = {};
    if ($trigger.data(&#039;show-service-categories&#039;)) restrictions.show_service_categories = $trigger.data(&#039;show-service-categories&#039;);
    if ($trigger.data(&#039;show-locations&#039;)) restrictions.show_locations = $trigger.data(&#039;show-locations&#039;);
    if ($trigger.data(&#039;show-services&#039;)) restrictions.show_services = $trigger.data(&#039;show-services&#039;);
    if ($trigger.data(&#039;show-agents&#039;)) restrictions.show_agents = $trigger.data(&#039;show-agents&#039;);
    if ($trigger.data(&#039;calendar-start-date&#039;)) restrictions.calendar_start_date = $trigger.data(&#039;calendar-start-date&#039;);

    if ($trigger.data(&#039;selected-location&#039;)) presets.selected_location = $trigger.data(&#039;selected-location&#039;);
    if ($trigger.data(&#039;selected-agent&#039;)) presets.selected_agent = $trigger.data(&#039;selected-agent&#039;);
    if ($trigger.data(&#039;selected-service&#039;)) presets.selected_service = $trigger.data(&#039;selected-service&#039;);
    if ($trigger.data(&#039;selected-bundle&#039;)) presets.selected_bundle = $trigger.data(&#039;selected-bundle&#039;);
    if ($trigger.data(&#039;selected-duration&#039;)) presets.selected_duration = $trigger.data(&#039;selected-duration&#039;);
    if ($trigger.data(&#039;selected-total-attendees&#039;)) presets.selected_total_attendees = $trigger.data(&#039;selected-total-attendees&#039;);
    if ($trigger.data(&#039;selected-service-category&#039;)) presets.selected_service_category = $trigger.data(&#039;selected-service-category&#039;);
    if ($trigger.data(&#039;selected-start-date&#039;)) presets.selected_start_date = $trigger.data(&#039;selected-start-date&#039;);
    if ($trigger.data(&#039;selected-start-time&#039;)) presets.selected_start_time = $trigger.data(&#039;selected-start-time&#039;);
    if ($trigger.data(&#039;order-item-id&#039;)) presets.order_item_id = $trigger.data(&#039;order-item-id&#039;);
    if ($trigger.data(&#039;source-id&#039;)) presets.source_id = $trigger.data(&#039;source-id&#039;);

    if ($trigger.data(&#039;hide-summary&#039;) == &#039;yes&#039;) booking_element_styles.hide_summary = true;
    if ($trigger.data(&#039;hide-side-panel&#039;) == &#039;yes&#039;) booking_element_styles.hide_side_panel = true;


    if (jQuery.isEmptyObject(restrictions) == false) params.restrictions = restrictions;
    if (jQuery.isEmptyObject(presets) == false) params.presets = presets;
    if (jQuery.isEmptyObject(booking_element_styles) == false) params.booking_element_styles = booking_element_styles;

    let data = {
        action: latepoint_helper.route_action,
        route_name: route,
        params: params,
        layout: &#039;none&#039;,
        return_format: &#039;json&#039;
    }

    let is_inline_form = $trigger.hasClass(&#039;latepoint-book-form-wrapper&#039;);
    if (is_inline_form) {
        data.params.booking_element_type = &#039;inline_form&#039;;
    }

    $trigger.addClass(&#039;os-loading&#039;);
    jQuery.ajax({
        type: &quot;post&quot;,
        dataType: &quot;json&quot;,
        url: latepoint_timestamped_ajaxurl(),
        data: data,
        success: (data) =&gt; {
            if (data.status === &quot;success&quot;) {
                let $booking_form_element = false;
                if (is_inline_form) {
                    $trigger.html(data.message);
                    $booking_form_element = $trigger.find(&#039;.latepoint-booking-form-element&#039;);
                } else {
                    let lightbox_class = &#039;booking-form-in-lightbox&#039;;
                    latepoint_show_data_in_lightbox(data.message, lightbox_class, false);
                    $booking_form_element = jQuery(&#039;.latepoint-lightbox-w .latepoint-booking-form-element&#039;);
                    jQuery(&#039;body&#039;).addClass(&#039;latepoint-lightbox-active&#039;);
                }
                latepoint_init_booking_form($booking_form_element);
                latepoint_init_step(data.step, $booking_form_element);
                $trigger.removeClass(&#039;os-loading&#039;);
            } else {
                $trigger.removeClass(&#039;os-loading&#039;);
                // console.log(data.message);
            }
        }
    });
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>