{% extends "tenant/layouts/base.html" %}
{% block title %}Reviews{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="fw-bold mb-0"><i class="bi bi-star me-2"></i>Customer Reviews</h4>
  <div class="text-end">
    <div class="fs-3 fw-bold text-warning">{{ avg_rating }} ★</div>
    <div class="text-muted small">Average rating</div>
  </div>
</div>

<!-- Rating distribution -->
<div class="card shadow-sm mb-4" style="max-width:400px;">
  <div class="card-body py-2">
    {% for star in [5,4,3,2,1] %}
    {% set count = rating_dist.get(star, 0) %}
    {% set total = reviews|length %}
    <div class="d-flex align-items-center gap-2 mb-1">
      <span class="text-muted small" style="width:20px;">{{ star }}★</span>
      <div class="progress flex-grow-1" style="height:8px;">
        <div class="progress-bar bg-warning"
             style="width:{{ ((count / total * 100) | int) if total else 0 }}%"></div>
      </div>
      <span class="text-muted small" style="width:30px;">{{ count }}</span>
    </div>
    {% endfor %}
  </div>
</div>

{% if reviews %}
<div class="card shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="table-light"><tr><th>Date</th><th>Rating</th><th>Customer</th><th>Staff</th><th>Comment</th></tr></thead>
      <tbody>
        {% for r in reviews %}
        <tr>
          <td class="small text-muted">{{ r.created_at.strftime('%Y-%m-%d') }}</td>
          <td>
            <span class="text-warning fw-bold">{{ r.rating }}★</span>
          </td>
          <td class="small">{{ r.customer.name if r.customer else '—' }}</td>
          <td class="small">{{ r.staff.name if r.staff else '—' }}</td>
          <td class="small">{{ r.comment or '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="alert alert-light">No reviews yet.</div>
{% endif %}
{% endblock %}