{% extends "base.html" %}
{% block title %}Регионы и системы{% endblock %}
{% block content %}
    <div class="container">
        <h2 class="mb-4">Регионы и системы</h2>

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="regions-tab" data-bs-toggle="tab" data-bs-target="#regions" type="button" role="tab" aria-controls="regions" aria-selected="true">Регионы</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="systems-tab" data-bs-toggle="tab" data-bs-target="#systems" type="button" role="tab" aria-controls="systems" aria-selected="false">Системы</button>
            </li>
        </ul>

        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="regions" role="tabpanel" aria-labelledby="regions-tab">
                <div class="mt-4">
                    <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addRegionModal">
                        <i class="bi bi-plus-circle"></i> Добавить регион
                    </button>

                    <div class="modal fade" id="addRegionModal" tabindex="-1" aria-labelledby="addRegionModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="addRegionModalLabel">Добавить регион</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="add-region-form">
                                        <div class="mb-3">
                                            <label for="region-id" class="form-label">ID региона</label>
                                            <input type="text" class="form-control" id="region-id" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="region-name" class="form-label">Название региона</label>
                                            <input type="text" class="form-control" id="region-name" required>
                                        </div>
                                        <div class="mb-3 form-check">
                                            <input type="checkbox" class="form-check-input" id="region-active" checked>
                                            <label class="form-check-label" for="region-active">Активен</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                                    <button type="submit" form="add-region-form" class="btn btn-primary">Добавить</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th style="width: 10%; cursor: pointer;" data-sort="region_id">ID</th>
                                <th style="width: 50%; cursor: pointer;" data-sort="name">Название</th>
                                <th style="width: 20%; cursor: pointer;" data-sort="active">Статус</th>
                                <th style="width: 20%;">Действия</th>
                            </tr>
                            </thead>
                            <tbody id="regions-table">
                            </tbody>
                        </table>
                    </div>

                    <nav aria-label="Regions navigation">
                        <ul class="pagination justify-content-center" id="pagination-regions">
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="tab-pane fade" id="systems" role="tabpanel" aria-labelledby="systems-tab">
                <div class="mt-4">
                    <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addSystemModal">
                        <i class="bi bi-plus-circle"></i> Добавить систему
                    </button>

                    <div class="modal fade" id="addSystemModal" tabindex="-1" aria-labelledby="addSystemModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="addSystemModalLabel">Добавить систему</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="add-system-form">
                                        <div class="mb-3">
                                            <label for="system-id" class="form-label">ID системы</label>
                                            <input type="text" class="form-control" id="system-id" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="system-name-lat" class="form-label">Название системы (латиница)</label>
                                            <input type="text" class="form-control" id="system-name-lat" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="system-name-cyr" class="form-label">Название системы (кириллица)</label>
                                            <input type="text" class="form-control" id="system-name-cyr" required>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                                    <button type="submit" form="add-system-form" class="btn btn-primary">Добавить</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th style="width: 10%; cursor: pointer;" data-sort="system_id">ID</th>
                                <th style="width: 25%; cursor: pointer;" data-sort="system_name">Название (латиница)</th>
                                <th style="width: 25%; cursor: pointer;" data-sort="name">Название (кириллица)</th>
                                <th style="width: 20%;">Действия</th>
                            </tr>
                            </thead>
                            <tbody id="systems-table">
                            </tbody>
                        </table>
                    </div>

                    <nav aria-label="Systems navigation">
                        <ul class="pagination justify-content-center" id="pagination-systems">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    {#   Модальное окно для редактирования региона#}
    <div class="modal fade" id="editRegionNameModal" tabindex="-1" aria-labelledby="editRegionNameModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editRegionNameModalLabel">Изменить название региона</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="edit-region-name-form">
                        <div class="mb-3">
                            <label for="old-region-name" class="form-label">Прошлое название</label>
                            <input type="text" class="form-control" id="old-region-name" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="new-region-name" class="form-label">Новое название</label>
                            <input type="text" class="form-control" id="new-region-name" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <span id="edit-region-name-timer" class="me-2">5</span>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <button type="submit" form="edit-region-name-form" class="btn btn-primary" id="save-region-name-btn" disabled>Сохранить изменения</button>
                </div>
            </div>
        </div>
    </div>
    {#   Модальное окно для удаления региона#}
    <div class="modal fade" id="deleteRegionModal" tabindex="-1" aria-labelledby="deleteRegionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteRegionModalLabel">Подтверждение удаления</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <p>Для подтверждения удаления введите слово "УДАЛИТЬ" большими буквами:</p>
                    <input type="text" id="deleteConfirmationInput" class="form-control">
                </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" disabled>Удалить</button>
                </div>
            </div>
        </div>
    </div>
    {#    Модальное окно для отображения подписчиков региона #}
    <div class="modal fade" id="regionSubscribersModal" tabindex="-1" aria-labelledby="regionSubscribersModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="regionSubscribersModalLabel">Подписчики региона</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>Telegram ID</th>
                                <th>Email</th>
                            </tr>
                            </thead>
                            <tbody id="regionSubscribersTableBody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>
    {#   Модальное окно для редактирования имени системы#}
    <div class="modal fade" id="editSystemNameModal" tabindex="-1" aria-labelledby="editSystemNameModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editSystemNameModalLabel">Редактировать систему</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <!-- Здесь поля формы -->
                    <input type="hidden" id="edit-system-id" /> <!-- ID системы, скрытое -->
                    <div class="mb-3">
                        <label for="edit-system-name-lat" class="form-label">Латинское имя</label>
                        <input type="text" class="form-control" id="edit-system-name-lat" readonly />
                    </div>
                    <div class="mb-3">
                        <label for="old-system-name" class="form-label">Текущее имя</label>
                        <input type="text" class="form-control" id="old-system-name" readonly />
                    </div>
                    <div class="mb-3">
                        <label for="new-system-name" class="form-label">Новое имя</label>
                        <input type="text" class="form-control" id="new-system-name" />
                    </div>
                    <div>
                        Осталось времени: <span id="edit-system-name-timer">5</span> сек.
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="saveSystemNameBtn" class="btn btn-primary" disabled>Сохранить</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                </div>
            </div>
        </div>
    </div>



    {#   Модальное окно для удаления системы #}
    <div class="modal fade" id="deleteSystemModal" tabindex="-1" aria-labelledby="deleteSystemModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteSystemModalLabel">Подтверждение удаления</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <p>Для подтверждения удаления введите слово "УДАЛИТЬ" большими буквами:</p>
                    <input type="text" id="deleteSystemConfirmationInput" class="form-control">

                </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="confirmDeleteSystemButton" disabled>Удалить</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/regions.js') }}"></script>
{% endblock %}