{% extends "base.html" %}

{% block page_title %}Laporan{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header Section -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 mobile-small">
                <i class="fas fa-file-alt text-ocean-600 mr-2"></i>
                Laporan Realisasi
            </h1>
            <p class="text-gray-600 mt-1 mobile-xs">
                {% if session.role == 'super_admin' %}
                    Laporan realisasi semua bidang
                {% else %}
                    Laporan realisasi bidang {{ session.bidang|title }}
                {% endif %}
            </p>
        </div>
        <div class="flex space-x-2">
            <a href="{{ url_for('export_excel', program_id=filters.program_id, sumber_dana_id=filters.sumber_dana_id, bulan=filters.bulan, tahun=filters.tahun) }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors mobile-small">
                <i class="fas fa-file-excel"></i>
                <span>Export Excel</span>
            </a>
            <a href="{{ url_for('export_pdf', program_id=filters.program_id, sumber_dana_id=filters.sumber_dana_id, bulan=filters.bulan, tahun=filters.tahun) }}" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors mobile-small">
                <i class="fas fa-file-pdf"></i>
                <span>Export PDF</span>
            </a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4 mobile-small">
            <i class="fas fa-filter text-ocean-600 mr-2"></i>
            Filter Laporan
        </h3>
        
        <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label for="program_id" class="block text-sm font-medium text-gray-700 mobile-xs">Program</label>
                <select id="program_id" name="program_id" class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                    <option value="">Semua Program</option>
                    {% for program in programs %}
                    <option value="{{ program.id }}" {% if filters.program_id == program.id|string %}selected{% endif %}>
                        {{ program.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label for="sumber_dana_id" class="block text-sm font-medium text-gray-700 mobile-xs">Sumber Dana</label>
                <select id="sumber_dana_id" name="sumber_dana_id" class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                    <option value="">Semua Sumber Dana</option>
                    {% for sumber in sumber_dana %}
                    <option value="{{ sumber.id }}" {% if filters.sumber_dana_id == sumber.id|string %}selected{% endif %}>
                        {{ sumber.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label for="bulan" class="block text-sm font-medium text-gray-700 mobile-xs">Bulan</label>
                <select id="bulan" name="bulan" class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                    <option value="">Semua Bulan</option>
                    {% for i in range(1, 13) %}
                    <option value="{{ i }}" {% if filters.bulan == i|string %}selected{% endif %}>
                        {{ ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'][i] }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label for="tahun" class="block text-sm font-medium text-gray-700 mobile-xs">Tahun</label>
                <select id="tahun" name="tahun" class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                    {% for year in range(2020, 2031) %}
                    <option value="{{ year }}" {% if filters.tahun == year|string %}selected{% endif %}>{{ year }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="md:col-span-2 lg:col-span-4 flex justify-end space-x-3">
                <button type="submit" class="bg-ocean-600 hover:bg-ocean-700 text-white px-6 py-2 rounded-lg transition-colors mobile-small">
                    <i class="fas fa-filter mr-2"></i>Terapkan Filter
                </button>
                <a href="{{ url_for('reports') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors text-center mobile-small">
                    <i class="fas fa-times mr-2"></i>Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-list text-blue-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 mobile-xs">Total Records</p>
                    <p class="text-2xl font-bold text-gray-900 mobile-small">{{ summary.count }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-wallet text-green-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 mobile-xs">Total Pagu</p>
                    <p class="text-xl font-bold text-gray-900 mobile-small">Rp {{ "{:,.0f}".format(summary.total_pagu) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-line text-orange-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 mobile-xs">Total Realisasi</p>
                    <p class="text-xl font-bold text-gray-900 mobile-small">Rp {{ "{:,.0f}".format(summary.total_realisasi) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-percentage text-purple-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 mobile-xs">Rata-rata Fisik</p>
                    <p class="text-2xl font-bold text-gray-900 mobile-small">{{ "%.1f"|format(summary.avg_fisik) }}%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Detail Laporan Realisasi</h3>
                <div class="text-sm text-gray-500 mobile-xs">
                    Total: {{ summary.count }} record{% if summary.count != 1 %}s{% endif %}
                </div>
            </div>
        </div>
        
        <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 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">No</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Program/Kegiatan</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Lokasi</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Pagu Anggaran</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Realisasi Keuangan</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Realisasi Fisik</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Sumber Dana</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Periode</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Status</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for item in report_data %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ loop.index }}</td>
                        <td class="px-4 py-4 mobile-xs">
                            <div class="max-w-xs">
                                <div class="font-medium text-gray-900 text-sm">{{ item.program_name or 'Program tidak diketahui' }}</div>
                                <div class="text-xs text-gray-500">{{ item.kegiatan_name or 'Kegiatan tidak diketahui' }}</div>
                                {% if item.sub_kegiatan_name %}
                                <div class="text-xs text-gray-400">{{ item.sub_kegiatan_name }}</div>
                                {% endif %}
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            <div>{{ item.kecamatan or '-' }}</div>
                            {% if item.desa %}
                            <div class="text-xs text-gray-400">{{ item.desa }}</div>
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">
                            Rp {{ "{:,.0f}".format(item.pagu_anggaran or 0) }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap mobile-xs">
                            <div class="text-sm text-gray-900">Rp {{ "{:,.0f}".format(item.realisasi_keuangan or 0) }}</div>
                            {% if item.pagu_anggaran and item.pagu_anggaran > 0 %}
                            <div class="text-xs text-gray-500">{{ "%.1f"|format((item.realisasi_keuangan or 0) * 100 / item.pagu_anggaran) }}%</div>
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap mobile-xs">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 w-12">
                                    <div class="bg-gray-200 rounded-full h-2">
                                        <div class="bg-purple-600 h-2 rounded-full" style="width: {{ item.realisasi_fisik or 0 }}%"></div>
                                    </div>
                                </div>
                                <div class="ml-2 text-sm text-gray-900">{{ "%.1f"|format(item.realisasi_fisik or 0) }}%</div>
                            </div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {{ item.sumber_dana_name or '-' }}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {% if item.bulan and item.tahun %}
                            {{ ['', 'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'][item.bulan] }} {{ item.tahun }}
                            {% else %}
                            -
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap mobile-xs">
                            {% if item.status_kontrak == 'Aktif' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 mobile-xs">
                                    Aktif
                                </span>
                            {% elif item.status_kontrak == 'Selesai' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 mobile-xs">
                                    Selesai
                                </span>
                            {% else %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 mobile-xs">
                                    {{ item.status_kontrak or '-' }}
                                </span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                
                <!-- Summary Row -->
                {% if report_data %}
                <tfoot class="bg-gray-50">
                    <tr class="font-semibold">
                        <td colspan="3" class="px-4 py-4 text-sm text-gray-900 mobile-xs">TOTAL</td>
                        <td class="px-4 py-4 text-sm text-gray-900 mobile-xs">Rp {{ "{:,.0f}".format(summary.total_pagu) }}</td>
                        <td class="px-4 py-4 text-sm text-gray-900 mobile-xs">Rp {{ "{:,.0f}".format(summary.total_realisasi) }}</td>
                        <td class="px-4 py-4 text-sm text-gray-900 mobile-xs">{{ "%.1f"|format(summary.avg_fisik) }}%</td>
                        <td colspan="3" class="px-4 py-4 text-sm text-gray-500 mobile-xs">{{ summary.count }} record{% if summary.count != 1 %}s{% endif %}</td>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
            
            {% if not report_data %}
            <div class="text-center py-12">
                <i class="fas fa-file-alt text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-500 mobile-small">Tidak ada data laporan untuk filter yang dipilih</p>
                <p class="text-gray-400 text-sm mt-2 mobile-xs">Coba ubah filter atau tambah data realisasi terlebih dahulu</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Quick Report Templates -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4 mobile-small">
            <i class="fas fa-bolt text-ocean-600 mr-2"></i>
            Template Laporan Cepat
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button onclick="generateMonthlyReport()" class="p-4 border border-gray-200 rounded-lg hover:bg-ocean-50 hover:border-ocean-300 transition-colors text-left">
                <div class="flex items-center mb-2">
                    <i class="fas fa-calendar-alt text-ocean-600 mr-2"></i>
                    <span class="font-medium text-gray-900 mobile-small">Laporan Bulanan</span>
                </div>
                <p class="text-sm text-gray-500 mobile-xs">Laporan realisasi bulan ini</p>
            </button>
            
            <button onclick="generateQuarterlyReport()" class="p-4 border border-gray-200 rounded-lg hover:bg-green-50 hover:border-green-300 transition-colors text-left">
                <div class="flex items-center mb-2">
                    <i class="fas fa-chart-pie text-green-600 mr-2"></i>
                    <span class="font-medium text-gray-900 mobile-small">Laporan Triwulan</span>
                </div>
                <p class="text-sm text-gray-500 mobile-xs">Laporan realisasi per triwulan</p>
            </button>
            
            <button onclick="generateAnnualReport()" class="p-4 border border-gray-200 rounded-lg hover:bg-purple-50 hover:border-purple-300 transition-colors text-left">
                <div class="flex items-center mb-2">
                    <i class="fas fa-calendar text-purple-600 mr-2"></i>
                    <span class="font-medium text-gray-900 mobile-small">Laporan Tahunan</span>
                </div>
                <p class="text-sm text-gray-500 mobile-xs">Laporan realisasi seluruh tahun</p>
            </button>
        </div>
    </div>
</div>

<script>
function generateMonthlyReport() {
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth() + 1;
    const currentYear = currentDate.getFullYear();
    
    // Redirect to reports with current month filter
    window.location.href = `{{ url_for('reports') }}?bulan=${currentMonth}&tahun=${currentYear}`;
}

function generateQuarterlyReport() {
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth() + 1;
    const currentYear = currentDate.getFullYear();
    
    // Determine current quarter
    let quarter;
    if (currentMonth <= 3) {
        quarter = 1;
    } else if (currentMonth <= 6) {
        quarter = 2;
    } else if (currentMonth <= 9) {
        quarter = 3;
    } else {
        quarter = 4;
    }
    
    // Redirect to quarterly report
    window.location.href = `/reports/quarterly?quarter=${quarter}&year=${currentYear}`;
}

function generateAnnualReport() {
    const currentYear = new Date().getFullYear();
    
    // Redirect to reports with current year filter
    window.location.href = `{{ url_for('reports') }}?tahun=${currentYear}`;
}

// Auto-refresh charts when filters change
document.addEventListener('DOMContentLoaded', function() {
    const filterForm = document.querySelector('form');
    const filterInputs = filterForm.querySelectorAll('select');
    
    filterInputs.forEach(input => {
        input.addEventListener('change', function() {
            // You can add auto-submit or update preview here
        });
    });
});
</script>
{% endblock %}