{% extends "tenant/layouts/base.html" %}
{% block title %}{{ customer.name }}{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="fw-bold mb-0">{{ customer.name }}</h4>
  <div class="d-flex gap-2">
    <a href="{{ url_for('customers.edit', customer_id=customer.id) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
    <a href="{{ url_for('appointments.create') }}?customer_id={{ customer.id }}" class="btn btn-primary btn-sm">New Appointment</a>
  </div>
</div>
<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card shadow-sm">
      <div class="card-body">
        <p class="mb-1"><i class="bi bi-telephone me-2 text-muted"></i>{{ customer.phone or '—' }}</p>
        <p class="mb-1"><i class="bi bi-envelope me-2 text-muted"></i>{{ customer.email or '—' }}</p>
        {% if customer.date_of_birth %}
        <p class="mb-1"><i class="bi bi-cake me-2 text-muted"></i>{{ customer.date_of_birth.strftime('%B %d') }}</p>
        {% endif %}
        <p class="mb-1"><i class="bi bi-star me-2 text-warning"></i>{{ customer.loyalty_points }} loyalty points</p>
        {% if customer.no_show_count > 0 %}
        <p class="mb-0"><i class="bi bi-x-circle me-2 text-danger"></i>{{ customer.no_show_count }} no-show(s)</p>
        {% endif %}
        {% if customer.notes %}
        <hr><p class="text-muted small mb-0">{{ customer.notes }}</p>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="card shadow-sm mb-3">
      <div class="card-header fw-semibold">Recent Appointments</div>
      {% if appointments %}
      <div class="table-responsive">
        <table class="table table-sm mb-0">
          <thead><tr><th>Date</th><th>Service</th><th>Staff</th><th>Status</th></tr></thead>
          <tbody>
            {% for a in appointments %}
            <tr>
              <td class="small">{{ a.start_time.strftime('%Y-%m-%d %I:%M %p') }}</td>
              <td class="small">{{ a.service.name if a.service else '—' }}</td>
              <td class="small">{{ a.staff.name if a.staff else '—' }}</td>
              <td><span class="badge bg-{{ {'completed':'success','cancelled':'danger','no_show':'warning'}.get(a.status,'secondary') }} small">{{ a.status }}</span></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="card-body text-muted small">No appointments yet.</div>
      {% endif %}
    </div>
  </div>
</div>
<a href="{{ url_for('customers.index') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-arrow-left me-1"></i>Back
</a>
{% endblock %}