{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-comments.css"}}">

{{template "admin-hero-styles" .}}

<div class="comments-page">
    <details class="admin-hero">
        <summary class="admin-hero-bar">
            <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-message-square-dots'></i></span>
            <span class="admin-hero-intro">{{T "admin_comments_page_hint"}}</span>
            <span class="admin-hero-toggle">
                <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
                {{template "admin-hero-help-meta" .}}
            </span>
        </summary>
        <div class="admin-hero-body">
            <ul class="admin-hero-field-grid">
                <li class="admin-hero-field-item"><strong>{{T "admin_comments_usage_settings"}}</strong>{{T "admin_comments_usage_settings_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_comments_usage_filter"}}</strong>{{T "admin_comments_usage_filter_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_comments_usage_bulk"}}</strong>{{T "admin_comments_usage_bulk_desc"}}</li>
            </ul>
        </div>
    </details>

    {{if .Data.PendingCount}}
    <div class="comments-topbar">
        <div class="comments-stats">
            <span class="badge bg-warning text-dark"><i class='bx bx-time-five'></i> {{.Data.PendingCount}} {{T "admin_comments_pending"}}</span>
        </div>
    </div>
    {{end}}

    <div class="comments-settings-card">
        <div class="card-body">
            <div class="settings-head">
                <h6><i class='bx bx-toggle-left'></i> {{T "admin_comments_settings_title"}}</h6>
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="enable_document_comments" {{if .Data.CommentsEnabled}}checked{{end}}>
                        <label class="form-check-label" for="enable_document_comments">
                            <strong>{{T "admin_comments_user_allow"}}</strong>
                            <div class="text-muted">{{T "admin_comments_user_allow_desc"}}</div>
                        </label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="enable_comment_audit" {{if .Data.CommentAudit}}checked{{end}}>
                        <label class="form-check-label" for="enable_comment_audit">
                            <strong>{{T "admin_feature_enable_comment_audit"}}</strong>
                            <div class="text-muted">{{T "admin_feature_enable_comment_audit_desc"}}</div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="comments-toolbar-card">
        <div class="card-body">
            <form method="get" class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label">{{T "admin_col_status"}}</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="-1" {{if eq .Data.QStatus "-1"}}selected{{end}}>{{T "admin_comments_all"}}</option>
                        <option value="0" {{if eq .Data.QStatus "0"}}selected{{end}}>{{T "admin_comments_pending"}} ({{.Data.PendingCount}})</option>
                        <option value="1" {{if eq .Data.QStatus "1"}}selected{{end}}>{{T "admin_comments_approved"}}</option>
                        <option value="2" {{if eq .Data.QStatus "2"}}selected{{end}}>{{T "admin_comments_hidden"}}</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label">{{T "admin_comments_col_content"}}</label>
                    <input type="text" name="q" class="form-control form-control-sm" value="{{.Data.QQ}}" placeholder="{{T "admin_btn_search"}}">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-sm w-100"><i class='bx bx-filter-alt'></i> {{T "admin_btn_filter"}}</button>
                </div>
            </form>
        </div>
    </div>

    <form method="post" id="commentsBulkForm">
        <div class="comments-table-card">
            <div class="table-responsive">
                <table class="table align-middle mb-0" id="commentsTable">
                    <thead>
                        <tr>
                            <th width="44"><input type="checkbox" class="form-check-input" id="checkAllComments" title="{{T "admin_documents_select_all"}}"></th>
                            <th>{{T "admin_comments_col_content"}}</th>
                            <th style="width:180px;">{{T "admin_comments_col_document"}}</th>
                            <th style="width:100px;">{{T "admin_comments_col_user"}}</th>
                            <th width="90" class="text-center">{{T "admin_comments_col_status"}}</th>
                            <th style="width:130px;">{{T "admin_comments_col_time"}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{if .Data.Rows}}
                        {{range .Data.Rows}}
                        <tr>
                            <td><input type="checkbox" class="form-check-input comments-row-check" name="ids" value="{{index . "id"}}"></td>
                            <td class="small">{{index . "content"}}</td>
                            <td class="small text-truncate" style="max-width:180px;">{{index . "document_title"}}</td>
                            <td class="small">{{index . "username"}}</td>
                            <td class="text-center">
                                {{$st := index . "status"}}
                                {{if eq $st 0}}<span class="badge bg-warning text-dark comments-status-badge">{{T "admin_comments_pending"}}</span>{{end}}
                                {{if eq $st 1}}<span class="badge bg-success comments-status-badge">{{T "admin_comments_approved"}}</span>{{end}}
                                {{if eq $st 2}}<span class="badge bg-danger comments-status-badge">{{T "admin_comments_hidden"}}</span>{{end}}
                            </td>
                            <td class="small text-muted">{{index . "created_at_str"}}</td>
                        </tr>
                        {{end}}
                        {{else}}
                        <tr>
                            <td colspan="6">
                                <div class="comments-empty">
                                    <i class='bx bx-inbox'></i>
                                    <div>{{T "admin_no_data"}}</div>
                                </div>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
            {{if .Data.Rows}}
            <div class="comments-bulk-bar">
                <span class="selected-hint"><i class='bx bx-checkbox-checked'></i> {{T "admin_audit_selected"}} <strong id="commentsSelectedCount">0</strong> {{T "admin_audit_selected_unit"}}</span>
                <button type="submit" name="action" value="approve" class="btn btn-success btn-sm" id="btnCommentsApprove" disabled>
                    <i class='bx bx-check'></i> {{T "admin_comments_action_approve"}}
                </button>
                <button type="submit" name="action" value="hide" class="btn btn-warning btn-sm" id="btnCommentsHide" disabled>
                    <i class='bx bx-hide'></i> {{T "admin_comments_action_hide"}}
                </button>
                <button type="submit" name="action" value="delete" class="btn btn-danger btn-sm" id="btnCommentsDelete" disabled>
                    <i class='bx bx-trash'></i> {{T "admin_comments_action_delete"}}
                </button>
            </div>
            {{end}}
        </div>
    </form>
</div>
{{end}}

{{define "scripts"}}
<script>
var CommentsPageI18n = {
    saved: {{json (T "admin_feature_config_saved")}},
    saveFailed: {{json (T "admin_failed")}},
    selectFirst: {{json (T "admin_comments_no_selection")}}
};
function showCommentsFlashToast(msg, type) {
    if (!msg || typeof BootstrapModal === 'undefined') return;
    BootstrapModal.flash(msg, type, 4500);
}
</script>
<script>
$(function() {
    {{if .Data.Flash}}
    showCommentsFlashToast({{json .Data.Flash}}, {{json .Data.FlashType}});
    {{end}}

    var $selAll = $('#checkAllComments');
    var $rowChecks = $('.comments-row-check');
    var $selectedCount = $('#commentsSelectedCount');
    var $btnApprove = $('#btnCommentsApprove');
    var $btnHide = $('#btnCommentsHide');
    var $btnDelete = $('#btnCommentsDelete');

    function updateBulkState() {
        var total = $rowChecks.length;
        var checked = $rowChecks.filter(':checked').length;
        $selectedCount.text(checked);
        $btnApprove.prop('disabled', checked === 0);
        $btnHide.prop('disabled', checked === 0);
        $btnDelete.prop('disabled', checked === 0);
        if ($selAll.length) {
            $selAll.prop('checked', total > 0 && checked === total);
            $selAll.prop('indeterminate', checked > 0 && checked < total);
        }
        $rowChecks.each(function() {
            $(this).closest('tr').toggleClass('row-selected', this.checked);
        });
    }

    $selAll.on('change', function() {
        $rowChecks.prop('checked', this.checked);
        updateBulkState();
    });

    $(document).on('change', '.comments-row-check', updateBulkState);

    $('#commentsBulkForm').on('submit', function(e) {
        if ($rowChecks.filter(':checked').length === 0) {
            e.preventDefault();
            showCommentsFlashToast(CommentsPageI18n.selectFirst, 'warning');
            return false;
        }
    });

    updateBulkState();

    function saveCommentSettings() {
        var enabled = $('#enable_document_comments').is(':checked');
        return $.ajax({
            url: '/admin/comments-settings-save',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                enable_document_comments: enabled ? '1' : '0',
                enable_comment_audit: $('#enable_comment_audit').is(':checked') ? '1' : '0'
            })
        }).done(function(res) {
            if (res.success) {
                showCommentsFlashToast(res.message || CommentsPageI18n.saved, 'success');
            } else {
                showCommentsFlashToast(res.message || CommentsPageI18n.saveFailed, 'danger');
            }
        }).fail(function() {
            showCommentsFlashToast(CommentsPageI18n.saveFailed, 'danger');
        });
    }

    $('#enable_document_comments, #enable_comment_audit').on('change', function() {
        saveCommentSettings();
    });
});
</script>
{{end}}