{% extends "base.html" %}

<!-- Заголовок страницы -->
{% block title %}
Работа с МЧД и УКЭП
{% endblock %}

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

<!-- Блок тела -->
{% block body %}
<div class="container mt-4">
    <!-- Заголовок и настройка expirationAlert -->
    <div class="d-flex align-items-center mb-4">
        <h1 class="mb-0 me-4 flex-shrink-0">
            Работа с МЧД и УКЭП
        </h1>

        <!-- 🔍 Поиск — занимает всё свободное место -->
        <div class="input-group flex-grow-1 me-4">
            <span class="input-group-text">
                <i class="bi bi-search"></i>
            </span>
            <input type="text" id="staffTableSearch" class="form-control"
                placeholder="Поиск по ФИО, типу подписи или номеру МЧД...">
            <button type="button" id="clearTableSearchBtn" class="btn btn-outline-secondary">
                <i class="bi bi-x"></i>
            </button>
        </div>

        <!-- ⚠️ Настройка предупреждений -->
        <div class="d-flex align-items-center flex-shrink-0">
            <span class="me-2">Предупреждение за дней:</span>
            <div class="d-flex align-items-center" id="expirationAlertContainer">
                <span id="expirationAlertValue" class="badge bg-secondary fs-6">0</span>
                <button type="button" id="editExpirationAlertBtn" class="btn btn-sm btn-outline-primary ms-2">
                    <i class="bi bi-pencil"></i>
                </button>
            </div>

            <!-- Счетчик сотрудников с истекающими подписями -->
            <div id="expiringCountContainer" class="ms-3" style="display: none;">
                <span id="expiringCountBadge" class="badge bg-warning text-dark fs-6" data-bs-toggle="tooltip"
                    data-bs-placement="bottom" title="Сотрудников с истекающим сроком подписи">
                    0
                </span>
            </div>
        </div>
    </div>

    <!-- Сообщения -->
    <div id="alertContainer"></div>

    <!-- Обновляем таблицу с добавлением сортируемых заголовков -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="staffTable">
                    <thead>
                        <tr>
                            <th data-sort="familyName" style="cursor: pointer;">
                                Фамилия <i class="bi bi-arrow-down-up sort-icon"></i>
                            </th>
                            <th data-sort="givenName" style="cursor: pointer;">
                                Имя <i class="bi bi-arrow-down-up sort-icon"></i>
                            </th>
                            <th data-sort="middleName" style="cursor: pointer;">
                                Отчество <i class="bi bi-arrow-down-up sort-icon"></i>
                            </th>
                            <th data-sort="esiaAuth" style="cursor: pointer;">
                                Тип подписи <i class="bi bi-arrow-down-up sort-icon"></i>
                            </th>
                            <th data-sort="expired_at" style="cursor: pointer;">
                                Срок действия <i class="bi bi-arrow-down-up sort-icon"></i>
                            </th>
                            <th style="width: 100px;">Действия</th>
                        </tr>
                    </thead>
                    <tbody id="staffTableBody">
                        <!-- Данные будут загружены через JS -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Кнопка добавления -->
    <div class="text-end mt-3">
        <button type="button" id="addStaffBtn" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Добавить сотрудника
        </button>
    </div>
</div>

<!-- Модальное окно для добавления сотрудника -->
<div class="modal fade" id="addStaffModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Добавление сотрудника</h5>
                <!-- Поле поиска -->
                <div class="ms-3 w-50">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" id="staffSearchInput" class="form-control" placeholder="Поиск по фамилии...">
                        <button type="button" id="clearSearchBtn" class="btn btn-outline-secondary">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Таблица с фиксированной высотой и прокруткой -->
                <div class="table-responsive" style="max-height: 80vh; overflow-y: auto;">
                    <table class="table table-hover" id="availableStaffTable">
                        <thead>
                            <tr>
                                <th>Фамилия</th>
                                <th>Имя</th>
                                <th>Отчество</th>
                                <th>Специальности</th>
                                <th>Добавить как</th>
                            </tr>
                        </thead>
                        <tbody id="availableStaffTableBody">
                            <!-- Данные будут загружены через JS -->
                        </tbody>
                    </table>
                </div>

                <!-- Индикатор загрузки -->
                <div id="staffLoading" class="text-center py-4" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Загрузка...</span>
                    </div>
                    <p class="mt-2 text-muted">Загрузка данных...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно для редактирования МЧД -->
<div class="modal fade" id="editMCHDModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Настройка МЧД</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="mchdForm">
                    <input type="hidden" id="mchdPractitionerId">
                    <div class="mb-3">
                        <label for="mchdNumber" class="form-label">Номер МЧД</label>
                        <input type="text" class="form-control" id="mchdNumber" required>
                    </div>
                    <div class="mb-3">
                        <label for="mchdExpiryDate" class="form-label">Дата окончания действия</label>
                        <input type="date" class="form-control" id="mchdExpiryDate" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="saveMCHDBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно для редактирования УКЭП -->
<div class="modal fade" id="editUKEPModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Настройка УКЭП</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="ukepForm">
                    <input type="hidden" id="ukepPractitionerId">
                    <div class="mb-3">
                        <label for="ukepFile" class="form-label">Файл УКЭП (.p7s)</label>
                        <input type="file" class="form-control" id="ukepFile" accept=".p7s" required>
                    </div>
                    <div class="mb-3">
                        <label for="ukepExpiryDate" class="form-label">Дата окончания действия</label>
                        <input type="date" class="form-control" id="ukepExpiryDate" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="saveUKEPBtn">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно подтверждения удаления -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение удаления</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Вы уверены, что хотите удалить данные сотрудника?</p>
                <p class="text-danger fw-bold">Это действие нельзя отменить.</p>
                <input type="hidden" id="deletePractitionerId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Удалить</button>
            </div>
        </div>
    </div>
</div>

<!-- Окно для отображения номера МЧД -->
<div id="attorneyPopup" class="position-fixed bg-white border rounded shadow p-3"
    style="display: none; z-index: 1060; max-width: 400px;">
    <div class="d-flex justify-content-between align-items-start mb-2">
        <h6 class="mb-0">Номер МЧД</h6>
        <button type="button" class="btn-close btn-sm" id="closeAttorneyPopupBtn"></button>
    </div>
    <div class="mb-2">
        <code id="attorneyNumber" class="d-block p-2 bg-light rounded"></code>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-outline-primary" id="copyAttorneyBtn">
            <i class="bi bi-clipboard"></i> Копировать
        </button>
        <button type="button" class="btn btn-sm btn-secondary" id="closeAttorneyBtn">Закрыть</button>
    </div>
</div>
{% endblock %}

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