{{-- admin/users/detail.blade.php | Obrempong | Jcode --}}
@extends('layouts.admin')
@section('title', 'User: ' . $user->name)
@section('content')

<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
    <a href="{{ route('admin.users') }}" class="btn btn-outline btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
    <a href="{{ route('admin.users.edit',$user) }}" class="btn btn-primary btn-sm"><i class="fa fa-pen"></i> Edit User</a>
    @if($user->status==='active')
        <button onclick="document.getElementById('ban-modal').style.display='flex'" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Ban User</button>
    @else
        <form method="POST" action="{{ route('admin.users.unban',$user) }}" style="display:inline;">@csrf<button class="btn btn-sm btn-success"><i class="fa fa-unlock"></i> Unban</button></form>
    @endif
</div>

<div class="grid-side">
    <div style="display:flex;flex-direction:column;gap:20px;">
        {{-- Activity Tabs --}}
        <div class="card">
            <div class="card-header" style="display:flex;gap:0;padding:0;">
                @foreach(['transactions'=>'Transactions','withdrawals'=>'Withdrawals','tasks'=>'Tasks'] as $tab=>$label)
                <button onclick="showTab('{{ $tab }}')" id="tab-{{ $tab }}"
                    style="flex:1;padding:14px 16px;border:none;border-bottom:3px solid {{ $loop->first?'var(--primary)':'transparent' }};background:none;font-weight:700;font-size:13px;cursor:pointer;color:{{ $loop->first?'var(--primary)':'var(--text-muted)' }};">
                    {{ $label }}
                </button>
                @endforeach
            </div>

            {{-- Transactions --}}
            <div id="panel-transactions">
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>Type</th><th>Points</th><th>Description</th><th>Date</th></tr></thead>
                        <tbody>
                        @forelse($transactions as $tx)
                        <tr>
                            <td><span class="badge badge-primary">{{ ucfirst($tx->type) }}</span></td>
                            <td style="font-weight:700;color:{{ $tx->points>=0?'var(--success)':'var(--danger)' }}">{{ $tx->points>=0?'+':'' }}{{ number_format($tx->points) }}</td>
                            <td style="font-size:13px;">{{ $tx->description }}</td>
                            <td style="font-size:12px;color:var(--text-muted);">{{ $tx->created_at->format('d M Y H:i') }}</td>
                        </tr>
                        @empty<tr><td colspan="4" style="text-align:center;padding:20px;color:var(--text-muted);">No transactions.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="pagination">{{ $transactions->links() }}</div>
            </div>

            {{-- Withdrawals --}}
            <div id="panel-withdrawals" style="display:none;">
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>Amount</th><th>Method</th><th>Account</th><th>Status</th><th>Date</th></tr></thead>
                        <tbody>
                        @forelse($withdrawals as $w)
                        <tr>
                            <td><strong>GH₵{{ number_format($w->net_amount,2) }}</strong></td>
                            <td>{{ strtoupper(str_replace('_',' ',$w->method)) }}</td>
                            <td>{{ $w->account_name }} – {{ $w->account_number }}</td>
                            <td><span class="badge {{ match($w->status){'paid'=>'badge-success','pending'=>'badge-warning','rejected'=>'badge-danger',default=>'badge-muted'} }}">{{ ucfirst($w->status) }}</span></td>
                            <td style="font-size:12px;color:var(--text-muted);">{{ $w->created_at->format('d M Y') }}</td>
                        </tr>
                        @empty<tr><td colspan="5" style="text-align:center;padding:20px;color:var(--text-muted);">No withdrawals.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Tasks --}}
            <div id="panel-tasks" style="display:none;">
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>Task</th><th>Points</th><th>Status</th><th>Date</th></tr></thead>
                        <tbody>
                        @forelse($userTasks as $ut)
                        <tr>
                            <td style="font-size:13px;">{{ $ut->task->title }}</td>
                            <td>+{{ $ut->points_earned }}</td>
                            <td><span class="badge {{ match($ut->status){'approved'=>'badge-success','pending'=>'badge-warning','rejected'=>'badge-danger',default=>'badge-muted'} }}">{{ ucfirst($ut->status) }}</span></td>
                            <td style="font-size:12px;color:var(--text-muted);">{{ $ut->created_at->format('d M Y') }}</td>
                        </tr>
                        @empty<tr><td colspan="4" style="text-align:center;padding:20px;color:var(--text-muted);">No tasks completed.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Profile Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:16px;">
        <div class="card card-body text-center" style="padding:24px;">
            <img src="{{ $user->avatar_url }}" style="width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:3px solid var(--border);">
            <div style="font-size:18px;font-weight:800;">{{ $user->name }}</div>
            <div style="font-size:13px;color:var(--text-muted);">{{ $user->email }}</div>
            <div style="margin-top:8px;">
                <span class="badge {{ match($user->status){'active'=>'badge-success','banned'=>'badge-danger',default=>'badge-warning'} }}">{{ ucfirst($user->status) }}</span>
                <span class="badge badge-primary" style="margin-left:4px;">{{ $user->level }}</span>
            </div>
        </div>

        <div class="card">
            @foreach(['Points'=>number_format($user->points).' pts','Total Earned'=>number_format($user->total_earned_points).' pts','Cedis Balance'=>'GH₵'.number_format($user->cedis_balance,2),'Total Withdrawn'=>'GH₵'.number_format($user->total_withdrawn,2),'Referral Code'=>$user->referral_code,'Device'=>$user->device_type??'—','Last IP'=>$user->last_ip??'—','Last Login'=>$user->last_login_at?->format('d M Y H:i')??'Never','Joined'=>$user->created_at->format('d M Y')] as $lbl=>$val)
            <div style="display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px;">
                <span style="color:var(--text-muted);">{{ $lbl }}</span><strong>{{ $val }}</strong>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Ban Modal --}}
<div id="ban-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:12px;padding:24px;width:380px;">
        <h3 style="color:var(--danger);margin-bottom:14px;">Ban {{ $user->name }}</h3>
        <form method="POST" action="{{ route('admin.users.ban',$user) }}">@csrf
            <div class="form-group"><label class="form-label">Reason *</label><textarea name="reason" class="form-control" rows="3" required></textarea></div>
            <div style="display:flex;gap:10px;margin-top:14px;">
                <button type="submit" class="btn btn-danger flex-1">Ban User</button>
                <button type="button" onclick="document.getElementById('ban-modal').style.display='none'" class="btn btn-outline flex-1">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection
@push('scripts')
<script>
function showTab(name){
    ['transactions','withdrawals','tasks'].forEach(t=>{
        document.getElementById('panel-'+t).style.display=t===name?'block':'none';
        const btn=document.getElementById('tab-'+t);
        btn.style.borderBottomColor=t===name?'var(--primary)':'transparent';
        btn.style.color=t===name?'var(--primary)':'var(--text-muted)';
    });
}
</script>
@endpush