@extends('layouts.admin')

@section('title','Ingredients')

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

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

  
  </div>

  {{-- Content --}}
  <div class="content-block box-body">

    <h4 class="mb-3">Ingredients List</h4>
    <hr>

    @if($ingredients->count())
      <div class="table-responsive">
        <table class="table table-bordered table-striped">
          <thead class="thead-dark">
            <tr>
              <th width="60">#</th>
              <th>Ingredient Name</th>
               <th>Recipe Categories</th>
                   <th width="150">Actions</th>
            
            </tr>
          </thead>
          <tbody>
            @foreach($ingredients as $ingredient)
              <tr>
                <td>{{ $ingredient->id }}</td>

                <td>
                  <strong>{{ $ingredient->name }}</strong>
                </td>

                <td>
                  @if($ingredient->recipe_categories->count())
                    @foreach($ingredient->recipe_categories as $category)
                      <span class="badge badge-info mr-1">
                        {{ $category->name }}
                      </span>
                    @endforeach
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
{{-- ACTIONS --}}
  <td>
    <a href="{{ route('ingredients.edit', $ingredient->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="#deleteIngredient{{ $ingredient->id }}">
      <i class="material-icons">delete</i>
    </button>

    {{-- Delete Modal --}}
    <div id="deleteIngredient{{ $ingredient->id }}"
         class="modal fade"
         tabindex="-1">
      <div class="modal-dialog modal-sm">
        <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 <strong>{{ $ingredient->name }}</strong>?</p>
          </div>

          <div class="modal-footer">
            <form method="POST"
                  action="{{ route('ingredients.destroy', $ingredient->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>
  </td>
                
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @else
      <div class="text-center text-muted p-4">
        <h5>No ingredients found</h5>
        <p>Start by creating your first ingredient.</p>
      </div>
    @endif

  </div>
</div>
@endsection