{% extends 'admin_panel/base.html' %}
{% load humanize %}
{% block title %}Dashboard{% endblock %}{% block page_title %}Dashboard{% endblock %}
{% block content %}
<div class="row g-3 mb-4">
  <div class="col-md-3 col-sm-6"><div class="kpi-card"><div class="kpi-icon bg-primary"><i class="bi bi-house-door-fill"></i></div><div><div class="kpi-label">Total Properties</div><div class="kpi-value">{{ kpis.total_properties }}</div><small class="text-muted">{{ kpis.published_properties }} published</small></div></div></div>
  <div class="col-md-3 col-sm-6"><div class="kpi-card"><div class="kpi-icon bg-success"><i class="bi bi-people-fill"></i></div><div><div class="kpi-label">Total Leads</div><div class="kpi-value">{{ kpis.total_leads }}</div><small class="text-success">+{{ kpis.new_leads_24h }} in 24h</small></div></div></div>
  <div class="col-md-3 col-sm-6"><div class="kpi-card"><div class="kpi-icon bg-info"><i class="bi bi-graph-up"></i></div><div><div class="kpi-label">Visits (7d)</div><div class="kpi-value">{{ kpis.visits_7d|intcomma }}</div><small class="text-muted">{{ kpis.visits_24h }} today</small></div></div></div>
  <div class="col-md-3 col-sm-6"><div class="kpi-card"><div class="kpi-icon bg-warning"><i class="bi bi-envelope-fill"></i></div><div><div class="kpi-label">Subscribers</div><div class="kpi-value">{{ kpis.total_subscribers }}</div><small class="text-muted">{{ kpis.chat_conversions }}/{{ kpis.chat_sessions }} chat conv.</small></div></div></div>
</div>

<div class="row g-3 mb-4">
  <div class="col-lg-8">
    <div class="card-panel"><h5>Visits & Leads — Last 14 Days</h5>
      <canvas id="trendChart" height="100"></canvas>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card-panel"><h5>Leads by Source</h5>
      <ul class="list-unstyled mb-0">
        {% for s in leads_by_source %}<li class="d-flex justify-content-between py-2 border-bottom"><span class="text-capitalize">{{ s.source|cut:"_" }}</span><strong>{{ s.c }}</strong></li>{% empty %}<li class="text-muted small">No leads yet.</li>{% endfor %}
      </ul>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-7">
    <div class="card-panel"><div class="d-flex justify-content-between align-items-center mb-3"><h5 class="mb-0">Recent Leads</h5><a href="{% url 'analytics:leads_list' %}" class="btn btn-sm btn-outline-primary">View All</a></div>
      <div class="table-responsive">
        <table class="table table-sm align-middle">
          <thead><tr><th>Name</th><th>Contact</th><th>Source</th><th>Status</th><th>When</th></tr></thead>
          <tbody>
            {% for l in recent_leads %}
            <tr>
              <td><a href="{% url 'analytics:lead_detail' pk=l.pk %}">{{ l.name }}</a></td>
              <td><small>{{ l.email }}<br>{{ l.phone }}</small></td>
              <td><span class="badge bg-secondary">{{ l.get_source_display }}</span></td>
              <td><span class="badge bg-{% if l.status == 'new' %}primary{% elif l.status == 'won' %}success{% elif l.status == 'lost' %}danger{% else %}info{% endif %}">{{ l.get_status_display }}</span></td>
              <td><small>{{ l.created_at|naturaltime }}</small></td>
            </tr>
            {% empty %}<tr><td colspan="5" class="text-center text-muted">No leads yet.</td></tr>{% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-lg-5">
    <div class="card-panel"><div class="d-flex justify-content-between align-items-center mb-3"><h5 class="mb-0">Top Properties</h5><a href="{% url 'analytics:properties_list' %}" class="btn btn-sm btn-outline-primary">View All</a></div>
      <ul class="list-unstyled mb-0">
        {% for p in top_properties %}
        <li class="d-flex align-items-center py-2 border-bottom">
          {% if p.main_image %}<img src="{{ p.main_image.url }}" class="me-3" style="width:50px;height:50px;object-fit:cover;border-radius:6px;">{% endif %}
          <div class="flex-grow-1"><div class="fw-semibold small">{{ p.title|truncatechars:40 }}</div><small class="text-muted">{{ p.location.name }}</small></div>
          <div class="text-end"><div class="small fw-semibold">{{ p.views_count }}</div><small class="text-muted">views</small></div>
        </li>
        {% empty %}<li class="text-muted small">No properties yet.</li>{% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('trendChart');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: [{% for d in chart_days %}'{{ d.date }}'{% if not forloop.last %},{% endif %}{% endfor %}],
    datasets: [
      { label: 'Visits', data: [{% for d in chart_days %}{{ d.visits }}{% if not forloop.last %},{% endif %}{% endfor %}], borderColor: '#1a8754', backgroundColor: 'rgba(26,135,84,0.1)', fill: true, tension: 0.3 },
      { label: 'Leads', data: [{% for d in chart_days %}{{ d.leads }}{% if not forloop.last %},{% endif %}{% endfor %}], borderColor: '#0d6efd', backgroundColor: 'rgba(13,110,253,0.1)', fill: true, tension: 0.3 }
    ]
  },
  options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true } } }
});
</script>
{% endblock %}