{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load static %}

{% block page_title %}{% trans PAGE_TITLE %}{% endblock %}

{% block content %}
<div class="aa-plugin-container proxyreg">
    <div class="panel panel-default pb-4 pt-4 mb-4 container border border-4 border-dark">
        <div class="panel-heading">
            <h4 class="panel-title">{% trans "Вход на прокси-сервер" %}</h4>
        </div>
        <div class="panel-body container">
            <div class="pt-4 pb-2 row">
                <div class="col col-2">Адрес сервера:</div>
                <div class="col">
                    <b>{{ PROXY_URL }}</b> <input type="hidden" id="serverInput" value="{{ PROXY_URL }}" /> <button class="btn btn-sm btn-secondary" id="urlClipboard"><i class="fa-regular fa-clipboard"></i></button>
                </div>
            </div>
            <div class="pt-2 pb-2 row">
                <div class="col col-2">Ваш логин:</div>
                <div class="col">
                    <b>{{ CHARACTER_NAME }}</b> <input type="hidden" id="loginInput" disabled value="{{ CHARACTER_NAME }}" /> <button class="btn btn-sm btn-secondary" id="loginClipboard"><i class="fa-regular fa-clipboard"></i></button>
                </div>
            </div>
            <div class="pb-4">
                <button id="apiButton" class="btn btn-primary p-2">{% trans "Получить пароль" %}</button>
                <br />
                <small class="text-warning pt-4">
                    Пароль не хранится на сервере. Для получения нового пароля нажмите "Получить пароль"
                </small>
            </div>
            <div class="pb-3">
                <div id="resultMessage" class="alert" style="display: none; margin-top: 15px;"></div>
            </div>
        </div>
    </div>
    <div class="panel panel-default pb-4 pt-4 mb-4 container border border-4 border-dark">
        <div class="panel-body container">
            <div class="row">
                <div class="col">
                    <a href="https://docs.google.com/document/d/1UIOhdmiSoY2HsmS5bJ_H8H4MbUVT6aC521kmO0pKEiI/edit?usp=sharing" target="_blank">Инструкция по настройке</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirm-dialog" tabindex="-1" role="dialog" aria-labelledby="confirmDialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDialog">Пароль обновлен</h5>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Закрыть
                </button>
                <button id="clipboardBtn" type="button" class="btn btn-primary"><i class="fa-regular fa-clipboard me-2"></i>В буфер</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_script %}
$('#apiButton').click(function() {
    $('#apiButton').prop('disabled', true);
    $('#resultMessage').hide();

    $.ajax({
        url: "{% url 'scst_proxy:call_api' %}",
        method: "POST",
        dataType: "json",
        headers: {"X-CSRFToken": "{{ csrf_token }}"},
        success: function(data) {
            var message = "Ваш новый пароль: <b class='text-danger'>" + data.password + "</b><br/><br/>Запомните или запишите свой пароль. Мы не храним ваши пароли.";
            $('.modal-body').html(message);
            var successModal = new bootstrap.Modal(document.getElementById('confirm-dialog'), {});
            successModal.show();

            var btn = document.getElementById('clipboardBtn');
            var password = data.password;
            btn.onclick = function(e) {
                e.preventDefault();
                copyToClipboard(password);
            };
        },
        error: function(xhr) {
            var message = "Произошла ошибка. Попробуйте еще раз. Если ошибка сохранится, обратитесь к администратору.\r\n" + (xhr.responseText || xhr.statusText);
            $('#resultMessage').removeClass('alert-success').addClass('alert-danger').text(message).show();
        },
        complete: function() {
            $('#apiButton').prop('disabled', false);
        }
    });
});

$('#loginClipboard').click(function() {
    copyToClipboard($('#loginInput').val());
});
$('#urlClipboard').click(function() {
    copyToClipboard($('#serverInput').val());
});

async function copyToClipboard(textToCopy) {
    try {
        await navigator.clipboard.writeText(textToCopy);
        console.log('Text copied to clipboard successfully!');
    } catch (err) {
        console.error('Failed to copy text: ', err);
    }
}
{% endblock extra_script %}