@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')

    <h2 class="tt-page-title">Dashboard</h2>
    <p class="tt-page-sub">Overview of everyone using TradTrik.</p>

    <div class="tt-stat-cards">
        <div class="tt-card tt-stat-card">
            <span class="tt-stat-card-label">Total Users</span>
            <span class="tt-stat-card-value">{{ number_format($totalUsers) }}</span>
        </div>
        <div class="tt-card tt-stat-card">
            <span class="tt-stat-card-label">New Today</span>
            <span class="tt-stat-card-value tt-up">{{ number_format($newToday) }}</span>
        </div>
        <div class="tt-card tt-stat-card">
            <span class="tt-stat-card-label">New This Week</span>
            <span class="tt-stat-card-value tt-up">{{ number_format($newThisWeek) }}</span>
        </div>
        <div class="tt-card tt-stat-card">
            <span class="tt-stat-card-label">Blocked Users</span>
            <span class="tt-stat-card-value tt-down">{{ number_format($blockedUsers) }}</span>
        </div>
    </div>

    <div class="tt-card tt-recent-users">
        <div class="tt-recent-users-head">
            <h3>Recently Registered</h3>
            <a href="{{ route('admin.users.index') }}">View all users &rarr;</a>
        </div>

        <div class="tt-table-wrap">
            <table class="tt-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th>Joined</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($recentUsers as $user)
                        <tr>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone ?? '—' }}</td>
                            <td>
                                <span class="tt-badge-status tt-badge-{{ $user->status ?? 'active' }}">
                                    {{ ucfirst($user->status ?? 'active') }}
                                </span>
                            </td>
                            <td>{{ $user->created_at->format('d M Y') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="tt-table-empty">No users yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

@endsection

@push('styles')
<style>
    .tt-stat-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        margin-bottom: 26px;
    }

    .tt-stat-card {
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tt-stat-card-label { font-size: 12.5px; color: var(--tt-text-muted); }
    .tt-stat-card-value { font-size: 26px; font-weight: 800; color: #ffffff; }
    .tt-stat-card-value.tt-up { color: #34d17a; }
    .tt-stat-card-value.tt-down { color: #ff6b6b; }

    .tt-recent-users { padding: 22px 24px; }

    .tt-recent-users-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .tt-recent-users-head h3 { font-size: 15.5px; font-weight: 700; color: #ffffff; margin: 0; }
    .tt-recent-users-head a { font-size: 13px; font-weight: 600; color: var(--tt-orange-light); }
    .tt-recent-users-head a:hover { color: #ffffff; }

    .tt-table-wrap { overflow-x: auto; }

    .tt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

    .tt-table th {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--tt-text-faint);
        padding: 8px 10px;
        border-bottom: 1px solid var(--tt-border);
    }

    .tt-table td {
        padding: 12px 10px;
        color: var(--tt-text);
        border-bottom: 1px solid var(--tt-border);
    }

    .tt-table tr:last-child td { border-bottom: none; }

    .tt-table-empty { text-align: center; color: var(--tt-text-faint); padding: 24px 0; }

    .tt-badge-status {
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 20px;
    }

    .tt-badge-active { background: rgba(52, 209, 122, 0.12); color: #34d17a; }
    .tt-badge-blocked { background: rgba(255, 107, 107, 0.12); color: #ff6b6b; }

    @media (max-width: 992px) {
        .tt-stat-cards { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 576px) {
        .tt-stat-cards { grid-template-columns: 1fr; }
    }
</style>
@endpush