{% extends 'base.html' %}

{% block content %}
    <head>
        <title>Пользователи</title>
    </head>
    <div class="container">
        <h1>Пользователи</h1>

        <button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#addUserModal">Добавить пользователя</button>
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#searchUsersModal">Поиск</button>
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="users-table">
                <thead>
                <tr>
                    <th style="width: 8%;">Chat ID</th>
                    <th style="width: 15%;">Telegram ID</th>
                    <th style="width: 20%;">Email</th>
                    <th style="width: 20%;">Подписки</th>
                    <th style="width: 15%;">Тип уведомлений</th>
                    <th style="width: 10%;">Статус</th>
                    <th style="width: 12%;">Действия</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            </div>
        </div>

        <nav>
            <ul class="pagination" id="pagination">
            </ul>
        </nav>

{#    Модальное окно карточки пользователя #}
    <div id="userModal" class="modal fade" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">Редактирование пользователя</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Chat ID: <span id="userId"></span></p>
                    <p>Telegram ID: <span id="telegram_id"></span></p>
                    <p>Email: <span id="userEmail"></span></p>

                    <div class="mt-3">
                        <h6>События пользователя:</h6>
                        <div class="overflow-auto" style="max-height: 300px;">
                            <table class="table table-bordered table-striped" id="userEventsTable">
                                <thead>
                                <tr>
                                    <th class="text-nowrap">Действие</th>
                                    <th class="text-nowrap">Время</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="toggleBlockUser" class="btn btn-warning">Заблокировать</button>
                    <button id="deleteUser" class="btn btn-danger">Удалить</button>
                </div>
            </div>
        </div>
    </div>

    <div id="addUserModal" class="modal fade" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addUserModalLabel">Добавить пользователя</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newUserId" class="form-label">Chat ID</label>
                        <input type="number" class="form-control" id="newUserId" min="1" maxlength="32" title="Введите числовое значение (максимум 32 символа)">
                    </div>
                    <div class="mb-3">
                        <label for="newUsername" class="form-label">Telegram ID</label>
                        <input type="text" class="form-control" id="newUsername" pattern="@.*" title="Начните с символа @">
                    </div>
                    <div class="mb-3">
                        <label for="newUserEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="newUserEmail" pattern=".*@rtmis\.ru$" title="Должен содержать домен @rtmis.ru">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="addNewUser" class="btn btn-success">Добавить</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userEventsModal" tabindex="-1" role="dialog" aria-labelledby="userEventsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userEventsModalLabel">Действия пользователя</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="userEventsModalBody" style="max-height: 400px; overflow-y: auto;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>
{#    Модальное окно для удаления пользователя #}
    <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmationModalLabel">Подтверждение удаления</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Для подтверждения удаления пользователя введите слово "УДАЛИТЬ" в поле ниже:</p>
                    <label for="confirmationText"></label><input type="text" id="confirmationText" class="form-control" placeholder="УДАЛИТЬ">
                </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="confirmDeleteButton">Удалить</button>
                </div>
            </div>
        </div>
    </div>
{# Модальное окно поиска#}
    <div class="modal fade" id="searchUsersModal" tabindex="-1" aria-labelledby="searchUsersModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchUsersModalLabel">Поиск пользователей</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="searchTelegramId" class="form-label">Telegram ID</label>
                        <input type="text" class="form-control" id="searchTelegramId">
                    </div>
                    <div class="mb-3">
                        <label for="searchEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="searchEmail">
                    </div>
                    {# Поле ФИО будет добавлено позже #}
                    <div id="searchResults" style="display: none;">
                        <h3>Результаты поиска:</h3>
                        <table class="table table-bordered table-striped" id="searchResultsTableModal">
                            <thead>
                            <tr>
                                <th style="width: 8%;">Chat ID</th>
                                <th style="width: 15%;">Telegram ID</th>
                                <th style="width: 20%;">Email</th>
                                <th style="width: 12%;">Действия</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="searchUsersButton" class="btn btn-primary">Поиск</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/users.js') }}"></script>
{% endblock %}