{% extends "base.html" %}

{% block title %}Client · {{ client.last_name }}, {{ client.first_name }} · Delphi Database{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-12 d-flex align-items-center">
    <a class="btn btn-sm btn-outline-secondary me-2" href="/rolodex">
      <i class="bi bi-arrow-left"></i>
      Back
    </a>
    <h2 class="mb-0">Client</h2>
    <div class="ms-auto">
      <a class="btn btn-sm btn-outline-primary" href="/rolodex/{{ client.id }}/edit">
        <i class="bi bi-pencil-square me-1"></i>Edit
      </a>
    </div>
  </div>

  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <div class="row mb-3">
          <div class="col-md-4">
            <div class="text-muted small">Name</div>
            <div class="fw-semibold">{{ client.prefix or '' }} {{ client.first_name or '' }} {{ client.middle_name or '' }} {{ client.last_name or '' }} {{ client.suffix or '' }}</div>
          </div>
          <div class="col-md-4">
            <div class="text-muted small">Company</div>
            <div>{{ client.company or '' }}</div>
          </div>
          <div class="col-md-4">
            <div class="text-muted small">Legacy Rolodex Id</div>
            <div>{{ client.rolodex_id or '' }}</div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-md-6">
            <div class="text-muted small">Address</div>
            <div>{{ client.address or '' }}</div>
          </div>
          <div class="col-md-3">
            <div class="text-muted small">City</div>
            <div>{{ client.city or '' }}</div>
          </div>
          <div class="col-md-1">
            <div class="text-muted small">State</div>
            <div>{{ client.state or '' }}</div>
          </div>
          <div class="col-md-2">
            <div class="text-muted small">ZIP</div>
            <div>{{ client.zip_code or '' }}</div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-md-3">
            <div class="text-muted small">Group</div>
            <div>{{ client.group or '' }}</div>
          </div>
          <div class="col-md-3">
            <div class="text-muted small">Email</div>
            <div>
              {% if client.email %}
                <a href="mailto:{{ client.email }}">{{ client.email }}</a>
              {% else %}
                <span class="text-muted">No email</span>
              {% endif %}
            </div>
          </div>
          <div class="col-md-3">
            <div class="text-muted small">DOB</div>
            <div>{{ client.dob.strftime('%Y-%m-%d') if client.dob else '' }}</div>
          </div>
          <div class="col-md-3">
            <div class="text-muted small">SS#</div>
            <div>{{ client.ssn or '' }}</div>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-md-3">
            <div class="text-muted small">Legal Status</div>
            <div>{{ client.legal_status or '' }}</div>
          </div>
          <div class="col-md-9">
            <div class="text-muted small">Memo / Notes</div>
            <div>
              {% if client.memo %}
                {{ client.memo }}
              {% else %}
                <span class="text-muted">No notes available</span>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="d-flex gap-2">
          <a class="btn btn-primary" href="/rolodex/{{ client.id }}/edit">
            <i class="bi bi-pencil-square me-1"></i>Edit Client
          </a>
          <form method="post" action="/rolodex/{{ client.id }}/delete" onsubmit="return confirm('Delete this client? This cannot be undone.');">
            <button type="submit" class="btn btn-outline-danger">
              <i class="bi bi-trash me-1"></i>Delete
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Phones</h5>
      </div>
      <div class="card-body">
        <form class="row g-2 mb-3" method="post" action="/rolodex/{{ client.id }}/phone/add">
          <div class="col-md-6">
            <input type="text" class="form-control" name="phone_number" placeholder="Phone number" required>
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" name="phone_type" placeholder="Type (home, work)">
          </div>
          <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100"><i class="bi bi-plus"></i></button>
          </div>
        </form>

        <div class="table-responsive">
          <table class="table table-sm align-middle">
            <thead class="table-light">
              <tr>
                <th>Number</th>
                <th>Type</th>
                <th class="text-end" style="width: 100px;">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% if client.phones and client.phones|length > 0 %}
                {% for p in client.phones %}
                <tr>
                  <td>{{ p.phone_number }}</td>
                  <td>{{ p.phone_type or '' }}</td>
                  <td class="text-end">
                    <form method="post" action="/rolodex/{{ client.id }}/phone/{{ p.id }}/delete" onsubmit="return confirm('Delete this phone?');">
                      <button type="submit" class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </td>
                </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="3" class="text-center text-muted py-3">No phones.</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>Related Cases</span>
        <div class="btn-group btn-group-sm" role="group" aria-label="Case filters">
          {% set status_filter = request.query_params.get('status') or 'all' %}
          <a class="btn btn-outline-secondary {% if status_filter == 'all' %}active{% endif %}" href="?status=all">All</a>
          <a class="btn btn-outline-secondary {% if status_filter == 'open' %}active{% endif %}" href="?status=open">Open</a>
          <a class="btn btn-outline-secondary {% if status_filter == 'closed' %}active{% endif %}" href="?status=closed">Closed</a>
        </div>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
              <tr>
                <th style="width: 140px;">File #</th>
                <th>Description</th>
                <th style="width: 90px;">Status</th>
                <th style="width: 110px;">Opened</th>
                <th class="text-end" style="width: 150px;">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% set sorted_cases = client.cases | sort(attribute='open_date', reverse=True) %}
              {% if sorted_cases and sorted_cases|length > 0 %}
                {% for c in sorted_cases %}
                {% if status_filter == 'all' or (status_filter == 'open' and (c.status != 'closed')) or (status_filter == 'closed' and c.status == 'closed') %}
                <tr>
                  <td>{{ c.file_no }}</td>
                  <td>{{ c.description or '' }}</td>
                  <td>
                    {% if c.status == 'closed' %}
                      <span class="badge bg-secondary">Closed</span>
                    {% else %}
                      <span class="badge bg-success">Open</span>
                    {% endif %}
                  </td>
                  <td>{{ c.open_date.strftime('%Y-%m-%d') if c.open_date else '—' }}</td>
                  <td class="text-end">
                    <a class="btn btn-sm btn-outline-primary" href="/case/{{ c.id }}">
                      <i class="bi bi-folder2-open"></i>
                    </a>
                    <a class="btn btn-sm btn-outline-secondary" href="/qdro/{{ c.file_no }}">
                      QDRO
                    </a>
                  </td>
                </tr>
                {% endif %}
                {% endfor %}
              {% else %}
                <tr><td colspan="5" class="text-center text-muted py-3">No related cases linked.</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}