@extends('layouts.admin')

@section('content')
    <div class="content-wrapper pb-0 min-vh-100">
        <div class="page-header flex-wrap">
            <h3 class="mb-0">Hi, welcome back!</h3>
        </div>

        <!-- Statistik Nasabah -->
        <div class="row">
            <div class="col-md-4">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h4 class="card-title">Total Nasabah</h4>
                        <h2>{{ $total_nasabah }}</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <h4 class="card-title">Nasabah Layak</h4>
                        <h2>{{ $layak }}</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-danger text-white">
                    <div class="card-body">
                        <h4 class="card-title">Nasabah Tidak Layak</h4>
                        <h2>{{ $tidak_layak }}</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grafik Total Uang Peminjaman -->
        <div class="card mt-4">
            <div class="card-body">
                <h4 class="card-title">Grafik Total Uang Peminjaman Berdasarkan Jangka Waktu</h4>
                <canvas id="peminjamanChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var ctx = document.getElementById('peminjamanChart').getContext('2d');
        var peminjamanChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($jangka_waktu),
                datasets: [{
                    label: 'Total Peminjaman (Rp)',
                    data: @json($total_pinjaman),
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endsection