{% extends "base.html" %}

{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Modelos de Etiquetas{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="bi bi-tags"></i> Modelos de Etiquetas</h1>
        <div>
                <button type="button" class="btn btn-outline-secondary me-2" id="btn-importar-modelo-lista">
                    <i class="bi bi-upload"></i> Importar Modelo
                </button>
            <a href="{{ url_for('etiquetas_imprimir') }}" class="btn btn-success me-2">
                <i class="bi bi-printer"></i> Imprimir Etiquetas
            </a>
            <a href="{{ url_for('etiquetas_editor') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Novo Modelo
            </a>
        </div>
    </div>
</div>
<input type="file" id="arquivo-importacao-modelo-lista" accept=".json,.etiqueta.json" class="d-none">

<form method="GET" class="card mb-3">
    <div class="card-body row g-3 align-items-end">
        <div class="col-md-4">
            <label class="form-label">Empresa</label>
            <select name="empresa_id" class="form-select" onchange="this.form.submit()">
                {% for empresa in empresas_disponiveis %}
                <option value="{{ empresa.id }}" {% if empresa_id_selecionada == empresa.id %}selected{% endif %} title="{{ empresa_ui.titulo(empresa) }}">
                    {{ empresa_ui.nome(empresa) }}
                </option>
                {% endfor %}
            </select>
        </div>
    </div>
</form>

<!-- Cards de tipos -->
<div class="row mb-4">
    <div class="col-md-2">
        <div class="card bg-primary text-white text-center p-3">
            <i class="bi bi-box fs-2"></i>
            <div class="mt-2">Produto</div>
            <span class="badge bg-light text-primary mt-1">
                {{ modelos|selectattr('tipo', 'equalto', 'produto')|list|length }}
            </span>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-success text-white text-center p-3">
            <i class="bi bi-shop fs-2"></i>
            <div class="mt-2">Prateleira</div>
            <span class="badge bg-light text-success mt-1">
                {{ modelos|selectattr('tipo', 'equalto', 'prateleira')|list|length }}
            </span>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-info text-white text-center p-3">
            <i class="bi bi-cart fs-2"></i>
            <div class="mt-2">PDV</div>
            <span class="badge bg-light text-info mt-1">
                {{ modelos|selectattr('tipo', 'equalto', 'pdv')|list|length }}
            </span>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-warning text-dark text-center p-3">
            <i class="bi bi-truck fs-2"></i>
            <div class="mt-2">Expedição</div>
            <span class="badge bg-dark mt-1">
                {{ modelos|selectattr('tipo', 'equalto', 'expedicao')|list|length }}
            </span>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-danger text-white text-center p-3">
            <i class="bi bi-layers fs-2"></i>
            <div class="mt-2">Lote</div>
            <span class="badge bg-light text-danger mt-1">
                {{ modelos|selectattr('tipo', 'equalto', 'lote')|list|length }}
            </span>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card bg-secondary text-white text-center p-3">
            <i class="bi bi-grid fs-2"></i>
            <div class="mt-2">Total</div>
            <span class="badge bg-light text-secondary mt-1">{{ modelos|length }}</span>
        </div>
    </div>
</div>

<!-- Lista de modelos -->
<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <h5 class="mb-0">Seus Modelos</h5>
            </div>
            <div class="col-auto">
                <select class="form-select form-select-sm" id="filtro-tipo" style="width: 150px;">
                    <option value="">Todos os tipos</option>
                    <option value="produto">Produto</option>
                    <option value="prateleira">Prateleira</option>
                    <option value="pdv">PDV</option>
                    <option value="expedicao">Expedição</option>
                    <option value="lote">Lote</option>
                </select>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Nome</th>
                        <th>Tipo</th>
                        <th>Tamanho</th>
                        <th>Validações</th>
                        <th>Padrão</th>
                        <th style="width: 150px;">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for modelo in modelos %}
                    <tr data-tipo="{{ modelo.tipo }}">
                        <td>
                            <strong>{{ modelo.nome }}</strong>
                            {% if modelo.descricao %}
                            <br><small class="text-muted">{{ modelo.descricao }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {% if modelo.tipo == 'produto' %}
                            <span class="badge bg-primary">Produto</span>
                            {% elif modelo.tipo == 'prateleira' %}
                            <span class="badge bg-success">Prateleira</span>
                            {% elif modelo.tipo == 'pdv' %}
                            <span class="badge bg-info">PDV</span>
                            {% elif modelo.tipo == 'expedicao' %}
                            <span class="badge bg-warning text-dark">Expedição</span>
                            {% elif modelo.tipo == 'lote' %}
                            <span class="badge bg-danger">Lote</span>
                            {% else %}
                            <span class="badge bg-secondary">{{ modelo.tipo }}</span>
                            {% endif %}
                        </td>
                        <td>{{ modelo.tamanho_formatado }}</td>
                        <td>
                            {% if modelo.validar_gtin %}
                            <span class="badge bg-outline-primary" title="Valida GTIN"><i class="bi bi-upc"></i></span>
                            {% endif %}
                            {% if modelo.validar_preco %}
                            <span class="badge bg-outline-success" title="Exige preço"><i class="bi bi-currency-dollar"></i></span>
                            {% endif %}
                            {% if modelo.validar_validade %}
                            <span class="badge bg-outline-danger" title="Exige validade"><i class="bi bi-calendar"></i></span>
                            {% endif %}
                        </td>
                        <td>
                            {% if modelo.padrao %}
                            <span class="badge bg-success">Sim</span>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('etiquetas_editor', modelo_id=modelo.id) }}" 
                               class="btn btn-sm btn-outline-primary" title="Editar">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <button class="btn btn-sm btn-outline-success btn-usar-modelo" 
                                    data-id="{{ modelo.id }}" title="Usar para imprimir">
                                <i class="bi bi-printer"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary btn-duplicar" 
                                    data-id="{{ modelo.id }}" title="Duplicar">
                                <i class="bi bi-files"></i>
                            </button>
                            <a href="/api/etiquetas/modelo/{{ modelo.id }}/exportar" 
                               class="btn btn-sm btn-outline-dark" title="Exportar modelo">
                                <i class="bi bi-download"></i>
                            </a>
                            <button class="btn btn-sm btn-outline-danger btn-excluir" 
                                    data-id="{{ modelo.id }}" data-nome="{{ modelo.nome }}" title="Excluir">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1"></i>
                            <p class="mb-0">Nenhum modelo de etiqueta cadastrado</p>
                            <a href="{{ url_for('etiquetas_editor') }}" class="btn btn-primary mt-3">
                                <i class="bi bi-plus-circle"></i> Criar Primeiro Modelo
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Filtro por tipo
document.getElementById('filtro-tipo').addEventListener('change', function() {
    const tipo = this.value;
    document.querySelectorAll('tbody tr[data-tipo]').forEach(tr => {
        if (!tipo || tr.dataset.tipo === tipo) {
            tr.style.display = '';
        } else {
            tr.style.display = 'none';
        }
    });
});

