{% extends "dashboard/base_dashboard.html" %}

{% block title %}Faturas — Dra. Mariela{% endblock %}
{% block panel_title %}Listagem de Faturas{% endblock %}

{% block panel_content %}
<!-- Filtros -->
<div class="bg-white rounded-xl p-5 border border-gray-100 shadow-sm mb-6">
    <form method="get" class="flex flex-wrap items-end gap-4">
        <div class="flex-1 min-w-[140px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">De</label>
            {{ form.fecha_inicio }}
        </div>
        <div class="flex-1 min-w-[140px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">Até</label>
            {{ form.fecha_fin }}
        </div>
        <div class="flex-1 min-w-[140px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">Clínica</label>
            <select name="clinica" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none transition text-sm">
                <option value="">Todas</option>
                {% for c in clinicas %}
                <option value="{{ c.id }}" {% if clinica_filter == c.id|stringformat:"s" %}selected{% endif %}>{{ c.nombre }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="flex-1 min-w-[140px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">Estado</label>
            <select name="estado" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none transition text-sm">
                <option value="">Todos</option>
                {% for value, label in estados %}
                <option value="{{ value }}" {% if estado_filter == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="px-5 py-2.5 bg-rosa text-white font-semibold rounded-xl text-sm hover:bg-rosa/90 transition shadow-sm">
            Filtrar
        </button>
        <a href="{% url 'finance:dashboard' %}" class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-xl text-sm hover:border-rosa hover:text-rosa transition">
            ← Dashboard
        </a>
    </form>
    <p class="text-xs text-gray-400 mt-2">{{ fecha_inicio|date:"d/m/Y" }} — {{ fecha_fin|date:"d/m/Y" }} · {{ facturas|length }} fatura{{ facturas|length|pluralize:"s" }}</p>
</div>

<!-- Tabela de Faturas -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
                    <th class="px-5 py-3 text-left font-medium">Fatura</th>
                    <th class="px-5 py-3 text-left font-medium">Data</th>
                    <th class="px-5 py-3 text-left font-medium">Paciente</th>
                    <th class="px-5 py-3 text-left font-medium">Clínica</th>
                    <th class="px-5 py-3 text-left font-medium">Tipo Cliente</th>
                    <th class="px-5 py-3 text-right font-medium">P. Venda</th>
                    <th class="px-5 py-3 text-right font-medium">% Médico</th>
                    <th class="px-5 py-3 text-right font-medium">IRT ({{ facturas.0.irt_porciento|default:"6.50" }}%)</th>
                    <th class="px-5 py-3 text-right font-medium">Receita Líquida</th>
                    <th class="px-5 py-3 text-center font-medium">Estado</th>
                    <th class="px-5 py-3 text-center font-medium">Ver</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for f in facturas %}
                <tr class="hover:bg-gray-50/50 transition">
                    <td class="px-5 py-3">
                        <span class="font-medium text-dark">{{ f.numero_factura|default:"S/N" }}</span>
                    </td>
                    <td class="px-5 py-3 text-gray-500">{{ f.fecha|date:"d/m/Y" }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ f.paciente_nombre }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ f.clinica.nombre }}</td>
                    <td class="px-5 py-3 text-gray-600">{{ f.tipo_cliente.nombre|default:"—" }}</td>
                    <td class="px-5 py-3 text-right text-dark font-medium">{{ f.precio_venta_total|floatformat:2 }}</td>
                    <td class="px-5 py-3 text-right text-rosa font-semibold">{{ f.porciento_medico_total|floatformat:2 }}</td>
                    <td class="px-5 py-3 text-right text-amber-600 font-medium">{{ f.irt_monto|floatformat:2 }}</td>
                    <td class="px-5 py-3 text-right text-green-600 font-semibold">{{ f.ingreso_neto|floatformat:2 }} Kz</td>
                    <td class="px-5 py-3 text-center">
                        {% if f.estado == 'sin_confirmar' %}
                        <span class="px-2.5 py-1 bg-amber-50 text-amber-600 rounded-lg text-xs font-semibold">Sem Confirmar</span>
                        {% elif f.estado == 'confirmada' %}
                        <span class="px-2.5 py-1 bg-green-50 text-green-600 rounded-lg text-xs font-semibold">Confirmada</span>
                        {% elif f.estado == 'anulada' %}
                        <span class="px-2.5 py-1 bg-red-50 text-red-500 rounded-lg text-xs font-semibold">Anulada</span>
                        {% endif %}
                    </td>
                    <td class="px-5 py-3 text-center">
                        <button type="button" class="btn-ver-detalle inline-flex items-center justify-center w-8 h-8 bg-rosa/10 text-rosa rounded-lg hover:bg-rosa hover:text-white transition" title="Ver detalle"
                            data-factura="{{ f.numero_factura|default:'S/N' }}"
                            data-paciente="{{ f.paciente_nombre }}"
                            data-clinica="{{ f.clinica.nombre }}"
                            data-fecha="{{ f.fecha|date:'d/m/Y' }}"
                            data-tipo="{{ f.tipo_cliente.nombre|default:'—' }}"
                            data-pventa="{{ f.precio_venta_total|floatformat:2 }}"
                            data-medico="{{ f.porciento_medico_total|floatformat:2 }}"
                            data-irt="{{ f.irt_monto|floatformat:2 }}"
                            data-irtp="{{ f.irt_porciento|floatformat:2 }}"
                            data-neto="{{ f.ingreso_neto|floatformat:2 }}"
                            data-estado="{{ f.get_estado_display }}"
                            data-obs="{{ f.observaciones|default:'' }}"
                            data-detalles='[{% for d in f.detalles.all %}{"tipo":"{{ d.get_tipo_display }}","nombre":"{{ d.nombre_item }}","precio":"{{ d.precio_venta|floatformat:2 }}","porc":"{{ d.porciento_medico|floatformat:2 }}","sub_med":"{{ d.subtotal_medico|floatformat:2 }}","irt":"{{ d.irt_monto|floatformat:2 }}","neto":"{{ d.subtotal_medico|floatformat:2 }}"}{% if not forloop.last %},{% endif %}{% endfor %}]'>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="11" class="px-5 py-12 text-center text-gray-400">
                        <svg class="w-12 h-12 mx-auto text-gray-200 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        Não há faturas para o período selecionado.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            {% if facturas %}
            <tfoot>
                <tr class="bg-gray-50 font-semibold text-sm">
                    <td colspan="5" class="px-5 py-3 text-right text-gray-500 uppercase text-xs tracking-wider">Totais</td>
                    <td class="px-5 py-3 text-right text-dark" id="tf-pventa">—</td>
                    <td class="px-5 py-3 text-right text-rosa" id="tf-medico">—</td>
                    <td class="px-5 py-3 text-right text-amber-600" id="tf-irt">—</td>
                    <td class="px-5 py-3 text-right text-green-600" id="tf-neto">—</td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
            {% endif %}
        </table>
    </div>
