{% extends "layout2.html" %}
{% load i18n static %}

{% block css_include %}
<link href="{% static 'plugins/ace/monokai.css' %}" rel="stylesheet"/>
{% endblock %}

{% block js_include %}
  <script src="{% static 'plugins/ace/ace.js' %}"></script>
  <script src="{% static 'plugins/ace/mode-django.js' %}"></script>
  <script src="{% static 'plugins/ace/mode-css.js' %}"></script>
  <script src="{% static 'plugins/ace/ext-language_tools.js' %}"></script>
  <script src="{% static 'js/portal/template_edit.js' %}"></script>
{% endblock %}

{% block content %}

<section class="content" id="template_edit_vue">
  <form id="portal_template_form" class="form-horizontal bootstrap-validator-form" @submit.prevent="save_form" method="post" novalidate="novalidate">
    {% csrf_token %}
    <div class="row">
      <div class="col-md-12">
        {% if form.non_field_errors or save_error %}
          <div class="panel panel-colorful panel-danger">
            <div class="panel-heading">
              {# If there is save/configuration errors #}
              {% if save_error %}
                <ul class="nav nav-tabs pull-right ui-sortable-handle">
                  <li class="active"><a href="#tab_1" data-toggle="tab">{% translate "Message" %}</a></li>
                  <li><a href="#tab_2" data-toggle="tab">{% translate "Advanced informations" %}</a></li>
                </ul>
                <h4 class="panel-title">Configuration error</h4>
              {% endif %}
            </div>
            <div class="panel-body">
              {# Print form errors correctly #}
              {% if form.non_field_errors %}
                <div>
                  <h4><i class="icon fa fa-ban"></i> {% translate "Form errors" %} </h4>
                  <div class="tab-content no-padding">
                    {{ form.non_field_errors|safe }}
                  </div>
                </div>
              {% endif %}
              {# If there is save/configuration errors #}
              {% if save_error %}
                <div class="tab-content no-padding">
                <div class="tab-pane active" id="tab_1">
                    <pre class="console-type">{{ save_error.0 }}</pre>
                </div>
                <div class="tab-pane" id="tab_2">
                    <pre class="console-type">{{ save_error.1 }}</pre>
                </div>
                </div>
              {% endif %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>


    <div class="row">
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-control">
            <div class="btn-group btn-flat">
              <a type="button" href="{% url 'portal.template.list' %}" class="btn btn-flat btn-warning">{% translate "Cancel" %}</a>&nbsp;&nbsp;
              <button type="submit" id="save_form_btn" class="btn btn-primary btn-flat pull-right">{% translate "Submit" %}</button>
            </div>
          </div>
          <h3 class="panel-title">{% translate "Portal templates" %}</h3>
        </div>
        <div class="panel-body">
          <div class="nav-tabs-custom nav-tabs-no-margin">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_general" data-toggle="tab">{% translate "General" %}</a></li>
              <li class=""><a href="#tab_style" data-toggle="tab">{% translate "Style" %}</a></li>
              <li class=""><a href="#tab_login" data-toggle="tab">{% translate "Login" %}</a></li>
              <li class=""><a href="#tab_logout" data-toggle="tab">{% translate "Logout" %}</a></li>
              <li class=""><a href="#tab_learning" data-toggle="tab">{% translate "Learning" %}</a></li>
              <li class=""><a href="#tab_self" data-toggle="tab">{% translate "Self-Service" %}</a></li>
              <li class=""><a href="#tab_password" data-toggle="tab">{% translate "Password" %}</a></li>
              <li class=""><a href="#tab_dialogs" data-toggle="tab">{% translate "Email & Dialogs" %}</a></li>
              <li class=""><a href="#tab_otp" data-toggle="tab">{% translate "OTP" %}</a></li>
              <li class=""><a href="#tab_message" data-toggle="tab">{% translate "Message" %}</a></li>
              <li class=""><a href="#tab_errors" data-toggle="tab">{% translate "HTML Errors" %}</a></li>
              <li class=""><a href="#tab_registration" data-toggle="tab">{% translate "User Registration" %}</a></li>
            </ul>

            <div class="tab-content">
              
              <div class="tab-pane active" id="tab_general">
                <br/>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="col-sm-4 control-label">{% translate "Friendly name" %}</label>
                      <div class="col-sm-5">
                        {{form.name}}
                        {{form.name.errors|safe}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab-pane" id="tab_style">
                <br/>
                {% include "./style.html" %}
              </div>

              <div class="tab-pane" id="tab_login">
                <br/>
                {% include "./login.html" %}
              </div>

              <div class="tab-pane" id="tab_logout">
                <br/>
                {% include "./logout.html" %}
              </div>

              <div class="tab-pane" id="tab_learning">
                <br/>
                {% include "./learning.html" %}
              </div>

              <div class="tab-pane" id="tab_self">
                <br/>
                {% include "./self.html" %}
              </div>

              <div class="tab-pane" id="tab_password">
                <br/>
                {% include "./password.html" %}
              </div>

              <div class="tab-pane" id="tab_dialogs">
                <br/>
                {% include "./dialogs.html" %}
              </div>

              <div class="tab-pane" id="tab_otp">
                <br/>
                {% include "./otp.html" %}
              </div>

              <div class="tab-pane" id="tab_message">
                <br/>
                {% include "./message.html" %}
              </div>

              <div class="tab-pane" id="tab_errors">
                <br/>
                {% include "./errors.html" %}
              </div>

              <div class="tab-pane" id="tab_registration">
                <br/>
                {% include "./registration.html" %}
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</section>

{% endblock %}

{% block jquery_code %}
  let images_list = {}
  let portal_template_uri = "{% url 'portal.template.list' %}"
  let portal_template_api_uri = "{% url 'api.portal.template' %}";

  let object_id = "{{ object_id }}";

  if (!String.prototype.endsWith) {
    String.prototype.endsWith = function(searchString, position) {
      var subjectString = this.toString();
      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
        position = subjectString.length;
      }
      position -= searchString.length;
      var lastIndex = subjectString.lastIndexOf(searchString, position);
      return lastIndex !== -1 && lastIndex === position;
    };
  }

  $(function() {

    /* Switchery mandatory code */
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
      elems.forEach(function(html) {
      var switchery = new Switchery(html, {
        'color': '#FA9834',
      });
    });


    function handle_form_errors(data){
      if (typeof(data['form_errors']) !== 'undefined'){
        $('.errorlist').remove();
        $.each(data['form_errors'], function(field_name, error_list){
          field_selector = $('#id_'+field_name);
          var ul = $('<ul/>').insertAfter(field_selector);
          $.each(error_list, function(idx, err_msg){
            console.log(err_msg);
            var li = $('<li/>').addClass('errorlist').attr('role', 'menuitem').appendTo(ul);
            var group = $('<span/>').text(err_msg).appendTo(li);
          });
        });
      }
    }


    /* All events to refresh (re-apply) after a table is modified */
    function refresh_table_events() {

      /* Function used to delete an object .btnDelete */
      $('.btnDelete').on('click', function(e) {
        $(this).parent().parent().remove();
      });
      /* Re-initialize select2 objects */
      $('.select2').select2();

      /* Re-initialize Tag-Editor events */
      /* Try to destroy old tag-editor elements */
      try { $(".tag-editor-space").tagEditor('destroy');
      } catch(e) {};
      try { $(".tag-editor-comma").tagEditor('destroy');
      } catch(e) {};
      /* And re-add TagEditor behavior for tag-editor custom classes */
      $(".tag-editor-space").tagEditor({
        delimiter: ' '
      });
      $(".tag-editor-comma").tagEditor({
        delimiter: ','
      });
    }

    /* Parser test */
    $('#parser_test').on("click", function(e) {
      $('#parser_status').html('<i class="fas fa-spinner fa-spin"></i>{% translate "Testing ..." %}');
      $('#result').val('');

      url = "/apps/parser/test/";
      form_data = $('#parser_edit_form').serializeArray();
      $.ajax({
        type   : "POST",
        url    : url,
        data: form_data
      }) // /$.ajax
      .fail( function( jqXHR, textStatus ) {
        $('#parser_status').html("<b style='color:red;'>{% translate 'API request failure: '%}" + textStatus + "</b></br>" +
                                     "Status code : " + jqXHR.status + "</br>" +
                                     "Message : " + jqXHR.statusText);
      }) // /$.fail
      .done( function( msg ) {
        handle_form_errors(msg);
        if( msg['status'] ) {
          $('#parser_status').html('<b style="color:green;">{% translate "Successful connection" %}</b>');
          const message_type = $.type(msg['message']);
          if( message_type === "object" || message_type === "array" ) {
            $('#result').html(JSON.stringify(msg['message'], undefined, 4));
          } else {
            $('#result').html(msg['message']);
          }
        } else {
          reason = msg['error'];
          $('#parser_status').html("<b style='color:red;'>{% translate 'Cannot retrieve asked url, reason: '%}" + reason + "</b>");
        }
      }); // /$.done
      e.preventDefault();
    });

    $('.tag-editor').css({"min-width": "100px"});

    /* Initialize all custom fields */
    refresh_table_events();

  setTimeout(() => {
    axios.get("/api/v1/portal/images/")
      .then((response) => {

        $('.availables_image').empty()
        for (let image of response.data.res) {
          let data = {
            id: image.id,
            name: image.name,
            preview: image.create_preview_html,
            uri: image.get_image_uri
          }

          images_list[`image_${data.id}`] = {
            name: image.name,
            preview: image.create_preview_html,
            uri: image.get_image_uri
          }

          $('.availables_image').append(`
          <tr>
            <td>${data.name}</td>
            <td><img style="width: 100%;" src="${data.preview}"/></td>
            <td><b>&#123;&#123;image_${data.id}&#125;&#125;</b></td>
          </tr> 
          `)
        }
      })
  }, 200)

  $(".btn-images").click(function(e) {
    $('#show_images').modal('show')
  })

  }); // end of function()

{% endblock %}