@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Welcome back, ' . session('admin_user') . '!')

@section('content')
<!-- Fraud Alerts -->
@if(!empty($fraudAlerts))
<div class="mb-6">
    @foreach($fraudAlerts as $alert)
    <div class="flex items-center p-4 mb-2 rounded-lg border
        {{ $alert['type'] === 'danger' ? 'bg-red-50 border-red-400 text-red-800' : ($alert['type'] === 'warning' ? 'bg-yellow-50 border-yellow-400 text-yellow-800' : 'bg-blue-50 border-blue-400 text-blue-800') }}">
        <i class="fas fa-{{ $alert['type'] === 'danger' ? 'exclamation-triangle' : ($alert['type'] === 'warning' ? 'exclamation-circle' : 'info-circle') }} mr-3 text-lg"></i>
        <div><span class="font-bold">[{{ $alert['module'] }}]</span> {{ $alert['message'] }}</div>
    </div>
    @endforeach
</div>
@endif

<!-- KPI Cards Row 1 -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="card p-5 stat-card border-blue-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Total Members</p>
                <p class="text-2xl font-bold text-gray-800">{{ number_format($totalMembers) }}</p>
                <p class="text-xs text-green-600 mt-1">+{{ $newMembersThisMonth }} this month</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <i class="fas fa-users text-blue-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="card p-5 stat-card border-green-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Today's Savings</p>
                <p class="text-2xl font-bold text-gray-800">₦{{ number_format($todaySavings) }}</p>
                <p class="text-xs text-orange-600 mt-1">{{ $pendingReconciliation }} pending reconcile</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-piggy-bank text-green-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="card p-5 stat-card border-yellow-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Loan Portfolio</p>
                <p class="text-2xl font-bold text-gray-800">₦{{ number_format($totalLoanPortfolio) }}</p>
                <p class="text-xs text-red-600 mt-1">{{ $overdueLoans }} overdue</p>
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                <i class="fas fa-hand-holding-usd text-yellow-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="card p-5 stat-card border-purple-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Total Investment</p>
                <p class="text-2xl font-bold text-gray-800">₦{{ number_format($totalInvestment) }}</p>
                <p class="text-xs text-purple-600 mt-1">{{ $pendingProfitPayments }} profit due</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                <i class="fas fa-chart-line text-purple-600 text-xl"></i>
            </div>
        </div>
    </div>
</div>

<!-- KPI Cards Row 2 -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="card p-5 stat-card border-teal-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Cash Balance</p>
                <p class="text-2xl font-bold {{ $cashBalance >= 0 ? 'text-green-700' : 'text-red-700' }}">₦{{ number_format($cashBalance) }}</p>
                <p class="text-xs text-gray-500 mt-1">Net ledger balance</p>
            </div>
            <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center">
                <i class="fas fa-vault text-teal-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="card p-5 stat-card border-orange-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">ATM Fees Today</p>
                <p class="text-2xl font-bold text-gray-800">₦{{ number_format($todayAtmFees) }}</p>
                <p class="text-xs text-gray-500 mt-1">{{ $todayAtmTransactions }} transactions</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                <i class="fas fa-credit-card text-orange-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="card p-5 stat-card border-pink-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">POS Sales Today</p>
                <p class="text-2xl font-bold text-gray-800">₦{{ number_format($todayPosSales) }}</p>
                <p class="text-xs {{ $lowStockItems > 0 ? 'text-red-600' : 'text-gray-500' }} mt-1">{{ $lowStockItems }} low stock</p>
            </div>
            <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center">
                <i class="fas fa-shopping-cart text-pink-600 text-xl"></i>
            </div>
        </div>
    </div>
    <div class="card p-5 stat-card border-red-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Month Expenses</p>
                <p class="text-2xl font-bold text-red-700">₦{{ number_format($monthExpenses) }}</p>
                <p class="text-xs text-gray-500 mt-1">This month</p>
            </div>
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                <i class="fas fa-receipt text-red-600 text-xl"></i>
            </div>
        </div>
    </div>
</div>

