@extends('layouts.app')
@section('title', 'Dashboard Admin')

@section('content')
<!-- Top Overview Stats -->
<div class="row g-4 mb-2">
    <div class="col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="text-muted mb-1" style="font-size:0.85rem;">Total Anggota</p>
                        <h3 class="fw-bold mb-1">{{ $totalAnggota }}</h3>
                        <small class="text-success"><i class="bi bi-person-check"></i> {{ $totalAnggotaAktif }} aktif</small>
                    </div>
                    <div class="icon-box primary"><i class="bi bi-people"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="text-muted mb-1" style="font-size:0.85rem;">Total Simpanan</p>
                        <h3 class="fw-bold mb-1">Rp {{ number_format($totalSimpanan, 0, ',', '.') }}</h3>
                        <small class="text-muted"><i class="bi bi-receipt"></i> {{ $countSimpananAll }} Transaksi Disetujui</small>
                    </div>
                    <div class="icon-box success"><i class="bi bi-wallet2"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="text-muted mb-1" style="font-size:0.85rem;">Pinjaman Aktif</p>
                        <h3 class="fw-bold mb-1">{{ $jmlPinjamanAktif }}</h3>
                        <small class="text-warning">Rp {{ number_format($totalPinjamanBelumLunas, 0, ',', '.') }}</small>
                    </div>
                    <div class="icon-box warning"><i class="bi bi-cash-stack"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="text-muted mb-1" style="font-size:0.85rem;">Pinjaman Lunas</p>
                        <h3 class="fw-bold mb-1">Rp {{ number_format($totalPinjamanLunas, 0, ',', '.') }}</h3>
                        <small class="text-success">Total nominal lunas</small>
                    </div>
                    <div class="icon-box success"><i class="bi bi-check-circle"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section: Statistik Bulan Ini & Tahun Ini -->
<div class="row g-4 mb-2">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-primary text-white h-100">
            <div class="card-body">
                <div class="small opacity-75">Simpanan Bulan Ini</div>
                <h4 class="fw-bold mb-1">Rp {{ number_format($totalSimpananBulanIni, 0, ',', '.') }}</h4>
                <div class="small opacity-75">{{ $countSimpananBulanIni }} Transaksi disetujui</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-success text-white h-100">
            <div class="card-body">
                <div class="small opacity-75">Simpanan Tahun Ini ({{ $currentYear }})</div>
                <h4 class="fw-bold mb-1">Rp {{ number_format($totalSimpananTahunIni, 0, ',', '.') }}</h4>
                <div class="small opacity-75">{{ $countSimpananTahunIni }} Transaksi disetujui</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-warning text-dark h-100">
            <div class="card-body">
                <div class="small opacity-75">Angsuran Masuk Bulan Ini</div>
                <h4 class="fw-bold mb-1">Rp {{ number_format($totalAngsuranBulanIni, 0, ',', '.') }}</h4>
                <div class="small opacity-75">Penerimaan angsuran + denda</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-dark text-white h-100">
            <div class="card-body">
                <div class="small opacity-75">Angsuran Masuk Tahun {{ $currentYear }}</div>
                <h4 class="fw-bold mb-1">Rp {{ number_format($totalAngsuranTahunIni, 0, ',', '.') }}</h4>
                <div class="small opacity-75">Akumulasi angsuran tahunan</div>
            </div>
        </div>
    </div>
</div>

<!-- Section: Breakdown Simpanan Per Jenis -->
<div class="row g-4 mb-2">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-pie-chart-fill text-primary me-2"></i>Rincian Simpanan Anggota Koperasi (Keseluruhan)</span>
                <a href="{{ url('admin/simpanan') }}" class="btn btn-outline-primary btn-sm">Kelola Simpanan <i class="bi bi-arrow-right"></i></a>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="p-3 border rounded-3 bg-light h-100">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge bg-primary fs-6">Simpanan Pokok</span>
                                <span class="badge bg-white text-dark border">{{ $countSimpananPokok }} Transaksi</span>
                            </div>
                            <h4 class="fw-bold text-primary mb-1">Rp {{ number_format($totalSimpananPokok, 0, ',', '.') }}</h4>
                            <small class="text-muted">Simpanan awal wajib anggota baru</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="p-3 border rounded-3 bg-light h-100">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge bg-warning text-dark fs-6">Simpanan Wajib</span>
                                <span class="badge bg-white text-dark border">{{ $countSimpananWajib }} Transaksi</span>
                            </div>
                            <h4 class="fw-bold text-dark mb-1">Rp {{ number_format($totalSimpananWajib, 0, ',', '.') }}</h4>
                            <small class="text-muted">Setoran bulanan rutin anggota</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="p-3 border rounded-3 bg-light h-100">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge bg-info text-dark fs-6">Simpanan Sukarela</span>
                                <span class="badge bg-white text-dark border">{{ $countSimpananSukarela }} Transaksi</span>
                            </div>
                            <h4 class="fw-bold text-info mb-1">Rp {{ number_format($totalSimpananSukarela, 0, ',', '.') }}</h4>
                            <small class="text-muted">Simpanan mana-mana tanpa batasan</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section: Grafik Transaksi Per Bulan (Chart.js) -->
