<?php
if (!defined('ABSPATH')) {
    exit;
}
$coursetransit_settings = $settings ?? [];
?>

<!-- PAGE HEADER -->
<div class="page-header row no-gutters py-4" style="padding-top: 0 !important; padding-bottom: 0 !important;">
    <div class="col-6">
        <h3 class="page-title">Settings</h3>
    </div>
</div>

<!-- TABS -->
<ul class="nav nav-tabs mb-3 mt-3" id="coursetransitTabs" role="tablist">

    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#tab-general"
            type="button" role="tab">
            General
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button class="nav-link" id="sync-tab" data-bs-toggle="tab" data-bs-target="#tab-sync" type="button" role="tab">
            Synchronization
        </button>
    </li>

    <li class="nav-item" role="presentation">
        <button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#tab-logs" type="button" role="tab">
            Logs
        </button>
    </li>

</ul>

<!-- CARD WITH TABS -->
<div class="card" style="max-width: 100% !important;">

    <!-- CARD BODY = TAB CONTENT -->
    <div class="card-body tab-content">

        <!-- GENERAL -->
        <div class="tab-pane fade show active" id="tab-general" role="tabpanel">
            <div class="row">

                <div class="col-lg-6 col-md-12" style="margin-left: -30px;">

                    <!-- HEADING -->
                    <h5>
                        Moodle Connection
                    </h5>

                    <p class="text-muted" style="font-size:13px;">
                        Enter your Moodle site URL (e.g. https://lms.example.com)
                        and the API token generated by the CourseTransit plugin
                        in your Moodle Application.
                    </p>

                    <div id="coursetransit-settings-result" class="alert d-none mt-3" role="alert">
                    </div>

                    <form id="coursetransit-settings-form">

                        <?php wp_nonce_field('coursetransit_settings_nonce'); ?>

                        <div class="form-group coursetransit-sync-setting-group">

                            <label class="coursetransit-sync-label">
                                Moodle Site URL
                            </label>

                            <input type="url" class="form-control coursetransit-sync-control"
                                name="settings[moodle_url]" required
                                value="<?php echo esc_attr($coursetransit_settings['moodle_url'] ?? ''); ?>">

                        </div>

                        <div class="form-group coursetransit-sync-setting-group">

                            <label class="coursetransit-sync-label">
                                Web Service Token
                            </label>

                            <input type="text" class="form-control coursetransit-sync-control"
                                name="settings[moodle_token]" required
                                value="<?php echo esc_attr($coursetransit_settings['moodle_token'] ?? ''); ?>">

                        </div>

                        <div class="d-flex flex-wrap gap-2 mt-4">

                            <button type="submit" class="button button-primary">

                                Save Settings

                            </button>

                            <button id="coursetransit-test-connection" class="button button-secondary">

                                Test Connection

                            </button>

                        </div>

                    </form>

                </div>

            </div>
        </div>

        <!-- SYNCHRONIZATION -->
        <div class="tab-pane fade" id="tab-sync" role="tabpanel">

            <div class="row">
                <div class="col-lg-12 coursetransit-sync-settings-wrapper" style="margin-left: -30px;">

                    <h5>
                        Synchronization Settings
                    </h5>

                    <div class="row g-4">

                        <!-- ENROLLMENT -->
                        <div class="col-lg-6 col-md-12">



                            <label style="font-size:12px;color:#6b7280;">
                                Default Enrollment Period
                            </label>

                            <select id="cts-default-enrollment-period" class="form-control coursetransit-sync-control">

                                <option value="0">Lifetime Access</option>
                                <option value="30">30 Days</option>
                                <option value="60">60 Days</option>
                                <option value="90">90 Days</option>
                                <option value="180">180 Days</option>
                                <option value="365">365 Days</option>

                            </select>

                        </div>

                        <!-- PRODUCT STATUS -->
                        <div class="col-lg-6 col-md-12">

                            <label style="font-size:12px;color:#6b7280;">
                                Product Status
                            </label>

                            <select id="cts-product-status" class="form-control coursetransit-sync-control">

                                <option value="publish">
                                    Publish Immediately
                                </option>

                                <option value="draft">
                                    Save as Draft
                                </option>

                                <option value="private">
                                    Private
                                </option>

                            </select>

                        </div>

                        <!-- PRODUCT CONTENT SYNC -->
                        <div class="col-lg-6 col-md-12">

                            <label style="font-size:12px;color:#6b7280;">
                                Product Content Sync
                            </label>

                            <select id="cts-product-content-sync" class="form-control coursetransit-sync-control">

                                <option value="all">
                                    Update Existing & New Products
                                </option>

                                <option value="new">
                                    Sync Only During Product Creation
                                </option>

                                <option value="disabled">
                                    Disable Product Content Sync
                                </option>

                            </select>

                        </div>

                        <!-- CURRICULUM SYNC -->
                        <div class="col-lg-6 col-md-12">

                            <label style="font-size:12px;color:#6b7280;">
                                Curriculum & Activities Sync
                            </label>

                            <select id="cts-sync-curriculum" class="form-control coursetransit-sync-control">

                                <option value="all">
                                    Update Existing & New Products
                                </option>

                                <option value="new">
                                    Sync Only During Product Creation
                                </option>

                                <option value="disabled">
                                    Disable Curriculum Sync
                                </option>

                            </select>

                        </div>

                        <!-- CATEGORY SYNC -->
                        <div class="col-lg-6 col-md-12">

                            <label style="font-size:12px;color:#6b7280;">
                                Category Sync
                            </label>

                            <select id="cts-category-sync" class="form-control coursetransit-sync-control">

                                <option value="all">
                                    Update Existing & New Products
                                </option>

                                <option value="new">
                                    Sync Only During Product Creation
                                </option>

                                <option value="disabled">
                                    Disable Category Sync
                                </option>

                            </select>

                        </div>

                        <!-- IMAGE SYNC -->
                        <div class="col-lg-6 col-md-12">

                            <label style="font-size:12px;color:#6b7280;">
                                Course Images
                            </label>

                            <select id="cts-image-sync" class="form-control coursetransit-sync-control">

                                <option value="all">
                                    Update Existing & New Products
                                </option>

                                <option value="new">
                                    Sync Only During Product Creation
                                </option>

                                <option value="keep_existing">
                                    Keep Existing Product Images
                                </option>

                                <option value="disabled">
                                    Disable Image Sync
                                </option>

                            </select>

                        </div>

                        <!-- MISSING COURSES -->
                        <div class="col-lg-6 col-md-12">

                            <label style="font-size:12px;color:#6b7280;">
                                Missing Moodle Courses
                            </label>

                            <select id="cts-missing-course-action" class="form-control coursetransit-sync-control">

                                <option value="draft">
                                    Mark Product Draft
                                </option>

                                <option value="trash">
                                    Trash Product
                                </option>

                                <option value="keep">
                                    Keep Product Published
                                </option>

                            </select>

                        </div>

                        <!-- ACTIONS -->
                        <div class="col-12">

                            <div class="coursetransit-sync-actions">

                                <button type="button" id="cts-settings-save" class="button button-primary">

                                    Save Settings

                                </button>

                            </div>

                        </div>

                    </div>

                </div>
            </div>

        </div>

        <!-- LOGS -->
        <div class="tab-pane fade" id="tab-logs" role="tabpanel">

            <!-- HEADER -->
            <div class="mb-4">

                <h5>
                    Log
                </h5>

                <p class="text-muted mb-0" style="font-size:13px;">
                    Review all system logs and errors.
                </p>

            </div>

            <div class="card mb-3 cts-log-settings-card" style="max-width:100% !important;">

                <div class="card-body">

                    <div class="cts-toggle-row">

                        <div>

                            <div class="cts-toggle-title" style="margin-left: -20px">
                                Enable System Logging
                            </div>

                            <div class="cts-toggle-description" style="margin-left: -20px">
                                Store sync events,
                                enrollments and system errors
                                for troubleshooting.
                            </div>

                        </div>

                        <div class="d-flex align-items-center gap-2" style="margin-right: -20px;">

                            <span id="cts-log-status-text" class="cts-toggle-status">
                                Disabled
                            </span>

                            <label class="cts-switch mb-0">

                                <input type="checkbox" id="cts-log-enabled">

                                <span class="cts-slider"></span>

                            </label>

                        </div>

                    </div>

                </div>

            </div>

            <div class="table-responsive">

                <table id="coursetransit-logs-table" class="table table-striped table-bordered w-100 mb-0">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Level</th>
                            <th>Title</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                </table>

            </div>

        </div>

    </div>
</div>

<div class="modal fade" id="ctsLogViewModal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Log Details
                </h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body">

                <pre id="cts-log-context" style="
                        max-height:500px;
                        overflow:auto;
                        background:#f8fafc;
                        border:1px solid #e5e7eb;
                        border-radius:8px;
                        padding:16px;
                        font-size:12px;
                        line-height:1.6;
                        margin:0;
                    "></pre>

            </div>

        </div>

    </div>

</div>