@extends('body')
@section('title')
    Sites
@endsection
@section('link')
    class="active"
@endsection
@section('breadcrumbs')
  <li><a href="{{ url('/') }}">Home</a></li>
  <li>Sites</li>
@endsection

@section('content')
<style>
.btn1{
    color: rgb(88, 88, 100);
    padding: .625em;
       
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  /* background-color: #f8f8f8; */
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pages{
  position: relative;
 
    
}
.child {
  width: 50px;
  height: 50px;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  /* margin: -25px 0 0 -25px; apply negative top and left margins to truly center the element */

 
}

@media screen and (max-width: 1000px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
  table a{
    color: rgb(88, 88, 100);
    display: block;
    font-size: .8em;
    text-align: right;
    padding: 0%;
  }
.pages{
  display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    justify-content: center;
    
}
.child {
 
  margin: 0 auto;
}
 
}
</style>

<section id="faq" class="faq section-bg">
  <div class="container" data-aos="fade-up">
    <div class="section-title">
      <h2>Sites</h2>
    </div>  
    <div class="section-title">
      <div class="search">
        <input type="text"id="mySiteinput" onkeyup="mySite()" placeholder="Search ..." class="form-control">
      </div>
    </div>
    <div class="faq-list" >
        <ul id="myUL">
          @foreach ($sites as $site)
          <li data-aos="fade-up">
            <i class="bx bx-help-circle icon-help"></i>
              <a data-toggle="collapse" class="collapse collapsed" href="#faq-list-{{$site->id}}">
                {{ $site->name }}
                <p hidden>{{ $site->code_name }}</p> 
                <p hidden>{{ $site->ward }}</p> 
                <p hidden>{{ $site->contact_number }}</p>
                <p hidden>{{ $site->contact_person }}</p>
                <i class="bx bx-chevron-down icon-show"></i>
                <i class="bx bx-chevron-up icon-close"></i>
              </a>
              <div id="faq-list-{{ $site->id }}" class="collapse" data-parent=".faq-list">
                <p>
                  <table id="myTable">
                    <thead>
                      <tr>
                        <th  scope="col">ID</th>
                        <th  scope="col">Code Name</th>
                        <th  scope="col">Ward</th>
                        <th  scope="col">Contact</th>
                        <th  scope="col">Person</th>
                        <th style="display: {{Auth::user()->isAuthorized('sites.edit') ? '' : 'none'}}" scope="col">EDIT</th>
                        <th style="display: {{Auth::user()->isAuthorized('channels.show') ? '' : 'none'}}" scope="col">Channel List</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td data-label="ID" >{{ $site->id }}</td>    
                        <td data-label="Code Name">{{ $site->code_name }}</td>    
                        <td data-label="Ward">{{ $site->ward }}</td>    
                        <td data-label="Contact">{{ $site->contact_number }}</td>    
                        <td data-label="Person">{{ $site->contact_person }}</td>    
                        <td style="display: {{Auth::user()->isAuthorized('sites.edit') ? '' : 'none'}}" ><a href="{!! route('sites.edit',$site->id) !!}" class="btn btn1" >Edit</a></td>
                        <td style="display: {{Auth::user()->isAuthorized('channels.show') ? '' : 'none'}}" ><a href="{!! route('channels.show',$site->id) !!}" class="btn btn1" >Channels</a></td>
                       </tr>   
                    </tbody>
                  </table>
                </p>
              </div>
            </li>
          @endforeach
        </ul>
    </div>
    <div class="pages">
      <div class="child">
        {{ $sites->links() }}
      </div>  
    </div>
  </div>
</section>


{{-- <section id="about" class="about">
  <div class="container" data-aos="fade-up">
    <div class="section-title">
      <h2>Sites</h2>
    </div>
    <div class="modal-header">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search ..." class="form-control">
        <span class="glyphicon glyphicon-search"></span>
    </div>
    @if (count($sites) < 1)
    <h1>No Sites Available</h1>        
    @else
    <div class="row content"> 
      <table id="myTable">   
        <thead>
          <tr>
            <th  scope="col">ID</th>
            <th  scope="col">Name</th>
            <th  scope="col">Code Name</th>
            <th  scope="col">Ward</th>
            <th  scope="col">Contact</th>
            <th  scope="col">Person</th>
            <th  scope="col">EDIT</th>
            <th  scope="col">Channel List</th>
            <th  scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
        @foreach ($sites as $site)
          <tr>
            <td data-label="ID" >{{ $site->id }}</td>    
            <td data-label="Name">{{ $site->name }}</td>    
            <td data-label="Code Name">{{ $site->code_name }}</td>    
            <td data-label="Ward">{{ $site->ward }}</td>    
            <td data-label="Contact">{{ $site->contact_number }}</td>    
            <td data-label="Person">{{ $site->contact_person }}</td>    
            <td data-label="Edit"><a href="{!! route('sites.edit',$site->id) !!}" class="btn btn1" >Edit</a></td>
            <td data-label="Channel List" ><a href="{!! route('channels.show',$site->id) !!}" class="btn btn1" >Channels</a></td>
            <td data-label="Delete">
              <form action="{!! route('sites.destroy',$site->id) !!}" method="POST" role="form">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn1">Delete</button>
              </form>
            </td> 
          </tr>                
        @endforeach
        </tbody>
      </table>
    {{ $sites->links() }}
    </div>

    <div class="row content"> 
        <table id="myTable">   
          <thead>
            <tr>
              <th  scope="col">ID</th>
              <th  scope="col">Name</th>
              <th  scope="col">Code Name</th>
              <th  scope="col">Ward</th>
              <th  scope="col">Contact</th>
              <th  scope="col">Person</th>
              <th  scope="col">EDIT</th>
              <th  scope="col">Channel List</th>
              <th  scope="col">Delete</th>
            </tr>
          </thead>
          <tbody>
          @foreach ($sites as $site)
            <tr>
              <td data-label="ID" >{{ $site->id }}</td>    
              <td data-label="Name">{{ $site->name }}</td>    
              <td data-label="Code Name">{{ $site->code_name }}</td>    
              <td data-label="Ward">{{ $site->ward }}</td>    
              <td data-label="Contact">{{ $site->contact_number }}</td>    
              <td data-label="Person">{{ $site->contact_person }}</td>    
              <td data-label="Edit"><a href="{!! route('sites.edit',$site->id) !!}" class="btn btn1" >Edit</a></td>
              <td data-label="Channel List" ><a href="{!! route('channels.show',$site->id) !!}" class="btn btn1" >Channels</a></td>
              <td data-label="Delete">
                <form action="{!! route('sites.destroy',$site->id) !!}" method="POST" role="form">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="btn btn1">Delete</button>
                </form>
              </td> 
            </tr>                
          @endforeach
          </tbody>
        </table>
      {{ $sites->links() }}
      </div>


    @endif
  </div> 
</section> --}}
<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>

<script>
    function mySite() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("mySiteinput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
       
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a",)[0];
           
            txtValue = a.textContent || a.innerText;
            
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
                
            } else {
                li[i].style.display = "none";
                
            }
        }
    }
    </script>

@endsection