{% extends "dashboard/base.html" %}
{% load civic_tags %}
{% block title %}CRM{% endblock %}
{% block content %}
<section class="mb-8 grid grid-cols-2 gap-3 lg:grid-cols-4">
  {% for label, value in data.counts.items %}
  <div class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wider text-muted">{{ label }}</p><p class="mt-1 font-display text-2xl font-bold text-forest tabular-nums">{{ value|bn_num }}</p></div>
  {% endfor %}
</section>

<section class="mb-10">
  <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
    <h2 class="text-lg font-bold text-forest">অ্যাপয়েন্টমেন্ট</h2>
    <div class="flex flex-wrap gap-2 text-sm">{% for e in exports %}<a class="rounded-full border border-forest/20 px-3 py-1.5 text-forest hover:border-gold" href="{% url 'dashboard-api:api-export' %}?type={{ e }}">{{ e }} CSV</a>{% endfor %}</div>
  </div>
  <div class="overflow-x-auto rounded-2xl bg-white shadow-soft">
    <table class="w-full min-w-[760px] text-left text-sm">
      <thead class="bg-forest/5 text-xs uppercase tracking-wider text-muted"><tr><th class="px-4 py-3">রেফারেন্স</th><th class="px-4 py-3">নাম</th><th class="px-4 py-3">ফোন</th><th class="px-4 py-3">তারিখ/সময়</th><th class="px-4 py-3">বিষয়</th><th class="px-4 py-3">স্ট্যাটাস</th></tr></thead>
      <tbody class="divide-y divide-forest/10">
        {% for a in data.appointments %}
        <tr data-row>
          <td class="px-4 py-3 font-mono text-xs">{{ a.reference }}</td>
          <td class="px-4 py-3">{{ a.name }}</td>
          <td class="px-4 py-3">{{ a.phone }}</td>
          <td class="px-4 py-3">{{ a.date }} · {{ a.slot }}</td>
          <td class="px-4 py-3">{{ a.topic }}</td>
          <td class="px-4 py-3">
            <select class="rounded-lg border border-forest/15 px-2 py-1" data-patch="/api/admin/appointments/{{ a.id }}/" data-key="status" aria-label="অ্যাপয়েন্টমেন্টের স্ট্যাটাস">
              {% for v, label in statuses.appointment %}<option value="{{ v }}" {% if v == a.status %}selected{% endif %}>{{ label }}</option>{% endfor %}
            </select>
          </td>
        </tr>
        {% empty %}<tr><td class="px-4 py-6 text-muted" colspan="6">কোনো অ্যাপয়েন্টমেন্ট নেই।</td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
</section>

<section class="mb-10">
  <h2 class="mb-3 text-lg font-bold text-forest">সমস্যা ও পরামর্শ</h2>
  <div class="space-y-3">
    {% for f in data.feedback %}
    <details class="rounded-2xl bg-white p-5 shadow-soft">
      <summary class="cursor-pointer font-semibold text-forest"><span class="font-mono text-xs text-muted">{{ f.trackingId }}</span> · {{ f.title }} <span class="ml-2 rounded-full bg-forest/5 px-2 py-0.5 text-xs">{{ f.kind }} · ওয়ার্ড {{ f.ward|bn }}</span></summary>
      <p class="mt-3 text-sm leading-relaxed text-muted">{{ f.details }}</p>
      <p class="mt-2 text-xs text-muted">{{ f.name }} · {{ f.createdAt|slice:":10" }}</p>
      <div class="mt-4 flex flex-wrap items-center gap-3">
        <select class="rounded-lg border border-forest/15 px-2 py-1 text-sm" data-patch="/api/admin/feedback/{{ f.id }}/" data-key="status" aria-label="স্ট্যাটাস">
          {% for v, label in statuses.feedback %}<option value="{{ v }}" {% if v == f.status %}selected{% endif %}>{{ label }}</option>{% endfor %}
        </select>
        <form class="flex flex-1 gap-2" data-note-form="/api/admin/feedback/{{ f.id }}/">
          <input name="note" maxlength="300" placeholder="নোট যোগ করুন" class="flex-1 rounded-lg border border-forest/15 px-3 py-1.5 text-sm">
          <button class="rounded-full bg-forest px-3 py-1.5 text-xs font-semibold text-cream">যোগ করুন</button>
        </form>
      </div>
      <ul class="mt-3 space-y-1 text-xs text-muted">{% for t in f.timeline %}<li>{{ t.at|slice:":16" }} · {{ t.by }}: {{ t.note }}</li>{% endfor %}</ul>
    </details>
    {% empty %}<p class="text-muted">কোনো রিপোর্ট নেই।</p>
    {% endfor %}
  </div>
