{% extends 'base.html' %}


{% block content %}
    <h1>Create a new Sistema IMMEX por cliente</h1>
    <form method="post">

        {% csrf_token %}
        {% if form.non_field_errors %}
          <div class="alert alert-danger" role="alert">
            {% for error in form.non_field_errors %}
            <p>{{ error }}</p>
            {% endfor %}
          </div>
        {% endif %}
        <div class="">
            <div class="form-group">
                <div class="form">
                {{ form.id_sistema.label }}
                {{ form.id_sistema }}
                <button id="add-sistema-btn" type="button" class="btn btn-info">Add Sistema</button>
                {% if form.id_sistema.errors %}
                  <ul class="errorlist">
                    {% for error in form.id_sistema.errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
                </div>        
            </div>
            
            <div class="form-group">
            {{ form.cliente.label}}
            {{ form.cliente }}
            <button id="add-cliente-btn" type="button" class="btn btn-info">Add Cliente</button>
            {% if form.cliente.errors %}
              <ul class="errorlist">
                {% for error in form.cliente.errors %}
                <li>{{ error }}</li>
                {% endfor %}
              </ul>
            {% endif %}
            </div>
    
            <div class="form-group">
            {{ form.num_licencias.label }}
            {{ form.num_licencias }}
            {% if form.num_licencias.errors %}
              <ul class="errorlist">
                {% for error in form.num_licencias.errors %}
                <li>{{ error }}</li>
                {% endfor %}
              </ul>
            {% endif %}
            </div>
    
            <button class="btn btn-success" type="submit">Create</button>
        </div>
      </form>
{% endblock content %}


{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        /*add Sistema*/
        document.querySelector('#add-sistema-btn').addEventListener('click', function() {
            let parentWidth = window.innerWidth;
            let parentHeight = window.innerHeight;

            let childWidth = 800;
            let childHeight = 600;
            let left =(parentWidth - childWidth);
            let top = (parentHeight - childHeight);
                        
            let popupWin = window.open("{% url 'create_sistemas_form' %}", "popupWin", "width=" + childWidth + ",height=" + childHeight + ",left=" + left + ",top=" + top);
            popupWin.focus();
        });
        
        /*Add cliente*/
        document.querySelector("#add-cliente-btn").addEventListener('click',()=>{
            let parentWidth = window.innerWidth;
            let parentHeight = window.innerHeight;

            let childWidth = 800;
            let childHeight = 600;
            let left =(parentWidth - childWidth);
            let top = (parentHeight - childHeight);
            
            
            let popupWin = window.open("{% url 'ClientesIMMEX_Create' %}", "popupWin", "width=" + childWidth + ",height=" + childHeight + ",left=" + left + ",top=" + top);
            popupWin.focus();
        });


        window.addEventListener('message', function(event) {
          let response = event.data.data;

          let windowName = event.data.windowName;          
          if(windowName==='clientWindow'){
            let id_cliente = response.id;
            let Nombre = response.Nombre;
            let option= `<option value="${id_cliente}" selected> ${Nombre}</option>`;
            document.querySelector("#id_cliente").insertAdjacentHTML('beforeend',option);
            
          }
          else if (windowName==='sistemaWindow'){
            let id_sistema = response.id;
            let nombre_sistema = response.nombre_sistema;
            let version = response.version;
            let option = '<option value="' + id_sistema + '" selected>' + nombre_sistema + ', version ' + version + '</option>';
            document.querySelector('#id_id_sistema').insertAdjacentHTML('beforeend', option);
            
          }
          
        });
    });

  </script>
{% endblock scripts %}