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

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

{% block extra_css %}
<style>
.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; }

/* Cards de acesso coloridos */
.pacc { display: flex; }
.produto-access-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; padding: .8rem .6rem; border-radius: 14px;
    text-decoration: none; border: 1px solid transparent;
    transition: transform .15s, box-shadow .15s;
}
.produto-access-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.produto-access-card .pac-icon {
    display: inline-grid; place-items: center;
    width: 2.3rem; height: 2.3rem; border-radius: .7rem;
    background: rgba(255,255,255,.75); font-size: 1.2rem; margin-bottom: .25rem;
}
.produto-access-card .pac-label { font-weight: 700; font-size: .92rem; line-height: 1; }
.produto-access-card .pac-sub  { font-size: .7rem; opacity: .75; }

.t-categorias { background: #fff8e6; border-color: #ffe08a; color: #b26a00; }
.t-categorias .pac-icon { color: #b26a00; }
.t-marcas { background: #e0f7fa; border-color: #b2ebf2; color: #00695c; }
.t-marcas .pac-icon { color: #00695c; }
.t-tamanhos { background: #e4effc; border-color: #c3dcf6; color: #245e98; }
.t-tamanhos .pac-icon { color: #245e98; }
.t-cores { background: #f3e8ff; border-color: #e0c3fc; color: #6d28a4; }
.t-cores .pac-icon { color: #6d28a4; }
.t-novo { background: #e6f9f0; border-color: #b7e8cd; color: #1e7e34; }
.t-novo .pac-icon { color: #1e7e34; }

</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-box-seam"></i> Produtos</h2>
    <span class="badge bg-primary" style="font-size: .85rem;">{{ produtos.paginator.count }} total</span>
</div>
<div class="row g-2 mb-3">
    <div class="col-6 col-md-2 pacc">
        <a href="{% url 'lista_categorias' %}" class="produto-access-card t-categorias">
            <span class="pac-icon"><i class="bi bi-bookmark"></i></span>
            <span class="pac-label">Categorias</span>
            <span class="pac-sub">Gerenciar</span>
        </a>
    </div>
    <div class="col-6 col-md-2 pacc">
        <a href="{% url 'lista_marcas' %}" class="produto-access-card t-marcas">
            <span class="pac-icon"><i class="bi bi-award"></i></span>
            <span class="pac-label">Marcas</span>
            <span class="pac-sub">Gerenciar</span>
        </a>
    </div>
    <div class="col-6 col-md-2 pacc">
        <a href="{% url 'lista_tamanhos' %}" class="produto-access-card t-tamanhos">
            <span class="pac-icon"><i class="bi bi-rulers"></i></span>
            <span class="pac-label">Tamanhos</span>
            <span class="pac-sub">Gerenciar</span>
        </a>
    </div>
    <div class="col-6 col-md-2 pacc">
        <a href="{% url 'lista_cores' %}" class="produto-access-card t-cores">
            <span class="pac-icon"><i class="bi bi-palette"></i></span>
            <span class="pac-label">Cores</span>
            <span class="pac-sub">Gerenciar</span>
        </a>
    </div>
    <div class="col-6 col-md-2 pacc">
        <a href="{% url 'cadastrar_produto' %}" class="produto-access-card t-novo">
            <span class="pac-icon"><i class="bi bi-plus-circle"></i></span>
            <span class="pac-label">Novo Produto</span>
            <span class="pac-sub">Cadastrar</span>
        </a>
    </div>
</div>

<!-- Alertas de Estoque -->
{% if produtos_estoque_baixo %}
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <strong>Atenção!</strong> {{ produtos_estoque_baixo|length }} produto(s) com estoque baixo.
</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 Produtos</span>
        <span class="badge bg-primary">{{ produtos.paginator.count }} total</span>
    </div>
    <div class="card-body">
        <div class="row mb-3 g-2">
            <div class="col-12 col-md-4">
                <form method="get" class="d-flex gap-2">
                    <input type="text" name="busca" class="form-control"
                           placeholder="Buscar produto..."
                           value="{{ busca }}">
                    <input type="hidden" name="por_pagina" value="{{ por_pagina }}">
                    {% if categoria_selecionada %}
                    <input type="hidden" name="categoria" value="{{ categoria_selecionada }}">
                    {% endif %}
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                    {% if busca %}
                    <a href="{% url 'lista_produtos' %}?por_pagina={{ por_pagina }}{% if categoria_selecionada %}&categoria={{ categoria_selecionada }}{% endif %}" class="btn btn-secondary">
                        <i class="bi bi-x"></i>
                    </a>
                    {% endif %}
                </form>
            </div>
            <div class="col-12 col-md-3">
                <form method="get" id="form-categoria">
                    {% if busca %}
                    <input type="hidden" name="busca" value="{{ busca }}">
                    {% endif %}
                    <input type="hidden" name="por_pagina" value="{{ por_pagina }}">
                    <select name="categoria" class="form-select" onchange="this.form.submit()">
                        <option value="">Todas as categorias</option>
                        {% for categoria in categorias %}
                        <option value="{{ categoria.id }}" {% if categoria_selecionada == categoria.id|stringformat:"s" %}selected{% endif %}>{{ categoria.nome }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
            <div class="col-6 col-md-2">
                <select class="form-select" id="filtro-estoque">
                    <option value="">Todos</option>
                    <option value="baixo">Estoque Baixo</option>
                    <option value="ok">Estoque OK</option>
                    <option value="zero">Sem estoque</option>
                </select>
            </div>
            <div class="col-6 col-md-3">
                <form method="get" id="form-por-pagina">
                    {% if busca %}
                    <input type="hidden" name="busca" value="{{ busca }}">
                    {% endif %}
                    {% if categoria_selecionada %}
                    <input type="hidden" name="categoria" value="{{ categoria_selecionada }}">
                    {% 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>Foto</th>
                        <th>Código</th>
                        <th>Cód. Barras</th>
                        <th>Nome</th>
                        <th>Categoria</th>
                        <th>Marca</th>
                        <th>Fornecedor</th>
                        <th>Preço</th>
                        <th>Estoque físico na loja</th>
                        <th>Status</th>
                        <th class="text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for produto in produtos %}
                    <tr data-estoque-estado="{% if produto.estoque_atual <= 0 %}zero{% elif produto.estoque_baixo %}baixo{% else %}ok{% endif %}">
                        <td>
                            {% if produto.foto %}
                                <img src="{{ produto.foto.url }}" alt="{{ produto.nome }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 8px;">
                            {% else %}
                                <div style="width: 50px; height: 50px; background: #e9ecef; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="bi bi-image" style="font-size: 1.5rem; color: #6c757d;"></i>
                                </div>
                            {% endif %}
                        </td>
                        <td><strong>{{ produto.codigo }}</strong></td>
                        <td>{{ produto.codigo_barras|default:'-' }}</td>
                        <td>{{ produto.nome }}</td>
                        <td>{{ produto.categoria.nome|default:"-" }}</td>
                        <td>{{ produto.marca.nome|default:"-" }}</td>
                        <td>{{ produto.fornecedor.nome|default:"-" }}</td>
                        <td><strong>R$ {{ produto.preco_venda|floatformat:2 }}</strong></td>
                        <td>
                            {% if produto.estoque_baixo %}
                                <span class="badge bg-danger">{{ produto.estoque_atual }}</span>
                            {% else %}
                                <span class="badge bg-success">{{ produto.estoque_atual }}</span>
                            {% endif %}
                            {% if produto.quantidade_condicional %}
                                <div><span class="badge bg-info text-dark mt-1">Em condicional: {{ produto.quantidade_condicional }} unidades</span></div>
                            {% endif %}
                            <small class="d-block text-muted">Disponível para venda: {{ produto.estoque_atual }}</small>
                        </td>
                        <td>
                            {% if produto.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 'editar_produto' produto.pk %}" class="btn btn-sm btn-warning">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="11" class="text-center py-4">
                            <i class="bi bi-inbox" style="font-size: 3rem; color: #ccc;"></i>
                            <p class="text-muted">Nenhum produto cadastrado</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

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

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

<script>
document.getElementById('filtro-estoque').addEventListener('change', filtrarTabela);

function filtrarTabela() {
    const estoque = document.getElementById('filtro-estoque').value;

    document.querySelectorAll('tbody tr[data-estoque-estado]').forEach(linha => {
        const estado = linha.dataset.estoqueEstado;
        let mostrar = true;
        if (estoque === 'baixo') mostrar = estado === 'baixo';
        else if (estoque === 'ok') mostrar = estado === 'ok';
        else if (estoque === 'zero') mostrar = estado === 'zero';
        linha.style.display = mostrar ? '' : 'none';
    });
}
</script>
{% endblock %}