/**
 * Add responsive plus/minus buttons to WooCommerce Bookings person fields.
 */
add_action( 'wp_footer', function () {
	if ( ! is_product() ) {
		return;
	}
	?>
	<script>
	(function () {
		'use strict';

		function triggerBookingUpdate(input) {
			input.dispatchEvent(new Event('input', {
				bubbles: true
			}));

			input.dispatchEvent(new Event('change', {
				bubbles: true
			}));

			if (window.jQuery) {
				window.jQuery(input).trigger('input').trigger('change');
			}
		}

		function createBookingSteppers() {
			const bookingForm = document.querySelector(
				'.wc-bookings-booking-form, form.cart'
			);

			if (!bookingForm) {
				return;
			}

			const inputs = bookingForm.querySelectorAll(
				'input[type="number"][name*="persons"],' +
				'input[type="number"].wc_bookings_field_persons,' +
				'.wc-bookings-booking-form input[type="number"]'
			);

			inputs.forEach(function (input) {
				if (
					input.closest('.booking-person-stepper') ||
					input.classList.contains('qty')
				) {
					return;
				}

				const wrapper = document.createElement('div');
				wrapper.className = 'booking-person-stepper';

				const minusButton = document.createElement('button');
				minusButton.type = 'button';
				minusButton.className = 'booking-stepper-minus';
				minusButton.innerHTML = '&minus;';
				minusButton.setAttribute(
					'aria-label',
					'Decrease number of participants'
				);

				const plusButton = document.createElement('button');
				plusButton.type = 'button';
				plusButton.className = 'booking-stepper-plus';
				plusButton.textContent = '+';
				plusButton.setAttribute(
					'aria-label',
					'Increase number of participants'
				);

				input.parentNode.insertBefore(wrapper, input);
				wrapper.appendChild(minusButton);
				wrapper.appendChild(input);
				wrapper.appendChild(plusButton);

				minusButton.addEventListener('click', function () {
					const minimum = input.min !== ''
						? parseInt(input.min, 10)
						: 0;

					const current = parseInt(input.value, 10) || 0;
					const step = parseInt(input.step, 10) || 1;

					input.value = Math.max(minimum, current - step);
					triggerBookingUpdate(input);
				});

				plusButton.addEventListener('click', function () {
					const current = parseInt(input.value, 10) || 0;
					const step = parseInt(input.step, 10) || 1;

					const maximum = input.max !== ''
						? parseInt(input.max, 10)
						: Number.MAX_SAFE_INTEGER;

					input.value = Math.min(maximum, current + step);
					triggerBookingUpdate(input);
				});
			});
		}

		document.addEventListener('DOMContentLoaded', function () {
			createBookingSteppers();

			const observer = new MutationObserver(function () {
				createBookingSteppers();
			});

			observer.observe(document.body, {
				childList: true,
				subtree: true
			});
		});

		if (window.jQuery) {
			window.jQuery(document).ajaxComplete(function () {
				createBookingSteppers();
			});
		}
	})();
	</script>

	<style>
	.booking-person-stepper {
		display: inline-flex !important;
		align-items: center !important;
		width: fit-content !important;
		max-width: 100% !important;
		margin: 5px 0 10px !important;
		overflow: hidden !important;
		border: 1px solid #004b3a !important;
		border-radius: 10px !important;
		background: #ffffff !important;
		vertical-align: middle !important;
	}

	.booking-person-stepper input[type="number"] {
		display: block !important;
		width: 64px !important;
		min-width: 64px !important;
		height: 48px !important;
		margin: 0 !important;
		padding: 0 5px !important;
		border: 0 !important;
		border-left: 1px solid #d5d5d5 !important;
		border-right: 1px solid #d5d5d5 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		color: #111111 !important;
		font-size: 17px !important;
		text-align: center !important;
		box-shadow: none !important;
		appearance: textfield !important;
		-moz-appearance: textfield !important;
	}

	.booking-person-stepper input[type="number"]::-webkit-inner-spin-button,
	.booking-person-stepper input[type="number"]::-webkit-outer-spin-button {
		margin: 0 !important;
		-webkit-appearance: none !important;
	}

	.booking-stepper-minus,
	.booking-stepper-plus {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 46px !important;
		width: 46px !important;
		min-width: 46px !important;
		height: 48px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #004b3a !important;
		color: #ffffff !important;
		font-size: 24px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		cursor: pointer !important;
		box-shadow: none !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.booking-stepper-minus:hover,
	.booking-stepper-plus:hover,
	.booking-stepper-minus:focus,
	.booking-stepper-plus:focus {
		background: #b88a2b !important;
		color: #ffffff !important;
	}

	@media only screen and (max-width: 768px) {
		.wc-bookings-booking-form .form-field {
			overflow: visible !important;
		}

		.booking-person-stepper {
			display: flex !important;
			width: 158px !important;
			max-width: 100% !important;
			position: relative !important;
			z-index: 20 !important;
		}

		.booking-person-stepper input[type="number"] {
			flex: 0 0 62px !important;
			width: 62px !important;
			min-width: 62px !important;
		}

		.booking-stepper-minus,
		.booking-stepper-plus {
			flex: 0 0 48px !important;
			width: 48px !important;
			min-width: 48px !important;
		}
	}
	</style>
	<?php
}, 99 );