<?php
/**
 * CMS Pages Management
 */
?>
<div class="container-fluid py-4" dir="rtl">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-primary urdu-bold mb-1">صفحات کا انتظام</h2>
            <p class="text-muted urdu-regular fs-5">ویب سائٹ کے صفحات یہاں سے بنائیں اور تبدیل کریں</p>
        </div>
        <button class="btn btn-success px-4 py-2 rounded-3 urdu-regular fs-5" id="btnNewPage">
            <i class="bi bi-plus-lg me-2"></i> نیا صفحہ
        </button>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light urdu-bold">
                        <tr>
                            <th class="px-4 py-3">#</th>
                            <th class="py-3 text-end">عنوان</th>
                            <th class="py-3 text-end">سلگ</th>
                            <th class="py-3 text-center">اسٹیٹس</th>
                            <th class="px-4 py-3 text-center">ایکشن</th>
                        </tr>
                    </thead>
                    <tbody id="pagesTableBody">
                        <!-- Loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Page Editor Modal -->
<div class="modal fade" id="pageModal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content border-0">
            <div class="modal-header bg-primary text-white py-3 px-4">
                <h5 class="modal-title urdu-bold fs-4" id="pageModalTitle">نیا صفحہ</h5>
                <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <form id="pageForm">
                    <input type="hidden" id="pageId">
                    <div class="row g-4">
                        <div class="col-md-8">
                            <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
                                <div class="mb-3 text-end">
                                    <label class="form-label urdu-bold fs-5">صفحہ کا عنوان (Title)</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-lg" id="pageTitle" required
                                            placeholder="مثلاً: ہمارے بارے میں">
                                        <button class="btn btn-info text-white" type="button" id="btnAiGenerateContent"
                                            title="AI کے ذریعے مواد تیار کریں">
                                            <i class="bi bi-stars"></i> AI ✨
                                        </button>
                                    </div>
                                </div>
                                <div class="mb-3 text-end">
                                    <label class="form-label urdu-bold fs-5">سلگ (Slug)</label>
                                    <div class="input-group dir-ltr">
                                        <span class="input-group-text">/web/</span>
                                        <input type="text" class="form-control" id="pageSlug" required
                                            placeholder="about-us">
                                    </div>
                                    <small class="text-muted">صرف انگریزی حروف، نمبر اور ڈیش (-) استعمال کریں</small>
                                </div>
                                <div class="mb-3 text-end">
                                    <label class="form-label urdu-bold fs-5">صفحہ کا مواد (Content)</label>
                                    <textarea id="pageContentEditor"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
                                <h6 class="fw-bold mb-3 border-bottom pb-2">پبلشنگ سیٹنگز</h6>
                                <div class="mb-3 text-end">
                                    <label class="form-label urdu-regular">اسٹیٹس (Status)</label>
                                    <select class="form-select" id="pageStatus">
                                        <option value="draft">ڈرافٹ (Draft)</option>
                                        <option value="published">پبلش (Published)</option>
                                    </select>
                                </div>
                                <button type="submit"
                                    class="btn btn-primary w-100 py-3 rounded-3 urdu-bold fs-5 shadow-sm"
                                    id="btnSavePage">
                                    <i class="bi bi-cloud-arrow-up me-2"></i> محفوظ کریں (Save)
                                </button>
                            </div>

                            <div class="card border-0 shadow-sm rounded-4 p-4">
                                <h6 class="fw-bold mb-3 border-bottom pb-2">SEO سیٹنگز</h6>
                                <div class="mb-3 text-end">
                                    <label class="form-label urdu-regular">Meta Title</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="metaTitle">
                                        <button class="btn btn-outline-info" type="button" id="btnAiGenerateMetaTitle"
                                            title="AI SEO عنوان">
                                            <i class="bi bi-magic"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="mb-3 text-end">
                                    <label class="form-label urdu-regular">Meta Description</label>
                                    <div class="input-group">
                                        <textarea class="form-control" id="metaDesc" rows="3"></textarea>
                                        <button class="btn btn-outline-info" type="button" id="btnAiGenerateMetaDesc"
                                            title="AI SEO تفصیل">
                                            <i class="bi bi-magic"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php
// Fetch config for TinyMCE API key (if not already fetched)
if (!isset($conf)) {
    $config_res = $crud->getRecordSet("SELECT tinymce_api_key FROM config LIMIT 1");
    $tinymce_api_key = !empty($config_res) ? $config_res[0]['tinymce_api_key'] : 'no-api-key';
}
else {
    $tinymce_api_key = $conf['tinymce_api_key'] ?? 'no-api-key';
}
?>
<!-- TinyMCE Script -->
<script src="https://cdn.tiny.cloud/1/<?php echo $tinymce_api_key; ?>/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
<script src="assets/js/cms_pages.js?v=<?php echo time(); ?>"></script>