{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Daftar Laporan - Admin Panel{% endblock %}
{% block page_title %}Daftar Laporan Keuangan{% endblock %}

{% block content %}
<!-- Reports Table -->
<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Daftar Laporan Keuangan (Read-Only)</h3>
        <p class="text-sm text-gray-500">Anda hanya dapat melihat data laporan. Untuk mengedit, gunakan modul keuangan bendahara.</p>
    </div>
    
    {% if laporan %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Judul</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Periode</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tahun</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bulan</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dibuat Oleh</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for l in laporan %}
                <tr>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ l.judul }}</div>
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                            {% if l.periode == 'bulanan' %}bg-blue-100 text-blue-800{% else %}bg-purple-100 text-purple-800{% endif %}">
                            {{ l.get_periode_display }}
                        </span>
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ l.tahun }}</td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {% if l.bulan %}
                            {% if l.bulan == 1 %}Januari
                            {% elif l.bulan == 2 %}Februari
                            {% elif l.bulan == 3 %}Maret
                            {% elif l.bulan == 4 %}April
                            {% elif l.bulan == 5 %}Mei
                            {% elif l.bulan == 6 %}Juni
                            {% elif l.bulan == 7 %}Juli
                            {% elif l.bulan == 8 %}Agustus
                            {% elif l.bulan == 9 %}September
                            {% elif l.bulan == 10 %}Oktober
                            {% elif l.bulan == 11 %}November
                            {% elif l.bulan == 12 %}Desember
                            {% endif %}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ l.created_by.nama_lengkap }}</td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ l.created_at|date:"d M Y" }}</td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <a href="{% url 'admin_panel:keuangan_laporan_detail' l.id %}" 
                           class="text-blue-600 hover:text-blue-900 mr-3">
                            <i class="fas fa-eye"></i> Lihat
                        </a>
                        {% if l.file_laporan %}
                        <a href="{{ l.file_laporan.url }}" target="_blank" 
                           class="text-green-600 hover:text-green-900">
                            <i class="fas fa-download"></i> Download
                        </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if laporan.has_other_pages %}
    <div class="px-4 lg:px-6 py-3 bg-gray-50 border-t border-gray-200">
        <div class="flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0">
            <div class="text-sm text-gray-700">
                Menampilkan {{ laporan.start_index }} sampai {{ laporan.end_index }} dari {{ laporan.paginator.count }} laporan
            </div>
            <div class="flex space-x-2">
                {% if laporan.has_previous %}
                    <a href="?page={{ laporan.previous_page_number }}" class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50">Previous</a>
                {% endif %}
                
                {% for num in laporan.paginator.page_range %}
                    {% if laporan.number == num %}
                        <span class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md">{{ num }}</span>
                    {% elif num > laporan.number|add:'-3' and num < laporan.number|add:'3' %}
                        <a href="?page={{ num }}" class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50">{{ num }}</a>
                    {% endif %}
                {% endfor %}
                
                {% if laporan.has_next %}
                    <a href="?page={{ laporan.next_page_number }}" class="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50">Next</a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
    
    {% else %}
    <div class="text-center py-8">
        <i class="fas fa-chart-bar text-3xl text-gray-400 mb-2"></i>
        <p class="text-gray-500">Tidak ada laporan ditemukan</p>
    </div>
    {% endif %}
</div>
{% endblock %}