@extends('layouts.app')

@section('content')
  <style>
    .container-leds {
      padding: 20px;
    }

    .led-box {
      height: 30px;
      width: 25%;
      margin: 10px 0;
      float: left;
    }

    .led-box p {
      font-size: 12px;
      text-align: center;
      margin: 1em;
    }

    .led-red {
      margin: 0 auto;
      width: 24px;
      height: 24px;
      background-color: #F00;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
      -webkit-animation: blinkRed 0.5s infinite;
      -moz-animation: blinkRed 0.5s infinite;
      -ms-animation: blinkRed 0.5s infinite;
      -o-animation: blinkRed 0.5s infinite;
      animation: blinkRed 0.5s infinite;
    }

    @-webkit-keyframes blinkRed {
      from { background-color: #F00; }
      50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
      to { background-color: #F00; }
    }
    @-moz-keyframes blinkRed {
      from { background-color: #F00; }
      50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
      to { background-color: #F00; }
    }
    @-ms-keyframes blinkRed {
      from { background-color: #F00; }
      50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
      to { background-color: #F00; }
    }
    @-o-keyframes blinkRed {
      from { background-color: #F00; }
      50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
      to { background-color: #F00; }
    }
    @keyframes blinkRed {
      from { background-color: #F00; }
      50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
      to { background-color: #F00; }
    }

    .led-violet {
      margin: 0 auto;
      width: 24px;
      height: 24px;
      background-color: #8A2BE2;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #BA55D3 0 -1px 9px, #8A2BE2 0 2px 12px;
      -webkit-animation: blinkViolet 1s infinite;
      -moz-animation: blinkViolet 1s infinite;
      -ms-animation: blinkViolet 1s infinite;
      -o-animation: blinkViolet 1s infinite;
      animation: blinkViolet 1s infinite;
    }

    @-webkit-keyframes blinkViolet {
      from { background-color: #8A2BE2; }
      50% { background-color: #DDA0DD; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #8A2BE2 0 2px 0; }
      to { background-color: #8A2BE2; }
    }
    @-moz-keyframes blinkViolet {
      from { background-color: #8A2BE2; }
      50% { background-color: #DDA0DD; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #8A2BE2 0 2px 0; }
      to { background-color: #8A2BE2; }
    }
    @-ms-keyframes blinkViolet {
      from { background-color: #8A2BE2; }
      50% { background-color: #DDA0DD; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #8A2BE2 0 2px 0; }
      to { background-color: #8A2BE2; }
    }
    @-o-keyframes blinkViolet {
      from { background-color: #8A2BE2; }
      50% { background-color: #DDA0DD; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #8A2BE2 0 2px 0; }
      to { background-color: #8A2BE2; }
    }
    @keyframes blinkViolet {
      from { background-color: #8A2BE2; }
      50% { background-color: #DDA0DD; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #8A2BE2 0 2px 0; }
      to { background-color: #8A2BE2; }
    }

    .led-green {
      margin: 0 auto;
      width: 24px;
      height: 24px;
      background-color: #ABFF00;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
    }

    .led-blue {
      margin: 0 auto;
      width: 24px;
      height: 24px;
      background-color: #24E0FF;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;
    }
  </style>

  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Dashboard
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-warning">
              <div class="panel-heading">
                Disponibilidad de Almacenamiento <strong>(SOLDEF)</strong>
              </div>
              <div class="panel-body">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="diskSOLDEFBar">
                    <span id="diskSOLDEFCapacity">0</span>%
                  </div>
                </div>
                <p class="text-center"><strong>Total:</strong> <span id="diskSOLDEFSize"> - </span>b | <strong>Usado:</strong> <span id="diskSOLDEFUsed"> - </span>b | <strong>Libre:</strong> <span id="diskSOLDEFAvail"> - </span>b</p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-warning">
              <div class="panel-heading">
                Disponibilidad de Almacenamiento <strong>(MESA)</strong>
              </div>
              <div class="panel-body">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="diskMESABar">
                    <span id="diskMESACapacity">0</span>%
                  </div>
                </div>
                <p class="text-center"><strong>Total:</strong> <span id="diskMESASize"> - </span>b | <strong>Usado:</strong> <span id="diskMESAUsed"> - </span>b | <strong>Libre:</strong> <span id="diskMESAAvail"> - </span>b</p>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-warning">
              <div class="panel-heading">
                Disponibilidad de Almacenamiento <strong>(GESTION - Partición: root)</strong>
              </div>
              <div class="panel-body">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="diskGESTIONROOTBar">
                    <span id="diskGESTIONROOTCapacity">0</span>%
                  </div>
                </div>
                <p class="text-center"><strong>Total:</strong> <span id="diskGESTIONROOTSize"> - </span>b | <strong>Usado:</strong> <span id="diskGESTIONROOTUsed"> - </span>b | <strong>Libre:</strong> <span id="diskGESTIONROOTAvail"> - </span>b</p>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="panel panel-warning">
              <div class="panel-heading">
                isponibilidad de Almacenamiento <strong>(GESTION - Partición: home)</strong>
              </div>
              <div class="panel-body">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="diskGESTIONHOMEBar">
                    <span id="diskGESTIONHOMECapacity">0</span>%
                  </div>
                </div>
                <p class="text-center"><strong>Total:</strong> <span id="diskGESTIONHOMESize"> - </span>b | <strong>Usado:</strong> <span id="diskGESTIONHOMEUsed"> - </span>b | <strong>Libre:</strong> <span id="diskGESTIONHOMEAvail"> - </span>b</p>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-warning">
              <div class="panel-heading">
                Disponibilidad de Almacenamiento <strong>(NAGIOS)</strong>
              </div>
              <div class="panel-body">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="diskNAGIOSBar">
                    <span id="diskNAGIOSCapacity">0</span>%
                  </div>
                </div>
                <p class="text-center"><strong>Total:</strong> <span id="diskNAGIOSSize"> - </span>b | <strong>Usado:</strong> <span id="diskNAGIOSUsed"> - </span>b | <strong>Libre:</strong> <span id="diskNAGIOSAvail"> - </span>b</p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-warning">
              <div class="panel-heading">
                Disponibilidad de Almacenamiento <strong>(NAS Server)</strong>
              </div>
              <div class="panel-body">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="diskNASBar">
                    <span id="diskNASCapacity">0</span>%
                  </div>
                </div>
                <p class="text-center"><strong>Total:</strong> <span id="diskNASSize"> - </span>b | <strong>Usado:</strong> <span id="diskNASUsed"> - </span>b | <strong>Libre:</strong> <span id="diskNASAvail"> - </span>b</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    $(document).ready(function() {
      //Información de disco de SOLDEF
      $.ajax({
        url: '/dashboard/infoDisco/SOLDEF',
        type: 'GET'
      }).done(function(resp) {
        var data = jQuery.parseJSON(resp);
        $('#diskSOLDEFSize').text(data.diskSize);
        $('#diskSOLDEFUsed').text(data.diskUsed);
        $('#diskSOLDEFAvail').text(data.diskAvail);
        $('#diskSOLDEFCapacity').text(data.diskCapacity);

        if (parseInt(data.diskCapacity) >= 90) {
          $('#diskSOLDEFBar').addClass('progress-bar-danger');
        } else if (parseInt(data.diskCapacity) >= 85) {
          $('#diskSOLDEFBar').addClass('progress-bar-warning');
        }

        $('#diskSOLDEFBar').width(data.diskCapacity +'%');
      }).fail(function() {
        console.log("error");
      });

      //Información de disco de MESA
      $.ajax({
        url: '/dashboard/infoDisco/MESA',
        type: 'GET'
      }).done(function(resp) {
        var data = jQuery.parseJSON(resp);

        $('#diskMESASize').text(data.diskSize);
        $('#diskMESAUsed').text(data.diskUsed);
        $('#diskMESAAvail').text(data.diskAvail);
        $('#diskMESACapacity').text(data.diskCapacity);

        if (parseInt(data.diskCapacity) >= 90) {
          $('#diskMESABar').addClass('progress-bar-danger');
        } else if (parseInt(data.diskCapacity) >= 85) {
          $('#diskMESABar').addClass('progress-bar-warning');
        }

        $('#diskMESABar').width(data.diskCapacity +'%');
      }).fail(function() {
        console.log("error");
      });

      //Información de disco de GESTIONROOT
      $.ajax({
        url: '/dashboard/infoDisco/GESTIONROOT',
        type: 'GET'
      }).done(function(resp) {
        var data = jQuery.parseJSON(resp);

        $('#diskGESTIONROOTSize').text(data.diskSize);
        $('#diskGESTIONROOTUsed').text(data.diskUsed);
        $('#diskGESTIONROOTAvail').text(data.diskAvail);
        $('#diskGESTIONROOTCapacity').text(data.diskCapacity);

        if (parseInt(data.diskCapacity) >= 90) {
          $('#diskGESTIONROOTBar').addClass('progress-bar-danger');
        } else if (parseInt(data.diskCapacity) >= 85) {
          $('#diskGESTIONROOTBar').addClass('progress-bar-warning');
        }

        $('#diskGESTIONROOTBar').width(data.diskCapacity +'%');
      }).fail(function() {
        console.log("error");
      });

      //Información de disco de GESTIONHOME
      $.ajax({
        url: '/dashboard/infoDisco/GESTIONHOME',
        type: 'GET'
      }).done(function(resp) {
        var data = jQuery.parseJSON(resp);

        $('#diskGESTIONHOMESize').text(data.diskSize);
        $('#diskGESTIONHOMEUsed').text(data.diskUsed);
        $('#diskGESTIONHOMEAvail').text(data.diskAvail);
        $('#diskGESTIONHOMECapacity').text(data.diskCapacity);

        if (parseInt(data.diskCapacity) >= 90) {
          $('#diskGESTIONHOMEBar').addClass('progress-bar-danger');
        } else if (parseInt(data.diskCapacity) >= 85) {
          $('#diskGESTIONHOMEBar').addClass('progress-bar-warning');
        }

        $('#diskGESTIONHOMEBar').width(data.diskCapacity +'%');
      }).fail(function() {
        console.log("error");
      });

      //Información de disco de NAGIOS
      $.ajax({
        url: '/dashboard/infoDisco/NAGIOS',
        type: 'GET'
      }).done(function(resp) {
        var data = jQuery.parseJSON(resp);

        $('#diskNAGIOSSize').text(data.diskSize);
        $('#diskNAGIOSUsed').text(data.diskUsed);
        $('#diskNAGIOSAvail').text(data.diskAvail);
        $('#diskNAGIOSCapacity').text(data.diskCapacity);

        if (parseInt(data.diskCapacity) >= 90) {
          $('#diskNAGIOSBar').addClass('progress-bar-danger');
        } else if (parseInt(data.diskCapacity) >= 85) {
          $('#diskNAGIOSBar').addClass('progress-bar-warning');
        }

        $('#diskNAGIOSBar').width(data.diskCapacity +'%');
      }).fail(function() {
        console.log("error");
      });

      //Información de disco de NAS Server
      $.ajax({
        url: '/dashboard/infoDisco/NASServer',
        type: 'GET'
      }).done(function(resp) {
        var data = jQuery.parseJSON(resp);

        $('#diskNASSize').text(data.diskSize);
        $('#diskNASUsed').text(data.diskUsed);
        $('#diskNASAvail').text(data.diskAvail);
        $('#diskNASCapacity').text(data.diskCapacity);

        if (parseInt(data.diskCapacity) >= 90) {
          $('#diskNASBar').addClass('progress-bar-danger');
        } else if (parseInt(data.diskCapacity) >= 85) {
          $('#diskNASBar').addClass('progress-bar-warning');
        }

        $('#diskNASBar').width(data.diskCapacity +'%');
      }).fail(function() {
        console.log("error");
      });
    });
  </script>
@endsection