{% extends "base.html" %}

{% block title %}Visualizar XML - NF-e {{ nota.numero }}/{{ nota.serie }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2><i class="fas fa-file-code"></i> XML da NF-e {{ nota.numero }}/{{ nota.serie }}</h2>
                <div class="d-flex gap-2">
                    <button id="btn-copiar-xml" type="button" class="btn btn-outline-primary">
                        <i class="fas fa-copy"></i> Copiar XML
                    </button>
                    <button type="button" class="btn btn-outline-info btn-validador" data-url="https://validador.nfe.tecnospeed.com.br/">
                        <i class="fas fa-external-link-alt"></i> Validador XML (Tecnospeed)
                    </button>
                    <button type="button" class="btn btn-outline-info btn-validador" data-url="https://www.sefaz.rs.gov.br/nfe/nfe-val.aspx">
                        <i class="fas fa-external-link-alt"></i> Validador XML (SEFAZ RS)
                    </button>
                    <a href="{{ url_for('fiscal_download_xml', nota_id=nota.id) }}" class="btn btn-success">
                        <i class="fas fa-download"></i> Download XML
                    </a>
                    <a href="{{ url_for('fiscal_notas') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Voltar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Informações da Nota -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Número/Série:</strong> {{ nota.numero }}/{{ nota.serie }}
                        </div>
                        <div class="col-md-3">
                            <strong>Data Emissão:</strong> {{ nota.data_emissao.strftime('%d/%m/%Y %H:%M') }}
                        </div>
                        <div class="col-md-3">
                            <strong>Valor Total:</strong> R$ {{ "%.2f"|format(nota.valor_total) }}
                        </div>
                        <div class="col-md-3">
                            <strong>Status:</strong>
                            {% if nota.status == 'autorizada' %}
                                <span class="badge bg-success">Autorizada</span>
                            {% elif nota.status == 'pronta_para_envio' %}
                                <span class="badge bg-info">Pronta para Envio</span>
                            {% elif nota.status == 'em_processamento_sefaz' %}
                                <span class="badge bg-warning">Processando</span>
                            {% elif nota.status == 'rejeitada' %}
                                <span class="badge bg-danger">Rejeitada</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ nota.status }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if nota.chave_acesso %}
                    <div class="row mt-2">
                        <div class="col-12">
                            <strong>Chave de Acesso:</strong> 
                            <code style="font-size: 1rem;">{{ nota.chave_acesso }}</code>
                        </div>
                    </div>
                    {% endif %}
                    {% if nota.protocolo %}
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <strong>Protocolo:</strong> {{ nota.protocolo }}
                        </div>
                        <div class="col-md-6">
                            <strong>Data Autorização:</strong> {{ nota.data_autorizacao.strftime('%d/%m/%Y %H:%M:%S') if nota.data_autorizacao else '-' }}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- XML Content -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Conteúdo do XML</h5>
                </div>
                <div class="card-body" style="background-color: #f8f9fa;">
                    <textarea id="xml-raw" class="d-none">{{ xml_content }}</textarea>
                    <pre style="max-height: 600px; overflow-y: auto; background-color: #ffffff; padding: 15px; border: 1px solid #dee2e6; border-radius: 4px;"><code class="language-xml">{{ xml_content }}</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Highlight.js para syntax highlighting -->
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/highlightjs/github.min.css') }}">
<script src="{{ url_for('static', filename='vendor/highlightjs/highlight.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/highlightjs/xml.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        hljs.highlightAll();

        const btnCopiar = document.getElementById('btn-copiar-xml');
        const xmlRaw = document.getElementById('xml-raw');

        async function copiarXml() {
            if (!xmlRaw) {
                return false;
            }
            try {
                await navigator.clipboard.writeText(xmlRaw.value);
                return true;
            } catch (e) {
                return false;
            }
        }

        if (btnCopiar && xmlRaw) {
            btnCopiar.addEventListener('click', async () => {
                const ok = await copiarXml();
                if (ok) {
                    btnCopiar.classList.remove('btn-outline-primary');
                    btnCopiar.classList.add('btn-success');
                    btnCopiar.innerHTML = '<i class="fas fa-check"></i> XML copiado';
                    setTimeout(() => {
                        btnCopiar.classList.remove('btn-success');
                        btnCopiar.classList.add('btn-outline-primary');
                        btnCopiar.innerHTML = '<i class="fas fa-copy"></i> Copiar XML';
                    }, 2000);
                } else {
                    alert('Não foi possível copiar o XML. Use o Download e cole no validador.');
                }
            });
        }

        document.querySelectorAll('.btn-validador').forEach((btn) => {
            btn.addEventListener('click', async () => {
                const url = btn.getAttribute('data-url');
                const ok = await copiarXml();
                if (!ok) {
                    alert('Não foi possível copiar o XML. Use o Download e cole no validador.');
                }
                if (url) {
                    window.open(url, '_blank', 'noopener');
                }
            });
        });
    });
</script>
{% endblock %}