<?php include __DIR__ . '/../../layouts/header.php'; ?>
<?php include __DIR__ . '/../../layouts/sidebar.php'; ?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><?= __('faqs') ?></h2>
</div>

<?php if (isset($_GET['success'])): ?>
    <div class="alert alert-success border-0 shadow-sm mb-4 rounded-4" role="alert">
        <i class="fas fa-check-circle me-2"></i> <?= htmlspecialchars($_GET['success']) ?>
    </div>
<?php endif; ?>

<?php if (isset($_GET['error'])): ?>
    <div class="alert alert-danger border-0 shadow-sm mb-4 rounded-4" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i> <?= htmlspecialchars($_GET['error']) ?>
    </div>
<?php endif; ?>

<!-- Tabs Navigation -->
<ul class="nav nav-pills mb-4 gap-2" id="faqTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="btn btn-outline-primary active rounded-pill px-4" id="faqs-tab" data-bs-toggle="tab" data-bs-target="#faqs-pane" type="button" role="tab">
            <i class="fas fa-question-circle me-2"></i> <?= __('questions_and_answers') ?>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="btn btn-outline-primary rounded-pill px-4" id="categories-tab" data-bs-toggle="tab" data-bs-target="#categories-pane" type="button" role="tab">
            <i class="fas fa-tags me-2"></i> <?= __('faq_categories') ?>
        </button>
    </li>
</ul>

<!-- Tabs Content -->
<div class="tab-content" id="faqTabsContent">
    
    <!-- Tab 1: FAQs Panel -->
    <div class="tab-pane fade show active" id="faqs-pane" role="tabpanel" aria-labelledby="faqs-tab">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0 fw-bold text-dark"><?= __('questions_and_answers') ?></h4>
            <button class="btn btn-primary rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#addFaqModal">
                <i class="fas fa-plus me-1"></i> <?= __('add_faq') ?>
            </button>
        </div>
        
        <div class="table-container">
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th><?= __('sort_order') ?></th>
                            <th><?= __('category') ?></th>
                            <th><?= __('question_and_answer') ?></th>
                            <th><?= __('status') ?></th>
                            <th class="text-end"><?= __('actions') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($data)): ?>
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($data as $item): ?>
                                <tr>
                                    <td class="text-secondary fw-semibold">#<?= htmlspecialchars($item['sort_order']) ?></td>
                                    <td>
                                        <span class="badge badge-light text-primary border fw-normal py-2 px-3">
                                            <?= htmlspecialchars($item['category_name_en'] ?? 'Uncategorized') ?>
                                        </span>
                                    </td>
                                    <td>
                                        <div class="fw-bold text-dark mb-1"><?= htmlspecialchars($item['question_en'] ?? $item['question_ar'] ?? '-') ?></div>
                                        <div class="text-secondary text-wrap" style="font-size: 13px; max-width: 400px;"><?= htmlspecialchars($item['answer_en'] ?? '') ?></div>
                                    </td>
                                    <td>
                                        <?php if ($item['status'] === 'active'): ?>
                                            <span class="badge badge-success"><?= __('active') ?></span>
                                        <?php else: ?>
                                            <span class="badge badge-secondary"><?= htmlspecialchars(ucfirst($item['status'])) ?></span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="text-end">
                                        <button class="btn btn-light btn-sm text-primary edit-faq-btn me-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editFaqModal"
                                                data-id="<?= $item['id'] ?>"
                                                data-category-id="<?= $item['category_id'] ?? '' ?>"
                                                data-question-en="<?= htmlspecialchars($item['question_en'] ?? '') ?>"
                                                data-question-ar="<?= htmlspecialchars($item['question_ar'] ?? '') ?>"
                                                data-answer-en="<?= htmlspecialchars($item['answer_en'] ?? '') ?>"
                                                data-answer-ar="<?= htmlspecialchars($item['answer_ar'] ?? '') ?>"
                                                data-sort-order="<?= htmlspecialchars($item['sort_order']) ?>"
                                                data-status="<?= htmlspecialchars($item['status']) ?>">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <a href="?page=faqs&action=delete&id=<?= $item['id'] ?>" class="btn btn-light btn-sm text-danger" onclick="return confirm('Delete this FAQ?')"><i class="fas fa-trash"></i></a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 2: FAQ Categories Panel -->
    <div class="tab-pane fade" id="categories-pane" role="tabpanel" aria-labelledby="categories-tab">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0 fw-bold text-dark"><?= __('faq_categories') ?></h4>
            <button class="btn btn-primary rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                <i class="fas fa-plus me-1"></i> <?= __('add_category') ?>
            </button>
        </div>

        <div class="table-container">
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th><?= __('sort_order') ?></th>
                            <th><?= __('icon') ?></th>
                            <th><?= __('category_name') ?></th>
                            <th><?= __('description') ?></th>
                            <th><?= __('status') ?></th>
                            <th class="text-end"><?= __('actions') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($categories)): ?>
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($categories as $cat): ?>
                                <tr>
                                    <td class="text-secondary fw-semibold">#<?= htmlspecialchars($cat['sort_order']) ?></td>
                                    <td>
                                        <div class="d-flex align-items-center justify-content-center bg-light text-primary rounded-3" style="width: 40px; height: 40px; font-size: 18px;">
                                            <i class="<?= htmlspecialchars($cat['icon'] ?? 'fas fa-tags') ?>"></i>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fw-bold text-dark"><?= htmlspecialchars($cat['name_en'] ?? '') ?></div>
                                        <div class="text-secondary small"><?= htmlspecialchars($cat['name_ar'] ?? '') ?></div>
                                    </td>
                                    <td>
                                        <div class="text-dark small text-truncate" style="max-width: 250px;"><?= htmlspecialchars($cat['description_en'] ?? '') ?></div>
                                        <div class="text-secondary small text-truncate" style="max-width: 250px;"><?= htmlspecialchars($cat['description_ar'] ?? '') ?></div>
                                    </td>
                                    <td>
                                        <?php if ($cat['status'] === 'active'): ?>
                                            <span class="badge badge-success"><?= __('active') ?></span>
                                        <?php else: ?>
                                            <span class="badge badge-secondary"><?= htmlspecialchars(ucfirst($cat['status'])) ?></span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="text-end">
                                        <button class="btn btn-light btn-sm text-primary edit-cat-btn me-1"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editCategoryModal"
                                                data-id="<?= $cat['id'] ?>"
                                                data-name-en="<?= htmlspecialchars($cat['name_en'] ?? '') ?>"
                                                data-name-ar="<?= htmlspecialchars($cat['name_ar'] ?? '') ?>"
                                                data-description-en="<?= htmlspecialchars($cat['description_en'] ?? '') ?>"
                                                data-description-ar="<?= htmlspecialchars($cat['description_ar'] ?? '') ?>"
                                                data-icon="<?= htmlspecialchars($cat['icon'] ?? '') ?>"
                                                data-sort-order="<?= htmlspecialchars($cat['sort_order']) ?>"
                                                data-status="<?= htmlspecialchars($cat['status']) ?>">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <a href="?page=faqs&action=delete_category&id=<?= $cat['id'] ?>" class="btn btn-light btn-sm text-danger" onclick="return confirm('Delete this FAQ category?')"><i class="fas fa-trash"></i></a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ==================== MODALS ==================== -->

