{{-- resources/views/payroll/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Payroll & Contributions Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-aos="fade-up">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Payroll Records</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($stats['payroll_count']) }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-white">payments</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Contributions</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($stats['contribution_count']) }}</p>
                </div>
                <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-white">account_balance</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Latest Upload</p>
                    <p class="text-sm font-bold text-gray-900 dark:text-white">{{ $stats['latest_upload'] ?? 'No uploads yet' }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-white">cloud_upload</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Available Periods</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['periods_count'] }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-white">calendar_month</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" data-aos="fade-up" data-aos-delay="100">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-icons text-primary-600 mr-2">upload_file</span>
                Upload Records
            </h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">Upload CSV files for payroll or contribution data</p>
            <a href="{{ route('payroll.upload') }}" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
                <span class="material-icons mr-2">add</span>
                Upload CSV
            </a>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-icons text-green-600 mr-2">manage_accounts</span>
                Manage Records
            </h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">View, search, and manage uploaded records</p>
            <a href="{{ route('payroll.manage') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                <span class="material-icons mr-2">view_list</span>
                Manage Records
            </a>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700" data-aos="fade-up" data-aos-delay="200">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Activity</h3>
        </div>
        <div class="p-6">
            @if(count($recentActivity) > 0)
                <div class="space-y-4">
                    @foreach($recentActivity as $activity)
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                            <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                                <span class="material-icons text-primary-600 dark:text-primary-400">{{ $activity['icon'] }}</span>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $activity['description'] }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $activity['time'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8">
                    <span class="material-icons text-gray-400 text-4xl mb-2">history</span>
                    <p class="text-gray-500 dark:text-gray-400">No recent activity</p>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Upload some CSV files to see activity here</p>
                </div>
            @endif
        </div>
    </div>

  
</div>
@endsection