{% extends "store/base.html" %}
{% block title %}Форма руководителя{% endblock %}

{% block content %}
<h4 class="mb-3 fw-bold text-primary"><i class="bi bi-bar-chart-line me-2"></i>Форма руководителя</h4>

<ul class="nav nav-tabs mb-4" id="directorTabs">
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'clients_report' %}active{% endif %}"
       href="#tab-clients-report" data-bs-toggle="tab">
      <i class="bi bi-people me-1"></i>Отчёт о постоянных клиентах
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'products_report' %}active{% endif %}"
       href="#tab-products-report" data-bs-toggle="tab">
      <i class="bi bi-graph-up me-1"></i>Отчёт о продаваемости товаров
    </a>
  </li>
</ul>

<div class="tab-content">

  <!-- ── TAB 1: Clients Report ──────────────── -->
  <div class="tab-pane fade {% if active_tab == 'clients_report' %}show active{% endif %}" id="tab-clients-report">
    <div class="card">
      <div class="card-header"><i class="bi bi-people me-2"></i>Постоянные клиенты (более 3 заказов)</div>
      <div class="card-body">
        <div class="row g-3 align-items-end mb-4">
          <div class="col-md-3">
            <label class="form-label fw-semibold">Дата начала периода</label>
            <input type="date" id="cr-date-from" class="form-control">
          </div>
          <div class="col-md-3">
            <label class="form-label fw-semibold">Дата окончания периода</label>
            <input type="date" id="cr-date-to" class="form-control">
          </div>
          <div class="col-md-auto">
            <button class="btn btn-primary" onclick="loadClientsReport()">
              <i class="bi bi-search me-2"></i>Сформировать отчёт
            </button>
          </div>
          <div class="col-md-auto">
            <div class="btn-group">
              <button class="btn btn-outline-success" onclick="exportClientsReport('excel')">
                <i class="bi bi-file-earmark-excel me-1"></i>Excel
              </button>
              <button class="btn btn-outline-info" onclick="exportClientsReport('html')">
                <i class="bi bi-file-code me-1"></i>HTML
              </button>
            </div>
          </div>
        </div>
        <div id="cr-info" class="alert alert-info d-none py-2 mb-3"></div>
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>ФИО клиента</th>
                <th class="text-center">Количество заказов</th>
                <th class="text-end">Общая сумма покупок</th>
              </tr>
            </thead>
            <tbody id="cr-tbody">
              <tr><td colspan="4" class="text-center text-muted py-4">
                Введите период и нажмите «Сформировать отчёт»
              </td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- ── TAB 2: Products Report ─────────────── -->
  <div class="tab-pane fade {% if active_tab == 'products_report' %}show active{% endif %}" id="tab-products-report">
    <div class="card">
      <div class="card-header"><i class="bi bi-graph-up me-2"></i>Продаваемость товаров</div>
      <div class="card-body">
        <div class="row g-3 align-items-end mb-4">
          <div class="col-md-3">
            <label class="form-label fw-semibold">Дата начала периода</label>
            <input type="date" id="pr-date-from" class="form-control">
          </div>
          <div class="col-md-3">
            <label class="form-label fw-semibold">Дата окончания периода</label>
            <input type="date" id="pr-date-to" class="form-control">
          </div>
          <div class="col-md-auto">
            <button class="btn btn-primary" onclick="loadProductsReport()">
              <i class="bi bi-search me-2"></i>Сформировать отчёт
            </button>
          </div>
          <div class="col-md-auto">
            <div class="btn-group">
              <button class="btn btn-outline-success" onclick="exportProductsReport('excel')">
                <i class="bi bi-file-earmark-excel me-1"></i>Excel
              </button>
              <button class="btn btn-outline-info" onclick="exportProductsReport('html')">
                <i class="bi bi-file-code me-1"></i>HTML
              </button>
            </div>
          </div>
        </div>
        <div id="pr-info" class="alert alert-info d-none py-2 mb-3"></div>
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>Название товара</th>
                <th>Категория</th>
                <th class="text-center">Продано (шт.)</th>
                <th class="text-end">Сумма продаж</th>
              </tr>
            </thead>
            <tbody id="pr-tbody">
              <tr><td colspan="5" class="text-center text-muted py-4">
                Введите период и нажмите «Сформировать отчёт»
              </td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
