{% extends 'admin_panel/base.html' %}
{% load static %}
{% load beneficiary_filters %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/beneficiaries/beneficiaries.css' %}">
<style>
.report-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #3b82f6;
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.report-card.success {
    border-left-color: #10b981;
}

.report-card.warning {
    border-left-color: #f59e0b;
}

.report-card.danger {
    border-left-color: #ef4444;
}

.report-card.info {
    border-left-color: #6366f1;
}

.report-card .icon {
    font-size: 2.5rem;
    opacity: 0.2;
    position: absolute;
    right: 20px;
    top: 20px;
}

.report-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1f2937;
}

.report-card p {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 500;
}

.filter-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.filter-section h5 {
    margin-bottom: 20px;
    color: #1f2937;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-export-excel {
    background: #10b981;
    color: white;
    border: none;
}

.btn-export-excel:hover {
    background: #059669;
    color: white;
}

.btn-export-pdf {
    background: #ef4444;
    color: white;
    border: none;
}

.btn-export-pdf:hover {
    background: #dc2626;
    color: white;
}

.chart-container {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    position: relative;
    height: 400px;
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-table-container {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow-x: auto;
}

.table-responsive {
    margin-top: 16px;
}

.table {
    margin: 0;
}

.table thead th {
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    border: none;
    padding: 12px;
    font-size: 0.875rem;
}

.table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-color: #e5e7eb;
}

.table tbody tr:hover {
    background: #f9fafb;
}

.badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.813rem;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.page-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.page-header h4 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
    font-size: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.category-stats-table {
    margin-top: 16px;
}

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 10px 14px;
}

.form-control:focus, .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary {
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 500;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: #6b7280;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 500;
}

.btn-secondary:hover {
    background: #4b5563;
}
</style>
{% endblock extra_css %}


