{% extends "base.html" %}

{% block title %}Clients - {{ app_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    {% from "_components.html" import page_header %}
    <div class="row">
        <div class="col-12">
            {% set actions %}
            {% if current_user.is_admin %}
            <a href="{{ url_for('clients.create_client') }}" class="btn btn-outline-light btn-sm">
                <i class="fas fa-plus"></i> New Client
            </a>
            {% endif %}
            {% endset %}
            {{ page_header('fas fa-building', 'Clients', 'Manage customers and contacts • ' ~ (clients|length) ~ ' total', actions) }}
        </div>
    </div>

    <!-- Client List -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list me-2"></i>All Clients
                        </h6>
                        <div class="d-flex gap-2">
                            <div class="input-group input-group-sm" style="width: 250px;">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0" id="searchInput" 
                                       placeholder="Search clients...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    {% if clients %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" id="clientsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Name</th>
                                    <th>Contact Person</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Default Rate</th>
                                    <th>Projects</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for client in clients %}
                                <tr class="client-row" data-status="{{ client.status }}">
                                    <td>
                                        <a href="{{ url_for('clients.view_client', client_id=client.id) }}" class="text-decoration-none">
                                            <strong>{{ client.name }}</strong>
                                        </a>
                                        {% if client.description %}
                                        <br><small class="text-muted">{{ client.description[:50] }}{% if client.description|length > 50 %}...{% endif %}</small>
                                        {% endif %}
                                    </td>
                                    <td>{{ client.contact_person or '-' }}</td>
                                    <td>
                                        {% if client.email %}
                                        <a href="mailto:{{ client.email }}">{{ client.email }}</a>
                                        {% else %}
                                        -
                                        {% endif %}
                                    </td>
                                    <td>{{ client.phone or '-' }}</td>
                                    <td>
                                        {% if client.default_hourly_rate %}
                                        {{ "%.2f"|format(client.default_hourly_rate) }} {{ currency }}
                                        {% else %}
                                        -
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge badge-soft-primary badge-pill">{{ client.total_projects }}</span>
                                        {% if client.active_projects > 0 %}
                                        <br><small class="text-muted">{{ client.active_projects }} active</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% set status_map = {
                                            'active':   {'bg': 'bg-success',   'label': 'Active'},
                                            'inactive': {'bg': 'bg-secondary', 'label': 'Inactive'}
                                        } %}
                                        {% set sc = status_map.get(client.status, status_map['inactive']) %}
                                        <span class="status-badge {{ sc.bg }} text-white">{{ sc.label }}</span>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ url_for('clients.view_client', client_id=client.id) }}" 
                                               class="btn btn-sm btn-action btn-action--view" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            {% if current_user.is_admin %}
                                            <a href="{{ url_for('clients.edit_client', client_id=client.id) }}" 
                                               class="btn btn-sm btn-action btn-action--edit" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            {% if client.status == 'active' %}
                                            <form method="POST" action="{{ url_for('clients.archive_client', client_id=client.id) }}" 
                                                  class="d-inline" onsubmit="return confirm('Are you sure you want to archive this client?')">
                                                <button type="submit" class="btn btn-sm btn-action btn-action--warning" title="Archive">
                                                    <i class="fas fa-archive"></i>
                                                </button>
                                            </form>
                                            {% else %}
                                            <form method="POST" action="{{ url_for('clients.activate_client', client_id=client.id) }}" 
                                                  class="d-inline">
                                                <button type="submit" class="btn btn-sm btn-action btn-action--success" title="Activate">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            </form>
                                            {% endif %}
                                            {% if client.total_projects == 0 %}
                                            <form method="POST" action="{{ url_for('clients.delete_client', client_id=client.id) }}" 
                                                  class="d-inline" onsubmit="return confirm('Are you sure you want to delete this client? This action cannot be undone.')">
                                                <button type="submit" class="btn btn-sm btn-action btn-action--danger" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            {% endif %}
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-building fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No Clients Found</h4>
                        <p class="text-muted">Get started by creating your first client.</p>
                        {% if current_user.is_admin %}
                        <a href="{{ url_for('clients.create_client') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Create First Client
                        </a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<style>
/* Align clients list visuals with invoices list */
.status-badge { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
.badge-pill { border-radius: 9999px; }
.badge-soft-primary { background: rgba(59,130,246,0.12); color: var(--primary-color); border: 1px solid rgba(59,130,246,0.25); }
.empty-state { padding: 2rem; }
.btn-group .btn { border-radius: 0 !important; margin-right: 0 !important; }
.btn-group .btn:first-child { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.btn-group .btn:last-child { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
@media (max-width: 768px) {
  .table-responsive { font-size: 14px; }
  .btn-group .btn { padding: 0.375rem 0.5rem; font-size: 12px; }
  .status-badge { font-size: 10px; padding: 4px 8px; }
}
</style>

{% block extra_js %}
<script>
// Simple search (vanilla JS)
(function() {
  const searchInput = document.getElementById('searchInput');
  const table = document.getElementById('clientsTable');
  if (!table) return;
  const rows = Array.from(table.querySelectorAll('tbody tr'));

  function normalize(text) { return (text || '').toLowerCase(); }

  function matchesSearch(row, term) {
    if (!term) return true;
    const cellsText = Array.from(row.querySelectorAll('td')).map(td => td.innerText).join(' ');
    return normalize(cellsText).includes(term);
  }

  function applyFilters() {
    const term = normalize(searchInput ? searchInput.value : '');
    rows.forEach(row => {
      const show = matchesSearch(row, term);
      row.style.display = show ? '' : 'none';
    });
  }

  if (searchInput) {
    searchInput.addEventListener('input', applyFilters);
  }

  // Initial
  applyFilters();
})();
</script>
{% endblock %}
{% endblock %}
