@extends('layouts.app') 
@section('title', 'Account Management')
@section('breadcrumb')
    <style type="text/css">
        .textStyle {
            border: 1px solid #EDEADE;
            padding: 10px;
        }
        .headerLinkLeft {
            line-height: 44px;
            
            padding: 14px;
            color: black;
            text-decoration: none;
            margin: -2px;
        }
        .headerLinkLeft:hover{
            text-decoration: none;
            background-color: crimson;
            color: white;
        }
        .testColorCrimson{
            color: crimson;
            font-weight: bold;
        }
        .IpTable{
        width: 100% !important;
    }
    .row {
  margin-left:-5px;
  margin-right:-5px;
}
  
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
  </style>
     <link rel="stylesheet" href=" https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/2.0.2/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.0.2/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>
    <ol class="breadcrumb border-0 m-0 px-0 px-md-3">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Admin</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.account') }}">Account Management</a></li>
        <li class="breadcrumb-item active">Active Services</li>
    </ol>
@endsection
@section('content')
<!--<div class="row">
    <div class="col-md-12" style="background-color:#D0D0D0;padding-left: 0px;padding-right: 6px;">
        <div class="float-left">
          <a href="javascript:void(0)" class="headerLinkLeft addBackGround1 removeBackGround" onclick="changeColor(1)">All Services</a>
          <a href="javascript:void(0)" class="headerLinkLeft addBackGround2 removeBackGround" onclick="changeColor(2)">Internet</a>
          <a href="{{url('/iptv')}}" class="headerLinkLeft addBackGround3 removeBackGround" onclick="changeColor(3)">IPTV</a>
          <a href="{{url('/catv')}}" class="headerLinkLeft addBackGround4 removeBackGround" onclick="changeColor(4)">CATV</a>
          <a href="{{url('/dvbc')}}" class="headerLinkLeft addBackGround5 removeBackGround" onclick="changeColor(5)">DVBC</a>
          <a href="{{url('/volp')}}" class="headerLinkLeft addBackGround6 removeBackGround" onclick="changeColor(6)">VOIP</a>
          <a href="{{url('/service')}}" class="headerLinkLeft addBackGround7 removeBackGround" onclick="changeColor(7)">Services</a>
          <a href="{{url('/moblie')}}" class="headerLinkLeft addBackGround8 removeBackGround" onclick="changeColor(8)">Mobile</a>
        </div>
        <div class="float-right"> 
            <select class="btn btn-success align-middle getFormName" style="line-height: 14px;padding: 7px;margin-top: 4PX;" onchange="getFormName()">
                <option> + Add New Service </option>
                <option style="background-color: #D0D0D0;color: black;" value="Internet">Internet</a></option>
                <option style="background-color: #D0D0D0;color: black;" value="Iptv">IPTV</option>
                <option style="background-color: #D0D0D0;color: black;" value="Catv">CATV</option>
                <option style="background-color: #D0D0D0;color: black;" value="Dvbc">DVBC</option>
                <option style="background-color: #D0D0D0;color: black;" value="Voip">VOIP</option>
                <option style="background-color: #D0D0D0;color: black;" value="Service">Services</a></option>

                <!-- <option style="background-color: #D0D0D0;color: black;"><a href="{{url('/addservice')}}">Services</a></option> -->
                <!--<option style="background-color: #D0D0D0;color: black;" value="Mobile">Mobile</option>
            </select>
            <button class="btn btn-light align-middle" style="line-height: 14px;padding: 8px;margin-top: 4PX;">
                <svg class="c-sidebar-nav-icon" style="margin-left: -9rem;margin-right: -9rem;">
                    <use xlink:href="{{ url('public/assets/vendors/@coreui/icons/svg/free.svg#cil-search') }}"></use>
                </svg>
                Search Deleted Services (0) 
            </button>
        </div>
    </div>
</div>

<div class="row">
    <div class="alert alert-success mt-2" role="alert">
    Total Monthly Charges <span class="testColorCrimson">5 999 HUF Inc. Tax</span> (5 705 HUF exc. Tax)
    </div> 
</div>-->
@include('layouts.navbar')
<div class="clientmonitor"> 

         <h4  style=" border-bottom: outset;border-bottom-width: thin;">
          <center> <b>Internet Statistics Of joni kalman</b></center>
        </h4>
        
</div>



    <div class="card" style="background-color:#ECECEC;">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
   <div class="row">
  <div class="column">
     
    <table style="background-color:#FFFFFF;">
      
      <tr>
        <td>IP Address</td>
        <td>87.229.114.63</td>
        
      </tr>
      <tr>
        <td>Mac Address</td>
        <td>Empty</td>
        
      </tr>
      <tr>
        <td>Download Speed</td>
        <td>20480 kb/s</td>
        
      </tr>
       <tr>
        <td>Upload Speed</td>
        <td>20480 /10240 kb/s</td>
        
      </tr>
       <tr>
        <td>Rate Plan</td>
        <td>20110 smart home s</td>
        
      </tr>
       <tr>
        <td>Router</td>
        <td>CCR1072</td>
        
      </tr>
      <tr>
        <td>Switch </td>
        <td>css326-244-25</td>
        
      </tr>
       <tr>
        <td>Switch Port</td>
        <td>css326-244-25</td>
        
      </tr>
    </table>
  </div>
  <div class="column">
   
   
    <table style="background-color:#FFFFFF;">
      
      <tr>
        <td>Price</td>
        <td></td>
       
      </tr>
      <tr>
        <td>Loyalty Discount</td>
        <td></td>
        
      </tr>
      <tr>
        <td>Price</td>
        <td></td>
        
      </tr>
      <tr>
        <td>Loyalty Discount</td>
        <td></td>
       
      </tr>
      <tr>
        <td>Flat rate</td>
        <td></td>
        
      </tr>
      <tr>
        <td>service address</td>
        <td></td>
        
      </tr>
       <tr>
        <td>Price</td>
        <td></td>
       
      </tr>
      <tr>
        <td>Loyalty Discount</td>
        <td></td>
        
      </tr>
      <tr>
        <td>Price</td>
        <td></td>
        
      </tr>
      <tr>
        <td>Loyalty Discount</td>
        <td></td>
       
      </tr>
      <tr>
        <td>Flat rate</td>
        <td></td>
        
      </tr>
      <tr>
        <td>service address</td>
        <td></td>
        
      </tr>
    </table>

  </div>

</div>
<div class="row">
  <div class="col-sm-6">
   
    <div class="card" style="height:35rem;">
      <div class="card-body">
        <center> <h4><b>Statistics of Data Transfer by Client</b></h4></center>
         <div class="card-content" style="border:groove; height:30rem;">
         </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
     
    <div class="card"  style="height:35rem;">
      <div class="card-body">
        <center><h4><b>Ping</b></h4></center>
       <div class="card-content" style="border:groove; height:30rem;">
         </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>
<script>

function getFormName()
        {
            if($(".getFormName").val()=='Internet')
            {
                window.location.href = "{{url('/addInternetService')}}";
            }
            if($(".getFormName").val()=='Iptv')
            {
                window.location.href = "{{url('/iptv')}}";
            }
             if($(".getFormName").val()=='Catv')
            {
                window.location.href = "{{url('/catv')}}";
            }
            if($(".getFormName").val()=='Dvbc')
            {
                window.location.href = "{{url('/dvbc')}}";
            }
             if($(".getFormName").val()=='Voip')
            {
                window.location.href = "{{url('/volp')}}";
            }
            if($(".getFormName").val()=='Service')
            {
                window.location.href = "{{url('/addservice')}}";
            }
        }
</script>
@endsection