</div>

<!-- Modal Detalhe Fatura -->
<div id="modal-detalle" class="fixed inset-0 z-[1100] hidden">
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" id="md-overlay"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl relative overflow-hidden">
            <div class="bg-gradient-to-r from-rosa to-pink-500 rounded-t-2xl px-6 py-5 text-center">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <h2 class="font-poppins font-bold text-white text-xl" id="md-titulo"></h2>
                <p class="text-white/80 text-sm mt-1" id="md-subtitulo"></p>
            </div>
            <div class="px-6 py-5 max-h-[60vh] overflow-y-auto">
                <!-- Info general -->
                <div class="grid grid-cols-2 gap-3 mb-5">
                    <div class="bg-gray-50 rounded-xl p-3">
                        <p class="text-xs text-gray-400 uppercase tracking-wider">Paciente</p>
                        <p class="font-semibold text-dark text-sm mt-0.5" id="md-paciente"></p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-3">
                        <p class="text-xs text-gray-400 uppercase tracking-wider">Clínica</p>
                        <p class="font-semibold text-dark text-sm mt-0.5" id="md-clinica"></p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-3">
                        <p class="text-xs text-gray-400 uppercase tracking-wider">Tipo Cliente</p>
                        <p class="font-semibold text-dark text-sm mt-0.5" id="md-tipo"></p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-3">
                        <p class="text-xs text-gray-400 uppercase tracking-wider">Estado</p>
                        <p class="font-semibold text-sm mt-0.5" id="md-estado"></p>
                    </div>
                </div>
                <!-- Tabla de detalles -->
                <p class="text-xs text-gray-500 uppercase tracking-wider font-semibold mb-3">Detalhe de Ítens</p>
                <div class="overflow-x-auto rounded-xl border border-gray-200">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase">
                                <th class="px-4 py-2.5 text-left font-medium">Tipo</th>
                                <th class="px-4 py-2.5 text-left font-medium">Ítem</th>
                                <th class="px-4 py-2.5 text-right font-medium">Preço</th>
                                <th class="px-4 py-2.5 text-right font-medium">% Méd.</th>
                                <th class="px-4 py-2.5 text-right font-medium">Sub. Méd.</th>
                                <th class="px-4 py-2.5 text-right font-medium">IRT</th>
                                <th class="px-4 py-2.5 text-right font-medium">R. Líquida</th>
                            </tr>
                        </thead>
                        <tbody id="md-tbody" class="divide-y divide-gray-100"></tbody>
                    </table>
                </div>
                <!-- Observaciones (después de la tabla) -->
                <div id="md-obs-wrap" class="hidden mt-4">
                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-3">
                        <p class="text-xs text-amber-500 uppercase tracking-wider font-semibold">Observações</p>
                        <p class="text-amber-800 text-sm mt-1" id="md-obs"></p>
                    </div>
                </div>
                <!-- Totales -->
                <div class="bg-gray-50 rounded-xl p-4 mt-4 space-y-2">
                    <div class="flex justify-between text-sm"><span class="text-gray-500">P. Venda Total:</span><span class="font-semibold text-dark" id="md-pventa"></span></div>
                    <div class="flex justify-between text-sm"><span class="text-gray-500">% Médico Total:</span><span class="font-semibold text-rosa" id="md-medico"></span></div>
                    <div class="flex justify-between text-sm"><span class="text-gray-500">IRT (<span id="md-irtp"></span>%):</span><span class="font-semibold text-amber-600" id="md-irt"></span></div>
                    <hr class="border-gray-200">
                    <div class="flex justify-between text-sm"><span class="text-gray-600 font-semibold">Receita Líquida:</span><span class="font-bold text-green-600 text-base" id="md-neto"></span></div>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-100 flex justify-center">
                <button type="button" id="md-cerrar" class="px-8 py-2.5 bg-rosa text-white font-semibold rounded-xl text-sm hover:bg-rosa/90 transition shadow-sm">Fechar</button>
            </div>
        </div>
    </div>
