<html>
<head>
   <title>Servicios Interactivos</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <link rel="shortcut icon" href="logo.ico">
<!--   <link type="text/css" rel="stylesheet" href="styles/panel.css"  media="screen,projection"/>  -->
   <link type="text/css" rel="stylesheet" href="materialize/1.0.0/css/materialize.css" media="screen,projection">  
   <link type="text/css" rel="stylesheet" href="styles/animate.css"  media="screen,projection"/>
   <link type="text/css" rel="stylesheet" href="styles/styles.css"  media="screen,projection"/> 
<!--   <link rel="stylesheet" type="text/css" href="styles/material-scrolltop.css"> -->

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <script type="text/javascript" src="fusion/fusioncharts.js"></script>
   <script type="text/javascript" src="fusion/fusioncharts.timeseries.js"></script>
   <script type="text/javascript" src="fusion/themes/fusioncharts.theme.ocean.js"></script> 
   <script type="text/javascript" src="fusion/themes/fusioncharts.theme.gammel.js"></script> 
   <script type="text/javascript" src="fusion/themes/fusioncharts.theme.candy.js"></script> 

    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="logo.ico">
    <link type="text/css" rel="stylesheet" href="styles/material-icons.css" media="screen,projection"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:light" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body>
   <header class='hide' style='height:300px;' />
  </header>  
<style>
header {
    padding: 1rem 0;
}

#search input {
    color: black;
}

/* Menu */
/*
.dropdown-content li > a, .dropdown-content li > span {
    font-size: 16px;
    color: #26a69a;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
    color: #666666;
}
*/

nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    height: 55px;
    line-height: 55px;
}

nav ul a {
  color: #444444;
}

nav ul a:hover {
  background-color: #16a2d6;
  color: white;
}
/* ---- */

textarea.materialize-textarea {
    overflow-y: hidden;
    padding: 1rem 0;
    resize: none;
    min-height: 2rem;
}

.btn {
   color: white;
   padding-left: 20px;
   padding-right: 20px;
   background-color:#16a2d6; 
   height:45px; 
   padding-top:3px;
}

.btn:hover {
   color: white;
   background-color:#0a80c0; 
     background-color: #dd2c00 ;
}


table.highlight > tbody > tr:hover  {
   background-color: #cfd8dc;
}
td {
   border-radius: 0;
}
html {
  font-family: Calibri, "Roboto", sans-serif;
  font-weight: normal;
}

</style>

<style>
input,
select,
textarea {
  color: blue;
  font: inherit;
}

.dropdown-content {
 overflow-x: hidden;
}

#claim:hover {
   background-color: #cfd8dc; 
}

.data {
   margin-top: 10px; 
   margin-bottom: 0;                       
   padding-left: 5%;
}


.margin {
   margin-top: 0; 
   margin-bottom: 0; 
}

.margin-label {
   margin-top: 5px; 
}

.row {
   padding: 0;
   margin: 0;
}

.sticky {
/*
  position: fixed;
  top: 0;
  width: 100%
  overflow: hidden;
  margin-left:10%;
  */
}
input[type=select]:disabled + label,
input[type=select]:disabled,
input[type=textarea]:disabled,
input[type=textarea] + label,
textarea.materialize-textarea:disabled + label, 
input[type=text] + label,
input[type=text]:disabled + label {
   color: grey;
}



textarea.materialize-textarea:disabled,
input[type=text]:disabled {
   color: #303030;
   color: #8c0000;
}

html {
  font-family: Calibri, "Roboto", sans-serif;
  font-weight: normal;
} 

a:hover, a:active {
    color: #23C5A0;
  color: blue;
}

a {
    color: rgb(40, 168, 127);
}

:focus {
    outline: none;
}

/*
nav {
  color: #fff;
  background-color: #00695c;
  width: 100%;
  border-color: green;
}

*/

