@props([
    'index' => ':index',
    'recipe' => [],
    'ingredients' => [],
    'template' => empty($recipe) ? 'data-template-' : '',
])
@php
    /**
    * @var App\Models\Product $ingredient
    */
@endphp
<div id="{{ !empty($recipe) ? 'block-recipe' . $index : 'template-block-recipe' }}" class="row mb-2">
    <div class="col-12 py-0">
        <div class="row m-0 mt-2">
            <div class="col-12 col-sm-7 p-0">
                <div>
                    <select {{ $attributes->class(['is-invalid' => $errors->has("recipes.$index.ingredient_id")]) }} {{ $template }}id="select-recipe-id{{ $index }}" {{ $template }}name="recipes[{{ $index }}][ingredient_id]" data-index="{{ $index }}" style="width: 100%">
                        @foreach($ingredients as $ingredient)
                            <option value="{{ $ingredient->id }}" {{ $ingredient->id == ($recipe['ingredient_id'] ?? '') ? 'selected' : '' }}>{{ $ingredient->sku . ' - ' . $ingredient->name }}</option>
                        @endforeach
                    </select>
                    <input type="hidden" class="recipe-proportion" {{ $template }}id="{{ "input-recipe-proportion{$index}" }}" {{ $template }}name="{{ "recipes[$index][proportion]" }}" value="{{ $recipe['proportion'] ?? 0 }}" data-index="{{ $index }}" />
                </div>
            </div>
            <div class="col-12 col-sm-5 p-0">
                <div class="input-group">
                    <input type="text" {{ $attributes->class(['form-control inputmask-numeric', 'is-invalid' => $errors->has("recipes.$index.quantity")]) }} {{ $template }}id="{{ "input-recipe-quantity{$index}" }}" {{ $template }}name="{{ "recipes[$index][quantity]" }}" value="{{ $recipe['quantity'] ?? 1 }}" data-index="{{ $index }}" />
                    <span class="input-group-text px-1" {{$template}}id="span-recipe-unit{{ $index }}"></span>
                    <button type="button" class="btn btn-alt-danger" {{ $template }}id="btn-recipe-remove{{ $index }}" data-index="{{ $index }}">
                        <i class="fa fa-trash-can"></i>
                    </button>
                </div>
                @if($errors->has("recipes.$index.quantity"))
                    @error("recipes.$index.quantity")
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                @endif
            </div>
        </div>
    </div>
</div>