@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Card: Total Members -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-gray-700">Total Members</h3>
                <p class="text-3xl font-bold text-blue-600">{{ $totalMembers }}</p>
            </div>

            <!-- Card: Active Loans -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-gray-700">Active Loans</h3>
                <p class="text-3xl font-bold text-green-600">{{ $activeLoans }}</p>
            </div>

            <!-- Card: Total Loan Amount -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-gray-700">Total Loan Disbursed</h3>
                <p class="text-3xl font-bold text-orange-600">Tsh {{ number_format($totalLoanAmount, 2) }}</p>
            </div>

            <!-- Card: Fully Repaid Loans -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-gray-700">Fully Repaid Loans</h3>
                <p class="text-3xl font-bold text-purple-600">{{ $fullyRepaidLoans }}</p>
            </div>
        </div>

        <!-- Loan Status Overview & Summary in the same row -->
<div class="bg-white p-6 rounded-lg shadow-md mt-8">
    <h3 class="text-xl font-semibold text-gray-700 mb-4">Loan Status Overview</h3>

    <div class="flex flex-col md:flex-row gap-6">
        <!-- Loan Pie Chart -->
        <div class="flex-1 flex justify-center">
            <div style="width: 300px; height: 300px;">
                <canvas id="loanChart"></canvas>
            </div>
        </div>

        <!-- Loan Insights (Placed on the Right) -->
        <div class="flex-1 bg-gray-100 p-4 rounded-lg">
            <h4 class="text-lg font-semibold text-gray-800">Loan Insights</h4>
            <ul class="mt-3 space-y-2 text-gray-600">
                <li><i class="fas fa-check-circle text-green-500"></i> Approved Loans: <strong>{{ $approvedLoans }}</strong></li>
                <li><i class="fas fa-clock text-yellow-500"></i> Pending Loans: <strong>{{ $pendingLoans }}</strong></li>
                <li><i class="fas fa-times-circle text-red-500"></i> Rejected Loans: <strong>{{ $rejectedLoans }}</strong></li>
                <li><i class="fas fa-money-bill-wave text-blue-500"></i> Total Repayments: <strong>Tsh {{ number_format($totalPayments, 2) }}</strong></li>
            </ul>
        </div>
    </div>
</div>


        <!-- Recent Loan Applications -->
        <div class="bg-white p-6 rounded-lg shadow-md mt-8">
            <h3 class="text-xl font-semibold text-gray-700 mb-4">Recent Loan Applications</h3>
            <table class="w-full border-collapse border border-gray-300">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="p-3 border">Member</th>
                        <th class="p-3 border">Amount</th>
                        <th class="p-3 border">Status</th>
                        <th class="p-3 border">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($recentLoans as $loan)
                        <tr class="text-center">
                            <td class="p-3 border">{{ $loan->member->name }}</td>
                            <td class="p-3 border">Tsh {{ number_format($loan->amount, 2) }}</td>
                            <td class="p-3 border">
                                <span class="px-3 py-1 rounded-full text-white 
                                    {{ $loan->status === 'approved' ? 'bg-green-500' : ($loan->status === 'pending' ? 'bg-yellow-500' : 'bg-red-500') }}">
                                    {{ ucfirst($loan->status) }}
                                </span>
                            </td>
                            <td class="p-3 border">
                                <a href="{{ route('loans.show', $loan) }}" class="text-blue-600 hover:underline">View</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Quick Actions -->
        <div class="mt-6 flex gap-4">
            <a href="{{ route('members.create') }}" class="bg-blue-500 text-white px-6 py-3 rounded-md hover:bg-blue-600">
                <i class="fas fa-user-plus"></i> Add Member
            </a>
            <a href="{{ route('loans.create') }}" class="bg-green-500 text-white px-6 py-3 rounded-md hover:bg-green-600">
                <i class="fas fa-plus-circle"></i> New Loan
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById('loanChart').getContext('2d');
    var loanChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Approved', 'Pending', 'Rejected'],
            datasets: [{
                data: [{{ $approvedLoans }}, {{ $pendingLoans }}, {{ $rejectedLoans }}],
                backgroundColor: ['#10B981', '#FACC15', '#EF4444']
            }]
        }
    });
});
</script>
@endsection