<?php
// If this file is called directly, abort.
if (!defined('WPINC')) {
    die;
}

// Display typing text for this section
if (function_exists('aysa_display_typing_text_section')) {
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template-local variable in an immediately included admin partial; it is not a public global symbol or persisted contract.
    $objectives_text = "What are your primary SEO goals? Whether it's boosting organic traffic, improving keyword rankings, or increasing conversions, defining your objectives helps Aysa focus on what matters most to your success.";
    echo wp_kses_post(aysa_display_typing_text_section($objectives_text, 'objectives'));
}
?>

<div class="aysa-wizard-section">
    <h2>Select your SEO Objectives</h2>
    <p class="aysa-text-muted">Based on the goals of your website or business, you can select the objectives that best match your needs. These objectives will guide the SEO strategy and suggest the most relevant actions and optimizations. Feel free to choose multiple objectives to get tailored recommendations for each one.</p>

    <form id="aysa-objectives-form" method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
        <input type="hidden" name="action" value="aysa_save_wizard_data">
        <input type="hidden" name="step" value="objectives">

        <!-- Traffic & Awareness -->
        <div class="aysa-card">
            <div class="aysa-card-header">
                <span class="dashicons dashicons-chart-line"></span>
                <h3>Traffic & Awareness</h3>
            </div>
            <div class="aysa-card-content">
                <div class="aysa-objective-item">
                    <div class="aysa-checkbox-group">
                        <input type="checkbox" id="visitors" name="objectives[]" value="visitors" class="aysa-checkbox">
                        <label for="visitors">Attract more visitors to our website</label>
                    </div>
                    <p class="aysa-text-muted">Increase organic visibility through SEO optimization.</p>
                </div>

                <div class="aysa-objective-item">
                    <div class="aysa-checkbox-group">
                        <input type="checkbox" id="awareness" name="objectives[]" value="awareness" class="aysa-checkbox">
                        <label for="awareness">Increase brand awareness</label>
                    </div>
                    <p class="aysa-text-muted">Implement strategies to improve brand recognition.</p>
                </div>
            </div>
        </div>

        <!-- Sales & Leads -->
        <div class="aysa-card">
            <div class="aysa-card-header">
                <span class="dashicons dashicons-chart-bar"></span>
                <h3>Sales & Leads</h3>
            </div>
            <div class="aysa-card-content">
                <div class="aysa-objective-item">
                    <div class="aysa-checkbox-group">
                        <input type="checkbox" id="leads" name="objectives[]" value="leads" class="aysa-checkbox">
                        <label for="leads">Generate leads</label>
                    </div>
                    <p class="aysa-text-muted">Optimize content and landing pages to attract potential customers.</p>
                </div>

                <div class="aysa-objective-item">
                    <div class="aysa-checkbox-group">
                        <input type="checkbox" id="sales" name="objectives[]" value="sales" class="aysa-checkbox">
                        <label for="sales">Generate sales revenue</label>
                    </div>
                    <p class="aysa-text-muted">Drive quality traffic with the goal of increasing sales.</p>
                </div>
            </div>
        </div>

        <!-- Engagement & Optimization -->
        <?php /*
        <div class="aysa-card">
            <div class="aysa-card-header">
                <span class="dashicons dashicons-groups"></span>
                <h3>Engagement & Optimization</h3>
            </div>
            <div class="aysa-card-content">
                <div class="aysa-objective-item">
                    <div class="aysa-checkbox-group">
                        <input type="checkbox" id="positioning" name="objectives[]" value="positioning" class="aysa-checkbox" checked>
                        <label for="positioning">Promote new products / Improve product positioning</label>
                    </div>
                    <p class="aysa-text-muted">Boost the visibility of new products or improve positioning in the market.</p>
                </div>

                <div class="aysa-objective-item">
                    <div class="aysa-checkbox-group">
                        <input type="checkbox" id="conversion" name="objectives[]" value="conversion" class="aysa-checkbox">
                        <label for="conversion">CTR / Bounce Rate / Conversion</label>
                    </div>
                    <p class="aysa-text-muted">Optimize for better user engagement, higher click-through rates, and improved conversion rates.</p>
                </div>
            </div>
        </div>
        */ ?>

        <!-- Custom Objectives -->
        <div class="aysa-card">
            <div class="aysa-card-header">
                <span class="dashicons dashicons-edit"></span>
                <h3>Custom Objectives</h3>
            </div>
            <div class="aysa-card-content">
                <div class="aysa-form-group">
                    <label for="custom-objectives">Additional Objectives (Optional)</label>
                    <textarea id="custom-objectives" name="custom_objectives" class="aysa-textarea" rows="3" placeholder="Enter any additional SEO objectives specific to your business..."></textarea>
                    <p class="aysa-text-muted">Add any specific objectives not covered above that are important for your business.</p>
                </div>
            </div>
        </div>
    </form>

    <!-- Remove local navigation buttons -->
</div>

<style>
/* Enhanced objectives page styling */
.aysa-objectives-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px;
    font-family: 'Roboto', sans-serif;
}

.aysa-objectives-header {
    margin-bottom: 30px;
}

.aysa-objectives-header h2 {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.aysa-objectives-header p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.aysa-objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.aysa-objective-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 24px;
    transition: all 0.3s ease;
}

.aysa-objective-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.aysa-objective-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.aysa-objective-card h3 .dashicons {
    color: #0066ff;
    font-size: 20px;
}

