<?php /** /app/views/admin/categorias/index.php */ ?>

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

  <div class="card">
    <h3 style="margin-top:0">Categorias</h3>

    <?php if (empty($items)): ?>
      <p style="color:var(--admin-muted)">Nenhuma categoria cadastrada ainda.</p>
    <?php else: ?>
    <table class="table" style="box-shadow:none">
      <thead>
        <tr><th>Nome</th><th>Slug</th><th>Ordem</th><th>Status</th><th></th></tr>
      </thead>
      <tbody>
        <?php foreach ($items as $c): ?>
        <tr>
          <td><strong><?= e($c['nome']) ?></strong></td>
          <td><code><?= e($c['slug']) ?></code></td>
          <td><?= (int)$c['ordem'] ?></td>
          <td>
            <?php if ($c['ativo']): ?><span class="badge badge-success">Ativo</span>
            <?php else: ?><span class="badge badge-secondary">Inativo</span><?php endif; ?>
          </td>
          <td style="white-space:nowrap">
            <button type="button" class="btn btn-sm btn-outline" onclick='editar(<?= json_encode($c) ?>)'>Editar</button>
            <a href="<?= admin_url('categorias/excluir/' . $c['id']) ?>" class="btn btn-sm btn-danger" onclick="return confirm('Excluir categoria?')">×</a>
          </td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
    <?php endif; ?>
  </div>

  <div class="card">
    <h3 style="margin-top:0" id="form-title">Nova categoria</h3>

    <form id="catForm" action="<?= admin_url('categorias/salvar') ?>" method="post">
      <?= csrf_field() ?>
      <input type="hidden" name="id" id="cat-id" value="0">

      <div class="form-group">
        <label>Nome *</label>
        <input type="text" name="nome" id="cat-nome" class="form-control" required>
      </div>

      <div class="form-group">
        <label>Slug</label>
        <input type="text" name="slug" id="cat-slug" class="form-control" placeholder="gera automaticamente">
      </div>

      <div class="form-group">
        <label>Descrição</label>
        <textarea name="descricao" id="cat-descricao" class="form-control" rows="2"></textarea>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label>Ordem</label>
          <input type="number" name="ordem" id="cat-ordem" class="form-control" value="0">
        </div>
        <div class="form-group" style="display:flex;align-items:flex-end">
          <label class="form-check">
            <input type="checkbox" name="ativo" id="cat-ativo" value="1" checked>
            Ativa
          </label>
        </div>
      </div>

      <button type="submit" class="btn btn-gold" style="width:100%">Salvar</button>
      <button type="button" class="btn btn-light" style="width:100%;margin-top:8px" onclick="resetForm()">Limpar</button>
    </form>
  </div>
</div>

<script>
function editar(c) {
  document.getElementById('form-title').textContent = 'Editando: ' + c.nome;
  document.getElementById('cat-id').value = c.id;
  document.getElementById('cat-nome').value = c.nome;
  document.getElementById('cat-slug').value = c.slug;
  document.getElementById('cat-descricao').value = c.descricao || '';
  document.getElementById('cat-ordem').value = c.ordem;
  document.getElementById('cat-ativo').checked = c.ativo == 1;
  window.scrollTo({top:0,behavior:'smooth'});
}
function resetForm() {
  document.getElementById('form-title').textContent = 'Nova categoria';
  document.getElementById('catForm').reset();
  document.getElementById('cat-id').value = 0;
}
</script>
