magistr/frontend/admin/views/academic-calendar.html

<div class="academic-calendar-tabs" role="tablist" aria-label="Разделы календарных учебных графиков">
    <button type="button" class="academic-calendar-tab active" data-calendar-tab="manage" role="tab" aria-selected="true" aria-controls="academic-calendar-tab-manage">Графики</button>
    <button type="button" class="academic-calendar-tab" data-calendar-tab="grid" role="tab" aria-selected="false" aria-controls="academic-calendar-tab-grid">Сетки</button>
    <button type="button" class="academic-calendar-tab" data-calendar-tab="subjects" role="tab" aria-selected="false" aria-controls="academic-calendar-tab-subjects">Дисциплины</button>
</div>

<section class="academic-calendar-tab-panel active" id="academic-calendar-tab-manage" data-calendar-tab-panel="manage" role="tabpanel">
<div class="card">
    <div class="card-header-row">
        <h2>Учебные годы</h2>
        <button class="btn btn-md btn-secondary" id="academic-years-refresh">Обновить</button>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Название</th>
                    <th>Период</th>
                    <th>Семестры</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody id="academic-years-tbody">
                <tr>
                    <td colspan="4" class="loading-row">Загрузка...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card create-card">
    <div class="card-header-row">
        <h2 id="academic-calendar-form-title">Календарный учебный график</h2>
        <button type="button" class="btn btn-md btn-ghost" id="academic-calendar-reset">Очистить</button>
    </div>
    <form id="academic-calendar-form" novalidate>
        <input type="hidden" id="academic-calendar-id">
        <div class="form-row">
            <div class="form-group">
                <label for="academic-calendar-year">Учебный год</label>
                <select id="academic-calendar-year" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-specialty">Специальность</label>
                <select id="academic-calendar-specialty" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-profile">Профиль</label>
                <select id="academic-calendar-profile" required>
                    <option value="">Выберите специальность</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-study-form">Форма обучения</label>
                <select id="academic-calendar-study-form" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-course-count">Курсов</label>
                <input type="number" id="academic-calendar-course-count" min="1" max="8" value="4" required>
            </div>
            <button type="submit" class="btn btn-md btn-primary">Сохранить график</button>
        </div>
        <div class="form-alert" id="academic-calendar-alert" role="alert"></div>
    </form>
</div>

<div class="card">
    <div class="card-header-row">
        <h2>Календарные графики</h2>
        <button class="btn btn-md btn-secondary" id="academic-calendars-refresh">Обновить</button>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="academic-calendars-search">Поиск графиков</label>
            <input type="search" id="academic-calendars-search" placeholder="Направление, профиль, форма или год">
        </div>
        <div class="form-group">
            <label for="academic-calendars-year-filter">Учебный год</label>
            <select id="academic-calendars-year-filter" data-native-select="true"><option value="">Все учебные годы</option></select>
        </div>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Учебный год</th>
                    <th>Специальность</th>
                    <th>Профиль</th>
                    <th>Форма</th>
                    <th>Курсов</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody id="academic-calendars-tbody">
                <tr>
                    <td colspan="6" class="loading-row">Загрузка...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="pagination" id="academic-calendars-pagination"></div>
</div>

<div class="card create-card academic-year-builder-card">
    <div class="card-header-row">
        <div>
            <h2 id="academic-year-form-title">Учебный год и семестры</h2>
            <p class="muted academic-year-builder-description">Учебный год создаётся сразу с осенним и весенним семестрами.</p>
        </div>
        <button type="button" class="btn btn-md btn-ghost" id="academic-year-reset">Очистить</button>
    </div>
    <form id="academic-year-form" novalidate>
        <input type="hidden" id="academic-year-id">
        <div class="academic-year-period-grid">
            <div class="form-group">
                <label for="academic-year-start">Год начала учебного года</label>
                <input type="text" id="academic-year-start" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" placeholder="2026" autocomplete="off" aria-describedby="academic-year-start-hint" required>
                <small class="muted academic-year-field-hint" id="academic-year-start-hint">Введите четыре цифры — дата начала будет 1 сентября.</small>
            </div>
            <div class="form-group">
                <label for="academic-year-end">Год окончания учебного года</label>
                <input type="text" id="academic-year-end" inputmode="numeric" maxlength="4" placeholder="2027" readonly aria-readonly="true" required>
                <small class="muted academic-year-field-hint">Подставляется автоматически и формирует название учебного года.</small>
            </div>
        </div>

        <section class="academic-year-semester-builder" aria-labelledby="academic-year-semesters-title">
            <div class="academic-year-semester-builder-head">
                <div>
                    <h3 id="academic-year-semesters-title">Семестры</h3>
                    <p class="muted">Проверьте даты: оба семестра будут сохранены вместе с учебным годом.</p>
                </div>
                <span class="academic-year-required-badge">Обязательно</span>
            </div>
            <div class="academic-year-semester-grid">
                <article class="academic-year-semester-card" data-academic-year-semester="autumn">
                    <input type="hidden" id="academic-year-autumn-id">
                    <div class="academic-year-semester-card-title">
                        <span class="academic-year-semester-dot academic-year-semester-dot-autumn" aria-hidden="true"></span>
                        <strong>Осенний семестр</strong>
                    </div>
                    <div class="academic-year-semester-dates">
                        <div class="form-group">
                            <label for="academic-year-autumn-start">Начало</label>
                            <input type="text" id="academic-year-autumn-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
                        </div>
                        <div class="form-group">
                            <label for="academic-year-autumn-end">Окончание</label>
                            <input type="text" id="academic-year-autumn-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
                        </div>
                    </div>
                </article>
                <article class="academic-year-semester-card" data-academic-year-semester="spring">
                    <input type="hidden" id="academic-year-spring-id">
                    <div class="academic-year-semester-card-title">
                        <span class="academic-year-semester-dot academic-year-semester-dot-spring" aria-hidden="true"></span>
                        <strong>Весенний семестр</strong>
                    </div>
                    <div class="academic-year-semester-dates">
                        <div class="form-group">
                            <label for="academic-year-spring-start">Начало</label>
                            <input type="text" id="academic-year-spring-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
                        </div>
                        <div class="form-group">
                            <label for="academic-year-spring-end">Окончание</label>
                            <input type="text" id="academic-year-spring-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
                        </div>
                    </div>
                </article>
            </div>
        </section>

        <div class="academic-year-form-actions">
            <button type="submit" class="btn btn-md btn-primary">Сохранить учебный год и семестры</button>
        </div>
        <div class="form-alert" id="academic-year-alert" role="alert"></div>
    </form>
