{% extends "base.html" %}
{% block content %}
<div class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
    <h1 class="text-2xl font-bold text-gray-900">Riwayat Royalti</h1>
    
    <form class="flex space-x-2 w-full md:w-auto">
        {% if session.role == 'admin' %}
        <select name="penulis" class="border rounded px-3 py-2 text-sm w-full md:w-auto">
            <option value="">Semua Penulis</option>
            {% for p in authors %}
            <option value="{{ p.id_penulis }}" {% if request.args.get('penulis') == p.id_penulis %}selected{% endif %}>{{ p.nama_penulis }}</option>
            {% endfor %}
        </select>
        {% endif %}
        <select name="year" class="border rounded px-3 py-2 text-sm">
            <option value="{{ year }}">{{ year }}</option>
            <option value="{{ year - 1 }}">{{ year - 1 }}</option>
        </select>
        <button type="submit" class="bg-minhaj-blue text-white px-4 py-2 rounded text-sm whitespace-nowrap">Filter</button>
    </form>
</div>

{% if session.role == 'admin' %}
<div class="mb-4 flex flex-wrap gap-2 justify-end">
    <a href="/royalti/rekap-pajak/{{ year }}/1" target="_blank" class="bg-green-600 text-white px-3 py-2 rounded text-sm hover:bg-green-700 shadow flex items-center">
        <i class="fas fa-file-excel mr-2"></i> Rekap Pajak (Jan-Jun)
    </a>
    <a href="/royalti/rekap-pajak/{{ year }}/2" target="_blank" class="bg-green-600 text-white px-3 py-2 rounded text-sm hover:bg-green-700 shadow flex items-center">
        <i class="fas fa-file-excel mr-2"></i> Rekap Pajak (Jul-Des)
    </a>
</div>
{% endif %}

<div class="bg-white shadow rounded-lg overflow-hidden border border-gray-200">
    <div class="overflow-x-auto w-full">
        <table class="min-w-full divide-y divide-gray-200 whitespace-nowrap">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Periode</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Penulis</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Terjual</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Net Royalti</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sticky right-0 bg-gray-50 shadow-sm">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for r in reports %}
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-4 py-4 text-sm text-gray-900 font-medium">{{ r.periode }}</td>
                    <td class="px-4 py-4 text-sm text-gray-500">{{ r.nama_penulis }}</td>
                    <td class="px-4 py-4 text-sm text-gray-500">
                        {{ r.total_qty }} pcs <br>
                        <span class="text-xs text-gray-400">Omset: Rp {{ "{:,}".format(r.total_omset) }}</span>
                    </td>
                    <td class="px-4 py-4 text-sm font-bold text-green-600">Rp {{ "{:,}".format(r.total_net) }}</td>
                    <td class="px-4 py-4">
                        <span class="px-2 py-1 text-xs font-semibold rounded-full {{ 'bg-green-100 text-green-800' if r.status == 'Sudah Dibayar' else 'bg-yellow-100 text-yellow-800' }}">
                            {{ r.status }}
                        </span>
                    </td>
                    <td class="px-4 py-4 text-center sticky right-0 bg-white shadow-sm border-l border-gray-100">
                        <a href="/royalti/invoice/{{ r.id_penulis }}/{{ r.year }}/{{ r.sem }}" class="bg-minhaj-orange text-white px-3 py-1 rounded text-xs hover:bg-orange-700 shadow-sm inline-block">
                            Detail
                        </a>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="6" class="px-6 py-8 text-center text-gray-500 italic">Belum ada data penjualan pada periode ini.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}