<!-- Charts & Activity -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Monthly Savings Chart -->
    <div class="card p-6 lg:col-span-2">
        <h3 class="font-bold text-gray-800 mb-4"><i class="fas fa-chart-bar mr-2 text-blue-600"></i>6-Month Savings Trend</h3>
        @php $maxSavings = max(array_column($monthlySavings, 'amount')) ?: 1; @endphp
        <div class="flex items-end space-x-2 h-40">
            @foreach($monthlySavings as $m)
            @php $height = max(8, ($m['amount'] / $maxSavings) * 100); @endphp
            <div class="flex-1 flex flex-col items-center">
                <span class="text-xs text-gray-600 mb-1">₦{{ number_format($m['amount']/1000) }}k</span>
                <div class="w-full bg-blue-500 rounded-t hover:bg-blue-600 transition-colors" style="height: {{ $height }}%"></div>
                <span class="text-xs text-gray-500 mt-1">{{ $m['month'] }}</span>
            </div>
            @endforeach
        </div>
    </div>
    <!-- Quick Stats -->
    <div class="card p-6">
        <h3 class="font-bold text-gray-800 mb-4"><i class="fas fa-list-check mr-2 text-green-600"></i>Loan Status</h3>
        <div class="space-y-3">
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">Pending Review</span>
                <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs font-bold">{{ $pendingLoans }}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">Active Loans</span>
                <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs font-bold">{{ $activeLoans }}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">Overdue</span>
                <span class="px-2 py-1 bg-red-100 text-red-800 rounded text-xs font-bold">{{ $overdueLoans }}</span>
            </div>
            <hr class="my-3">
            <h4 class="font-semibold text-gray-700 text-sm">This Month</h4>
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">Savings Collected</span>
                <span class="text-sm font-bold text-green-700">₦{{ number_format($monthSavings) }}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">ATM Fees</span>
                <span class="text-sm font-bold text-orange-700">₦{{ number_format($monthAtmFees) }}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">POS Revenue</span>
                <span class="text-sm font-bold text-pink-700">₦{{ number_format($monthPosSales) }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions + Recent Activity -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="card p-6">
        <h3 class="font-bold text-gray-800 mb-4"><i class="fas fa-bolt mr-2 text-yellow-500"></i>Quick Actions</h3>
        <div class="space-y-2">
            <a href="{{ route('admin.savings.create') }}" class="flex items-center p-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors text-sm">
                <i class="fas fa-plus-circle mr-3 text-green-600"></i><span class="text-green-800 font-medium">Record Savings</span>
            </a>
            <a href="{{ route('admin.loans.create') }}" class="flex items-center p-3 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors text-sm">
                <i class="fas fa-file-invoice-dollar mr-3 text-blue-600"></i><span class="text-blue-800 font-medium">Apply for Loan</span>
            </a>
            <a href="{{ route('admin.atm.create') }}" class="flex items-center p-3 bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors text-sm">
                <i class="fas fa-credit-card mr-3 text-orange-600"></i><span class="text-orange-800 font-medium">Log ATM Service</span>
            </a>
            <a href="{{ route('admin.pos.sell') }}" class="flex items-center p-3 bg-pink-50 hover:bg-pink-100 rounded-lg transition-colors text-sm">
                <i class="fas fa-shopping-basket mr-3 text-pink-600"></i><span class="text-pink-800 font-medium">POS Sale</span>
            </a>
            <a href="{{ route('admin.expenses.create') }}" class="flex items-center p-3 bg-red-50 hover:bg-red-100 rounded-lg transition-colors text-sm">
                <i class="fas fa-receipt mr-3 text-red-600"></i><span class="text-red-800 font-medium">Add Expense</span>
            </a>
            <a href="{{ route('admin.members.create') }}" class="flex items-center p-3 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors text-sm">
                <i class="fas fa-user-plus mr-3 text-purple-600"></i><span class="text-purple-800 font-medium">Register Member</span>
            </a>
        </div>
    </div>
    <div class="card p-6 lg:col-span-2">
        <h3 class="font-bold text-gray-800 mb-4"><i class="fas fa-history mr-2 text-gray-600"></i>Recent Activity</h3>
        <div class="space-y-3">
            @forelse($recentActivities as $log)
            <div class="flex items-start space-x-3 text-sm py-2 border-b border-gray-50">
                <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0
                    {{ $log->action === 'LOGIN' ? 'bg-green-100' : ($log->action === 'FAILED_LOGIN' ? 'bg-red-100' : 'bg-blue-100') }}">
                    <i class="fas fa-{{ $log->action === 'LOGIN' ? 'sign-in-alt text-green-600' : ($log->action === 'FAILED_LOGIN' ? 'ban text-red-600' : 'check text-blue-600') }} text-xs"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-gray-700 truncate">{{ $log->description }}</p>
                    <p class="text-xs text-gray-400">{{ $log->user_name }} • {{ $log->created_at->diffForHumans() }}</p>
                </div>
                <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded flex-shrink-0">{{ $log->module }}</span>
            </div>
            @empty
            <p class="text-gray-500 text-sm">No recent activity.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection