JezK

Edit File: apo-admin-scripts.js

jQuery(document).ready(function($) {
    var optionIndex = $('.option-row').length;

// Add new option
    $('.add_option').on('click', function() {
        var newOption = `
            <div class="option-row">
                <input type="text" name="option_name[]" placeholder="Option Name">
                <select name="option_type[]">
                    <option value="text">Text</option>
                    <option value="select">Select</option>
                    <option value="radio">Radio</option>
                    <option value="checkbox">Checkbox</option>
                    <option value="date">Date</option>
                </select>
                <input type="checkbox" name="option_required[]" value="1"> Required
                <input type="text" name="option_placeholder[]" placeholder="Placeholder">
                <input type="number" name="option_price_adjustment[]" step="0.01" placeholder="Price Adjustment">
                <button type="button" class="button remove_option">Remove</button>
            </div>
        `;
        $(this).before(newOption);
        optionIndex++;
    });

// Remove option
    $(document).on('click', '.remove_option', function() {
        $(this).closest('.option-row').remove();
    });

// Add new choice for select/radio options
    $(document).on('click', '.add_choice', function() {
        var choiceInput = '<input type="text" name="option_choices[' + optionIndex + '][]" placeholder="Choice">';
        $(this).before(choiceInput);
    });

// Show/hide choices based on option type
    $(document).on('change', 'select[name="option_type[]"]', function() {
        var $optionRow = $(this).closest('.option-row');
        var type = $(this).val();

if (type === 'select' || type === 'radio') {
            if ($optionRow.find('.option-choices').length === 0) {
                $optionRow.append('<div class="option-choices"><input type="text" name="option_choices[' + optionIndex + '][]" placeholder="Choice"><button type="button" class="button add_choice">Add Choice</button></div>');
            }
        } else {
            $optionRow.find('.option-choices').remove();
        }

if (type === 'date') {
            if ($optionRow.find('.date-options').length === 0) {
                // Append the date picker options for disabling dates
                $optionRow.append(`
                    <div class="date-options">
                        <input type="text" name="option_disabled_dates[]" class="datepicker-disabled-dates" placeholder="Disabled Dates (comma-separated)">
                        <label><input type="checkbox" name="option_disable_today[]" value="yes" class="datepicker-disable-today"> Disable Today</label>
                        <label><input type="checkbox" name="option_disable_past_dates[]" value="yes" class="datepicker-disable-past-dates"> Disable Past Dates</label>
                    </div>
                `);

// Initialize datepicker when the input field is clicked
                $optionRow.find('.datepicker-disabled-dates').datepicker({
                    dateFormat: 'yy-mm-dd',
                    beforeShowDay: function(date) {
                        var disablePastDates = $optionRow.find('.datepicker-disable-past-dates').is(':checked');
                        var disableToday = $optionRow.find('.datepicker-disable-today').is(':checked');
                        var disabledDates = $optionRow.find('.datepicker-disabled-dates').val().split(',');

var dayName = $.datepicker.formatDate('DD', date);
                        var isDisabled = ($.inArray(dayName, disabledDates) !== -1);

// Disable today if selected
                        if (disableToday && date.toDateString() === new Date().toDateString()) {
                            return [false, '', 'Today is disabled'];
                        }

// Disable past dates if selected
                        if (disablePastDates && date < new Date()) {
                            return [false, '', 'Past dates are disabled'];
                        }

return [!isDisabled, '', isDisabled ? 'This day is disabled' : ''];
                    }
                });
            }
        } else {
            $optionRow.find('.date-options').remove();
        }
    });

// Make options sortable
    $('.options_group').sortable({
        items: '.option-row',
        handle: 'input[name="option_name[]"]',
        cursor: 'move'
    });
});