<!-- Add FAQ Modal -->
<div class="modal fade" id="addFaqModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Add New FAQ</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=faqs&action=store" method="POST">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category</label>
                            <select name="category_id" class="form-select" required>
                                <option value="">-- Select Category --</option>
                                <?php foreach ($categories as $cat): ?>
                                    <option value="<?= $cat['id'] ?>"><?= htmlspecialchars($cat['name_en']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-secondary small fw-bold">Sort Order</label>
                            <input type="number" name="sort_order" class="form-control" value="0">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-secondary small fw-bold">Status</label>
                            <select name="status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Question (EN)</label>
                            <input type="text" name="question_en" class="form-control" required placeholder="e.g. How long does the visa processing take?">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Question (AR)</label>
                            <input type="text" name="question_ar" class="form-control" placeholder="السؤال بالعربية">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Answer (EN)</label>
                            <textarea name="answer_en" class="form-control" rows="4" required placeholder="Describe the answer here..."></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Answer (AR)</label>
                            <textarea name="answer_ar" class="form-control" rows="4" placeholder="الإجابة بالعربية"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Save FAQ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit FAQ Modal -->
<div class="modal fade" id="editFaqModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Edit FAQ</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=faqs&action=update" method="POST">
                <input type="hidden" name="id" id="edit_faq_id">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category</label>
                            <select name="category_id" id="edit_faq_category_id" class="form-select" required>
                                <option value="">-- Select Category --</option>
                                <?php foreach ($categories as $cat): ?>
                                    <option value="<?= $cat['id'] ?>"><?= htmlspecialchars($cat['name_en']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-secondary small fw-bold">Sort Order</label>
                            <input type="number" name="sort_order" id="edit_faq_sort_order" class="form-control">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-secondary small fw-bold">Status</label>
                            <select name="status" id="edit_faq_status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Question (EN)</label>
                            <input type="text" name="question_en" id="edit_faq_question_en" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Question (AR)</label>
                            <input type="text" name="question_ar" id="edit_faq_question_ar" class="form-control">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Answer (EN)</label>
                            <textarea name="answer_en" id="edit_faq_answer_en" class="form-control" rows="4" required></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Answer (AR)</label>
                            <textarea name="answer_ar" id="edit_faq_answer_ar" class="form-control" rows="4"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Update FAQ</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Add FAQ Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=faqs&action=store_category" method="POST">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category Name (EN)</label>
                            <input type="text" name="name_en" class="form-control" required placeholder="e.g. Contracts & Legal">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category Name (AR)</label>
                            <input type="text" name="name_ar" class="form-control" placeholder="مثال: العقود والشؤون القانونية">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Short Description (EN)</label>
                            <input type="text" name="description_en" class="form-control" placeholder="e.g. Visas, Sponsorships">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Short Description (AR)</label>
                            <input type="text" name="description_ar" class="form-control" placeholder="مثال: تأشيرات، كفالات">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category Icon (FontAwesome)</label>
                            <select name="icon" class="form-select">
                                <option value="fas fa-file-contract">📄 File / Contract (Contracts & Legal)</option>
                                <option value="fas fa-user-friends">👥 User Group (Maid Selection)</option>
                                <option value="fas fa-wrench">🔧 Wrench (Technical Support)</option>
                                <option value="fas fa-question-circle">❓ Question Circle (General)</option>
                                <option value="fas fa-credit-card">💳 Credit Card (Billing/Payments)</option>
                                <option value="fas fa-shield-alt">🛡️ Shield (Security)</option>
                                <option value="fas fa-info-circle">ℹ️ Info Info (About Us)</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Sort Order</label>
                            <input type="number" name="sort_order" class="form-control" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Status</label>
                            <select name="status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Save Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Edit FAQ Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=faqs&action=update_category" method="POST">
                <input type="hidden" name="id" id="edit_cat_id">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category Name (EN)</label>
                            <input type="text" name="name_en" id="edit_cat_name_en" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category Name (AR)</label>
                            <input type="text" name="name_ar" id="edit_cat_name_ar" class="form-control">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Short Description (EN)</label>
                            <input type="text" name="description_en" id="edit_cat_description_en" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Short Description (AR)</label>
                            <input type="text" name="description_ar" id="edit_cat_description_ar" class="form-control">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Category Icon (FontAwesome)</label>
                            <select name="icon" id="edit_cat_icon" class="form-select">
                                <option value="fas fa-file-contract">📄 File / Contract (Contracts & Legal)</option>
                                <option value="fas fa-user-friends">👥 User Group (Maid Selection)</option>
                                <option value="fas fa-wrench">🔧 Wrench (Technical Support)</option>
                                <option value="fas fa-question-circle">❓ Question Circle (General)</option>
                                <option value="fas fa-credit-card">💳 Credit Card (Billing/Payments)</option>
                                <option value="fas fa-shield-alt">🛡️ Shield (Security)</option>
                                <option value="fas fa-info-circle">ℹ️ Info Info (About Us)</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Sort Order</label>
                            <input type="number" name="sort_order" id="edit_cat_sort_order" class="form-control">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Status</label>
                            <select name="status" id="edit_cat_status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Update Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// FAQ Edit Modal Binder
document.querySelectorAll('.edit-faq-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.getElementById('edit_faq_id').value = this.getAttribute('data-id');
        document.getElementById('edit_faq_category_id').value = this.getAttribute('data-category-id');
        document.getElementById('edit_faq_question_en').value = this.getAttribute('data-question-en');
        document.getElementById('edit_faq_question_ar').value = this.getAttribute('data-question-ar');
        document.getElementById('edit_faq_answer_en').value = this.getAttribute('data-answer-en');
        document.getElementById('edit_faq_answer_ar').value = this.getAttribute('data-answer-ar');
        document.getElementById('edit_faq_sort_order').value = this.getAttribute('data-sort-order');
        document.getElementById('edit_faq_status').value = this.getAttribute('data-status');
    });
});

// Category Edit Modal Binder
document.querySelectorAll('.edit-cat-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.getElementById('edit_cat_id').value = this.getAttribute('data-id');
        document.getElementById('edit_cat_name_en').value = this.getAttribute('data-name-en');
        document.getElementById('edit_cat_name_ar').value = this.getAttribute('data-name-ar');
        document.getElementById('edit_cat_description_en').value = this.getAttribute('data-description-en');
        document.getElementById('edit_cat_description_ar').value = this.getAttribute('data-description-ar');
        document.getElementById('edit_cat_icon').value = this.getAttribute('data-icon');
        document.getElementById('edit_cat_sort_order').value = this.getAttribute('data-sort-order');
        document.getElementById('edit_cat_status').value = this.getAttribute('data-status');
    });
});
</script>

<?php include __DIR__ . '/../../layouts/footer.php'; ?>