{% block content %}
<div class="beneficiaries-wrapper">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="page-header">
            <div>
                <h4>{{ title }}</h4>
                <p class="text-muted mb-0">Laporan lengkap data penerima bantuan sosial</p>
            </div>
            <div class="export-buttons">
                <a href="{% url 'beneficiaries:admin_export_beneficiaries_excel' %}?{{ request.GET.urlencode }}" 
                   class="btn btn-export btn-export-excel">
                    <i class="fas fa-file-excel"></i>
                    <span>Export Excel</span>
                </a>
                <a href="{% url 'beneficiaries:admin_export_beneficiaries_pdf' %}?{{ request.GET.urlencode }}" 
                   class="btn btn-export btn-export-pdf">
                    <i class="fas fa-file-pdf"></i>
                    <span>Export PDF</span>
                </a>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="filter-section">
            <h5>
                <i class="fas fa-filter"></i>
                Filter Laporan
            </h5>
            <form method="get" action="{% url 'beneficiaries:admin_beneficiaries_reports' %}" id="filterForm">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Kategori</label>
                        <select name="category" class="form-select">
                            <option value="">Semua Kategori</option>
                            {% for cat in all_categories %}
                            <option value="{{ cat.id }}" {% if category_filter == cat.id|stringformat:"s" %}selected{% endif %}>
                                {{ cat.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">Semua Status</option>
                            <option value="aktif" {% if status_filter == "aktif" %}selected{% endif %}>Aktif</option>
                            <option value="tidak_aktif" {% if status_filter == "tidak_aktif" %}selected{% endif %}>Tidak Aktif</option>
                            <option value="lulus" {% if status_filter == "lulus" %}selected{% endif %}>Lulus</option>
                            <option value="meninggal" {% if status_filter == "meninggal" %}selected{% endif %}>Meninggal</option>
                            <option value="pindah" {% if status_filter == "pindah" %}selected{% endif %}>Pindah</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Status Ekonomi</label>
                        <select name="economic_status" class="form-select">
                            <option value="">Semua</option>
                            <option value="sangat_miskin" {% if economic_filter == "sangat_miskin" %}selected{% endif %}>Sangat Miskin</option>
                            <option value="miskin" {% if economic_filter == "miskin" %}selected{% endif %}>Miskin</option>
                            <option value="rentan_miskin" {% if economic_filter == "rentan_miskin" %}selected{% endif %}>Rentan Miskin</option>
                            <option value="tidak_miskin" {% if economic_filter == "tidak_miskin" %}selected{% endif %}>Tidak Miskin</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tanggal Dari</label>
                        <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tanggal Sampai</label>
                        <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                {% if category_filter or status_filter or economic_filter or date_from or date_to %}
                <div class="mt-3">
                    <a href="{% url 'beneficiaries:admin_beneficiaries_reports' %}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-times"></i> Reset Filter
                    </a>
                </div>
                {% endif %}
            </form>
        </div>

        <!-- Statistics Cards -->
        <div class="stats-grid">
            <div class="report-card">
                <div class="icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>{{ total_beneficiaries|default:0 }}</h3>
                <p>Total Penerima Bantuan</p>
            </div>
            <div class="report-card success">
                <div class="icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h3>{{ active_beneficiaries|default:0 }}</h3>
                <p>Penerima Aktif</p>
            </div>
            <div class="report-card warning">
                <div class="icon">
                    <i class="fas fa-user-times"></i>
                </div>
                <h3>{{ inactive_beneficiaries|default:0 }}</h3>
                <p>Penerima Tidak Aktif</p>
            </div>
            <div class="report-card info">
                <div class="icon">
                    <i class="fas fa-clipboard-check"></i>
                </div>
                <h3>{{ verified_beneficiaries|default:0 }}</h3>
                <p>Terverifikasi</p>
            </div>
        </div>

        <!-- Distribution Statistics -->
        <div class="stats-grid">
            <div class="report-card">
                <div class="icon">
                    <i class="fas fa-hand-holding-usd"></i>
                </div>
                <h3>{{ total_distributions|default:0 }}</h3>
                <p>Total Distribusi Bantuan</p>
            </div>
            <div class="report-card success">
                <div class="icon">
                    <i class="fas fa-check-double"></i>
                </div>
                <h3>{{ completed_distributions|default:0 }}</h3>
                <p>Distribusi Selesai</p>
            </div>
            <div class="report-card warning">
                <div class="icon">
                    <i class="fas fa-clock"></i>
                </div>
                <h3>{{ pending_distributions|default:0 }}</h3>
                <p>Menunggu Distribusi</p>
            </div>
            <div class="report-card info">
                <div class="icon">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <h3>{{ total_amount_distributed|rupiah }}</h3>
                <p>Total Dana Tersalurkan</p>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="row mb-4">
            <div class="col-lg-6">
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-chart-line"></i>
                        Tren Pendaftaran Bulanan
                    </div>
                    <canvas id="monthlyRegistrationChart"></canvas>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="chart-container">
                    <div class="chart-title">
                        <i class="fas fa-chart-bar"></i>
                        Distribusi Bantuan Bulanan
                    </div>
                    <canvas id="monthlyDistributionChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Category Statistics -->
        <div class="row mb-4">
            <div class="col-lg-6">
                <div class="data-table-container">
                    <div class="chart-title">
                        <i class="fas fa-layer-group"></i>
                        Statistik Berdasarkan Kategori
                    </div>
                    <div class="table-responsive category-stats-table">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Kategori</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center">Aktif</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for cat in category_stats %}
                                <tr>
                                    <td><strong>{{ cat.name }}</strong></td>
                                    <td class="text-center">{{ cat.count }}</td>
                                    <td class="text-center">{{ cat.active_count }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="3" class="text-center text-muted">Tidak ada data</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="data-table-container">
                    <div class="chart-title">
                        <i class="fas fa-chart-pie"></i>
                        Program Bantuan Tersalurkan
                    </div>
                    <div class="table-responsive category-stats-table">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Program</th>
                                    <th class="text-center">Penerima</th>
                                    <th class="text-end">Total Dana</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for aid in aid_distribution_stats %}
                                <tr>
                                    <td><strong>{{ aid.aid__name }}</strong></td>
                                    <td class="text-center">{{ aid.count }}</td>
                                    <td class="text-end">{{ aid.total_amount|rupiah }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="3" class="text-center text-muted">Tidak ada data</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Table -->
        <div class="data-table-container">
            <div class="chart-title">
                <i class="fas fa-table"></i>
                Data Penerima Bantuan (100 Terakhir)
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>NIK</th>
                            <th>Nama</th>
                            <th>Kategori</th>
                            <th>Status Ekonomi</th>
                            <th class="text-end">Pendapatan</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Tanggal Daftar</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for b in beneficiaries_list %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ b.person.nik }}</td>
                            <td><strong>{{ b.person.name }}</strong></td>
                            <td>{{ b.category.name|default:"-" }}</td>
                            <td>
                                {% if b.economic_status == 'sangat_miskin' %}
                                <span class="badge badge-danger">{{ b.get_economic_status_display }}</span>
                                {% elif b.economic_status == 'miskin' %}
                                <span class="badge badge-warning">{{ b.get_economic_status_display }}</span>
                                {% else %}
                                <span class="badge badge-info">{{ b.get_economic_status_display }}</span>
                                {% endif %}
                            </td>
                            <td class="text-end">{{ b.monthly_income|rupiah }}</td>
                            <td class="text-center">
                                {% if b.status == 'aktif' %}
                                <span class="badge badge-success">{{ b.get_status_display }}</span>
                                {% else %}
                                <span class="badge badge-danger">{{ b.get_status_display }}</span>
                                {% endif %}
                            </td>
                            <td class="text-center">{{ b.registration_date|date:"d M Y" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                Tidak ada data penerima bantuan
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Chart defaults
    Chart.defaults.font.family = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
    Chart.defaults.color = '#6b7280';
    
    // Monthly Registration Chart
    const registrationCtx = document.getElementById('monthlyRegistrationChart');
    if (registrationCtx) {
        new Chart(registrationCtx, {
            type: 'line',
            data: {
                labels: {{ month_labels|safe }},
                datasets: [{
                    label: 'Pendaftaran',
                    data: {{ month_values|safe }},
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointBackgroundColor: '#3b82f6',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        cornerRadius: 8,
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            size: 13
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    }
    
    // Monthly Distribution Chart
    const distributionCtx = document.getElementById('monthlyDistributionChart');
    if (distributionCtx) {
        new Chart(distributionCtx, {
            type: 'bar',
            data: {
                labels: {{ dist_month_labels|safe }},
                datasets: [{
                    label: 'Jumlah Distribusi',
                    data: {{ dist_month_counts|safe }},
                    backgroundColor: '#10b981',
                    borderRadius: 6,
                    borderSkipped: false
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        cornerRadius: 8,
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            size: 13
                        },
                        callbacks: {
                            afterLabel: function(context) {
                                const amounts = {{ dist_month_amounts|safe }};
                                const amount = amounts[context.dataIndex] || 0;
                                return 'Total: Rp ' + amount.toLocaleString('id-ID');
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    }
});
</script>
{% endblock extra_js %}