@extends('layouts.admin')

@section('pageTitle', 'داشبورد')

@section('content')
<div class="container mx-auto px-6 py-8">
    <h3 class="text-gray-700 dark:text-gray-200 text-3xl font-medium">داشبورد</h3>

    <!-- Stats Cards -->
    <div class="mt-4">
        <div class="flex flex-wrap -mx-6">
            <div class="w-full px-6 sm:w-1/2 xl:w-1/4">
                <div class="flex items-center px-5 py-6 bg-white dark:bg-gray-800 rounded-md shadow-sm">
                    <div class="p-3 bg-indigo-600 bg-opacity-75 rounded-full">
                        <i class="fas fa-users text-white text-2xl"></i>
                    </div>
                    <div class="mx-5">
                        <h4 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">{{ $activeUsersCount }}</h4>
                        <div class="text-gray-500 dark:text-gray-400">کاربران فعال</div>
                    </div>
                </div>
            </div>

            <div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-4 sm:mt-0">
                <div class="flex items-center px-5 py-6 bg-white dark:bg-gray-800 rounded-md shadow-sm">
                    <div class="p-3 bg-orange-600 bg-opacity-75 rounded-full">
                        <i class="fas fa-clone text-white text-2xl"></i>
                    </div>
                    <div class="mx-5">
                        <h4 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">{{ $flashcardsCount }}</h4>
                        <div class="text-gray-500 dark:text-gray-400">فلش‌کارت‌ها</div>
                    </div>
                </div>
            </div>

            <div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-4 xl:mt-0">
                <div class="flex items-center px-5 py-6 bg-white dark:bg-gray-800 rounded-md shadow-sm">
                    <div class="p-3 bg-pink-600 bg-opacity-75 rounded-full">
                        <i class="fas fa-book text-white text-2xl"></i>
                    </div>
                    <div class="mx-5">
                        <h4 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">{{ $booksCount }}</h4>
                        <div class="text-gray-500 dark:text-gray-400">کتاب‌ها</div>
                    </div>
                </div>
            </div>

            <div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-4 xl:mt-0">
                <div class="flex items-center px-5 py-6 bg-white dark:bg-gray-800 rounded-md shadow-sm">
                    <div class="p-3 bg-green-600 bg-opacity-75 rounded-full">
                         <i class="fas fa-headset text-white text-2xl"></i>
                    </div>
                    <div class="mx-5">
                        <h4 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">{{ $openTicketsCount }}</h4>
                        <div class="text-gray-500 dark:text-gray-400">تیکت‌های باز</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Centered Sections: Recent Flashcards & Pending Tickets -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 justify-center">
        <!-- Recent Flashcards -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">فلش‌کارت‌های اخیر</h3>
            </div>
            <div class="p-6">
                 @if(isset($recentFlashcards) && $recentFlashcards->count() > 0)
                <ul class="divide-y divide-gray-200">
                    @foreach($recentFlashcards as $card)
                    <li class="py-3 flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="w-2 h-2 bg-blue-500 rounded-full ml-2"></span>
                            <span class="text-gray-700 dark:text-gray-200">{{ Str::limit($card->question, 40) }}</span>
                        </div>
                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ $card->created_at->diffForHumans() }}</span>
                    </li>
                    @endforeach
                </ul>
                @else
                    <p class="text-gray-500 dark:text-gray-400 text-center">موردی یافت نشد.</p>
                @endif
                <div class="mt-4 text-center">
                    <a href="{{ route('flashcards.index') }}" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">مشاهده همه</a>
                </div>
            </div>
        </div>

        <!-- Pending Tickets -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full">
             <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">تیکت‌های منتظر</h3>
            </div>
            <div class="p-6">
                @if(isset($pendingTickets) && $pendingTickets->count() > 0)
                <ul class="divide-y divide-gray-200">
                    @foreach($pendingTickets as $ticket)
                    <li class="py-3">
                        <div class="flex justify-between items-start">
                             <span class="font-medium text-gray-800 dark:text-gray-100">{{ $ticket->subject }}</span>
                             <span class="text-xs px-2 py-1 rounded {{ $ticket->status == 'open' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800' }}">
                                 {{ $ticket->status == 'open' ? 'باز' : 'در انتظار' }}
                             </span>
                        </div>
                        <div class="mt-1 flex justify-between items-center">
                             <span class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                                <i class="fas fa-user ml-1 text-gray-400"></i>
                                {{ $ticket->user->full_name ?? 'کاربر ناشناس' }}
                             </span>
                             <span class="text-xs text-gray-400">{{ $ticket->created_at->diffForHumans() }}</span>
                        </div>
                    </li>
                    @endforeach
                </ul>
                @else
                    <p class="text-gray-500 dark:text-gray-400 text-center">تیکت منتظری وجود ندارد.</p>
                @endif
                 <div class="mt-4 text-center">
                    <a href="{{ route('tickets.index') }}" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">مشاهده همه</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Revenue Chart -->
    @if(isset($monthlyStats))
    <div class="mt-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">درآمد این ماه</h3>
            </div>
            <div class="p-6">
                <canvas id="revenueChart" width="400" height="100"></canvas>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        const ctx = document.getElementById('revenueChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($monthlyStats['labels']) !!},
                datasets: [{
                    label: 'درآمد (تومان)',
                    data: {!! json_encode($monthlyStats['data']) !!},
                    backgroundColor: '#3b82f6',
                    borderColor: '#1f2937',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: '#6b7280'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: '#6b7280'
                        },
                        grid: {
                            color: '#e5e7eb'
                        }
                    },
                    x: {
                        ticks: {
                            color: '#6b7280'
                        },
                        grid: {
                            color: '#e5e7eb'
                        }
                    }
                }
            }
        });
    </script>
    @endif

    <!-- Recently Active Users -->
    <div class="mt-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">کاربران فعال اخیر</h3>
                <a href="{{ route('users.index') }}" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">مشاهده همه</a>
            </div>
            <div class="overflow-x-auto">
                @if(isset($recentlyActiveUsers) && $recentlyActiveUsers->count() > 0)
                <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">
                        @foreach($recentlyActiveUsers as $user)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                            <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100">
                                <a href="{{ route('users.show', $user->id) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
                                    {{ $user->name ?? 'کاربر' }}
                                </a>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400 font-mono">{{ $user->phone_number }}</td>
                            <td class="px-6 py-4 text-sm">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                    <span class="w-2 h-2 bg-green-500 rounded-full ml-2"></span>
                                    فعال
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                                @if($user->last_activity_at)
                                    {{ \Carbon\Carbon::parse($user->last_activity_at)->diffForHumans() }}
                                @else
                                    نامشخص
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                    <div class="p-6 text-center">
                        <p class="text-gray-500 dark:text-gray-400">هیچ کاربر فعالی در 30 دقیقه گذشته وجود ندارد.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Latest Activities -->
    <div class="mt-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
             <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">فعالیت‌های اخیر</h3>
                <a href="{{ route('admin.activity-logs') }}" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">مشاهده همه</a>
            </div>
             <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-center text-sm font-semibold text-gray-700 dark:text-gray-300">مدیر</th>
                            <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">فعالیت</th>
                            <th class="px-6 py-3 text-center 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(isset($recentActivities) && $recentActivities->count() > 0)
                            @foreach($recentActivities as $activity)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                <td class="px-6 py-4 text-sm text-center text-gray-900 dark:text-gray-100">
                                    {{ $activity->admin->full_name ?? 'سیستم' }}
                                </td>
                                <td class="px-6 py-4 text-sm text-center text-gray-600 dark:text-gray-400">
                                    {{ $activity->description ?? $activity->action }}
                                </td>
                                <td class="px-6 py-4 text-sm text-center text-gray-600 dark:text-gray-400">
                                    @if($activity->created_at)
                                        {{ \Carbon\Carbon::parse($activity->created_at)->diffForHumans() }}
                                    @else
                                        نامشخص
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="3" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">فعالیتی ثبت نشده است.</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection