<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Расписания - Домовой Бот</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .sidebar { min-height: 100vh; background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%); }
        .sidebar .nav-link { color: rgba(255,255,255,0.8); padding: 1rem; }
        .sidebar .nav-link:hover, .sidebar .nav-link.active { color: white; background-color: rgba(255,255,255,0.1); }
        .content { padding: 2rem; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 sidebar p-0">
                <div class="p-3 text-white text-center"><h4><i class="bi bi-house-door"></i> Домовой Бот</h4></div>
                <nav class="nav flex-column">
                    <a class="nav-link" href="/"><i class="bi bi-speedometer2"></i> Дашборд</a>
                    <a class="nav-link" href="/users"><i class="bi bi-people"></i> Пользователи</a>
                    <a class="nav-link" href="/verification"><i class="bi bi-shield-check"></i> Верификация</a>
                    <a class="nav-link" href="/phones"><i class="bi bi-telephone"></i> Телефоны</a>
                    <a class="nav-link" href="/ads"><i class="bi bi-megaphone"></i> Объявления</a>
                    <a class="nav-link" href="/broadcast"><i class="bi bi-broadcast"></i> Рассылки</a>
                    <a class="nav-link" href="/polls"><i class="bi bi-bar-chart"></i> Опросы</a>
                    <a class="nav-link" href="/events"><i class="bi bi-calendar-event"></i> События</a>
                    <a class="nav-link active" href="/schedules"><i class="bi bi-clock"></i> Расписания</a>
                    <a class="nav-link" href="/export"><i class="bi bi-download"></i> Экспорт</a>
                </nav>
            </div>
            <div class="col-md-10 content">
                <h2 class="mb-4"><i class="bi bi-clock"></i> Расписания отключений</h2>
                
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-plus-lg"></i> Добавить расписание</h5>
                    </div>
                    <div class="card-body">
                        <form id="addScheduleForm" class="row g-3">
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="scheduleTitle" placeholder="Название" required>
                            </div>
                            <div class="col-md-2">
                                <select class="form-select" id="scheduleType">
                                    <option value="water">💧 Вода</option>
                                    <option value="electricity">⚡ Электричество</option>
                                    <option value="heating">🔥 Отопление</option>
                                    <option value="gas">🔶 Газ</option>
                                    <option value="elevator">🛗 Лифт</option>
                                    <option value="general">📋 Общее</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="datetime-local" class="form-control" id="scheduleStart" required>
                            </div>
                            <div class="col-md-2">
                                <input type="datetime-local" class="form-control" id="scheduleEnd">
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary w-100">Добавить</button>
                            </div>
                            <div class="col-md-12">
                                <textarea class="form-control" id="scheduleDesc" placeholder="Описание" rows="2"></textarea>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead>
                                <tr><th>Тип</th><th>Название</th><th>Начало</th><th>Конец</th><th>Описание</th><th>Действия</th></tr>
                            </thead>
                            <tbody>
                                {% for schedule in schedules %}
                                <tr>
                                    <td>
                                        {% if schedule.schedule_type == 'water' %}💧
                                        {% elif schedule.schedule_type == 'electricity' %}⚡
                                        {% elif schedule.schedule_type == 'heating' %}🔥
                                        {% elif schedule.schedule_type == 'gas' %}🔶
                                        {% elif schedule.schedule_type == 'elevator' %}🛗
                                        {% else %}📋{% endif %}
                                    </td>
                                    <td>{{ schedule.title }}</td>
                                    <td>{{ schedule.start_time.strftime('%d.%m.%Y %H:%M') if schedule.start_time else '—' }}</td>
                                    <td>{{ schedule.end_time.strftime('%d.%m.%Y %H:%M') if schedule.end_time else '—' }}</td>
                                    <td>{{ schedule.description or '—' }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-danger" onclick="deleteSchedule({{ schedule.schedule_id }})">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('addScheduleForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const data = {
                title: document.getElementById('scheduleTitle').value,
                schedule_type: document.getElementById('scheduleType').value,
                start_time: new Date(document.getElementById('scheduleStart').value).toISOString(),
                end_time: document.getElementById('scheduleEnd').value ? new Date(document.getElementById('scheduleEnd').value).toISOString() : null,
                description: document.getElementById('scheduleDesc').value,
                is_active: true
            };
            const r = await fetch('/api/schedule/add', {
                method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)
            });
            const result = await r.json();
            if (result.success) { alert('✅ Расписание добавлено'); location.reload(); }
        });
        async function deleteSchedule(id) {
            if (!confirm('Удалить расписание?')) return;
            const r = await fetch(`/api/schedule/${id}/delete`, { method: 'POST' });
            const result = await r.json();
            if (result.success) { alert('✅ Удалено'); location.reload(); }
        }
    </script>
</body>
</html>
