{% extends 'base.html' %}
{% block content %}
<div class="row mb-3">
  <div class="col-12 d-flex justify-content-between align-items-center">
    <h4 class="m-0">{{ title }}</h4>
    <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('web.index') }}">На главную</a>
  </div>
  </div>

<div class="row g-3">
  <div class="col-lg-7">
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="chart-wrap">
          <canvas id="chart"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-5">
    <div class="card shadow-sm">
      <div class="card-header">Сводка</div>
      <div class="card-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between"><span>Всего тикетов</span><strong>{{ overview.total }}</strong></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="row mt-4 g-3">
  <div class="col-lg-6">
    <div class="card shadow-sm">
      <div class="card-header">По агентам</div>
      <div class="card-body p-0">
        <table class="table table-sm table-hover align-middle m-0">
          <thead class="table-light"><tr><th>Агент</th><th class="text-end">Количество</th></tr></thead>
          <tbody>
            {% for name, count in by_agent %}
            <tr><td>{{ name }}</td><td class="text-end">{{ count }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card shadow-sm">
      <div class="card-header">По группам</div>
      <div class="card-body p-0">
        <table class="table table-sm table-hover align-middle m-0">
          <thead class="table-light"><tr><th>Группа</th><th class="text-end">Количество</th></tr></thead>
          <tbody>
            {% for name, count in by_group %}
            <tr><td>{{ name }}</td><td class="text-end">{{ count }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  const labels = {{ chart_labels | tojson }};
  const data = {{ chart_values | tojson }};
  const ctx = document.getElementById('chart');
  
  const css = getComputedStyle(document.documentElement);
  const primary = css.getPropertyValue('--brand').trim() || '#0d6efd';
  const primaryFill = 'rgba(79, 140, 255, .25)';

  const isDate = (v) => /^\d{4}-\d{2}-\d{2}$/.test(v);
  const mode = labels.every(isDate) ? 'line' : 'bar';

  const chart = new Chart(ctx, {
    type: mode,
    data: {
      labels,
      datasets: [{
        label: 'Значения',
        data,
        borderColor: primary,
        backgroundColor: mode === 'bar' ? primaryFill : primaryFill,
        borderWidth: 2,
        tension: 0.25,
        fill: mode === 'line',
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { beginAtZero: true, ticks: { precision: 0 } }
      },
      plugins: {
        legend: { display: false }
      }
    }
  });
</script>
{% endblock %}