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

@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>Categories</th>
          <th>Created By</th>
          @if(Auth::user())
            <th>Operations</th>
          @endif
        </tr>
      </thead>

      <tbody id="filteredTable">
        <tr>
          <td><input id="nameFilter" class="filter form-control" type="text" placeholder="Search.."></td>
          <td><input id="categoryFilter" class="filter form-control" type="text" placeholder="Search.."></td>
          <td><input id="authorFilter" class="filter form-control" type="text" placeholder="Search.."></td>
          @if(Auth::user())
            <td class='operations'></td>
          @endif
        </tr>
        @foreach ($recipes as $recipe)
        <tr class="rows">
          <td class="name"><a href="{{ route('recipes.show', $recipe->id) }}">{{ $recipe->name }}</a></td>
          <td class="categories">
            @foreach ($recipe->categories as $category)
              {{ $category->name }}
            @endforeach
          </td>
          <td class="author">{{ $recipe->author }}</td>
          @if(Auth::user())
            <td>
            @if(in_array('EditRecipe',$allperms) || $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) || $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>
          @endif
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  @if(Auth::user())
    <a href="{{ route('recipes.create') }}" class="btn btn-success">Create New Recipe</a>
  @endif
@endsection

@section('scripts')
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(document).ready(function(){
    var categories = @json($categories);
    $(document).on("click",function(){filter();});
    $(".filter").on("input", function() {filter();});

    function filter(){
      var name = $("#nameFilter").val().toLowerCase();
      var category = $("#categoryFilter").val().toLowerCase();
      var author = $("#authorFilter").val().toLowerCase();
      $("#filteredTable tr.rows").filter(function() {
        matchname=$(".name",this).text().toLowerCase().indexOf(name) > -1;
        matchcategory=$(".categories",this).text().toLowerCase().indexOf(category) > -1;
        matchauthor=$(".author",this).text().toLowerCase().indexOf(author) > -1;
        $(this).toggle(matchname && matchcategory && matchauthor);
      });
    }

    $("#categoryFilter").autocomplete({
      source: categories
    });
  });
</script>
@endsection
@section('styles')
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endsection