{% extends "base.html" %}

{% block title %}Dashboard - {{ user_role|title }}{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<h1>Dashboard</h1>
<p>Welcome back, <strong>{{ request.user.username }}</strong> ({{ user_role|title }})</p>

<div class="row mb-5 g-3">
  <div class="col-md-3">
    <div class="p-4 bg-white rounded shadow text-center">
      <h5>Total Members</h5>
      <h3 class="text-primary">{{ total_members }}</h3>
    </div>
  </div>
  <div class="col-md-3">
    <div class="p-4 bg-white rounded shadow text-center">
      <h5>Departments</h5>
      <h3 class="text-success">{{ total_departments }}</h3>
    </div>
  </div>
  <div class="col-md-3">
    <div class="p-4 bg-white rounded shadow text-center">
      <h5>Events</h5>
      <h3 class="text-info">{{ total_events }}</h3>
    </div>
  </div>
  <div class="col-md-3">
    <div class="p-4 bg-white rounded shadow text-center">
      <h5>Today's Contributions</h5>
      <h3 class="text-warning">KSh {{ total_amount_today|floatformat:"0" }}</h3>
    </div>
  </div>
</div>

<div class="card mb-5">
  <div class="card-header">
    <strong>Monthly Contributions (Last 12 Months)</strong>
  </div>
  <div class="card-body">
    <canvas id="monthlyChart" height="150"></canvas>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-8">
    <!-- Additional widgets can go here -->
  </div>
  <div class="col-md-4">
    <div class="card shadow">
      <div class="card-header">
        <strong>Recent Activity</strong>
      </div>
      <div class="card-body">
        <p>New Members (30 days): <span class="badge bg-success">{{ recent_members }}</span></p>
        <p>New Contributions (30 days): <span class="badge bg-info">{{ recent_contributions }}</span></p>
        <hr>
        <a href="{% url 'member_list' %}" class="btn btn-primary btn-sm me-2">View Members</a>
        <a href="{% url 'contribution_list' %}" class="btn btn-info btn-sm">View Finance</a>
      </div>
    </div>
  </div>
</div>

<div class="mt-4 d-flex gap-3 flex-wrap">
  <a href="{% url 'member_create' %}" class="btn btn-outline-primary btn-lg flex-grow-1">+ Add Member</a>
  <a href="{% url 'contribution_create' %}" class="btn btn-outline-success btn-lg flex-grow-1">+ Record Contribution</a>
  <a href="{% url 'event_create' %}" class="btn btn-outline-info btn-lg flex-grow-1">+ Add Event</a>
  <a href="{% url 'department_create' %}" class="btn btn-outline-warning btn-lg flex-grow-1">+ Add Department</a>
</div>
{% endblock %}

{% block extra_js %}
<script>
const ctx = document.getElementById('monthlyChart').getContext('2d');
const monthlyChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ chart_labels|safe }},
        datasets: [{
            label: 'Contributions (KSh)',
            data: {{ chart_data|safe }},
            borderColor: '#137feb',
            backgroundColor: 'rgba(19, 127, 251, 0.2)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true }
        }
    }
});
</script>
{% endblock %}