{% extends "base.html" %}
{% block title %}داشبورد{% endblock %}
{% block page_title %}داشبورد{% endblock %}
{% block content %}

<div class="cards-grid">
  <div class="stat-card blue">
    <div class="icon"><i class="fa fa-users"></i></div>
    <div class="val">{{ stats.total_users }}</div>
    <div class="lbl">کل کاربران</div>
  </div>
  <div class="stat-card green">
    <div class="icon"><i class="fa fa-box"></i></div>
    <div class="val">{{ stats.delivered_orders }}</div>
    <div class="lbl">تحویل شده</div>
  </div>
  <div class="stat-card yellow">
    <div class="icon"><i class="fa fa-clock"></i></div>
    <div class="val">{{ stats.pending_orders }}</div>
    <div class="lbl">در انتظار تأیید</div>
  </div>
  <div class="stat-card purple">
    <div class="icon"><i class="fa fa-crown"></i></div>
    <div class="val">{{ stats.vip_users }}</div>
    <div class="lbl">کاربران VIP</div>
  </div>
  <div class="stat-card orange">
    <div class="icon"><i class="fa fa-calendar-day"></i></div>
    <div class="val">{{ "{:,}".format(stats.today_revenue) }}</div>
    <div class="lbl">درآمد امروز (تومان)</div>
  </div>
  <div class="stat-card green">
    <div class="icon"><i class="fa fa-wallet"></i></div>
    <div class="val">{{ "{:,}".format(stats.total_revenue) }}</div>
    <div class="lbl">درآمد کل (تومان)</div>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px">
  <div class="chart-wrap">
    <h3>📈 فروش ۷ روز اخیر</h3>
    <canvas id="salesChart" height="160"></canvas>
  </div>
  <div class="chart-wrap">
    <h3>📊 تعداد سفارش‌ها</h3>
    <canvas id="ordersChart" height="160"></canvas>
  </div>
</div>

{% if pending %}
<div class="table-wrap" style="margin-bottom:24px">
  <div class="table-header">
    <h3>🔍 سفارش‌های در انتظار تأیید ({{ pending|length }})</h3>
    <a href="{{ url_for('orders', status='waiting_confirm') }}" class="btn btn-blue">مشاهده همه</a>
  </div>
  <table>
    <thead><tr><th>#</th><th>کاربر</th><th>سرویس</th><th>مبلغ</th><th>تاریخ</th><th>عملیات</th></tr></thead>
    <tbody>
    {% for o in pending[:5] %}
    <tr>
      <td>#{{ o.id }}</td>
      <td>{{ o.full_name or '?' }} <span style="color:var(--muted)">@{{ o.username or '?' }}</span></td>
      <td>{{ o.service }} - {{ o.duration }}</td>
      <td>{{ "{:,}".format(o.amount) }} ت</td>
      <td style="color:var(--muted);font-size:12px">{{ o.created_at[:10] }}</td>
      <td>
        <form method="POST" action="{{ url_for('approve_order', order_id=o.id) }}" style="display:inline">
          <button class="btn btn-green" type="submit">✅ تأیید</button>
        </form>
        <form method="POST" action="{{ url_for('reject_order', order_id=o.id) }}" style="display:inline">
          <button class="btn btn-red" type="submit">❌ رد</button>
        </form>
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<div class="table-wrap">
  <div class="table-header">
    <h3>📋 آخرین سفارش‌ها</h3>
    <a href="{{ url_for('orders') }}" class="btn btn-blue">مشاهده همه</a>
  </div>
  <table>
    <thead><tr><th>#</th><th>کاربر</th><th>سرویس</th><th>مبلغ</th><th>وضعیت</th><th>تاریخ</th></tr></thead>
    <tbody>
    {% for o in recent_orders %}
    {% set status_map = {'pending':'badge-pending','waiting_confirm':'badge-waiting','confirmed':'badge-confirmed','rejected':'badge-rejected','delivered':'badge-delivered'} %}
    {% set status_fa = {'pending':'⏳ انتظار','waiting_confirm':'🔍 بررسی','confirmed':'✅ تأیید','rejected':'❌ رد','delivered':'📦 تحویل'} %}
    <tr>
      <td>#{{ o.id }}</td>
      <td>{{ o.full_name or '?' }}</td>
      <td>{{ o.service }} {{ o.duration }}</td>
      <td>{{ "{:,}".format(o.amount) }} ت</td>
      <td><span class="badge {{ status_map.get(o.status,'') }}">{{ status_fa.get(o.status, o.status) }}</span></td>
      <td style="color:var(--muted);font-size:12px">{{ o.created_at[:10] }}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

<script>
async function loadCharts(){
  const res = await fetch('/api/orders_chart');
  const data = await res.json();
  const labels = data.map(d=>d.day);
  const revenues = data.map(d=>d.revenue);
  const counts = data.map(d=>d.count);

  const cfg = {responsive:true, plugins:{legend:{display:false}}, scales:{x:{grid:{color:'rgba(255,255,255,.05)'},ticks:{color:'rgba(255,255,255,.4)',font:{family:'Vazirmatn'}}},y:{grid:{color:'rgba(255,255,255,.05)'},ticks:{color:'rgba(255,255,255,.4)',font:{family:'Vazirmatn'}}}}};

  new Chart(document.getElementById('salesChart'),{type:'line',data:{labels,datasets:[{data:revenues,borderColor:'#4f8ef7',backgroundColor:'rgba(79,142,247,.1)',fill:true,tension:.4,pointBackgroundColor:'#4f8ef7'}]},options:cfg});
  new Chart(document.getElementById('ordersChart'),{type:'bar',data:{labels,datasets:[{data:counts,backgroundColor:'rgba(168,85,247,.5)',borderColor:'#a855f7',borderWidth:1,borderRadius:6}]},options:cfg});
}
loadCharts();
</script>
{% endblock %}