{% extends 'base.html' %}
{% block title %}Condicionais - {{ block.super }}{% endblock %}
{% block extra_css %}
<style>
    .conditional-list .page-heading { display: flex; align-items: center; gap: .7rem; }
    .conditional-list .page-heading > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #e4effc; color: #245e98; font-size: 1.4rem; }
    .conditional-list .summary-card { height: 100%; margin-bottom: 0; border: 1px solid var(--card-border); border-left: 5px solid var(--card-accent); background: var(--card-bg); }
    .conditional-list .summary-card .card-body { padding: 1rem; }
    .conditional-list .summary-icon { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .65rem; background: var(--card-border); color: var(--card-ink); font-size: 1.25rem; }
    .conditional-list .summary-value { color: var(--card-ink); font-size: clamp(1.2rem, 1.5vw, 1.65rem); line-height: 1.15; font-weight: 700; margin: .8rem 0 .4rem; overflow-wrap: anywhere; }
    .conditional-list .summary-label { color: #3e5062; font-weight: 600; font-size: .86rem; }
    .conditional-list .tone-blue { --card-bg: #edf5ff; --card-border: #cfe1fb; --card-accent: #2866a0; --card-ink: #164a7b; }
    .conditional-list .tone-cyan { --card-bg: #eaf8fb; --card-border: #c6eaf2; --card-accent: #23819a; --card-ink: #176174; }
    .conditional-list .tone-orange { --card-bg: #fff4e5; --card-border: #f5dfbc; --card-accent: #b97013; --card-ink: #89500d; }
    .conditional-list .tone-red { --card-bg: #fff0f0; --card-border: #f6caca; --card-accent: #c53b43; --card-ink: #a42630; }
    .conditional-list .tone-purple { --card-bg: #f4efff; --card-border: #ddd1fb; --card-accent: #7655b2; --card-ink: #583896; }
    .conditional-list .tone-green { --card-bg: #eaf8ef; --card-border: #c8ecd6; --card-accent: #228451; --card-ink: #17623c; }
    .conditional-list .filters-panel { padding: 1rem; border: 1px solid #e2e9f1; border-radius: .7rem; background: #f6f9fc; }
    .conditional-list .filters-panel label { color: #44586c; font-size: .83rem; font-weight: 600; margin-bottom: .3rem; }
    .conditional-list .filters-panel input[type="date"] { max-width: 165px; }
    .conditional-list .list-table { min-width: 1180px; }
    .conditional-list .list-table td:first-child { white-space: nowrap; }
    .conditional-list .cond-numero { display: inline-flex; align-items: center; font-size: .8rem; letter-spacing: .02em; color: #164a7b; }
    .conditional-list .cond-numero .num-sufixo { color: #526174; font-weight: 600; }
    .conditional-list .list-table th { white-space: nowrap; color: #526174; background: #f4f7fa; font-size: .84rem; }
    .conditional-list .list-table td { vertical-align: middle; }
    .conditional-list .list-table tbody tr { --bs-table-bg: #ffffff; --bs-table-hover-bg: #eef4fb; box-shadow: inset 4px 0 0 0 var(--row-accent, #d5dde6); }
    .conditional-list .list-table tbody tr:nth-child(even) { --bs-table-bg: #f8fafc; }
    /* Destaque semântico por situação */
    .conditional-list .row-open    { --row-accent: #3279c7; --bs-table-bg: #f2f7ff; }
    .conditional-list .row-partial { --row-accent: #e8940a; --bs-table-bg: #fff8ec; }
    .conditional-list .row-sale    { --row-accent: #7655b2; --bs-table-bg: #f6f1ff; }
    .conditional-list .row-due     { --row-accent: #d6303a; --bs-table-bg: #fff2f2; }
    .conditional-list .row-done    { --row-accent: #228451; --bs-table-bg: #f1faf5; }
    .conditional-list .row-muted   { --row-accent: #9aa6b2; --bs-table-bg: #f7f8fa; }
    .conditional-list .row-due td  { color: #8f2229; }
    .conditional-list .list-table .number-pill { display: inline-block; min-width: 2rem; padding: .2rem .45rem; border-radius: .5rem; text-align: center; font-weight: 700; background: #e5effb; color: #164a7b; }
    .conditional-list .list-table .pending-pill { background: #ffebd5; color: #8b4f0b; }
    .conditional-list .list-table .pending-zero { background: #e5e9ee; color: #506174; }
    .conditional-list .list-table .status-badge { display: inline-block; padding: .35rem .65rem; border-radius: 999px; white-space: nowrap; font-size: .8rem; font-weight: 700; }
    .conditional-list .status-open { background: #dceafb; color: #164a7b; }
    .conditional-list .status-partial { background: #fff0d9; color: #89500d; }
    .conditional-list .status-sale { background: #ebe3fc; color: #583896; }
    .conditional-list .status-done { background: #dbf3e5; color: #17623c; }
    .conditional-list .status-due { background: #ffe1e1; color: #a42630; }
    .conditional-list .status-muted { background: #e7eaee; color: #4b5968; }

    .paginacao-modern .page-link {
        border: none; border-radius: 10px !important;
        color: #164a7b; font-weight: 600; font-size: .9rem;
        min-width: 2.4rem; text-align: center; padding: .5rem .65rem;
        margin-inline: .15rem; transition: all .15s;
        background: transparent;
    }
    .paginacao-modern .page-item.active .page-link {
        background: linear-gradient(135deg, #1e4976, #2f639d); color: #fff;
        box-shadow: 0 3px 10px rgba(30, 73, 118, .3);
    }
    .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="conditional-list">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h2 class="page-heading mb-0"><i class="bi bi-bag-heart"></i> Condicionais</h2>
        <a href="{% url 'condicional:novo' %}" class="btn btn-success"><i class="bi bi-plus-circle me-1"></i> Novo condicional</a>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-4 col-xl-2"><div class="card summary-card tone-blue"><div class="card-body"><span class="summary-icon"><i class="bi bi-cash-stack"></i></span><div class="summary-value">R$ {{ cards.valor_em_condicional|floatformat:2 }}</div><div class="summary-label">Valor pendente</div></div></div></div>
        <div class="col-6 col-md-4 col-xl-2"><div class="card summary-card tone-cyan"><div class="card-body"><span class="summary-icon"><i class="bi bi-bag"></i></span><div class="summary-value">{{ cards.pecas_em_condicional }}</div><div class="summary-label">Peças com clientes</div></div></div></div>
        <div class="col-6 col-md-4 col-xl-2"><div class="card summary-card tone-orange"><div class="card-body"><span class="summary-icon"><i class="bi bi-hourglass-split"></i></span><div class="summary-value">{{ cards.em_aberto }}</div><div class="summary-label">Em aberto</div></div></div></div>
        <div class="col-6 col-md-4 col-xl-2"><div class="card summary-card tone-red"><div class="card-body"><span class="summary-icon"><i class="bi bi-exclamation-circle"></i></span><div class="summary-value">{{ cards.vencidos }}</div><div class="summary-label">Vencidos</div></div></div></div>
        <div class="col-6 col-md-4 col-xl-2"><div class="card summary-card tone-purple"><div class="card-body"><span class="summary-icon"><i class="bi bi-cart-check"></i></span><div class="summary-value">R$ {{ cards.valor_vendas|floatformat:2 }}</div><div class="summary-label">Vendas do período</div></div></div></div>
        <div class="col-6 col-md-4 col-xl-2"><div class="card summary-card tone-green"><div class="card-body"><span class="summary-icon"><i class="bi bi-arrow-return-left"></i></span><div class="summary-value">{{ cards.pecas_devolvidas }}</div><div class="summary-label">Devolvidas no período</div></div></div></div>
    </div>

    <div class="card">
        <div class="card-header d-flex align-items-center gap-2"><i class="bi bi-list-ul text-primary"></i> Consulta de condicionais <span class="badge bg-light text-secondary border ms-auto">{{ condicionais.paginator.count }} registro{{ condicionais.paginator.count|pluralize }}</span></div>
        <div class="card-body">
            <form method="get" class="filters-panel row g-2 mb-3">
                <div class="col-md-6 col-xl-2"><label for="busca-condicional">Número ou cliente</label><input id="busca-condicional" class="form-control" name="busca" value="{{ busca }}" placeholder="Buscar condicional"></div>
                <div class="col-md-6 col-xl-2"><label for="status-condicional">Situação</label><select id="status-condicional" class="form-select" name="status"><option value="">Todas</option>{% for valor, rotulo in status_opcoes %}<option value="{{ valor }}" {% if status_filtro == valor %}selected{% endif %}>{{ rotulo }}</option>{% endfor %}</select></div>
                <div class="col-6 col-md-2 col-xl-2"><label for="data-inicio">De</label><input id="data-inicio" class="form-control" type="date" name="data_inicio" value="{{ data_inicio }}"></div>
                <div class="col-6 col-md-2 col-xl-2"><label for="data-fim">Até</label><input id="data-fim" class="form-control" type="date" name="data_fim" value="{{ data_fim }}"></div>
                <div class="col-6 col-md-2 col-xl-2"><label for="ordenar-condicional">Ordem</label><select id="ordenar-condicional" class="form-select" name="ordenar"><option value="desc" {% if ordenar == 'desc' %}selected{% endif %}>Recentes</option><option value="asc" {% if ordenar == 'asc' %}selected{% endif %}>Antigos</option></select></div>
                <div class="col-md-3 col-xl-2 d-flex align-items-end gap-2"><button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Filtrar</button><a class="btn btn-outline-primary" href="{% url 'condicional:lista' %}" title="Limpar filtros"><i class="bi bi-x-circle"></i> Limpar</a></div>
            </form>
            <p class="small text-muted mb-3">Vendas e devoluções consideram o período escolhido; sem datas, os indicadores abrangem todo o histórico.</p>
            <div class="table-responsive"><table class="table table-hover align-middle list-table mb-0">
                <thead><tr><th>Número</th><th>Cliente</th><th>Envio</th><th>Previsão</th><th>Envio inicial</th><th>Saldo pendente</th><th>Valor enviado</th><th>Valor pendente</th><th>Situação</th><th>Responsável</th><th>Abrir</th></tr></thead>
                <tbody>{% for c in condicionais %}
                <tr class="{% if c.status == 'finalizado' %}row-done{% elif c.status == 'cancelado' %}row-muted{% elif c.vencido %}row-due{% elif c.status == 'parcialmente_conferido' %}row-partial{% elif c.status == 'aguardando_venda' %}row-sale{% elif c.status == 'rascunho' %}row-muted{% else %}row-open{% endif %}">
                    <td><a class="cond-numero text-decoration-none" href="{% url 'condicional:detalhe' c.pk %}" title="Abrir condicional {{ c.numero }}"><span class="fw-bold">{{ c.numero }}</span></a></td>
                    <td class="fw-semibold">{{ c.cliente.nome }}</td>
                    <td class="text-nowrap">{{ c.enviado_em|date:'d/m/Y H:i'|default:'-' }}</td>
                    <td class="text-nowrap">{{ c.previsao_devolucao|date:'d/m/Y'|default:'-' }}{% if c.vencido %}<i class="bi bi-exclamation-circle-fill text-danger ms-1" title="Vencido"></i>{% endif %}</td>
                    <td><span class="number-pill">{{ c.quantidade_enviada }}</span></td>
                    <td><span class="number-pill {% if c.quantidade_pendente %}pending-pill{% else %}pending-zero{% endif %}">{{ c.quantidade_pendente }}</span></td>
                    <td class="text-nowrap">R$ {{ c.valor_enviado|floatformat:2 }}</td>
                    <td class="text-nowrap fw-semibold">R$ {{ c.valor_pendente|floatformat:2 }}</td>
                    <td>{% if c.status == 'finalizado' %}<span class="status-badge status-done">Finalizado</span>{% elif c.status == 'cancelado' %}<span class="status-badge status-muted">Cancelado</span>{% elif c.vencido %}<span class="status-badge status-due">Vencido</span>{% elif c.status == 'parcialmente_conferido' %}<span class="status-badge status-partial">{{ c.get_status_display }}</span>{% elif c.status == 'aguardando_venda' %}<span class="status-badge status-sale">{{ c.get_status_display }}</span>{% elif c.status == 'rascunho' %}<span class="status-badge status-muted">Rascunho</span>{% else %}<span class="status-badge status-open">{{ c.get_status_display }}</span>{% endif %}{% if c.qtd_vendas %}<span class="status-badge status-sale d-block text-center mt-1" style="width: max-content;"><i class="bi bi-cart-check"></i> {{ c.qtd_vendas }} venda{{ c.qtd_vendas|pluralize }}</span>{% endif %}</td>
                    <td>{{ c.responsavel.get_full_name|default:c.responsavel.username|default:'-' }}</td>
                    <td><a class="btn btn-sm btn-primary" href="{% url 'condicional:detalhe' c.pk %}" aria-label="Abrir condicional {{ c.numero }}"><i class="bi bi-eye"></i></a></td>
                </tr>
                {% empty %}<tr><td colspan="11" class="text-center text-muted py-4"><i class="bi bi-inbox fs-3 d-block mb-2"></i>Nenhum condicional encontrado.</td></tr>{% endfor %}</tbody>
            </table></div>
            {% if condicionais.has_other_pages %}<nav aria-label="Paginação de condicionais" class="mt-3">
                <ul class="pagination paginacao-modern justify-content-center flex-wrap mb-0">
                    {% if condicionais.has_previous %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ condicionais.previous_page_number }}&busca={{ busca|urlencode }}&status={{ status_filtro }}&data_inicio={{ data_inicio }}&data_fim={{ data_fim }}&ordenar={{ ordenar }}" 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 condicionais.paginator.page_range %}
                        {% if num == 1 or num == condicionais.paginator.num_pages or num >= condicionais.number|add:'-2' and num <= condicionais.number|add:'+2' %}
                            {% if condicionais.number == num %}
                            <li class="page-item active mx-1"><span class="page-link">{{ num }}</span></li>
                            {% elif num == condicionais.paginator.num_pages and condicionais.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 condicionais.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 }}&busca={{ busca|urlencode }}&status={{ status_filtro }}&data_inicio={{ data_inicio }}&data_fim={{ data_fim }}&ordenar={{ ordenar }}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% elif num == condicionais.number|add:'-3' or num == condicionais.number|add:'+3' %}
                            <li class="page-item disabled mx-1"><span class="page-link">&hellip;</span></li>
                        {% endif %}
                    {% endfor %}

                    {% if condicionais.has_next %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ condicionais.next_page_number }}&busca={{ busca|urlencode }}&status={{ status_filtro }}&data_inicio={{ data_inicio }}&data_fim={{ data_fim }}&ordenar={{ ordenar }}" 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>
                <div class="text-center text-muted small mt-2">
                    Página <strong>{{ condicionais.number }}</strong> de <strong>{{ condicionais.paginator.num_pages }}</strong> · {{ condicionais.paginator.count }} condicional(ais)
                </div>
            </nav>{% endif %}
        </div>
    </div>
</div>
{% endblock %}