@extends('layouts.app')
@section('title', 'Recipe · '.$product->name)

@section('content')
<div
    class="max-w-3xl space-y-6"
    x-data="{
        rows: {{ Illuminate\Support\Js::from($recipe->items->map(fn ($i) => [
            'ingredient_product_id' => $i->ingredient_product_id,
            'quantity' => $i->quantity,
            'unit_id' => $i->unit_id,
        ])->values()) }},
        addRow() { this.rows.push({ ingredient_product_id: '', quantity: '', unit_id: '' }) },
        removeRow(i) { this.rows.splice(i, 1) },
    }"
>
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold">{{ $product->name }}</h1>
            <p class="text-sm text-ink-muted">Selling price: {{ number_format($product->selling_price, 2) }} · {{ $product->department->name ?? '' }}</p>
        </div>
        <a href="{{ route('inventory.recipes.index') }}" class="btn-secondary btn-sm">Back</a>
    </div>

    <form method="POST" action="{{ route('inventory.recipes.update', $product) }}" class="card card-pad space-y-4">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="field-label">Yield (portions per batch)</label>
                <input type="number" min="1" name="yield_quantity" value="{{ old('yield_quantity', $recipe->yield_quantity ?? 1) }}" class="input" required>
            </div>
            <div>
                <label class="field-label">Preparation notes</label>
                <input type="text" name="preparation_notes" value="{{ old('preparation_notes', $recipe->preparation_notes ?? '') }}" class="input">
            </div>
        </div>

        <div class="border-t border-line pt-4">
            <div class="flex items-center justify-between mb-2">
                <p class="field-label !mb-0">Ingredients</p>
                <button type="button" class="btn-ghost btn-sm" x-on:click="addRow()"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add ingredient</button>
            </div>

            <template x-for="(row, i) in rows" :key="i">
                <div class="grid grid-cols-12 gap-2 mb-2 items-center">
                    <select :name="`items[${i}][ingredient_product_id]`" x-model="row.ingredient_product_id" class="input col-span-6" required>
                        <option value="">Select ingredient…</option>
                        @foreach ($ingredients as $ingredient)
                            <option value="{{ $ingredient->id }}">{{ $ingredient->name }} ({{ $ingredient->unit->abbreviation ?? 'unit' }} @ {{ number_format($ingredient->cost_price, 2) }})</option>
                        @endforeach
                    </select>
                    <input type="number" step="0.0001" min="0.0001" :name="`items[${i}][quantity]`" x-model="row.quantity" placeholder="Qty" class="input col-span-3" required>
                    <select :name="`items[${i}][unit_id]`" x-model="row.unit_id" class="input col-span-2">
                        <option value="">Unit…</option>
                        @foreach ($units as $unit)
                            <option value="{{ $unit->id }}">{{ $unit->abbreviation }}</option>
                        @endforeach
                    </select>
                    <button type="button" class="btn-ghost btn-sm col-span-1 text-danger" x-on:click="removeRow(i)"><i data-lucide="trash-2" class="w-3.5 h-3.5"></i></button>
                </div>
            </template>

            <p class="text-xs text-ink-faint" x-show="rows.length === 0">No ingredients yet — add at least one, or leave empty to remove the recipe.</p>
        </div>

        <div class="flex items-center justify-between border-t border-line pt-4">
            @if ($product->has_recipe)
                <button type="submit" form="delete-recipe" class="btn-ghost btn-sm text-danger">Remove recipe</button>
            @else
                <span></span>
            @endif
            <button type="submit" class="btn-primary">Save recipe</button>
        </div>
    </form>

    @if ($product->has_recipe)
        <form id="delete-recipe" method="POST" action="{{ route('inventory.recipes.destroy', $product) }}">@csrf @method('DELETE')</form>
    @endif
</div>
@endsection