.aysa-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aysa-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aysa-radio-option:hover {
    border-color: #0066ff;
    background: #f8f9ff;
}

.aysa-radio-option.selected {
    border-color: #0066ff;
    background: #e8f0fe;
}

.aysa-radio-option input[type="radio"] {
    margin-top: 3px;
}

.aysa-radio-option-content {
    flex: 1;
}

.aysa-radio-option-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.aysa-radio-option-description {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.aysa-timeline-section,
.aysa-budget-section,
.aysa-metrics-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
}

.aysa-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.aysa-timeline-options,
.aysa-budget-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.aysa-timeline-option,
.aysa-budget-option {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aysa-timeline-option:hover,
.aysa-budget-option:hover {
    border-color: #0066ff;
    background: #f8f9ff;
}

.aysa-timeline-option.selected,
.aysa-budget-option.selected {
    border-color: #0066ff;
    background: #e8f0fe;
}

.aysa-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.aysa-metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.aysa-metric-item:hover {
    border-color: #0066ff;
    background: #f8f9ff;
}

.aysa-metric-item input[type="checkbox"] {
    margin: 0;
}

.aysa-metric-label {
    font-size: 14px;
    color: #1a1a1a;
}

@media (max-width: 768px) {
    .aysa-objectives-section {
        padding: 20px;
    }
    
    .aysa-objectives-grid {
        grid-template-columns: 1fr;
    }
    
    .aysa-timeline-options,
    .aysa-budget-options {
        grid-template-columns: 1fr;
    }
}

/* Styling for form elements */
.aysa-form-group {
    margin-bottom: 16px;
}

.aysa-form-group label {
    display: block;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.aysa-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.aysa-textarea:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
    outline: none;
}

/* Status indicator styles similar to the ones in general.php */
.aysa-status-indicator {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 4px;
    background-color: #e9f5ff;
    color: #0066ff;
    margin-bottom: 16px;
}

.aysa-status-indicator .dashicons {
    margin-right: 6px;
}

.aysa-status-error {
    background-color: #ffebee;
    color: #d32f2f;
}

.aysa-spinning {
    animation: aysa-spin 2s linear infinite;
}

@keyframes aysa-spin {
    to { transform: rotate(360deg); }
}

/* Remove navigation buttons styling since we're using global buttons */
.aysa-wizard-navigation {
    display: none;
}
</style>

<script>
jQuery(document).ready(function($) {
    const setupNonce = '<?php echo esc_attr(wp_create_nonce('aysa_nonce')); ?>';
    const phpProjectId = '<?php echo intval(get_option('aysa_project_id', 0)); ?>';
    let projectId = localStorage.getItem('aysa_project_id') || phpProjectId || '0';
    if (projectId && Number(projectId) > 0) {
        localStorage.setItem('aysa_project_id', projectId);
    }

    $('#aysa-objectives-form').append(
        '<input type="hidden" name="project_id" value="' + String(projectId) + '">' +
        '<input type="hidden" name="nonce" value="' + String(setupNonce) + '">'
    );

    $('<div id="objectives-status" class="aysa-status-indicator"><span class="dashicons dashicons-yes"></span> Ready to save objectives</div>')
        .insertAfter('h2');
    
    // Form submission handling - save locally through WP AJAX
    if (!window.aysaWizardUseGlobalNavigation) {
    $('.next-button, .next, button:contains("Next"), a:contains("Next")').on('click', function(e) {
        e.preventDefault();
        
        // Store the clicked button
        const $button = $(this);
        $button.prop('disabled', true);
        
        // Show loading indicator, preserving original text
        const originalText = $button.html();
        $button.html('<span class="dashicons dashicons-update aysa-spinning"></span> Saving...');
        
        const formData = $('#aysa-objectives-form').serialize();

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'json',
            data: formData + '&action=aysa_save_wizard_data&step=objectives&nonce=' + encodeURIComponent(setupNonce),
            success: function(result) {
                if (!result || !result.success) {
                    const message = result && result.data && result.data.message ? result.data.message : 'Failed to save objectives. Please try again.';
                    alert(message);
                    $button.prop('disabled', false).html(originalText);
                    return;
                }
                $button.html('<span class="dashicons dashicons-yes"></span> Saved!');
                
                // Redirect to next step
                setTimeout(function() {
                    window.location.href = '?page=aysa-setup-seo-profile&step=seo-settings';
                }, 500);
            },
            error: function(xhr, status, error) {
                $button.prop('disabled', false).html(originalText);
                alert("Failed to save objectives. Please try again.");
            }
        });
    });
    
    // Handle previous button - target only the global buttons
    $('.prev-button, .prev, button:contains("Previous"), a:contains("Previous")').on('click', function(e) {
        e.preventDefault();
        window.location.href = '?page=aysa-setup-seo-profile&step=general';
    });
    
    // Last resort - add a direct click handler to the document for capturing clicks on the buttons
    $(document).on('click', 'button, a', function(e) {
        const buttonText = $(this).text().trim().toLowerCase();
        if (buttonText === 'next') {
            $('.next-button, .next, button:contains("Next"), a:contains("Next")').first().trigger('click');
        } else if (buttonText === 'previous') {
            $('.prev-button, .prev, button:contains("Previous"), a:contains("Previous")').first().trigger('click');
        }
    });
    }
});
</script> 
