@extends('layouts.app')

@section('content')
<div class="container py-12" x-data="{ showMessage: {{ session('success') ? 'true' : 'false' }} }">
       <template x-if="showMessage">
        <div class="bg-green-500 text-white p-4 rounded-md mb-4">
            <p x-text="'{{ session('success') }}'"></p>
        </div>
    </template>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
       <h2 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 mb-6 flex items-center space-x-4">
    <i class="fas fa-chart-line text-3xl"></i>
    <span>Loan Management Report</span>
</h2>


        <!-- Summary Cards with Icons -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-green-500">
            <i class="fas fa-hand-holding-usd text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Total Principle Issued
            <span class="text-1.5xl font-bold">{{ number_format($totalLoansIssued, 2) }}</span>
            </h3>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-blue-500">
            <i class="fas fa-dollar-sign text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Total Interest Amount</h3>
            <p class="text-1.5xl font-bold">{{ number_format($totalInterest, 2) }}</p>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-yellow-500">
            <i class="fas fa-exclamation-triangle text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Total Outstanding Loans</h3>
            <p class="text-1.5xl font-bold">{{ number_format($totalOutstanding, 2) }}</p>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-green-600">
            <i class="fas fa-check-circle text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Total Repaid</h3>
            <p class="text-1.5xl font-bold">{{ number_format($totalRepaid, 2) }}</p>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-indigo-500">
            <i class="fas fa-wallet text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Wallet Balance</h3>
            <p class="text-1.5xl font-bold">Tsh {{ number_format($saccoWalletBalance, 2) }}</p>
        </div>
    </div>
</div>

<!-- Add spacing between the rows -->
<div class="mt-6"></div>

<!-- Second Row of Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-purple-500">
            <i class="fas fa-arrow-right text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Total Repaid Principle</h3>
            <p class="text-1.5xl font-bold">{{ number_format($totalRepaidPrincipal, 2) }}</p>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow-md flex items-center space-x-4">
        <div class="text-red-500">
            <i class="fas fa-arrow-left text-3xl"></i>
        </div>
        <div>
            <h3 class="text-gray-600">Total Repaid Interest</h3>
            <p class="text-1.5xl font-bold">{{ number_format($totalRepaidInterest, 2) }}</p>
        </div>
    </div>
</div>


        <!-- Loan Summary Table -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
    <h3 class="text-xl font-semibold mb-4">Loan Summary</h3>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse border border-gray-200">
            <thead>
                <tr class="bg-gray-100">
                    <th class="p-2 border">Member Name</th>
                    <th class="p-2 border">Loan Amount</th>
                    <th class="p-2 border">Paid</th>
                    <th class="p-2 border">Balance</th>
                    <th class="p-2 border">Due Date</th>
                    <th class="p-2 border">Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($loans as $loan)
                <tr class="hover:bg-gray-50">
                    <td class="p-2 border">{{ $loan->member->name }}</td>
                    <td class="p-2 border">Tsh {{ number_format($loan->total_loan, 2) }}</td>
                    <td class="p-2 border">Tsh {{ number_format($loan->paid_amount, 2) }}</td>
                    <td class="p-2 border">Tsh {{ number_format($loan->total_loan - $loan->paid_amount, 2) }}</td>
                    <td class="p-2 border">{{ $loan->due_date }}</td>
                    <td class="p-2 border text-{{ $loan->status == 'defaulted' ? 'red-500' : 'green-500' }}">{{ ucfirst($loan->status) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>


        <!-- Upcoming Loan Repayments -->
        <div class="bg-white p-6 rounded-lg shadow-md mt-6">
            <h3 class="text-xl font-semibold">Upcoming Loan Repayments</h3>
            <ul class="list-disc pl-6">
                @foreach($upcomingRepayments as $repayment)
                    <li>{{ $repayment->member->name }} - Tsh {{ number_format($repayment->amount_due, 2) }} due on {{ $repayment->due_date }}</li>
                @endforeach
            </ul>
        </div>

    </div>
</div>
@endsection