/** * 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 = $(''); $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 = $(''); $(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(' ' + wpBnbAdmin.i18n.available) .removeClass('bnb-not-available bnb-checking') .addClass('bnb-available'); // Update price display. if (data.price_formatted) { $priceDisplay.html('' + data.price_formatted + ''); $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(' ' + 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 = ''; $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 on document ready. $(document).ready(function() { initLicenseManagement(); initRoomGallery(); initPricingSettings(); initSeasonForm(); initPricingMetaBox(); initBookingForm(); initCalendarPage(); }); })(jQuery);