.dashboard {
   background-color: #f4f4f4;
   height: 45px !important;
}
//#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
</style>

<style type="text/css">
  .btn, .btn-large, .btn-small {
     text-decoration: none;
     color: #fff;
     background-color: #d50000;
     background-color: #b71c1c;
     height: 2.5em;
     border-radius: 1.50em;
     text-align: center;
     letter-spacing: .5px;
     -webkit-transition: background-color .2s ease-out;
     transition: background-color .2s ease-out;
     cursor: pointer;
     line-height:2.5em;
   }
   
   .btn:hover, .btn-large:hover, .btn-small:hover {
     background-color: #dd2c00;
      }
  p {
      display: block;
      -webkit-margin-before: 0em;
      -webkit-margin-after: 0.3em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
  }

   #toast-container {
       min-width: 10%;
       top: 50%;
       right: 50%;
       transform: translateX(50%) translateY(50%);
    }   

    a {
        text-decoration: none;
    }

   .btn, .btn-large, .btn-small {
     text-decoration: none;
     color: #fff;
     background-color: #b71c1c;
     height: 2.5em;
     border-radius: 1.25em;
     text-align: center;
     letter-spacing: .5px;
     -webkit-transition: background-color .2s ease-out;
     transition: background-color .2s ease-out;
     cursor: pointer;
     line-height:2.2em;
   }

   .btn:hover, .btn-large:hover, .btn-small:hover {
     background-color: #dd2c00 ;
   }

   .butn {
      color:black;
   }

   .butn:hover {
     color: red;
   }


.tabs {
  height: 40px !important;
}

.tabs.tabs-transparent {
  background-color: transparent;
}

.tabs.tabs-transparent .tab a,
.tabs.tabs-transparent .tab.disabled a,
.tabs.tabs-transparent .tab.disabled a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.tabs.tabs-transparent .tab a:hover,
.tabs.tabs-transparent .tab a.active {
  color: #fff;
}

.tabs.tabs-transparent .indicator {
  background-color: #fff;
}

