{% include 'panel/p_header.twig' %}

<!-- Add/edit form -->
<section class="forms">
        <div class="container-fluid">
          <header>
          	{%if type == 'edit' %}
            	<h1 class="h3 display">Editando {{check.name}}</h1>
            {%else%}
              <h1 class="h3 display">Nuevo check</h1>
            {%endif%}
          </header>
          <div class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-block">
                  <form class="form-horizontal" method="POST" 
                  {%if type == 'edit'%}
                  action="?page=updatecheck&ID_C={{check.ID_C}}"
                  {%else%}
                  action="?page=savenewcheck"
                  {%endif%}>
                    <div class="form-group row">
                      <label class="col-sm-2">Nombre</label>
                      <div class="col-sm-10">
                        <input name="name" type="text" placeholder="Nombre del check" value="{{check.name}}" class="form-control form-control-success"><small class="form-text">Nombre del checkeo.</small>
                      </div>
                    </div>

                    <div class="form-group row">
                      <label class="col-sm-2 form-control-label">Grupo</label>
                      <div class="col-sm-10 select">
                        <select name="group" id="group" class="form-control">
                        	{% for group in groups %}
                          	<option value="{{group.ID_G}}" {%if group.ID_G == check.ID_G %} selected="selected" {%endif%}>
                          		{{group.name}}
                      		</option>
                          {%endfor%}
                        </select>
                      </div>
                    </div>


                    <div class="form-group row">
                      <label class="col-sm-2 form-control-label">Tipo de check</label>
                      <div class="col-sm-10 select">
                        <select name="tcheck" id="tcheck" class="form-control" onchange="showOptData(this);">
                        	{% for tchk in tchecks %}
                          	<option value="{{tchk.ID_TC}}" {%if tchk.ID_TC == check.ID_TC %} selected="selected" {%endif%}>
                          		{{tchk.name}}
                      		</option>
                          {%endfor%}
                        </select>
                      </div>
                    </div>

                    {# Aquí empiezan los campos "opcionales" dependiendo del tipo de check #}
                    {# Sacar variables #}
                    {% if check.ID_TC == 1%}
                    	{% set t1 = check.URL|split(':') %}
                    {% elseif check.ID_TC == 2%}
                    	{% set t2_url = check.URL %}
                      {% set t2_code = check.TCParam %}
                    {% elseif check.ID_TC == 4%}
                      {% set t4_url = check.URL %}
                    {% endif %}

                    {# Trozos de formulario #}

                    {# Tipo 1 - Ping IP #}
                    <div id="t1" style="display:none;">
	                    <div class="form-group row">
	                      <label class="col-sm-2">IP</label>
	                      <div class="col-sm-10">
	                        <input name="t1url" type="text" placeholder="URL" value="{{t1[0]}}" class="form-control form-control-success"><small class="form-text">IP/Web a hacer "ping".</small>
	                      </div>
	                    </div>
	                    <div class="form-group row">
	                      <label class="col-sm-2">Puerto</label>
	                      <div class="col-sm-10">
	                        <input name="t1port" type="text" placeholder="Puerto" value="{{t1[1]}}" class="form-control form-control-success"><small class="form-text">Puerto que comprobar. Por defecto es el 80/www.</small>
	                      </div>
	                    </div>
                	  </div>

                    {# Tipo 2 - HttpCode (WWW) #}
                    <div id="t2" style="display:none;">
	                    <div class="form-group row">
	                      <label class="col-sm-2">URL</label>
	                      <div class="col-sm-10">
	                        <input name="t2url" type="text" placeholder="URL" value="{{t2_url}}" class="form-control form-control-success"><small class="form-text">URL a la que comprobar si funciona o no.</small>
	                      </div>
	                    </div>
	                    <div class="form-group row">
	                      <label class="col-sm-2">Codigo esperado</label>
	                      <div class="col-sm-10">
	                        <input name="t2code" type="text" placeholder="Puerto" value="{{t2_code}}" class="form-control form-control-success"><small class="form-text">Codigo esperado, si no se pone nada, es el 200 (Ok)</small>
	                      </div>
	                    </div>
                	  </div>

                    {# Tipo 3 - Visit Counter #}
                    <div id="t3" style="display:none;">
                      <div class="form-group row">
                        <label class="col-sm-2"></label>
                        <div class="col-sm-10">
                          <p><small class="form-text">Al aceptar, en las opciones del check, está el código HTML para añadir a la web</small></p>
                        </div>
                      </div>
                    </div>

                    {# Tipo 4 - Database #}
                    <div id="t4" style="display:none;">
                      <div class="form-group row">
                        <label class="col-sm-2">Lugar donde estará el fichero PHP de la comprobación en tu servidor</label>
                        <div class="col-sm-10">
                          <input name="t4url" type="text" placeholder="URL" value="{{t4_url}}" class="form-control form-control-success"><small class="form-text">Aquí debes poner la URL completa al fichero php que se te dará para comprobar el estado de la base de datos (Por seguridad, sus datos no se guardan en CheckServer)</small>
                        </div>
                      </div>
                    </div>


                    <div class="form-group row">       
                      <div class="col-sm-10 offset-sm-2">
                        <button type="submit" class="btn btn-primary">Guardar cambios</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

<script>
	function showOptData(valSel){
	optVal = valSel.value;

    if(optVal == '1'){
      document.getElementById("t1").style.display = "block";
      document.getElementById("t2").style.display = "none";
      document.getElementById("t3").style.display = "none";
      document.getElementById("t4").style.display = "none";
    }else if(optVal == '2'){
			document.getElementById("t1").style.display = "none";
      document.getElementById("t2").style.display = "block";
      document.getElementById("t3").style.display = "none";
      document.getElementById("t4").style.display = "none";
    }else if(optVal == '3'){
		  document.getElementById("t1").style.display = "none";
		  document.getElementById("t2").style.display = "none";
      document.getElementById("t3").style.display = "block";
      document.getElementById("t4").style.display = "none";
    }else {
      document.getElementById("t1").style.display = "none";
      document.getElementById("t2").style.display = "none";
      document.getElementById("t3").style.display = "none";
      document.getElementById("t4").style.display = "block";
    }
}
showOptData(document.getElementById("tcheck"))
</script>

{% include 'footer.twig' %}