{{template "layout.html" .}}

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

{{$rows := index .Data "AnnouncementRows"}}

<div class="sd-sitepages">
    {{if .FlashNotice}}
    <div class="alert alert-success" role="status">{{.FlashNotice}}</div>
    {{end}}
    {{if .FlashError}}
    <div class="alert alert-danger" role="alert">{{.FlashError}}</div>
    {{end}}

    <div class="sd-sitepages-card">
        <div class="sd-sitepages-card-head d-flex flex-wrap align-items-start justify-content-between gap-2">
            <div>
                <h2>{{T "admin.announcements_list"}}</h2>
                <p>{{T "admin.announcements_hint"}}</p>
            </div>
            <button type="button" class="btn btn-primary btn-sm" id="annBtnCreate">
                <i class="bx bx-plus"></i> {{T "admin.announcements_create"}}
            </button>
        </div>
        {{if not $rows}}
        <p class="sd-sitepages-list-empty">{{T "admin.announcements_empty"}}</p>
        {{else}}
        <div class="table-responsive">
            <table class="table table-sm align-middle sd-sitepages-list-table mb-0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>{{T "admin.announcements_col_title"}}</th>
                        <th>{{T "admin.announcements_col_status"}}</th>
                        <th>{{T "admin.announcements_col_nav"}}</th>
                        <th>{{T "admin.announcements_col_published"}}</th>
                        <th>{{T "admin.announcements_col_updated"}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{range $rows}}
                    <tr data-ann-id="{{.ID}}">
                        <td><code>#{{.ID}}</code></td>
                        <td>{{.Title}}</td>
                        <td>
                            {{if eq .Status 1}}
                            <span class="sd-sitepages-status is-on">{{.StatusLabel}}</span>
                            {{else}}
                            <span class="sd-sitepages-status">{{.StatusLabel}}</span>
                            {{end}}
                        </td>
                        <td>{{if .ShowInNav}}{{T "admin.announcements_yes"}}{{else}}—{{end}}</td>
                        <td>{{.PublishedAtDisplay}}</td>
                        <td>{{.UpdatedAtDisplay}}</td>
                        <td class="text-nowrap text-end">
                            <button type="button" class="btn btn-outline-primary btn-sm ann-btn-edit" data-id="{{.ID}}">
                                <i class="bx bx-edit"></i> {{T "admin.announcements_edit_btn"}}
                            </button>
                            <button type="button" class="btn btn-outline-danger btn-sm ann-btn-delete" data-id="{{.ID}}" data-title="{{.Title}}">
                                <i class="bx bx-trash"></i> {{T "admin.announcements_delete_btn"}}
                            </button>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
        {{end}}
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
(function() {
    var i18n = {
        create: {{json (T "admin.announcements_create")}},
        editId: {{json (T "admin.announcements_edit_id")}},
        edit: {{json (T "admin.announcements_edit")}},
        save: {{json (T "admin.announcements_save")}},
        cancel: {{json (T "admin.announcements_cancel_edit")}},
        fieldTitle: {{json (T "admin.announcements_field_title")}},
        fieldBody: {{json (T "admin.announcements_field_body")}},
        fieldStatus: {{json (T "admin.announcements_field_status")}},
        fieldSort: {{json (T "admin.announcements_field_sort")}},
        fieldColor: {{json (T "admin.announcements_field_color")}},
        fieldNav: {{json (T "admin.announcements_field_nav")}},
        statusDraft: {{json (T "admin.announcements_status_draft")}},
        statusPublished: {{json (T "admin.announcements_status_published")}},
        deleteConfirm: {{json (T "admin.announcements_delete_confirm")}},
        deleteTitle: {{json (T "admin.announcements_delete_btn")}},
        titleRequired: {{json (T "admin.announcements_field_title")}}
    };
    var rows = {{json (index .Data "AnnouncementRows")}} || [];

    function findRow(id) {
        id = parseInt(id, 10) || 0;
        for (var i = 0; i < rows.length; i++) {
            if (parseInt(rows[i].ID, 10) === id) return rows[i];
        }
        return null;
    }

    function formFields(row) {
        row = row || {};
        return [
            { name: 'title', label: i18n.fieldTitle, value: row.Title || '', placeholder: i18n.fieldTitle },
            { name: 'body', label: i18n.fieldBody, type: 'textarea', rows: 10, value: row.Body || '' },
            {
                type: 'row',
                fields: [
                    {
                        name: 'status', label: i18n.fieldStatus, type: 'select', colClass: 'col-md-3',
                        value: String(row.Status != null ? row.Status : 0),
                        options: [
                            { value: '0', label: i18n.statusDraft },
                            { value: '1', label: i18n.statusPublished }
                        ]
                    },
                    { name: 'sort_order', label: i18n.fieldSort, inputType: 'number', colClass: 'col-md-3', value: String(row.SortOrder != null ? row.SortOrder : 0) },
                    { name: 'nav_text_color', label: i18n.fieldColor, colClass: 'col-md-3', value: row.NavTextColor || '', placeholder: '#2563eb' },
                    { name: 'show_in_nav', label: i18n.fieldNav, type: 'checkbox', colClass: 'col-md-3', value: !!row.ShowInNav }
                ]
            }
        ];
    }

    function postAnnounce(payload) {
        return $.ajax({
            url: '/admin/announcements',
            type: 'POST',
            data: payload,
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        });
    }

    async function openAnnounceForm(row) {
        if (!window.BootstrapModal || !BootstrapModal.openForm) return;
        var isEdit = !!(row && row.ID);
        var data = await BootstrapModal.openForm({
            title: isEdit ? (i18n.editId + String(row.ID)) : i18n.create,
            okText: i18n.save,
            cancelText: i18n.cancel,
            size: 'lg',
            scrollable: true,
            modalClass: 'admin-announcement-form-modal',
            fields: formFields(row)
        });
        if (!data) return;
        var title = String(data.title || '').trim();
        var body = String(data.body || '').trim();
        if (!title || !body) {
            BootstrapModal.msg(i18n.titleRequired, { icon: 2 });
            return;
        }
        var loadId = BootstrapModal.load();
        postAnnounce({
            action: 'save',
            id: isEdit ? String(row.ID) : '0',
            title: title,
            body: body,
            status: String(data.status != null ? data.status : '0'),
            sort_order: String(data.sort_order != null ? data.sort_order : '0'),
            nav_text_color: String(data.nav_text_color || '').trim(),
            show_in_nav: data.show_in_nav ? '1' : '0'
        }).done(function(res) {
            BootstrapModal.close(loadId);
            if (res && res.success) {
                BootstrapModal.msg(res.message || i18n.save, {
                    icon: 1,
                    callback: function() { window.location.reload(); }
                });
            } else {
                BootstrapModal.msg((res && res.message) || '—', { icon: 2 });
            }
        }).fail(function() {
            BootstrapModal.close(loadId);
            BootstrapModal.msg('—', { icon: 2 });
        });
    }

    async function deleteAnnounce(id, title) {
        if (!window.BootstrapModal) return;
        var ok = await BootstrapModal.confirm(
            i18n.deleteConfirm + (title ? '<br><strong>' + $('<div>').text(title).html() + '</strong>' : ''),
            { title: i18n.deleteTitle }
        );
        if (!ok) return;
        var loadId = BootstrapModal.load();
        postAnnounce({ action: 'delete', id: String(id) }).done(function(res) {
            BootstrapModal.close(loadId);
            if (res && res.success) {
                BootstrapModal.msg(res.message || i18n.deleteTitle, {
                    icon: 1,
                    callback: function() { window.location.reload(); }
                });
            } else {
                BootstrapModal.msg((res && res.message) || '—', { icon: 2 });
            }
        }).fail(function() {
            BootstrapModal.close(loadId);
            BootstrapModal.msg('—', { icon: 2 });
        });
    }

    $('#annBtnCreate').on('click', function() { openAnnounceForm(null); });
    $(document).on('click', '.ann-btn-edit', function() {
        openAnnounceForm(findRow($(this).data('id')));
    });
    $(document).on('click', '.ann-btn-delete', function() {
        deleteAnnounce($(this).data('id'), $(this).data('title'));
    });
})();
</script>
{{end}}