@extends('admin.layouts.app')

@section('title', 'Registered Users')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-xl font-bold text-white tracking-tight">Registered Users</h1>
            <p class="text-xs text-slate-500 mt-1">Manage and monitor regular user accounts.</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-[#101828] border border-white/5 rounded-xl p-4 mb-6">
        <form action="{{ route('admin.users.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <div class="flex-1 min-w-[200px] relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by name, email or mobile..."
                    class="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-xs text-white focus:outline-none focus:border-yellow-500/50">
            </div>

            <button type="submit"
                class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 px-6 py-2 rounded-lg text-xs font-bold transition-all">
                Search
            </button>

            @if(request()->filled('search'))
                <a href="{{ route('admin.users.index') }}" class="text-xs text-slate-500 hover:text-white transition-colors">
                    Reset
                </a>
            @endif
        </form>
    </div>

    @if(session('success'))
        <div
            class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-2.5 rounded-lg mb-6 text-xs font-medium flex items-center gap-2">
            <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-[#101828] border border-white/5 rounded-xl overflow-hidden shadow-sm">
        <table class="w-full text-left">
            <thead>
                <tr class="bg-white/[0.02] border-b border-white/5">
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">User</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Mobile</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Chats</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Pooja Orders
                    </th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Joined</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider text-right">
                        Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($users as $user)
                    <tr class="hover:bg-white/[0.01] transition-colors group">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-indigo-400 border border-white/5 overflow-hidden">
                                    @if($user->avatar)
                                        <img src="{{ $user->avatar }}" class="w-full h-full object-cover">
                                    @else
                                        <i data-lucide="user" class="w-4 h-4"></i>
                                    @endif
                                </div>
                                <div>
                                    <p class="text-xs font-semibold text-white">{{ $user->name }}</p>
                                    <p class="text-[10px] text-slate-500">{{ $user->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-xs text-slate-400">
                            {{ $user->mobile ?? 'N/A' }}
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.chats.index', ['user_id' => $user->id]) }}" 
                                class="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500/20 transition-all text-[10px] font-bold">
                                <i data-lucide="message-square" class="w-3 h-3"></i>
                                {{ $user->chat_sessions_count }}
                            </a>
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.orders.index', ['user_id' => $user->id, 'type' => 'pooja']) }}" 
                                class="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 transition-all text-[10px] font-bold">
                                <i data-lucide="package" class="w-3 h-3"></i>
                                {{ $user->pooja_orders_count }}
                            </a>
                        </td>
                        <td class="px-6 py-4 text-[10px] text-slate-500">
                            {{ $user->created_at->format('M d, Y') }}
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('admin.users.show', $user->id) }}"
                                    class="p-1.5 text-slate-400 hover:text-white hover:bg-white/10 rounded-md transition-all"
                                    title="View Details">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                </a>

                                <form action="{{ route('admin.users.toggle-status', $user->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                        class="p-1.5 {{ $user->is_active ? 'text-amber-400 hover:bg-amber-500/10' : 'text-green-400 hover:bg-green-500/10' }} rounded-md transition-all"
                                        title="{{ $user->is_active ? 'Deactivate' : 'Activate' }}">
                                        <i data-lucide="{{ $user->is_active ? 'user-x' : 'user-check' }}"
                                            class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center text-slate-500">
                            <div class="flex flex-col items-center gap-2">
                                <i data-lucide="users" class="w-8 h-8 opacity-20"></i>
                                <p class="text-xs">No regular users registered yet.</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $users->links() }}
    </div>
@endsection