@extends('layouts.app')

@section('title', 'Statistik Laporan - Monev LLDIKTI XV')
@section('page-title', 'Statistik Laporan')

@section('content')
<div class="card mb-4">
    <div class="card-header border-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <h3 class="card-title fw-bold mb-1"><i class="bi bi-bar-chart-line me-2"></i>Diagram Rekapitulasi Laporan</h3>
            <small class="text-secondary">Data otomatis terkonversi menjadi diagram — pilih tahun untuk menarik datanya</small>
        </div>
        <form method="GET" action="{{ route('laporan.statistik') }}" class="d-flex gap-2 align-items-center">
            <label class="text-secondary small text-nowrap">Tarik data tahun:</label>
            <select name="tahun" class="form-select" onchange="this.form.submit()" style="min-width: 150px;">
                <option value="">Semua Tahun</option>
                @foreach($tahunList as $t)
                    <option value="{{ $t }}" @selected((string) $tahun === (string) $t)>{{ $t }}{{ $t == date('Y') ? ' (berjalan)' : '' }}</option>
                @endforeach
            </select>
        </form>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-graph-up-arrow me-2"></i>Program &amp; Dana per Tahun Anggaran</h3>
            </div>
            <div class="card-body">
                <div id="chart-tahun" style="min-height: 300px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-patch-check me-2"></i>Status Validasi Laporan</h3>
            </div>
            <div class="card-body">
                <div id="chart-validasi" style="min-height: 300px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-award me-2"></i>Pemenuhan Luaran Wajib</h3>
            </div>
            <div class="card-body">
                <div id="chart-luaran" style="min-height: 260px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-clipboard2-data me-2"></i>Status Penelitian</h3>
            </div>
            <div class="card-body">
                <div id="chart-penelitian" style="min-height: 260px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-bank me-2"></i>Penyetoran Sisa Dana</h3>
            </div>
            <div class="card-body">
                <div id="chart-sisa-dana" style="min-height: 260px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-0">
                <h3 class="card-title fw-bold"><i class="bi bi-bezier2 me-2"></i>Kurva Tren Laporan per Tahun</h3>
                <small class="text-secondary d-block">Gunakan ikon menu (≡) di pojok kanan grafik untuk mengunduh data sebagai CSV/PNG/SVG</small>
            </div>
            <div class="card-body">
                <div id="chart-kurva" style="min-height: 320px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header border-0">
        <h3 class="card-title fw-bold"><i class="bi bi-geo-alt me-2"></i>Sebaran Program per Provinsi</h3>
    </div>
    <div class="card-body">
        <div id="chart-provinsi" style="min-height: 280px;"></div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header border-0">
        <h3 class="card-title fw-bold"><i class="bi bi-archive me-2"></i>Arsip Laporan per Tahun</h3>
        <small class="text-secondary d-block">Laporan tahun-tahun sebelumnya tidak hilang — tarik kembali kapan saja</small>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-3">Tahun Anggaran</th>
                    <th>Jumlah Program</th>
                    <th>Total Dana Diterima</th>
                    <th>Disetujui</th>
                    <th>Menunggu</th>
                    <th>Perlu Perbaikan</th>
                    <th>Arsip</th>
                </tr>
            </thead>
            <tbody>
                @forelse($arsip as $a)
                    <tr>
                        <td class="ps-3">
                            <span class="fw-bold">{{ $a->tahun_anggaran }}</span>
                            @if($a->tahun_anggaran == date('Y'))
                                <span class="badge text-bg-primary ms-1">Berjalan</span>
                            @else
                                <span class="badge text-bg-secondary ms-1">Terarsip</span>
                            @endif
                        </td>
                        <td>{{ $a->total_program }}</td>
                        <td>Rp {{ number_format($a->total_dana, 0, ',', '.') }}</td>
                        <td><span class="badge text-bg-success">{{ $a->disetujui }}</span></td>
                        <td><span class="badge text-bg-warning">{{ $a->menunggu }}</span></td>
                        <td><span class="badge text-bg-danger">{{ $a->perlu_perbaikan }}</span></td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('laporan.index', ['tahun' => $a->tahun_anggaran]) }}" class="btn btn-outline-primary" title="Lihat Laporan">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('laporan.export', ['tahun' => $a->tahun_anggaran]) }}" class="btn btn-outline-success" title="Export Excel">
                                    <i class="bi bi-file-earmark-excel"></i>
                                </a>
                                <a href="{{ route('laporan.cetak', ['tahun' => $a->tahun_anggaran]) }}" target="_blank" class="btn btn-outline-secondary" title="Cetak">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-secondary py-4">Belum ada arsip laporan.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const toolbarUnduh = { show: true, tools: { download: true, selection: false, zoom: false, zoomin: false, zoomout: false, pan: false, reset: false } };
    const tahun = @json($programPerTahun->pluck('th'));
    const jumlahProgram = @json($programPerTahun->pluck('total'));
    const dana = @json($programPerTahun->pluck('dana')->map(fn ($d) => (float) $d));

    const arsipTahun = @json($arsip->sortBy('tahun_anggaran')->pluck('tahun_anggaran')->values());
    const arsipDisetujui = @json($arsip->sortBy('tahun_anggaran')->pluck('disetujui')->map(fn ($v) => (int) $v)->values());
    const arsipMenunggu = @json($arsip->sortBy('tahun_anggaran')->pluck('menunggu')->map(fn ($v) => (int) $v)->values());
    const arsipPerbaikan = @json($arsip->sortBy('tahun_anggaran')->pluck('perlu_perbaikan')->map(fn ($v) => (int) $v)->values());

    new ApexCharts(document.getElementById('chart-kurva'), {
        chart: { type: 'line', height: 320, toolbar: toolbarUnduh },
        series: [
            { name: 'Total Program', data: @json($arsip->sortBy('tahun_anggaran')->pluck('total_program')->map(fn ($v) => (int) $v)->values()) },
            { name: 'Disetujui', data: arsipDisetujui },
            { name: 'Menunggu Validasi', data: arsipMenunggu },
            { name: 'Perlu Perbaikan', data: arsipPerbaikan }
        ],
        xaxis: { categories: arsipTahun, title: { text: 'Tahun Anggaran' } },
        yaxis: { decimalsInFloat: 0, min: 0 },
        colors: ['#1e3a8a', '#198754', '#f59e0b', '#dc3545'],
        stroke: { curve: 'smooth', width: 3 },
        markers: { size: 5 },
        dataLabels: { enabled: true },
        legend: { position: 'bottom' },
        noData: { text: 'Belum ada data' }
    }).render();

    new ApexCharts(document.getElementById('chart-tahun'), {
        chart: { type: 'line', height: 300, toolbar: toolbarUnduh },
        series: [
            { name: 'Jumlah Program', type: 'column', data: jumlahProgram },
            { name: 'Dana (Rp juta)', type: 'line', data: dana.map(d => Math.round(d / 1000000 * 10) / 10) }
        ],
        xaxis: { categories: tahun },
        yaxis: [
            { title: { text: 'Program' }, decimalsInFloat: 0 },
            { opposite: true, title: { text: 'Rp (juta)' } }
        ],
        colors: ['#1e3a8a', '#f59e0b'],
        stroke: { width: [0, 3], curve: 'smooth' },
        dataLabels: { enabled: true, enabledOnSeries: [0] },
        legend: { position: 'bottom' },
        noData: { text: 'Belum ada data' }
    }).render();

    new ApexCharts(document.getElementById('chart-validasi'), {
        chart: { type: 'donut', height: 300 },
        series: @json(array_values($statusLaporan)),
        labels: ['Menunggu Validasi', 'Disetujui', 'Perlu Perbaikan'],
        colors: ['#f59e0b', '#198754', '#dc3545'],
        legend: { position: 'bottom' },
        plotOptions: { pie: { donut: { size: '62%' } } },
        noData: { text: 'Belum ada data' }
    }).render();

    new ApexCharts(document.getElementById('chart-luaran'), {
        chart: { type: 'donut', height: 260 },
        series: @json(array_values($statusLuaran)),
        labels: ['Sudah Terpenuhi', 'Belum Terpenuhi', 'Belum Diisi'],
        colors: ['#198754', '#f59e0b', '#94a3b8'],
        legend: { position: 'bottom' },
        noData: { text: 'Belum ada data' }
    }).render();

    new ApexCharts(document.getElementById('chart-penelitian'), {
        chart: { type: 'donut', height: 260 },
        series: @json(array_values($statusPenelitian)),
        labels: ['Dilaksanakan', 'Batal'],
        colors: ['#0ea5e9', '#dc3545'],
        legend: { position: 'bottom' },
        noData: { text: 'Belum ada data' }
    }).render();

    new ApexCharts(document.getElementById('chart-sisa-dana'), {
        chart: { type: 'donut', height: 260 },
        series: @json(array_values($sisaDana)),
        labels: ['Belum Disetor', 'Telah Disetor'],
        colors: ['#f59e0b', '#198754'],
        legend: { position: 'bottom' },
        noData: { text: 'Belum ada data' }
    }).render();

    new ApexCharts(document.getElementById('chart-provinsi'), {
        chart: { type: 'bar', height: 280, toolbar: toolbarUnduh },
        series: [{ name: 'Program', data: @json($perProvinsi->values()) }],
        xaxis: { categories: @json($perProvinsi->keys()) },
        colors: ['#3b82f6'],
        plotOptions: { bar: { horizontal: true, borderRadius: 4, barHeight: '55%' } },
        dataLabels: { enabled: true },
        noData: { text: 'Belum ada data provinsi — isi kolom Provinsi di laporan' }
    }).render();
});
</script>
@endpush