{{ define "client_consumption.pages.tmpl" }}
{{ template "head" . }}
<div class="columns">
  {{ template "sidebar" . }}
  <div class="column is-10">
    <section class="section">
      <h1 class="title is-4">📊 Statistiques de consommation</h1>

      {{ if eq .User.Role "ADMIN" }}
      <div class="field mb-4">
        <label class="label">👤 Sélectionner un client :</label>
        <div class="control">
          <div class="select is-small">
            <select id="clientSelect" name="client" onchange="location.href='/admin/consumption?client=' + this.value">
              <option value="">Tous les clients</option>
              {{ range .Clients }}
              <option value="{{ .ID }}" {{ if eq $.SelectedClientID .ID }}selected{{ end }}>{{ .Email }}</option>
              {{ end }}
            </select>
          </div>
        </div>
      </div>
      {{ end }}

      <div class="buttons are-small mb-4">
        <a class="button is-info is-light" href="?period=today">📅 Aujourd'hui</a>
        <a class="button is-info is-light" href="?period=week">📆 Cette semaine</a>
        <a class="button is-info is-light" href="?period=month">🗓️ Ce mois</a>
        <a class="button is-info is-light" href="?period=year">📈 Cette année</a>
        <a class="button is-info is-light" href="/admin/consumption">🔁 Tout</a>
      </div>

      {{ if not .Summaries }}
        <p>Aucune consommation trouvée pour cette période.</p>
      {{ else }}
        <div class="box">
          <table class="table is-striped is-fullwidth">
            <thead>
              <tr>
                <th>Date</th>
                <th>Total crédits utilisés</th>
                <th>Détails</th>
              </tr>
            </thead>
            <tbody>
              {{ range .Summaries }}
              <tr>
                <td>{{ .Date.Format "02/01/2006" }}</td>
                <td>{{ .TotalCredits }}</td>
                <td>
                  <button class="button is-small is-link" onclick="toggleDetail('{{ .Date.Format "2006-01-02" }}')">🔽 Voir détails</button>
                </td>
              </tr>
              <tr id="detail-{{ .Date.Format "2006-01-02" }}" style="display: none;">
                <td colspan="3">
                  <table class="table is-narrow is-fullwidth">
                    <thead>
                      <tr>
                        <th>Heure</th>
                        <th>Type</th>
                        <th>Description</th>
                        <th>Crédits</th>
                      </tr>
                    </thead>
                    <tbody>
                      {{ range (index $.DetailsByDate (.Date.Format "2006-01-02")) }}
                      <tr>
                        <td>{{ .CreatedAt.Format "15:04:05" }}</td>
                        <td>{{ .MessageType }}</td>
                        <td>{{ .Description }}</td>
                        <td>{{ .CreditsUsed }}</td>
                      </tr>
                      {{ end }}
                    </tbody>
                  </table>
                </td>
              </tr>
              {{ end }}
            </tbody>
          </table>
        </div>
      {{ end }}
    </section>
  </div>
</div>

<script>
function toggleDetail(id) {
  const row = document.getElementById("detail-" + id);
  if (row.style.display === "none") {
    row.style.display = "";
  } else {
    row.style.display = "none";
  }
}
</script>
{{ end }}