@extends('layouts.admin')
@section('title', 'User Details')
@section('page-title', 'User: ' . $user->name)
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Profile Card -->
    <div class="space-y-5">
        <div class="bg-white rounded-xl shadow p-6">
            <div class="text-center mb-4">
                <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <span class="text-indigo-600 font-bold text-2xl">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                </div>
                <h2 class="font-bold text-gray-800 text-lg">{{ $user->name }}</h2>
                <p class="text-gray-500 text-sm">{{ $user->email }}</p>
                <span class="mt-2 inline-block px-3 py-1 text-xs rounded-full font-semibold {{ $user->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                    {{ $user->is_active ? 'Active' : 'Suspended' }}
                </span>
            </div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Balance</span><strong class="text-green-600">${{ number_format($user->balance, 2) }}</strong></div>
                <div class="flex justify-between"><span class="text-gray-500">Total Earned</span><strong>${{ number_format($totalEarned, 2) }}</strong></div>
                <div class="flex justify-between"><span class="text-gray-500">Referral Code</span><code class="bg-gray-100 px-2 py-0.5 rounded text-xs">{{ $user->referral_code }}</code></div>
                <div class="flex justify-between"><span class="text-gray-500">Joined</span><span>{{ $user->created_at->format('M d, Y') }}</span></div>
                @if($user->activePlan)
                <div class="flex justify-between"><span class="text-gray-500">Plan</span><span class="text-yellow-600 font-semibold">{{ $user->activePlan->plan->name }}</span></div>
                @endif
            </div>
        </div>
        <!-- Adjust Balance -->
        <div class="bg-white rounded-xl shadow p-6">
            <h3 class="font-bold text-gray-800 mb-4">Adjust Balance</h3>
            <form action="{{ route('admin.users.balance', $user->id) }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="text-xs text-gray-500">Amount (use negative to deduct)</label>
                    <input type="number" name="amount" step="0.01" required placeholder="e.g. 10.00 or -5.00"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-1 text-sm focus:ring-2 focus:ring-indigo-400">
                </div>
                <div>
                    <label class="text-xs text-gray-500">Note (optional)</label>
                    <input type="text" name="note" placeholder="Reason for adjustment"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-1 text-sm focus:ring-2 focus:ring-indigo-400">
                </div>
                <button class="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700">Apply Adjustment</button>
            </form>
        </div>
        <!-- Toggle Status -->
        <div class="bg-white rounded-xl shadow p-6">
            <form action="{{ route('admin.users.toggle', $user->id) }}" method="POST">
                @csrf
                <button class="w-full {{ $user->is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} text-white py-2 rounded-lg text-sm font-semibold">
                    {{ $user->is_active ? 'Suspend User' : 'Activate User' }}
                </button>
            </form>
        </div>
    </div>

    <!-- Details -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Recent Completions -->
        <div class="bg-white rounded-xl shadow">
            <div class="p-5 border-b"><h3 class="font-bold text-gray-800">Recent Survey Completions</h3></div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50"><tr>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Survey</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reward</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    </tr></thead>
                    <tbody class="divide-y">
                        @forelse($completions as $c)
                        <tr><td class="px-5 py-3 text-sm">{{ $c->survey->title ?? 'Deleted Survey' }}</td>
                        <td class="px-5 py-3 font-bold text-green-600">${{ number_format($c->reward, 2) }}</td>
                        <td class="px-5 py-3 text-xs text-gray-400">{{ $c->created_at->format('M d, Y') }}</td></tr>
                        @empty
                        <tr><td colspan="3" class="px-5 py-5 text-center text-gray-400 text-sm">No completions.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Recent Payments -->
        <div class="bg-white rounded-xl shadow">
            <div class="p-5 border-b"><h3 class="font-bold text-gray-800">Recent Transactions</h3></div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50"><tr>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    </tr></thead>
                    <tbody class="divide-y">
                        @forelse($payments as $p)
                        <tr>
                            <td class="px-5 py-3 text-sm">{{ ucfirst($p->type) }}</td>
                            <td class="px-5 py-3 font-bold {{ $p->type === 'deposit' ? 'text-green-600' : 'text-blue-600' }}">${{ number_format($p->amount, 2) }}</td>
                            <td class="px-5 py-3"><span class="px-2 py-1 text-xs rounded-full {{ $p->status === 'approved' ? 'bg-green-100 text-green-800' : ($p->status === 'rejected' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">{{ ucfirst($p->status) }}</span></td>
                            <td class="px-5 py-3 text-xs text-gray-400">{{ $p->created_at->format('M d, Y') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="px-5 py-5 text-center text-gray-400 text-sm">No transactions.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection