{% extends 'base.html' %}
{% block title %}Clientes{% endblock %}
{% block page_title %}Gestión de Clientes{% endblock %}
{% block page_subtitle %}Listado de clientes registrados{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <form class="d-flex gap-2" method="get">
        <input type="text" name="q" value="{{ q }}" class="form-control"
            placeholder="Buscar por nombre, DNI o teléfono..." style="width:320px;">
        <button type="submit" class="btn btn-primary px-4" style="background:#0bb8c8;border:none;">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
        {% if q %}<a href="{% url 'cliente_lista' %}" class="btn btn-outline-secondary">Limpiar</a>{% endif %}
    </form>
    <a href="{% url 'cliente_crear' %}" class="btn btn-primary rounded-pill px-4"
        style="background:#0bb8c8;border:none;">
        <i class="fa-solid fa-user-plus me-2"></i>Nuevo Cliente
    </a>
</div>

<div class="panel-card">
    {% if clientes %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr
                    style="background:#f8fafc; font-size:12px; text-transform:uppercase; color:#94a3b8; letter-spacing:.5px;">
                    <th class="ps-3">Cliente</th>
                    <th>DNI</th>
                    <th>Teléfono</th>
                    <th>Email</th>
                    <th class="text-center">Mascotas</th>
                    <th>Registro</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for cliente in clientes %}
                <tr {% if not cliente.is_active %}class="opacity-50" {% endif %}>
                    <td class="ps-3">
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                                style="width:38px;height:38px;background:linear-gradient(135deg,#0bb8c8,#0380ad);font-size:15px;flex-shrink:0;">
                                {{ cliente.nombres.0|upper }}
                            </div>
                            <div>
                                <div class="fw-semibold text-dark">{{ cliente.nombre_completo }}</div>
                                <small class="text-muted">{{ cliente.direccion|default:"-"|truncatechars:30 }}</small>
                            </div>
                        </div>
                    </td>
                    <td><code>{{ cliente.dni }}</code></td>
                    <td>{{ cliente.telefono }}</td>
                    <td>{{ cliente.email|default:"—" }}</td>
                    <td class="text-center">
                        <span class="badge rounded-pill"
                            style="background:rgba(139,92,246,.15);color:#6d28d9;font-size:13px;padding:5px 12px;">
                            {{ cliente.mascotas.count }}
                        </span>
                    </td>
                    <td class="text-muted small">{{ cliente.fecha_registro|date:"d/m/Y" }}</td>
                    <td class="text-center">
                        <a href="{% url 'cliente_perfil' cliente.pk %}" class="btn btn-sm btn-outline-info me-1"
                            title="Ver perfil"><i class="fa-solid fa-eye"></i></a>
                        <a href="{% url 'cliente_editar' cliente.pk %}" class="btn btn-sm btn-outline-secondary me-1"
                            title="Editar"><i class="fa-solid fa-pen"></i></a>
                        <form method="post" action="{% url 'cliente_estado' cliente.pk %}" class="d-inline">
                            {% csrf_token %}
                            {% if cliente.is_active %}
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar">
                                <i class="fa-solid fa-ban"></i>
                            </button>
                            {% else %}
                            <button type="submit" class="btn btn-sm btn-outline-success" title="Activar">
                                <i class="fa-solid fa-check"></i>
                            </button>
                            {% endif %}
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="fa-solid fa-users" style="font-size:3rem;opacity:.2;"></i>
        <p class="mt-3">No se encontraron clientes{% if q %} para "{{ q }}"{% endif %}.</p>
        <a href="{% url 'cliente_crear' %}" class="btn btn-primary rounded-pill"
            style="background:#0bb8c8;border:none;">
            <i class="fa-solid fa-user-plus me-2"></i>Registrar primer cliente
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}