@page
@model GanjooRazor.Areas.User.Pages.FAQItemsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_UserPanelLayout";
    ViewData["Title"] = "پرسش‌های متداول";
    await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
}
<div class="up-page-header">
    <h1>@ViewData["Title"]</h1>
</div>

@if (!string.IsNullOrEmpty(Model.LastMessage))
{
    <div class="up-alert up-alert--info">@Model.LastMessage</div>
}
else
{
    <script>
        function editCategory() {
            location.href = '/User/FAQCatEdit?id=' + String(document.getElementById('cat').value);
        }
        function newItem() {
            location.href = '/User/FAQItemEdit?catId=' + String(document.getElementById('cat').value);
        }

        function faqItemRow(item) {
            return '<div class="up-list-item">' +
                '<a href="/User/FAQItemEdit?id=' + String(item.id) + '">' + item.question + '</a>' +
                '<div class="up-list-item__actions">' +
                '<a role="button" onclick="deleteItem(' + String(item.id) + ')" class="up-icon-btn" title="حذف" aria-label="حذف این پرسش"><i class="noindent-info-button delete-icon"></i></a>' +
                '</div>' +
                '</div>';
        }

        async function deleteCategory() {
            var sel = document.getElementById('cat');
            var text = sel.options[sel.selectedIndex].text;

            var ok = await upConfirm('آیا از حذف ' + text + ' اطمینان دارید؟');
            if (!ok) return;

            $.ajax({
                type: "DELETE",
                url: '',
                data: { id: sel.value },
                error: function (e) {
                    upToast(e.responseText || 'خطا رخ داد.', 'error');
                },
                success: function () {
                    location.reload();
                },
            });
        }

        async function deleteItem(id) {
            var ok = await upConfirm('آیا از حذف این پرسش اطمینان دارید؟');
            if (!ok) return;

            $.ajax({
                type: "DELETE",
                url: '?Handler=Item',
                data: { id: id },
                error: function (e) {
                    upToast(e.responseText || 'خطا رخ داد.', 'error');
                },
                success: function () {
                    location.reload();
                },
            });
        }

        function onSelectedCatChanged() {
            var sel = document.getElementById('cat');
            if (sel.selectedIndex >= 0) {
                document.getElementById('catItems').innerHTML = 'در حال بارگذاری ...';
                $.ajax({
                    type: "GET",
                    url: '?Handler=CategoryItems',
                    data: { id: sel.value },
                    error: function (e) {
                        document.getElementById('catItems').innerHTML = '';
                        upToast(e.responseText || 'خطا رخ داد.', 'error');
                    },
                    success: function (items) {
                        var s = '';
                        for (var i = 0; i < items.length; i++) {
                            s += faqItemRow(items[i]);
                        }
                        document.getElementById('catItems').innerHTML = s || '<p class="up-text-muted">پرسشی در این دسته نیست.</p>';
                    },
                });
            }
        }
    </script>

    <div class="up-card">
        <div class="up-field">
            <label for="cat">دسته‌بندی پرسش‌ها</label>
            <div class="up-form-actions">
                <select name="cat" id="cat" onchange="onSelectedCatChanged()" style="flex:1;">
                    @foreach (var category in Model.Categories)
                    {
                        @if (category.Id == Model.CatId)
                        {
                            <option value="@category.Id" selected>@category.Title</option>
                        }
                        else
                        {
                            <option value="@category.Id">@category.Title</option>
                        }
                    }
                </select>
                <a role="button" onclick="editCategory()" class="up-icon-btn" title="ویرایش" aria-label="ویرایش دسته"><i class="noindent-info-button edit-poem-button"></i></a>
                <a role="button" onclick="deleteCategory()" class="up-icon-btn" title="حذف" aria-label="حذف دسته"><i class="noindent-info-button delete-icon"></i></a>
            </div>
        </div>
        <a role="button" href="/User/FAQCatEdit" class="up-btn up-btn--ghost" title="جدید">دستهٔ جدید</a>
    </div>

    <div class="up-page-header">
        <h2>پرسش‌های دستهٔ جاری</h2>
    </div>
    <div class="up-form-actions" style="margin-bottom:var(--up-space-3);">
        <a role="button" onclick="newItem()" class="up-btn up-btn--success">پرسش جدید</a>
    </div>

    <div id="catItems" class="up-list">
        @if (Model.CategoryItems != null)
        {
            @foreach (var item in Model.CategoryItems)
            {
                <div class="up-list-item">
                    <a href="/User/FAQItemEdit?id=@item.Id">@item.Question</a>
                    <div class="up-list-item__actions">
                        <a role="button" onclick="deleteItem(@item.Id)" class="up-icon-btn" title="حذف" aria-label="حذف این پرسش"><i class="noindent-info-button delete-icon"></i></a>
                    </div>
                </div>
            }
        }
    </div>
}