{% extends "base.html" %}

{% block title %}Rolodex · Delphi Database{% endblock %}

{% block content %}
<div class="row g-3 align-items-center mb-3">
    <div class="col-auto">
        <h2 class="mb-0">Rolodex</h2>
    </div>
    <div class="col ms-auto">
        <form class="row g-2" method="get" action="/rolodex">
            <div class="col-md">
                <input class="form-control" type="search" name="q" placeholder="Search name or company" aria-label="Search" value="{{ q or '' }}">
            </div>
            <div class="col-md">
                <input class="form-control" type="search" name="phone" placeholder="Phone contains" aria-label="Phone" value="{{ phone or '' }}">
            </div>
            <div class="col-auto">
                <input type="hidden" name="page_size" value="{{ page_size }}">
                <button class="btn btn-outline-primary" type="submit">
                    <i class="bi bi-search me-1"></i>Search
                </button>
            </div>
            <div class="col-auto">
                <a class="btn btn-outline-secondary" href="/rolodex">
                    <i class="bi bi-x-circle me-1"></i>Clear
                </a>
            </div>
            <div class="col-auto">
                <a class="btn btn-primary" href="/rolodex/new">
                    <i class="bi bi-plus-lg me-1"></i>New Client
                </a>
            </div>
        </form>
    </div>
    <div class="col-12 text-muted small">
        {% if total and total > 0 %}
            Showing {{ start_index }}–{{ end_index }} of {{ total }}
        {% else %}
            No results
        {% endif %}
    </div>
    <div class="col-12">
        <div class="table-responsive">
            <form method="post" action="/reports/phone-book" id="bulkForm">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        {% if enable_bulk %}
                        <th style="width: 40px;"><input class="form-check-input" type="checkbox" id="selectAll"></th>
                        {% endif %}
                        <th style="width: 220px;">Name</th>
                        <th>Company</th>
                        <th>Address</th>
                        <th>City</th>
                        <th style="width: 80px;">State</th>
                        <th style="width: 110px;">ZIP</th>
                        <th style="width: 200px;">Phones</th>
                        <th class="text-end" style="width: 140px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if clients and clients|length > 0 %}
                        {% for c in clients %}
                        <tr>
                            {% if enable_bulk %}
                            <td>
                                <input class="form-check-input" type="checkbox" name="client_ids" value="{{ c.id }}">
                            </td>
                            {% endif %}
                            <td>
                                <span class="fw-semibold">{{ c.last_name or '' }}, {{ c.first_name or '' }}</span>
                            </td>
                            <td>{{ c.company or '' }}</td>
                            <td>{{ c.address or '' }}</td>
                            <td>{{ c.city or '' }}</td>
                            <td>{{ c.state or '' }}</td>
                            <td>{{ c.zip_code or '' }}</td>
                            <td>
                                {% if c.phones and c.phones|length > 0 %}
                                    {% for p in c.phones[:3] %}
                                        <span class="badge bg-light text-dark me-1">{{ p.phone_number }}</span>
                                    {% endfor %}
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <a class="btn btn-sm btn-outline-primary" href="/rolodex/{{ c.id }}">
                                    <i class="bi bi-person-lines-fill me-1"></i>View
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No clients found.</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
            {% if enable_bulk %}
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-outline-secondary">
                    <i class="bi bi-journal-text me-1"></i>Phone Book (Selected)
                </button>
                <a class="btn btn-outline-secondary" href="/reports/phone-book?format=csv{% if q %}&q={{ q | urlencode }}{% endif %}">
                    <i class="bi bi-filetype-csv me-1"></i>Phone Book CSV (Current Filter)
                </a>
            </div>
            {% endif %}
            </form>
        </div>
    </div>
    <div class="col-12">
        {% if total_pages and total_pages > 1 %}
        <nav aria-label="Rolodex pagination">
            <ul class="pagination mb-0">
                <li class="page-item {% if page <= 1 %}disabled{% endif %}">
                    <a class="page-link" href="/rolodex?page={{ page - 1 if page > 1 else 1 }}&page_size={{ page_size }}{% if q %}&q={{ q | urlencode }}{% endif %}{% if phone %}&phone={{ phone | urlencode }}{% endif %}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% for p in page_numbers %}
                    <li class="page-item {% if p == page %}active{% endif %}">
                        <a class="page-link" href="/rolodex?page={{ p }}&page_size={{ page_size }}{% if q %}&q={{ q | urlencode }}{% endif %}{% if phone %}&phone={{ phone | urlencode }}{% endif %}">{{ p }}</a>
                    </li>
                {% endfor %}
                <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
                    <a class="page-link" href="/rolodex?page={{ page + 1 if page < total_pages else total_pages }}&page_size={{ page_size }}{% if q %}&q={{ q | urlencode }}{% endif %}{% if phone %}&phone={{ phone | urlencode }}{% endif %}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const selectAll = document.getElementById('selectAll');
  if (selectAll) {
    selectAll.addEventListener('change', function() {
      document.querySelectorAll('input[name="client_ids"]').forEach(cb => cb.checked = selectAll.checked);
    });
  }
});
</script>
{% endblock %}
{% endblock %}