{% extends 'base.html' %}
{% block title %}Merek{% endblock %}
{% block content %}
<div class="flex items-end justify-between gap-3 mb-4"><div><h1 class="page-title">Merek</h1><p class="page-sub">Merek sepatu yang dijual (AEKO, Adidas, Nike, ...). Tipe/model dibuat di menu Produk di bawah merek ini.</p></div>
<button onclick="fillForm('fMerek',{pk:'',nama:'',deskripsi:'',urutan:0,aktif:true});openModal('mForm')" class="btn btn-accent"><i class="fas fa-plus"></i> Tambah Merek</button></div>
<div class="card overflow-hidden"><table class="tbl">
<thead><tr><th>Logo</th><th>Merek</th><th>Keterangan</th><th class="num">Tipe</th><th class="num">Stok</th><th class="num">Urutan</th><th>Status</th><th></th></tr></thead>
<tbody>{% for m in daftar %}
<tr><td>{% if m.logo %}<img src="{{ m.logo.url }}" class="h-8 w-14 object-contain">{% else %}<div class="h-8 w-14 rounded bg-neutral-100 flex items-center justify-center text-[10px] font-bold text-neutral-400">{{ m.nama|slice:":4"|upper }}</div>{% endif %}</td>
<td class="font-bold">{{ m.nama }}<br><span class="text-[11px] text-neutral-400 font-normal">/katalog/?merek={{ m.slug }}</span></td><td class="text-xs text-neutral-500">{{ m.deskripsi|default:"-" }}</td>
<td class="num"><a href="{% url 'produk_list' %}?merek={{ m.id }}" class="hover:text-red-600 font-semibold">{{ m.jml_produk }}</a></td><td class="num">{{ m.jml_stok|default:0 }} psg</td><td class="num">{{ m.urutan }}</td>
<td><span class="badge {% if m.aktif %}badge-green{% else %}badge-gray{% endif %}">{% if m.aktif %}Aktif{% else %}Nonaktif{% endif %}</span></td>
<td class="text-right whitespace-nowrap">
<a href="{% url 'produk_tambah' %}?merek={{ m.id }}" class="btn btn-secondary btn-xs"><i class="fas fa-plus"></i> Tipe</a>
<button onclick="fillForm('fMerek',{pk:'{{ m.pk }}',nama:'{{ m.nama|escapejs }}',deskripsi:'{{ m.deskripsi|escapejs }}',urutan:{{ m.urutan }},aktif:{{ m.aktif|yesno:'true,false' }}});openModal('mForm')" class="btn btn-secondary btn-xs"><i class="fas fa-pen"></i></button>
<form method="post" action="{% url 'merek_hapus' m.pk %}" class="inline" onsubmit="return confirm('Hapus merek {{ m.nama }}?')">{% csrf_token %}<button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form></td></tr>
{% empty %}<tr><td colspan="8" class="text-center text-neutral-400 py-8">Belum ada merek. Tambahkan merek dulu sebelum membuat produk.</td></tr>{% endfor %}</tbody></table></div>

<div class="modal-bg" id="mForm"><div class="modal">
<div class="flex items-center justify-between mb-4"><h3 class="font-bold">Merek</h3><button onclick="closeModal('mForm')" class="text-neutral-400"><i class="fas fa-times"></i></button></div>
<form method="post" id="fMerek" enctype="multipart/form-data" class="space-y-3">{% csrf_token %}<input type="hidden" name="pk">
<div><label class="form-label">Nama merek *</label><input name="nama" class="form-input" placeholder="mis. AEKO" required></div>
<div><label class="form-label">Keterangan singkat</label><input name="deskripsi" class="form-input" placeholder="mis. Brand lokal, produksi Bandung"></div>
<div class="grid grid-cols-2 gap-3"><div><label class="form-label">Urutan tampil</label><input name="urutan" class="form-input" inputmode="numeric" value="0"></div><div><label class="form-label">Logo (opsional)</label><input type="file" name="logo" accept="image/*" class="form-input text-xs"></div></div>
<label class="flex items-center gap-2 text-sm"><input type="checkbox" name="aktif" checked class="w-4 h-4 accent-red-600"> Aktif (tampil di katalog)</label>
<button class="btn btn-accent w-full justify-center">Simpan</button></form></div></div>
{% endblock %}