{{ define "content" }}
<div class="page-head">
  <h1>{{ T "reports.title" }}</h1>
  <form method="get" action="/reports" style="display:flex; gap:.4rem; align-items:center">
    <select name="days" onchange="this.form.submit()">
      <option value="1"  {{ if eq .Days 1 }}selected{{ end }}>{{ T "reports.today" }}</option>
      <option value="7"  {{ if eq .Days 7 }}selected{{ end }}>7 {{ T "reports.days" }}</option>
      <option value="14" {{ if eq .Days 14 }}selected{{ end }}>14 {{ T "reports.days" }}</option>
      <option value="30" {{ if eq .Days 30 }}selected{{ end }}>30 {{ T "reports.days" }}</option>
      <option value="90" {{ if eq .Days 90 }}selected{{ end }}>90 {{ T "reports.days" }}</option>
    </select>
  </form>
</div>

<div class="report-cards">
  <div class="card kpi"><div class="kpi-label">{{ T "reports.revenue" }}</div><div class="kpi-value">{{ money .GrandTotal }}</div></div>
  <div class="card kpi"><div class="kpi-label">{{ T "reports.sales" }}</div><div class="kpi-value">{{ .GrandCount }}</div></div>
  <div class="card kpi"><div class="kpi-label">{{ T "reports.tax" }}</div><div class="kpi-value">{{ money .GrandTax }}</div></div>
</div>

{{ if .IsManager }}
<div class="card" style="margin-top:1rem">
  <h2>{{ T "reports.eod.title" }}</h2>
  <div style="display:flex; gap:.5rem; align-items:center; flex-wrap:wrap">
    <button class="btn primary" hx-post="/api/reports/eod/run" hx-target="#eod-msg" hx-swap="innerHTML">{{ T "reports.eod.run" }}</button>
    <span id="eod-msg" aria-live="polite"></span>
    <form hx-post="/api/settings/eod" hx-swap="none" style="display:flex; gap:.4rem; align-items:center; margin-inline-start:auto">
      <label style="display:flex; gap:.3rem; align-items:center">
        <input type="checkbox" name="enabled" {{ if .EODEnabled }}checked{{ end }}> {{ T "reports.eod.auto" }}
      </label>
      <input type="time" name="time" value="{{ .EODTime }}">
      <button class="btn secondary" type="submit">{{ T "settings.printer.apply" }}</button>
    </form>
  </div>
  {{ if .EODRows }}
  <table class="table" style="margin-top:.6rem">
    <thead><tr><th>{{ T "reports.day" }}</th><th>{{ T "reports.sales" }}</th><th>{{ T "reports.eod.net" }}</th><th></th></tr></thead>
    <tbody>
      {{ range .EODRows }}
      <tr>
        <td>{{ .Period }}</td>
        <td>{{ .Sales }}</td>
        <td>{{ money .Net }}</td>
        <td><button class="btn secondary" hx-post="/api/reports/eod/print/{{ .Period }}" hx-target="#eod-msg" hx-swap="innerHTML">🖨</button></td>
      </tr>
      {{ end }}
    </tbody>
  </table>
  {{ end }}
</div>
{{ end }}

{{ if .CanAsk }}
<div class="card" style="margin-top:1rem">
  <h2>{{ T "reports.ask.title" }}</h2>
  <p class="muted">{{ T "reports.ask.hint" }}</p>
  <form hx-post="/api/reports/ask" hx-target="#ask-answer" hx-swap="innerHTML"
        hx-indicator="#ask-busy" style="display:flex; gap:.4rem">
    <input type="text" name="question" maxlength="500" required style="flex:1"
           placeholder="{{ T "reports.ask.placeholder" }}" autocomplete="off">
    <button class="btn primary" type="submit">{{ T "reports.ask.button" }}</button>
  </form>
  <div id="ask-busy" class="muted htmx-indicator" style="margin-top:.4rem">⏳ {{ T "reports.ask.thinking" }}</div>
  <div id="ask-answer" aria-live="polite"></div>
</div>
{{ end }}

<div class="catalog-layout" style="margin-top:1rem">
  <div class="card">
    <h2>{{ T "reports.by_day" }}</h2>
    <table class="table">
      <thead><tr><th>{{ T "reports.day" }}</th><th>{{ T "reports.sales" }}</th><th>{{ T "reports.tax" }}</th><th>{{ T "reports.revenue" }}</th></tr></thead>
      <tbody>
        {{ range .Daily }}
        <tr><td>{{ .Day }}</td><td>{{ .Count }}</td><td>{{ money .TaxTotal }}</td><td><strong>{{ money .Total }}</strong></td></tr>
        {{ else }}
        <tr><td colspan="4" class="empty">{{ T "reports.none" }}</td></tr>
        {{ end }}
      </tbody>
    </table>
  </div>

  <div>
    <div class="card">
      <h2>{{ T "reports.top_items" }}</h2>
      <table class="table">
        <tbody>
          {{ range .Top }}
          <tr><td>{{ .Name }}</td><td class="muted">×{{ .Qty }}</td><td style="text-align:end">{{ money .Revenue }}</td></tr>
          {{ else }}
          <tr><td class="empty">{{ T "reports.none" }}</td></tr>
          {{ end }}
        </tbody>
      </table>
    </div>
    <div class="card" style="margin-top:1rem">
      <h2>{{ T "reports.by_department" }}</h2>
      <table class="table">
        <tbody>
          {{ range .Departments }}
          <tr><td><strong>{{ if .Department }}{{ .Department }}{{ else }}{{ T "reports.uncategorized" }}{{ end }}</strong></td><td class="muted">×{{ .Qty }}</td><td style="text-align:end">{{ money .Revenue }}</td></tr>
          {{ else }}
          <tr><td class="empty">{{ T "reports.none" }}</td></tr>
          {{ end }}
        </tbody>
      </table>
    </div>
    {{ if .Tills }}
    <div class="card" style="margin-top:1rem">
      <h2>{{ T "reports.by_till" }}</h2>
      <table class="table">
        <tbody>
          {{ range .Tills }}
          <tr><td><strong>{{ if .Name }}{{ .Name }}{{ else }}{{ T "reports.this_till" }}{{ end }}</strong></td><td class="muted">×{{ .Count }}</td><td style="text-align:end">{{ money .Revenue }}</td></tr>
          {{ end }}
        </tbody>
      </table>
    </div>
    {{ end }}
    <div class="card" style="margin-top:1rem">
      <h2>{{ T "reports.by_method" }}</h2>
      <table class="table">
        <tbody>
          {{ range .Methods }}
          <tr><td><strong>{{ .Method }}</strong></td><td class="muted">×{{ .Count }}</td><td style="text-align:end">{{ money .Amount }}</td></tr>
          {{ else }}
          <tr><td class="empty">{{ T "reports.none" }}</td></tr>
          {{ end }}
        </tbody>
      </table>
    </div>
  </div>
</div>
{{ end }}