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

{% block title %}Natureza de Operação{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2><i class="fas fa-tag me-2"></i>Natureza de Operação</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Início</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('fiscal_configuracao') }}">Fiscal</a></li>
                    <li class="breadcrumb-item active">Natureza de Operação</li>
                </ol>
            </nav>
        </div>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Descrição</label>
                    <input type="text" name="descricao" class="form-control" 
                           value="{{ request.args.get('descricao', '') }}" placeholder="Buscar...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tipo</label>
                    <select name="tipo_operacao" class="form-select">
                        <option value="">Todos</option>
                        <option value="entrada" {{ 'selected' if request.args.get('tipo_operacao') == 'entrada' }}>Entrada</option>
                        <option value="saida" {{ 'selected' if request.args.get('tipo_operacao') == 'saida' }}>Saída</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Documento</label>
                    <select name="tipo_documento" class="form-select">
                        <option value="">Todos</option>
                        <option value="NFE" {{ 'selected' if request.args.get('tipo_documento') == 'NFE' }}>NF-e</option>
                        <option value="NFCE" {{ 'selected' if request.args.get('tipo_documento') == 'NFCE' }}>NFC-e</option>
                    </select>
                </div>
                {% if empresas|length > 1 %}
                <div class="col-md-2">
                    <label class="form-label">Empresa</label>
                    <select name="empresa_id" class="form-select">
                        <option value="">Todas</option>
                        {% for emp in empresas %}
                        <option value="{{ emp.id }}" {{ 'selected' if request.args.get('empresa_id')|int == emp.id }}>
                            {{ empresa_ui.nome_truncado(emp, 30) }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-search"></i> Filtrar
                    </button>
                    <a href="{{ url_for('fiscal_natureza_operacao') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-eraser"></i> Limpar
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Ações -->
    <div class="d-flex justify-content-between mb-3">
        <div>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalNatureza">
                <i class="fas fa-plus"></i> Nova Natureza
            </button>
        </div>
        <div>
            <span class="badge bg-primary fs-6">{{ naturezas|length }} registros</span>
        </div>
    </div>

    <!-- Tabela -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-primary">
                        <tr>
                            <th width="100">Código</th>
                            <th>Descrição (natOp)</th>
                            <th width="80">Tipo</th>
                            <th width="80">Doc.</th>
                            <th width="100">CFOP</th>
                            <th width="100">Finalidade</th>
                            <th width="80" class="text-center">ICMS</th>
                            <th width="80" class="text-center">Estoque</th>
                            <th width="80" class="text-center">Financ.</th>
                            <th width="80" class="text-center">Status</th>
                            <th width="100" class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for nat in naturezas %}
                        <tr>
                            <td><strong>{{ nat.codigo or '-' }}</strong></td>
                            <td>{{ nat.descricao }}</td>
                            <td>
                                {% if nat.tipo_operacao == 'entrada' %}
                                    <span class="badge bg-info">Entrada</span>
                                {% else %}
                                    <span class="badge bg-warning text-dark">Saída</span>
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ nat.tipo_documento or 'NFE' }}</span>
                            </td>
                            <td>
                                {% if nat.cfop %}
                                    <span class="badge bg-primary">{{ nat.cfop.codigo }}</span>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                {% set finalidades = {'1': 'Normal', '2': 'Complement.', '3': 'Ajuste', '4': 'Devolução'} %}
                                {{ finalidades.get(nat.finalidade, 'Normal') }}
                            </td>
                            <td class="text-center">
                                {% if nat.destaca_icms %}
                                    <i class="fas fa-check text-success"></i>
                                {% else %}
                                    <i class="fas fa-times text-muted"></i>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if nat.movimenta_estoque %}
                                    <i class="fas fa-check text-success"></i>
                                {% else %}
                                    <i class="fas fa-times text-muted"></i>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if nat.gera_financeiro %}
                                    <i class="fas fa-check text-success"></i>
                                {% else %}
                                    <i class="fas fa-times text-muted"></i>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if nat.ativo %}
                                    <span class="badge bg-success">Ativo</span>
                                {% else %}
                                    <span class="badge bg-secondary">Inativo</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-outline-primary" 
                                        onclick="editarNatureza({{ nat.id }})"
                                        title="Editar">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" 
                                        onclick="copiarNatureza({{ nat.id }})"
                                        title="Copiar para outras empresas">
                                    <i class="fas fa-copy"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" 
                                        onclick="confirmarExclusao({{ nat.id }}, '{{ nat.descricao }}')"
                                        title="Excluir">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="11" class="text-center py-4 text-muted">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                Nenhuma natureza de operação cadastrada.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Cadastro/Edição -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalNatureza" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="formNatureza" method="POST">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-tag me-2"></i>
                        <span id="modalTitulo">Nova Natureza de Operação</span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="natureza_id" id="natureza_id">
                    
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Código Interno</label>
                            <input type="text" name="codigo" id="codigo" class="form-control" 
                                   maxlength="20" placeholder="Ex: VENDA">
                        </div>
                        
                        <div class="col-md-9">
                            <label class="form-label">Descrição (natOp do XML) *</label>
                            <input type="text" name="descricao" id="descricao" class="form-control" 
                                   required maxlength="60" placeholder="Ex: Venda de mercadoria">
                            <small class="text-muted">Máximo 60 caracteres (campo natOp da NF-e)</small>
                        </div>
                        
                        <div class="col-md-4">
                            <label class="form-label">Tipo de Operação *</label>
                            <select name="tipo_operacao" id="tipo_operacao" class="form-select" required>
                                <option value="">Selecione...</option>
                                <option value="entrada">Entrada</option>
                                <option value="saida">Saída</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4">
                            <label class="form-label">Tipo Movimento</label>
                            <select name="tipo_movimento" id="tipo_movimento" class="form-select">
                                <option value="">Selecione...</option>
                                <option value="venda">Venda</option>
                                <option value="compra">Compra</option>
                                <option value="devolucao">Devolução</option>
                                <option value="remessa">Remessa</option>
                                <option value="retorno">Retorno</option>
                                <option value="transferencia">Transferência</option>
                                <option value="bonificacao">Bonificação</option>
                                <option value="ajuste">Ajuste de Inventário</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4">
                            <label class="form-label">Tipo de Documento</label>
                            <select name="tipo_documento" id="tipo_documento" class="form-select">
                                <option value="NFE">NF-e (modelo 55)</option>
                                <option value="NFCE">NFC-e (modelo 65)</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4">
                            <label class="form-label">Finalidade (finNFe)</label>
                            <select name="finalidade" id="finalidade" class="form-select">
                                <option value="1">1 - Normal</option>
                                <option value="2">2 - Complementar</option>
                                <option value="3">3 - Ajuste</option>
                                <option value="4">4 - Devolução</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4">
                            <label class="form-label">CFOP Padrão</label>
                            <select name="cfop_id" id="cfop_id" class="form-select">
                                <option value="">Selecione...</option>
                                {% for cfop in cfops %}
                                <option value="{{ cfop.id }}">{{ cfop.codigo }} - {{ cfop.descricao_resumida or cfop.descricao[:40] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        {% if empresas|length > 1 %}
                        <div class="col-md-8">
                            <label class="form-label">Empresa</label>
                            <select name="empresa_id" id="empresa_id" class="form-select">
                                <option value="">Todas as empresas (global)</option>
                                {% for emp in empresas %}
                                <option value="{{ emp.id }}">{{ empresa_ui.nome(emp) }}</option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">Deixe vazio para disponibilizar em todas as empresas</small>
                        </div>
                        {% endif %}
                        
                        <div class="col-12">
                            <hr>
                            <h6><i class="fas fa-cogs me-2"></i>Configurações da Operação</h6>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="destaca_icms" 
                                       id="destaca_icms" checked>
                                <label class="form-check-label" for="destaca_icms">
                                    Destaca ICMS
                                </label>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="movimenta_estoque" 
                                       id="movimenta_estoque" checked>
                                <label class="form-check-label" for="movimenta_estoque">
                                    Movimenta Estoque
                                </label>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="gera_financeiro" 
                                       id="gera_financeiro">
                                <label class="form-check-label" for="gera_financeiro">
                                    Gera Financeiro
                                </label>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="gera_imposto" 
                                       id="gera_imposto">
                                <label class="form-check-label" for="gera_imposto">
                                    Calcula Impostos
                                </label>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="gera_receita" 
                                       id="gera_receita">
                                <label class="form-check-label" for="gera_receita">
                                    Gera Receita Contábil
                                </label>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="gera_cmv" 
                                       id="gera_cmv">
                                <label class="form-check-label" for="gera_cmv">
                                    Gera CMV Automático
                                </label>
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="ativo" 
                                       id="ativo" checked>
                                <label class="form-check-label" for="ativo">
                                    Natureza Ativa
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Salvar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Copiar para Empresas -->
<div class="modal fade cape-modal-standard" id="modalCopiar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="formCopiar" method="POST">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-copy me-2"></i>Copiar Natureza</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="natureza_origem_id" id="natureza_origem_id">
                    <p>Selecione as empresas para as quais deseja copiar esta natureza de operação:</p>
                    
                    <div id="listaEmpresas">
                        {% for emp in empresas %}
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="empresas[]" 
                                   value="{{ emp.id }}" id="emp_{{ emp.id }}">
                            <label class="form-check-label" for="emp_{{ emp.id }}">
                                {{ empresa_ui.nome(emp) }}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-copy"></i> Copiar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Confirmar Exclusão -->
<div class="modal fade cape-modal-standard" id="modalExcluir" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Confirmar Exclusão</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Deseja realmente excluir a natureza de operação <strong id="naturezaExcluir"></strong>?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="formExcluir" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash"></i> Excluir
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function editarNatureza(id) {
    fetch(`/fiscal/natureza-operacao/${id}/json`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const nat = data.natureza;
                document.getElementById('modalTitulo').textContent = 'Editar Natureza de Operação';
                document.getElementById('natureza_id').value = nat.id;
                document.getElementById('codigo').value = nat.codigo || '';
                document.getElementById('descricao').value = nat.descricao;
                document.getElementById('tipo_operacao').value = nat.tipo_operacao || '';
                document.getElementById('tipo_documento').value = nat.tipo_documento || 'NFE';
                document.getElementById('finalidade').value = nat.finalidade || '1';
                document.getElementById('cfop_id').value = nat.cfop_id || '';
                if (document.getElementById('empresa_id')) {
                    document.getElementById('empresa_id').value = '';
                }
                if (document.getElementById('tipo_movimento')) {
                    document.getElementById('tipo_movimento').value = nat.tipo_movimento || '';
                }
                document.getElementById('destaca_icms').checked = nat.destaca_icms;
                document.getElementById('movimenta_estoque').checked = nat.movimenta_estoque;
                document.getElementById('gera_financeiro').checked = nat.gera_financeiro;
                document.getElementById('gera_imposto').checked = nat.gera_imposto;
                document.getElementById('gera_receita').checked = nat.gera_receita;
                document.getElementById('gera_cmv').checked = nat.gera_cmv;
                document.getElementById('ativo').checked = nat.ativo;
                
                new bootstrap.Modal(document.getElementById('modalNatureza')).show();
            }
        });
}

function copiarNatureza(id) {
    document.getElementById('natureza_origem_id').value = id;
    document.getElementById('formCopiar').action = `/fiscal/natureza-operacao/${id}/copiar`;
    new bootstrap.Modal(document.getElementById('modalCopiar')).show();
}

function confirmarExclusao(id, descricao) {
    document.getElementById('naturezaExcluir').textContent = descricao;
    document.getElementById('formExcluir').action = `/fiscal/natureza-operacao/${id}/excluir`;
    new bootstrap.Modal(document.getElementById('modalExcluir')).show();
}

document.getElementById('modalNatureza').addEventListener('show.bs.modal', function (event) {
    if (!event.relatedTarget || !event.relatedTarget.classList.contains('btn-outline-primary')) {
        document.getElementById('modalTitulo').textContent = 'Nova Natureza de Operação';
        document.getElementById('formNatureza').reset();
        document.getElementById('natureza_id').value = '';
        document.getElementById('destaca_icms').checked = true;
        document.getElementById('movimenta_estoque').checked = true;
        document.getElementById('ativo').checked = true;
    }
});
</script>
{% endblock %}