{% extends 'base.html' %}
{% block content %}
{% set month_names = [t('common.month_1'), t('common.month_2'), t('common.month_3'), t('common.month_4'), t('common.month_5'), t('common.month_6'), t('common.month_7'), t('common.month_8'), t('common.month_9'), t('common.month_10'), t('common.month_11'), t('common.month_12')] %}
<div class="hero-panel mb-4">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div class="app-section-title mb-0"><span class="feature-icon"><i class="fa-solid fa-chart-simple"></i></span><div><h1 class="h3 mb-0">{{ t('stats.title') }}</h1><div class="text-body-secondary">{{ t('stats.subtitle') }}</div></div></div>
    <form method="get" class="row g-2 align-items-end">
      <div class="col-auto"><label class="form-label small">{{ t('common.year') }}</label><input class="form-control" type="number" name="year" value="{{ selected_year }}"></div>
      <div class="col-auto"><label class="form-label small">{{ t('common.month') }}</label><select class="form-select" name="month"><option value="0">{{ t('common.all') }}</option>{% for m in range(1,13) %}<option value="{{ m }}" {% if selected_month==m %}selected{% endif %}>{{ month_names[m-1] }}</option>{% endfor %}</select></div>
      <div class="col-auto"><label class="form-label small">{{ t('stats.range_from') }}</label><input class="form-control" type="number" name="start_year" value="{{ start_year }}"></div>
      <div class="col-auto"><label class="form-label small">{{ t('stats.range_to') }}</label><input class="form-control" type="number" name="end_year" value="{{ end_year }}"></div>
      <div class="col-auto"><button class="btn btn-outline-primary"><i class="fa-solid fa-filter me-2"></i>{{ t('common.apply') }}</button></div>
    </form>
  </div>
</div>
<div class="quick-stats mb-4" id="stats-overview"></div>
<div class="row g-3 mb-3">
  <div class="col-xl-8"><div class="card"><div class="card-body"><h2 class="h5">{{ t('stats.monthly_trend') }}</h2><div class="chart-card chart-canvas"><canvas id="chart-monthly"></canvas></div></div></div></div>
  <div class="col-xl-4"><div class="card h-100"><div class="card-body"><h2 class="h5 mb-3">{{ t('stats.top_expenses') }}</h2><div id="top-expenses"></div></div></div></div>
</div>
<div class="row g-3">
  <div class="col-xl-6"><div class="card"><div class="card-body"><h2 class="h5">{{ t('dashboard.categories') }}</h2><div class="chart-card chart-canvas"><canvas id="chart-categories"></canvas></div></div></div></div>
  <div class="col-xl-6"><div class="card"><div class="card-body"><h2 class="h5">{{ t('stats.payment_methods') }}</h2><div class="chart-card chart-canvas"><canvas id="chart-payments"></canvas></div></div></div></div>
  <div class="col-xl-6"><div class="card"><div class="card-body"><h2 class="h5">{{ t('stats.long_term') }}</h2><div class="chart-card chart-canvas"><canvas id="chart-range"></canvas></div></div></div></div>
  <div class="col-xl-6"><div class="card"><div class="card-body"><h2 class="h5">{{ t('stats.quarterly') }}</h2><div class="chart-card chart-canvas"><canvas id="chart-quarterly"></canvas></div></div></div></div>
  <div class="col-12"><div class="card"><div class="card-body"><h2 class="h5">{{ t('stats.weekdays') }}</h2><div class="chart-card chart-canvas"><canvas id="chart-weekdays"></canvas></div></div></div></div>
</div>
{% endblock %}
{% block scripts %}
<script>
window.expenseStatsYear={{ selected_year|tojson }};
window.expenseStatsMonth={{ selected_month|tojson }};
window.expenseStatsStartYear={{ start_year|tojson }};
window.expenseStatsEndYear={{ end_year|tojson }};
window.expenseStatsText={total:{{ t('dashboard.total')|tojson }},count:{{ t('stats.count')|tojson }},average:{{ t('stats.average')|tojson }},refunds:{{ t('stats.refunds')|tojson }},vs_prev:{{ t('stats.vs_prev')|tojson }},no_data:{{ t('common.no_data')|tojson }}};
</script>
{% endblock %}