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

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

{% block extra_css %}
<style>
    .gasto-card {
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 1px 6px rgba(29, 58, 95, .07);
        padding: 1rem 1.25rem;
        border: 2px solid transparent;
        border-left-width: 5px;
        border-left-style: solid;
        height: 100%;
    }
    .gasto-card .gasto-icone {
        display: inline-grid;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 12px;
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    .gasto-card .gasto-rotulo { color: #59697a; font-size: .8rem; }
    .gasto-card .gasto-valor { font-weight: 800; font-size: 1.25rem; line-height: 1.15; }
    .gasto-card .gasto-sub { color: #8a97a8; font-size: .75rem; }
    .borda-vermelho { border-left-color: #dc3545; }
    .borda-verde { border-left-color: #198754; }
    .borda-laranja { border-left-color: #fd7e14; }
    .borda-azul { border-left-color: #0d6efd; }
    .icon-vermelho { background: #fdeaea; color: #dc3545; }
    .icon-verde { background: #e7f7ef; color: #198754; }
    .icon-laranja { background: #fff3e2; color: #fd7e14; }
    .icon-azul { background: #e8f0fe; color: #0d6efd; }
    .gasto-lista .card-header {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        border-radius: 14px 14px 0 0 !important;
    }
    .gasto-lista > .card { border-radius: 14px; }
    .badge.gasto-badge { font-size: .78rem; padding: .45em .8em; border-radius: 8px; }
    .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-wallet2"></i> Gastos e Despesas</h2>
    <a href="{% url 'cadastrar_gasto' %}" class="btn btn-success">
        <i class="bi bi-plus-circle"></i> Novo Gasto
    </a>
</div>

{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
{% endif %}

<div class="row g-3 mb-4">
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="gasto-card borda-vermelho">
            <div class="d-flex align-items-center gap-3">
                <span class="gasto-icone icon-vermelho"><i class="bi bi-arrow-down-left-circle"></i></span>
                <div class="flex-grow-1">
                    <div class="gasto-rotulo">Total em Gastos</div>
                    <div class="gasto-valor">R$ {{ total_valor|floatformat:2 }}</div>
                    <div class="gasto-sub">{{ total_gastos }} lançamento(s)</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="gasto-card borda-verde">
            <div class="d-flex align-items-center gap-3">
                <span class="gasto-icone icon-verde"><i class="bi bi-check-circle"></i></span>
                <div class="flex-grow-1">
                    <div class="gasto-rotulo">Total Pago</div>
                    <div class="gasto-valor text-success">R$ {{ total_pago|floatformat:2 }}</div>
                    <div class="gasto-sub">quitado no período</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="gasto-card borda-laranja">
            <div class="d-flex align-items-center gap-3">
                <span class="gasto-icone icon-laranja"><i class="bi bi-hourglass-split"></i></span>
                <div class="flex-grow-1">
                    <div class="gasto-rotulo">Total Pendente</div>
                    <div class="gasto-valor text-warning">R$ {{ total_pendente|floatformat:2 }}</div>
                    <div class="gasto-sub">aguardando pagamento</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="gasto-card borda-azul">
            <div class="d-flex align-items-center gap-3">
                <span class="gasto-icone icon-azul"><i class="bi bi-list-check"></i></span>
                <div class="flex-grow-1">
                    <div class="gasto-rotulo">Registros Listados</div>
                    <div class="gasto-valor">{{ total_gastos }}</div>
                    <div class="gasto-sub">de todos os gastos</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card gasto-lista">
    <div class="card-header d-flex align-items-center">
        <i class="bi bi-list-ul"></i> Lista de Gastos
        <span class="badge bg-light text-dark ms-2">{{ total_gastos }} gasto(s)</span>
    </div>
    <div class="card-body">
        <form method="get" id="formFiltrosGastos" class="row mb-4 g-2 align-items-end">
            <div class="col-12 col-md-3">
                <label class="form-label small fw-bold"><i class="bi bi-search"></i> Buscar</label>
                <input type="text" class="form-control" name="busca" placeholder="Descrição..." value="{{ filtros.busca }}">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label small fw-bold"><i class="bi bi-tags"></i> Categoria</label>
                <select class="form-select" name="categoria">
                    <option value="">Todas</option>
                    {% for valor, nome in categorias %}
                    <option value="{{ valor }}" {% if filtros.categoria == valor %}selected{% endif %}>{{ nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small fw-bold"><i class="bi bi-flag"></i> Situação</label>
                <select class="form-select" name="pago">
                    <option value="" {% if not filtros.pago %}selected{% endif %}>Todos</option>
                    <option value="pago" {% if filtros.pago == 'pago' %}selected{% endif %}>Pagos</option>
                    <option value="pendente" {% if filtros.pago == 'pendente' %}selected{% endif %}>Pendentes</option>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small fw-bold"><i class="bi bi-calendar3"></i> De</label>
                <input type="date" class="form-control" name="data_inicio" value="{{ filtros.data_inicio }}">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label small fw-bold"><i class="bi bi-calendar3"></i> Até</label>
                <input type="date" class="form-control" name="data_fim" value="{{ filtros.data_fim }}">
            </div>
            <div class="col-6 col-md-1">
                <button type="submit" class="btn btn-primary w-100" title="Aplicar filtro"><i class="bi bi-funnel"></i></button>
            </div>
            <div class="col-6 col-md-1">
                <a href="{% url 'lista_gastos' %}" class="btn btn-secondary w-100" title="Limpar filtros"><i class="bi bi-eraser"></i></a>
            </div>
            <div class="col-12 col-md-6 mt-1">
                <label class="form-label small fw-bold mb-0"><i class="bi bi-eye"></i> Exibir</label>
                <select name="por_pagina" class="form-select d-inline-block w-auto ms-1" onchange="document.getElementById('formFiltrosGastos').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>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th><i class="bi bi-calendar3"></i> Data</th>
                        <th><i class="bi bi-card-text"></i> Descrição</th>
                        <th><i class="bi bi-tag"></i> Categoria</th>
                        <th class="text-end"><i class="bi bi-cash"></i> Valor</th>
                        <th><i class="bi bi-flag"></i> Situação</th>
                        <th class="text-end"><i class="bi bi-gear"></i> Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for gasto in gastos %}
                    <tr>
                        <td>{{ gasto.data_gasto|date:"d/m/Y" }}</td>
                        <td><strong>{{ gasto.descricao }}</strong></td>
                        <td>{{ gasto.get_categoria_display }}</td>
                        <td class="text-end"><strong>R$ {{ gasto.valor|floatformat:2 }}</strong></td>
                        <td>
                            {% if gasto.pago %}
                                <span class="badge gasto-badge bg-success"><i class="bi bi-check-circle"></i> Pago</span>
                            {% else %}
                                <span class="badge gasto-badge bg-warning text-dark"><i class="bi bi-hourglass-split"></i> Pendente</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a href="{% url 'editar_gasto' gasto.pk %}" class="btn btn-sm btn-primary">
                                <i class="bi bi-pencil"></i> Editar
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <i class="bi bi-inbox" style="font-size: 3rem; color: #ccc;"></i>
                            <p class="text-muted">Nenhum gasto registrado</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <nav aria-label="Navegação de gastos" class="mt-3">
            <ul class="pagination paginacao-modern justify-content-center flex-wrap">
                {% if gastos.has_previous %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ gastos.previous_page_number }}&por_pagina={{ por_pagina }}{% if filtros.busca %}&busca={{ filtros.busca }}{% endif %}{% if filtros.categoria %}&categoria={{ filtros.categoria }}{% endif %}{% if filtros.pago %}&pago={{ filtros.pago }}{% endif %}{% if filtros.data_inicio %}&data_inicio={{ filtros.data_inicio }}{% endif %}{% if filtros.data_fim %}&data_fim={{ filtros.data_fim }}{% 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 gastos.paginator.page_range %}
                    {% if num == 1 or num == gastos.paginator.num_pages or num >= gastos.number|add:'-2' and num <= gastos.number|add:'+2' %}
                        {% if gastos.number == num %}
                        <li class="page-item active mx-1"><span class="page-link">{{ num }}</span></li>
                        {% elif num == gastos.paginator.num_pages and gastos.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 gastos.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 filtros.busca %}&busca={{ filtros.busca }}{% endif %}{% if filtros.categoria %}&categoria={{ filtros.categoria }}{% endif %}{% if filtros.pago %}&pago={{ filtros.pago }}{% endif %}{% if filtros.data_inicio %}&data_inicio={{ filtros.data_inicio }}{% endif %}{% if filtros.data_fim %}&data_fim={{ filtros.data_fim }}{% endif %}">{{ num }}</a>
                        </li>
                        {% endif %}
                    {% elif num == gastos.number|add:'-3' or num == gastos.number|add:'+3' %}
                        <li class="page-item disabled mx-1"><span class="page-link">&hellip;</span></li>
                    {% endif %}
                {% endfor %}

                {% if gastos.has_next %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ gastos.next_page_number }}&por_pagina={{ por_pagina }}{% if filtros.busca %}&busca={{ filtros.busca }}{% endif %}{% if filtros.categoria %}&categoria={{ filtros.categoria }}{% endif %}{% if filtros.pago %}&pago={{ filtros.pago }}{% endif %}{% if filtros.data_inicio %}&data_inicio={{ filtros.data_inicio }}{% endif %}{% if filtros.data_fim %}&data_fim={{ filtros.data_fim }}{% 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 {{ gastos.start_index }} a {{ gastos.end_index }} de {{ gastos.paginator.count }} gastos
            </small>
        </div>
    </div>
</div>

{% endblock %}