@extends('layouts.app')
@section('title', 'Recipe')
@section('content')
<h4 class="mb-3">Recipe: {{ $product->name }}</h4>

<div class="card p-3 mb-3" style="max-width:500px;">
    <div class="d-flex justify-content-between">
        <span>Selling Price</span><strong>{{ number_format($product->price, 2) }}</strong>
    </div>
    <div class="d-flex justify-content-between">
        <span>Recipe Cost</span><strong>{{ number_format($product->recipeCost(), 2) }}</strong>
    </div>
    <div class="d-flex justify-content-between">
        <span>Food Cost %</span>
        <strong class="{{ ($product->foodCostPercent() ?? 0) > 35 ? 'text-danger' : 'text-success' }}">
            {{ $product->foodCostPercent() !== null ? $product->foodCostPercent().'%' : '-' }}
        </strong>
    </div>
</div>

<table class="table bg-white" style="max-width:600px;">
    <thead><tr><th>Ingredient</th><th>Quantity Used</th><th>Cost</th><th></th></tr></thead>
    <tbody>
    @foreach ($product->recipeItems as $item)
    <tr>
        <td>{{ $item->ingredient->name }}</td>
        <td>{{ $item->quantity }} {{ $item->ingredient->unit }}</td>
        <td>{{ number_format($item->cost(), 2) }}</td>
        <td>
            <form method="POST" action="{{ route('admin.recipes.remove', $item) }}" onsubmit="return confirm('Remove this ingredient from the recipe?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger">✕</button>
            </form>
        </td>
    </tr>
    @endforeach
    </tbody>
</table>

<form method="POST" action="{{ route('admin.recipes.store', $product) }}" class="d-flex gap-2" style="max-width:500px;">
    @csrf
    <select name="ingredient_id" class="form-select" required>
        <option value="">-- select ingredient --</option>
        @foreach ($ingredients as $i)
        <option value="{{ $i->id }}">{{ $i->name }} ({{ $i->unit }})</option>
        @endforeach
    </select>
    <input type="number" step="0.001" name="quantity" class="form-control" placeholder="Qty" style="width:100px;" required>
    <button class="btn btn-dark">Add</button>
</form>
@endsection