magistr/frontend/admin/views/groups.html

<!-- ===== Вкладка групп ===== -->
<div class="card create-card">
    <h2>Новая группа</h2>
    <form id="create-group-form">
        <div class="form-row">
            <div class="form-group">
                <label for="new-group-name">Название группы</label>
                <input type="text" id="new-group-name" placeholder="ИВТ-21-1" required>
            </div>
            <div class="form-group">
                <label for="new-group-size">Численность группы</label>
                <input type="number" id="new-group-size" min="1" placeholder="20" required>
            </div>
            <div class="form-group">
                <label for="new-group-ef">Форма обучения</label>
                <select id="new-group-ef">
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="new-group-department">Кафедра</label>
                <select id="new-group-department">
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="new-group-yearStartStudy">Год начала обучения</label>
                <input type="number" id="new-group-yearStartStudy" min="2000" max="2100" placeholder="2026" required>
            </div>
            <div class="form-group">
                <label for="new-group-speciality-code">Специальность</label>
                <select id="new-group-speciality-code">
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="new-group-profile">Профиль обучения</label>
                <select id="new-group-profile">
                    <option value="">Выберите специальность</option>
                </select>
            </div>
            <button type="submit" class="btn btn-md btn-primary">Создать</button>
        </div>
        <div class="form-alert" id="create-group-alert" role="alert"></div>
    </form>
</div>

<div class="card">
    <div class="card-header-row">
        <h2>Все группы</h2>
        <div class="filter-row">
            <label for="filter-ef-box">Фильтр:</label>
            <div class="custom-multi-select">
                <div class="select-box" id="filter-ef-box" role="button" tabindex="0" aria-expanded="false">
                    <span class="select-text" id="filter-ef-text">Выберите форму обучения</span>
                    <svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
                <div class="dropdown-menu" id="filter-ef-menu">
                    <div id="filter-ef-checkboxes" class="checkbox-group-vertical">
                        <label class="checkbox-item">
                            <input type="checkbox" value="all" checked>
                            <span class="checkmark"></span>
                            <span>Все</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-wrap">
        <table id="groups-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Название</th>
                    <th>Численность (чел.)</th>
                    <th>Форма обучения</th>
                    <th>Кафедра</th>
                    <th>Курс</th>
                    <th>Специальность</th>
                    <th>Профиль</th>
                    <th>Статус</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody id="groups-tbody">
                <tr>
                    <td colspan="10" class="loading-row">Загрузка...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Модальное окно редактирования группы -->
<div class="modal-overlay" id="modal-edit-group">
    <div class="modal-content card">
        <h2>Редактировать группу</h2>
        <button class="modal-close" id="modal-edit-group-close">&times;</button>
        <form id="edit-group-form">
            <input type="hidden" id="edit-group-id">
            <div class="form-row" style="margin-top: 1rem;">
                <div class="form-group">
                    <label for="edit-group-name">Название группы</label>
                    <input type="text" id="edit-group-name" required>
                </div>
                <div class="form-group">
                    <label for="edit-group-size">Численность группы</label>
                    <input type="number" id="edit-group-size" min="1" required>
                </div>
                <div class="form-group">
                    <label for="edit-group-ef">Форма обучения</label>
                    <select id="edit-group-ef">
                        <option value="">Загрузка...</option>
                    </select>
                </div>
            </div>
            <div class="form-row" style="margin-top: 1rem;">
                <div class="form-group">
                    <label for="edit-group-department">Кафедра</label>
                    <select id="edit-group-department">
                        <option value="">Загрузка...</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-group-yearStartStudy">Год начала обучения</label>
                    <input type="number" id="edit-group-yearStartStudy" min="2000" max="2100" required>
                </div>
                <div class="form-group">
                    <label for="edit-group-speciality-code">Специальность</label>
                    <select id="edit-group-speciality-code">
                        <option value="">Загрузка...</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-group-profile">Профиль обучения</label>
                    <select id="edit-group-profile">
                        <option value="">Выберите специальность</option>
                    </select>
                </div>
                <div class="form-group" style="display: flex; align-items: flex-end;">
                    <button type="submit" class="btn btn-md btn-primary" style="width: 100%;">Сохранить</button>
                </div>
            </div>
            <div class="form-alert" id="edit-group-alert" role="alert"></div>
        </form>
    </div>
