@extends('layout.admin')

@section('content')
@php
    $adminUser = auth('admin')->user();
    $canBanUsers = $adminUser?->hasAnyProjectPermission(['users', 'users_ban']) ?? true;
    $canLoginAsUser = $adminUser?->hasAnyProjectPermission(['users', 'users_login']) ?? true;
@endphp
<div class="p-4 bg-gray-100 min-h-screen">
    <h2 class="text-2xl font-bold mb-4 text-gray-800">Active Users</h2>

    @if(session('success'))
        <div class="mb-3 p-3 bg-green-50 border border-green-400 text-green-800 rounded shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-3 p-3 bg-red-50 border border-red-400 text-red-800 rounded shadow-sm">
            {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse($activeUsers as $user)
            @php
                $photo = $user->profile_photo ? asset('images/profile/' . $user->profile_photo) : asset('images/profile/profile.png');
            @endphp

            <div class="bg-white rounded-2xl shadow border border-gray-200 overflow-hidden">
                <div class="p-4 border-b border-gray-100 flex items-center gap-3">
                    <img src="{{ $photo }}" alt="Profile" class="w-12 h-12 rounded-full border border-gray-200 object-cover">
                    <div>
                        <h3 class="text-base font-bold text-gray-900">{{ $user->name }}</h3>
                        <p class="text-sm text-gray-600">{{ $user->mobile }}</p>
                    </div>
                </div>

                <div class="p-4 space-y-2 text-sm text-gray-700">
                    <div><span class="font-semibold">Referral:</span> {{ $user->referral_code ?? 'N/A' }}</div>
                    <div><span class="font-semibold">Referred By:</span> {{ $user->referred_by ?? 'N/A' }}</div>
                    <div><span class="font-semibold">Balance:</span> {{ number_format($user->balance, 2) }}</div>
                    <div><span class="font-semibold">Voucher:</span> {{ number_format($user->voucher_balance ?? 0, 2) }}</div>
                </div>

                @if($canBanUsers || $canLoginAsUser)
                    <div class="px-4 pb-4 space-y-2">
                        @if($canBanUsers)
                            <form method="POST" action="{{ route('admin.users.ban', $user->id) }}"
                                  class="space-y-2"
                                  onsubmit="return confirm('Are you sure you want to ban this user?');">
                                @csrf
                                <textarea name="ban_reason"
                                          rows="2"
                                          placeholder="Ban reason (this will show on login)"
                                          class="w-full text-xs border border-red-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-400"
                                          required></textarea>
                                    <input type="password"
                                           name="admin_password"
                                       placeholder="Security password"
                                        class="w-full text-xs border border-red-200 rounded-full px-3 py-2 focus:ring-2 focus:ring-red-400"
                                        required>
                                <button type="submit"
                                        class="w-full px-3 py-2 text-xs font-semibold text-red-600 border border-red-600 rounded-full hover:bg-red-600 hover:text-white transition">
                                    Ban User
                                </button>
                            </form>
                        @endif

                        @if($canLoginAsUser)
                            <form method="POST" action="{{ route('admin.users.login', $user->id) }}">
                                @csrf
                                <input type="hidden" name="admin_password" id="admin_password_{{ $user->id }}">
                                <button type="button"
                                        class="block w-full text-center px-3 py-2 text-xs font-semibold text-purple-600 border border-purple-600 rounded-full hover:bg-purple-600 hover:text-white transition"
                                        onclick="askAdminPassword({{ $user->id }})">
                                    Login To User
                                </button>
                            </form>
                        @endif
                    </div>
                @endif
            </div>
        @empty
            <div class="bg-white rounded-xl border border-gray-200 p-6 text-gray-600 col-span-full">
                No active users found.
            </div>
        @endforelse
    </div>

    @if(method_exists($activeUsers, 'links'))
        <div class="mt-5">
            {{ $activeUsers->links() }}
        </div>
    @endif
</div>
<script>
    function askAdminPassword(id){
        const password = prompt('Enter security password');
        if(!password) return;
        const input = document.getElementById('admin_password_' + id);
        if(!input) return;
        input.value = password;
        input.form.submit();
    }
</script>
@endsection
