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

{% block title %}Fatura {{ factura.numero }} — Dra. Mariela{% endblock %}
{% block panel_title %}Fatura {{ factura.numero }}{% endblock %}

{% block panel_content %}
<!-- Navegação -->
<div class="flex flex-wrap gap-3 mb-6">
    <a href="{% url 'finance:dashboard' %}" class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-rosa transition">
        <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 19l-7-7 7-7"/></svg>
        Dashboard
    </a>
    <span class="text-gray-300">|</span>
    <a href="{% url 'finance:lista_facturas' %}" class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-rosa transition">
        Faturas
    </a>
    <span class="text-gray-300">|</span>
    <span class="text-sm text-rosa font-medium">{{ factura.numero }}</span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Dados da Fatura -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Info Principal -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-poppins font-semibold text-dark text-lg">Dados da Fatura</h3>
                {% if factura.estado == 'pendiente' %}
                <span class="px-3 py-1 bg-amber-50 text-amber-600 rounded-lg text-xs font-semibold">Pendente</span>
                {% elif factura.estado == 'pagado' %}
                <span class="px-3 py-1 bg-green-50 text-green-600 rounded-lg text-xs font-semibold">Pago</span>
                {% elif factura.estado == 'pago_parcial' %}
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-lg text-xs font-semibold">Pagamento Parcial</span>
                {% elif factura.estado == 'anulado' %}
                <span class="px-3 py-1 bg-red-50 text-red-500 rounded-lg text-xs font-semibold">Anulado</span>
                {% endif %}
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide font-medium mb-1">Número</p>
                    <p class="font-semibold text-dark">{{ factura.numero }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide font-medium mb-1">Data de Emissão</p>
                    <p class="text-dark">{{ factura.fecha_emision|date:"d/m/Y H:i" }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide font-medium mb-1">Paciente</p>
                    <p class="text-dark">{{ factura.paciente.get_full_name }}</p>
                    <p class="text-xs text-gray-400">{{ factura.paciente.email }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide font-medium mb-1">Serviço</p>
                    <p class="text-dark">{{ factura.servicio.nombre }}</p>
                </div>
                {% if factura.clinica %}
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide font-medium mb-1">Clínica</p>
                    <p class="text-dark">{{ factura.clinica.nombre }}</p>
                    {% if factura.clinica.nif %}
                    <p class="text-xs text-gray-400">NIF: {{ factura.clinica.nif }}</p>
                    {% endif %}
                </div>
                {% endif %}
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide font-medium mb-1">Consulta</p>
                    <p class="text-dark">{{ factura.cita.fecha_hora|date:"d/m/Y H:i" }}</p>
                </div>
            </div>

            <!-- Detalhe Financeiro -->
            <div class="px-6 pb-6">
                <div class="bg-gray-50 rounded-xl p-5 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500">Subtotal</span>
                        <span class="text-sm text-dark">{{ factura.subtotal|floatformat:2 }} Kz</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500">IRT</span>
                        <span class="text-sm text-dark">{{ factura.irt|floatformat:2 }} Kz</span>
                    </div>
                    <div class="border-t border-gray-200 pt-3 flex justify-between items-center">
                        <span class="font-semibold text-dark">Total</span>
                        <span class="text-xl font-bold text-rosa">{{ factura.total|floatformat:2 }} Kz</span>
                    </div>
                    {% if factura.monto_pagado > 0 %}
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-green-600">Pago</span>
                        <span class="text-sm text-green-600 font-medium">-{{ factura.monto_pagado|floatformat:2 }} Kz</span>
                    </div>
                    <div class="border-t border-gray-200 pt-3 flex justify-between items-center">
                        <span class="font-semibold text-red-500">Saldo Pendente</span>
                        <span class="text-lg font-bold text-red-500">{{ factura.saldo_pendiente|floatformat:2 }} Kz</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Histórico de Pagamentos -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="font-poppins font-semibold text-dark text-base">Histórico de Pagamentos</h3>
            </div>
            <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">Data</th>
                            <th class="px-5 py-3 text-right font-medium">Valor</th>
                            <th class="px-5 py-3 text-left font-medium">Método</th>
                            <th class="px-5 py-3 text-left font-medium">Referência</th>
                            <th class="px-5 py-3 text-left font-medium">Registado por</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        {% for pago in pagos %}
                        <tr class="hover:bg-gray-50/50 transition">
                            <td class="px-5 py-3 text-gray-600">{{ pago.fecha|date:"d/m/Y H:i" }}</td>
                            <td class="px-5 py-3 text-right font-semibold text-green-600">{{ pago.monto|floatformat:2 }} Kz</td>
                            <td class="px-5 py-3 text-gray-600">{{ pago.get_metodo_display }}</td>
                            <td class="px-5 py-3 text-gray-500">{{ pago.referencia|default:"—" }}</td>
                            <td class="px-5 py-3 text-gray-500">{{ pago.registrado_por.get_full_name }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="5" class="px-5 py-8 text-center text-gray-400">Ainda não foram registados pagamentos.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Painel Lateral: Ações -->
    <div class="space-y-6">
        {% if payment_form and factura.estado != 'anulado' and factura.estado != 'pagado' %}
        <!-- Formulário de Pagamento -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="font-poppins font-semibold text-dark text-base">Registar Pagamento</h3>
            </div>
            <form method="post" action="{% url 'finance:registrar_pago' factura_id=factura.id %}" class="p-6 space-y-4">
                {% csrf_token %}
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Valor (Kz)</label>
                    {{ payment_form.monto }}
                    {% if payment_form.monto.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ payment_form.monto.errors.0 }}</p>
                    {% endif %}
                    <p class="text-xs text-gray-400 mt-1">Saldo: {{ factura.saldo_pendiente|floatformat:2 }} Kz</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Método</label>
                    {{ payment_form.metodo }}
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Referência</label>
                    {{ payment_form.referencia }}
                </div>
                <button type="submit" class="w-full py-3 bg-green-600 text-white font-semibold rounded-xl hover:bg-green-700 transition shadow-sm text-sm">
                    <svg class="w-4 h-4 inline mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Registar Pagamento
                </button>
            </form>
        </div>
        {% endif %}

        <!-- Ações -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 space-y-3">
            <h3 class="font-poppins font-semibold text-dark text-base mb-2">Ações</h3>
            <a href="{% url 'reports:factura_pdf' factura_id=factura.id %}" class="w-full py-2.5 bg-rosa text-white font-medium rounded-xl hover:bg-rosa/90 transition text-sm flex items-center justify-center gap-2 shadow-sm">
                <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                Descarregar PDF
            </a>
            {% if factura.estado != 'anulado' and factura.estado != 'pagado' %}
            <form method="post" action="{% url 'finance:anular_factura' factura_id=factura.id %}" onsubmit="return confirm('Tem a certeza que deseja anular esta fatura?')">
                {% csrf_token %}
                <button type="submit" class="w-full py-2.5 border border-red-200 text-red-500 font-medium rounded-xl hover:bg-red-50 transition text-sm">
                    <svg class="w-4 h-4 inline mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                    Anular Fatura
                </button>
            </form>
            {% endif %}
            <a href="{% url 'finance:lista_facturas' %}" class="block text-center py-2.5 border border-gray-200 text-gray-600 font-medium rounded-xl hover:border-rosa hover:text-rosa transition text-sm">
                ← Voltar a Faturas
            </a>
        </div>

        <!-- Resumo Rápido -->
        <div class="bg-gradient-to-br from-rosa/5 to-dorado/5 rounded-xl p-5 border border-rosa/10">
            <h4 class="font-poppins font-semibold text-dark text-sm mb-3">Resumo</h4>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">Subtotal</span>
                    <span class="text-dark">{{ factura.subtotal|floatformat:2 }} Kz</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">IRT</span>
                    <span class="text-dark">{{ factura.irt|floatformat:2 }} Kz</span>
                </div>
                <div class="flex justify-between font-semibold border-t border-rosa/10 pt-2">
                    <span class="text-dark">Total</span>
                    <span class="text-rosa">{{ factura.total|floatformat:2 }} Kz</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}