</div>

<!-- Модальное окно управления Подгруппами -->
<div class="modal-overlay" id="modal-manage-subgroups">
    <div class="modal-content card" style="max-width: 700px; width: 90%;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <div>
                <h2>Подгруппы группы</h2>
                <div id="subgroups-group-context" style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.25rem;"></div>
            </div>
            <button class="modal-close" id="modal-manage-subgroups-close" style="position: static; font-size: 2rem; background: none; border: none; cursor: pointer; color: var(--text-secondary);">&times;</button>
        </div>
        
        <!-- Форма -->
        <div class="card create-card" style="margin-bottom: 1.5rem; background: var(--bg-secondary);">
            <h3 id="subgroup-form-title" style="margin-top: 0;">Создание подгруппы</h3>
            <form id="manage-subgroup-form">
                <input type="hidden" id="manage-subgroup-id">
                <input type="hidden" id="manage-subgroup-group-id">
                <div class="subgroup-config-grid">
                    <div class="form-group subgroup-count-field">
                        <label for="manage-subgroup-count">Количество подгрупп</label>
                        <select id="manage-subgroup-count">
                            <option value="0">Без разделения на подгруппы</option>
                            <option value="2">Две подгруппы</option>
                            <option value="3">Три подгруппы</option>
                        </select>
                    </div>
                    <div id="manage-subgroup-capacities" class="subgroup-capacity-fields"></div>
                    <div class="subgroup-actions">
                        <button type="submit" class="btn btn-md btn-primary" id="btn-save-subgroup">Применить</button>
                        <button type="button" class="btn btn-md btn-ghost" id="btn-cancel-subgroup-edit" style="display: none;">Отмена</button>
                    </div>
                </div>
                <div class="form-alert" id="manage-subgroup-alert" role="alert"></div>
            </form>
        </div>

        <!-- Таблица -->
        <div class="table-wrap">
            <table id="manage-subgroups-table">
                <thead>
                    <tr>
                        <th>Подгруппа</th>
                        <th>Численность</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody id="manage-subgroups-tbody">
                    <tr>
                        <td colspan="3" class="loading-row">Загрузка...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Модальное окно назначения Календарного графика -->
<div class="modal-overlay" id="modal-manage-calendar">
    <div class="modal-content card" style="max-width: 960px; width: 90%;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <div>
                <h2>Календарные графики группы</h2>
                <div id="calendar-group-context" style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.25rem;"></div>
            </div>
            <button class="modal-close" id="modal-manage-calendar-close" style="position: static; font-size: 2rem; background: none; border: none; cursor: pointer; color: var(--text-secondary);">&times;</button>
        </div>
        
        <!-- Форма -->
        <div class="card create-card" style="margin-bottom: 1.5rem; background: var(--bg-secondary);">
            <h3 style="margin-top: 0;">Назначить график</h3>
            <form id="manage-calendar-form">
                <input type="hidden" id="manage-calendar-group-id">
                <div class="form-row" style="align-items: flex-end;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label for="manage-calendar-year">Учебный год</label>
                        <select id="manage-calendar-year" required>
                            <option value="">Загрузка...</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 2; margin-bottom: 0;">
                        <label for="manage-calendar-id">Календарный график</label>
                        <select id="manage-calendar-id" required>
                            <option value="">Выберите учебный год</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-md btn-primary" style="height: fit-content; margin-bottom: 0;">Назначить</button>
                </div>
                <div class="form-alert" id="manage-calendar-alert" role="alert"></div>
            </form>
        </div>

        <!-- Таблица -->
        <div class="table-wrap">
            <table id="manage-calendar-table">
                <thead>
                    <tr>
                        <th>Учебный год</th>
                        <th>График</th>
                        <th>Дисциплины</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody id="manage-calendar-tbody">
                    <tr>
                        <td colspan="4" class="loading-row">Загрузка...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>