@extends('layouts.admin')

@section('pageTitle', 'جزییات کاربر - ' . $user->name)

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="mb-6 flex justify-between items-center">
        <a href="{{ route('users.index') }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">
            <i class="fas fa-arrow-right ml-1"></i>بازگشت به لیست کاربران
        </a>
    </div>

    <!-- Profile Card -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Profile Info -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 h-24"></div>
                <div class="px-6 pb-6">
                    <div class="flex justify-center -mt-12 mb-4">
                        @if($user->profile_image)
                            <img src="{{ asset('storage/' . $user->profile_image) }}" alt="{{ $user->name }}" class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 object-cover">
                        @else
                            <div class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
                                <i class="fas fa-user text-4xl text-gray-500 dark:text-gray-400"></i>
                            </div>
                        @endif
                    </div>
                    <h2 class="text-center text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ $user->name ?? 'بدون نام' }}</h2>
                    <p class="text-center text-gray-600 dark:text-gray-400 text-sm mb-4">{{ $user->phone_number }}</p>
                    
                    <div class="grid grid-cols-2 gap-4 mb-6 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <div class="text-center">
                            <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $user->score ?? 0 }}</p>
                            <p class="text-xs text-gray-600 dark:text-gray-400">امتیاز</p>
                        </div>
                        <div class="text-center">
                            <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $user->rank ?? 0 }}</p>
                            <p class="text-xs text-gray-600 dark:text-gray-400">رتبه</p>
                        </div>
                    </div>

                    <div class="flex flex-col gap-2">
                        <form action="{{ route('users.toggle-status', $user->id) }}" method="POST" class="w-full">
                            @csrf
                            <button type="submit" class="w-full px-4 py-2 {{ $user->is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} text-white rounded-md transition">
                                {{ $user->is_active ? 'غیرفعال کردن' : 'فعال کردن' }}
                            </button>
                        </form>
                        <a href="{{ route('users.edit', $user->id) }}" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-center transition">
                            ویرایش
                        </a>
                        <form action="{{ route('users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('آیا مطمئنید که می‌خواهید این کاربر را حذف کنید؟');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="w-full px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition">
                                <i class="fas fa-trash ml-2"></i>حذف کاربر
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Activity & Stats -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Stats Cards -->
            <div class="grid grid-cols-3 gap-4">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <p class="text-gray-600 dark:text-gray-400 text-sm">وضعیت</p>
                    <p class="text-2xl font-bold {{ $user->is_active ? 'text-green-600' : 'text-red-600' }} dark:{{ $user->is_active ? 'text-green-400' : 'text-red-400' }}">
                        {{ $user->is_active ? 'فعال' : 'غیرفعال' }}
                    </p>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <p class="text-gray-600 dark:text-gray-400 text-sm">کیف پول</p>
                    <p class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ number_format($user->wallet_balance ?? 0) }}</p>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <p class="text-gray-600 dark:text-gray-400 text-sm">عضویت</p>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $user->created_at->diffInDays(now()) }} روز</p>
                </div>
            </div>

            <!-- Timeline -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">تاریخچه فعالیت</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-green-100 dark:bg-green-900">
                                    <i class="fas fa-user-check text-green-600 dark:text-green-400"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-gray-900 dark:text-white">ثبت نام</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->created_at->format('Y/m/d - H:i') }}</p>
                            </div>
                        </div>

                        @if($user->last_login)
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900">
                                    <i class="fas fa-sign-in-alt text-blue-600 dark:text-blue-400"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-gray-900 dark:text-white">آخرین ورود</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->last_login->format('Y/m/d - H:i') }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ $user->last_login->diffForHumans() }}</p>
                            </div>
                        </div>
                        @endif

                        @if($user->last_activity_at)
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-purple-100 dark:bg-purple-900">
                                    <i class="fas fa-mouse text-purple-600 dark:text-purple-400"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-gray-900 dark:text-white">آخرین فعالیت</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->last_activity_at->format('Y/m/d - H:i') }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ $user->last_activity_at->diffForHumans() }}</p>
                            </div>
                        </div>
                        @endif

                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-700">
                                    <i class="fas fa-calendar-alt text-gray-600 dark:text-gray-400"></i>
                                </div>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-gray-900 dark:text-white">آخرین به‌روزرسانی</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->updated_at->format('Y/m/d - H:i') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- User Details -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">اطلاعات کاربر</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">شماره تلفن</label>
                            <p class="text-gray-900 dark:text-gray-100 font-mono">{{ $user->phone_number }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">ایمیل</label>
                            <p class="text-gray-900 dark:text-gray-100">{{ $user->email ?? '—' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">شناسه کاربر</label>
                            <p class="text-gray-900 dark:text-gray-100 font-mono text-sm">{{ $user->user_id ?? '—' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">وضعیت مسدودیت</label>
                            <p class="inline-block px-3 py-1 {{ $user->is_blocked ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200' : 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' }} rounded text-sm font-semibold">
                                {{ $user->is_blocked ? 'مسدود' : 'عادی' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs for Activities -->
    <div class="mt-8">
        <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6" role="tablist">
            <button class="tab-btn active px-6 py-3 font-semibold text-gray-900 dark:text-white border-b-2 border-indigo-600 transition" data-tab="transactions" role="tab">
                <i class="fas fa-wallet ml-2"></i>تراکنش‌های کیف پول
            </button>
            <button class="tab-btn px-6 py-3 font-semibold text-gray-600 dark:text-gray-400 border-b-2 border-transparent hover:border-gray-300 transition" data-tab="subscriptions" role="tab">
                <i class="fas fa-receipt ml-2"></i>اشتراک‌ها
            </button>
            <button class="tab-btn px-6 py-3 font-semibold text-gray-600 dark:text-gray-400 border-b-2 border-transparent hover:border-gray-300 transition" data-tab="purchases" role="tab">
                <i class="fas fa-shopping-cart ml-2"></i>خریدها
            </button>
        </div>

        <!-- Tab Contents -->
        <!-- Transactions Tab -->
        <div id="transactions" class="tab-content active bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                        <tr>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">نوع تراکنش</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">مبلغ</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">توضیحات</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">تاریخ</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @if($walletTransactions && $walletTransactions->count() > 0)
                            @foreach($walletTransactions as $transaction)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
                                    <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                                        {{ $transaction->type === 'deposit' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : ($transaction->type === 'withdraw' ? 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200' : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200') }}">
                                        {{ $transaction->type === 'deposit' ? 'شارژ' : ($transaction->type === 'withdraw' ? 'برداشت' : 'خرید') }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-gray-100">
                                    <span class="{{ $transaction->amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                        {{ number_format(abs($transaction->amount)) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $transaction->description ?? '—' }}</td>
                                <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $transaction->created_at->format('Y/m/d - H:i') }}</td>
                            </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                    هیچ تراکنشی یافت نشد
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Subscriptions Tab -->
        <div id="subscriptions" class="tab-content hidden bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                        <tr>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">نام پلن</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">وضعیت</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">شروع</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">پایان</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @if($subscriptions && $subscriptions->count() > 0)
                            @foreach($subscriptions as $subscription)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100 font-semibold">
                                    {{ $subscription->plan->name ?? 'نامشخص' }}
                                </td>
                                <td class="px-6 py-4 text-sm">
                                    <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                                        {{ $subscription->status === 'active' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200' }}">
                                        {{ $subscription->status === 'active' ? 'فعال' : 'منقضی' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $subscription->start_date ? $subscription->start_date->format('Y/m/d') : '—' }}</td>
                                <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $subscription->end_date ? $subscription->end_date->format('Y/m/d') : '∞' }}</td>
                            </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                    هیچ اشتراکی یافت نشد
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Purchases Tab -->
        <div id="purchases" class="tab-content hidden bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                        <tr>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">شماره سفارش</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">مبلغ</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">وضعیت</th>
                            <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300">تاریخ</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @if($purchases && $purchases->count() > 0)
                            @foreach($purchases as $purchase)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-gray-100">{{ $purchase->id }}</td>
                                <td class="px-6 py-4 text-sm font-mono text-gray-900 dark:text-gray-100">{{ number_format($purchase->amount ?? 0) }}</td>
                                <td class="px-6 py-4 text-sm">
                                    <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                                        {{ $purchase->status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' }}">
                                        {{ $purchase->status === 'completed' ? 'تکمیل' : 'درحال‌بررسی' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $purchase->created_at->format('Y/m/d - H:i') }}</td>
                            </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                    هیچ خریدی یافت نشد
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.add('hidden');
            });
            
            // Remove active state from all buttons
            document.querySelectorAll('.tab-btn').forEach(button => {
                button.classList.remove('active');
                button.classList.remove('text-gray-900', 'dark:text-white', 'border-indigo-600');
                button.classList.add('text-gray-600', 'dark:text-gray-400', 'border-transparent');
            });
            
            // Show selected tab
            document.getElementById(tabName).classList.remove('hidden');
            
            // Add active state to clicked button
            this.classList.add('active');
            this.classList.remove('text-gray-600', 'dark:text-gray-400', 'border-transparent');
            this.classList.add('text-gray-900', 'dark:text-white', 'border-indigo-600');
        });
    });
</script>
@endsection