@extends('layouts.app')

@section('title', 'Recipes')

@section('content')
    @php
        use App\Models\KitchenRecipe;
        $money = fn ($v) => \App\Support\Fmt::money($v);
        $num = fn ($v) => \App\Support\Fmt::plain($v, 2);
        $sel = 'h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50';
    @endphp
    <div class="flex flex-col gap-6">
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Dishes, their ingredient build-up and cost per portion</p>
                <h1 class="text-lg font-semibold">Recipes</h1>
            </div>
            <a href="{{ route('kitchen.recipes.csv') }}"
               class="flex h-9 items-center rounded-lg border border-border px-3 text-sm hover:bg-accent">CSV</a>
        </div>

        @include('partials.flashes')

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-border text-left text-xs text-muted-foreground">
                            <th class="px-4 py-2 font-medium">Dish</th>
                            <th class="px-4 py-2 text-right font-medium">Portions</th>
                            <th class="px-4 py-2 text-right font-medium">Portion size</th>
                            <th class="px-4 py-2 font-medium">Batch yield</th>
                            <th class="px-4 py-2 text-right font-medium">Batch cost</th>
                            <th class="px-4 py-2 text-right font-medium">Cost per portion</th>
                            <th class="px-4 py-2 font-medium">Ingredients</th>
                            <th class="px-4 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $r)
                            <tr class="border-b border-border/60 align-top last:border-0">
                                <td class="px-4 py-2 font-medium">{{ $r->name }}</td>
                                <td class="px-4 py-2 text-right tabular-nums">{{ $r->portions }}</td>
                                <td class="px-4 py-2 text-right tabular-nums">{{ $num($r->portion_size) }} {{ $r->portion_unit }}</td>
                                <td class="px-4 py-2 text-xs">{{ $r->batch_yield ?: '—' }}</td>
                                <td class="px-4 py-2 text-right tabular-nums">{{ $money($r->costParts()) }}</td>
                                <td class="px-4 py-2 text-right font-semibold tabular-nums">{{ $money($r->costPerPortion()) }}</td>
                                <td class="px-4 py-2 text-xs">
                                    <span class="text-muted-foreground">{{ $r->ingredients->pluck('item.name')->filter()->join(', ') ?: '—' }}</span>
                                    @if ($r->composed->isNotEmpty())
                                        <span class="mt-0.5 block text-[11px] text-primary">
                                            + {{ $r->composed->pluck('name')->join(', ') }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-4 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <button type="button" onclick="document.getElementById('recipe-{{ $r->id }}').open = true"
                                                class="rounded-md border border-border px-2 py-1 text-[11px] hover:bg-accent">Edit</button>
                                        <form method="post" action="{{ route('kitchen.recipes.destroy', $r) }}"
                                              onsubmit="return confirm('Delete recipe &quot;{{ $r->name }}&quot;?')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-[11px] text-rose-700 hover:bg-rose-50">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            <tr class="border-b border-border/60 bg-muted/20 last:border-0">
                                <td colspan="8" class="px-4 py-3">
                                    <details id="recipe-{{ $r->id }}" class="rounded-lg border border-border p-3">
                                        <summary class="cursor-pointer text-xs font-semibold text-muted-foreground">Edit {{ $r->name }}</summary>
                                        @include('kitchen.partials.recipe-form', [
                                            'recipe' => $r,
                                            'items' => $items,
                                            'units' => $units,
                                            'allRecipes' => $rows,
                                            'sel' => $sel,
                                        ])
                                    </details>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="px-4 py-8 text-center text-muted-foreground">No recipes yet. Add the first dish below.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="border-b border-border px-4 py-3">
                <h2 class="text-sm font-semibold">New recipe</h2>
            </div>
            <div class="p-4">
                @include('kitchen.partials.recipe-form', ['recipe' => null, 'items' => $items, 'units' => $units, 'allRecipes' => $rows, 'sel' => $sel])
            </div>
        </div>
    </div>
@endsection