
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <!-- <form method="post" action="{{route('api')}}"> -->
  <table class="table table-bordered" style="color:#fff">
    <thead>
      <tr>
        <th>位置</th>
        <th>來源串流</th>
        <th>辨識模組</th>
        <th>目的串流</th>
        <th>辨識範圍</th>
        <th>狀態</th>
        <th>備註</th>
      </tr>
    </thead>
    <tbody id="myTable">
        @foreach($contents as $content)
            <tr>
                <form method="post" action="{{route('api')}}">
                  <input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
                  <td>{{$content['Id']}}</td>
                  <td>{{$content['State']}}</td>
                  <td>{{$content['Status']}}</td>
                  <td>{{$content['Status']}}</td>
                  <td>{{$content['Status']}}</td>
                  <td>{{$content['Status']}}</td>
                  <td>
                      <input type = "hidden" name = "id" value = "{{$content['Id']}}">
                      <button  type="submit" class="btn btn-Success" name="btn" value="start">啟動</button>
                      <button type="submit" class="btn btn-Danger" name="btn" value="stop">停止</button>
                      <button type="submit" class="btn btn-Primary" name="btn" value="restart">重啟</button>
                  </td>
                </form>
            </tr>
        @endforeach
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
        <td>Mary</td>
        <td>Moe</td>
        <td>啟動</td>
        <td>
            <form method="post" action="{{route('api')}}">
                <input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
                <input type = "hidden" name = "id" value = "57444bfeb22b">
                <button  type="submit" class="btn btn-Success" name="btn" value="start">啟動</button>
                <button type="submit" class="btn btn-Danger" name="btn" value="stop">停止</button>
                <button type="submit" class="btn btn-Primary" name="btn" value="restart">重啟</button>
            </form>      

        </td>
      </tr>
    </tbody>
  </table>
  <!-- </form>     -->
  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>


<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>