{% extends 'base.html' %}
{% import 'macros/empresa.html' as empresa_ui %}
{% block title %}{% if modo == 'novo' %}Novo MDF-e{% else %}Editar MDF-e #{{ mdfe.numero }}{% endif %}{% 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>
                {% if modo == 'novo' %}Novo MDF-e{% else %}Editar MDF-e #{{ '%09d'|format(mdfe.numero) }}{% endif %}
            </h1>
            <p class="text-muted mb-0">
                Manifesto Eletrônico de Documentos Fiscais
                <span class="badge bg-secondary ms-2">Layout 3.00</span>
                <span class="badge bg-info ms-1">MOC 3.00b</span>
            </p>
        </div>
        <div>
            <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>

    <form method="POST" id="formMDFe">
        <div class="row">
            <!-- Coluna Principal -->
            <div class="col-lg-8">
                <!-- Dados Básicos -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Dados Básicos</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Empresa Emitente <span class="text-danger">*</span></label>
                                <select name="empresa_id" class="form-select" required 
                                        {% if modo == 'editar' %}disabled{% endif %}>
                                    <option value="">Selecione...</option>
                                    {% for empresa in empresas %}
                                    <option value="{{ empresa.id }}" 
                                            {% if mdfe and mdfe.empresa_id == empresa.id %}selected{% endif %}>
                                        {{ empresa_ui.nome(empresa) }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Modal</label>
                                <select name="modal" class="form-select" id="selectModal">
                                    <option value="1" {% if mdfe and mdfe.modal|string == '1' %}selected{% endif %}>1 - Rodoviário</option>
                                    <option value="2" {% if mdfe and mdfe.modal|string == '2' %}selected{% endif %}>2 - Aéreo</option>
                                    <option value="3" {% if mdfe and mdfe.modal|string == '3' %}selected{% endif %}>3 - Aquaviário</option>
                                    <option value="4" {% if mdfe and mdfe.modal|string == '4' %}selected{% endif %}>4 - Ferroviário</option>
                                </select>
                                <small class="text-muted">ID: A03 (modal)</small>
                                <div id="helpModal" class="form-text text-info" style="display:none;"></div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tipo Emitente 
                                    <i class="fas fa-question-circle text-info" data-bs-toggle="tooltip" 
                                       title="Define quem está emitindo o MDF-e e sua relação com a carga"></i>
                                </label>
                                <select name="tipo_emitente" class="form-select" id="selectTipoEmitente">
                                    <option value="1" {% if mdfe and mdfe.tipo_emitente|string == '1' %}selected{% endif %}>1 - Prestador Serv. Transp.</option>
                                    <option value="2" {% if mdfe and mdfe.tipo_emitente|string == '2' %}selected{% endif %}>2 - TAC Carga Própria</option>
                                    <option value="3" {% if mdfe and mdfe.tipo_emitente|string == '3' %}selected{% endif %}>3 - Carga Própria</option>
                                </select>
                                <small class="text-muted">ID: B02 (tpEmit)</small>
                                <div id="helpTipoEmitente" class="form-text text-info" style="display:none;"></div>
                            </div>
                        </div>
                        <div class="row g-3 mt-2">
                            <div class="col-md-2">
                                <label class="form-label">UF Início <span class="text-danger">*</span></label>
                                <select name="uf_ini" class="form-select" required>
                                    <option value="">UF</option>
                                    {% set ufs = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'] %}
                                    {% for uf in ufs %}
                                    <option value="{{ uf }}" {% if mdfe and mdfe.uf_inicio == uf %}selected{% endif %}>{{ uf }}</option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">ID: B03 (UFIni)</small>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">UF Fim <span class="text-danger">*</span></label>
                                <select name="uf_fim" class="form-select" required>
                                    <option value="">UF</option>
                                    {% for uf in ufs %}
                                    <option value="{{ uf }}" {% if mdfe and mdfe.uf_fim == uf %}selected{% endif %}>{{ uf }}</option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">ID: B04 (UFFim)</small>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tipo Transportador 
                                    <i class="fas fa-question-circle text-info" data-bs-toggle="tooltip" 
                                       title="Classificação do transportador conforme ANTT"></i>
                                </label>
                                <select name="tipo_transportador" class="form-select" id="selectTipoTransp">
                                    <option value="1" {% if mdfe and mdfe.tipo_transportador|string == '1' %}selected{% endif %}>1 - ETC</option>
                                    <option value="2" {% if mdfe and mdfe.tipo_transportador|string == '2' %}selected{% endif %}>2 - TAC</option>
                                    <option value="3" {% if mdfe and mdfe.tipo_transportador|string == '3' %}selected{% endif %}>3 - CTC</option>
                                </select>
                                <small class="text-muted">ID: B05 (tpTransp)</small>
                                <div id="helpTipoTransp" class="form-text text-info" style="display:none;"></div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Cód. Município Carregamento</label>
                                <input type="text" name="cep_carrega" class="form-control" 
                                       value="{{ mdfe.cmun_carregamento if mdfe else '' }}" maxlength="7"
                                       placeholder="0000000">
                                <small class="text-muted">ID: D02 (cMunCarrega) - IBGE 7 dígitos</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Veículo de Tração (apenas no modo novo) -->
                {% if modo == 'novo' %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-truck-front me-2"></i>Veículo de Tração <small class="text-muted">(Grupo G - veicTracao)</small></h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label">Placa <span class="text-danger">*</span></label>
                                <input type="text" name="placa_veiculo" class="form-control text-uppercase" 
                                       required maxlength="7" placeholder="ABC1D23">
                                <small class="text-muted">ID: G02 (placa)</small>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">RENAVAM</label>
                                <input type="text" name="renavam" class="form-control" maxlength="11">
                                <small class="text-muted">ID: G03 (RENAVAM)</small>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Tara (kg)</label>
                                <input type="number" name="tara" class="form-control" step="0.01" min="0">
                                <small class="text-muted">ID: G04 (tara)</small>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Capac. Kg</label>
                                <input type="number" name="capacidade_kg" class="form-control" step="0.01" min="0">
                                <small class="text-muted">ID: G05 (capKG)</small>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tipo Rodado</label>
                                <select name="tipo_rodado" class="form-select">
                                    <option value="01">01 - Truck</option>
                                    <option value="02" selected>02 - Toco</option>
                                    <option value="03">03 - Cavalo Mecânico</option>
                                    <option value="04">04 - VAN</option>
                                    <option value="05">05 - Utilitário</option>
                                    <option value="06">06 - Outros</option>
                                </select>
                                <small class="text-muted">ID: G07 (tpRod)</small>
                            </div>
                        </div>
                        <div class="row g-3 mt-2">
                            <div class="col-md-3">
                                <label class="form-label">Tipo Carroceria</label>
                                <select name="tipo_carroceria" class="form-select">
                                    <option value="00">00 - Não Aplicável</option>
                                    <option value="01">01 - Aberta</option>
                                    <option value="02" selected>02 - Fechada/Baú</option>
                                    <option value="03">03 - Granelera</option>
                                    <option value="04">04 - Porta Container</option>
                                    <option value="05">05 - Sider</option>
                                </select>
                                <small class="text-muted">ID: G08 (tpCar)</small>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">UF Veículo</label>
                                <select name="uf_veiculo" class="form-select">
                                    <option value="">UF Inicial</option>
                                    {% for uf in ufs %}
                                    <option value="{{ uf }}">{{ uf }}</option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">ID: G09 (UF)</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Condutor/Motorista (apenas no modo novo) -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-id-card me-2"></i>Condutor / Motorista <small class="text-muted">(Grupo G - condutor)</small></h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">CPF <span class="text-danger">*</span></label>
                                <input type="text" name="cpf_motorista" class="form-control" 
                                       required maxlength="14" placeholder="000.000.000-00">
                                <small class="text-muted">ID: G20 (CPF)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nome <span class="text-danger">*</span></label>
                                <input type="text" name="nome_motorista" class="form-control" 
                                       required maxlength="60" placeholder="Nome completo do motorista">
                                <small class="text-muted">ID: G21 (xNome)</small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Totalizadores da Carga -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-weight-hanging me-2"></i>Totalizadores da Carga <small class="text-muted">(Grupo W - tot)</small></h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Valor Total da Carga <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" name="valor_carga" class="form-control" 
                                           value="{{ mdfe.valor_carga or '' }}" step="0.01" min="0" required
                                           placeholder="0.00">
                                </div>
                                <small class="text-muted">ID: W04 (vCarga) - Obrigatório</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Peso Bruto Total (kg) <span class="text-danger">*</span></label>
                                <input type="number" name="peso_bruto" class="form-control" 
                                       value="{{ mdfe.peso_bruto or '' }}" step="0.0001" min="0" required
                                       placeholder="0.0000">
                                <small class="text-muted">ID: W03 (qCarga) - Obrigatório</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Unidade de Carga</label>
                                <select name="cod_unidade_carga" class="form-select">
                                    <option value="">Selecione...</option>
                                    <option value="1" {% if mdfe and mdfe.cod_unidade_carga == '1' %}selected{% endif %}>1 - KG</option>
                                    <option value="2" {% if mdfe and mdfe.cod_unidade_carga == '2' %}selected{% endif %}>2 - TON</option>
                                </select>
                                <small class="text-muted">ID: W02 (cUnid)</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Documentos Vinculados (apenas no modo editar) -->
                {% if modo == 'editar' %}
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-file-invoice me-2"></i>Documentos Vinculados <small class="text-muted">(Grupo E - infDoc)</small></h5>
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddDoc">
                            <i class="fas fa-plus me-1"></i> Adicionar Documento
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="listaDocumentos">
                            {% if mdfe.municipios_descarga %}
                                {% for mun in mdfe.municipios_descarga %}
                                    <div class="mb-3" data-municipio="{{ mun.cmun }}">
                                        <h6 class="text-muted">
                                            <i class="fas fa-map-marker-alt me-1"></i>
                                            {{ mun.xmun }} ({{ mun.cmun }})
                                        </h6>
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Tipo</th>
                                                    <th>Chave de Acesso</th>
                                                    <th width="60">Ação</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for doc in mun.documentos %}
                                                <tr>
                                                    <td><span class="badge bg-secondary">{{ doc.tipo_documento }}</span></td>
                                                    <td><code>{{ doc.chave_acesso }}</code></td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-outline-danger btn-remover-doc"
                                                                data-doc-id="{{ doc.id }}">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div id="semDocumentos" class="text-center text-muted py-4">
                                    <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                    Nenhum documento vinculado. Adicione NF-e ou CT-e ao manifesto.
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Veículos e Condutores -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="fas fa-truck-front me-2"></i>Veículos <small class="text-muted">(Grupo G)</small></h5>
                            </div>
                            <div class="card-body">
                                <ul class="list-group">
                                    {% for veiculo in mdfe.veiculos %}
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ veiculo.placa }}</strong>
                                            <small class="text-muted ms-2">({{ veiculo.tipo }})</small>
                                        </div>
                                        <span class="badge bg-primary">{{ veiculo.uf_veiculo }}</span>
                                    </li>
                                    {% else %}
                                    <li class="list-group-item text-muted">Nenhum veículo cadastrado</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="fas fa-id-card me-2"></i>Condutores <small class="text-muted">(Grupo G - condutor)</small></h5>
                            </div>
                            <div class="card-body">
                                <ul class="list-group">
                                    {% for condutor in mdfe.condutores %}
                                    <li class="list-group-item">
                                        <strong>{{ condutor.nome }}</strong>
                                        <small class="text-muted d-block">CPF: {{ condutor.cpf }}</small>
                                    </li>
                                    {% else %}
                                    <li class="list-group-item text-muted">Nenhum condutor cadastrado</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Coluna Lateral -->
            <div class="col-lg-4">
                <!-- Status e Totais -->
                {% if mdfe %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Resumo <small class="text-muted">(Grupo F - tot)</small></h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label text-muted">Status</label>
                            <div>
                                {% if mdfe.status == 'AUTORIZADO' %}
                                    <span class="badge bg-success fs-6">Autorizado</span>
                                {% elif mdfe.status == 'ENCERRADO' %}
                                    <span class="badge bg-info fs-6">Encerrado</span>
                                {% elif mdfe.status == 'CANCELADO' %}
                                    <span class="badge bg-danger fs-6">Cancelado</span>
                                {% elif mdfe.status == 'REJEITADO' %}
                                    <span class="badge bg-warning text-dark fs-6">Rejeitado</span>
                                {% else %}
                                    <span class="badge bg-secondary fs-6">Digitado</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label text-muted">NF-e <small>(qNFe)</small></label>
                                <div class="fs-4 fw-bold" id="resumoQtdNfe">{{ mdfe.qtd_nfe or 0 }}</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-muted">CT-e <small>(qCTe)</small></label>
                                <div class="fs-4 fw-bold" id="resumoQtdCte">{{ mdfe.qtd_cte or 0 }}</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-muted">Valor Total <small>(vCarga)</small></label>
                                <div class="fs-5" id="resumoValor">R$ {{ "%.2f"|format(mdfe.valor_carga or 0) }}</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-muted">Peso Total <small>(qCarga)</small></label>
                                <div class="fs-5" id="resumoPeso">{{ "%.2f"|format(mdfe.peso_bruto or 0) }} kg</div>
                            </div>
                        </div>
                        {% if mdfe.chave %}
                        <div class="mt-3">
                            <label class="form-label text-muted">Chave de Acesso</label>
                            <code class="d-block small" style="word-break: break-all;">{{ mdfe.chave }}</code>
                        </div>
                        {% endif %}
                        {% if mdfe.protocolo %}
                        <div class="mt-3">
                            <label class="form-label text-muted">Protocolo</label>
                            <div><code>{{ mdfe.protocolo }}</code></div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- 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">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i> 
                            {% if modo == 'novo' %}Criar MDF-e{% else %}Salvar Alterações{% endif %}
                        </button>
                        
                        {% if mdfe and mdfe.status in ['DIGITADO', 'REJEITADO'] %}
                        <button type="button" class="btn btn-success" id="btnTransmitir">
                            <i class="fas fa-paper-plane me-1"></i> Transmitir para SEFAZ
                        </button>
                        {% endif %}
                        
                        {% if mdfe and mdfe.status == 'AUTORIZADO' %}
                        <button type="button" class="btn btn-info" id="btnEncerrar">
                            <i class="fas fa-flag-checkered me-1"></i> Encerrar MDF-e
                        </button>
                        {% endif %}
                        
                        <a href="{{ url_for('fiscal_mdfe_lista') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i> Cancelar
                        </a>
                    </div>
                </div>

                <!-- Card de Ajuda -->
                <div class="card mt-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-question-circle me-2"></i>Guia Rápido MDF-e</h5>
                    </div>
                    <div class="card-body small">
                        <div class="accordion accordion-flush" id="accordionAjuda">
                            <!-- Passo 1: Tipos de Transportador -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#ajuda1">
                                        <strong>1. Tipo de Transportador (ANTT)</strong>
                                    </button>
                                </h2>
                                <div id="ajuda1" class="accordion-collapse collapse" data-bs-parent="#accordionAjuda">
                                    <div class="accordion-body pt-2">
                                        <p class="mb-2"><strong>🏢 ETC (Empresa de Transporte):</strong><br>
                                        Empresa com CNPJ e registro na ANTT. Possui frota e emite CT-e. <em>Ex: Transportadora XYZ Ltda.</em></p>
                                        
                                        <p class="mb-2"><strong>👤 TAC (Transportador Autônomo):</strong><br>
                                        Pessoa física com CPF, veículo próprio e RNTRC. Trabalha como autônomo. <em>Ex: João da Silva, caminhoneiro.</em></p>
                                        
                                        <p class="mb-0"><strong>👥 CTC (Cooperativa):</strong><br>
                                        Cooperativa de TACs com CNPJ. Organiza autônomos para prestar serviços. <em>Ex: Cooperativa dos Transportadores do Sul.</em></p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Passo 2: Tipo Emitente -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#ajuda2">
                                        <strong>2. Tipo de Emitente</strong>
                                    </button>
                                </h2>
                                <div id="ajuda2" class="accordion-collapse collapse" data-bs-parent="#accordionAjuda">
                                    <div class="accordion-body pt-2">
                                        <p class="mb-2"><strong>🚚 Prestador de Serviço:</strong><br>
                                        Transportadora contratada para levar mercadoria de terceiros. Cobra frete e emite CT-e.</p>
                                        
                                        <p class="mb-2"><strong>🚛 TAC com Carga Própria:</strong><br>
                                        Autônomo transportando mercadoria que é dele (não é frete).</p>
                                        
                                        <p class="mb-0"><strong>🏭 Carga Própria:</strong><br>
                                        Empresa transportando sua própria mercadoria. Ex: Distribuidora levando produtos para clientes.</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Passo 3: Passo a Passo -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#ajuda3">
                                        <strong>3. Passo a Passo para Emitir</strong>
                                    </button>
                                </h2>
                                <div id="ajuda3" class="accordion-collapse collapse" data-bs-parent="#accordionAjuda">
                                    <div class="accordion-body pt-2">
                                        <ol class="ps-3 mb-0">
                                            <li class="mb-1">Preencha os <strong>Dados Básicos</strong> (empresa, UFs, tipo)</li>
                                            <li class="mb-1">Informe o <strong>Veículo</strong> (placa, tipo rodado)</li>
                                            <li class="mb-1">Adicione o <strong>Condutor</strong> (CPF e nome)</li>
                                            <li class="mb-1">Clique em <strong>Criar MDF-e</strong></li>
                                            <li class="mb-1">Adicione os <strong>Documentos</strong> (NF-e/CT-e)</li>
                                            <li class="mb-1">Clique em <strong>Transmitir</strong></li>
                                            <li class="mb-0">Ao chegar no destino, clique em <strong>Encerrar</strong></li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Passo 4: Quando usar -->
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#ajuda4">
                                        <strong>4. Quando Emitir MDF-e?</strong>
                                    </button>
                                </h2>
                                <div id="ajuda4" class="accordion-collapse collapse" data-bs-parent="#accordionAjuda">
                                    <div class="accordion-body pt-2">
                                        <p class="mb-2">O MDF-e é <strong>obrigatório</strong> quando:</p>
                                        <ul class="ps-3 mb-0">
                                            <li>Transporte <strong>interestadual</strong> de cargas</li>
                                            <li>Transporte <strong>intermunicipal</strong> com mais de 1 NF-e/CT-e</li>
                                            <li>Transportadora prestando serviço de frete</li>
                                            <li>Empresa transportando carga própria em veículo próprio</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{% if modo == 'editar' %}
<!-- Modal Adicionar Documento -->
<div class="modal fade cape-modal-standard" id="modalAddDoc" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-file-invoice me-2"></i>Adicionar Documento</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formAddDoc">
                <div class="modal-body">
                    <div class="alert alert-info py-2 mb-3">
                        <i class="fas fa-info-circle me-1"></i>
                        Adicione NF-e (modelo 55) ou CT-e (modelo 57) ao MDF-e
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Chave de Acesso <span class="text-danger">*</span></label>
                        <input type="text" id="doc_chave" class="form-control font-monospace" 
                               maxlength="44" required placeholder="Digite os 44 dígitos da chave"
                               pattern="[0-9]{44}" title="A chave deve ter exatamente 44 dígitos numéricos">
                        <div class="d-flex justify-content-between mt-1">
                            <small class="text-muted">NF-e (mod 55) ou CT-e (mod 57)</small>
                            <small id="chaveCounter" class="text-muted">0/44</small>
                        </div>
                        <div id="chaveInfo" class="small mt-1"></div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-5 mb-3">
                            <label class="form-label fw-bold">Cód. IBGE Município <span class="text-danger">*</span></label>
                            <input type="text" id="doc_municipio" class="form-control" 
                                   maxlength="7" required placeholder="Ex: 3550308"
                                   pattern="[0-9]{7}" title="Código IBGE com 7 dígitos">
                            <small class="text-muted">7 dígitos</small>
                        </div>
                        <div class="col-md-7 mb-3">
                            <label class="form-label fw-bold">Nome do Município</label>
                            <input type="text" id="doc_municipio_nome" class="form-control" 
                                   maxlength="60" placeholder="Preenchido automaticamente">
                            <small class="text-muted">Opcional (buscado automaticamente)</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i> Adicionar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar tooltips do Bootstrap
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Dicas para Tipo Transportador
    const helpTipoTransp = {
        '1': '<i class="fas fa-building me-1"></i><strong>ETC - Empresa de Transporte de Cargas:</strong> Empresa com CNPJ registrada na ANTT que presta serviços de transporte rodoviário de cargas. Possui frota própria ou agregada e emite CT-e.',
        '2': '<i class="fas fa-user me-1"></i><strong>TAC - Transportador Autônomo de Cargas:</strong> Pessoa física com CPF que possui veículo próprio e registro na ANTT (RNTRC). Presta serviços como autônomo, sem vínculo empregatício.',
        '3': '<i class="fas fa-users me-1"></i><strong>CTC - Cooperativa de Transporte de Cargas:</strong> Cooperativa de transportadores autônomos registrada na ANTT. Os cooperados são TACs que se unem para prestar serviços de forma organizada.'
    };
    
    const selectTipoTransp = document.getElementById('selectTipoTransp');
    const divHelpTipoTransp = document.getElementById('helpTipoTransp');
    if (selectTipoTransp && divHelpTipoTransp) {
        function atualizarHelpTipoTransp() {
            const val = selectTipoTransp.value;
            divHelpTipoTransp.innerHTML = helpTipoTransp[val] || '';
            divHelpTipoTransp.style.display = 'block';
        }
        selectTipoTransp.addEventListener('change', atualizarHelpTipoTransp);
        atualizarHelpTipoTransp();
    }
    
    // Dicas para Tipo Emitente
    const helpTipoEmitente = {
        '1': '<i class="fas fa-truck-loading me-1"></i><strong>Prestador de Serviço de Transporte:</strong> Transportadora que presta serviço para terceiros. Emite CT-e para cobrar pelo frete e vincula os documentos no MDF-e.',
        '2': '<i class="fas fa-truck-moving me-1"></i><strong>TAC - Transportador Autônomo com Carga Própria:</strong> Autônomo que está transportando mercadoria própria (não está prestando serviço de frete para terceiros).',
        '3': '<i class="fas fa-industry me-1"></i><strong>Carga Própria:</strong> Empresa que transporta sua própria mercadoria em veículo próprio. Não é transportadora, apenas movimenta produtos entre suas filiais ou para clientes.'
    };
    
    const selectTipoEmitente = document.getElementById('selectTipoEmitente');
    const divHelpTipoEmitente = document.getElementById('helpTipoEmitente');
    if (selectTipoEmitente && divHelpTipoEmitente) {
        function atualizarHelpTipoEmitente() {
            const val = selectTipoEmitente.value;
            divHelpTipoEmitente.innerHTML = helpTipoEmitente[val] || '';
            divHelpTipoEmitente.style.display = 'block';
        }
        selectTipoEmitente.addEventListener('change', atualizarHelpTipoEmitente);
        atualizarHelpTipoEmitente();
    }
    
    // Dicas para Modal
    const helpModal = {
        '1': '<i class="fas fa-truck me-1"></i><strong>Rodoviário:</strong> Transporte por estradas/rodovias em caminhões, carretas ou veículos de carga.',
        '2': '<i class="fas fa-plane me-1"></i><strong>Aéreo:</strong> Transporte por aviões de carga.',
        '3': '<i class="fas fa-ship me-1"></i><strong>Aquaviário:</strong> Transporte por navios, balsas, barcaças (marítimo, fluvial ou lacustre).',
        '4': '<i class="fas fa-train me-1"></i><strong>Ferroviário:</strong> Transporte por trens de carga em ferrovias.'
    };
    
    const selectModal = document.getElementById('selectModal');
    const divHelpModal = document.getElementById('helpModal');
    if (selectModal && divHelpModal) {
        function atualizarHelpModal() {
            const val = selectModal.value;
            divHelpModal.innerHTML = helpModal[val] || '';
            divHelpModal.style.display = 'block';
        }
        selectModal.addEventListener('change', atualizarHelpModal);
        atualizarHelpModal();
    }

    {% if modo == 'editar' %}
    // Tabela de UFs
    const UFS = {
        '11': 'RO', '12': 'AC', '13': 'AM', '14': 'RR', '15': 'PA', '16': 'AP', '17': 'TO',
        '21': 'MA', '22': 'PI', '23': 'CE', '24': 'RN', '25': 'PB', '26': 'PE', '27': 'AL',
        '28': 'SE', '29': 'BA', '31': 'MG', '32': 'ES', '33': 'RJ', '35': 'SP', '41': 'PR',
        '42': 'SC', '43': 'RS', '50': 'MS', '51': 'MT', '52': 'GO', '53': 'DF'
    };
    
    // Elementos do modal
    const docChave = document.getElementById('doc_chave');
    const docMunicipio = document.getElementById('doc_municipio');
    const chaveCounter = document.getElementById('chaveCounter');
    const chaveInfo = document.getElementById('chaveInfo');
    
    // Atualizar contador e info da chave
    function atualizarInfoChave() {
        if (!docChave) return;
        const valor = docChave.value.replace(/\D/g, '');
        docChave.value = valor; // Limpa não-numéricos
        const len = valor.length;
        
        if (chaveCounter) {
            chaveCounter.textContent = len + '/44';
            chaveCounter.className = len === 44 ? 'text-success fw-bold' : (len > 44 ? 'text-danger fw-bold' : 'text-muted');
        }
        
        if (chaveInfo) {
            if (len >= 22) {
                const ufCod = valor.substring(0, 2);
                const modelo = valor.substring(20, 22);
                const uf = UFS[ufCod] || '??';
                const tipoDoc = modelo === '55' ? 'NF-e' : modelo === '57' ? 'CT-e' : 'Mod ' + modelo;
                chaveInfo.innerHTML = '<span class="badge bg-info"><i class="fas fa-map-marker-alt me-1"></i>' + uf + '</span> ' +
                    '<span class="badge bg-secondary">' + tipoDoc + '</span>';
            } else {
                chaveInfo.innerHTML = '';
            }
        }
    }
    
    if (docChave) {
        docChave.addEventListener('input', atualizarInfoChave);
        docChave.addEventListener('paste', function() {
            setTimeout(atualizarInfoChave, 10);
        });
    }
    
    if (docMunicipio) {
        docMunicipio.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '');
        });
    }
    
    // Adicionar documento
    const formAddDoc = document.getElementById('formAddDoc');
    const modalAddDoc = document.getElementById('modalAddDoc');
    
    if (formAddDoc) {
        formAddDoc.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const chave = docChave.value.replace(/\D/g, '');
            const municipio = docMunicipio.value.replace(/\D/g, '');
            const municipioNome = document.getElementById('doc_municipio_nome').value.trim();
            const btnSubmit = this.querySelector('button[type="submit"]');
            
            console.log('=== ADICIONANDO DOCUMENTO ===');
            console.log('Chave:', chave, '(', chave.length, 'dígitos)');
            console.log('Município:', municipio, municipioNome);
            
            if (chave.length !== 44) {
                alert('❌ Chave deve ter 44 dígitos!\nAtual: ' + chave.length + ' dígitos');
                return;
            }
            
            if (municipio.length !== 7) {
                alert('❌ Código IBGE do município deve ter 7 dígitos!\nAtual: ' + municipio.length + ' dígitos');
                return;
            }
            
            // Desabilitar botão
            const btnOriginal = btnSubmit.innerHTML;
            btnSubmit.disabled = true;
            btnSubmit.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Adicionando...';
            
            fetch('/fiscal/mdfe/{{ mdfe.id }}/adicionar-documento', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    chave: chave,
                    codigo_municipio: municipio,
                    nome_municipio: municipioNome || 'Município ' + municipio
                })
            })
            .then(r => r.json().then(data => ({status: r.status, ok: r.ok, data})))
            .then(({status, ok, data}) => {
                console.log('Resposta:', status, data);
                
                if (ok && data.sucesso) {
                    // Sucesso - recarregar para mostrar documento
                    alert('✅ ' + data.mensagem);
                    location.reload();
                } else {
                    alert('❌ Erro: ' + (data.mensagem || 'Erro desconhecido'));
                    btnSubmit.disabled = false;
                    btnSubmit.innerHTML = btnOriginal;
                }
            })
            .catch(err => {
                console.error('Erro:', err);
                alert('❌ Erro de comunicação: ' + (err.message || err));
                btnSubmit.disabled = false;
                btnSubmit.innerHTML = btnOriginal;
            });
        });
    }
    
    // Função para adicionar documento na lista sem recarregar
    function adicionarDocumentoNaLista(doc, codMunicipio, nomeMunicipio) {
        const lista = document.getElementById('listaDocumentos');
        if (!lista) return;
        
        // Remover mensagem "nenhum documento"
        const semDocs = document.getElementById('semDocumentos');
        if (semDocs) semDocs.remove();
        
        // Verificar se já existe seção do município
        let secaoMun = lista.querySelector('[data-municipio="' + codMunicipio + '"]');
        
        if (!secaoMun) {
            // Criar nova seção do município
            secaoMun = document.createElement('div');
            secaoMun.className = 'mb-3';
            secaoMun.dataset.municipio = codMunicipio;
            secaoMun.innerHTML = `
                <h6 class="text-muted">
                    <i class="fas fa-map-marker-alt me-1"></i>
                    ${nomeMunicipio} (${codMunicipio})
                </h6>
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Tipo</th>
                            <th>Chave de Acesso</th>
                            <th width="60">Ação</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            `;
            lista.appendChild(secaoMun);
        }
        
        // Adicionar linha do documento
        const tbody = secaoMun.querySelector('tbody');
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td><span class="badge bg-secondary">${doc.tipo}</span></td>
            <td><code>${doc.chave}</code></td>
            <td>
                <button type="button" class="btn btn-sm btn-outline-danger btn-remover-doc"
                        data-doc-id="${doc.id}">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        tbody.appendChild(tr);
        
        // Adicionar event listener para o botão de remover
        tr.querySelector('.btn-remover-doc').addEventListener('click', removerDocumento);
    }
    
    // Função para mostrar toast
    function mostrarToast(msg, tipo) {
        // Criar toast container se não existir
        let container = document.getElementById('toastContainer');
        if (!container) {
            container = document.createElement('div');
            container.id = 'toastContainer';
            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
            container.style.zIndex = '1100';
            document.body.appendChild(container);
        }
        
        const toast = document.createElement('div');
        toast.className = 'toast align-items-center text-white bg-' + (tipo === 'success' ? 'success' : 'danger');
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">${msg}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;
        container.appendChild(toast);
        
        const bsToast = new bootstrap.Toast(toast, {delay: 3000});
        bsToast.show();
        toast.addEventListener('hidden.bs.toast', () => toast.remove());
    }
    
    // Remover documento
    function removerDocumento() {
        if (!confirm('Remover este documento?')) return;
        
        const btn = this;
        const docId = btn.dataset.docId;
        
        fetch(`/fiscal/mdfe/{{ mdfe.id }}/remover-documento/${docId}`, { method: 'POST' })
            .then(r => r.json())
            .then(data => {
                if (data.sucesso) {
                    // Remover linha da tabela
                    const tr = btn.closest('tr');
                    const tbody = tr.parentElement;
                    tr.remove();
                    
                    // Se não sobrou nenhum documento no município, remover a seção
                    if (tbody.children.length === 0) {
                        tbody.closest('.mb-3').remove();
                    }
                    
                    mostrarToast('✅ Documento removido', 'success');
                } else {
                    alert('Erro: ' + data.mensagem);
                }
            })
            .catch(err => {
                alert('Erro de comunicação');
            });
    }
    
    document.querySelectorAll('.btn-remover-doc').forEach(btn => {
        btn.addEventListener('click', removerDocumento);
    });
    
    // Transmitir
    const btnTransmitir = document.getElementById('btnTransmitir');
    if (btnTransmitir) {
        btnTransmitir.addEventListener('click', function() {
            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('Transmitindo MDF-e {{ mdfe.id }}...');
            
            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 para SEFAZ';
                    }
                })
                .catch(err => {
                    console.error('Erro transmissão:', err);
                    alert('Erro: ' + err.message);
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Transmitir para SEFAZ';
                });
        });
    }
    
    // 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;
                    }
                });
        });
    }
    {% endif %}
    
    // Máscara CPF
    const cpfInput = document.querySelector('input[name="cpf_motorista"]');
    if (cpfInput) {
        cpfInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length > 11) value = value.slice(0, 11);
            if (value.length > 9) {
                value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{1,2})/, '$1.$2.$3-$4');
            } else if (value.length > 6) {
                value = value.replace(/(\d{3})(\d{3})(\d{1,3})/, '$1.$2.$3');
            } else if (value.length > 3) {
                value = value.replace(/(\d{3})(\d{1,3})/, '$1.$2');
            }
            e.target.value = value;
        });
    }
    
    // Placa uppercase
    const placaInput = document.querySelector('input[name="placa_veiculo"]');
    if (placaInput) {
        placaInput.addEventListener('input', function(e) {
            e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
        });
    }
});
</script>
{% endblock %}