.tabs.tabs-fixed-width {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.tabs.tabs-fixed-width .tab {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.tabs .tab {
  line-height: 40px !important;
  height: 40px !important;
/*  text-transform: uppercase; */
  text-transform: none !important;
}

.tabs .tab a {
  color: #16a2d6 !important;
  -webkit-transition: color .28s ease, background-color .28s ease;
  transition: color .28s ease, background-color .28s ease;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
  background-color: rgba(246, 178, 181, 0.2);
  background-color: #16a2d6 !important;
  background-color: rgba(22, 162, 214, 0.9) !important; 
  color: white !important;
  outline: none;
}

.tabs .tab a:hover, .tabs .tab a.active {
  color: #16a2d6 !important;
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: #16a2d6 !important;
}

.tabs .indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #16a2d6;
  will-change: left, right;
}

.active {
   border: none !important;

}

.card {
-webkit-box-shadow: 0px 12px 15px -5px rgba(0,0,0,0.59); 
box-shadow: 0px 12px 15px -5px rgba(0,0,0,0.59);

}

th, td {
   padding: 0px;
}

</style>

<?php
$trama = isset($_POST['t']) ? $_POST["t"]  : "";
if( $trama == "" ) $trama = $_SESSION['t'];
if( $trama == "" ) $trama = "";

$_SESSION['t'] = $trama;


   $t1 = "Canales 1-180";
   $t2 = "Canales 181-360";
   $t3 = "NMS Tramas 1-6";
   $t3 = "Tramas 13-19";
   $t3 = "Gateways";
   $t3 = "Canales 361-540";
   $t4 = "Canales 541-720";
   $t5 = "Tr&aacute;fico";
   $t6 = "Conferencias";
   $t7 = "Opciones";
   $t8 = "Canales M&oacuteviles";

   if( $screen_width <= 600 ) {
      $c = 4;
      $t1 = "Canales 1-120";
      $t2 = "Canales 121-240";
      $t3 = "NMS Tramas 1-4";
      $t3 = "NMS Tramas 9-12";
      $t3 = "Gateways";
      $index = 180;
   }
   else {
      if( $screen_width <= 700 ) {
         $c = 5;
      }
      else {
         $c = 6;
      }
   }
   $sticky = false;
   $filter = "";         
   switch( $trama ) {
      case "0":
         $filter = " and Line < 181";
         $tab[0] = "active";
         $tab[1] = "";
         $tab[2] = "";
         $tab[3] = "";
         $tab[4] = "";
         $tab[5] = "";
         $tab[6] = "";
         $tab[7] = "";
         $index = 0;
         if( $c == 4 ) $filter = " and Line < 120"; 
         $width = "98%";
         break;

      case "1":
         $filter = " and Line >= 181 && Line < 361";
         $tab[0] = "";
         $tab[1] = "active";
         $tab[2] = "";
         $tab[3] = "";
         $tab[4] = "";
         $tab[5] = "";
         $tab[6] = "";
         $tab[7] = "";
         if( $c == 4 ) {
            $index = 120; 
            $filter = " and Line >= 120 && Line < 240";
         }
         else $index = 180;
         $width = "98%";
         break;

      case "2":
         $filter = " and Line < 400";
         $filter = " and Line < 540";
         $filter = " and Line >= 361 && Line < 420";
         $filter = " and Line >= 361 && Line < 540";
         $tab[0] = "";
         $tab[1] = "";
         $tab[2] = "active";
         $tab[3] = "";
         $tab[4] = "";
         $tab[5] = "";
         $tab[6] = "";
         $tab[7] = "";
         $index = 0;
         $index = 360;
         $width = "98%";
         break;

      case "3":
         $filter = " and Line >= 541 && Line < 720";
         $tab[0] = "";
         $tab[1] = "";
         $tab[3] = "active";
         $tab[2] = "";
         $tab[4] = "";
         $tab[5] = "";
         $tab[6] = "";
         $tab[7] = "";
         $index = 0;
         $index = 540;
         $width = "98%";
         break;

      case "4":
         $filter = "";
         $tab[0] = "";
         $tab[1] = "";
         $tab[2] = "";
         $tab[3] = "";
         $tab[4] = "active";
         $tab[5] = "";
         $tab[6] = "";
         $tab[7] = "";
         $index = 0;
         $width = "67%";
         $sticky = true;
         break;

      case "5":
         $filter = "";
         $tab[0] = "";
         $tab[1] = "";
         $tab[2] = "";
         $tab[3] = "";
         $tab[4] = "";
         $tab[5] = "active";
         $tab[6] = "";
         $tab[7] = "";
         $index = 0;
         $width = "67%";
         $sticky = true;
         break;

      case "6":
         $filter = "";
         $tab[0] = "";
         $tab[1] = "";
         $tab[2] = "";
         $tab[3] = "";
         $tab[4] = "";
         $tab[5] = "";
         $tab[6] = "active";
         $tab[7] = "";
         $index = 0;
         $width = "67%";
         $sticky = true;
         break;


      case "7":
         $filter = "";
         $tab[0] = "";
         $tab[1] = "";
         $tab[2] = "";
         $tab[3] = "";
         $tab[4] = "";
         $tab[5] = "";
         $tab[6] = "";
         $tab[7] = "active";
         $index = 0;
         $sticky = true;
         $width = "67%";
         break;

      default:
         $sticky = true;
         $width = "67%";
         break;
   }      

   echo "<div id='cover'></div>";
   if( $width == "" ) $width = "98%";
   /*
   echo "<ul id='menu_reportes' class='dropdown-content'>";
      echo "<li><a class='menu-item' href='workflowPrintAltas.php'>Altas, Bajas & Upgrades</a></li>"; 
   echo "</ul>"; 
   */

   echo "<nav id='nav' class='dashboard' style='margin-top: 10px; box-shadow: none;'>";
        echo "<div class='container sticky' style='width: " . $width . ";'>";
            echo "<div class='nav-wrapper' ><img src='images/LogoOuiChat.png' style='height:40px; margin:0;'>";
               echo "<span id='time_span' style='color:black; float:right; padding-right:30px;'></span>";
            /*
            echo "<ul id='nav-mobile' class='right'>";
            /*
               echo "<li><a class='dropdown-trigger' data-target='menu_mapa'>Panel de Control<i class='material-icons right'>arrow_drop_down</i></a></li>";
               if( $login_section != "maps" )  {
                  echo "<li><a class='dropdown-trigger' data-target='menu_admin'>Administraci&oacute;n<i class='material-icons right'>arrow_drop_down</i></a></li>";
                  echo "<li><a class='dropdown-trigger' data-target='menu_reportes'>Informes<i class='material-icons right'>arrow_drop_down</i></a></li>";
                  echo "<li><a class='dropdown-trigger' data-target='menu_tareas'>Tareas<i class='material-icons right'>arrow_drop_down</i></a></li>";
               }
               echo "<li><a class='nav-item' href='logout.php'>Salir</a></li>";
               if( $include_search == true || $search_reclamos == true ) {
                  echo "<li><a onclick='Search(this);' id='toggle-search'><i class='material-icons' style='font-size:16px;'>search</i></a></li>";
               }
            echo "</ul>";
            */
            echo "</div>";
         echo "</div>";
   echo "</nav>";

   if( $sticky == true ) {
//       echo "<div class='container sticky' style='width: 97%;'>";
       echo "<div class='sticky' style='width: $width; margin-left:auto; margin-right:auto;'>";
   }
//   echo "<div style='margin-top: 10px; margin-bottom: 10px;></span></div>";
   echo "<div style='margin-top: 10px; margin-bottom: 10px;></div>";
   echo "<div class='row'>";
      echo "<div class='col s12 m12 l12' style='padding-left:20px; padding-right:20px;'>";

      $wx = "width:170px;";
      $wx = "width:150px;";
      echo "<div class='row'>";
          echo "<div class='col s8 m10 l12'>"; 
            echo "<ul id='tabs_menu' class='tabs'>"; 
               echo "<li class='tab col s2' style='$wx'><a id='0' class='$tab[0]' href='#' onclick='onClick(this);'>$t1</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='1' class='$tab[1]' href='#' onclick='onClick(this);'>$t2</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='2' class='$tab[2]' href='#' onclick='onClick(this);'>$t3</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='3' class='$tab[3]' href='#' onclick='onClick(this);'>$t4</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='4' class='$tab[4]' href='#' onclick='onClick(this);'>$t5</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='5' class='$tab[5]' href='#' onclick='onClick(this);'>$t6</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='6' class='$tab[6]' href='#' onclick='onClick(this);'>$t7</a></li>"; 
               echo "<li class='tab col s2' style='$wx'><a id='7' class='$tab[7]' href='#' onclick='onClick(this);'>$t8</a></li>"; 
             echo "</ul>"; 
           echo "</div>"; 
      echo "</div>"; 

?>
<script>
   function convertTZ(date, tzString) {
       return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));   
   }

    updateTime()
function updateTime(){
    var currentTime = new Date()
    currentTime = convertTZ( currentTime, "America/Buenos_Aires") 

    var day = currentTime.getDate()
    var month = currentTime.getMonth() + 1
    var year = currentTime.getFullYear()

    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    if (month < 10){
        month = "0" + month
    }
    if (minutes < 10){
        minutes = "0" + minutes
    }
    var t_str = day + "/" + month + "/" + year + " " + hours + ":" + minutes + " ";
    document.getElementById('time_span').innerHTML = t_str;
}
setInterval(updateTime, 1000);
</script>

