@extends('admin.layouts.app')

@section('title', 'Users')

@section('content')

    <h2 class="tt-page-title">All Users</h2>
    <p class="tt-page-sub">Everyone who has signed up on TradTrik — {{ $users->total() }} total.</p>

    <div class="tt-card tt-users-card">

        <form method="GET" action="{{ route('admin.users.index') }}" class="tt-search-form">
            <input type="text" name="search" value="{{ $search }}" placeholder="Search by name, email or phone...">
            <button type="submit">Search</button>
        </form>

        <div class="tt-table-wrap">
            <table class="tt-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Broker</th>
                        <th>Status</th>
                        <th>Joined</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>{{ $user->id }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone ?? '—' }}</td>
                            <td>{{ $user->broker ? ucfirst($user->broker) : '—' }}</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>
                            <td>
                                <form method="POST" action="{{ route('admin.users.toggle-status', $user) }}">
                                    @csrf
                                    <button type="submit" class="tt-table-action">
                                        {{ ($user->status ?? 'active') === 'active' ? 'Block' : 'Unblock' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="tt-table-empty">No users found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="tt-pagination">
            {{ $users->links() }}
        </div>
    </div>

@endsection

@push('styles')
<style>
    .tt-users-card { padding: 22px 24px; }

    .tt-search-form {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        max-width: 420px;
    }

    .tt-search-form input {
        flex: 1;
        background: var(--tt-navy-deep);
        border: 1px solid var(--tt-border);
        border-radius: 10px;
        padding: 10px 14px;
        color: var(--tt-text);
        font-size: 13.5px;
    }

    .tt-search-form input:focus { outline: none; border-color: var(--tt-orange); }

    .tt-search-form button {
        background: var(--tt-orange);
        color: #ffffff;
        border: none;
        border-radius: 10px;
        padding: 10px 18px;
        font-weight: 600;
        font-size: 13.5px;
        cursor: pointer;
    }

    .tt-search-form button:hover { background: var(--tt-orange-light); }

    .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);
        white-space: nowrap;
    }

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

    .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; }

    .tt-table-action {
        background: transparent;
        border: 1px solid var(--tt-border);
        color: var(--tt-text-muted);
        font-size: 12px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .tt-table-action:hover {
        border-color: var(--tt-orange);
        color: var(--tt-orange-light);
    }

    .tt-pagination { margin-top: 18px; }
    .tt-pagination nav { display: flex; justify-content: center; }
</style>
@endpush