<!-- edit_device.html -->
{% extends 'navbar/navbar.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Edit Device</title>
    </head>
{% block edit_device %}
<body>
    <h2 class='title-text'>Edit Device</h2>
    <form method="post" class='edit-form'>
        {% csrf_token %}
        <table>
            <div calss="edit-section">
               <div class="first-raw">
                  <div class="input-raw">
                     <span>Identifier name:</span>
                     <input type="text" name="identifier_name" value="liphydevice112" maxlength="50" required="" id="id_identifier_name" />
                  </div>
                  <div class="input-raw">
                     <span for="id_device_name">Device name:</span>
                     <input type="text" name="device_name" value="li-phy board" maxlength="50" required="" id="id_device_name">
                  </div>
               </div>
               <div class="first-raw">
                  <div class="input-raw">
                     <span for="id_operating_system">Operating system:</span>
                     <input type="text" name="operating_system" value="mac os" maxlength="50" required="" id="id_operating_system">
                  </div>
                  <div class="input-raw">
                     <span for="id_department">Department:</span>
                     <input type="text" name="department" value="main" maxlength="50" required="" id="id_department">
                  </div>
               </div>
               <div class="first-raw">
                  <div class="input-raw">              
                     <span for="id_used_by">Used by:</span>
                     {{ form.used_by }}                    
                  </div>
                  <div class="input-raw">
                     <span for="id_zone">Zone:</span>
                     <input type="text" name="zone" value="usa" maxlength="50" required="" id="id_zone">
                  </div>
               </div>
               <div class="first-raw">
                  <div class="input-raw">
                     <span for="id_continents">Continents:</span>
                     <input type="text" name="continents" value="New York" maxlength="50" required="" id="id_continents">
                  </div>
                  <div class="input-raw">
                     <span for="id_region">Region:</span>
                     <input type="text" name="region" value="New York" maxlength="50" required="" id="id_region">
                  </div>
               </div>
               <div class="first-raw">
                  <div class="input-raw">
                     <span for="id_cluster">Cluster:</span>
                     <input type="text" name="cluster" value="Ithaca" maxlength="50" required="" id="id_cluster">
                  </div>
                  <div class="input-raw">
                     <span for="id_pod">Pod:</span>
                     {% comment %} <input type="text" name="pod" value="4498 Norma Avenue" maxlength="50" required="" id="id_pod"> {% endcomment %}
                     <input type="text" name="pod"  id="id_pod" class="podTextInput">
                     <div id="geocoder-container"></div>
                  </div>
               </div>
             </div>
        </table>
        
        {% comment %} <button  class="edit-device-btn" type="submit">Save</button> {% endcomment %}
        <button type="button" id="btnSubmit" class="submit-btn">>. Submit</button>
        {% for field in form %}
                    {% if field.name == "used_by" %}
                        {% if field.errors %}
                            <div class="field-errors">
                                <ul class="errorlist">
                                    {% for error in field.errors %}
                                        <li>{{ error }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
    </form>
    <script>
      mapboxgl.accessToken = '{{ mapbox_access_token }}';
      var geocoder = new MapboxGeocoder({
          accessToken: mapboxgl.accessToken,
          types: 'address,neighborhood,locality,place,region,postcode', 
          placeholder: ' ',
      });
      geocoder.addTo('#geocoder-container');
      geocoder.on('result', function(event) {
          var address = event.result.place_name;
          document.getElementById('id_pod').value = address;
      });

      document.addEventListener("DOMContentLoaded", function() {
          attachValidationHandlers()   
      });
      function attachValidationHandlers() {
          $('#btnSubmit').click(function(){
              $("#id_identifier_name").parent().removeClass("error-class");
              $("#id_device_name").parent().removeClass("error-class");
              $("#id_operating_system").parent().removeClass("error-class"); 
              $("#id_department").parent().removeClass("error-class"); 
              $("#id_used_by").parent().removeClass("error-class"); 
              $("#id_zone").parent().removeClass("error-class"); 
              $("#id_continents").parent().removeClass("error-class"); 
              $("#id_region").parent().removeClass("error-class"); 
              $("#id_cluster").parent().removeClass("error-class"); 
              $("#id_pod").parent().removeClass("error-class"); 
              checkValidation()
              
              var errorCount = $(".error-class").length;
              if(errorCount == 0){
                  $('#btnSubmit').attr('type','submit')
                  $("#formDevice").submit()
              }else{
                  $('#btnSubmit').attr('type','button')
              }
          });
      }

  function checkValidation(){
      let id_identifier_name=$("#id_identifier_name").val();
      let id_device_name=$("#id_device_name").val();
      let id_operating_system=$("#id_operating_system").val();       
      let id_department=$("#id_department").val();       
      let id_used_by=$("#id_used_by").val();       
      let id_zone=$("#id_zone").val();       
      let id_continents=$("#id_continents").val();       
      let id_region=$("#id_region").val();       
      let id_cluster=$("#id_cluster").val();       
      let id_pod=$("#id_pod").val();       

      if(id_identifier_name.length <= 0){
          $("#id_identifier_name").parent().addClass("error-class");
      }else if(id_device_name.length <= 0){
          $("#id_device_name").parent().addClass("error-class");
      }else if(id_operating_system.length <= 0){
          $("#id_operating_system").parent().addClass("error-class");
      }else if(id_department.length <= 0){
          $("#id_department").parent().addClass("error-class");
      }else if(id_used_by.length <= 0){
          $("#id_used_by").parent().addClass("error-class");
      }else if(id_zone.length <= 0){
          $("#id_zone").parent().addClass("error-class");
      }else if(id_continents.length <= 0){
          $("#id_continents").parent().addClass("error-class");
      }else if(id_region.length <= 0){
          $("#id_region").parent().addClass("error-class");
      }else if(id_cluster.length <= 0){
          $("#id_cluster").parent().addClass("error-class");
      }else if(id_pod.length <= 0){
          $("#id_pod").parent().addClass("error-class");
      }
  }
  </script>
</body>
{% endblock %}
</html>
