{% extends 'keuangan/base.html' %}
{% load static %}
{% load currency_filters %}

{% block title %}Laporan Keuangan - HMI Website{% endblock %}
{% block page_title %}Laporan Keuangan{% endblock %}

{% block content %}
<!-- Filter Section -->
<div class="bg-white shadow rounded-lg p-4 lg:p-6 mb-6">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label for="tahun" class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
            <select name="tahun" id="tahun" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                <option value="">Semua Tahun</option>
                {% for year in years %}
                <option value="{{ year }}" {% if tahun == year %}selected{% endif %}>{{ year }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div>
            <label for="bulan" class="block text-sm font-medium text-gray-700 mb-2">Bulan</label>
            <select name="bulan" id="bulan" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                <option value="">Semua Bulan</option>
                <option value="1" {% if bulan == '1' %}selected{% endif %}>Januari</option>
                <option value="2" {% if bulan == '2' %}selected{% endif %}>Februari</option>
                <option value="3" {% if bulan == '3' %}selected{% endif %}>Maret</option>
                <option value="4" {% if bulan == '4' %}selected{% endif %}>April</option>
                <option value="5" {% if bulan == '5' %}selected{% endif %}>Mei</option>
                <option value="6" {% if bulan == '6' %}selected{% endif %}>Juni</option>
                <option value="7" {% if bulan == '7' %}selected{% endif %}>Juli</option>
                <option value="8" {% if bulan == '8' %}selected{% endif %}>Agustus</option>
                <option value="9" {% if bulan == '9' %}selected{% endif %}>September</option>
                <option value="10" {% if bulan == '10' %}selected{% endif %}>Oktober</option>
                <option value="11" {% if bulan == '11' %}selected{% endif %}>November</option>
                <option value="12" {% if bulan == '12' %}selected{% endif %}>Desember</option>
            </select>
        </div>
        
        <div>
            <label for="tipe" class="block text-sm font-medium text-gray-700 mb-2">Tipe Laporan</label>
            <select name="tipe" id="tipe" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                <option value="">Semua Tipe</option>
                <option value="bulanan" {% if tipe == 'bulanan' %}selected{% endif %}>Bulanan</option>
                <option value="tahunan" {% if tipe == 'tahunan' %}selected{% endif %}>Tahunan</option>
            </select>
        </div>
        
        <div class="md:col-span-3 flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3">
            <button type="submit" class="w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-search mr-2"></i>Filter
            </button>
            <a href="{% url 'keuangan:laporan_list' %}" class="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-center">
                <i class="fas fa-refresh mr-2"></i>Reset
            </a>
        </div>
    </form>
</div>

<!-- Generate Report Button -->
<div class="mb-6">
    <button id="generate-report-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md inline-flex items-center">
        <i class="fas fa-file-pdf mr-2"></i>
        Generate Laporan
    </button>
</div>

<!-- 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</h3>
    </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">Periode</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipe</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pemasukan</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pengeluaran</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Saldo</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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">
                            {% if l.tipe == 'bulanan' %}
                                {{ l.get_bulan_display }} {{ l.tahun }}
                            {% else %}
                                {{ l.tahun }}
                            {% endif %}
                        </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.tipe == 'bulanan' %}bg-blue-100 text-blue-800{% else %}bg-purple-100 text-purple-800{% endif %}">
                            {{ l.get_tipe_display }}
                        </span>
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">
                        Rp {{ l.total_pemasukan|number_idr }}
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">
                        Rp {{ l.total_pengeluaran|number_idr }}
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium 
                        {% if l.saldo > 0 %}text-green-600{% elif l.saldo < 0 %}text-red-600{% else %}text-gray-600{% endif %}">
                        Rp {{ l.saldo|number_idr }}
                    </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.status == 'approved' %}bg-green-100 text-green-800
                            {% elif l.status == 'pending' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-red-100 text-red-800{% endif %}">
                            {{ l.get_status_display }}
                        </span>
                    </td>
                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <a href="{% url 'keuangan:laporan_detail' l.id %}" 
                           class="text-green-600 hover:text-green-900 mr-3">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{% url 'keuangan:laporan_pdf' l.id %}" 
                           class="text-blue-600 hover:text-blue-900">
                            <i class="fas fa-file-pdf"></i>
                        </a>
                    </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-green-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>

<!-- Generate Report Modal -->
<div id="generate-report-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Generate Laporan</h3>
            </div>
            
            <form id="generate-report-form" class="p-4 lg:p-6">
                <div class="mb-4">
                    <label for="report-tipe" class="block text-sm font-medium text-gray-700 mb-2">Tipe Laporan</label>
                    <select id="report-tipe" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option value="">Pilih tipe laporan...</option>
                        <option value="bulanan">Bulanan</option>
                        <option value="tahunan">Tahunan</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label for="report-tahun" class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
                    <input type="number" id="report-tahun" required min="2020" max="2030" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                           value="2024">
                </div>
                
                <div id="report-bulan-container" class="mb-4 hidden">
                    <label for="report-bulan" class="block text-sm font-medium text-gray-700 mb-2">Bulan</label>
                    <select id="report-bulan" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option value="1">Januari</option>
                        <option value="2">Februari</option>
                        <option value="3">Maret</option>
                        <option value="4">April</option>
                        <option value="5">Mei</option>
                        <option value="6">Juni</option>
                        <option value="7">Juli</option>
                        <option value="8">Agustus</option>
                        <option value="9">September</option>
                        <option value="10">Oktober</option>
                        <option value="11">November</option>
                        <option value="12">Desember</option>
                    </select>
                </div>
                
                <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3">
                    <button type="button" id="cancel-generate" 
                            class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md">
                        Batal
                    </button>
                    <button type="submit" 
                            class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md">
                        Generate Laporan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Generate report modal
    document.getElementById('generate-report-btn').addEventListener('click', function() {
        document.getElementById('generate-report-modal').classList.remove('hidden');
    });
    
    document.getElementById('cancel-generate').addEventListener('click', function() {
        document.getElementById('generate-report-modal').classList.add('hidden');
    });
    
    // Show/hide bulan field based on tipe
    document.getElementById('report-tipe').addEventListener('change', function() {
        const bulanContainer = document.getElementById('report-bulan-container');
        if (this.value === 'bulanan') {
            bulanContainer.classList.remove('hidden');
        } else {
            bulanContainer.classList.add('hidden');
        }
    });
    
    // Submit generate report form
    document.getElementById('generate-report-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const tipe = document.getElementById('report-tipe').value;
        const tahun = document.getElementById('report-tahun').value;
        const bulan = document.getElementById('report-bulan').value;
        
        // Redirect to generate report
        let url = `{% url 'keuangan:laporan_generate' %}?tipe=${tipe}&tahun=${tahun}`;
        if (tipe === 'bulanan') {
            url += `&bulan=${bulan}`;
        }
        
        window.location.href = url;
    });
</script>
{% endblock %}