</section>

<section class="mb-10 grid gap-6 lg:grid-cols-2">
  <div>
    <h2 class="mb-3 text-lg font-bold text-forest">লিড (CRM)</h2>
    <div class="overflow-x-auto rounded-2xl bg-white shadow-soft">
      <table class="w-full text-left text-sm">
        <thead class="bg-forest/5 text-xs uppercase tracking-wider text-muted"><tr><th class="px-4 py-3">নাম</th><th class="px-4 py-3">ফোন</th><th class="px-4 py-3">উৎস</th><th class="px-4 py-3">স্টেজ</th></tr></thead>
        <tbody class="divide-y divide-forest/10">
          {% for l in data.leads %}
          <tr><td class="px-4 py-3">{{ l.name }}</td><td class="px-4 py-3">{{ l.phone }}</td><td class="px-4 py-3">{{ l.source }}</td>
            <td class="px-4 py-3"><select class="rounded-lg border border-forest/15 px-2 py-1" data-patch="/api/admin/leads/{{ l.id }}/" data-key="stage">{% for v, label in statuses.lead %}<option value="{{ v }}" {% if v == l.stage %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></td></tr>
          {% empty %}<tr><td class="px-4 py-6 text-muted" colspan="4">কোনো লিড নেই।</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <h2 class="mb-3 text-lg font-bold text-forest">বার্তা</h2>
    <ul class="space-y-3">
      {% for m in data.messages %}
      <li class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold text-gold-deep">{{ m.channel }} · {{ m.name|default:"অজ্ঞাত" }} {{ m.phone }}</p><p class="mt-1 text-sm text-forest">{{ m.text }}</p>
        {% if not m.read %}<button type="button" class="mt-2 text-xs font-semibold text-forest underline" data-mark-read="/api/admin/messages/{{ m.id }}/">পড়া হয়েছে চিহ্নিত করুন</button>{% endif %}</li>
      {% empty %}<li class="text-muted">কোনো বার্তা নেই।</li>{% endfor %}
    </ul>
  </div>
</section>

<section class="mb-10 grid gap-6 lg:grid-cols-3">
  <div>
    <h2 class="mb-3 text-lg font-bold text-forest">স্বেচ্ছাসেবক</h2>
    <ul class="space-y-2 text-sm">{% for v in data.volunteers %}<li class="rounded-xl bg-white px-4 py-3 shadow-soft">{{ v.name }} · ওয়ার্ড {{ v.ward|bn }} · {{ v.role }}</li>{% empty %}<li class="text-muted">নেই</li>{% endfor %}</ul>
  </div>
  <div>
    <h2 class="mb-3 text-lg font-bold text-forest">ইভেন্ট রেজিস্ট্রেশন</h2>
    <ul class="space-y-2 text-sm">{% for r in data.registrations %}<li class="rounded-xl bg-white px-4 py-3 shadow-soft">{{ r.name }} · {{ r.eventTitle }} (+{{ r.guests|bn }})</li>{% empty %}<li class="text-muted">নেই</li>{% endfor %}</ul>
  </div>
  <div>
    <h2 class="mb-3 text-lg font-bold text-forest">নিউজলেটার</h2>
    <ul class="space-y-2 text-sm">{% for s in data.subscribers %}<li class="rounded-xl bg-white px-4 py-3 shadow-soft">{{ s.email }}</li>{% empty %}<li class="text-muted">নেই</li>{% endfor %}</ul>
  </div>
</section>

<section class="mb-10">
  <h2 class="mb-3 text-lg font-bold text-forest">কার্যক্রম লগ</h2>
  <ul class="space-y-1 rounded-2xl bg-white p-4 text-xs text-muted shadow-soft">
    {% for a in data.audit %}<li>{{ a.at|slice:":16" }} · {{ a.actor }} · {{ a.action }} · {{ a.detail }}</li>{% empty %}<li>কোনো কার্যক্রম নেই।</li>{% endfor %}
  </ul>
</section>
{% endblock %}