</div>

{% if facturas %}
<script>
(function(){
    // Totais do footer
    let tPV=0, tMed=0, tIrt=0, tNeto=0;
    document.querySelectorAll('tbody tr').forEach(tr=>{
        const celdas = tr.querySelectorAll('td');
        if(celdas.length >= 9){
            tPV   += parseFloat(celdas[5].textContent) || 0;
            tMed  += parseFloat(celdas[6].textContent) || 0;
            tIrt  += parseFloat(celdas[7].textContent) || 0;
            tNeto += parseFloat(celdas[8].textContent) || 0;
        }
    });
    document.getElementById('tf-pventa').textContent = tPV.toFixed(2);
    document.getElementById('tf-medico').textContent = tMed.toFixed(2);
    document.getElementById('tf-irt').textContent = tIrt.toFixed(2);
    document.getElementById('tf-neto').textContent = tNeto.toFixed(2) + ' Kz';

    // Modal detalhe
    const modal = document.getElementById('modal-detalle');
    const overlay = document.getElementById('md-overlay');
    const btnCerrar = document.getElementById('md-cerrar');

    function esc(s){ const d=document.createElement('div'); d.textContent=s||''; return d.innerHTML; }

    function abrirDetalle(btn){
        document.getElementById('md-titulo').textContent = btn.dataset.factura;
        document.getElementById('md-subtitulo').textContent = btn.dataset.clinica + ' — ' + btn.dataset.fecha;
        document.getElementById('md-paciente').textContent = btn.dataset.paciente;
        document.getElementById('md-clinica').textContent = btn.dataset.clinica;
        document.getElementById('md-tipo').textContent = btn.dataset.tipo;
        document.getElementById('md-estado').textContent = btn.dataset.estado;
        document.getElementById('md-pventa').textContent = btn.dataset.pventa + ' Kz';
        document.getElementById('md-medico').textContent = btn.dataset.medico + ' Kz';
        document.getElementById('md-irt').textContent = btn.dataset.irt + ' Kz';
        document.getElementById('md-irtp').textContent = btn.dataset.irtp;
        document.getElementById('md-neto').textContent = btn.dataset.neto + ' Kz';

        // Observações
        const obsWrap = document.getElementById('md-obs-wrap');
        if(btn.dataset.obs && btn.dataset.obs.trim()){
            document.getElementById('md-obs').textContent = btn.dataset.obs;
            obsWrap.classList.remove('hidden');
        } else {
            obsWrap.classList.add('hidden');
        }

        // Detalhes
        const tbody = document.getElementById('md-tbody');
        tbody.innerHTML = '';
        try {
            const detalles = JSON.parse(btn.dataset.detalles);
            if(detalles.length === 0){
                tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-6 text-center text-gray-400 text-xs">Sem detalhes registados.</td></tr>';
            } else {
                detalles.forEach(function(d){
                    const tr = document.createElement('tr');
                    tr.className = 'hover:bg-gray-50/50';
                    tr.innerHTML =
                        '<td class="px-4 py-2.5 text-gray-500 text-xs">' + esc(d.tipo) + '</td>' +
                        '<td class="px-4 py-2.5 text-dark font-medium">' + esc(d.nombre) + '</td>' +
                        '<td class="px-4 py-2.5 text-right text-dark">' + d.precio + '</td>' +
                        '<td class="px-4 py-2.5 text-right text-gray-500">' + d.porc + '%</td>' +
                        '<td class="px-4 py-2.5 text-right text-rosa font-medium">' + d.sub_med + '</td>' +
                        '<td class="px-4 py-2.5 text-right text-amber-600">' + d.irt + '</td>' +
                        '<td class="px-4 py-2.5 text-right text-green-600 font-medium">' + (parseFloat(d.sub_med) - parseFloat(d.irt)).toFixed(2) + '</td>';
                    tbody.appendChild(tr);
                });
            }
        } catch(e){
                tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-6 text-center text-gray-400 text-xs">Erro ao carregar detalhes.</td></tr>';
        }

        modal.classList.remove('hidden');
    }

    function cerrarDetalle(){ modal.classList.add('hidden'); }

    // Event delegation para botões de olho
    document.addEventListener('click', function(e){
        const btn = e.target.closest('.btn-ver-detalle');
        if(btn) abrirDetalle(btn);
    });

    btnCerrar.addEventListener('click', cerrarDetalle);
    overlay.addEventListener('click', cerrarDetalle);
    document.addEventListener('keydown', function(e){
        if(e.key === 'Escape' && !modal.classList.contains('hidden')) cerrarDetalle();
    });
})();
</script>
{% endif %}
{% endblock %}