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

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

{% block content %}
<!-- Statistics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6 lg:mb-8">
    <!-- Total Saldo -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-4 lg:p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-wallet text-2xl lg:text-3xl text-green-600"></i>
                </div>
                <div class="ml-4 lg:ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Saldo</dt>
                        <dd class="text-lg font-medium text-gray-900">Rp {{ saldo|number_idr|default:"0" }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Pemasukan Bulan Ini -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-4 lg:p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-arrow-up text-2xl lg:text-3xl text-blue-600"></i>
                </div>
                <div class="ml-4 lg:ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Pemasukan Bulan Ini</dt>
                        <dd class="text-lg font-medium text-gray-900">Rp {{ pemasukan_bulan_ini|number_idr|default:"0" }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Pengeluaran Bulan Ini -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-4 lg:p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-arrow-down text-2xl lg:text-3xl text-red-600"></i>
                </div>
                <div class="ml-4 lg:ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Pengeluaran Bulan Ini</dt>
                        <dd class="text-lg font-medium text-gray-900">Rp {{ pengeluaran_bulan_ini|number_idr|default:"0" }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Total Transaksi -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-4 lg:p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-chart-line text-2xl lg:text-3xl text-purple-600"></i>
                </div>
                <div class="ml-4 lg:ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Transaksi</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ transaksi_terbaru|length|add:donasi_terbaru|length }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts and Tables -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-6 lg:mb-8">
    <!-- Chart -->
    <div class="bg-white shadow rounded-lg p-4 lg:p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Grafik Pemasukan vs Pengeluaran (6 Bulan Terakhir)</h3>
        <div class="relative h-64 lg:h-80">
            <canvas id="financialChart" width="400" height="200"></canvas>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="bg-white shadow rounded-lg p-4 lg:p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Aksi Cepat</h3>
        <div class="space-y-3">
            <a href="{% url 'keuangan:transaksi_create' %}" 
               class="flex items-center p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-plus-circle text-green-600 mr-3"></i>
                <span class="text-green-800 font-medium">Tambah Transaksi</span>
            </a>
            
            <a href="{% url 'keuangan:donasi_create' %}" 
               class="flex items-center p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-hand-holding-heart text-blue-600 mr-3"></i>
                <span class="text-blue-800 font-medium">Tambah Donasi</span>
            </a>
            
            <a href="{% url 'keuangan:anggota_iuran' %}" 
               class="flex items-center p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors">
                <i class="fas fa-users text-purple-600 mr-3"></i>
                <span class="text-purple-800 font-medium">Kelola Iuran Anggota</span>
            </a>
            
            <a href="{% url 'keuangan:laporan_list' %}" 
               class="flex items-center p-3 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors">
                <i class="fas fa-chart-bar text-orange-600 mr-3"></i>
                <span class="text-orange-800 font-medium">Lihat Laporan</span>
            </a>
        </div>
    </div>
</div>

<!-- Recent Transactions -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
    <!-- Recent Transactions -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Transaksi Terbaru</h3>
        </div>
        <div class="divide-y divide-gray-200">
            {% for transaksi in transaksi_terbaru %}
            <div class="px-4 lg:px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate">{{ transaksi.judul }}</p>
                        <p class="text-sm text-gray-500">{{ transaksi.tanggal|date:"d M Y" }}</p>
                    </div>
                    <div class="text-right ml-4">
                        <p class="text-sm font-medium {% if transaksi.tipe == 'pemasukan' %}text-green-600{% else %}text-red-600{% endif %}">
                            {% if transaksi.tipe == 'pemasukan' %}+{% else %}-{% endif %}Rp {{ transaksi.jumlah|number_idr }}
                        </p>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                            {% if transaksi.status == 'approved' %}bg-green-100 text-green-800
                            {% elif transaksi.status == 'pending' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-red-100 text-red-800{% endif %}">
                            {{ transaksi.get_status_display }}
                        </span>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="px-4 lg:px-6 py-8 text-center text-gray-500">
                <i class="fas fa-inbox text-3xl mb-2"></i>
                <p>Belum ada transaksi</p>
            </div>
            {% endfor %}
        </div>
        <div class="px-4 lg:px-6 py-3 bg-gray-50">
            <a href="{% url 'keuangan:transaksi_list' %}" class="text-sm text-green-600 hover:text-green-500">
                Lihat semua transaksi →
            </a>
        </div>
    </div>
    
    <!-- Recent Donations -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Donasi Terbaru</h3>
        </div>
        <div class="divide-y divide-gray-200">
            {% for donasi in donasi_terbaru %}
            <div class="px-4 lg:px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate">{{ donasi.donatur_nama }}</p>
                        <p class="text-sm text-gray-500">{{ donasi.created_at|date:"d M Y" }}</p>
                    </div>
                    <div class="text-right ml-4">
                        <p class="text-sm font-medium text-green-600">Rp {{ donasi.jumlah|number_idr }}</p>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                            {% if donasi.status == 'confirmed' %}bg-green-100 text-green-800
                            {% elif donasi.status == 'pending' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-red-100 text-red-800{% endif %}">
                            {{ donasi.get_status_display }}
                        </span>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="px-4 lg:px-6 py-8 text-center text-gray-500">
                <i class="fas fa-heart text-3xl mb-2"></i>
                <p>Belum ada donasi</p>
            </div>
            {% endfor %}
        </div>
        <div class="px-4 lg:px-6 py-3 bg-gray-50">
            <a href="{% url 'keuangan:donasi_list' %}" class="text-sm text-green-600 hover:text-green-500">
                Lihat semua donasi →
            </a>
        </div>
    </div>
</div>

<!-- Recent Notifications -->
{% if notifikasi_terbaru %}
<div class="mt-6 lg:mt-8">
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900">Notifikasi Terbaru</h3>
                <div class="flex items-center space-x-2">
                    {% if notifikasi_unread_count > 0 %}
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ notifikasi_unread_count }} belum dibaca
                        </span>
                    {% endif %}
                    <a href="{% url 'keuangan:notifikasi_list' %}" class="text-sm text-green-600 hover:text-green-500">
                        Lihat semua →
                    </a>
                </div>
            </div>
        </div>
        <div class="divide-y divide-gray-200">
            {% for notif in notifikasi_terbaru %}
            <div class="px-4 lg:px-6 py-4 {% if not notif.is_read %}bg-blue-50 border-l-4 border-l-blue-500{% endif %}">
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        {% if notif.tipe == 'transaksi_baru' %}
                            <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-exchange-alt text-green-600 text-sm"></i>
                            </div>
                        {% elif notif.tipe == 'donasi_baru' %}
                            <div class="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-hand-holding-heart text-purple-600 text-sm"></i>
                            </div>
                        {% elif notif.tipe == 'iuran_telat' %}
                            <div class="h-8 w-8 bg-red-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
                            </div>
                        {% elif notif.tipe == 'laporan_ready' %}
                            <div class="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-chart-bar text-blue-600 text-sm"></i>
                            </div>
                        {% elif notif.tipe == 'saldo_rendah' %}
                            <div class="h-8 w-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-exclamation-circle text-yellow-600 text-sm"></i>
                            </div>
                        {% else %}
                            <div class="h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-info-circle text-gray-600 text-sm"></i>
                            </div>
                        {% endif %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center space-x-2">
                            <p class="text-sm font-medium text-gray-900 truncate">{{ notif.judul }}</p>
                            {% if notif.prioritas == 'urgent' %}
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    Urgent
                                </span>
                            {% endif %}
                            {% if not notif.is_read %}
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    Baru
                                </span>
                            {% endif %}
                        </div>
                        <p class="mt-1 text-sm text-gray-600 line-clamp-2">{{ notif.pesan }}</p>
                        <div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
                            <span>
                                <i class="fas fa-clock mr-1"></i>
                                {{ notif.created_at|date:"d M Y H:i" }}
                            </span>
                            <span>
                                <i class="fas fa-tag mr-1"></i>
                                {{ notif.get_tipe_display }}
                            </span>
                        </div>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="{% url 'keuangan:notifikasi_detail' notif.id %}" 
                           class="text-xs text-gray-500 hover:text-gray-700">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="px-4 lg:px-6 py-3 bg-gray-50">
            <div class="flex items-center justify-between">
                <a href="{% url 'keuangan:pengaturan_notifikasi' %}" class="text-sm text-gray-600 hover:text-gray-500">
                    <i class="fas fa-cog mr-1"></i>
                    Pengaturan Notifikasi
                </a>
                <a href="{% url 'keuangan:notifikasi_list' %}" class="text-sm text-green-600 hover:text-green-500">
                    Lihat semua notifikasi →
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
    // Chart.js configuration
    const ctx = document.getElementById('financialChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ labels|safe }},
            datasets: [{
                label: 'Pemasukan',
                data: {{ pemasukan_data|safe }},
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                tension: 0.1,
                fill: true
            }, {
                label: 'Pengeluaran',
                data: {{ pengeluaran_data|safe }},
                borderColor: 'rgb(239, 68, 68)',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + value.toLocaleString('id-ID');
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': Rp ' + context.parsed.y.toLocaleString('id-ID');
                        }
                    }
                },
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
</script>
{% endblock %}