@extends('body')
@section('title')
    View
@endsection

@section('breadcrumbs')
  <li><a href="{{ url('/') }}">Home</a></li>
  <li><a href="{{ url('/sites') }}">Sites</a></li>
  <li><a href="{!! route('channels.show',$site->id) !!}">{{ $site->name }}</a></li>
  <li>Devices</li>
@endsection

@section('pageScripts')
<style>
    @media screen and (max-width: 600px) {
        th, td {
            white-space: nowrap;
        }
    
        

        .table-wrapper {
            overflow-x: scroll;
            width: 475px;
            margin: 0 auto;
        }
        .btn
        {
            font-size: 0.9rem;
            font-weight: bold;
            /* width: 100%; */
        }
    }
    </style>
@endsection


@section('content')
<section id="about" class="about">
<div class="container" data-aos="fade-up">
    <legend><center><h2><b>{{ $site->name }}</b></h2></center></legend>
    <legend><center><h6>Device List</h6></center></legend>
</div>


<div class="container" data-aos="fade-up">
    <legend><h4><b>Device List</b></h4></legend>

    @if (count($devices) < 1)
    <legend><center><h6>No device available</h6></center></legend>
    @else
    <div class="modal-header">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search ..." class="form-control">
        <span class="glyphicon glyphicon-search"></span>
    </div>
    <div class="table-wrapper">
    <table class="table" id="myTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Account</th>
                <th>SMC</th>
                <th>STB</th>
                <th>Last seen</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($devices as $device)
            <tr>   
                <td>{{ $device->id }}</td>     
                <td>{{ $device->account }}</td>    
                <td>{{ $device->smc }}</td>    
                <td>{{ $device->stb }}</td>    
                <td>{{ $device->updated_at }}</td>    
            </tr>                
            @endforeach

        </tbody>
    </table>
    </div>
    {{ $devices->links() }}
    @endif
</div>

<script>
    function myFunction() {
// Declare variables 
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
  // define the row's cells
    var tds = trs[i].getElementsByTagName("td");
    // hide the row
    trs[i].style.display = "none";
    // loop through row cells
    for (var i2 = 0; i2 < tds.length; i2++) {
    // if there's a match
        if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
            // show the row
            trs[i].style.display = "";
            // skip to the next row
            continue;
          }
      }
  }
}
</script>

</section>
    
@endsection