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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/references/references-general.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                <div class="mb-3 mb-md-0">
                    <h1 class="h3 mb-1 text-dark font-weight-bold">
                        <i class="fas fa-chart-bar text-primary mr-2"></i>
                        Laporan Referensi
                    </h1>
                    <p class="text-muted mb-0">Generate laporan data referensi desa</p>
                </div>
                <div class="d-flex flex-wrap">
                    <a href="{% url 'admin_panel:references_dashboard' %}" class="btn btn-outline-secondary mr-2 mb-2">
                        <i class="fas fa-arrow-left mr-1"></i>
                        Kembali
                    </a>
                    <button class="btn btn-primary mb-2" onclick="generateReport()">
                        <i class="fas fa-download mr-1"></i>
                        Generate Laporan
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-filter mr-2"></i>
                        Filter Laporan
                    </h6>
                </div>
                <div class="card-body">
                    <form id="reportForm">
                        <div class="row">
                            <div class="col-lg-3 col-md-6 mb-3">
                                <label for="report_type" class="form-label">Jenis Laporan</label>
                                <select class="form-control" id="report_type" name="report_type">
                                    <option value="penduduk">Data Penduduk</option>
                                    <option value="keluarga">Data Keluarga</option>
                                    <option value="dusun">Data Dusun</option>
                                    <option value="pelajar">Data Pelajar</option>
                                    <option value="disabilitas">Data Disabilitas</option>
                                    <option value="summary">Ringkasan Data</option>
                                </select>
                            </div>
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label for="format" class="form-label">Format</label>
                                <select class="form-control" id="format" name="format">
                                    <option value="pdf">PDF</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                </select>
                            </div>
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label for="date_from" class="form-label">Dari Tanggal</label>
                                <input type="date" class="form-control" id="date_from" name="date_from">
                            </div>
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label for="date_to" class="form-label">Sampai Tanggal</label>
                                <input type="date" class="form-control" id="date_to" name="date_to">
                            </div>
                            <div class="col-lg-3 col-md-12 mb-3 d-flex align-items-end">
                                <button type="button" class="btn btn-primary mr-2" onclick="previewReport()">
                                    <i class="fas fa-eye mr-1"></i>
                                    Preview
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                                    <i class="fas fa-times mr-1"></i>
                                    Reset
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Penduduk
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">1,234</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Keluarga
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">456</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-home fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Total Dusun
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">12</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-map-marker-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Total Pelajar
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">789</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-graduation-cap fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-lg-8 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-pie mr-2"></i>
                        Grafik Data Penduduk
                    </h6>
                </div>
                <div class="card-body">
                    <canvas id="pendudukChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-file-alt mr-2"></i>
                        Laporan Cepat
                    </h6>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-users text-primary mr-2"></i>
                                Data Penduduk per Dusun
                            </div>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-chart-bar text-success mr-2"></i>
                                Statistik Demografi
                            </div>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-graduation-cap text-info mr-2"></i>
                                Data Pendidikan
                            </div>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-wheelchair text-warning mr-2"></i>
                                Data Disabilitas
                            </div>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-history mr-2"></i>
                        Riwayat Laporan
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Jenis Laporan</th>
                                    <th>Format</th>
                                    <th>Status</th>
                                    <th>Ukuran</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>20 Jan 2024 10:30</td>
                                    <td>Data Penduduk</td>
                                    <td><span class="badge badge-primary">PDF</span></td>
                                    <td><span class="badge badge-success">Selesai</span></td>
                                    <td>2.5 MB</td>
                                    <td>
                                        <button class="btn btn-outline-primary btn-sm mr-1">
                                            <i class="fas fa-download"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>19 Jan 2024 14:20</td>
                                    <td>Statistik Demografi</td>
                                    <td><span class="badge badge-success">Excel</span></td>
                                    <td><span class="badge badge-success">Selesai</span></td>
                                    <td>1.8 MB</td>
                                    <td>
                                        <button class="btn btn-outline-primary btn-sm mr-1">
                                            <i class="fas fa-download"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>18 Jan 2024 09:15</td>
                                    <td>Data Keluarga</td>
                                    <td><span class="badge badge-info">CSV</span></td>
                                    <td><span class="badge badge-warning">Proses</span></td>
                                    <td>-</td>
                                    <td>
                                        <button class="btn btn-outline-secondary btn-sm" disabled>
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>$(document).ready(function() {
    initializeChart();
    setDefaultDates();
});

function setDefaultDates() {
    const today = new Date();
    const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());

    document.getElementById('date_from').value = lastMonth.toISOString().split('T')[0];
    document.getElementById('date_to').value = today.toISOString().split('T')[0];
}

function initializeChart() {
    const ctx = document.getElementById('pendudukChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Laki-laki', 'Perempuan', 'Anak-anak', 'Dewasa'],
            datasets: [{
                data: [650, 584, 300, 934],
                backgroundColor: [
                    '#4e73df',
                    '#1cc88a',
                    '#36b9cc',
                    '#f6c23e'
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                }
            }
        }
    });
}

function previewReport() {
    const reportType = document.getElementById('report_type').value;
    const format = document.getElementById('format').value;
    const dateFrom = document.getElementById('date_from').value;
    const dateTo = document.getElementById('date_to').value;

    if (!dateFrom || !dateTo) {
        showWarning('Pilih rentang tanggal terlebih dahulu');
        return;
    }

    showWarning(`Preview laporan ${reportType} dalam format ${format} dari ${dateFrom} sampai ${dateTo}`);
}

function generateReport() {
    const reportType = document.getElementById('report_type').value;
    const format = document.getElementById('format').value;
    const dateFrom = document.getElementById('date_from').value;
    const dateTo = document.getElementById('date_to').value;

    if (!dateFrom || !dateTo) {
        showWarning('Pilih rentang tanggal terlebih dahulu');
        return;
    }

    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Generating...';
    btn.disabled = true;

    setTimeout(function() {
        btn.innerHTML = originalText;
        btn.disabled = false;
        showWarning(`Laporan ${reportType} berhasil digenerate dalam format ${format}`);
    }, 2000);
}

function resetFilters() {
    document.getElementById('reportForm').reset();
    setDefaultDates();
}
</script>
{% endblock %}