// ─── Clients Report ────────────────────────────────────────
async function loadClientsReport() {
  const dateFrom = document.getElementById('cr-date-from').value;
  const dateTo   = document.getElementById('cr-date-to').value;
  const info = document.getElementById('cr-info');

  let url = `{% url 'report_clients' %}?format=json`;
  if (dateFrom) url += `&date_from=${dateFrom}`;
  if (dateTo)   url += `&date_to=${dateTo}`;

  const res = await fetch(url);
  const data = await res.json();
  const tbody = document.getElementById('cr-tbody');

  if (!data.rows.length) {
    info.textContent = 'За указанный период нет клиентов с более чем 3 заказами.';
    info.className = 'alert alert-warning py-2 mb-3';
    info.classList.remove('d-none');
    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">Нет данных</td></tr>';
    return;
  }

  info.textContent = `Найдено постоянных клиентов: ${data.rows.length}`;
  info.className = 'alert alert-success py-2 mb-3';
  info.classList.remove('d-none');

  tbody.innerHTML = data.rows.map((r, i) => `
    <tr>
      <td>${i + 1}</td>
      <td><i class="bi bi-person-circle me-1 text-primary"></i>${r.full_name}</td>
      <td class="text-center">
        <span class="badge bg-primary fs-6">${r.order_count}</span>
      </td>
      <td class="text-end fw-semibold">${r.total_sum.toLocaleString('ru', {minimumFractionDigits:2})} ₽</td>
    </tr>
  `).join('');
}

function exportClientsReport(fmt) {
  const dateFrom = document.getElementById('cr-date-from').value;
  const dateTo   = document.getElementById('cr-date-to').value;
  let url = `{% url 'report_clients' %}?format=${fmt}`;
  if (dateFrom) url += `&date_from=${dateFrom}`;
  if (dateTo)   url += `&date_to=${dateTo}`;
  window.location.href = url;
}

// ─── Products Report ───────────────────────────────────────
async function loadProductsReport() {
  const dateFrom = document.getElementById('pr-date-from').value;
  const dateTo   = document.getElementById('pr-date-to').value;
  const info = document.getElementById('pr-info');

  let url = `{% url 'report_products' %}?format=json`;
  if (dateFrom) url += `&date_from=${dateFrom}`;
  if (dateTo)   url += `&date_to=${dateTo}`;

  const res = await fetch(url);
  const data = await res.json();
  const tbody = document.getElementById('pr-tbody');

  if (!data.rows.length) {
    info.textContent = 'За указанный период нет данных о продажах.';
    info.className = 'alert alert-warning py-2 mb-3';
    info.classList.remove('d-none');
    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">Нет данных</td></tr>';
    return;
  }

  info.textContent = `Найдено товаров в продажах: ${data.rows.length}`;
  info.className = 'alert alert-success py-2 mb-3';
  info.classList.remove('d-none');

  tbody.innerHTML = data.rows.map((r, i) => `
    <tr>
      <td>${i + 1}</td>
      <td>${r.name}</td>
      <td><span class="badge bg-secondary">${r.category}</span></td>
      <td class="text-center"><b>${r.total_qty}</b></td>
      <td class="text-end fw-semibold">${r.total_sum.toLocaleString('ru', {minimumFractionDigits:2})} ₽</td>
    </tr>
  `).join('');
}

function exportProductsReport(fmt) {
  const dateFrom = document.getElementById('pr-date-from').value;
  const dateTo   = document.getElementById('pr-date-to').value;
  let url = `{% url 'report_products' %}?format=${fmt}`;
  if (dateFrom) url += `&date_from=${dateFrom}`;
  if (dateTo)   url += `&date_to=${dateTo}`;
  window.location.href = url;
}
</script>
{% endblock %}