cliente_list.html

{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">

    <h2><i class="fas fa-users"></i> Lista de Clientes</h2>

    <!-- Buscador -->
    <form method="GET" action="{% url 'cliente_list' %}" class="mb-3">
        <div class="input-group">
            <input type="text" name="buscar" class="form-control" placeholder="Buscar cliente..." value="{{ buscar }}">
            <button class="btn btn-primary"><i class="fas fa-search"></i></button>
        </div>
    </form>

    <a href="{% url 'crear_cliente' %}" class="btn btn-success mb-3"><i class="fas fa-user-plus"></i> Nuevo Cliente</a>

    <table class="table table-bordered table-hover shadow-sm">
        <thead class="table-dark">
            <tr>
                <th>Nº Documento</th>
                <th>Nombre Completo</th>
                <th>Teléfono</th>
                <th>Correo</th>
                <th>Direcciones</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            {% for cliente in clientes %}
            <tr>
                <td>{{ cliente.numero_documento }}</td>
                <td>{{ cliente.nombre }} {{ cliente.apellido_paterno }} {{ cliente.apellido_materno }}</td>
                <td>{{ cliente.telefono }}</td>
                <td>{{ cliente.correo }}</td>
                <td>
                    <ul>
                    {% for direccion in cliente.direcciones_instalacion.all %}
                        <li>{{ direccion.direccion }} - ({{ direccion.zona.nombre }})</li>
                    {% endfor %}
                    </ul>
                </td>
                <td>
                    <a href="{% url 'editar_cliente' cliente.pk %}" class="btn btn-warning btn-sm">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                    <a href="{% url 'registrar_pago' cliente_id=cliente.pk %}" class="btn btn-primary btn-sm mt-1">
                        <i class="fas fa-cash-register"></i> Registrar Pago
                    </a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6">No hay clientes que coincidan con tu búsqueda.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Paginador -->
    {% if is_paginated %}
    <nav>
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?buscar={{ buscar }}&page={{ page_obj.previous_page_number }}">Anterior</a>
                </li>
            {% else %}
                <li class="page-item disabled"><span class="page-link">Anterior</span></li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="?buscar={{ buscar }}&page={{ num }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?buscar={{ buscar }}&page={{ page_obj.next_page_number }}">Siguiente</a>
                </li>
            {% else %}
                <li class="page-item disabled"><span class="page-link">Siguiente</span></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

</div>

{% endblock %}