magistr/frontend/admin/views/classrooms.html

<!-- ===== Classrooms Tab ===== -->
<div class="card create-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
        <h2 style="margin: 0;">Новая аудитория</h2>
        <button type="button" class="btn-primary" id="btn-manage-equipments">Справочник оборудования</button>
    </div>
    <form id="create-classroom-form">
        <div class="form-row">
            <div class="form-group">
                <label for="new-classroom-name">Номер / Название</label>
                <input type="text" id="new-classroom-name" placeholder="101 Ленинская" required>
            </div>
            <div class="form-group">
                <label for="new-classroom-capacity">Вместимость (чел.)</label>
                <input type="number" id="new-classroom-capacity" placeholder="30" min="1" required>
            </div>
        </div>
        <div class="form-row" style="margin-top: 1rem;">
            <div class="form-group" style="flex: 2;">
                <label>Оборудование</label>
                <div class="custom-multi-select">
                    <div class="select-box" id="equipment-select-box">
                        <span class="select-text" id="equipment-select-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="equipment-dropdown-menu">
                        <div id="equipment-checkboxes" class="checkbox-group-vertical">
                            <!-- Подгружается через JS -->
                            <p class="text-muted"><small>Загрузка...</small></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" style="display: flex; align-items: flex-end;">
                <button type="submit" class="btn-primary">Добавить</button>
            </div>
        </div>
        <div class="form-alert" id="create-classroom-alert" role="alert"></div>
    </form>
</div>

<div class="card">
    <h2>Список аудиторий</h2>
    <div class="table-wrap">
        <table id="classrooms-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Название</th>
                    <th>Вместимость</th>
                    <th>Оборудование</th>
                    <th>Статус</th>
                    <th style="text-align: right;">Действия</th>
                </tr>
            </thead>
            <tbody id="classrooms-tbody">
                <tr>
                    <td colspan="6" class="loading-row">Загрузка...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Edit Classroom Modal -->
<div class="modal-overlay" id="modal-edit-classroom">
    <div class="modal-content card">
        <h2>Редактировать аудиторию</h2>
        <button class="modal-close" id="modal-edit-classroom-close">&times;</button>
        <form id="edit-classroom-form">
            <input type="hidden" id="edit-classroom-id">
            <div class="form-row" style="margin-top: 1rem;">
                <div class="form-group">
                    <label for="edit-classroom-name">Номер / Название</label>
                    <input type="text" id="edit-classroom-name" required>
                </div>
                <div class="form-group">
                    <label for="edit-classroom-capacity">Вместимость (чел.)</label>
                    <input type="number" id="edit-classroom-capacity" min="1" required>
                </div>
            </div>
            <div class="form-row" style="margin-top: 1rem;">
                <div class="form-group" style="flex: 2;">
                    <label>Оборудование</label>
                    <div class="custom-multi-select">
                        <div class="select-box" id="edit-equipment-select-box">
                            <span class="select-text" id="edit-equipment-select-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="edit-equipment-dropdown-menu">
                            <div id="edit-equipment-checkboxes" class="checkbox-group-vertical">
                                <!-- Подгружается через JS -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group" style="display: flex; align-items: flex-end;">
                    <button type="submit" class="btn-primary" style="width: 100%;">Сохранить</button>
                </div>
            </div>
            <div class="form-alert" id="edit-classroom-alert" role="alert"></div>
        </form>
    </div>
</div>

<!-- Модальное окно управления Оборудованием -->
<div class="modal-overlay" id="modal-manage-equipments">
    <div class="modal-content card" style="max-width: 600px; width: 90%;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
            <h2>Справочник оборудования</h2>
            <button class="modal-close" id="modal-manage-equipments-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-equipment-form">
                <div class="form-row" style="align-items: flex-end;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label for="manage-equipment-name">Название оборудования</label>
                        <input type="text" id="manage-equipment-name" placeholder="Проектор" required>
                    </div>
                    <button type="submit" class="btn-primary" style="height: fit-content; margin-bottom: 0;">Добавить</button>
                </div>
                <div class="form-alert" id="manage-equipment-alert" role="alert"></div>
            </form>
        </div>

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