{% extends 'base.html' %}
{% import 'macros/empresa.html' as empresa_ui %}
{% block title %}MDF-e #{{ '%09d'|format(mdfe.numero) }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-truck me-2"></i>
                MDF-e #{{ '%09d'|format(mdfe.numero) }} / Série {{ '%03d'|format(mdfe.serie) }}
            </h1>
            <p class="text-muted mb-0">{{ empresa_ui.nome(mdfe.empresa, 'N/A') }}</p>
        </div>
        <div class="d-flex gap-2">
            {% if mdfe.xml_autorizado or mdfe.xml_enviado %}
            <a href="{{ url_for('fiscal_mdfe_download_xml', mdfe_id=mdfe.id) }}" class="btn btn-outline-secondary">
                <i class="fas fa-file-code me-1"></i> Download XML
            </a>
            {% endif %}
            <a href="{{ url_for('fiscal_mdfe_lista') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Voltar
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Coluna Principal -->
        <div class="col-lg-8">
            <!-- Identificação -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Identificação</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-muted small">Número</label>
                            <div class="fw-bold">{{ '%09d'|format(mdfe.numero) }}</div>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label class="form-label text-muted small">Série</label>
                            <div class="fw-bold">{{ '%03d'|format(mdfe.serie) }}</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-muted small">Modal</label>
                            <div>
                                {% if mdfe.modal == 1 %}
                                    <span class="badge bg-primary">Rodoviário</span>
                                {% elif mdfe.modal == 2 %}
                                    <span class="badge bg-info">Aéreo</span>
                                {% elif mdfe.modal == 3 %}
                                    <span class="badge bg-secondary">Aquaviário</span>
                                {% elif mdfe.modal == 4 %}
                                    <span class="badge bg-dark">Ferroviário</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small">Tipo Emitente</label>
                            <div>
                                {% if mdfe.tipo_emitente == 1 %}
                                    Prestador Serviço Transporte
                                {% elif mdfe.tipo_emitente == 2 %}
                                    Transp. Carga Própria (TAC)
                                {% else %}
                                    Transp. Carga Própria
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-muted small">UF Início → Fim</label>
                            <div class="fw-bold">{{ mdfe.uf_inicio }} → {{ mdfe.uf_fim }}</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-muted small">Data Emissão</label>
                            <div>{{ mdfe.data_emissao.strftime('%d/%m/%Y %H:%M') if mdfe.data_emissao else '-' }}</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-muted small">Data Autorização</label>
                            <div>{{ mdfe.data_autorizacao.strftime('%d/%m/%Y %H:%M') if mdfe.data_autorizacao else '-' }}</div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label text-muted small">Data Encerramento</label>
                            <div>{{ mdfe.data_encerramento.strftime('%d/%m/%Y %H:%M') if mdfe.data_encerramento else '-' }}</div>
                        </div>
                    </div>
                    {% if mdfe.chave %}
                    <div class="row">
                        <div class="col-12">
                            <label class="form-label text-muted small">Chave de Acesso</label>
                            <code class="d-block p-2 bg-light rounded" style="word-break: break-all;">
                                {{ mdfe.chave }}
                            </code>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Documentos Vinculados -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-file-invoice me-2"></i>Documentos Vinculados
                        <span class="badge bg-secondary ms-2">
                            {{ (mdfe.qtd_nfe or 0) + (mdfe.qtd_cte or 0) }}
                        </span>
                    </h5>
                </div>
                <div class="card-body">
                    {% if mdfe.municipios_descarga %}
                        {% for mun in mdfe.municipios_descarga %}
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2">
                                <i class="fas fa-map-marker-alt text-danger me-1"></i>
                                {{ mun.xmun }} 
                                <small class="text-muted">(IBGE: {{ mun.cmun }})</small>
                            </h6>
                            <div class="table-responsive">
                                <table class="table table-sm table-striped mb-0">
                                    <thead>
                                        <tr>
                                            <th width="80">Tipo</th>
                                            <th>Chave de Acesso</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for doc in mun.documentos %}
                                        <tr>
                                            <td>
                                                {% if doc.tipo_documento == 'NFE' %}
                                                    <span class="badge bg-success">NF-e</span>
                                                {% else %}
                                                    <span class="badge bg-primary">CT-e</span>
                                                {% endif %}
                                            </td>
                                            <td><code class="small">{{ doc.chave_acesso }}</code></td>
                                        </tr>
                                        {% else %}
                                        <tr>
                                            <td colspan="2" class="text-muted">Nenhum documento</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                            Nenhum documento vinculado
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Veículos -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-truck-front me-2"></i>Veículos</h5>
                </div>
                <div class="card-body">
                    {% if mdfe.veiculos %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Tipo</th>
                                    <th>Placa</th>
                                    <th>RENAVAM</th>
                                    <th>UF</th>
                                    <th>Tara</th>
                                    <th>Capacidade</th>
                                    <th>Rodado</th>
                                    <th>Carroceria</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in mdfe.veiculos %}
                                <tr>
                                    <td>
                                        {% if v.tipo == 'TRACAO' %}
                                            <span class="badge bg-primary">Tração</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Reboque</span>
                                        {% endif %}
                                    </td>
                                    <td><strong>{{ v.placa }}</strong></td>
                                    <td>{{ v.renavam or '-' }}</td>
                                    <td>{{ v.uf }}</td>
                                    <td>{{ "%.0f"|format(v.tara or 0) }} kg</td>
                                    <td>{{ "%.0f"|format(v.capacidade_kg or 0) }} kg</td>
                                    <td>{{ v.tp_rodado }}</td>
                                    <td>{{ v.tp_carroceria }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <div class="text-center text-muted py-3">Nenhum veículo cadastrado</div>
                    {% endif %}
                </div>
            </div>

            <!-- Condutores -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-id-card me-2"></i>Condutores</h5>
                </div>
                <div class="card-body">
                    {% if mdfe.condutores %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>CPF</th>
                                    <th>Nome</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for c in mdfe.condutores %}
                                <tr>
                                    <td><code>{{ c.cpf }}</code></td>
                                    <td>{{ c.nome }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <div class="text-center text-muted py-3">Nenhum condutor cadastrado</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Coluna Lateral -->
        <div class="col-lg-4">
            <!-- Status -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-flag me-2"></i>Status</h5>
                </div>
                <div class="card-body text-center">
                    {% if mdfe.status == 'AUTORIZADO' %}
                        <span class="badge bg-success fs-4 px-4 py-2">AUTORIZADO</span>
                    {% elif mdfe.status == 'ENCERRADO' %}
                        <span class="badge bg-info fs-4 px-4 py-2">ENCERRADO</span>
                    {% elif mdfe.status == 'CANCELADO' %}
                        <span class="badge bg-danger fs-4 px-4 py-2">CANCELADO</span>
                    {% elif mdfe.status == 'REJEITADO' %}
                        <span class="badge bg-warning text-dark fs-4 px-4 py-2">REJEITADO</span>
                    {% else %}
                        <span class="badge bg-secondary fs-4 px-4 py-2">DIGITADO</span>
                    {% endif %}
                    
                    {% if mdfe.protocolo %}
                    <div class="mt-3">
                        <label class="form-label text-muted small">Protocolo</label>
                        <div><code class="fs-6">{{ mdfe.protocolo }}</code></div>
                    </div>
                    {% endif %}
                    
                    {% if mdfe.motivo_rejeicao %}
                    <div class="alert alert-warning mt-3 text-start">
                        <strong>Motivo:</strong> {{ mdfe.motivo_rejeicao }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Totalizadores -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-calculator me-2"></i>Totalizadores</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="border rounded p-3 text-center">
                                <div class="fs-3 fw-bold text-success">{{ mdfe.qtd_nfe or 0 }}</div>
                                <small class="text-muted">NF-e</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-3 text-center">
                                <div class="fs-3 fw-bold text-primary">{{ mdfe.qtd_cte or 0 }}</div>
                                <small class="text-muted">CT-e</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-3 text-center">
                                <div class="fs-5 fw-bold">R$ {{ "%.2f"|format(mdfe.valor_carga or 0) }}</div>
                                <small class="text-muted">Valor Total</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-3 text-center">
                                <div class="fs-5 fw-bold">{{ "%.2f"|format(mdfe.peso_bruto or 0) }} kg</div>
                                <small class="text-muted">Peso Total</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ações -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-cogs me-2"></i>Ações</h5>
                </div>
                <div class="card-body d-grid gap-2">
                    {% if mdfe.status in ['DIGITADO', 'REJEITADO'] %}
                    <a href="{{ url_for('fiscal_mdfe_editar', mdfe_id=mdfe.id) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-1"></i> Editar
                    </a>
                    <button type="button" class="btn btn-success" id="btnTransmitir">
                        <i class="fas fa-paper-plane me-1"></i> Transmitir
                    </button>
                    {% endif %}
                    
                    {% if mdfe.status == 'AUTORIZADO' %}
                    <button type="button" class="btn btn-info" id="btnEncerrar">
                        <i class="fas fa-flag-checkered me-1"></i> Encerrar
                    </button>
                    <button type="button" class="btn btn-danger" id="btnCancelar">
                        <i class="fas fa-ban me-1"></i> Cancelar
                    </button>
                    {% endif %}
                    
                    {% if mdfe.xml_autorizado or mdfe.xml_enviado %}
                    <a href="{{ url_for('fiscal_mdfe_download_xml', mdfe_id=mdfe.id) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-file-code me-1"></i> Download XML
                    </a>
                    {% endif %}
                    
                    {% if mdfe.status in ['AUTORIZADO', 'ENCERRADO'] %}
                    <a href="{{ url_for('fiscal_mdfe_imprimir', mdfe_id=mdfe.id) }}" class="btn btn-primary" target="_blank">
                        <i class="fas fa-print me-1"></i> Imprimir DAMDFE
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Cancelamento -->
<div class="modal fade cape-modal-standard" id="modalCancelar" 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-ban me-2"></i>Cancelar MDF-e</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formCancelar">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Justificativa (mínimo 15 caracteres)</label>
                        <textarea id="justificativa" class="form-control" rows="3" 
                                  minlength="15" maxlength="255" required></textarea>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        O cancelamento é irreversível. O prazo é de 24h após a autorização.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-ban me-1"></i> Confirmar Cancelamento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('=== MDF-e Visualizar JS Carregado ===');
    
    // Transmitir
    const btnTransmitir = document.getElementById('btnTransmitir');
    console.log('Botão Transmitir:', btnTransmitir ? 'encontrado' : 'NÃO encontrado');
    
    if (btnTransmitir) {
        btnTransmitir.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('Clicou em Transmitir');
            
            if (!confirm('Transmitir MDF-e para SEFAZ?')) return;
            
            const btn = this;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Transmitindo...';
            
            console.log('Enviando requisição para /fiscal/mdfe/{{ mdfe.id }}/transmitir');
            
            fetch('/fiscal/mdfe/{{ mdfe.id }}/transmitir', { method: 'POST' })
                .then(r => {
                    console.log('Status:', r.status);
                    return r.text().then(text => {
                        console.log('Resposta:', text);
                        try {
                            return JSON.parse(text);
                        } catch(e) {
                            throw new Error('Resposta não é JSON: ' + text.substring(0, 200));
                        }
                    });
                })
                .then(data => {
                    if (data.sucesso) {
                        alert('MDF-e autorizado!\nProtocolo: ' + (data.protocolo || 'N/A'));
                        location.reload();
                    } else {
                        alert('Erro: ' + data.mensagem);
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Transmitir';
                    }
                })
                .catch(err => {
                    console.error('Erro:', err);
                    alert('Erro: ' + err.message);
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Transmitir';
                });
        });
    }
    
    // Encerrar
    const btnEncerrar = document.getElementById('btnEncerrar');
    if (btnEncerrar) {
        btnEncerrar.addEventListener('click', function() {
            if (!confirm('Encerrar MDF-e? Indica fim da viagem.')) return;
            
            this.disabled = true;
            fetch('/fiscal/mdfe/{{ mdfe.id }}/encerrar', { method: 'POST' })
                .then(r => r.json())
                .then(data => {
                    if (data.sucesso) {
                        alert('MDF-e encerrado!');
                        location.reload();
                    } else {
                        alert('Erro: ' + data.mensagem);
                        this.disabled = false;
                    }
                });
        });
    }
    
    // Cancelar - abrir modal
    const btnCancelar = document.getElementById('btnCancelar');
    if (btnCancelar) {
        btnCancelar.addEventListener('click', function() {
            document.getElementById('justificativa').value = '';
            new bootstrap.Modal(document.getElementById('modalCancelar')).show();
        });
    }
    
    // Processar cancelamento
    const formCancelar = document.getElementById('formCancelar');
    if (formCancelar) {
        formCancelar.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const justificativa = document.getElementById('justificativa').value.trim();
            if (justificativa.length < 15) {
                alert('Justificativa deve ter no mínimo 15 caracteres');
                return;
            }
            
            const formData = new FormData();
            formData.append('justificativa', justificativa);
            
            fetch('/fiscal/mdfe/{{ mdfe.id }}/cancelar', {
                method: 'POST',
                body: formData
            })
            .then(r => r.json())
            .then(data => {
                if (data.sucesso) {
                    alert('MDF-e cancelado!');
                    location.reload();
                } else {
                    alert('Erro: ' + data.mensagem);
                }
            });
        });
    }
});
</script>
{% endblock %}