@extends('admin.layouts.master')

@section('title', 'LynX Admin - Users')
@section('page-title', '👥 Users Management')

@section('content')
    <!-- Filters Bar -->
    <div class="glass-card animate-in" style="margin-bottom: 24px;">
        <div class="flex-between flex-wrap" style="gap: 16px;">
            <div class="flex-center" style="gap: 12px; flex: 1;">
                <input type="text" placeholder="Search users by name, email or phone..." class="form-input" style="max-width: 360px;">
                <button class="btn btn-primary">
                    <span>🔍</span> Search
                </button>
            </div>
            <div class="flex-center" style="gap: 8px;">
                <select class="form-select" style="width: auto; min-width: 140px;">
                    <option>All Types</option>
                    <option>Riders</option>
                    <option>Drivers</option>
                    <option>Admins</option>
                </select>
                <button class="btn btn-outline">📊 Export</button>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="glass-card animate-in animate-in-delay-1" style="padding: 0; overflow: hidden;">
        <div class="table-container" style="padding: 0; border: none; background: transparent;">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email / Phone</th>
                        <th>Type</th>
                        <th>Rides</th>
                        <th>Rating</th>
                        <th>Status</th>
                        <th>Joined</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                    <tr>
                        <td>
                            <div class="flex-center" style="gap: 12px;">
                                <div style="width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: bold; box-shadow: 0 2px 10px var(--primary-glow);">
                                    {{ strtoupper(substr($user->full_name, 0, 1)) }}
                                </div>
                                <strong>{{ $user->full_name }}</strong>
                            </div>
                        </td>
                        <td style="font-size: 13px; color: var(--text-muted);">{{ $user->email ?? $user->phone ?? 'N/A' }}</td>
                        <td>
                            <span class="status-badge {{ $user->user_type === 'admin' ? 'status-active' : ($user->user_type === 'driver' ? 'status-info' : 'status-pending') }}">
                                {{ ucfirst($user->user_type) }}
                            </span>
                        </td>
                        <td style="font-weight: 600;">{{ $user->rides_count ?? $user->total_rides }}</td>
                        <td>
                            <span style="color: var(--warning);">⭐</span>
                            {{ number_format($user->rating, 1) }}
                        </td>
                        <td>
                            <span class="status-badge {{ $user->is_active ? 'status-active' : 'status-danger' }}">
                                <span class="glowing-dot {{ $user->is_active ? 'active' : 'danger' }}" style="width: 6px; height: 6px; display: inline-block; margin-right: 4px; vertical-align: middle;"></span>
                                {{ $user->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td style="font-size: 12px; color: var(--text-muted);">{{ $user->created_at->format('M d, Y') }}</td>
                        <td>
                            <div class="flex-center" style="gap: 6px;">
                                <a href="{{ route('admin.users.show', $user) }}" class="btn btn-outline btn-sm">
                                    👁️ View
                                </a>
                                <form action="{{ route('admin.users.toggle-status', $user) }}" method="POST" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-sm {{ $user->is_active ? 'btn-warning' : 'btn-success' }}">
                                        {{ $user->is_active ? '⏸️ Deactivate' : '▶️ Activate' }}
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" style="text-align: center; padding: 48px; color: var(--text-dim);">
                            <div style="font-size: 36px; margin-bottom: 12px;">👥</div>
                            No users found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if(method_exists($users, 'links'))
            <div style="padding: 20px; border-top: 1px solid var(--border);">
                {{ $users->links() }}
            </div>
        @endif
    </div>

    <!-- Quick Stats -->
    <div class="stats-grid animate-in animate-in-delay-2" style="margin-bottom: 0; margin-top: 24px;">
        @php
            $activeCount = \App\Models\User::where('is_active', true)->count();
            $totalUsers = \App\Models\User::count();
            $inactiveCount = $totalUsers - $activeCount;
            $driverCount = \App\Models\User::where('user_type', 'driver')->count();
        @endphp
        <div class="stat-card" style="border-left: 2px solid var(--success);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--success); font-size: 24px;">{{ $activeCount }}</div>
                    <div class="label">Active Users</div>
                </div>
                <span class="icon" style="font-size: 24px;">✅</span>
            </div>
        </div>
        <div class="stat-card" style="border-left: 2px solid var(--danger);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--danger); font-size: 24px;">{{ $inactiveCount }}</div>
                    <div class="label">Inactive Users</div>
                </div>
                <span class="icon" style="font-size: 24px;">⏸️</span>
            </div>
        </div>
        <div class="stat-card" style="border-left: 2px solid var(--primary);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--primary); font-size: 24px;">{{ $driverCount }}</div>
                    <div class="label">Drivers</div>
                </div>
                <span class="icon" style="font-size: 24px;">🚗</span>
            </div>
        </div>
    </div>
@endsection