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

@section('breadcrumbs')
<li><a href="{{ url('/') }}">Home</a></li>
<li><a href="{{ url('/sites') }}">Sites</a></li>
<li>{{ $site->name }}</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, $site->channelpublish->site_id }}</b></h2>
            </center>
        </legend>
        <legend>
            <center>
                <h6>Version: {{ $site->channelpublish->publish_id }}</h6>
            </center>
        </legend>
    </div>


    <div class="container" data-aos="fade-up">
        <legend>
            <h4><b>Channel List</b></h4>
        </legend>
        <div class="modal-header">
            @if (Auth::user()->isAuthorized('channels.create') == true) <a class="btn btn-primary"
                href="{!! route('channels.create',$site->id)!!}" role="button">ADD</a> @endif
            @if (Auth::user()->isAuthorized('publish.edit') == true) <a class="btn btn-primary"
                href="{!! route('publish.edit',$site->id)!!}" role="button">Push Update</a> @endif
            @if (Auth::user()->isAuthorized('devices.show') == true) <a class="btn btn-primary"
                href="{!! route('devices.show',$site->id)!!}" role="button">View Devices</a> @endif
        </div>
        @if (count($channels) < 1) <legend>
            <center>
                <h6>Channel List Empty</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>Name</th>
                            <th>LCN</th>
                            <th>Multicast</th>
                            <th>Port</th>
                            <th>PMT</th>
                            <th>Service ID</th>
                            <th>Type</th>
                            <th>TS ID</th>
                            <th>ON ID</th>
                            <th>N ID</th>
                            <th>Edit</th>
                            @if (Auth::user()->isAuthorized('channels.destroy') == true)
                            <th>Delete</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($channels as $channel)
                        <tr>
                            <td>{{ $channel->name }}</td>
                            <td>{{ $channel->logical_channel_number }}</td>
                            <td>{{ $channel->multicast }}</td>
                            <td>{{ $channel->port }}</td>
                            <td>{{ $channel->pmt }}</td>
                            <td>{{ $channel->service_id }}</td>
                            <td>{{ $channel->service_type }}</td>
                            <td>{{ $channel->transport_id }}</td>
                            <td>{{ $channel->original_network_id }}</td>
                            <td>{{ $channel->network_id }}</td>
                            <td><a href="{!! route('channels.edit',[$channel->site_id,$channel->id]) !!}"
                                    class="btn">Edit</a></td>
                            @if (Auth::user()->isAuthorized('channels.destroy') == true)
                            <td>
                                <form action="{!! route('channels.destroy',[$channel->site_id,$channel->id]) !!}"
                                    method="POST" role="form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn">Delete</button>
                                </form>
                            </td>
                            @endif

                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            {{ $channels->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