{% extends "base.html" %}

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

{% from "partials/answer_table_macros.html" import results_summary, pagination, answer_table, bulk_actions_bar %}

{% 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 }}">
                <input type="hidden" name="sort_key" value="{{ sort_key }}">
                <input type="hidden" name="sort_dir" value="{{ sort_dir }}">
                <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">
                <div class="btn-group" role="group" aria-label="Sort">
                    <button type="button" class="btn btn-outline-secondary dropdown-toggle d-inline-flex align-items-center gap-1" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-arrow-down-up"></i>
                        <span>{{ sort_labels[sort_key] if sort_labels and sort_key in sort_labels else 'Sort' }}</span>
                    </button>
                    <ul class="dropdown-menu">
                        {% for key, label in sort_labels.items() %}
                        <li>
                            <a class="dropdown-item d-flex justify-content-between align-items-center js-sort-option" href="#" data-sort-key="{{ key }}">
                                <span>{{ label }}</span>
                                {% if sort_key == key %}
                                <i class="bi bi-check"></i>
                                {% endif %}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </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">{{ results_summary(start_index, end_index, total) }}</div>
    <div class="col-12">
        <div class="table-responsive">
            {% set headers = [
                { 'title': 'Name', 'width': '220px', 'key': 'name' },
                { 'title': 'Company', 'key': 'company' },
                { 'title': 'Address', 'key': 'address' },
                { 'title': 'City', 'key': 'city' },
                { 'title': 'State', 'width': '80px', 'key': 'state' },
                { 'title': 'ZIP', 'width': '110px', 'key': 'zip' },
                { 'title': 'Phones', 'width': '200px', 'key': 'phones' },
                { 'title': 'Actions', 'width': '140px', 'align': 'end' },
            ] %}
            <form method="post" action="/reports/phone-book" class="js-answer-table">
              <table class="table table-hover align-middle js-rolodex-table" data-sort-key="{{ sort_key }}" data-sort-dir="{{ sort_dir }}">
                <thead class="table-light">
                  <tr>
                    {% if enable_bulk %}
                    <th style="width: 40px;"><input class="form-check-input js-select-all" type="checkbox"></th>
                    {% endif %}
                    {% for h in headers %}
                      <th{% if h.width %} width="{{ h.width | replace('px', '') }}"{% endif %}{% if h.align == 'end' %} class="text-end"{% endif %}>
                        {% if h.key %}
                          <button type="button" class="btn btn-link p-0 text-decoration-none text-reset d-inline-flex align-items-center gap-1 js-sort-control" data-sort-key="{{ h.key }}">
                            <span>{{ h.title }}</span>
                            <i class="sort-icon small {% if sort_key == h.key %}{% if sort_dir == 'desc' %}bi-caret-down-fill{% else %}bi-caret-up-fill{% endif %}{% else %}bi-arrow-down-up{% endif %}"></i>
                          </button>
                        {% else %}
                          {{ h.title }}
                        {% endif %}
                      </th>
                    {% endfor %}
                  </tr>
                </thead>
                <tbody>
                  {% if clients and clients|length > 0 %}
                    {% for c in clients %}
                    <tr data-updated="{{ (c.updated_at or c.created_at).isoformat() if (c.updated_at or c.created_at) else '' }}">
                      {% 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 data-empty-state="true">
                      <td colspan="8" class="text-center text-muted py-4">
                        No clients found.
                        <div class="small mt-1">
                          If you've imported legacy data, go to <a href="/admin">Admin</a> and run <em>Sync to Modern Models</em> to populate Clients and Phones.
                        </div>
                      </td>
                    </tr>
                  {% endif %}
                </tbody>
              </table>
            </form>

            {% if enable_bulk %}
              <div class="d-flex gap-2 mb-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>
                <a class="btn btn-outline-secondary js-submit-to" data-action="/reports/phone-book-address" href="#">
                  <i class="bi bi-journal-text me-1"></i>Phone+Address (Selected)
                </a>
                <a class="btn btn-outline-secondary js-submit-to" data-action="/reports/envelope" href="#">
                  <i class="bi bi-envelope me-1"></i>Envelope (Selected)
                </a>
                <a class="btn btn-outline-secondary js-submit-to" data-action="/reports/rolodex-info" href="#">
                  <i class="bi bi-card-text me-1"></i>Rolodex Info (Selected)
                </a>
              </div>
            {% endif %}
        </div>
    </div>
    <div class="col-12">
        {{ pagination('/rolodex', page, total_pages, page_size, {'q': q, 'phone': phone, 'sort_key': sort_key, 'sort_dir': sort_dir}) }}
    </div>
</div>
{% block extra_scripts %}
  {{ super() }}
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const table = document.querySelector('.js-rolodex-table');
      if (!table) {
        return;
      }
      const controls = document.querySelectorAll('.js-sort-control');
      const menuOptions = document.querySelectorAll('.js-sort-option');
      const defaultDirection = (key) => (key === 'updated' ? 'desc' : 'asc');
      let currentKey = table.dataset.sortKey || null;
      let currentDir = table.dataset.sortDir || null;

      const updateIndicators = (activeKey, direction) => {
        const normalizedDirection = direction === 'desc' ? 'desc' : 'asc';
        controls.forEach((control) => {
          const icon = control.querySelector('.sort-icon');
          if (!icon) {
            return;
          }
          icon.classList.remove('bi-caret-up-fill', 'bi-caret-down-fill');
          if (control.dataset.sortKey === activeKey) {
            icon.classList.remove('bi-arrow-down-up');
            icon.classList.add(normalizedDirection === 'desc' ? 'bi-caret-down-fill' : 'bi-caret-up-fill');
          } else {
            icon.classList.add('bi-arrow-down-up');
          }
        });
      };

      updateIndicators(currentKey, currentDir);

      controls.forEach((control) => {
        control.addEventListener('click', () => {
          const key = control.dataset.sortKey;
          if (!key) {
            return;
          }

          const nextDirection = currentKey === key
            ? (currentDir === 'asc' ? 'desc' : 'asc')
            : defaultDirection(key);

          const url = new URL(window.location.href);
          url.searchParams.set('sort_key', key);
          url.searchParams.set('sort_dir', nextDirection);
          url.searchParams.set('page', '1');

          window.location.href = url.toString();
        });
      });

      menuOptions.forEach((option) => {
        option.addEventListener('click', (event) => {
          event.preventDefault();
          const key = option.dataset.sortKey;
          if (!key) {
            return;
          }

          const nextDirection = currentKey === key
            ? (currentDir === 'asc' ? 'desc' : 'asc')
            : defaultDirection(key);

          const url = new URL(window.location.href);
          url.searchParams.set('sort_key', key);
          url.searchParams.set('sort_dir', nextDirection);
          url.searchParams.set('page', '1');

          window.location.href = url.toString();
        });
      });
    });
  </script>
{% endblock %}
{% endblock %}