{% extends "admin/base.html" %}
{% block page_title %}Статистика{% endblock %}
{% block content %}
<h1>📈 Статистика</h1>

<div class="card">
  <div class="filters" style="align-items:center;">
    {% for key, label in periods.items() %}
      {% if key != 'custom' %}
      <a class="btn small {{ '' if period == key else 'secondary' }}" href="{{ url_for('admin.statistics', period=key) }}">{{ label }}</a>
      {% endif %}
    {% endfor %}
    <span class="muted">|</span>
    <form method="get" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
      <input type="hidden" name="period" value="custom">
      <input type="date" name="date_from" value="{{ date_from }}" style="margin:0;width:auto;">
      <span class="muted">—</span>
      <input type="date" name="date_to" value="{{ date_to }}" style="margin:0;width:auto;">
      <button class="btn small {{ '' if period == 'custom' else 'secondary' }}" type="submit">Застосувати</button>
    </form>
  </div>
</div>

<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-label">Кількість замовлень</div>
    <div class="stat-value">{{ stats.orders_count }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Виручка</div>
    <div class="stat-value">{{ stats.revenue }} грн</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Середній чек</div>
    <div class="stat-value">{{ stats.avg_check }} грн</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Клієнтів</div>
    <div class="stat-value">{{ stats.customers_count }}</div>
    <div class="stat-sub">Повторних: {{ stats.repeat_customers }}</div>
  </div>
</div>

{% if daily_revenue|length > 1 %}
<div class="card">
  <div class="card-head"><h3>Виручка по днях</h3></div>
  <div class="revenue-chart">
    {% for d in daily_revenue %}
    <div class="revenue-bar-wrap" title="{{ d.label }}: {{ d.revenue }} грн">
      <div class="revenue-bar" style="height:{{ d.pct }}%;"></div>
      <div class="revenue-bar-label">{{ d.label }}</div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<div class="grid-2-even">
  <div class="card">
    <div class="card-head"><h3>Розподіл замовлень</h3></div>
    <table>
      <tr><td class="muted">🛵 Доставка</td><td style="text-align:right;">{{ stats.delivery_count }}</td></tr>
      <tr><td class="muted">{{ pickup_icon(15) }} Самовивіз</td><td style="text-align:right;">{{ stats.pickup_count }}</td></tr>
      <tr><td class="muted">🍽️ У закладі</td><td style="text-align:right;">{{ stats.dine_in_count }}</td></tr>
      <tr><td class="muted">💳 Оплата карткою</td><td style="text-align:right;">{{ stats.card_revenue }} грн</td></tr>
      <tr><td class="muted">💵 Оплата готівкою</td><td style="text-align:right;">{{ stats.cash_revenue }} грн</td></tr>
    </table>
  </div>

  <div class="card">
    <div class="card-head"><h3>Найпопулярніші товари</h3></div>
    {% for name, data in top_products %}
    <div style="margin-bottom:10px;">
      <div style="display:flex;justify-content:space-between;font-size:13px;">
        <span>{{ loop.index }}. {{ name }}</span>
        <span class="muted">{{ data.qty }} шт. · {{ data.revenue }} грн</span>
      </div>
      <div class="progress-bar"><span style="width:{{ (data.qty / total_qty * 100)|round }}%;"></span></div>
    </div>
    {% else %}
    <div class="muted">Немає продажів за цей період</div>
    {% endfor %}
  </div>
</div>
{% endblock %}