{% extends 'base.html' %}
{% load static %}

{% block title %}Clientes - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .paginacao-modern .page-link {
        border: none;
        background: #f1f4f8;
        color: #34475a;
        font-weight: 600;
        border-radius: 8px !important;
        padding: .4rem .7rem;
    }
    .paginacao-modern .page-item.active .page-link {
        background: linear-gradient(135deg, #1e4976, #2f639d);
        color: #fff;
    }
    .paginacao-modern .page-link:hover { background: #e4effc; }
    .paginacao-modern .page-item.active .page-link:hover { background: linear-gradient(135deg, #1e4976, #2f639d); }
    .paginacao-modern .page-item.disabled .page-link { color: #b9c4d0; background: transparent; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <h2 class="mb-0"><i class="bi bi-people-fill"></i> Clientes</h2>
    <div class="d-flex gap-2 flex-wrap">
        <div class="btn-group" role="group" aria-label="Filtro de aniversariantes">
            <a href="{% url 'lista_clientes' %}?por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}" class="btn {% if not aniversario_periodo %}btn-success{% else %}btn-outline-success{% endif %}">Aniversariantes</a>
            <a href="{% url 'lista_clientes' %}?aniversario_periodo=dia&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}" class="btn {% if aniversario_periodo == 'dia' %}btn-success{% else %}btn-outline-success{% endif %}">Dia</a>
            <a href="{% url 'lista_clientes' %}?aniversario_periodo=semana&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}" class="btn {% if aniversario_periodo == 'semana' %}btn-success{% else %}btn-outline-success{% endif %}">Semana</a>
            <a href="{% url 'lista_clientes' %}?aniversario_periodo=mes&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}" class="btn {% if aniversario_periodo == 'mes' %}btn-success{% else %}btn-outline-success{% endif %}">Mês</a>
        </div>
        <a href="{% url 'cadastrar_cliente' %}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Novo Cliente
        </a>
    </div>
</div>

{% if aniversario_periodo %}
<div class="alert alert-success d-flex justify-content-between align-items-center mb-3">
    <span>
        <i class="bi bi-gift"></i>
        {% if aniversario_periodo == 'dia' %}
        Aniversariantes do dia
        {% elif aniversario_periodo == 'semana' %}
        Aniversariantes da semana
        {% elif aniversario_periodo == 'mes' %}
        Aniversariantes do mês
        {% endif %}
    </span>
    <span class="badge bg-success fs-6">{{ clientes.paginator.count }}</span>
</div>
{% endif %}

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-list-ul"></i> Lista de Clientes</span>
        <span class="badge bg-primary">{{ clientes.paginator.count }} total</span>
    </div>
    <div class="card-body">
        <div class="row mb-3 g-2">
            <div class="col-12 col-md-5">
                <form method="get" class="d-flex gap-2">
                    <input type="text" name="busca" class="form-control" placeholder="Buscar por nome, CPF ou telefone..." value="{{ busca }}">
                    <input type="hidden" name="por_pagina" value="{{ por_pagina }}">
                    {% if aniversario_periodo %}
                    <input type="hidden" name="aniversario_periodo" value="{{ aniversario_periodo }}">
                    {% endif %}
                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                    {% if busca %}
                    <a href="{% url 'lista_clientes' %}?por_pagina={{ por_pagina }}{% if aniversario_periodo %}&aniversario_periodo={{ aniversario_periodo }}{% endif %}" class="btn btn-secondary"><i class="bi bi-x"></i></a>
                    {% endif %}
                </form>
            </div>
            <div class="col-12 col-md-4">
                <select class="form-select" id="filtro-status">
                    <option value="">Filtrar na Página atual...</option>
                    <option value="ativo">Ativos</option>
                    <option value="inativo">Inativos</option>
                </select>
            </div>
            <div class="col-12 col-md-3">
                <form method="get" id="form-por-pagina">
                    {% if busca %}
                    <input type="hidden" name="busca" value="{{ busca }}">
                    {% endif %}
                    {% if aniversario_periodo %}
                    <input type="hidden" name="aniversario_periodo" value="{{ aniversario_periodo }}">
                    {% endif %}
                    <select name="por_pagina" class="form-select" onchange="this.form.submit()">
                        <option value="10" {% if por_pagina == 10 %}selected{% endif %}>10 por Página</option>
                        <option value="15" {% if por_pagina == 15 %}selected{% endif %}>15 por Página</option>
                        <option value="20" {% if por_pagina == 20 %}selected{% endif %}>20 por Página</option>
                    </select>
                </form>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Nome</th>
                        <th>CPF</th>
                        <th>Telefone</th>
                        <th>E-mail</th>
                        <th>Aniversário</th>
                        <th>Total Compras</th>
                        <th>Status</th>
                        <th class="text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for cliente in clientes %}
                    <tr>
                        <td><strong>{{ cliente.nome }}</strong></td>
                        <td>{{ cliente.cpf|default:"-" }}</td>
                        <td>{{ cliente.telefone }}</td>
                        <td>{{ cliente.email|default:"-" }}</td>
                        <td>
                            {% if cliente.data_nascimento %}
                                {{ cliente.data_nascimento|date:"d/m" }}
                                {% if cliente.data_nascimento|date:"m-d" == hoje|date:"m-d" %}
                                <span class="badge bg-success ms-1">Hoje</span>
                                {% endif %}
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>R$ {{ cliente.total_compras|floatformat:2 }}</td>
                        <td>
                            {% if cliente.ativo %}
                                <span class="badge bg-success">Ativo</span>
                            {% else %}
                                <span class="badge bg-secondary">Inativo</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a href="{% url 'historico_cliente' cliente.pk %}" class="btn btn-sm btn-info text-white" title="Ver histórico completo">
                                <i class="bi bi-clock-history"></i> Histórico
                            </a>
                            {% if cliente.ativo %}
                            <a href="{% url 'editar_cliente' cliente.pk %}" class="btn btn-sm btn-warning" title="Editar cliente">
                                <i class="bi bi-pencil"></i>
                            </a>
                            {% if pode_gerenciar %}
                            <button class="btn btn-sm btn-danger" onclick="window.location.href='{% url 'deletar_cliente' cliente.pk %}'" title="Excluir cliente">
                                <i class="bi bi-trash"></i>
                            </button>
                            {% endif %}
                            {% else %}
                            {% if pode_gerenciar %}
                            <form method="post" action="{% url 'restaurar_cliente' cliente.pk %}" class="d-inline m-0">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-success" title="Restaurar cliente">
                                    <i class="bi bi-arrow-counterclockwise"></i> Restaurar
                                </button>
                            </form>
                            {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <i class="bi bi-inbox" style="font-size: 2rem; color: #ccc;"></i>
                            <p class="text-muted mb-0">Nenhum cliente cadastrado</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <nav aria-label="Navegação de clientes" class="mt-4">
            <ul class="pagination paginacao-modern justify-content-center flex-wrap">
                {% if clientes.has_previous %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ clientes.previous_page_number }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if aniversario_periodo %}&aniversario_periodo={{ aniversario_periodo }}{% endif %}" title="Página anterior">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled mx-1"><span class="page-link"><i class="bi bi-chevron-left"></i></span></li>
                {% endif %}

                {% for num in clientes.paginator.page_range %}
                    {% if num == 1 or num == clientes.paginator.num_pages or num >= clientes.number|add:'-2' and num <= clientes.number|add:'+2' %}
                        {% if clientes.number == num %}
                        <li class="page-item active mx-1"><span class="page-link">{{ num }}</span></li>
                        {% elif num == clientes.paginator.num_pages and clientes.number|add:'+2' < num %}
                        <li class="page-item"><span class="page-link"><i class="bi bi-chevron-double-right"></i> {{ num }}</span></li>
                        {% elif num == 1 and clientes.number|add:'-2' > num %}
                        <li class="page-item"><span class="page-link">{{ num }} <i class="bi bi-chevron-double-left"></i></span></li>
                        {% else %}
                        <li class="page-item mx-1">
                            <a class="page-link" href="?page={{ num }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if aniversario_periodo %}&aniversario_periodo={{ aniversario_periodo }}{% endif %}">{{ num }}</a>
                        </li>
                        {% endif %}
                    {% elif num == clientes.number|add:'-3' or num == clientes.number|add:'+3' %}
                        <li class="page-item disabled mx-1"><span class="page-link">&hellip;</span></li>
                    {% endif %}
                {% endfor %}

                {% if clientes.has_next %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ clientes.next_page_number }}&por_pagina={{ por_pagina }}{% if busca %}&busca={{ busca }}{% endif %}{% if aniversario_periodo %}&aniversario_periodo={{ aniversario_periodo }}{% endif %}" title="Próxima página">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled mx-1"><span class="page-link"><i class="bi bi-chevron-right"></i></span></li>
                {% endif %}
            </ul>
        </nav>

        <div class="text-center text-muted">
            <small>
                Mostrando {{ clientes.start_index }} a {{ clientes.end_index }} de {{ clientes.paginator.count }} clientes
            </small>
        </div>
    </div>
</div>

<script>
{% if not pode_gerenciar %}
// escondido: exclusão agora é página com modal para administradores
{% endif %}
</script>
{% endblock %}