@extends('layouts.admin')
@section('title', $member->full_name)
@section('page-title', $member->full_name)
@section('page-subtitle', 'Member ID: ' . $member->member_id)
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="card p-6">
        <div class="text-center mb-4">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-user text-blue-600 text-3xl"></i>
            </div>
            <h3 class="font-bold text-lg">{{ $member->full_name }}</h3>
            <p class="text-blue-700 font-mono">{{ $member->member_id }}</p>
            <span class="inline-block px-3 py-1 rounded-full text-xs font-medium badge-{{ $member->status }} mt-2">
                {{ ucfirst($member->status) }}
            </span>
        </div>
        <div class="space-y-2 text-sm border-t pt-4">
            <div class="flex justify-between"><span class="text-gray-500">Phone</span><span class="font-medium">{{ $member->phone }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Email</span><span class="font-medium">{{ $member->email ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Gender</span><span class="font-medium capitalize">{{ $member->gender }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">DOB</span><span class="font-medium">{{ $member->date_of_birth->format('d M Y') }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">BVN</span><span class="font-medium">{{ $member->bvn ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">ID Type</span><span class="font-medium">{{ $member->id_type }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">ID No.</span><span class="font-medium">{{ $member->id_number }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Occupation</span><span class="font-medium">{{ $member->occupation ?? '-' }}</span></div>
        </div>
        <div class="border-t pt-4 mt-4 text-sm">
            <p class="text-gray-500 mb-1">Address:</p>
            <p class="text-gray-700">{{ $member->address }}</p>
        </div>
        <div class="border-t pt-4 mt-4 text-sm">
            <p class="text-gray-500 font-medium mb-2">Next of Kin</p>
            <p class="font-medium">{{ $member->next_of_kin_name }}</p>
            <p class="text-gray-600">{{ $member->next_of_kin_phone }}</p>
            <p class="text-gray-500 text-xs">{{ $member->next_of_kin_relationship }}</p>
        </div>
        <div class="mt-4 flex space-x-2">
            <a href="{{ route('admin.members.edit', $member->id) }}" class="flex-1 bg-yellow-500 text-white text-center py-2 rounded-lg text-sm hover:bg-yellow-600">
                <i class="fas fa-edit mr-1"></i>Edit
            </a>
        </div>
    </div>
    <div class="lg:col-span-2 space-y-4">
        <!-- Summary Cards -->
        <div class="grid grid-cols-2 gap-4">
            <div class="card p-4 text-center">
                <p class="text-xs text-gray-500 uppercase">Total Savings</p>
                <p class="text-2xl font-bold text-green-700">₦{{ number_format($totalSavings) }}</p>
            </div>
            <div class="card p-4 text-center">
                <p class="text-xs text-gray-500 uppercase">Active Loans</p>
                <p class="text-2xl font-bold text-blue-700">{{ $activeLoans }}</p>
            </div>
        </div>
        <!-- Recent Savings -->
        <div class="card p-5">
            <h4 class="font-bold text-gray-800 mb-3"><i class="fas fa-piggy-bank mr-2 text-green-600"></i>Savings History</h4>
            <table class="w-full text-sm">
                <thead><tr class="bg-gray-50">
                    <th class="px-3 py-2 text-left">Date</th>
                    <th class="px-3 py-2 text-left">Amount</th>
                    <th class="px-3 py-2 text-left">Method</th>
                    <th class="px-3 py-2 text-left">Status</th>
                </tr></thead>
                <tbody>
                @forelse($member->savings->sortByDesc('collection_date')->take(10) as $s)
                <tr class="border-t">
                    <td class="px-3 py-2">{{ $s->collection_date->format('d M Y') }}</td>
                    <td class="px-3 py-2 font-medium text-green-700">₦{{ number_format($s->amount) }}</td>
                    <td class="px-3 py-2 capitalize">{{ $s->payment_method }}</td>
                    <td class="px-3 py-2"><span class="badge-{{ $s->status }} px-2 py-0.5 rounded text-xs">{{ ucfirst($s->status) }}</span></td>
                </tr>
                @empty
                <tr><td colspan="4" class="px-3 py-4 text-center text-gray-500">No savings records.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <!-- Recent Loans -->
        <div class="card p-5">
            <h4 class="font-bold text-gray-800 mb-3"><i class="fas fa-hand-holding-usd mr-2 text-blue-600"></i>Loan History</h4>
            <table class="w-full text-sm">
                <thead><tr class="bg-gray-50">
                    <th class="px-3 py-2 text-left">Reference</th>
                    <th class="px-3 py-2 text-left">Amount</th>
                    <th class="px-3 py-2 text-left">Status</th>
                    <th class="px-3 py-2 text-left">Action</th>
                </tr></thead>
                <tbody>
                @forelse($member->loans->sortByDesc('created_at') as $loan)
                <tr class="border-t">
                    <td class="px-3 py-2 font-mono text-blue-700">{{ $loan->reference }}</td>
                    <td class="px-3 py-2 font-medium">₦{{ number_format($loan->amount) }}</td>
                    <td class="px-3 py-2"><span class="{{ $loan->status_badge }} px-2 py-0.5 rounded text-xs font-medium">{{ ucfirst($loan->status) }}</span></td>
                    <td class="px-3 py-2"><a href="{{ route('admin.loans.show', $loan->id) }}" class="text-blue-600 hover:underline">View</a></td>
                </tr>
                @empty
                <tr><td colspan="4" class="px-3 py-4 text-center text-gray-500">No loan records.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection