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

{% block page_title %}{% trans PAGE_TITLE %}{% endblock %}
{% block header_nav_brand %}
    <a class="nav-link text-white link-light link-underline link-underline-opacity-0" href="{% url 'scst_proxy:main' %}">Прокси-сервер альянса</a>
{% endblock header_nav_brand %}


{% 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-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 class="row">
                <div class="col">
                  Сначала выполните все шаги в инструкции, после чего можете запросить ваш пароль.
                </div>
            </div>
        </div>
    </div>
    <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 "Вход на прокси-сервер" %}</h3>
        </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 bnt-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 bnt-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>

<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-dismiss="modal"
              data-bs-dismiss="modal"
            >
              Закрыть
            </button>
            <button id="clipboardBtn" type="button" class="btn btn-primary" onclick=""><i class="fa-regular fa-clipboard mr-2"></i>  В Буфер</button>
          </div>
        </div>
      </div>
    
    
    </div>


<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('#apiButton').click(function() {
        $.ajax({
            url: "{% url 'scst_proxy:call_api' %}",
            method: "POST",
            dataType: "json",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                $('#apiButton').prop('disabled', true);
                $('#resultMessage').hide();
            },
            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');
                btn.removeEventListener('click',(e)=>{
                    e.preventDefault();
                    copyToClipboard(data.password);
                });
                btn.addEventListener('click', (e)=>{
                    e.preventDefault();
                    copyToClipboard(data.password);
                });
            },
            error: function(xhr) {
                var message = "Произошла ошибка. Попробуйте еще раз. Если ошибка сохранится, обратитесь к администратору.\r\n" + xhr.message;
                $('#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);
  }
}

</script>
<style>
    .proxyreg img {
        max-height:  400px;
    }
</style>
{% endblock %}