{{-- Member Dashboard --}}
<x-app-layout title="Member Dashboard">

    <x-module-hero :title="'Welcome, ' . $member->first_name . '!'" :description="'Member Code: ' . $member->membership_code" icon="fa-id-card">
        <x-slot name="tabs">
            <a href="{{ route('member.dashboard') }}" class="module-hero-tab active-tab">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ route('member.profile') }}" class="module-hero-tab">
                <i class="fas fa-user"></i> Profile
            </a>
            <a href="{{ route('member.contributions') }}" class="module-hero-tab">
                <i class="fas fa-hand-holding-usd"></i> Contributions
            </a>
            <a href="{{ route('member.loans.index') }}" class="module-hero-tab">
                <i class="fas fa-money-bill-wave"></i> Loans
            </a>
            <a href="{{ route('member.loans.products') }}" class="module-hero-tab">
                <i class="fas fa-plus-circle"></i> Apply for Loan
            </a>
        </x-slot>
    </x-module-hero>

    {{-- Statistics --}}
    <div class="p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 font-medium">Total Contributions</p>
                <p class="text-2xl font-bold text-gray-900 mt-0.5">{{ number_format($statistics['total_contributions'], 2) }}</p>
            </div>
            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-coins text-green-600"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 font-medium">Pending</p>
                <p class="text-2xl font-bold text-yellow-600 mt-0.5">{{ $statistics['pending_contributions'] }}</p>
            </div>
            <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                <i class="fas fa-clock text-yellow-600"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 font-medium">Overdue</p>
                <p class="text-2xl font-bold text-red-600 mt-0.5">{{ $statistics['overdue_contributions'] }}</p>
            </div>
            <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                <i class="fas fa-exclamation-circle text-red-600"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 font-medium">Active Loans</p>
                <p class="text-2xl font-bold text-blue-600 mt-0.5">{{ $statistics['active_loans'] }}</p>
            </div>
            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                <i class="fas fa-money-bill-wave text-blue-600"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 font-medium">Loan Balance</p>
                <p class="text-2xl font-bold text-gray-900 mt-0.5">{{ number_format($statistics['outstanding_loan_balance'], 2) }}</p>
            </div>
            <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                <i class="fas fa-balance-scale text-gray-600"></i>
            </div>
        </div>
    </div>

    <div class="px-6 pb-6 grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- Main Content --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Flash Messages --}}
            @if(session('success'))
                <div class="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                    <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
                </div>
            @endif

            {{-- Membership Categories --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-tags text-green-600"></i> My Membership Categories
                    </h3>
                </div>
                <div class="p-6">
                    @if($member->membershipCategories->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach($member->membershipCategories as $category)
                                <div class="border border-gray-200 rounded-lg p-4 hover:border-green-300 transition">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="font-semibold text-gray-900 text-sm">{{ $category->name }}</h4>
                                        @if($category->pivot?->assigned_date)
                                            <span class="text-xs text-gray-500">Since {{ \Carbon\Carbon::parse($category->pivot->assigned_date)->format('M Y') }}</span>
                                        @endif
                                    </div>
                                    @if($category->description)
                                        <p class="text-xs text-gray-600">{{ Str::limit($category->description, 80) }}</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-gray-500 text-sm">No membership categories assigned.</p>
                    @endif
                </div>
            </div>

            {{-- Pending Contributions --}}
            @if($pendingContributions->count() > 0)
                <div class="bg-white rounded-lg shadow-sm border border-red-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-red-200 bg-red-50">
                        <h3 class="text-base font-semibold text-red-900 flex items-center gap-2">
                            <i class="fas fa-exclamation-triangle text-red-600"></i> Contributions Due
                        </h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full table-zebra">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left th-col-1">Period</th>
                                    <th class="px-4 py-3 text-left th-col-2">Category</th>
                                    <th class="px-4 py-3 text-right th-col-3">Amount</th>
                                    <th class="px-4 py-3 text-left th-col-4">Due Date</th>
                                    <th class="px-4 py-3 text-center th-col-5">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pendingContributions as $contribution)
                                    <tr>
                                        <td class="px-4 py-3 text-gray-900 text-sm">{{ $contribution->period ?? 'N/A' }}</td>
                                        <td class="px-4 py-3 text-gray-600 text-sm">{{ $contribution->membershipCategory?->name }}</td>
                                        <td class="px-4 py-3 text-right font-medium text-gray-900 text-sm">{{ number_format($contribution->amount + $contribution->penalty_amount, 2) }} {{ $contribution->currency }}</td>
                                        <td class="px-4 py-3 text-sm {{ $contribution->status === 'overdue' ? 'text-red-600 font-medium' : 'text-gray-600' }}">{{ $contribution->due_date?->format('M d, Y') }}</td>
                                        <td class="px-4 py-3 text-center">
                                            <a href="{{ route('member.contributions.pay', $contribution) }}" class="btn-action-approve">
                                                <i class="fas fa-credit-card"></i> Pay Now
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            {{-- Recent Contributions --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                    <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-history text-green-600"></i> Recent Contributions
                    </h3>
                    <a href="{{ route('member.contributions') }}" class="text-green-600 hover:underline text-sm">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                <div class="p-6">
                    @if($recentContributions->count() > 0)
                        <div class="space-y-3">
                            @foreach($recentContributions as $contribution)
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div>
                                        <div class="font-medium text-gray-900 text-sm">{{ $contribution->period ?? 'Contribution' }}</div>
                                        <div class="text-xs text-gray-500">{{ $contribution->membershipCategory?->name }}</div>
                                    </div>
                                    <div class="text-right">
                                        <div class="font-bold text-green-600 text-sm">{{ number_format($contribution->amount, 2) }} {{ $contribution->currency }}</div>
                                        @php
                                            $sc = ['paid'=>'bg-green-100 text-green-700','pending'=>'bg-yellow-100 text-yellow-700','overdue'=>'bg-red-100 text-red-700'];
                                            $sc2 = $sc[$contribution->status] ?? 'bg-gray-100 text-gray-700';
                                        @endphp
                                        <span class="px-2 py-0.5 rounded-full text-xs {{ $sc2 }}">{{ ucfirst($contribution->status) }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-gray-500 text-sm text-center py-4">No contributions recorded yet.</p>
                    @endif
                </div>
            </div>

            {{-- Active Loans --}}
            @if($activeLoans->count() > 0)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-money-bill-wave text-green-600"></i> Active Loans
                        </h3>
                        <a href="{{ route('member.loans.index') }}" class="text-green-600 hover:underline text-sm">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    <div class="p-6 space-y-4">
                        @foreach($activeLoans as $loan)
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex justify-between items-start mb-3">
                                    <div>
                                        <h4 class="font-semibold text-gray-900 text-sm">{{ $loan->loanProduct?->name }}</h4>
                                        <p class="text-xs text-gray-500">Ref: {{ $loan->reference_number }}</p>
                                    </div>
                                    <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full">{{ ucfirst($loan->status) }}</span>
                                </div>
                                <div class="grid grid-cols-3 gap-4 text-sm mb-3">
                                    <div>
                                        <div class="text-xs text-gray-500">Principal</div>
                                        <div class="font-medium text-sm">{{ number_format($loan->amount_disbursed ?? $loan->amount_requested, 2) }}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-gray-500">Balance</div>
                                        <div class="font-medium text-red-600 text-sm">{{ number_format($loan->remaining_balance ?? 0, 2) }}</div>
                                    </div>
                                    <div>
                                        <div class="text-xs text-gray-500">Next Payment</div>
                                        <div class="font-medium text-sm">{{ $loan->next_payment_date?->format('M d') ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="flex gap-2">
                                    <a href="{{ route('member.loans.show', $loan) }}" class="flex-1 text-center px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition text-xs font-medium">
                                        Details
                                    </a>
                                    <a href="{{ route('member.loans.repay', $loan) }}" class="flex-1 text-center px-3 py-1.5 bg-green-600 text-white rounded hover:bg-green-700 transition text-xs font-medium">
                                        Make Payment
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-base font-semibold text-gray-900">Quick Actions</h3>
                </div>
                <div class="p-6 space-y-3">
                    <a href="{{ route('member.loans.products') }}" class="w-full text-center px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium block">
                        <i class="fas fa-plus mr-1"></i> Apply for Loan
                    </a>
                    <a href="{{ route('member.contributions') }}" class="w-full text-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium block">
                        <i class="fas fa-list mr-1"></i> View Contributions
                    </a>
                    <a href="{{ route('member.profile') }}" class="w-full text-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium block">
                        <i class="fas fa-edit mr-1"></i> Update Profile
                    </a>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-base font-semibold text-gray-900">Member Info</h3>
                </div>
                <div class="p-6 space-y-3 text-sm">
                    <div>
                        <span class="text-xs text-gray-500">Member Code</span>
                        <p class="font-mono text-gray-900 text-sm">{{ $member->membership_code }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500">Email</span>
                        <p class="text-gray-900 text-sm">{{ $member->email }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500">Phone</span>
                        <p class="text-gray-900 text-sm">{{ $member->phone ?? 'Not provided' }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500">Member Since</span>
                        <p class="text-gray-900 text-sm">{{ $member->created_at->format('F d, Y') }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500">Status</span>
                        @php
                            $sc = ['active'=>'bg-green-100 text-green-700','inactive'=>'bg-yellow-100 text-yellow-700','suspended'=>'bg-red-100 text-red-700'];
                            $sc2 = $sc[$member->status] ?? 'bg-gray-100 text-gray-700';
                        @endphp
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $sc2 }}">{{ ucfirst($member->status) }}</span>
                    </div>
                </div>
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded-lg p-5">
                <h3 class="font-semibold text-blue-900 mb-2 text-sm flex items-center gap-2">
                    <i class="fas fa-question-circle"></i> Need Help?
                </h3>
                <p class="text-blue-700 text-xs mb-3">Contact our support team for any questions about your membership or loans.</p>
                <a href="#" class="text-blue-600 hover:underline text-xs font-medium">Contact Support <i class="fas fa-arrow-right ml-1"></i></a>
            </div>
        </div>
    </div>

</x-app-layout>
