{% extends "base.html" %}

{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Welcome Section -->
    <div class="bg-gradient-to-r from-ocean-600 to-ocean-700 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2 mobile-small">
                    Selamat Datang, {{ session.username }}! 
                    <span class="text-xl">👋</span>
                </h1>
                <p class="text-ocean-100 mobile-xs">
                    {% if session.role == 'super_admin' %}
                        Dashboard Super Admin - Monitoring seluruh bidang
                    {% else %}
                        Dashboard Admin {{ session.bidang|title }} - Tahun {{ stats.tahun or "2025" }}
                    {% endif %}
                </p>
            </div>
            <div class="hidden md:block">
                <div class="text-right">
                    <div class="text-3xl mb-2">🐟</div>
                    <div class="text-xs text-ocean-200 mobile-xs">SIRIPIKAN</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
        <!-- Total Pagu -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
            <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-wallet text-blue-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-2xl font-bold text-gray-900 mobile-small">
                        Rp {{ "{:,.0f}".format(stats.total_pagu) }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Total Realisasi -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
            <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-chart-line text-green-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-2xl font-bold text-gray-900 mobile-small">
                        Rp {{ "{:,.0f}".format(stats.total_realisasi) }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Realisasi Fisik -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
            <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-tasks text-purple-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 mobile-xs">Realisasi Fisik</p>
                    <p class="text-2xl font-bold text-gray-900 mobile-small">{{ "%.1f"|format(stats.avg_fisik) }}%</p>
                </div>
            </div>
        </div>

        <!-- Realisasi Keuangan -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
            <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-coins text-orange-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500 mobile-xs">Realisasi Keuangan</p>
                    <p class="text-2xl font-bold text-gray-900 mobile-small">{{ "%.1f"|format(stats.avg_keuangan) }}%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Monthly Progress Chart -->
        <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-chart-area text-ocean-600 mr-2"></i>
                Realisasi Bulanan
            </h3>
            <div class="h-64">
                <canvas id="monthlyChart"></canvas>
            </div>
        </div>

        <!-- Progress Summary -->
        <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-chart-pie text-ocean-600 mr-2"></i>
                Ringkasan Progress
            </h3>
            <div class="space-y-4">
                <!-- Fisik Progress -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm font-medium text-gray-700 mobile-xs">Progress Fisik</span>
                        <span class="text-sm font-bold text-purple-600 mobile-xs">{{ "%.1f"|format(stats.avg_fisik) }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-purple-600 h-3 rounded-full transition-all duration-1000" style="width: {{ stats.avg_fisik }}%"></div>
                    </div>
                </div>

                <!-- Keuangan Progress -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm font-medium text-gray-700 mobile-xs">Progress Keuangan</span>
                        <span class="text-sm font-bold text-orange-600 mobile-xs">{{ "%.1f"|format(stats.avg_keuangan) }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-orange-600 h-3 rounded-full transition-all duration-1000" style="width: {{ stats.avg_keuangan }}%"></div>
                    </div>
                </div>

                <!-- Sisa Anggaran -->
                <div class="border-t pt-4">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-600 mobile-xs">Sisa Anggaran</p>
                                <p class="text-lg font-bold text-gray-900 mobile-small">
                                    Rp {{ "{:,.0f}".format(stats.sisa_anggaran) }}
                                </p>
                            </div>
                            <div class="text-2xl">
                                {% if stats.sisa_anggaran > 0 %}💰{% else %}✅{% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <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>
            Aksi Cepat
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ url_for('realisasi') }}" class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:bg-ocean-50 hover:border-ocean-300 transition-colors group">
                <i class="fas fa-plus-circle text-2xl text-ocean-600 group-hover:text-ocean-700 mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-ocean-700 text-center mobile-xs">Tambah Realisasi</span>
            </a>
            
            <a href="/reports" class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:bg-green-50 hover:border-green-300 transition-colors group">
                <i class="fas fa-file-alt text-2xl text-green-600 group-hover:text-green-700 mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-green-700 text-center mobile-xs">Lihat Laporan</span>
            </a>
            
            <a href="/reports/quarterly" class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:bg-indigo-50 hover:border-indigo-300 transition-colors group">
                <i class="fas fa-chart-pie text-2xl text-indigo-600 group-hover:text-indigo-700 mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-indigo-700 text-center mobile-xs">Laporan Triwulan</span>
            </a>
            
            {% if session.role == 'super_admin' %}
            <a href="{{ url_for('users') }}" class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-300 transition-colors group">
                <i class="fas fa-users text-2xl text-blue-600 group-hover:text-blue-700 mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center mobile-xs">Kelola User</span>
            </a>
            
            <a href="{{ url_for('master_data') }}" class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:bg-purple-50 hover:border-purple-300 transition-colors group">
                <i class="fas fa-database text-2xl text-purple-600 group-hover:text-purple-700 mb-2"></i>
                <span class="text-sm font-medium text-gray-700 group-hover:text-purple-700 text-center mobile-xs">Master Data</span>
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Recent Activity (if there are low performance indicators) -->
    {% if stats.avg_fisik < 50 or stats.avg_keuangan < 50 %}
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800 mobile-xs">
                    Perhatian: Realisasi di Bawah Target
                </h3>
                <div class="mt-2 text-sm text-yellow-700 mobile-xs">
                    <ul class="list-disc pl-5 space-y-1">
                        {% if stats.avg_fisik < 50 %}
                        <li>Realisasi fisik masih {{ "%.1f"|format(stats.avg_fisik) }}% (target minimal 50%)</li>
                        {% endif %}
                        {% if stats.avg_keuangan < 50 %}
                        <li>Realisasi keuangan masih {{ "%.1f"|format(stats.avg_keuangan) }}% (target minimal 50%)</li>
                        {% endif %}
                    </ul>
                </div>
                <div class="mt-3">
                    <a href="{{ url_for('realisasi') }}" class="text-sm font-medium text-yellow-800 hover:text-yellow-900 underline mobile-xs">
                        Perbarui data realisasi →
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Monthly Chart
    const ctx = document.getElementById('monthlyChart').getContext('2d');
    const monthlyData = {{ monthly_data | tojson | safe }};
    
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
    const labels = [];
    const fisikData = [];
    const keuanganData = [];
    
    // Initialize arrays with zeros
    for (let i = 1; i <= 12; i++) {
        labels.push(months[i-1]);
        fisikData.push(0);
        keuanganData.push(0);
    }
    
    // Fill with actual data
    monthlyData.forEach(item => {
        if (item.bulan >= 1 && item.bulan <= 12) {
            fisikData[item.bulan - 1] = item.realisasi_fisik || 0;
            keuanganData[item.bulan - 1] = (item.realisasi_keuangan || 0) / 1000000; // Convert to millions
        }
    });
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Realisasi Fisik (%)',
                data: fisikData,
                borderColor: '#8b5cf6',
                backgroundColor: 'rgba(139, 92, 246, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: 'Realisasi Keuangan (Juta)',
                data: keuanganData,
                borderColor: '#f97316',
                backgroundColor: 'rgba(249, 115, 22, 0.1)',
                tension: 0.4,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    labels: {
                        font: {
                            size: window.innerWidth < 640 ? 10 : 12
                        }
                    }
                }
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: 'Fisik (%)',
                        font: {
                            size: window.innerWidth < 640 ? 10 : 12
                        }
                    },
                    ticks: {
                        font: {
                            size: window.innerWidth < 640 ? 8 : 10
                        }
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: 'Keuangan (Juta)',
                        font: {
                            size: window.innerWidth < 640 ? 10 : 12
                        }
                    },
                    grid: {
                        drawOnChartArea: false,
                    },
                    ticks: {
                        font: {
                            size: window.innerWidth < 640 ? 8 : 10
                        }
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: window.innerWidth < 640 ? 8 : 10
                        }
                    }
                }
            }
        }
    });
    
    // Add animation to progress bars
    setTimeout(() => {
        const progressBars = document.querySelectorAll('.bg-purple-600, .bg-orange-600');
        progressBars.forEach(bar => {
            bar.style.transform = 'scaleX(1)';
        });
    }, 500);
});
</script>
{% endblock %}