</div>

</section>

<section class="academic-calendar-tab-panel" id="academic-calendar-tab-grid" data-calendar-tab-panel="grid" role="tabpanel" hidden>
<div class="card create-card">
    <h2>Редактор годового графика</h2>
    <div class="form-row">
        <div class="form-group">
            <label for="calendar-editor-calendar">График</label>
            <select id="calendar-editor-calendar" data-native-select="true">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-editor-load">Загрузить сетку</button>
        <button type="button" class="btn btn-md btn-primary" id="calendar-editor-save">Сохранить сетку</button>
    </div>
    <div class="calendar-fill-panel">
        <div class="form-group">
            <label for="calendar-fill-course">Курс</label>
            <select id="calendar-fill-course">
                <option value="">Все курсы</option>
            </select>
        </div>
        <div class="form-group">
            <label for="calendar-fill-start">С даты</label>
            <input type="text" id="calendar-fill-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ">
        </div>
        <div class="form-group">
            <label for="calendar-fill-end">По дату</label>
            <input type="text" id="calendar-fill-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ">
        </div>
        <div class="form-group">
            <label for="calendar-fill-activity">Код</label>
            <select id="calendar-fill-activity">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-fill-apply">Заполнить диапазон</button>
    </div>
    <div class="form-alert" id="calendar-editor-alert" role="alert"></div>
    <div id="calendar-totals" class="calendar-totals"></div>
    <div id="calendar-grid" class="academic-calendar-grid"></div>
</div>
</section>

<section class="academic-calendar-tab-panel" id="academic-calendar-tab-subjects" data-calendar-tab-panel="subjects" role="tabpanel" hidden>
<div class="card create-card">
    <div class="card-header-row">
        <h2>Дисциплины графика</h2>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-subject-refresh">Обновить</button>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="calendar-subject-calendar">График</label>
            <select id="calendar-subject-calendar" data-native-select="true">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <div class="form-group">
            <label for="calendar-subject-semester">Семестр</label>
            <select id="calendar-subject-semester">
                <option value="">Выберите график</option>
            </select>
        </div>
        <div class="form-group">
            <label for="calendar-subject-id">Дисциплина</label>
            <select id="calendar-subject-id">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-subject-add">Добавить</button>
        <button type="button" class="btn btn-md btn-primary" id="calendar-subject-save">Сохранить</button>
    </div>
    <div class="form-alert" id="calendar-subject-alert" role="alert"></div>
</div>

<div class="card">
    <div class="card-header-row">
        <h2>Привязки по семестрам</h2>
        <span id="calendar-subject-count" class="muted"></span>
    </div>
    <div id="calendar-subject-summary" class="calendar-subject-summary">
        <div class="loading-row">Выберите календарный график</div>
    </div>
</div>
</section>

<div class="modal-overlay" id="calendar-day-dialog">
    <div class="modal-content card calendar-day-dialog-card">
        <h2>Ячейка графика</h2>
        <button class="modal-close" id="calendar-day-dialog-close">&times;</button>
        <div class="calendar-day-dialog-grid">
            <div>
                <span>Дата</span>
                <strong id="calendar-day-dialog-date">-</strong>
            </div>
            <div>
                <span>Курс</span>
                <strong id="calendar-day-dialog-course">-</strong>
            </div>
            <div>
                <span>Неделя</span>
                <strong id="calendar-day-dialog-week">-</strong>
            </div>
            <div>
                <span>День</span>
                <strong id="calendar-day-dialog-day">-</strong>
            </div>
        </div>
        <div class="calendar-day-dialog-activity" id="calendar-day-dialog-activity-summary"></div>
        <div class="form-group">
            <label for="calendar-day-dialog-activity">Код активности</label>
            <select id="calendar-day-dialog-activity">
                <option value="">Выберите код</option>
            </select>
        </div>
        <div class="calendar-day-dialog-time-grid">
            <div class="form-group">
                <label for="calendar-day-dialog-time-scope">Временная сетка даты</label>
                <select id="calendar-day-dialog-time-scope">
                    <option value="">По правилу даты</option>
                </select>
            </div>
            <div class="calendar-day-dialog-actions">
                <button type="button" class="btn btn-md btn-primary" id="calendar-day-dialog-time-save">Применить</button>
                <button type="button" class="btn btn-md btn-danger-subtle" id="calendar-day-dialog-time-clear">Убрать ручную сетку</button>
            </div>
            <div class="form-alert" id="calendar-day-dialog-time-alert" role="alert"></div>
        </div>
    </div>
</div>