@extends('layouts.app')

@section('title', 'Ingredient Library')

@section('content')
<div class="container">
    <div class="page-heading">
        <div>
            <div class="eyebrow">Nutrition Database</div>
            <h1>Ingredient Library</h1>
            <p>Manage nutrition values, allergens and dietary tags for every ingredient.</p>
        </div>

        <a class="btn btn-primary" href="{{ route('dashboard.ingredients.create') }}">
            + Add Ingredient
        </a>
    </div>

    <div class="card table-card">
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Ingredient</th>
                        <th>Calories</th>
                        <th>Protein</th>
                        <th>Carbs</th>
                        <th>Fat</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($ingredients as $ingredient)
                        <tr>
                            <td>
                                <strong>{{ $ingredient->name }}</strong>
                            </td>

                            <td>{{ $ingredient->calories_per_100g }}</td>
                            <td>{{ $ingredient->protein_per_100g }}g</td>
                            <td>{{ $ingredient->carbohydrates_per_100g }}g</td>
                            <td>{{ $ingredient->fat_per_100g }}g</td>

                            <td>
                                <div class="table-actions">
                                    <a
                                        class="btn btn-light btn-sm"
                                        href="{{ route('dashboard.ingredients.edit', $ingredient) }}"
                                    >
                                        Edit
                                    </a>

                                    <form
                                        method="POST"
                                        action="{{ route('dashboard.ingredients.destroy', $ingredient) }}"
                                        onsubmit="return confirm('Delete this ingredient?')"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button class="btn btn-danger btn-sm">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">No ingredients found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div style="margin-top: 20px;">
        {{ $ingredients->links() }}
    </div>
</div>
@endsection