@extends('layouts.default')
@extends('content_wrappers.md-10')

@section('title', '| Recipes')
@section('heading', 'Recipes')

@section('content')
  <div class="table-responsive">
    <table class="table table-bordered table-striped">

      <thead>
        <tr>
          <th>Name</th>
          <th>Created By</th>
          <th>Maintainer</th>
          <th>Operations</th>
        </tr>
      </thead>

      <tbody id="filteredTable">
        <tr>
          <td><input id="nameFilter" class="filter" type="text" placeholder="Search.."></td>
          <td><input id="authorFilter" class="filter" type="text" placeholder="Search.."></td>
          <td><input id="userFilter" class="filter" type="text" placeholder="Search.."></td>
          <td class='operations'></td>
        </tr>
        @foreach ($recipes as $recipe)
        <tr class="rows">
          <td class="name">{{ $recipe->name }}</td>
          <td class="author">{{ $recipe->author }}</td>
          <td class="user">{{ $recipe->user ->name}}</td>
          <td>
          @if(in_array('EditRecipe',$allperms) || ( Auth::user() && $recipe->user_id == Auth::user()->id))
            <a href="{{ route('recipes.edit', $recipe->id) }}" class="btn btn-info pull-left" style="margin-right: 3px;">Edit</a>
          @endif

          @if(in_array('DeleteRecipe',$allperms) || ( Auth::user() && $recipe->user_id == Auth::user()->id))
            {!! Form::open(['method' => 'DELETE', 'route' => ['recipes.destroy', $recipe->id] ]) !!}
            {!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
            {!! Form::close() !!}
          @endif
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  @if(in_array('Createrecipe',$allperms))
    <a href="{{ route('recipes.create') }}" class="btn btn-success">Add recipe</a>
  @endif
@endsection

@section('scripts')
<script>
  $(document).ready(function(){
    $(".filter").on("keyup", function() {
      var name = $("#nameFilter").val().toLowerCase();
      var author = $("#authorFilter").val().toLowerCase();
      var user = $("#userFilter").val().toLowerCase();
      $("#filteredTable tr.rows").filter(function() {
        $matchname=$(".name",this).text().toLowerCase().indexOf(name) > -1;
        $matchauthor=$(".author",this).text().toLowerCase().indexOf(author) > -1;
        $matchuser=$(".user",this).text().toLowerCase().indexOf(user) > -1;
        $(this).toggle($matchname && $matchauthor && $matchuser);
      });
    });
  });
</script>
@endsection