{% extends 'admin/layout.html.twig' %}
{% block page_title %}{{ title }}{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><a href="{{ path('admin_csiwo_index') }}" class="breadcrumb-link">CSIWO</a>
  <span class="sep">/</span><a href="{{ path('admin_craft_index') }}" class="breadcrumb-link">Craft</a>
  <span class="sep">/</span><span class="breadcrumb-text">{{ title }}</span>
{% endblock %}

{% block content %}
<form method="post" action="{{ action }}">

  <div class="section">
    <div class="section-title">Général</div>
    <div class="grid-2">

      <div class="field col-span-2">
        <label class="field-label" for="name">Nom *</label>
        <input type="text" name="name" id="name" required value="{{ recipe.name }}">
      </div>

      <div class="field">
        <label class="field-label" for="sortOrder">Ordre d'affichage</label>
        <input type="number" name="sortOrder" id="sortOrder" value="{{ recipe.sortOrder }}">
      </div>

      <div class="field" style="display:flex;align-items:center;gap:10px;padding-top:24px">
        <input type="checkbox" name="isActive" id="isActive" value="1" {{ recipe.isActive ? 'checked' }}>
        <label for="isActive" style="cursor:pointer">Recette active</label>
      </div>

    </div>
  </div>

  <div class="section">
    <div class="section-title">Résultat</div>
    <div class="grid-2">

      <div class="field">
        <label class="field-label" for="resultType">Type de résultat</label>
        <select name="resultType" id="resultType" onchange="updateResultType(this.value)">
          <option value="item"   {{ recipe.resultType == 'item'   ? 'selected' }}>Objet (ItemMmo)</option>
          <option value="weapon" {{ recipe.resultType == 'weapon' ? 'selected' }}>Arme (base, sans affixes)</option>
          <option value="armor"  {{ recipe.resultType == 'armor'  ? 'selected' }}>Armure (base, sans affixes)</option>
        </select>
      </div>

      {# Item #}
      <div class="field" id="result-item-section" style="{{ recipe.resultType != 'item' ? 'display:none' }}">
        <label class="field-label" for="resultItemId">Objet produit *</label>
        <select name="resultItemId" id="resultItemId">
          <option value="">— choisir —</option>
          {% for item in items %}
            <option value="{{ item.id }}" {{ recipe.resultItem and recipe.resultItem.id == item.id ? 'selected' }}>
              {{ item.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="field" id="result-qty-section" style="{{ recipe.resultType != 'item' ? 'display:none' }}">
        <label class="field-label" for="resultQty">Quantité produite</label>
        <input type="number" name="resultQty" id="resultQty" min="1" value="{{ recipe.resultQty }}">
      </div>

      {# Weapon #}
      <div class="field col-span-2" id="result-weapon-section" style="{{ recipe.resultType != 'weapon' ? 'display:none' }}">
        <label class="field-label" for="resultWeaponId">Arme produite *</label>
        <select name="resultWeaponId" id="resultWeaponId">
          <option value="">— choisir —</option>
          {% for weapon in weapons %}
            <option value="{{ weapon.id }}" {{ recipe.resultWeapon and recipe.resultWeapon.id == weapon.id ? 'selected' }}>
              {{ weapon.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      {# Armor #}
      <div class="field col-span-2" id="result-armor-section" style="{{ recipe.resultType != 'armor' ? 'display:none' }}">
        <label class="field-label" for="resultArmorId">Armure produite *</label>
        <select name="resultArmorId" id="resultArmorId">
          <option value="">— choisir —</option>
          {% for armor in armors %}
            <option value="{{ armor.id }}" {{ recipe.resultArmor and recipe.resultArmor.id == armor.id ? 'selected' }}>
              {{ armor.name }}
            </option>
          {% endfor %}
        </select>
      </div>

    </div>
  </div>

  <div class="section">
    <div class="section-title">Ingrédients</div>
    <div style="font-size:.78rem;color:var(--muted);margin-bottom:12px">
      Les objets de l'inventaire du joueur requis pour fabriquer cette recette.
    </div>

    <div style="display:grid;grid-template-columns:1fr 90px 32px;gap:6px;margin-bottom:6px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">
      <span>Objet (ItemMmo)</span><span>Quantité</span><span></span>
    </div>

    <div id="ingredient-rows">
      {% for ing in recipe.ingredients %}
        <div class="ing-row" style="display:grid;grid-template-columns:1fr 90px 32px;gap:6px;margin-bottom:6px;align-items:center">
          <select name="ingItemId[]">
            <option value="">— choisir —</option>
            {% for item in items %}
              <option value="{{ item.id }}" {{ ing.item.id == item.id ? 'selected' }}>{{ item.name }}</option>
            {% endfor %}
          </select>
          <input type="number" name="ingQty[]" value="{{ ing.qty }}" min="1">
          <button type="button" onclick="this.closest('.ing-row').remove()" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem;padding:0">✕</button>
        </div>
      {% endfor %}
    </div>

    <button type="button" class="btn btn-cancel btn-sm" onclick="addIngredientRow()" style="margin-top:4px">+ Ajouter un ingrédient</button>
  </div>

  <div class="form-actions">
    <a href="{{ path('admin_craft_index') }}" class="btn btn-secondary">Annuler</a>
    <button type="submit" class="btn btn-primary">Enregistrer</button>
  </div>

</form>

<script>
var craftItemsData = {{ items|map(i => {id: i.id, name: i.name})|json_encode|raw }};

function updateResultType(val) {
  document.getElementById('result-item-section').style.display   = val === 'item'   ? '' : 'none';
  document.getElementById('result-qty-section').style.display    = val === 'item'   ? '' : 'none';
  document.getElementById('result-weapon-section').style.display = val === 'weapon' ? '' : 'none';
  document.getElementById('result-armor-section').style.display  = val === 'armor'  ? '' : 'none';
}

function addIngredientRow() {
  var container = document.getElementById('ingredient-rows');
  var row = document.createElement('div');
  row.className = 'ing-row';
  row.style.cssText = 'display:grid;grid-template-columns:1fr 90px 32px;gap:6px;margin-bottom:6px;align-items:center';
  var sel = '<select name="ingItemId[]"><option value="">— choisir —</option>'
    + craftItemsData.map(function(i) { return '<option value="'+i.id+'">'+escHtml(i.name)+'</option>'; }).join('')
    + '</select>';
  row.innerHTML = sel
    + '<input type="number" name="ingQty[]" value="1" min="1">'
    + '<button type="button" onclick="this.closest(\'.ing-row\').remove()" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem;padding:0">✕</button>';
  container.appendChild(row);
  row.querySelector('select').focus();
}

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
</script>
{% endblock %}