{% extends "admin/base.html" %}
{% block page_title %}Рецептура: {{ product.name }}{% endblock %}
{% block content %}
<a class="muted" style="font-size:12.5px;" href="{{ url_for('admin.inventory_recipes') }}">← До рецептур</a>
<h1>🧾 {{ product.name }}</h1>
<p class="muted field-hint">Вкажіть, скільки кожного інгредієнта йде на <b>одну порцію</b> цієї страви. Система сама відніматиме це зі складу щоразу, коли клієнт її замовляє, і поверне назад, якщо замовлення скасують.</p>

{% if not ingredients %}
<div class="card">
  <p class="muted" style="margin:0;">Спочатку додайте хоча б один інгредієнт на сторінці <a href="{{ url_for('admin.inventory_list') }}">Склад</a>.</p>
</div>
{% else %}
<div class="card" style="max-width:560px;margin:0 auto;">
  <form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div id="recipe-rows">
      {% for link in links %}
      <div class="recipe-row">
        <select name="ingredient_id" onchange="syncRowStep(this)">
          <option value="">— прибрати —</option>
          {% for ing in ingredients %}
          <option value="{{ ing.id }}" data-unit="{{ ing.unit }}" {{ 'selected' if link.ingredient_id == ing.id }}>{{ ing.name }} ({{ ing.unit }})</option>
          {% endfor %}
        </select>
        <input type="number" step="{{ '1' if link.ingredient.unit in whole_units else '0.01' }}" min="0" name="quantity_per_unit" value="{{ link.quantity_per_unit|fmt_qty }}" placeholder="к-сть на 1 порцію">
        <button type="button" class="btn small danger" onclick="this.closest('.recipe-row').remove();" aria-label="Прибрати рядок">✕</button>
      </div>
      {% endfor %}
    </div>
    <button type="button" class="btn secondary small" onclick="addRecipeRow();" style="margin-top:10px;">+ Додати інгредієнт</button>
    <div style="margin-top:16px;display:flex;gap:10px;">
      <button class="btn" type="submit">Зберегти рецепт</button>
      <a class="btn secondary" href="{{ url_for('admin.inventory_recipes') }}">Скасувати</a>
    </div>
  </form>
</div>

<template id="recipe-row-template">
  <div class="recipe-row">
    <select name="ingredient_id" onchange="syncRowStep(this)">
      <option value="">— прибрати —</option>
      {% for ing in ingredients %}
      <option value="{{ ing.id }}" data-unit="{{ ing.unit }}">{{ ing.name }} ({{ ing.unit }})</option>
      {% endfor %}
    </select>
    <input type="number" step="1" min="0" name="quantity_per_unit" placeholder="к-сть на 1 порцію">
    <button type="button" class="btn small danger" onclick="this.closest('.recipe-row').remove();" aria-label="Прибрати рядок">✕</button>
  </div>
</template>

<script>
  var WHOLE_UNITS = {{ whole_units|list|tojson }};

  function syncRowStep(select) {
    var option = select.options[select.selectedIndex];
    var unit = option ? option.dataset.unit : null;
    var input = select.closest('.recipe-row').querySelector('input[name="quantity_per_unit"]');
    if (unit) {
      input.step = WHOLE_UNITS.indexOf(unit) !== -1 ? '1' : '0.01';
    }
  }

  function addRecipeRow() {
    var tpl = document.getElementById('recipe-row-template');
    document.getElementById('recipe-rows').appendChild(tpl.content.cloneNode(true));
  }

  document.querySelectorAll('#recipe-rows select[name="ingredient_id"]').forEach(syncRowStep);
</script>
{% endif %}
{% endblock %}