{% extends "base.html" %}
{% block content %}
<div class="max-w-5xl mx-auto bg-white shadow-lg rounded-lg p-8">
    <div class="flex justify-between items-start border-b pb-6 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-minhaj-blue">Rekapitulasi Royalti</h1>
            <p class="text-gray-600">Periode: <strong>{{ period }}</strong></p>
        </div>
        <div class="text-right">
            <h2 class="text-xl font-bold text-gray-800">{{ penulis.nama_penulis }}</h2>
            <p class="text-sm text-gray-500">{{ penulis.no_hp }}</p>
            <div class="mt-2">
                <span class="px-3 py-1 rounded text-sm font-bold {{ 'bg-green-100 text-green-800' if payout and payout.status == 'Sudah Dibayar' else 'bg-yellow-100 text-yellow-800' }}">
                    {{ payout.status if payout else 'Belum Dibayar' }}
                </span>
            </div>
        </div>
    </div>

    <div class="overflow-x-auto mb-8">
        <table class="min-w-full text-sm">
            <thead class="bg-gray-100 border-b">
                <tr>
                    <th class="py-2 px-4 text-left">Judul Buku (ISBN)</th>
                    <th class="py-2 px-4 text-center">Qty</th>
                    <th class="py-2 px-4 text-right">Bruto</th>
                    <th class="py-2 px-4 text-right">Royalti %</th>
                    <th class="py-2 px-4 text-right">Pajak</th>
                    <th class="py-2 px-4 text-right">Netto</th>
                    <th class="py-2 px-4 text-center">Detail</th>
                </tr>
            </thead>
            <tbody>
                {% for d in details %}
                <tr class="border-b hover:bg-gray-50">
                    <td class="py-2 px-4">
                        <div class="font-bold">{{ d.judul }}</div>
                        <div class="text-xs text-gray-500">{{ d.isbn }}</div>
                    </td>
                    <td class="py-2 px-4 text-center">{{ d.qty }}</td>
                    <td class="py-2 px-4 text-right">Rp {{ "{:,}".format(d.gross) }}</td>
                    <td class="py-2 px-4 text-right">{{ d.roy_persen }}%</td>
                    <td class="py-2 px-4 text-right text-red-500">
                        Rp {{ "{:,}".format(d.pajak_val) }}<br>
                        <span class="text-xs">({{ d.pajak_opsi }})</span>
                    </td>
                    <td class="py-2 px-4 text-right font-bold">Rp {{ "{:,}".format(d.net) }}</td>
                    <td class="py-2 px-4 text-center">
                        <a href="/royalti/transaksi/{{ d.id_buku }}/{{ year }}/{{ sem }}" class="text-blue-600 hover:underline text-xs">Lihat</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot class="bg-gray-50 font-bold">
                <tr>
                    <td colspan="5" class="py-3 px-4 text-right text-lg">TOTAL DITERIMA</td>
                    <td class="py-3 px-4 text-right text-lg text-minhaj-blue">Rp {{ "{:,}".format(total_net) }}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="flex justify-between items-end border-t pt-6">
        <div>
            <a href="/royalti/print-invoice/{{ id_penulis }}/{{ year }}/{{ sem }}" target="_blank" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-900 shadow">
                <i class="fas fa-print mr-2"></i> Cetak Dokumen Resmi (PDF)
            </a>
            
            {% if payout and payout.bukti_bayar_link %}
            <a href="{{ payout.bukti_bayar_link }}" target="_blank" class="ml-2 bg-blue-100 text-blue-700 px-4 py-2 rounded hover:bg-blue-200">
                <i class="fas fa-link mr-2"></i> Lihat Bukti Transfer
            </a>
            {% endif %}
        </div>

        {% if session.role == 'admin' %}
        <div class="w-1/2">
            <h3 class="font-bold text-gray-800 mb-2">Update Pembayaran</h3>
            <form action="/royalti/update-payout" method="POST" class="bg-gray-50 p-4 rounded border">
                <input type="hidden" name="id_penulis" value="{{ penulis.id_penulis }}">
                <input type="hidden" name="year" value="{{ year }}">
                <input type="hidden" name="sem" value="{{ sem }}">
                
                <div class="grid grid-cols-2 gap-2 mb-2">
                    <div>
                        <label class="text-xs">Tanggal Bayar</label>
                        <input type="date" name="tgl_bayar" required value="{{ payout.tgl_bayar if payout else '' }}" class="w-full border rounded px-2 py-1">
                    </div>
                    <div>
                        <label class="text-xs">Jumlah Transfer</label>
                        <input type="number" name="amount" required value="{{ payout.total_amount if payout else total_net }}" class="w-full border rounded px-2 py-1">
                    </div>
                </div>
                <div class="mb-2">
                    <label class="text-xs">Link Bukti Pembayaran</label>
                    <input type="text" name="link_bukti" required value="{{ payout.bukti_bayar_link if payout else '' }}" class="w-full border rounded px-2 py-1" placeholder="https://...">
                </div>
                <button type="submit" class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 text-sm font-bold" onclick="return confirm('Kirim update dan notifikasi WA?')">
                    <i class="fab fa-whatsapp mr-1"></i> Simpan & Kirim Notifikasi
                </button>
            </form>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}