@extends('admin.layouts.app')

@section('title', 'Profile')

@can('user.view')
    @section('back-url', route('users.index'))
@endcan

@section('content')
    <div class="container-fluid">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <div class="position-relative">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center text-white" 
                                 style="width: 80px; height: 80px; font-size: 2rem; font-weight: 600;">
                                {{ getInitials($user->name) }}
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <h4 class="mb-1 font-weight-bold">{{ $user->name }}</h4>
                        <p class="text-muted mb-1">{{ $user->email }}</p>
                        <span class="badge badge-success px-3 py-1 rounded-pill">{{ $user->type }}</span>
                    </div>
                    <div class="col-auto">
                        @can('user.edit')
                        <a href="{{ route('users.edit', $user->id) }}" class="btn btn-outline-primary btn-sm px-3 showLoader">
                            <i class="mdi mdi-pencil mr-1"></i>
                            Update Profile
                        </a>
                        @endcan
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-bottom-0">
                        <h6 class="mb-0 font-weight-bold text-dark">Personal Information</h6>
                    </div>
                    <div class="card-body py-2">
                        @if ($user->mobile)
                            <div class="mb-3">
                                <small class="text-muted d-block">Mobile</small>
                                <span class="font-weight-medium">{{ $user->mobile }}</span>
                            </div>
                        @endif
                        
                        @if ($user->cnic)
                            <div class="mb-3">
                                <small class="text-muted d-block">CNIC</small>
                                <span class="font-weight-medium">{{ $user->cnic }}</span>
                            </div>
                        @endif
                        
                        @if ($user->gender)
                            <div class="mb-3">
                                <small class="text-muted d-block">Gender</small>
                                <span class="font-weight-medium text-capitalize">{{ $user->gender }}</span>
                            </div>
                        @endif
                        
                        @if ($user->city_id)
                            <div class="mb-3">
                                <small class="text-muted d-block">City</small>
                                <span class="font-weight-medium text-capitalize">{{ $user->city->name ?? '-' }}</span>
                            </div>
                        @endif
                        
                        <div class="pt-3 border-top">
                            <small class="text-muted">Referral Code</small>
                            <code class="bg-light py-1 rounded small">{{ $user->referral_code }}</code>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-bottom-0">
                        <h6 class="mb-0 font-weight-bold text-dark">Latest Activities</h6>
                    </div>
                    <div class="card-body py-2">
                        @forelse ($latestLogs as $log)
                            <div class="d-flex align-items-center justify-content-between py-2 border-bottom">
                                <div class="d-flex align-items-center">
                                    <div class="mr-3">
                                        <span class="badge badge-{{ $log->status == 'earned' ? 'success' : 'danger' }} rounded-circle p-1">
                                        </span>
                                    </div>
                                    <div>
                                        <h6 class="mb-1 font-weight-bold text-dark">{{ Str::of($log->type)->replace('_', ' ')->title() }}</h6>
                                        <small class="text-muted">{{ $log->created_at->format('d-M-Y h:i A') }}</small>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="badge badge-{{ $log->status == 'earned' ? 'success' : 'danger' }} mb-1">{{ $log->status }}</span>
                                    <div class="text-{{ $log->status == 'earned' ? 'primary' : 'danger' }} font-weight-bold">{{ $log->status == 'earned' ? '+' : '-' }} {{ $log->points }}</div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-4">
                                <p class="text-muted mb-0">No activities found.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-4">
                                <div class="mb-3">
                                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px;">
                                        <i class="mdi mdi-recycle text-secondary" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                                <h3 class="mb-1 font-weight-bold">{{ $user->bonus_points }}</h3>
                                <p class="text-muted mb-0">Current Points</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-4">
                                <div class="mb-3">
                                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px;">
                                        <i class="mdi mdi-artstation text-success" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                                <h3 class="mb-1 font-weight-bold">{{ $user->lifetime_points }}</h3>
                                <p class="text-muted mb-0">Lifetime Points</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-4">
                                <div class="mb-3">
                                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px;">
                                        <i class="mdi mdi-account-group-outline text-primary" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                                <h3 class="mb-1 font-weight-bold">{{ $user->referrals->count() ?? 0 }}</h3>
                                <p class="text-muted mb-0">Referred Users</p>
                            </div>
                        </div>
                    </div>
                    
                    {{-- <div class="col-md-6 mb-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-4">
                                <div class="mb-3">
                                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px;">
                                        <i class="mdi mdi-bell text-info" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                                <h3 class="mb-1 font-weight-bold">$8,930</h3>
                                <p class="text-muted mb-0">Monthly Revenue</p>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>

        </div>
    </div>
@endsection