@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;
    }
    .dataTables_length{
        visibility: hidden;
    }
    .dataTables_filter{
        visibility: hidden;
    }
    .dataTables_info{
        visibility: hidden;
    }
    #example_paginate{
        visibility: hidden;
    }
    .navbar{
        border-style: ridge;
        height: 5% !important;
        display: flex;
        background-color:light;
        border-radius: 9px;
    }
	.tablediv{
		padding-top:37px;
	}
	#bar{
		border-style: groove;
    border-radius: 17px;
    height: 55px;
	}
</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="IpTable">
    <h1   style=" border-bottom: outset;border-bottom-width: thin;">
        <center> Data Transfer For Joni Kalman</center>
    </h1>
</div>

<!-- <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">YEAR</a>
       <a class="navbar-brand" href="#">YEAR</a> 
      <select id="year" name="year" style="width: 26px;
    height: 29px;
    left: 88px;
    margin: 8px;
    top: 51px;
    margin-top: -27px;
    margin-bottom: -29px;
    background-color: red;">
    <option></option>
    <option value="1940">1940</option>
    <option value="1941">1941</option>
    <option value="1942">1942</option>
    <option value="1943">1943</option>
    <option value="1944">1944</option>
    <option value="1945">1945</option>
    <option value="1946">1946</option>
    <option value="1947">1947</option>
    <option value="1948">1948</option>
    <option value="1949">1949</option>
    <option value="1950">1950</option>
    <option value="1951">1951</option>
    <option value="1952">1952</option>
    <option value="1953">1953</option>
    <option value="1954">1954</option>
    <option value="1955">1955</option>
    <option value="1956">1956</option>
    <option value="1957">1957</option>
    <option value="1958">1958</option>
    <option value="1959">1959</option>
    <option value="1960">1960</option>
    <option value="1961">1961</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <option value="1964">1964</option>
    <option value="1965">1965</option>
    <option value="1966">1966</option>
    <option value="1967">1967</option>
    <option value="1968">1968</option>
    <option value="1969">1969</option>
    <option value="1970">1970</option>
    <option value="1971">1971</option>
    <option value="1972">1972</option>
    <option value="1973">1973</option>
    <option value="1974">1974</option>
    <option value="1975">1975</option>
    <option value="1976">1976</option>
    <option value="1977">1977</option>
    <option value="1978">1978</option>
    <option value="1979">1979</option>
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
    <option value="1983">1983</option>
    <option value="1984">1984</option>
    <option value="1985">1985</option>
    <option value="1986">1986</option>
    <option value="1987">1987</option>
    <option value="1988">1988</option>
    <option value="1989">1989</option>
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
</select>
    </div>
     <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul> 
  </div>
</nav> -->

<!--<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1" style="background-color: $blue-200 ;">YEAR</span>
      </div>
      <!-- <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> -->
      <!--<select id="year" name="year" style="height: 34px;
    width: 20px; background-color: red;">
    <option></option>
    <option value="1940">1940</option>
    <option value="1941">1941</option>
    <option value="1942">1942</option>
    <option value="1943">1943</option>
    <option value="1944">1944</option>
    <option value="1945">1945</option>
    <option value="1946">1946</option>
    <option value="1947">1947</option>
    <option value="1948">1948</option>
    <option value="1949">1949</option>
    <option value="1950">1950</option>
    <option value="1951">1951</option>
    <option value="1952">1952</option>
    <option value="1953">1953</option>
    <option value="1954">1954</option>
    <option value="1955">1955</option>
    <option value="1956">1956</option>
    <option value="1957">1957</option>
    <option value="1958">1958</option>
    <option value="1959">1959</option>
    <option value="1960">1960</option>
    <option value="1961">1961</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <option value="1964">1964</option>
    <option value="1965">1965</option>
    <option value="1966">1966</option>
    <option value="1967">1967</option>
    <option value="1968">1968</option>
    <option value="1969">1969</option>
    <option value="1970">1970</option>
    <option value="1971">1971</option>
    <option value="1972">1972</option>
    <option value="1973">1973</option>
    <option value="1974">1974</option>
    <option value="1975">1975</option>
    <option value="1976">1976</option>
    <option value="1977">1977</option>
    <option value="1978">1978</option>
    <option value="1979">1979</option>
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
    <option value="1983">1983</option>
    <option value="1984">1984</option>
    <option value="1985">1985</option>
    <option value="1986">1986</option>
    <option value="1987">1987</option>
    <option value="1988">1988</option>
    <option value="1989">1989</option>
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
</select>
    </div>
  </form>
</nav>


</center>-->


<div class="row" id="bar">
  <div class="col-1" style="border:groove; border-radius: 12px; background-attachment: fixed;background-color:#D3D3D3;height: 48px;">
  Year
   <select id="year" name="year" style="width: 43px;
    background-color: red; height:44px;">
    <option></option>
    <option value="1940">1940</option>
    <option value="1941">1941</option>
    <option value="1942">1942</option>
    <option value="1943">1943</option>
    <option value="1944">1944</option>
    <option value="1945">1945</option>
    <option value="1946">1946</option>
    <option value="1947">1947</option>
    <option value="1948">1948</option>
    <option value="1949">1949</option>
    <option value="1950">1950</option>
    <option value="1951">1951</option>
    <option value="1952">1952</option>
    <option value="1953">1953</option>
    <option value="1954">1954</option>
    <option value="1955">1955</option>
    <option value="1956">1956</option>
    <option value="1957">1957</option>
    <option value="1958">1958</option>
    <option value="1959">1959</option>
    <option value="1960">1960</option>
    <option value="1961">1961</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <option value="1964">1964</option>
    <option value="1965">1965</option>
    <option value="1966">1966</option>
    <option value="1967">1967</option>
    <option value="1968">1968</option>
    <option value="1969">1969</option>
    <option value="1970">1970</option>
    <option value="1971">1971</option>
    <option value="1972">1972</option>
    <option value="1973">1973</option>
    <option value="1974">1974</option>
    <option value="1975">1975</option>
    <option value="1976">1976</option>
    <option value="1977">1977</option>
    <option value="1978">1978</option>
    <option value="1979">1979</option>
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
    <option value="1983">1983</option>
    <option value="1984">1984</option>
    <option value="1985">1985</option>
    <option value="1986">1986</option>
    <option value="1987">1987</option>
    <option value="1988">1988</option>
    <option value="1989">1989</option>
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
</select></div>
  <div class="col-10" style="padding-top: 12px;"> 
 
</div>
</div>




    <center> 
        <div class="tablediv">
            <table id="example" class="table table-striped table-bordered" style="width:40%">
                <thead>
                    <tr>
                        <th>Month</th>
                        <th>Recieved Data</th>
                        <th>Sent Data</th>
                    </tr>
                </thead>
                <tr>
                    <td>total</td>
                    <td>0.00B</td>
                    <td>0.00B</td>
                </tr>
                <tfoot>
                    
                </tfoot>
            </table>
        </div></center>
        <center><button type="button" class="btn btn-light">Back</button></center>

<script>
    $(document).ready(function() {
        $('#example').DataTable({
            dom: 'Plfrtip',
            language: {
                searchPanes: {
                    emptyPanes: ''
                }
            }
        });
    });


    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