<div class="row g-4 mb-2">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-bar-chart-line-fill text-success me-2"></i>Grafik Keuangan Koperasi Per Bulan (Tahun {{ $currentYear }})</span>
                <span class="badge bg-light text-dark border">Data 12 Bulan (Jan - Des {{ $currentYear }})</span>
            </div>
            <div class="card-body">
                <div style="height: 320px; position: relative;">
                    <canvas id="monthlyFinancialChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Secondary Stats & Quick Actions -->
<div class="row g-4">
    <div class="col-md-6">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="text-muted mb-1" style="font-size:0.85rem;">Total Keseluruhan Pinjaman</p>
                        <h3 class="fw-bold mb-1">Rp {{ number_format($totalPinjaman, 0, ',', '.') }}</h3>
                        <small class="text-muted">Keseluruhan akad pinjaman</small>
                    </div>
                    <div class="icon-box info"><i class="bi bi-currency-dollar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="text-muted mb-1" style="font-size:0.85rem;">Total Admin / Pengelola</p>
                        <h3 class="fw-bold mb-1">{{ $totalUsers }}</h3>
                        <small class="text-muted">Pengguna sistem terdaftar</small>
                    </div>
                    <div class="icon-box purple"><i class="bi bi-shield-lock"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mt-1">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="fw-bold mb-3"><i class="bi bi-lightning-charge me-2"></i>Aksi Cepat</h5>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ url('admin/anggota/create') }}" class="btn btn-outline-primary"><i class="bi bi-person-plus"></i> Tambah Anggota</a>
                    <a href="{{ url('admin/simpanan/create') }}" class="btn btn-outline-success"><i class="bi bi-plus-circle"></i> Tambah Simpanan</a>
                    <a href="{{ url('admin/pinjaman/create') }}" class="btn btn-outline-warning"><i class="bi bi-plus-circle"></i> Tambah Pinjaman</a>
                    <a href="{{ url('admin/laporan') }}" class="btn btn-outline-secondary"><i class="bi bi-file-earmark-text"></i> Laporan Keuangan</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('monthlyFinancialChart').getContext('2d');
        const months = @json($chartMonths);
        const simpananData = @json($chartSimpanan);
        const pinjamanData = @json($chartPinjaman);
        const angsuranData = @json($chartAngsuran);

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: months,
                datasets: [
                    {
                        label: 'Simpanan Masuk (Rp)',
                        data: simpananData,
                        backgroundColor: 'rgba(59, 130, 246, 0.75)',
                        borderColor: '#3b82f6',
                        borderWidth: 1,
                        borderRadius: 4
                    },
                    {
                        label: 'Pencairan Pinjaman (Rp)',
                        data: pinjamanData,
                        backgroundColor: 'rgba(239, 68, 68, 0.75)',
                        borderColor: '#ef4444',
                        borderWidth: 1,
                        borderRadius: 4
                    },
                    {
                        label: 'Angsuran Masuk (Rp)',
                        data: angsuranData,
                        backgroundColor: 'rgba(16, 185, 129, 0.75)',
                        borderColor: '#10b981',
                        borderWidth: 1,
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            font: { family: 'Segoe UI', size: 12, weight: 'bold' }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                if (context.parsed.y !== null) {
                                    label += new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(context.parsed.y);
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                if (value >= 1000000) {
                                    return 'Rp ' + (value / 1000000) + ' Jt';
                                } else if (value >= 1000) {
                                    return 'Rp ' + (value / 1000) + ' Rb';
                                }
                                return 'Rp ' + value;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
@endpush