{% extends "system_settings/base_settings.html" %}

{% block title %}Изменить роль пользователя{% endblock %}

{% block settings_content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">Изменить роль пользователя</h4>
            </div>
            <div class="card-body">
                {% if messages %}
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
                {% endif %}

                <div class="mb-3">
                    <label class="form-label">Email:</label>
                    <p class="form-control-plaintext">{{ user_role.user.email }}</p>
                </div>

                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="update">

                    <div class="mb-3">
                        <label for="name" class="form-label">Имя *</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ user_role.user.name }}"
                            required>
                        <div class="form-text">Полное имя пользователя</div>
                    </div>

                    <div class="mb-3">
                        <label for="role" class="form-label">Роль *</label>
                        <select class="form-select" id="role" name="role" required>
                            {% for role in roles %}
                            <option value="{{ role.code }}" {% if role.code == user_role.role.code %}selected{% endif %}>
                                {{ role.name }} - {{ role.description }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" {% if user_role.is_active %}checked{% endif %}>
                            <label class="form-check-label" for="is_active">
                                Активен
                            </label>
                        </div>
                        <div class="form-text">Снимите галочку, чтобы временно отключить доступ</div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{% url 'system_settings:user_roles:list' %}" class="btn btn-secondary">Отмена</a>
                        <div>
                            <button type="button" class="btn btn-warning me-2" data-bs-toggle="modal"
                                data-bs-target="#regeneratePasswordModal">
                                <i class="bi bi-key-fill"></i> Пересоздать пароль
                            </button>
                            <button type="submit" class="btn btn-primary">Сохранить изменения</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Модальное окно для подтверждения пересоздания пароля -->
        <div class="modal fade" id="regeneratePasswordModal" tabindex="-1"
            aria-labelledby="regeneratePasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-warning">
                        <h5 class="modal-title" id="regeneratePasswordModalLabel">
                            <i class="bi bi-exclamation-triangle-fill"></i> Пересоздать пароль?
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Вы уверены, что хотите создать новый пароль для пользователя <strong>{{ user_role.user.email
                                }}</strong>?</p>
                        <p class="text-muted mb-0">Текущий пароль будет сброшен и больше не будет работать.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                        <form method="post" style="display: inline;">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="regenerate_password">
                            <button type="submit" class="btn btn-warning">Да, пересоздать пароль</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно с новым паролем -->
{% if generated_password %}
<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true"
    data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="passwordModalLabel">
                    <i class="bi bi-check-circle-fill"></i> Пароль успешно пересоздан
                </h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <strong>Важно!</strong> Сохраните этот пароль. Он больше не будет показан.
                </div>

                <p><strong>Email:</strong> {{ user_role.user.email }}</p>

                <div class="mb-3">
                    <label class="form-label"><strong>Новый пароль:</strong></label>
                    <div class="input-group">
                        <input type="text" class="form-control form-control-lg font-monospace" id="generatedPassword"
                            value="{{ generated_password }}" readonly>
                        <button class="btn btn-outline-primary" type="button" onclick="copyPassword()">
                            <i class="bi bi-clipboard"></i> Копировать
                        </button>
                    </div>
                </div>

                <div class="mb-3">
                    <button class="btn btn-outline-success w-100" type="button" onclick="copyCredentials()">
                        <i class="bi bi-clipboard-check"></i> Скопировать логин и пароль
                    </button>
                    <div class="form-text text-center mt-2">Скопирует в формате:
                        <code>{{ user_role.user.email }} / пароль</code></div>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="passwordSavedCheck"
                        onchange="toggleCloseButton()">
                    <label class="form-check-label" for="passwordSavedCheck">
                        Я скопировал(а) пароль
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{% url 'system_settings:user_roles:edit' user_role.pk %}" class="btn btn-success disabled"
                    id="closeModalBtn" disabled>
                    Продолжить редактирование
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    function copyPassword() {
        const passwordInput = document.getElementById('generatedPassword');
        passwordInput.select();
        passwordInput.setSelectionRange(0, 99999); // Для мобильных устройств

        navigator.clipboard.writeText(passwordInput.value).then(function () {
            // Меняем текст кнопки на короткое время
            const btn = event.target.closest('button');
            const originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check-lg"></i> Скопировано!';
            btn.classList.remove('btn-outline-primary');
            btn.classList.add('btn-success');

            setTimeout(function () {
                btn.innerHTML = originalHTML;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-primary');
            }, 2000);
        });
    }

    function copyCredentials() {
        const email = '{{ user_role.user.email }}';
        const password = '{{ generated_password }}';
        const credentials = `${email} / ${password}`;

        navigator.clipboard.writeText(credentials).then(function () {
            const btn = event.target.closest('button');
            const originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check-lg"></i> Скопировано!';
            btn.classList.remove('btn-outline-success');
            btn.classList.add('btn-success');

            setTimeout(function () {
                btn.innerHTML = originalHTML;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-success');
            }, 2000);
        });
    }

    function toggleCloseButton() {
        const checkbox = document.getElementById('passwordSavedCheck');
        const closeBtn = document.getElementById('closeModalBtn');
        if (checkbox.checked) {
            closeBtn.classList.remove('disabled');
            closeBtn.removeAttribute('disabled');
        } else {
            closeBtn.classList.add('disabled');
            closeBtn.setAttribute('disabled', 'disabled');
        }
    }

    // Автоматически показываем модальное окно при загрузке страницы
    document.addEventListener('DOMContentLoaded', function () {
        const passwordModal = new bootstrap.Modal(document.getElementById('passwordModal'));
        passwordModal.show();
    });
</script>
{% endif %}
{% endblock %}