<?php /** /app/views/admin/produtos/form.php */
$p = $produto ?? [];
$isEdit = !empty($p['id']);
?>

<form action="<?= admin_url('produtos/salvar') ?>" method="post" enctype="multipart/form-data">
  <?= csrf_field() ?>
  <input type="hidden" name="id" value="<?= (int)($p['id'] ?? 0) ?>">

  <div style="display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start">

    <!-- PRINCIPAL -->
    <div>
      <div class="card">
        <h3 style="margin-top:0">Informações básicas</h3>

        <div class="form-group">
          <label>Nome do produto *</label>
          <input type="text" name="nome" class="form-control" required value="<?= e($p['nome'] ?? '') ?>">
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>SKU / Código *</label>
            <input type="text" name="sku" class="form-control" required value="<?= e($p['sku'] ?? '') ?>">
          </div>
          <div class="form-group">
            <label>Slug (URL amigável)</label>
            <input type="text" name="slug" class="form-control" value="<?= e($p['slug'] ?? '') ?>" placeholder="gera automaticamente">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>Categoria</label>
            <select name="categoria_id" class="form-select">
              <option value="">Selecione</option>
              <?php foreach ($categorias as $c): ?>
                <option value="<?= (int)$c['id'] ?>" <?= ($p['categoria_id'] ?? '') == $c['id'] ? 'selected' : '' ?>><?= e($c['nome']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="form-group">
            <label>Coleção</label>
            <select name="colecao_id" class="form-select">
              <option value="">Selecione</option>
              <?php foreach ($colecoes as $c): ?>
                <option value="<?= (int)$c['id'] ?>" <?= ($p['colecao_id'] ?? '') == $c['id'] ? 'selected' : '' ?>><?= e($c['nome']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label>Descrição curta</label>
          <textarea name="descricao_curta" class="form-control" rows="2" maxlength="500"><?= e($p['descricao_curta'] ?? '') ?></textarea>
          <div class="form-hint">Usada em listagens e na página do produto (máx 500 caracteres).</div>
        </div>

        <div class="form-group">
          <label>Descrição completa</label>
          <textarea name="descricao_completa" class="form-control" rows="6"><?= e($p['descricao_completa'] ?? '') ?></textarea>
        </div>
      </div>

      <div class="card">
        <h3 style="margin-top:0">Características técnicas</h3>

        <div class="form-row">
          <div class="form-group">
            <label>Material da armação</label>
            <input type="text" name="material_armacao" class="form-control" value="<?= e($p['material_armacao'] ?? '') ?>" placeholder="Ex: Acetato, Metal, TR-90">
          </div>
          <div class="form-group">
            <label>Tipo de lente</label>
            <input type="text" name="tipo_lente" class="form-control" value="<?= e($p['tipo_lente'] ?? '') ?>" placeholder="Ex: Cristal, Policarbonato">
          </div>
        </div>

        <div class="form-row-3">
          <div class="form-group">
            <label>Proteção UV</label>
            <input type="text" name="protecao_uv" class="form-control" value="<?= e($p['protecao_uv'] ?? '') ?>" placeholder="Ex: UV400">
          </div>
          <div class="form-group">
            <label>Medidas</label>
            <input type="text" name="medidas" class="form-control" value="<?= e($p['medidas'] ?? '') ?>" placeholder="Ex: 54-18-145">
          </div>
          <div class="form-group" style="display:flex;align-items:flex-end">
            <label class="form-check">
              <input type="checkbox" name="polarizado" value="1" <?= !empty($p['polarizado']) ? 'checked' : '' ?>>
              Polarizado
            </label>
          </div>
        </div>
      </div>

      <div class="card">
        <h3 style="margin-top:0">Imagens do produto</h3>
        <div class="form-group">
          <label>Adicionar imagens (múltiplas)</label>
          <input type="file" name="imagens[]" class="form-control" multiple accept="image/*">
          <div class="form-hint">JPEG, PNG ou WEBP. A primeira imagem será definida como principal.</div>
        </div>

        <?php if (!empty($imagens)): ?>
          <div class="img-gallery">
            <?php foreach ($imagens as $img): ?>
              <div class="item <?= $img['principal'] ? 'principal' : '' ?>">
                <?php if ($img['principal']): ?><span class="tag-principal">Principal</span><?php endif; ?>
                <img src="<?= upload_url($img['arquivo']) ?>" alt="">
                <div class="actions">
                  <?php if (!$img['principal']): ?>
                    <a href="<?= admin_url('produtos/imagem-principal/' . $img['id']) ?>">Principal</a>
                  <?php else: ?>
                    <span>—</span>
                  <?php endif; ?>
                  <a class="remove" href="<?= admin_url('produtos/remover-imagem/' . $img['id']) ?>" onclick="return confirm('Remover imagem?')">Excluir</a>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>

      <?php if ($isEdit): ?>
      <div class="card">
        <h3 style="margin-top:0">Variações (cores)</h3>

        <?php if (!empty($variacoes)): ?>
          <div class="variation-list">
            <?php foreach ($variacoes as $v): ?>
              <div class="variation-item">
                <span class="color-dot" style="background: <?= e($v['cor_hex'] ?? '#ddd') ?>"></span>
                <strong><?= e($v['cor'] ?? '—') ?></strong>
                <?php if (!empty($v['cor_lente'])): ?><span style="color:var(--admin-muted)">/ lente <?= e($v['cor_lente']) ?></span><?php endif; ?>
                <?php if (!empty($v['sku_variacao'])): ?><code style="margin-left:8px"><?= e($v['sku_variacao']) ?></code><?php endif; ?>
                <span style="margin-left:auto;font-size:.82rem;color:var(--admin-muted)">Estoque: <?= (int)$v['estoque'] ?></span>
                <a href="<?= admin_url('produtos/variacao/remover/' . $v['id']) ?>"
                   style="color:var(--admin-danger)" onclick="return confirm('Remover variação?')">×</a>
              </div>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>

        <fieldset style="margin-top:20px;border:1px dashed var(--admin-border);padding:16px;border-radius:6px">
          <legend style="padding:0 8px;font-size:.85rem">Adicionar variação</legend>
          <div class="form-row-3">
            <div class="form-group"><label>Cor</label><input type="text" name="cor" form="varForm" class="form-control" placeholder="Preto"></div>
            <div class="form-group"><label>Cor (hex)</label><input type="color" name="cor_hex" form="varForm" class="form-control" value="#000000"></div>
            <div class="form-group"><label>Lente</label><input type="text" name="cor_lente" form="varForm" class="form-control" placeholder="Cinza"></div>
          </div>
          <div class="form-row-3">
            <div class="form-group"><label>SKU variação</label><input type="text" name="sku_variacao" form="varForm" class="form-control"></div>
            <div class="form-group"><label>Estoque</label><input type="number" name="estoque" form="varForm" class="form-control" value="0"></div>
            <div class="form-group" style="display:flex;align-items:flex-end">
              <button type="submit" form="varForm" class="btn">+ Adicionar variação</button>
            </div>
          </div>
        </fieldset>
      </div>

      <!-- Form separado para variação -->
      <form id="varForm" action="<?= admin_url('produtos/variacao') ?>" method="post">
        <?= csrf_field() ?>
        <input type="hidden" name="produto_id" value="<?= (int)$p['id'] ?>">
      </form>
      <?php endif; ?>
    </div>

    <!-- LATERAL -->
    <div>
      <div class="card">
        <h3 style="margin-top:0">Publicação</h3>

        <div class="form-check">
          <input type="checkbox" name="ativo" value="1" <?= !isset($p['ativo']) || $p['ativo'] ? 'checked' : '' ?>>
          <label>Produto ativo (visível no catálogo)</label>
        </div>

        <div class="form-check">
          <input type="checkbox" name="destaque" value="1" <?= !empty($p['destaque']) ? 'checked' : '' ?>>
          <label>Produto em destaque</label>
        </div>

        <div class="form-group" style="margin-top:16px">
          <label>Ordem de exibição</label>
          <input type="number" name="ordem" class="form-control" value="<?= (int)($p['ordem'] ?? 0) ?>">
          <div class="form-hint">Menor número aparece primeiro.</div>
        </div>
      </div>

      <div class="card">
        <h3 style="margin-top:0">Preço</h3>
        <div class="form-group">
          <label>Preço (opcional)</label>
          <input type="text" name="preco" class="form-control" value="<?= $p['preco'] ?? '' ?>" placeholder="0,00">
        </div>
        <div class="form-check">
          <input type="checkbox" name="mostrar_preco" value="1" <?= !empty($p['mostrar_preco']) ? 'checked' : '' ?>>
          <label>Mostrar preço no site</label>
        </div>
      </div>

      <div class="card">
        <h3 style="margin-top:0">SEO</h3>
        <div class="form-group">
          <label>Meta título</label>
          <input type="text" name="meta_titulo" class="form-control" value="<?= e($p['meta_titulo'] ?? '') ?>">
        </div>
        <div class="form-group">
          <label>Meta descrição</label>
          <textarea name="meta_descricao" class="form-control" rows="2"><?= e($p['meta_descricao'] ?? '') ?></textarea>
        </div>
      </div>

      <button type="submit" class="btn btn-gold" style="width:100%;padding:14px">Salvar produto</button>
      <a href="<?= admin_url('produtos') ?>" class="btn btn-light" style="width:100%;padding:14px;margin-top:10px;text-align:center">Cancelar</a>
    </div>

  </div>
</form>
