wp-bnb/assets/js/admin.js

/**
 * WP BnB Admin JavaScript
 *
 * @package Magdev\WpBnb
 */

(function($) {
	'use strict';

	/**
	 * Initialize license management functionality.
	 */
	function initLicenseManagement() {
		var $validateBtn = $('#wp-bnb-validate-license');
		var $activateBtn = $('#wp-bnb-activate-license');
		var $spinner = $('#wp-bnb-license-spinner');
		var $message = $('#wp-bnb-license-message');

		if (!$validateBtn.length) {
			return;
		}

		// Validate license button click.
		$validateBtn.on('click', function(e) {
			e.preventDefault();
			performLicenseAction('wp_bnb_validate_license', wpBnbAdmin.i18n.validating);
		});

		// Activate license button click.
		$activateBtn.on('click', function(e) {
			e.preventDefault();
			performLicenseAction('wp_bnb_activate_license', wpBnbAdmin.i18n.activating);
		});

		/**
		 * Perform a license AJAX action.
		 *
		 * @param {string} action      AJAX action name.
		 * @param {string} loadingText Loading text to display.
		 */
		function performLicenseAction(action, loadingText) {
			// Disable buttons and show spinner.
			$validateBtn.prop('disabled', true);
			$activateBtn.prop('disabled', true);
			$spinner.addClass('is-active');
			$message.hide();

			$.ajax({
				url: wpBnbAdmin.ajaxUrl,
				type: 'POST',
				data: {
					action: action,
					nonce: wpBnbAdmin.nonce
				},
				success: function(response) {
					$spinner.removeClass('is-active');
					$validateBtn.prop('disabled', false);
					$activateBtn.prop('disabled', false);

					if (response.success) {
						showMessage('success', response.data.message);
						// Reload page after short delay to show updated status.
						setTimeout(function() {
							window.location.reload();
						}, 1500);
					} else {
						showMessage('error', response.data.message || wpBnbAdmin.i18n.error);
					}
				},
				error: function() {
					$spinner.removeClass('is-active');
					$validateBtn.prop('disabled', false);
					$activateBtn.prop('disabled', false);
					showMessage('error', wpBnbAdmin.i18n.error);
				}
			});
		}

		/**
		 * Show a message.
		 *
		 * @param {string} type    Message type (success or error).
		 * @param {string} message Message text.
		 */
		function showMessage(type, message) {
			$message
				.removeClass('success error')
				.addClass(type)
				.text(message)
				.fadeIn();
		}
	}

	/**
	 * Initialize room gallery functionality.
	 */
	function initRoomGallery() {
		var $container = $('#bnb-room-gallery');
		var $addButton = $('#bnb-add-gallery-images');
		var $input = $('#bnb_room_gallery');
		var $imagesContainer = $container.find('.bnb-gallery-images');

		if (!$addButton.length) {
			return;
		}

		// Media frame for selecting images.
		var mediaFrame;

		// Add images button click.
		$addButton.on('click', function(e) {
			e.preventDefault();

			// If frame exists, reopen it.
			if (mediaFrame) {
				mediaFrame.open();
				return;
			}

			// Create media frame.
			mediaFrame = wp.media({
				title: wpBnbAdmin.i18n.selectImages,
				button: {
					text: wpBnbAdmin.i18n.addToGallery
				},
				multiple: true,
				library: {
					type: 'image'
				}
			});

			// Handle selection.
			mediaFrame.on('select', function() {
				var selection = mediaFrame.state().get('selection');
				selection.each(function(attachment) {
					var data = attachment.toJSON();
					var thumbnail = data.sizes.thumbnail ? data.sizes.thumbnail.url : data.url;

					// Check if already in gallery.
					if ($imagesContainer.find('[data-id="' + data.id + '"]').length) {
						return;
					}

					// Add image to gallery.
					var $image = $('<div class="bnb-gallery-image" data-id="' + data.id + '">' +
						'<img src="' + thumbnail + '" alt="">' +
						'<button type="button" class="bnb-remove-image">&times;</button>' +
						'</div>');
					$imagesContainer.append($image);
				});

				updateGalleryInput();
			});

			mediaFrame.open();
		});

		// Remove image button click.
		$imagesContainer.on('click', '.bnb-remove-image', function(e) {
			e.preventDefault();
			$(this).closest('.bnb-gallery-image').remove();
			updateGalleryInput();
		});

		// Make gallery sortable.
		$imagesContainer.sortable({
			items: '.bnb-gallery-image',
			cursor: 'move',
			update: function() {
				updateGalleryInput();
			}
		});

		/**
		 * Update the hidden input with gallery image IDs.
		 */
		function updateGalleryInput() {
			var ids = [];
			$imagesContainer.find('.bnb-gallery-image').each(function() {
				ids.push($(this).data('id'));
			});
			$input.val(ids.join(','));
		}
	}

	/**
	 * Initialize pricing settings functionality.
	 */
	function initPricingSettings() {
		var $midTermInput = $('#wp_bnb_mid_term_max_nights');
		var $longTermMin = $('#wp-bnb-long-term-min');

		if (!$midTermInput.length || !$longTermMin.length) {
			return;
		}

		// Update long-term minimum display when mid-term max changes.
		$midTermInput.on('input', function() {
			$longTermMin.text($(this).val());
		});
	}

	/**
	 * Initialize season form validation.
	 */
	function initSeasonForm() {
		var $form = $('.bnb-season-form');

		if (!$form.length) {
			return;
		}

		// Validate date format on input.
		$form.find('#season_start_date, #season_end_date').on('input', function() {
			var value = $(this).val();
			var isValid = /^\d{2}-\d{2}$/.test(value);

			if (value.length > 0 && !isValid) {
				$(this).css('border-color', '#d63638');
			} else {
				$(this).css('border-color', '');
			}
		});

		// Validate modifier range.
		$form.find('#season_modifier').on('input', function() {
			var value = parseFloat($(this).val());
			var $preview = $(this).siblings('.bnb-modifier-preview');

			if ($preview.length === 0) {
				$preview = $('<span class="bnb-modifier-preview"></span>');
				$(this).after($preview);
			}

			if (!isNaN(value) && value > 0) {
				var percentage = ((value - 1) * 100).toFixed(0);
				var text = '';
				if (percentage > 0) {
					text = '+' + percentage + '% ' + (wpBnbAdmin.i18n.increase || 'increase');
					$preview.css('color', '#d63638');
				} else if (percentage < 0) {
					text = percentage + '% ' + (wpBnbAdmin.i18n.discount || 'discount');
					$preview.css('color', '#00a32a');
				} else {
					text = wpBnbAdmin.i18n.normalPrice || 'Normal price';
					$preview.css('color', '#646970');
				}
				$preview.text(' = ' + text);
			} else {
				$preview.text('');
			}
		}).trigger('input');
	}

	/**
	 * Initialize pricing meta box interactions.
	 */
	function initPricingMetaBox() {
		var $pricingTable = $('.bnb-pricing-table');

		if (!$pricingTable.length) {
			return;
		}

		// Highlight empty required prices.
		$pricingTable.find('input[type="number"]').on('blur', function() {
			var $input = $(this);
			var value = $input.val();
			var isShortTerm = $input.attr('id').indexOf('short_term') !== -1;

			// Short-term price is recommended.
			if (isShortTerm && (value === '' || parseFloat(value) <= 0)) {
				$input.css('background-color', '#fcf0f1');
			} else {
				$input.css('background-color', '');
			}
		});
	}

	/**
	 * Initialize booking form functionality.
	 */
	function initBookingForm() {
		var $roomSelect = $('#bnb_booking_room_id');
		var $checkInInput = $('#bnb_booking_check_in');
		var $checkOutInput = $('#bnb_booking_check_out');
		var $nightsDisplay = $('#bnb-booking-nights-display');
		var $availabilityDisplay = $('#bnb-booking-availability-display');
		var $priceDisplay = $('#bnb-booking-price-display');
		var $calculatedPriceInput = $('#bnb_booking_calculated_price');
		var $priceBreakdownInput = $('#bnb_booking_price_breakdown');
		var $breakdownDisplay = $('#bnb-booking-breakdown-display');
		var $recalculateBtn = $('#bnb-recalculate-price');
		var $statusSelect = $('#bnb_booking_status');
		var $statusPreview = $('#bnb-status-preview .bnb-status-badge');

		// Check if we're on a booking edit page.
		if (!$roomSelect.length || !$checkInInput.length) {
			return;
		}

		// Get current booking ID if editing.
		var bookingId = null;
		var $postId = $('input[name="post_ID"]');
		if ($postId.length) {
			bookingId = parseInt($postId.val(), 10);
		}

		// Debounce timer for availability check.
		var availabilityTimer = null;

		/**
		 * Update nights display based on selected dates.
		 */
		function updateNightsDisplay() {
			var checkIn = $checkInInput.val();
			var checkOut = $checkOutInput.val();

			if (checkIn && checkOut) {
				var startDate = new Date(checkIn);
				var endDate = new Date(checkOut);
				var nights = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));

				if (nights > 0) {
					var nightText = nights === 1 ? wpBnbAdmin.i18n.night : wpBnbAdmin.i18n.nights;
					$nightsDisplay.text(nights + ' ' + nightText);
				} else {
					$nightsDisplay.text(wpBnbAdmin.i18n.error || 'Invalid date range');
					$nightsDisplay.css('color', '#d63638');
				}
			} else {
				$nightsDisplay.text(wpBnbAdmin.i18n.selectRoomAndDates);
				$nightsDisplay.css('color', '');
			}
		}

		/**
		 * Check availability via AJAX.
		 */
		function checkAvailability() {
			var roomId = $roomSelect.val();
			var checkIn = $checkInInput.val();
			var checkOut = $checkOutInput.val();

			if (!roomId || !checkIn || !checkOut) {
				$availabilityDisplay
					.text(wpBnbAdmin.i18n.selectRoomAndDates)
					.removeClass('bnb-available bnb-not-available')
					.addClass('bnb-checking');
				return;
			}

			// Validate dates.
			var startDate = new Date(checkIn);
			var endDate = new Date(checkOut);
			if (endDate <= startDate) {
				$availabilityDisplay
					.text(wpBnbAdmin.i18n.error || 'Check-out must be after check-in')
					.removeClass('bnb-available bnb-checking')
					.addClass('bnb-not-available');
				return;
			}

			// Show checking status.
			$availabilityDisplay
				.text(wpBnbAdmin.i18n.checking)
				.removeClass('bnb-available bnb-not-available')
				.addClass('bnb-checking');

			// Make AJAX request.
			$.ajax({
				url: wpBnbAdmin.ajaxUrl,
				type: 'POST',
				data: {
					action: 'wp_bnb_check_availability',
					nonce: wpBnbAdmin.nonce,
					room_id: roomId,
					check_in: checkIn,
					check_out: checkOut,
					exclude_booking: bookingId
				},
				success: function(response) {
					if (response.success) {
						var data = response.data;

						if (data.available) {
							$availabilityDisplay
								.html('<span class="dashicons dashicons-yes-alt"></span> ' + wpBnbAdmin.i18n.available)
								.removeClass('bnb-not-available bnb-checking')
								.addClass('bnb-available');

							// Update price display.
							if (data.price_formatted) {
								$priceDisplay.html('<strong>' + data.price_formatted + '</strong>');
								$calculatedPriceInput.val(data.price);

								if (data.breakdown) {
									$priceBreakdownInput.val(JSON.stringify(data.breakdown));
									updateBreakdownDisplay(data.breakdown);
								}
							}
						} else {
							var conflictText = wpBnbAdmin.i18n.notAvailable;
							if (data.conflicts && data.conflicts.length > 0) {
								conflictText += ' (' + data.conflicts[0].reference + ')';
							}
							$availabilityDisplay
								.html('<span class="dashicons dashicons-dismiss"></span> ' + conflictText)
								.removeClass('bnb-available bnb-checking')
								.addClass('bnb-not-available');
						}

						// Update nights display with response data.
						if (data.nights) {
							var nightText = data.nights === 1 ? wpBnbAdmin.i18n.night : wpBnbAdmin.i18n.nights;
							$nightsDisplay.text(data.nights + ' ' + nightText);
						}
					} else {
						$availabilityDisplay
							.text(response.data.message || wpBnbAdmin.i18n.error)
							.removeClass('bnb-available bnb-checking')
							.addClass('bnb-not-available');
					}
				},
				error: function() {
					$availabilityDisplay
						.text(wpBnbAdmin.i18n.error)
						.removeClass('bnb-available bnb-checking')
						.addClass('bnb-not-available');
				}
			});
		}

		/**
		 * Update breakdown display with formatted data.
		 *
		 * @param {Object} breakdown Price breakdown data.
		 */
		function updateBreakdownDisplay(breakdown) {
			if (!$breakdownDisplay.length) {
				return;
			}

			var html = '<ul class="bnb-breakdown-list">';

			if (breakdown.tier) {
				html += '<li><strong>Pricing Tier:</strong> ' + breakdown.tier.replace('_', ' ') + '</li>';
			}

			if (breakdown.nights && Array.isArray(breakdown.nights)) {
				html += '<li><strong>Nights:</strong> ' + breakdown.nights.length + '</li>';
				if (breakdown.nightly_rate) {
					html += '<li><strong>Nightly Rate:</strong> ' + formatPrice(breakdown.nightly_rate) + '</li>';
				}
			} else if (breakdown.weeks) {
				html += '<li><strong>Weeks:</strong> ' + breakdown.weeks + '</li>';
				if (breakdown.weekly_rate) {
					html += '<li><strong>Weekly Rate:</strong> ' + formatPrice(breakdown.weekly_rate) + '</li>';
				}
			} else if (breakdown.months) {
				html += '<li><strong>Months:</strong> ' + breakdown.months + '</li>';
				if (breakdown.monthly_rate) {
					html += '<li><strong>Monthly Rate:</strong> ' + formatPrice(breakdown.monthly_rate) + '</li>';
				}
			}

			if (breakdown.total) {
				html += '<li><strong>Total:</strong> ' + formatPrice(breakdown.total) + '</li>';
			}

			html += '</ul>';

			$breakdownDisplay.html(html);
		}

		/**
		 * Format price for display.
		 *
		 * @param {number} price Price value.
		 * @return {string} Formatted price.
		 */
		function formatPrice(price) {
			// Simple formatting - server-side Calculator::formatPrice is more complete.
			return parseFloat(price).toFixed(2);
		}

		/**
		 * Debounced availability check.
		 */
		function debouncedAvailabilityCheck() {
			updateNightsDisplay();

			// Clear existing timer.
			if (availabilityTimer) {
				clearTimeout(availabilityTimer);
			}

			// Set new timer to check availability after 500ms.
			availabilityTimer = setTimeout(checkAvailability, 500);
		}

		// Bind change events to trigger availability check.
		$roomSelect.on('change', debouncedAvailabilityCheck);
		$checkInInput.on('change', debouncedAvailabilityCheck);
		$checkOutInput.on('change', debouncedAvailabilityCheck);

		// Recalculate price button.
		if ($recalculateBtn.length) {
			$recalculateBtn.on('click', function(e) {
				e.preventDefault();
				checkAvailability();
			});
		}

		// Status preview update.
		if ($statusSelect.length && $statusPreview.length) {
			$statusSelect.on('change', function() {
				var $selected = $(this).find('option:selected');
				var color = $selected.data('color') || '#ccc';
				var text = $selected.text();

				$statusPreview
					.css('background-color', color)
					.text(text);
			});
		}

		// Set min date for check-in to today.
		var today = new Date().toISOString().split('T')[0];
		$checkInInput.attr('min', today);

		// Update check-out min date when check-in changes.
		$checkInInput.on('change', function() {
			var checkIn = $(this).val();
			if (checkIn) {
				var nextDay = new Date(checkIn);
				nextDay.setDate(nextDay.getDate() + 1);
				var minCheckOut = nextDay.toISOString().split('T')[0];
				$checkOutInput.attr('min', minCheckOut);

				// If check-out is before new min, update it.
				if ($checkOutInput.val() && $checkOutInput.val() <= checkIn) {
					$checkOutInput.val(minCheckOut);
				}
			}
		});
	}

	/**
	 * Initialize calendar page functionality.
	 */
	function initCalendarPage() {
		var $calendar = $('.bnb-calendar-grid');

		if (!$calendar.length) {
			return;
		}

		// Add hover effect for booking cells.
		$calendar.on('mouseenter', '.bnb-calendar-day.booked', function() {
			var bookingId = $(this).data('booking-id');
			if (bookingId) {
				$calendar.find('.bnb-calendar-day[data-booking-id="' + bookingId + '"]')
					.addClass('booking-hover');
			}
		}).on('mouseleave', '.bnb-calendar-day.booked', function() {
			$calendar.find('.bnb-calendar-day.booking-hover')
				.removeClass('booking-hover');
		});

		// Click to edit booking.
		$calendar.on('click', '.bnb-calendar-day.booked', function() {
			var bookingId = $(this).data('booking-id');
			if (bookingId) {
				window.location.href = wpBnbAdmin.ajaxUrl.replace('admin-ajax.php', 'post.php?post=' + bookingId + '&action=edit');
			}
		});
	}

	/**
	 * Initialize guest search functionality for booking form.
	 */
	function initGuestSearch() {
		var $searchInput = $('#bnb_booking_guest_search');
		var $searchResults = $('#bnb-guest-search-results');
		var $guestIdInput = $('#bnb_booking_guest_id');
		var $linkedGuestInfo = $('#bnb-linked-guest-info');
		var $searchContainer = $('#bnb-guest-search-container');
		var $fieldsContainer = $('#bnb-guest-fields-container');
		var $unlinkBtn = $('#bnb-unlink-guest');
		var $guestNameInput = $('#bnb_booking_guest_name');
		var $guestEmailInput = $('#bnb_booking_guest_email');
		var $guestPhoneInput = $('#bnb_booking_guest_phone');

		// Exit if not on booking form.
		if (!$searchInput.length) {
			return;
		}

		var searchTimer = null;

		/**
		 * Perform guest search via AJAX.
		 */
		function searchGuests() {
			var query = $searchInput.val().trim();

			if (query.length < 2) {
				$searchResults.hide().empty();
				return;
			}

			$searchResults.html('<div class="bnb-search-loading">' + wpBnbAdmin.i18n.searchingGuests + '</div>').show();

			$.ajax({
				url: wpBnbAdmin.ajaxUrl,
				type: 'POST',
				data: {
					action: 'wp_bnb_search_guest',
					nonce: wpBnbAdmin.nonce,
					search: query
				},
				success: function(response) {
					if (response.success && response.data.guests.length > 0) {
						var html = '<div class="bnb-guest-search-list">';

						$.each(response.data.guests, function(i, guest) {
							var isBlocked = guest.status === 'blocked';
							var statusClass = isBlocked ? 'bnb-guest-blocked' : '';
							var statusLabel = isBlocked ? ' <span class="bnb-blocked-label">' + wpBnbAdmin.i18n.guestBlocked + '</span>' : '';

							html += '<div class="bnb-guest-search-item ' + statusClass + '" data-guest=\'' + JSON.stringify(guest) + '\'>';
							html += '<div class="bnb-guest-item-info">';
							html += '<strong>' + escapeHtml(guest.name) + '</strong>' + statusLabel + '<br>';
							html += '<small>' + escapeHtml(guest.email || '') + '</small>';
							if (guest.phone) {
								html += ' <small>(' + escapeHtml(guest.phone) + ')</small>';
							}
							html += '</div>';
							if (!isBlocked) {
								html += '<button type="button" class="button button-small bnb-select-guest">' + wpBnbAdmin.i18n.selectGuest + '</button>';
							}
							html += '</div>';
						});

						html += '</div>';
						$searchResults.html(html);
					} else {
						$searchResults.html('<div class="bnb-no-guests">' + wpBnbAdmin.i18n.noGuestsFound + '</div>');
					}
				},
				error: function() {
					$searchResults.html('<div class="bnb-search-error">' + wpBnbAdmin.i18n.error + '</div>');
				}
			});
		}

		/**
		 * Escape HTML entities.
		 *
		 * @param {string} text Text to escape.
		 * @return {string} Escaped text.
		 */
		function escapeHtml(text) {
			if (!text) return '';
			var div = document.createElement('div');
			div.textContent = text;
			return div.innerHTML;
		}

		/**
		 * Select a guest from search results.
		 *
		 * @param {Object} guest Guest data.
		 */
		function selectGuest(guest) {
			// Set hidden guest ID.
			$guestIdInput.val(guest.id);

			// Populate guest fields (for display/fallback).
			$guestNameInput.val(guest.name).prop('readonly', true);
			$guestEmailInput.val(guest.email).prop('readonly', true);
			$guestPhoneInput.val(guest.phone).prop('readonly', true);

			// Update linked guest display.
			var infoHtml = '<p>';
			infoHtml += '<span class="dashicons dashicons-admin-users"></span> ';
			infoHtml += '<strong>' + escapeHtml(guest.name) + '</strong> ';
			infoHtml += '<a href="' + wpBnbAdmin.ajaxUrl.replace('admin-ajax.php', 'post.php?post=' + guest.id + '&action=edit') + '" target="_blank" class="button button-small">View Guest Profile</a> ';
			infoHtml += '<button type="button" id="bnb-unlink-guest" class="button button-small button-link-delete">Unlink</button>';
			infoHtml += '</p>';
			if (guest.email) {
				infoHtml += '<p><small>' + escapeHtml(guest.email) + '</small></p>';
			}

			$linkedGuestInfo.html(infoHtml).show();
			$searchContainer.hide();
			$fieldsContainer.hide();
			$searchResults.hide().empty();
			$searchInput.val('');

			// Re-bind unlink button.
			bindUnlinkButton();
		}

		/**
		 * Unlink guest from booking.
		 */
		function unlinkGuest() {
			$guestIdInput.val('');
			$guestNameInput.val('').prop('readonly', false);
			$guestEmailInput.val('').prop('readonly', false);
			$guestPhoneInput.val('').prop('readonly', false);

			$linkedGuestInfo.hide();
			$searchContainer.show();
			$fieldsContainer.show();
		}

		/**
		 * Bind unlink button event.
		 */
		function bindUnlinkButton() {
			$('#bnb-unlink-guest').off('click').on('click', function(e) {
				e.preventDefault();
				unlinkGuest();
			});
		}

		// Search input with debounce.
		$searchInput.on('input', function() {
			if (searchTimer) {
				clearTimeout(searchTimer);
			}
			searchTimer = setTimeout(searchGuests, 300);
		});

		// Select guest from results.
		$searchResults.on('click', '.bnb-select-guest', function(e) {
			e.preventDefault();
			var guest = $(this).closest('.bnb-guest-search-item').data('guest');
			if (guest) {
				selectGuest(guest);
			}
		});

		// Initial unlink button binding.
		bindUnlinkButton();

		// Close search results when clicking outside.
		$(document).on('click', function(e) {
			if (!$(e.target).closest('#bnb_booking_guest_search, #bnb-guest-search-results').length) {
				$searchResults.hide();
			}
		});
	}

	// Initialize on document ready.
	$(document).ready(function() {
		initLicenseManagement();
		initRoomGallery();
		initPricingSettings();
		initSeasonForm();
		initPricingMetaBox();
		initBookingForm();
		initCalendarPage();
		initGuestSearch();
	});

})(jQuery);