{% extends "base.html" %}

{% block title %}گزارش‌ها - لابراتوار احسان{% endblock %}

{% block page_title %}<i class="bi bi-bar-chart-line ms-1"></i> گزارش‌ها{% endblock %}

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

{% block content %}

<!-- کارت‌های خلاصه درآمد -->
<div class="row g-4 mb-4">
  <div class="col-md-4">
    <div class="eh-stat-card bg-grad-purple">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <div class="stat-label">درآمد امروز</div>
          <div class="stat-value">{{ income_today | toman_fa }}</div>
        </div>
        <div class="stat-icon"><i class="bi bi-calendar-day"></i></div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="eh-stat-card bg-grad-teal">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <div class="stat-label">درآمد این ماه</div>
          <div class="stat-value">{{ income_month | toman_fa }}</div>
        </div>
        <div class="stat-icon"><i class="bi bi-calendar-month"></i></div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="eh-stat-card bg-grad-blue">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <div class="stat-label">درآمد امسال</div>
          <div class="stat-value">{{ income_year | toman_fa }}</div>
        </div>
        <div class="stat-icon"><i class="bi bi-calendar-year"></i></div>
      </div>
    </div>
  </div>
</div>

<!-- نمودار درآمد ماهانه -->
<div class="row g-4 mb-4">
  <div class="col-lg-8">
    <div class="eh-card">
      <h6 class="fw-bold mb-3"><i class="bi bi-bar-chart ms-1"></i> درآمد ۶ ماه اخیر</h6>
      {% if monthly_values %}
        <canvas id="chartMonthly" height="100"></canvas>
      {% else %}
        <div class="eh-empty-state py-4">
          <i class="bi bi-bar-chart" style="font-size:2rem; color:#ccc;"></i>
          <p class="mt-2 text-muted">داده‌ای برای نمایش وجود ندارد.</p>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- نمودار دایره‌ای نوع کار -->
  <div class="col-lg-4">
    <div class="eh-card">
      <h6 class="fw-bold mb-3"><i class="bi bi-pie-chart ms-1"></i> توزیع نوع کار</h6>
      {% if work_values %}
        <canvas id="chartWork" height="180"></canvas>
      {% else %}
        <div class="eh-empty-state py-4">
          <p class="text-muted">داده‌ای وجود ندارد.</p>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<!-- جدول آمار دکترها -->
<div class="eh-card">
  <h6 class="fw-bold mb-3"><i class="bi bi-people ms-1"></i> آمار به تفکیک دکتر</h6>
  {% if doctor_labels %}
    <div class="table-responsive">
      <table class="eh-table table">
        <thead>
          <tr>
            <th>#</th>
            <th>نام دکتر</th>
            <th>تعداد کیس</th>
            <th>مجموع درآمد</th>
          </tr>
        </thead>
        <tbody>
          {% for doc in doctor_labels %}
          <tr>
            <td class="text-muted">{{ loop.index | fa_num }}</td>
            <td class="fw-semibold">{{ doc }}</td>
            <td>{{ doctor_stats[doc].count | fa_num }}</td>
            <td>{{ doctor_stats[doc].amount | toman_fa }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="eh-empty-state">
      <i class="bi bi-people" style="font-size:2rem; color:#ccc;"></i>
      <p class="mt-2 text-muted">هیچ کیسی ثبت نشده است.</p>
    </div>
  {% endif %}
</div>

{% endblock %}

{% block extra_scripts %}
<script>
/* ---- رنگ‌های مشترک نمودارها ---- */
const COLORS = ['#6610f2','#20c997','#fd7e14','#0dcaf0','#d63384','#198754','#ffc107'];

{% if monthly_values %}
/* ---- نمودار میله‌ای درآمد ماهانه ---- */
new Chart(document.getElementById('chartMonthly'), {
  type: 'bar',
  data: {
    labels: {{ monthly_labels | tojson }},
    datasets: [{
      label: 'درآمد (تومان)',
      data: {{ monthly_values | tojson }},
      backgroundColor: 'rgba(102,16,242,0.7)',
      borderColor: '#6610f2',
      borderWidth: 2,
      borderRadius: 8,
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: false },
      tooltip: {
        callbacks: {
          label: ctx => ctx.parsed.y.toLocaleString('fa-IR') + ' تومان'
        }
      }
    },
    scales: {
      y: { ticks: { callback: v => v.toLocaleString('fa-IR') }, grid: { color: '#f0f0f8' } },
      x: { grid: { display: false } }
    }
  }
});
{% endif %}

{% if work_values %}
/* ---- نمودار دایره‌ای نوع کار ---- */
new Chart(document.getElementById('chartWork'), {
  type: 'doughnut',
  data: {
    labels: {{ work_labels | tojson }},
    datasets: [{
      data: {{ work_values | tojson }},
      backgroundColor: COLORS,
      borderWidth: 2,
      borderColor: '#fff',
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { position: 'bottom', labels: { font: { family: 'Vazirmatn' } } }
    }
  }
});
{% endif %}
</script>
{% endblock %}