{% extends "base.html" %}

<!-- Заголовок страницы -->
{% block title %}
ЭДО для MEDODS
{% endblock %}

<!-- Блок шапки -->
{% block head %}
{% endblock %}

<!-- Блок тела -->
{% block body %}
<div class="container mt-4">
    <h1 class="mb-4">Обзор системы</h1>

    <!-- Визуальный блок с карточками и индикатором прогресса -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-4">
                <!-- Карточка способов доставки сообщений -->
                <div class="col-md-4">
                    <div class="p-3 border rounded h-100">
                        <div class="d-flex align-items-start mb-3">
                            <div class="flex-shrink-0">
                                <i class="bi bi-chat-dots fs-4 text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">Каналы доставки</h6>
                                <span id="deliveryStatusBadge" class="badge bg-secondary">Не настроены</span>
                            </div>
                        </div>
                        <div id="deliveryDetails" class="small">
                            <!-- Динамически заполняемые детали -->
                        </div>
                    </div>
                </div>

                <!-- Карточка интеграции с Медодс -->
                <div class="col-md-4">
                    <div class="p-3 border rounded h-100">
                        <div class="d-flex align-items-start mb-3">
                            <div class="flex-shrink-0">
                                <i class="bi bi-heart-pulse fs-4 text-danger"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">Интеграция с Медодс</h6>
                                <span id="medodsStatusBadge" class="badge bg-secondary">Не настроен</span>
                            </div>
                        </div>
                        <div id="medodsDetails" class="small">
                            <!-- Динамически заполняемые детали -->
                        </div>
                    </div>
                </div>

                <!-- Карточка интеграции с N3Health -->
                <div class="col-md-4">
                    <div class="p-3 border rounded h-100">
                        <div class="d-flex align-items-start mb-3">
                            <div class="flex-shrink-0">
                                <i class="bi bi-hospital fs-4 text-success"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">Интеграция с N3Health</h6>
                                <span id="n3healthStatusBadge" class="badge bg-secondary">Не настроен</span>
                            </div>
                        </div>
                        <div id="n3healthDetails" class="small">
                            <!-- Динамически заполняемые детали -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Индикатор готовности системы с кнопкой настроек -->
            <div class="mt-4 pt-4 border-top">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="flex-grow-1 me-3">
                        <div class="d-flex align-items-center mb-2">
                            <h6 class="mb-0 me-3">Готовность системы:</h6>
                            <div id="systemReadiness" class="progress flex-grow-1" style="height: 20px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                    style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                        </div>
                        <p class="text-muted small mb-0" id="readinessDescription">
                            Все интеграции требуют настройки
                        </p>
                    </div>

                    <!-- Кнопка настроек (будет скрыта при 100% готовности) -->
                    <div id="settingsButtonContainer">
                        <a href="/settings" class="btn btn-primary">
                            <i class="bi bi-gear"></i> Настроить
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- БЛОК СТАТИСТИКИ СОТРУДНИКОВ -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-white d-flex align-items-center">
                    <i class="bi bi-people fs-4 me-2"></i>
                    <h5 class="mb-0 flex-grow-1">Статистика сотрудников</h5>
                    <a href="/staff" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-arrow-right"></i> Перейти к управлению
                    </a>
                </div>
                <div class="card-body">
                    <!-- Счетчики сотрудников -->
                    <div class="row g-4 mb-4">
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-people fs-1 text-primary"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Всего сотрудников</h6>
                                    <span id="totalEmployeesCount" class="h3 fw-bold">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-filetype-key fs-1 text-success"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">УКЭП</h6>
                                    <span id="ukepEmployeesCount" class="h3 fw-bold text-success">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-motherboard fs-1 text-warning"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">МЧД</h6>
                                    <span id="mchdEmployeesCount" class="h3 fw-bold text-warning">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-exclamation-triangle fs-1 text-danger"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1">Истекают скоро</h6>
                                    <span id="expiringEmployeesCount" class="h3 fw-bold text-danger">0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Список сотрудников с истекающими подписями -->
                    <div id="expiringEmployeesContainer" style="display: none;">
                        <div class="d-flex align-items-center mb-3">
                            <h6 class="mb-0 me-2">
                                <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>
                                Сотрудники с истекающими подписями
                            </h6>
                            <span id="expiringThresholdDays" class="badge bg-secondary"></span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover" id="expiringEmployeesTable">
                                <thead>
                                    <tr>
                                        <th>ФИО</th>
                                        <th>Тип подписи</th>
                                        <th>Дата окончания</th>
                                        <th>Осталось дней</th>
                                    </tr>
                                </thead>
                                <tbody id="expiringEmployeesTableBody">
                                    <!-- Данные будут загружены через JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Сообщение об отсутствии истекающих подписей -->
                    <div id="noExpiringEmployeesMessage" class="text-center text-muted py-4" style="display: none;">
                        <i class="bi bi-check-circle-fill text-success fs-2"></i>
                        <p class="mt-2 mb-0">Нет сотрудников с истекающими подписями</p>
                        <small>Порог предупреждения: <span id="noExpiringThresholdDays">0</span> дней</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- Блок скриптов -->
{% block scripts %}
<script src="{{ url_for('static', path='js/index.js') }}"></script>
{% endblock %}