{% extends 'base.html' %}
{% load static %}

{% block head %}
<link href="{% static 'css/support/support.css' %}" rel="stylesheet">
<link href="{% static 'css/support/switchs.css' %}" rel="stylesheet">
<link href="{% static 'css/support/modal.css' %}" rel="stylesheet">
<link href="{% static 'css/support/monitor.css' %}" rel="stylesheet">
{% endblock head %}


{% block content %}

<div class="mainContent">

  <div class="content">
    <!-- icono -->
    <img src="{% static 'img/monitoreo-on.svg' %}" alt="Medición" class="iconContent">

    <!-- Título -->
    <p class="title"> Monitoreo </p>

    <div class="boxes">

      <!-- Contenedor Modificar altura -->
      <div class="box sensor" id="boxSensor">

        <h2 class="titleConfig"> Control manual </h2>
        <hr>


        <div class="modifyHeightContent" id="modifyHeightContent">

          <div class="cylinder">
            <div class="water" id="water" style="height: 0px;"></div>
          </div>

          <div class="Calibrar" id="Calibrar" style="background-color: var(--intense-div-color);border-radius: 11px;
            display:flex;
            z-index: 99;
            flex-direction: column;
            padding: 15px 15px 15px 15px;
            min-width: 20px;
            width: max-content;
            align-items: start;
            cursor: pointer;
            position: relative;">
            <p style="font-weight:700;
            font-family: 'Quicksand';
            color: rgb(255, 255, 255);
            align-self: center;">Calibrar sensores</p>
          </div>

          <div class="Monitor">
            <p>Sensores</p>
            <hr id="hrWhite" style="display: none;" class="hiddy">

            <div class="monitor" id="monitor1">
              <div style="display:flex; flex-direction: row;">
                <div class="monitortitle">Sensor 1(Inferior): </div>
                <div class="monitortext"></div>
              </div>
            </div>

            <div class="monitor" id="monitor2">
              <div style="display:flex; flex-direction: row;">
                <div class="monitortitle">Sensor 2(Medio): </div>
                <div class="monitortext"></div>
              </div>
            </div>

            <div class="monitor" id="monitor3">
              <div style="display:flex; flex-direction: row;">
                <div class="monitortitle">Sensor 3(Superior): </div>
                <div class="monitortext"></div>
              </div>
            </div>

          </div>
          <div class="modifyHeight">

            <p id="titleHeight"> Altura puente </p>
            <strong id="tubeHeight"><output id="currentHeight"></output>&nbsp;mm </strong>

            <hr id="hrWhite">

            <p id="titleModifyHeight"> Modificar altura </p>
            <input type="number" class="inputAltura" id="inputAltura" value="0" min="0" max="330">
            <div id="modal" class="modal">
              <div class="modal-content">
                <p id="modal-title">Advertencia</p>
                <p id="modal-text">La altura no puede superar los 330mm.</p>
                <button class="close-button" onclick="closeModal()">Cancelar</button>
              </div>
            </div>
            <button id="btnAceptar" class="buttonDesign" onclick="modifyHeight(inputAltura.value,true)">Aceptar</button>

          </div>

          <!-- <div class="modifyUmbral">
              <p id="titleModifyUmbral"> Modificar umbral </p>
              <input type="number" class="inputAltura" id="inputUmbral" value="0" min="0" max="360" >
              <button id="btnAceptar" class="buttonDesign" onclick="modifyUmbral(inputUmbral.value)">Aceptar</button>
          </div> -->

        </div>


      </div>


      <!-- Gráfico -->
      <div class="box plotSedimentation" style="position:relative;">

        <div id="plotSedimentation"></div>
        <div id="turnLasersContent">
          <div>
            <label class="switch">
              <input type="checkbox" class="turnLaser" id="laser1" onclick="turnLaser(this.id)">
              <span class="slider round">
                <span class="onoff"></span>
              </span>
            </label>
            <p class="laserLabel">Láser 1</p>
          </div>
          <div>
            <label class="switch">
              <input type="checkbox" class="turnLaser" id="laser2" onclick="turnLaser(this.id)">
              <span class="slider round"></span>
            </label>
            <p class="laserLabel">Láser 2</p>
          </div>
          <div>
            <label class="switch">
              <input type="checkbox" class="turnLaser" id="laser3" onclick="turnLaser(this.id)">
              <span class="slider round"></span>
            </label>
            <p class="laserLabel">Láser 3</p>
          </div>
        </div>

      </div>

    </div>

  </div>

</div>


<script src="{% static 'js/apexcharts/apexcharts.js' %}"></script>
<script src="{% static 'js/support/monitor.js'%}"></script>
<script src="{% static 'js/support/slider.js' %}"></script>
<script src="{% static 'js/support/plotLasers.js' %}"></script>
<script src="{% static 'js/support/turnLasers.js' %}"></script>
<script src="{% static 'js/support/umbral.js' %}"></script>
<script src="{% static 'js/support/modalLimit.js' %}"></script>
{% endblock content %}