{% 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" onclick="event.preventDefault(); document.getElementById('editFormLink').submit();">
        <i class="bi bi-pencil-square me-1"></i>Edit
      </a>
      <form id="editFormLink" method="get" action="/rolodex/new" class="d-none">
        <input type="hidden" name="_" value="1">
      </form>
    </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.last_name or '' }}, {{ client.first_name 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="d-flex gap-2">
          <a class="btn btn-primary" href="/rolodex/new" onclick="event.preventDefault(); document.getElementById('editClientForm').submit();">
            <i class="bi bi-pencil-square me-1"></i>Edit Client
          </a>
          <form id="editClientForm" method="get" action="/rolodex/new" class="d-none">
            <input type="hidden" name="_prefill" value="{{ client.id }}">
          </form>
          <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">Related Cases</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: 110px;">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% if client.cases and client.cases|length > 0 %}
                {% for c in client.cases %}
                <tr>
                  <td>{{ c.file_no }}</td>
                  <td>{{ c.description or '' }}</td>
                  <td>{{ c.status or '' }}</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>
                  </td>
                </tr>
                {% endfor %}
              {% else %}
                <tr><td colspan="5" class="text-center text-muted py-3">No related cases.</td></tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}