<?php

/**
 * Provide a knowledge base view for the plugin
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @link       https://level5.se
 * @since      1.0.0
 *
 * @package    Arena_Scheduler
 * @subpackage Arena_Scheduler/admin/partials
 */

defined('ABSPATH') || exit;
?>

<section class="wrap manage-arena container-fluid pt-3">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 mb-3">
            <div class="d-flex justify-content-between align-items-center bg-red mb-3 px-3">
                <h3 class="wp-heading-inline text-white">Knowledge Base</h3>
            </div>
            <div class="px-3 py-2 bg-white">

                <!-- Getting Started -->
                <h5 class="mt-3 mb-3 fw-bold">Getting Started</h5>
                <div class="accordion" id="kbGettingStarted">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-gs-1">
                                How do I add an arena?
                            </button>
                        </h2>
                        <div id="kb-gs-1" class="accordion-collapse collapse" data-bs-parent="#kbGettingStarted">
                            <div class="accordion-body">
                                <ol>
                                    <li>Go to <strong>Arena Scheduler → Arena</strong> in the WordPress admin menu.</li>
                                    <li>Click <strong>Add</strong> in the top right corner.</li>
                                    <li>Fill in the arena name, start/end time and time interval.</li>
                                    <li>Click <strong>Save</strong>.</li>
                                </ol>
                                <p class="text-muted mb-0">Free version supports 1 arena. Upgrade to Pro for unlimited arenas.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-gs-2">
                                How do I create activity categories?
                            </button>
                        </h2>
                        <div id="kb-gs-2" class="accordion-collapse collapse" data-bs-parent="#kbGettingStarted">
                            <div class="accordion-body">
                                <ol>
                                    <li>Go to <strong>Arena Scheduler → Arena Category</strong>.</li>
                                    <li>Click <strong>Add</strong>.</li>
                                    <li>Enter a category name and choose a color.</li>
                                    <li>Click <strong>Save</strong>.</li>
                                </ol>
                                <p class="text-muted mb-0">Free version supports 2 categories with fixed colors. Pro allows unlimited categories with custom color picker.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-gs-3">
                                How do I display the schedule on my website?
                            </button>
                        </h2>
                        <div id="kb-gs-3" class="accordion-collapse collapse" data-bs-parent="#kbGettingStarted">
                            <div class="accordion-body">
                                <p>Add the shortcode <code>[[arena_scheduler_view_calendar]]</code> to any page or post. The schedule will display automatically with tabs for each active arena.</p>
                                <p class="mb-0">Works with the block editor (Gutenberg), Classic Editor, and page builders like Elementor (use a Shortcode widget).</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Scheduling -->
                <h5 class="mt-4 mb-3 fw-bold">Scheduling</h5>
                <div class="accordion" id="kbScheduling">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-sc-1">
                                How do I book a time slot?
                            </button>
                        </h2>
                        <div id="kb-sc-1" class="accordion-collapse collapse" data-bs-parent="#kbScheduling">
                            <div class="accordion-body">
                                <ol>
                                    <li>Navigate to the schedule on the front-end of your website (you must be logged in with sufficient permissions).</li>
                                    <li>Click on an empty time slot in the weekly view.</li>
                                    <li>Select the activity category from the dropdown.</li>
                                    <li>Choose the duration and click <strong>Save</strong>.</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-sc-2">
                                How do I copy a week's schedule?
                            </button>
                        </h2>
                        <div id="kb-sc-2" class="accordion-collapse collapse" data-bs-parent="#kbScheduling">
                            <div class="accordion-body">
                                <ol>
                                    <li>Open the schedule and navigate to the week you want to copy.</li>
                                    <li>Click the <strong>KOPIERA</strong> (Copy) button.</li>
                                    <li>Select the target week from the dropdown.</li>
                                    <li>Click <strong>Save</strong>. All time slots from the current week will be copied to the target week.</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-sc-3">
                                Can I add comments to time slots?
                            </button>
                        </h2>
                        <div id="kb-sc-3" class="accordion-collapse collapse" data-bs-parent="#kbScheduling">
                            <div class="accordion-body">
                                <p>Yes. When editing a booked time slot, click the comment icon to add or update a comment (max 100 characters). Comments are visible to visitors via the info icon on the front-end schedule.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Free vs Pro -->
                <h5 class="mt-4 mb-3 fw-bold">Free vs Pro</h5>
                <div class="accordion" id="kbPro">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-pro-1">
                                What are the differences between Free and Pro?
                            </button>
                        </h2>
                        <div id="kb-pro-1" class="accordion-collapse collapse" data-bs-parent="#kbPro">
                            <div class="accordion-body">
                                <table class="table table-bordered mb-0">
                                    <thead>
                                        <tr>
                                            <th>Feature</th>
                                            <th class="text-center">Free</th>
                                            <th class="text-center">Pro</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Arenas</td>
                                            <td class="text-center">1</td>
                                            <td class="text-center">Unlimited</td>
                                        </tr>
                                        <tr>
                                            <td>Activity categories</td>
                                            <td class="text-center">2</td>
                                            <td class="text-center">Unlimited</td>
                                        </tr>
                                        <tr>
                                            <td>Category colors</td>
                                            <td class="text-center">Fixed</td>
                                            <td class="text-center">Custom color picker</td>
                                        </tr>
                                        <tr>
                                            <td>Weekly schedule & copy</td>
                                            <td class="text-center">✓</td>
                                            <td class="text-center">✓</td>
                                        </tr>
                                        <tr>
                                            <td>Time slot comments</td>
                                            <td class="text-center">✓</td>
                                            <td class="text-center">✓</td>
                                        </tr>
                                        <tr>
                                            <td>Priority support</td>
                                            <td class="text-center">—</td>
                                            <td class="text-center">✓</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Troubleshooting -->
                <h5 class="mt-4 mb-3 fw-bold">Troubleshooting</h5>
                <div class="accordion" id="kbTroubleshooting">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-ts-1">
                                The schedule is not showing on my page
                            </button>
                        </h2>
                        <div id="kb-ts-1" class="accordion-collapse collapse" data-bs-parent="#kbTroubleshooting">
                            <div class="accordion-body">
                                <ul class="mb-0">
                                    <li>Make sure you have added the shortcode <code>[arena_scheduler_view_calendar]</code> to the page.</li>
                                    <li>Verify that at least one arena exists and is set to <strong>Active</strong>.</li>
                                    <li>Check that at least one activity category exists.</li>
                                    <li>Clear any page/site cache and reload.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-ts-2">
                                I can't book time slots (nothing happens when I click)
                            </button>
                        </h2>
                        <div id="kb-ts-2" class="accordion-collapse collapse" data-bs-parent="#kbTroubleshooting">
                            <div class="accordion-body">
                                <ul class="mb-0">
                                    <li>You must be <strong>logged in</strong> to book time slots.</li>
                                    <li>Your WordPress user role must have the <strong>edit_others_posts</strong> capability (Editor or Administrator).</li>
                                    <li>If you see a "forbidden" error, ask your site administrator to check your user permissions.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kb-ts-3">
                                The plugin affects my theme's styling
                            </button>
                        </h2>
                        <div id="kb-ts-3" class="accordion-collapse collapse" data-bs-parent="#kbTroubleshooting">
                            <div class="accordion-body">
                                <p class="mb-0">Arena Scheduler's front-end CSS is scoped to the <code>#arena-scheduler-root</code> container and should not affect other elements. If you experience style conflicts, try clearing your cache. If the issue persists, please <a href="<?php echo esc_url(admin_url('admin.php?page=arena-schedule-contact')); ?>">contact us</a>.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 mb-2"></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 mb-3">
            <!-- Support card with links to knowledge base and ticket system -->
            <?php echo wp_kses_post($this->arena_scheduler_support_card_html()); ?>
        </div>
    </div>
</section>
