{% extends "base.html" %}

{% block page_title %}Laporan {{ summary.quarter_name }} {{ summary.year }}{% 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-chart-pie text-ocean-600 mr-2"></i>
                Laporan {{ summary.quarter_name }} {{ summary.year }}
            </h1>
            <p class="text-gray-600 mt-1 mobile-xs">
                {% if session.role == 'super_admin' %}
                    Laporan realisasi triwulan semua bidang
                {% else %}
                    Laporan realisasi triwulan bidang {{ session.bidang|title }}
                {% endif %}
            </p>
        </div>
        <div class="flex space-x-2">
            <a href="/reports" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors mobile-small">
                <i class="fas fa-arrow-left"></i>
                <span>Kembali</span>
            </a>
            <a href="{{ url_for('export_quarterly_pdf', quarter=summary.quarter, year=summary.year) }}" 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>
            <a href="{{ url_for('export_quarterly_excel', quarter=summary.quarter, year=summary.year) }}" 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>
        </div>
    </div>

    <!-- Quarter Navigation -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center space-x-4">
                <label class="text-sm font-medium text-gray-700 mobile-xs">Pilih Periode:</label>
                <select id="yearSelect" onchange="changeQuarter()" class="border border-gray-300 rounded-lg px-3 py-2 text-sm mobile-xs">
                    {% for year in range(2020, 2031) %}
                    <option value="{{ year }}" {% if year == summary.year %}selected{% endif %}>{{ year }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex space-x-2">
                {% for q in range(1, 5) %}
                <a href="/reports/quarterly?quarter={{ q }}&year={{ summary.year }}"
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-colors mobile-xs
                   {% if q == summary.quarter %}bg-ocean-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                    Q{{ q }}
                </a>
                {% endfor %}
            </div>
        </div>
    </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>
                    <p class="text-xs text-gray-500 mobile-xs">{{ "%.1f"|format(summary.percentage_keuangan) }}% dari 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-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>

    <!-- Monthly Breakdown -->
    <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-calendar-alt text-ocean-600 mr-2"></i>
            Breakdown Bulanan {{ summary.quarter_name }}
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% for month in months %}
            {% set month_data = monthly_breakdown[month] %}
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="text-center">
                    <h4 class="font-medium text-gray-900 mb-2 mobile-small">{{ month_data.name }}</h4>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm mobile-xs">
                            <span class="text-gray-500">Records:</span>
                            <span class="font-medium">{{ month_data.count }}</span>
                        </div>
                        <div class="flex justify-between text-sm mobile-xs">
                            <span class="text-gray-500">Pagu:</span>
                            <span class="font-medium">Rp {{ "{:,.0f}".format(month_data.total_pagu) }}</span>
                        </div>
                        <div class="flex justify-between text-sm mobile-xs">
                            <span class="text-gray-500">Realisasi:</span>
                            <span class="font-medium">Rp {{ "{:,.0f}".format(month_data.total_realisasi) }}</span>
                        </div>
                        <div class="flex justify-between text-sm mobile-xs">
                            <span class="text-gray-500">Fisik:</span>
                            <span class="font-medium">{{ "%.1f"|format(month_data.avg_fisik) }}%</span>
                        </div>
                        
                        <!-- Progress Bar -->
                        <div class="mt-3">
                            <div class="bg-gray-200 rounded-full h-2">
                                <div class="bg-ocean-600 h-2 rounded-full transition-all duration-1000" 
                                     style="width: {{ month_data.avg_fisik }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Bidang Breakdown (Super Admin only) -->
    {% if session.role == 'super_admin' and bidang_breakdown %}
    <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-building text-ocean-600 mr-2"></i>
            Breakdown per Bidang
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {% for bidang_key, bidang_data in bidang_breakdown.items() %}
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="text-center">
                    <h4 class="font-medium text-gray-900 mb-2 mobile-small">{{ bidang_data.name }}</h4>
                    <div class="space-y-2">
                        <div class="text-2xl font-bold text-ocean-600 mobile-small">{{ bidang_data.count }}</div>
                        <div class="text-xs text-gray-500 mobile-xs">Records</div>
                        <div class="text-sm font-medium text-gray-900 mobile-xs">
                            Rp {{ "{:,.0f}".format(bidang_data.total_realisasi) }}
                        </div>
                        <div class="text-xs text-gray-500 mobile-xs">
                            Fisik: {{ "%.1f"|format(bidang_data.avg_fisik) }}%
                        </div>
                        
                        <!-- Progress Bar -->
                        <div class="mt-2">
                            <div class="bg-gray-200 rounded-full h-2">
                                <div class="bg-purple-600 h-2 rounded-full transition-all duration-1000" 
                                     style="width: {{ bidang_data.avg_fisik }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Detail Data 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 Data {{ summary.quarter_name }}</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">Bulan</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</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Realisasi</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Fisik</th>
                        {% if session.role == 'super_admin' %}
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Bidang</th>
                        {% endif %}
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for item in quarterly_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 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {{ ['', 'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'][item.bulan] if item.bulan else '-' }}
                        </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>
                            </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>
                        {% if session.role == 'super_admin' %}
                        <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {{ item.bidang|title if item.bidang else '-' }}
                        </td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </tbody>
                
                <!-- Summary Row -->
                {% if quarterly_data %}
                <tfoot class="bg-gray-50">
                    <tr class="font-semibold">
                        <td colspan="4" class="px-4 py-4 text-sm text-gray-900 mobile-xs">TOTAL {{ summary.quarter_name.upper() }}</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>
                        {% if session.role == 'super_admin' %}
                        <td class="px-4 py-4 text-sm text-gray-500 mobile-xs">{{ summary.count }} records</td>
                        {% endif %}
                    </tr>
                </tfoot>
                {% endif %}
            </table>
            
            {% if not quarterly_data %}
            <div class="text-center py-12">
                <i class="fas fa-chart-pie text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-500 mobile-small">Tidak ada data untuk {{ summary.quarter_name }} {{ summary.year }}</p>
                <p class="text-gray-400 text-sm mt-2 mobile-xs">Silakan input data realisasi terlebih dahulu</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
function changeQuarter() {
    const year = document.getElementById('yearSelect').value;
    const currentQuarter = {{ summary.quarter }};
    window.location.href = `/reports/quarterly?quarter=${currentQuarter}&year=${year}`;
}

// Animate progress bars on load
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
        const progressBars = document.querySelectorAll('.bg-ocean-600, .bg-purple-600');
        progressBars.forEach(bar => {
            bar.style.transform = 'scaleX(1)';
        });
    }, 500);
});
</script>
{% endblock %}