@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="dashboard-grid">
    <!-- Stats Row 1 -->
    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-content">
                <div class="stat-label">Total Users</div>
                <div class="stat-value">{{ number_format($stats['total_users']) }}</div>
                <div class="stat-subtext">{{ $stats['active_users'] }} active</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">💎</div>
            <div class="stat-content">
                <div class="stat-label">VIP Users</div>
                <div class="stat-value">{{ number_format($stats['vip_users']) }}</div>
                <div class="stat-subtext">Active subscriptions</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">⚠️</div>
            <div class="stat-content">
                <div class="stat-label">Suspended/Banned</div>
                <div class="stat-value">{{ $stats['suspended_users'] + $stats['banned_users'] }}</div>
                <div class="stat-subtext">{{ $stats['suspended_users'] }} suspended, {{ $stats['banned_users'] }} banned</div>
            </div>
        </div>
    </div>

    <!-- Stats Row 2 -->
    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-icon">💼</div>
            <div class="stat-content">
                <div class="stat-label">Jobs</div>
                <div class="stat-value">{{ number_format($stats['total_jobs']) }}</div>
                <div class="stat-subtext">{{ $stats['pending_submissions'] }} pending approvals</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">📥</div>
            <div class="stat-content">
                <div class="stat-label">Deposits</div>
                <div class="stat-value">৳ {{ number_format($stats['today_deposits'], 2) }}</div>
                <div class="stat-subtext">{{ $stats['pending_deposits'] }} pending today</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">📤</div>
            <div class="stat-content">
                <div class="stat-label">Withdrawals</div>
                <div class="stat-value">৳ {{ number_format($stats['today_withdrawals'], 2) }}</div>
                <div class="stat-subtext">{{ $stats['pending_withdrawals'] }} pending today</div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="charts-row">
        <div class="chart-card">
            <h3>Deposits (Last 7 Days)</h3>
            <div class="mini-chart">
                @foreach($financialData['deposit_trend'] as $date => $amount)
                    <div class="bar-item" title="{{ $date }}: ৳{{ number_format($amount, 2) }}">
                        <div class="bar" style="height: {{ ($amount / max($financialData['deposit_trend']) * 100) ?: 5 }}%"></div>
                        <span class="label">{{ substr($date, 0, 5) }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="chart-card">
            <h3>Withdrawals (Last 7 Days)</h3>
            <div class="mini-chart">
                @foreach($financialData['withdrawal_trend'] as $date => $amount)
                    <div class="bar-item" title="{{ $date }}: ৳{{ number_format($amount, 2) }}">
                        <div class="bar" style="height: {{ ($amount / max($financialData['withdrawal_trend']) * 100) ?: 5 }}%"></div>
                        <span class="label">{{ substr($date, 0, 5) }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Top Jobs -->
    <div class="section-card">
        <h2>Top Jobs by Submissions</h2>
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Job Title</th>
                    <th>Submissions</th>
                    <th>Reward</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($topJobs as $job)
                    <tr>
                        <td>{{ $job->title }}</td>
                        <td>{{ $job->submissions_count }}</td>
                        <td>৳{{ number_format($job->reward, 2) }}</td>
                        <td><span class="badge badge-{{ $job->status }}">{{ ucfirst($job->status) }}</span></td>
                        <td>
                            <a href="{{ route('admin.jobs.show', $job) }}" class="btn-small">View</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center">No jobs yet</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Recent Users -->
    <div class="section-card">
        <h2>Recent Users</h2>
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Joined</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentUsers as $user)
                    <tr>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>
                            <span class="badge badge-{{ $user->status }}">{{ ucfirst($user->status) }}</span>
                        </td>
                        <td>{{ $user->created_at->diffForHumans() }}</td>
                        <td>
                            <a href="{{ route('admin.users.show', $user) }}" class="btn-small">View</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center">No users yet</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Recent Activity -->
    <div class="section-card">
        <h2>Recent Audit Logs</h2>
        <div class="logs-list">
            @forelse($stats['recent_logs'] as $log)
                <div class="log-item">
                    <span class="log-time">{{ $log->created_at->diffForHumans() }}</span>
                    <span class="log-action">{{ $log->action }}</span>
                    <span class="log-admin">by {{ $log->admin?->name ?? 'System' }}</span>
                </div>
            @empty
                <p class="text-muted">No activity yet</p>
            @endforelse
        </div>
    </div>
</div>

<style>
.dashboard-grid {
    display: grid;
    gap: 2rem;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    font-size: 2.5rem;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: bold;
    color: #1a1a1a;
}

.stat-subtext {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.25rem;
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.chart-card {
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 150px;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.5rem;
}

.bar {
    width: 100%;
    background: linear-gradient(180deg, #4361ee, #3d5adb);
    border-radius: 4px 4px 0 0;
}

.label {
    font-size: 0.75rem;
    color: #666;
}

.section-card {
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-card h2 {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.admin-table th,
.admin-table td {
    padding: 0.875rem;
    text-align: left;
}

.admin-table th {
    font-weight: 600;
    color: #666;
    font-size: 0.875rem;
}

.admin-table td {
    border-bottom: 1px solid #e9ecef;
}

.admin-table tbody tr:hover {
    background: #f8f9fa;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-active { background: #d4edda; color: #155724; }
.badge-suspended { background: #fff3cd; color: #856404; }
.badge-banned { background: #f8d7da; color: #721c24; }
.badge-pending { background: #cfe2ff; color: #084298; }

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    background: #4361ee;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.btn-small:hover {
    background: #3d5adb;
}

.logs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.875rem;
}

.log-time {
    color: #999;
    min-width: 100px;
}

.log-action {
    color: #333;
    font-weight: 500;
}

.log-admin {
    color: #666;
    margin-left: auto;
}
</style>
@endsection