{% extends 'base.html' %}

{% block title %}
| Sistemas
{% endblock title %}
    

{% block content %}
<form id="upload-form">   
    <div class="form-group">
        <input type="file" name="zip_file" required accept=".zip">
    </div>
    <hr>
    <div class="form-group">
        <label for="id_sistema">Sistema </label>
        <select id="id_sistema" name="sistema" required class="form-control">
            {% for sistema in sistemas %}
                <option value="{{ sistema.id }}">{{ sistema.nombre_sistema }} ({{ sistema.version }})</option>
            {% endfor %}
        </select>
    </div>
    
    <div class="form-group row">
        
        <div class="col-sm-2">
            <label for="anio" >Año:</label>
            <input type="number" id="anio" name="anio" class="form-control" required min="23" max="30">
        </div>
        
        <div class="col-sm-2">
            <label for="mes" >Mes:</label>
            <input type="number" id="mes" name="mes" class="form-control" required min="1" max="12">
        </div>
        
        <div class="col-sm-2">
            <label for="mayor" >Mayor:</label>
            <input type="number" id="mayor" name="mayor" class="form-control" required min="0" max="99" value="0">
        </div>
        
        <div class="col-sm-2">
            <label for="menor">Menor:</label>
            <input type="number" id="menor" name="menor" class="form-control" required min="0" max="99" value="0">
        </div>
    </div>
    <div class="form-group">
        <label for="id_version">version </label>
        <input id="id_version" type="text" name="version" class="form-control" required>
    </div>
    <button class="btn btn-primary" type="submit">Upload</button>
</form>
<input type="hidden" id="id_token" name="token" value="{{ token }}">
{% endblock content %}

{% block scripts %}
<script>
    var actualVersionSystem = document.querySelector('#id_sistema')
    
    var currentYear = (new Date()).getFullYear();
    var currentMonthNUm = (new Date()).getMonth() +1;
    

    var anio = document.getElementById("anio");
    anio.value = currentYear.toString().slice(-2);
    
    var mes = document.getElementById("mes");        
    mes.value = currentMonthNUm.toString()//.padStart(2,"0");


    var mayor = document.getElementById("mayor");
    var menor = document.getElementById("menor");
    var version = document.getElementById("id_version");

    anio.addEventListener("change", updateVersion);
    mes.addEventListener("change", updateVersion);
    mayor.addEventListener("change", updateVersion);
    menor.addEventListener("change", updateVersion);
    
    actualVersionSystem.addEventListener('change',()=>{
        getActualVersion()
    })

    actualVersionSystem.addEventListener('load', getActualVersion())

    function getActualVersion(){
        let options = actualVersionSystem.options;
        let selectedIndex = actualVersionSystem.selectedIndex;
        let selectedOption = options[selectedIndex];
        
        let sistemaId = selectedOption.value;
        let sistemaVersion = selectedOption.text.match(/\((.*)\)/)[1];
        let sistemaVersionArray = sistemaVersion.split(".");
        anio.value =sistemaVersionArray[0]
        mes.value  =sistemaVersionArray[1]
        mayor.value=sistemaVersionArray[2]
        menor.value=sistemaVersionArray[3]
        
        version.value = sistemaVersion
        //console.log(sistemaVersion, sistemaVersionArray)
    }

    function updateVersion() {
        
        version.value = anio.value.toString()+"."+mes.value.toString() +"."+mayor.value.toString()+"."+menor.value.toString();
    }
    
    document.getElementById('upload-form').addEventListener('submit', function (event) {
      event.preventDefault();
      let formData = new FormData(event.target);
      let token = document.getElementById("id_token").value;
      fetch(`{% url 'uploadZip' %}`, {
        method: 'POST',
        body: formData,
        headers: {
          'Authorization': 'Token ' + token,
        },
      })
      .then(function (response) {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(function (data) {
        console.log(data);
        window.location.reload();
      })
      .catch(function (error) {
        console.error(error);
      });
    });
  
    
  </script>

{% endblock scripts %}