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

{% block content %}
<form method="post" action="{{ action }}" enctype="multipart/form-data">

  <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="{{ goodie.name }}">
      </div>

      <div class="field col-span-2">
        <label class="field-label" for="description">Description</label>
        <textarea name="description" id="description" rows="4">{{ goodie.description }}</textarea>
      </div>

      <div class="field">
        <label class="field-label" for="goodie-type">Type</label>
        <select name="type" id="goodie-type" onchange="updateGoodieType(this.value)">
          <option value="default" {{ goodie.type == 'default' ? 'selected' }}>Goodie standard</option>
          <option value="clothing" {{ goodie.type == 'clothing' ? 'selected' }}>Vêtement (taille + couleur)</option>
        </select>
      </div>

      <div class="field">
        <label class="field-label" for="priceCents">Prix (en centimes, vide = non défini)</label>
        <input type="number" name="priceCents" id="priceCents" min="0" placeholder="1999"
               value="{{ goodie.priceCents is not null ? goodie.priceCents : '' }}">
      </div>

      <div class="field">
        <label class="field-label" for="image">Image</label>
        {% if goodie.image %}
          <div style="margin-bottom:8px;display:flex;align-items:center;gap:12px">
            <img src="{{ asset(goodie.image) }}" alt="" style="width:64px;height:64px;object-fit:contain;border-radius:6px;background:#0d1117;image-rendering:pixelated;border:1px solid var(--border)">
            <span style="font-size:.8rem;color:var(--muted)">Image actuelle</span>
          </div>
        {% endif %}
        <input type="file" name="image" id="image" accept="image/*">
        <span style="font-size:.78rem;color:var(--muted);margin-top:4px;display:block">Laisser vide pour conserver l'image existante.</span>
      </div>

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

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

    </div>
  </div>

  {# ── Section variantes vêtement ── #}
  <div class="section" id="clothing-section" style="{{ goodie.type == 'clothing' ? '' : 'display:none' }}">
    <div class="section-title">Variantes (taille × couleur)</div>
    <div style="font-size:.78rem;color:var(--muted);margin-bottom:12px">
      Chaque ligne correspond à une combinaison taille / couleur avec son propre stock.
      Utilisez des tailles standard : XS, S, M, L, XL, XXL, XXXL.
    </div>

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

    <div id="variant-rows">
      {% for v in goodie.variants ?? [] %}
        <div class="variant-row" style="display:grid;grid-template-columns:120px 1fr 90px 32px;gap:6px;margin-bottom:6px;align-items:center">
          <input type="text" name="variantSize[]"  value="{{ v.size }}"  placeholder="M" maxlength="10">
          <input type="text" name="variantColor[]" value="{{ v.color }}" placeholder="Noir" maxlength="50">
          <input type="number" name="variantStock[]" value="{{ v.stock }}" min="0" placeholder="0">
          <button type="button" onclick="this.closest('.variant-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="addVariantRow()" style="margin-top:4px">+ Ajouter une variante</button>
  </div>

  {# ── Images par couleur ── #}
  <div class="section" id="color-images-section" style="{{ goodie.type == 'clothing' ? '' : 'display:none' }}">
    <div class="section-title">Images par couleur</div>
    <div style="font-size:.78rem;color:var(--muted);margin-bottom:12px">
      Une image par couleur — utilisée comme aperçu quand le joueur sélectionne cette couleur.
      Laissez vide pour conserver l'image principale.
    </div>

    <div id="color-image-rows">
      {% for color, path in goodie.colorImages ?? {} %}
        <div class="color-img-row" style="display:grid;grid-template-columns:160px 1fr auto auto;gap:8px;margin-bottom:8px;align-items:center">
          <input type="text" name="colorImgName[]" value="{{ color }}" placeholder="Noir" maxlength="50" readonly
                 style="background:var(--surface)">
          <div style="display:flex;align-items:center;gap:10px">
            <img src="{{ asset(path) }}" alt="{{ color }}"
                 style="width:48px;height:48px;object-fit:contain;border-radius:4px;background:var(--bg);border:1px solid var(--border)">
            <input type="file" name="colorImgFile[]" accept="image/*" style="font-size:.82rem">
          </div>
          <label style="display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--danger);cursor:pointer;white-space:nowrap">
            <input type="checkbox" name="colorImgDelete[]" value="{{ color }}"> Supprimer
          </label>
          <span></span>
        </div>
      {% endfor %}
    </div>

    <button type="button" class="btn btn-cancel btn-sm" onclick="addColorImageRow()" style="margin-top:4px">+ Ajouter une couleur</button>
  </div>

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

</form>

<script>
function updateGoodieType(val) {
  var show = val === 'clothing' ? '' : 'none';
  document.getElementById('clothing-section').style.display = show;
  document.getElementById('color-images-section').style.display = show;
}

function addColorImageRow() {
  var container = document.getElementById('color-image-rows');
  var row = document.createElement('div');
  row.className = 'color-img-row';
  row.style.cssText = 'display:grid;grid-template-columns:160px 1fr auto auto;gap:8px;margin-bottom:8px;align-items:center';
  row.innerHTML =
    '<input type="text" name="colorImgName[]" placeholder="Noir" maxlength="50">' +
    '<input type="file" name="colorImgFile[]" accept="image/*" style="font-size:.82rem">' +
    '<span></span>' +
    '<button type="button" onclick="this.closest(\'.color-img-row\').remove()" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem;padding:0">✕</button>';
  container.appendChild(row);
  row.querySelector('input[type="text"]').focus();
}

function addVariantRow() {
  var container = document.getElementById('variant-rows');
  var row = document.createElement('div');
  row.className = 'variant-row';
  row.style.cssText = 'display:grid;grid-template-columns:120px 1fr 90px 32px;gap:6px;margin-bottom:6px;align-items:center';
  row.innerHTML =
    '<input type="text" name="variantSize[]" placeholder="M" maxlength="10">' +
    '<input type="text" name="variantColor[]" placeholder="Noir" maxlength="50">' +
    '<input type="number" name="variantStock[]" value="0" min="0">' +
    '<button type="button" onclick="this.closest(\'.variant-row\').remove()" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem;padding:0">✕</button>';
  container.appendChild(row);
  row.querySelector('input').focus();
}
</script>
{% endblock %}