{% include 'a_header.twig' %}

          <!-- Table -->
          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>Servidor:  {{server.Name}} <small><i>{{server.IP}}</i></small> </h2>
                  <div class="clearfix"></div>
                  <p>{{server.Version}}</p>
                  <div class="clearfix"></div>
                  {% if server.Online == 0 %}<h2 class="text-danger">Offline</h2>{%endif%}
                  {% if server.BadCreds == 1 %}<h4 class="text-warning">Credenciales no válidas o inexistentes</h4>{%endif%}
                  {% if server.BadCreds == 2 %}<h4 class="text-warning">El servidor tiene problemas con WMI (Error 0x80041045)</h4>{%endif%}
                  <div class="clearfix"></div>
                  {% if server.Description != "" %}
                  <p>Descripción: {{server.Description}}</p>
                  <div class="clearfix"></div>
                  {% endif %}
                </div>
                <div class="x_content">
                  <p class="text-muted font-13 m-b-30">
                  <p>
                  <button type="button" class="btn btn-secondary" onClick="togglesrv({{server.ID_SERV}});" >{% if server.Enabled == 1 %}Deshabilitar monitorización{% else %}Habilitar monitorización{% endif %}</button>
                  <button type="button" class="btn btn-info" onClick="updatesrv({{server.ID_SERV}});" >Refrescar información</button>
                  <a class="btn btn-success" href="?page=editserver&id_serv={{server.ID_SERV}}">Editar datos</a>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-changegrp">Editar grupos</button>
                  </p>

                    Uptime: {{server.Uptime}}
                    <br>
                    Discos duros:
                    <p><div style="margin-left:1em;">{{server.HDDFastStats | raw}}</div></p>
                    {% if server.Detram > 0 %}
                      <p>Ram: {{server.Usedram}} / {{server.Detram}}
                    {%else%}
                      <p>Ram libre: {{server.Freeram}}
                    {%endif%}
                    <br>Último Ping: {{server.Ping}}ms
                  </p>
                </div>
              </div>
            </div>
          </div>


          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>Servicios</h2>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-createsvc">Nuevo servicio</button></p>
                  {% if server.SO == 'LINUX' %}<p>No se pueden reiniciar los servicios en los Linux que no funcionen con "service" o "systemd"</p>{%endif%}
                  <table id="datatable" class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>Servicio </th>
                          <th>Descripción </th>
                          <th>Estado </th>
                          <th>Acción </th>
                        </tr>
                      </thead>

                      <tbody>
                      {% for service in services %}
                        <tr {% if service.Status == 1 %}style="background-color: #eaffde;"{%else%}style="background-color: #ffe6e6;"{%endif%} >
                          <td class=" ">{{service.Name}} {% if service.Enabled == 0 %}<br/><i>Deshabilitado</i>{% endif %}</td>
                          <td class=" ">{{service.Description}} </td>
                          <td class=" ">
                          {% if service.Status == "NODATA" %}<i>Sin datos</i>
                          {% else %}
                            {% if service.Status == '1' %}Operativo{% else %}No funcionando {% endif %} 
                          {% endif %} </td>
                          <td class=" last">
                          <button type="button" class="btn btn-primary" id="btn-{{service.ID_SERV}}-{{service.Name}}" data-toggle="modal" data-target=".bs-modal-toggle-{{service.ID_SERV}}-{{service.Name}}" >{% if service.Status == 0 %}Arrancar{% else %}Apagar{% endif %}</button>
                          
                          <button type="button" class="btn btn-warning" data-toggle="modal" data-target=".bs-modal-deletesvc-{{service.ID_SERV}}-{{service.Name}}">Borrar servicio</button>
                          </td>
                        </tr>

                        <div class="modal fade bs-modal-toggle-{{service.ID_SERV}}-{{service.Name}}" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                          <div class="modal-dialog modal-lg">
                            <form method="POST" action="?page=servers&id_serv={{service.ID_SERV}}&do=togglesvc&name={{service.Name}}" data-parsley-validate class="form-horizontal form-label-left">
                              <div class="modal-content">

                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                                  </button>
                                  <h4 class="modal-title" id="myModalLabel">{% if service.Status == 0 %}Arrancar{% else %}Apagar{% endif %} servicio {{service.Name}}</h4>
                                </div>
                                <div class="modal-body">
                                  <p>¿Estas seguro de {% if service.Status == 0 %}Arrancar{% else %}Apagar{% endif %} el servicio {{service.Name}}?
                                  <br>Importante: Recuerda que se necesita una cuenta de administrador para reiniciar servicios
                                  <br>Puede tardar un par de minutos en reflejarse aquí. Refresca con el botón para verlo más rapidamente
                                  </p>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-primary">{% if service.Status == 0 %}Arrancar{% else %}Apagar{% endif %}</button>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>

                        <div class="modal fade bs-modal-deletesvc-{{service.ID_SERV}}-{{service.Name}}" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                          <div class="modal-dialog modal-lg">
                            <form method="POST" action="?page=servers&id_serv={{service.ID_SERV}}&do=deletesvc&name={{service.Name}}" data-parsley-validate class="form-horizontal form-label-left">
                              <div class="modal-content">

                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                                  </button>
                                  <h4 class="modal-title" id="myModalLabel">Borrar servicio</h4>
                                </div>
                                <div class="modal-body">      
                                  <p>Se procederá a borrar el servicio {{service.Name}}, es irreversible</p>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-error">Borrar</button>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>


                        {% endfor %}
                    </tbody>
                  </table>


                </div>
              </div>
            </div>
            
          </div>

          <!-- Stadistics HDD -->
          
          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>Estadísticas de discos duros</h2>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                <form method="POST" action="?page=servers&id_serv={{server.ID_SERV}}">
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-3" for="backto">Ver resumen de los últimos:<br/></label>
                    <div class="col-md-1 col-sm-1 col-xs-1">
                      <input type="number" id="backto" name="backto" required="required" class="form-control col-md-3 col-xs-3" min="1" value="5">
                    </div>
                    días<button type="submit" class="btn btn-primary">Ver</button>
                  </div>
                </form>

                {% for key,value in server.HDDData %}
                {% set maxspace = 0%}
                  <p>{{key}}</p>
                <canvas id="canvashdd_{{loop.index0}}" style="display: block; height: 100px;" height="100"></canvas>
                <script>
                  var ctxh_{{loop.index0}} = document.getElementById("canvashdd_{{loop.index0}}");
                    var lineCharth_{{loop.index0}} = new Chart(ctxh_{{loop.index0}}, {
                    type: 'line',
                    data: {
                      labels: [
                        {% for subdata in value %}
                        {% set lasttimestamp = subdata.Timestamp %}
                        "{{subdata.HumanTimestamp}}"
                        {% if not loop.last %},{% endif %}
                        {% endfor %}
                      ],
                      datasets: [{
                      label: "{{key}} (GB)",
                      backgroundColor: "rgba(38, 185, 154, 0.31)",
                      borderColor: "rgba(38, 185, 154, 0.7)",
                      pointBorderColor: "rgba(38, 185, 154, 0.7)",
                      pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                      pointHoverBackgroundColor: "#fff",
                      pointHoverBorderColor: "rgba(220,220,220,1)",
                      pointBorderWidth: 1,
                      data: [
                        {% for subdata in value %}
                        {{subdata.Space - subdata.Freespace }}
                        {% if not loop.last %},{% endif %}
                        {% if maxspace < subdata.Space %}{% set maxspace = subdata.Space %}{% endif %}
                        {% endfor %}
                        ]
                      }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true,
                                    max: {{maxspace}},
                                }
                            }]
                        }
                    }
                    });
                </script>
                {% endfor %}
                </div>
              </div>
            </div>
          </div> 




          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>Estadísticas de RAM</h2>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <p>Histórico de RAM en uso (en MB)</p>
                <canvas id="canvas_ram" style="display: block; height: 100px;" height="100"></canvas>
                <script>
                  var ctx = document.getElementById("canvas_ram");
                    var lineChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                      labels: [
                        {% for ram in histram|reverse %}
                        "{{ram.Timestamp}}"
                        {% if not loop.last %}, {% endif %}
                        {% endfor %}
                      ],
                      datasets: [{
                      label: "RAM",
                      backgroundColor: "rgba(38, 185, 154, 0.31)",
                      borderColor: "rgba(38, 185, 154, 0.7)",
                      pointBorderColor: "rgba(38, 185, 154, 0.7)",
                      pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                      pointHoverBackgroundColor: "#fff",
                      pointHoverBorderColor: "rgba(220,220,220,1)",
                      pointBorderWidth: 1,
                      data: [
                        {% for ram in histram|reverse %}
                        {{ram.Detram - ram.Freeram}}
                        {% if not loop.last %}, {% endif %}
                        {% endfor %}
                        ]
                      }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true,
                                    max: {{server.Detram |split('M')[0]|split('G')[0] }},
                                }
                            }]
                        }
                    },
                    });
                </script>

                </div>
              </div>
            </div>
            
          </div>



          <div class="modal fade bs-modal-createsvc" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg">
              <form method="POST" action="?page=servers&id_serv={{server.ID_SERV}}" data-parsley-validate class="form-horizontal form-label-left">
                <div class="modal-content">

                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Crear servicio <small>Se crea un servicio habilitado para monitorizar</small></h4>
                  </div>
                  <div class="modal-body">      

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nombre intero del servicio <span class="required">*</span><br/><small>En windows es el nombre corto<br/>En linux es el nombre del <i>demonio</i></small>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="name" name="name" required="required" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="descr">Descripción del servicio <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="descr" name="descr" required="required" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Añadir</button>
                  </div>
                </div>
              </form>
            </div>
          </div>


          <div class="modal fade bs-modal-changegrp" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg">
              <form method="POST" action="?page=servers&id_serv={{server.ID_SERV}}&do=changegrp" data-parsley-validate class="form-horizontal form-label-left">
                <div class="modal-content">

                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Cambiar los grupos para el servidor {{server.Name}}</h4>
                  </div>
                  <div class="modal-body">      

                    <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Grupos: </small>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                      {% for group in groups %}
                        <input type="checkbox" name="groupsel[]" value="{{group.ID_G}}" {% if group.ID_G in server.listinidg|keys %}checked="checked"{% endif %}> {{group.Name}}
                      {% endfor %}
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Editar</button>
                  </div>
                </div>
              </form>
            </div>
          </div>



          <script>

          function togglesrv(ID_SERV){ //Enable or disable monitoring
            conexion = new XMLHttpRequest();
            // Preparar la funcion de respuesta
            conexion.onreadystatechange = function() {  /* Mostrar */
            if(conexion.readyState == 4 && conexion.status == 200) {
              location.reload(true);
              console.log(textdata.data);
              }
            }
            // Realizar peticion HTTP
            conexion.open('POST', 'ajaxfunc.php');
            conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            conexion.send("do=togglesrv&ID_SERV="+ID_SERV);
          }

          function updatesrv(ID_SERV){
            conexion = new XMLHttpRequest();
            // Preparar la funcion de respuesta
            conexion.onreadystatechange = function() {  /* Mostrar */
            if(conexion.readyState == 4 && conexion.status == 200) {
              alert("En curso, recargue la pagina");
              window.location.href = "admin.php?page=servers&id_serv={{server.ID_SERV}}";
              }
            }
            // Realizar peticion HTTP
            conexion.open('POST', 'ajaxfunc.php');
            conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            conexion.send("do=updatesrv&ID_SERV="+ID_SERV);
          }
          </script>

        </div>
        <!-- /page content -->


{% include 'a_footer.twig' %}