ModuleManagement.aspx

<%@ Page Title="Module Management" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ModuleManagement.aspx.cs" Inherits="LearnSphere.ModuleManagement" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="<%= ResolveUrl("~/Content/Admin.css") %>" rel="stylesheet" type="text/css" />

    <style>
        .module-page {
            max-width: 1280px;
            margin: 0 auto;
            padding: 32px 24px;
        }

        .module-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .module-title-wrap h1 {
            margin: 0;
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary, #f8fafc);
        }

        .module-title-wrap p {
            margin: 8px 0 0;
            color: var(--text-secondary, #94a3b8);
        }

        .module-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: var(--text-primary, #f8fafc);
            text-decoration: none;
            font-weight: 600;
            transition: 0.2s ease;
        }

        .module-back-btn:hover {
            background: rgba(255, 255, 255, 0.14);
        }

        .module-alert {
            margin-bottom: 18px;
            padding: 14px 16px;
            border-radius: 12px;
            font-weight: 500;
        }

        .module-alert.success {
            background: #ecfdf3;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .module-alert.error {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        .module-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }

        .filter-btn {
            display: inline-block;
            padding: 10px 16px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            color: var(--text-primary, #f8fafc);
            text-decoration: none;
            font-weight: 600;
            transition: 0.2s ease;
        }

        .filter-btn:hover {
            background: rgba(255,255,255,0.08);
        }

        .filter-btn.active {
            background: linear-gradient(135deg, #0ea5e9, #2563eb);
            color: #ffffff;
            border-color: transparent;
        }

        .module-card {
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
        }

        .module-grid {
            width: 100%;
            border-collapse: collapse;
        }

        .module-grid th,
        .module-grid td {
            padding: 16px 14px;
            text-align: left;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            vertical-align: middle;
            color: var(--text-primary, #f8fafc);
        }

        .module-grid th {
            background: rgba(255,255,255,0.04);
            color: var(--text-secondary, #cbd5e1);
            font-size: 0.92rem;
            font-weight: 700;
        }

        .module-name {
            font-weight: 700;
            color: var(--text-primary, #f8fafc);
        }

        .module-code {
            display: inline-block;
            margin-top: 4px;
            color: var(--text-secondary, #94a3b8);
            font-size: 0.92rem;
        }

        .status-badge,
        .attention-badge {
            display: inline-block;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 700;
        }

        .status-published {
            background: #dcfce7;
            color: #166534;
        }

        .status-unpublished {
            background: #fff7ed;
            color: #9a3412;
        }

        .attention-low {
            background: #fee2e2;
            color: #991b1b;
        }

        .attention-good {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 14px;
            border-radius: 10px;
            border: none;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            appearance: none;
            -webkit-appearance: none;
            font-family: inherit;
        }

        .btn-publish {
            background: #dcfce7;
            color: #166534;
        }

        .btn-unpublish {
            background: #fee2e2;
            color: #991b1b;
        }

        .empty-state {
            padding: 32px 20px;
            text-align: center;
            color: var(--text-secondary, #94a3b8);
        }

        .module-table-wrap {
            overflow-x: auto;
        }

        .module-grid .action-cell {
            min-width: 130px;
        }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="module-page">
        <div class="module-header">
            <div class="module-title-wrap">
                <h1>Module Management</h1>
                <p>Review publication status, lecturer ownership, and content coverage.</p>
            </div>

            <asp:HyperLink ID="lnkBackToDashboard" runat="server"
                NavigateUrl="~/AdminDashboard.aspx"
                CssClass="module-back-btn">
                ← Back to Dashboard
            </asp:HyperLink>
        </div>

        <asp:Panel ID="pnlAlert" runat="server" Visible="false">
            <asp:Literal ID="litAlert" runat="server"></asp:Literal>
        </asp:Panel>

        <div class="module-filters">
            <asp:HyperLink ID="lnkAll" runat="server" NavigateUrl="~/ModuleManagement.aspx?filter=all" CssClass="filter-btn">All</asp:HyperLink>
            <asp:HyperLink ID="lnkPublished" runat="server" NavigateUrl="~/ModuleManagement.aspx?filter=published" CssClass="filter-btn">Published</asp:HyperLink>
            <asp:HyperLink ID="lnkUnpublished" runat="server" NavigateUrl="~/ModuleManagement.aspx?filter=unpublished" CssClass="filter-btn">Unpublished</asp:HyperLink>
            <asp:HyperLink ID="lnkLowContent" runat="server" NavigateUrl="~/ModuleManagement.aspx?filter=lowcontent" CssClass="filter-btn">Low Content</asp:HyperLink>
        </div>

        <div class="module-card">
            <div class="module-table-wrap">
                <asp:GridView ID="gvModules" runat="server"
                    AutoGenerateColumns="false"
                    CssClass="module-grid"
                    GridLines="None"
                    EmptyDataText="No modules found.">
                    <Columns>
                        <asp:TemplateField HeaderText="Module">
                            <ItemTemplate>
                                <div class="module-name"><%# Eval("ModuleName") %></div>
                                <span class="module-code"><%# Eval("ModuleCode") %></span>
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:BoundField HeaderText="Teacher" DataField="TeacherName" />
                        <asp:BoundField HeaderText="Semester" DataField="Semester" />
                        <asp:BoundField HeaderText="Academic Year" DataField="AcademicYear" />
                        <asp:BoundField HeaderText="Content Count" DataField="ContentCount" />

                        <asp:TemplateField HeaderText="Status">
                            <ItemTemplate>
                                <span class='<%# (bool)Eval("IsPublished") ? "status-badge status-published" : "status-badge status-unpublished" %>'>
                                    <%# (bool)Eval("IsPublished") ? "Published" : "Unpublished" %>
                                </span>
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Attention">
                            <ItemTemplate>
                                <span class='<%# (int)Eval("ContentCount") < 3 ? "attention-badge attention-low" : "attention-badge attention-good" %>'>
                                    <%# (int)Eval("ContentCount") < 3 ? "Low Content" : "Sufficient" %>
                                </span>
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Action">
                            <ItemStyle CssClass="action-cell" />
                            <ItemTemplate>
                                <asp:LinkButton ID="btnTogglePublish" runat="server"
                                    CausesValidation="false"
                                    CssClass='<%# (bool)Eval("IsPublished") ? "action-btn btn-unpublish" : "action-btn btn-publish" %>'
                                    OnClientClick='<%# "return openPublishModal(" + Eval("ModuleID") + ", " + ((bool)Eval("IsPublished") ? "true" : "false") + ");" %>'>
                                    <%# (bool)Eval("IsPublished") ? "Unpublish" : "Publish" %>
                                </asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>

                    <EmptyDataRowStyle CssClass="empty-state" />
                </asp:GridView>
            </div>
        </div>

        <asp:HiddenField ID="hfSelectedModuleId" runat="server" />
        <asp:Button ID="btnConfirmTogglePublish" runat="server"
            Text="HiddenConfirm"
            OnClick="btnConfirmTogglePublish_Click"
            Style="display:none;" />

        <div id="publishConfirmModal" class="admin-modal-overlay" onclick="closePublishModal()">
            <div class="admin-modal-card" onclick="event.stopPropagation()">
                <div class="admin-modal-header">
                    <h3 id="publishModalTitle">Confirm Action</h3>
                    <button type="button" class="admin-modal-close" onclick="closePublishModal()">×</button>
                </div>

                <div class="admin-modal-body">
                    <div class="admin-modal-info-list">
                        <div class="admin-modal-info-item" id="publishModalMessage">
                            Are you sure you want to update this module?
                        </div>
                    </div>
                </div>

                <div class="admin-modal-footer">
                    <button type="button" class="btn-secondary" onclick="closePublishModal()">Cancel</button>
                    <button type="button" class="action-btn btn-publish" id="publishModalConfirmBtn" onclick="confirmPublishAction()">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptsContent" runat="server">
    <script type="text/javascript">
        function openPublishModal(moduleId, isPublished) {
            var modal = document.getElementById('publishConfirmModal');
            var message = document.getElementById('publishModalMessage');
            var title = document.getElementById('publishModalTitle');
            var confirmBtn = document.getElementById('publishModalConfirmBtn');
            var hiddenField = document.getElementById('<%= hfSelectedModuleId.ClientID %>');

            if (hiddenField) {
                hiddenField.value = moduleId;
            }

            if (isPublished) {
                title.textContent = 'Confirm Unpublish';
                message.textContent = 'Are you sure you want to unpublish this module? Students may no longer access it.';
                confirmBtn.textContent = 'Unpublish';
                confirmBtn.className = 'action-btn btn-unpublish';
            } else {
                title.textContent = 'Confirm Publish';
                message.textContent = 'Are you sure you want to publish this module? It will become available to students.';
                confirmBtn.textContent = 'Publish';
                confirmBtn.className = 'action-btn btn-publish';
            }

            if (modal) {
                modal.classList.add('active');
            }

            return false;
        }

        function closePublishModal() {
            var modal = document.getElementById('publishConfirmModal');
            if (modal) {
                modal.classList.remove('active');
            }
        }

        function confirmPublishAction() {
            document.getElementById('<%= btnConfirmTogglePublish.ClientID %>').click();
        }
    </script>
</asp:Content>