<?php
/**
 * Main FAQ Manager admin page template
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}
?>

<div class="wrap pc-faq-manager-admin">
    <h1 class="wp-heading-inline">
        <?php esc_html_e('FAQ Manager', PC_FAQ_MANAGER_SLUG); ?>
    </h1>
    
    <a href="<?php echo admin_url('admin.php?page=pc-faq-manager-add'); ?>" class="page-title-action">
        <?php esc_html_e('Add New FAQ', PC_FAQ_MANAGER_SLUG); ?>
    </a>
    
    <hr class="wp-header-end">
    
    <?php if ($faq_count > 0): ?>
        <div class="pc-faq-manager-header">
            <div class="pc-faq-manager-stats">
                <div class="stat-card">
                    <div class="stat-number"><?php echo esc_html($faq_count); ?></div>
                    <div class="stat-label"><?php esc_html_e('Total FAQs', PC_FAQ_MANAGER_SLUG); ?></div>
                </div>
            </div>
            
            <div class="pc-faq-manager-instructions">
                <h3><?php esc_html_e('How to use', PC_FAQ_MANAGER_SLUG); ?></h3>
                <ul>
                    <li><?php esc_html_e('Drag and drop FAQs to reorder them', PC_FAQ_MANAGER_SLUG); ?></li>
                    <li><?php esc_html_e('Click on any FAQ to edit it inline', PC_FAQ_MANAGER_SLUG); ?></li>
                    <li><?php esc_html_e('Use the delete button to remove an FAQ', PC_FAQ_MANAGER_SLUG); ?></li>
                    <li><?php esc_html_e('The FAQ page will automatically update on your website', PC_FAQ_MANAGER_SLUG); ?></li>
                </ul>
            </div>
        </div>
        
        <div class="pc-faq-manager-list">
            <div class="pc-faq-manager-list-header">
                <div class="sort-handle"></div>
                <div class="faq-question"><?php esc_html_e('Question', PC_FAQ_MANAGER_SLUG); ?></div>
                <div class="faq-answer"><?php esc_html_e('Answer', PC_FAQ_MANAGER_SLUG); ?></div>
                <div class="faq-actions"><?php esc_html_e('Actions', PC_FAQ_MANAGER_SLUG); ?></div>
            </div>
            
            <div class="pc-faq-manager-items" id="pc-faq-sortable">
                <?php foreach ($faqs as $faq): ?>
                    <div class="pc-faq-item" data-faq-id="<?php echo esc_attr($faq->ID); ?>">
                        <div class="sort-handle">
                            <span class="dashicons dashicons-menu"></span>
                        </div>
                        <div class="faq-question">
                            <div class="faq-content">
                                <h4><?php echo esc_html($faq->post_title); ?></h4>
                                <div class="faq-excerpt">
                                    <?php echo wp_trim_words($faq->post_content, 15, '...'); ?>
                                </div>
                            </div>
                        </div>
                        <div class="faq-answer">
                            <div class="faq-content">
                                <?php echo wp_trim_words($faq->post_content, 20, '...'); ?>
                            </div>
                        </div>
                        <div class="faq-actions">
                            <button type="button" class="button button-secondary pc-faq-edit" data-faq-id="<?php echo esc_attr($faq->ID); ?>">
                                <span class="dashicons dashicons-edit"></span>
                                <?php esc_html_e('Edit', PC_FAQ_MANAGER_SLUG); ?>
                            </button>
                            <button type="button" class="button pc-faq-delete" data-faq-id="<?php echo esc_attr($faq->ID); ?>">
                                <span class="dashicons dashicons-trash"></span>
                                <?php esc_html_e('Delete', PC_FAQ_MANAGER_SLUG); ?>
                            </button>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <div class="pc-faq-manager-footer">
            <button type="button" class="button button-primary" id="pc-faq-save-order">
                <span class="dashicons dashicons-yes"></span>
                <?php esc_html_e('Save Order', PC_FAQ_MANAGER_SLUG); ?>
            </button>
            <span class="pc-faq-save-status"></span>
        </div>
        
    <?php else: ?>
        <div class="pc-faq-manager-empty">
            <div class="pc-faq-manager-empty-icon">
                <span class="dashicons dashicons-editor-help"></span>
            </div>
            <h2><?php esc_html_e('No FAQs yet', PC_FAQ_MANAGER_SLUG); ?></h2>
            <p><?php esc_html_e('Create your first FAQ to get started with the FAQ Manager.', PC_FAQ_MANAGER_SLUG); ?></p>
            <p>
                <a href="<?php echo admin_url('admin.php?page=pc-faq-manager-add'); ?>" class="button button-primary">
                    <?php esc_html_e('Create Your First FAQ', PC_FAQ_MANAGER_SLUG); ?>
                </a>
            </p>
        </div>
    <?php endif; ?>
</div>

<!-- Edit Modal -->
<div id="pc-faq-edit-modal" class="pc-faq-modal" style="display: none;">
    <div class="pc-faq-modal-content">
        <div class="pc-faq-modal-header">
            <h2><?php esc_html_e('Edit FAQ', PC_FAQ_MANAGER_SLUG); ?></h2>
            <button type="button" class="pc-faq-modal-close">&times;</button>
        </div>
        <div class="pc-faq-modal-body">
            <div class="form-field">
                <label for="pc-faq-edit-title"><?php esc_html_e('Question', PC_FAQ_MANAGER_SLUG); ?></label>
                <input type="text" id="pc-faq-edit-title" class="widefat" placeholder="<?php esc_attr_e('Enter your question here...', PC_FAQ_MANAGER_SLUG); ?>">
            </div>
            <div class="form-field">
                <label for="pc-faq-edit-content"><?php esc_html_e('Answer', PC_FAQ_MANAGER_SLUG); ?></label>
                <?php
                wp_editor('', 'pc-faq-edit-content', array(
                    'textarea_name' => 'content',
                    'textarea_rows' => 10,
                    'media_buttons' => false,
                    'teeny' => true,
                ));
                ?>
            </div>
        </div>
        <div class="pc-faq-modal-footer">
            <button type="button" class="button button-secondary pc-faq-modal-cancel"><?php esc_html_e('Cancel', PC_FAQ_MANAGER_SLUG); ?></button>
            <button type="button" class="button button-primary pc-faq-modal-save"><?php esc_html_e('Update FAQ', PC_FAQ_MANAGER_SLUG); ?></button>
        </div>
    </div>
</div>

<div class="pc-faq-modal-backdrop" style="display: none;"></div>