// Usar modelo
document.querySelectorAll('.btn-usar-modelo').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.dataset.id;
        window.location.href = '{{ url_for("etiquetas_imprimir") }}?modelo=' + id;
    });
});

// Duplicar
document.querySelectorAll('.btn-duplicar').forEach(btn => {
    btn.addEventListener('click', function() {
        alert('A duplicação direta do modelo ainda não está disponível nesta tela. Abra o modelo no editor, ajuste o nome e salve como novo modelo.');
    });
});

const inputImportacaoLista = document.getElementById('arquivo-importacao-modelo-lista');
document.getElementById('btn-importar-modelo-lista')?.addEventListener('click', function() {
    inputImportacaoLista?.click();
});

inputImportacaoLista?.addEventListener('change', async function(e) {
    const arquivo = e.target.files?.[0];
    if (!arquivo) return;

    const formData = new FormData();
    formData.append('arquivo', arquivo);

    try {
        const response = await fetch('/api/etiquetas/modelo/importar', {
            method: 'POST',
            body: formData
        });
        const result = await response.json().catch(() => null);
        if (!response.ok || !result?.success) {
            throw new Error(result?.message || 'Falha ao importar modelo');
        }
        alert(result.message);
        window.location.reload();
    } catch (err) {
        alert('Erro ao importar: ' + err.message);
    } finally {
        e.target.value = '';
    }
});

// Excluir
document.querySelectorAll('.btn-excluir').forEach(btn => {
    btn.addEventListener('click', async function() {
        const id = this.dataset.id;
        const nome = this.dataset.nome;
        
        if (!confirm(`Excluir o modelo "${nome}"?`)) return;
        
        try {
            const response = await fetch(`/api/etiquetas/modelo/${id}/excluir`, {
                method: 'POST'
            });
            const result = await response.json();
            
            if (result.success) {
                this.closest('tr').remove();
            } else {
                alert('Erro: ' + result.message);
            }
        } catch (e) {
            alert('Erro ao excluir: ' + e.message);
        }
    });
});
</script>
{% endblock %}