@extends('layouts.admin')

@section('title','Recipe Categories')

@section('content')
<div class="content-main-block mrg-t-40">

  <div class="admin-create-btn-block mb-3">
    <a href="{{ route('recipes.create') }}" class="btn btn-danger btn-md">
      <i class="material-icons left">add</i> Add Category
    </a>
  </div>

  <div class="content-block box-body">
    <h4>Recipe Categories</h4>

    <table class="table table-hover mt-3">
      <thead>
        <tr>
          <th>#</th>
          <th>Category Name</th>
          <th width="160">Actions</th>
        </tr>
      </thead>

      <tbody>
        @forelse($recipes as $index => $recipe)
          <tr>
            <td>{{ $index + 1 }}</td>
            <td><strong>{{ $recipe->name }}</strong></td>

            {{-- ACTIONS --}}
            <td>
              <a href="{{ route('recipes.edit', $recipe->id) }}"
                 class="btn btn-sm btn-info"
                 data-toggle="tooltip"
                 title="Edit">
                <i class="material-icons">edit</i>
              </a>

              <button class="btn btn-sm btn-danger"
                      data-toggle="modal"
                      data-target="#deleteRecipe{{ $recipe->id }}">
                <i class="material-icons">delete</i>
              </button>
            </td>
          </tr>

          {{-- DELETE MODAL --}}
          <div class="modal fade"
               id="deleteRecipe{{ $recipe->id }}"
               tabindex="-1"
               role="dialog"
               aria-hidden="true">

            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">

                <div class="modal-header">
                  <h5 class="modal-title">Confirm Delete</h5>
                  <button type="button"
                          class="close"
                          data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body text-center">
                  <p>
                    Delete category
                    <strong>{{ $recipe->name }}</strong>?
                  </p>
                </div>

                <div class="modal-footer">
                  <form method="POST"
                        action="{{ route('recipes.destroy', $recipe->id) }}">
                    @csrf
                    @method('DELETE')

                    <button type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal">
                      Cancel
                    </button>

                    <button type="submit"
                            class="btn btn-danger">
                      Delete
                    </button>
                  </form>
                </div>

              </div>
            </div>
          </div>

        @empty
          <tr>
            <td colspan="3" class="text-center text-muted">
              No categories found
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>

  </div>
</div>
@endsection