@extends('admin.layouts.app')

@section('title', 'لوحة تحكم النقاط والدعوات')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-star text-warning"></i>
                    لوحة تحكم النقاط والدعوات
                </h1>
                <div class="btn-group">
                    <a href="{{ route('admin.points.settings') }}" class="btn btn-outline-primary">
                        <i class="fas fa-cog"></i> الإعدادات
                    </a>
                    <a href="{{ route('admin.points.reports') }}" class="btn btn-outline-info">
                        <i class="fas fa-chart-bar"></i> التقارير
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات عامة -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                إجمالي النقاط
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($totalPoints) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-star fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                النقاط المتاحة
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($availablePoints) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-coins fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                الإحالات المكتملة
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $completedReferrals }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                طلبات الاسترداد المعلقة
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $pendingRedemptions }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات إضافية -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">إحصائيات الفترة الأخيرة (30 يوم)</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="text-center">
                                <div class="h4 text-success">{{ number_format($earnedPoints) }}</div>
                                <div class="text-muted">نقاط مكتسبة</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-center">
                                <div class="h4 text-danger">{{ number_format($usedPointsRecent) }}</div>
                                <div class="text-muted">نقاط مستخدمة</div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center">
                                <div class="h5 text-info">{{ $recentTransactions }}</div>
                                <div class="text-muted">معاملات</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <div class="h5 text-warning">{{ $totalRedemptions }}</div>
                                <div class="text-muted">طلبات استرداد</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <div class="h5 text-primary">{{ $activeRewards }}</div>
                                <div class="text-muted">مكافآت نشطة</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">روابط سريعة</h6>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.points.management') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-users text-primary"></i>
                            إدارة النقاط
                        </a>
                        <a href="{{ route('admin.points.rewards') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-gift text-success"></i>
                            إدارة المكافآت
                        </a>
                        <a href="{{ route('admin.points.redemptions') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-shopping-cart text-warning"></i>
                            طلبات الاسترداد
                        </a>
                        <a href="{{ route('admin.points.referrals') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-share-alt text-info"></i>
                            إدارة الإحالات
                        </a>
                        <a href="{{ route('admin.points.transactions') }}" class="list-group-item list-group-item-action">
                            <i class="fas fa-exchange-alt text-secondary"></i>
                            المعاملات
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- أفضل المستخدمين -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">أفضل المستخدمين (أكثر نقاط)</h6>
                </div>
                <div class="card-body">
                    @if($topUsers->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>المستخدم</th>
                                        <th>النقاط</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($topUsers as $index => $userPoints)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="mr-2">
                                                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                                            <span class="text-white font-weight-bold">{{ substr($userPoints->user->name, 0, 1) }}</span>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{{ $userPoints->user->name }}</div>
                                                        <small class="text-muted">{{ $userPoints->user->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge badge-primary">{{ number_format($userPoints->points) }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-users fa-3x mb-3"></i>
                            <p>لا توجد بيانات</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">أكثر الإحالات نجاحاً</h6>
                </div>
                <div class="card-body">
                    @if($topReferrers->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>المستخدم</th>
                                        <th>الإحالات</th>
                                        <th>النقاط</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($topReferrers as $index => $referrer)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="mr-2">
                                                        <div class="bg-success rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                                            <span class="text-white font-weight-bold">{{ substr($referrer->referrer->name, 0, 1) }}</span>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{{ $referrer->referrer->name }}</div>
                                                        <small class="text-muted">{{ $referrer->referrer->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge badge-success">{{ $referrer->total_referrals }}</span>
                                            </td>
                                            <td>
                                                <span class="badge badge-warning">{{ number_format($referrer->total_points) }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-share-alt fa-3x mb-3"></i>
                            <p>لا توجد إحالات</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- المعاملات الحديثة -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">المعاملات الحديثة</h6>
                </div>
                <div class="card-body">
                    @if($recentTransactionsList->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>المستخدم</th>
                                        <th>النوع</th>
                                        <th>النقاط</th>
                                        <th>الوصف</th>
                                        <th>التاريخ</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentTransactionsList as $transaction)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="mr-2">
                                                        <div class="bg-info rounded-circle d-flex align-items-center justify-content-center" style="width: 25px; height: 25px;">
                                                            <span class="text-white font-weight-bold" style="font-size: 10px;">{{ substr($transaction->user->name, 0, 1) }}</span>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold" style="font-size: 12px;">{{ $transaction->user->name }}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($transaction->type === 'earned')
                                                    <span class="badge badge-success">كسب</span>
                                                @elseif($transaction->type === 'used')
                                                    <span class="badge badge-danger">استخدام</span>
                                                @else
                                                    <span class="badge badge-secondary">{{ $transaction->type }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="font-weight-bold {{ $transaction->type === 'earned' ? 'text-success' : 'text-danger' }}">
                                                    {{ $transaction->type === 'earned' ? '+' : '' }}{{ $transaction->points }}
                                                </span>
                                            </td>
                                            <td>
                                                <small class="text-muted">{{ Str::limit($transaction->description, 30) }}</small>
                                            </td>
                                            <td>
                                                <small class="text-muted">{{ $transaction->created_at->format('Y-m-d H:i') }}</small>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-exchange-alt fa-3x mb-3"></i>
                            <p>لا توجد معاملات</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">طلبات الاسترداد الحديثة</h6>
                </div>
                <div class="card-body">
                    @if($recentRedemptions->count() > 0)
                        <div class="list-group list-group-flush">
                            @foreach($recentRedemptions as $redemption)
                                <div class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <div class="font-weight-bold">{{ $redemption->user->name }}</div>
                                            <small class="text-muted">{{ $redemption->reward->name_ar }}</small>
                                        </div>
                                        <div class="text-right">
                                            <div class="badge badge-{{ $redemption->status === 'pending' ? 'warning' : ($redemption->status === 'approved' ? 'success' : 'danger') }}">
                                                {{ $redemption->status === 'pending' ? 'معلق' : ($redemption->status === 'approved' ? 'موافق' : 'مرفوض') }}
                                            </div>
                                            <div class="small text-muted">{{ $redemption->points_used }} نقطة</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-shopping-cart fa-3x mb-3"></i>
                            <p>لا توجد طلبات استرداد</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
