@extends('layouts.app')
@section('title', 'Ingredients')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Ingredients</h1>
            <p class="text-sm text-ink-muted">Raw ingredients used in recipes — not sold directly. Manage units, cost and stock here; assemble them into recipes from a menu item's Products page.</p>
        </div>
        <a href="{{ route('inventory.ingredients.create') }}" class="btn-primary btn-sm"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add ingredient</a>
    </div>

    <form method="GET" class="card card-pad !p-3">
        <div class="grid sm:grid-cols-2 gap-2">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search ingredients…" class="input">
            <select name="section_id" class="input"><option value="">All sections</option>@foreach ($sections as $section)<option value="{{ $section->id }}" @selected(request('section_id') == $section->id)>{{ $section->name }}</option>@endforeach</select>
        </div>
    </form>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Ingredient</th><th>Section</th><th>Unit</th><th>Expiry</th><th class="text-right">Cost / unit</th><th>Stock on hand</th><th></th></tr></thead>
            <tbody>
                @forelse ($ingredients as $ingredient)
                    <tr>
                        <td class="font-medium">{{ $ingredient->name }}</td>
                        <td>{{ $ingredient->section->name ?? '—' }}</td>
                        <td>{{ $ingredient->unit->abbreviation ?? '—' }}</td>
                        <td class="text-right">{{ number_format($ingredient->cost_price, 2) }}</td>
                        <td>{{ optional($ingredient->stocks->first()?->expiry_date)->format('d M Y') ?? '—' }}</td>
                        <td>
                            @forelse ($ingredient->stocks as $stock)
                                <div class="text-xs">{{ $stock->store->name }}: <span class="{{ $stock->isLow() ? 'text-danger font-semibold' : '' }}">{{ number_format($stock->quantity_on_hand, 2) }}</span></div>
                            @empty
                                <span class="text-ink-faint text-xs">No stock yet</span>
                            @endforelse
                        </td>
                        <td class="text-right whitespace-nowrap"><a href="{{ route('inventory.ingredients.edit', $ingredient) }}" class="btn-ghost btn-sm">Edit</a><form method="POST" action="{{ route('inventory.ingredients.destroy', $ingredient) }}" class="inline" onsubmit="return confirm('Delete {{ addslashes($ingredient->name) }}?')">@csrf @method('DELETE')<button class="btn-ghost btn-sm text-danger">Delete</button></form></td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-ink-muted py-8">No ingredients yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $ingredients->links() }}
</div>
@endsection