{% 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">{{T_.name}}</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">{{T_.group}}</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 (Estos vienen de la tabla, al campo) #}
                    {# 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.urlParam %}
                    {% elseif check.ID_TC == 4%}
                      {% set t4_url = check.url %}
                    {% elseif check.ID_TC == 5 %}
                      {% set t5_url = check.url %}
                      {% set t5_params = check.urlParam|split('|') %}
                      {% set t5_exceptedRes = check.exceptedRes %}
                    {% 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>

                    {# Tipo 5 - Json API #}
                    <div id="t5" style="display:none;">
                      <div class="form-group row">
                        <label class="col-sm-2">JSON</label>
                        <div class="col-sm-10">
                          <input name="t5url" type="text" placeholder="URL" value="{{t5_url}}" class="form-control form-control-success"><small class="form-text">URL de la API</small>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-sm-2">Tipo de request</label>
                        <div class="col-sm-10">
                          <select name="t5type" class="form-control">
                            <option value="GET" {%if t5_params[0] == 'GET' %} selected="selected" {%endif%}>GET</option>
                            <option value="POST" {%if t5_params[0] == 'POST' %} selected="selected" {%endif%}>POST</option>
                        </select>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-sm-2">Parametros enviados</label>
                        <div class="col-sm-10">
                          <input name="t5params" type="text" placeholder="?params" value="{{t5_params[1]}}" class="form-control form-control-success"><small class="form-text">Parametros de la API (Si es GET, empezar con ? o /)</small>
                        </div>
                      </div>
                      <div class="form-group row">
                        <label class="col-sm-2">Respuesta esperada</label>
                        <div class="col-sm-10">
                          <textarea name="t5exceptedRes" placeholder="Respuesta en formato JSON" class="form-control form-control-success">{{t5_exceptedRes}}</textarea>
                        </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){
      document.getElementById("t1").style.display = "none";
      document.getElementById("t2").style.display = "none";
      document.getElementById("t3").style.display = "none";
      document.getElementById("t4").style.display = "none";
      document.getElementById("t5").style.display = "none";
	optVal = valSel.value;

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

{% include 'footer.twig' %}