@extends('admin.layouts.app')

@section('title', 'تقرير مفصل - ' . $user->name)

@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">
                <div>
                    <h1 class="h3 mb-2">
                        <i class="fas fa-user-chart text-primary"></i>
                        تقرير مفصل: {{ $user->name }}
                    </h1>
                    <p class="text-muted mb-0">
                        <i class="fas fa-phone"></i> {{ $user->phone }} | 
                        <i class="fas fa-envelope"></i> {{ $user->email ?? 'غير متوفر' }}
                    </p>
                </div>
                <div class="btn-group">
                    <a href="{{ route('admin.points.earnings') }}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-right"></i> العودة
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- فلتر الفترة الزمنية -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.points.user-report', $user->id) }}" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">الفترة</label>
                            <select name="period" class="form-control" onchange="this.form.submit()">
                                <option value="week" {{ $period == 'week' ? 'selected' : '' }}>أسبوع</option>
                                <option value="month" {{ $period == 'month' ? 'selected' : '' }}>شهر</option>
                                <option value="year" {{ $period == 'year' ? 'selected' : '' }}>سنة</option>
                                <option value="custom" {{ $period == 'custom' ? 'selected' : '' }}>مخصص</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">من تاريخ</label>
                            <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">إلى تاريخ</label>
                            <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label d-block">&nbsp;</label>
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search"></i> تطبيق
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات الأرباح -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted mb-2">إجمالي الأرباح</div>
                            <div class="stats-number">{{ number_format($totalEarnings, 2) }} دينار</div>
                        </div>
                        <i class="fas fa-dollar-sign fa-3x"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted mb-2">الأرباح المعلقة</div>
                            <div class="stats-number">{{ number_format($pendingEarnings, 2) }} دينار</div>
                        </div>
                        <i class="fas fa-clock fa-3x"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted mb-2">الأرباح المدفوعة</div>
                            <div class="stats-number">{{ number_format($paidEarnings, 2) }} دينار</div>
                        </div>
                        <i class="fas fa-check-circle fa-3x"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted mb-2">عدد الإحالات</div>
                            <div class="stats-number">{{ $referralsInPeriod->count() }}</div>
                        </div>
                        <i class="fas fa-users fa-3x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- نسبة النمو -->
    <div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-line"></i> نمو الأرباح
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h2 class="mb-3 {{ $earningsGrowth >= 0 ? 'text-success' : 'text-danger' }}">
                        <i class="fas fa-{{ $earningsGrowth >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                        {{ number_format(abs($earningsGrowth), 2) }}%
                    </h2>
                    <p class="text-muted mb-0">
                        مقارنة بالفترة السابقة
                    </p>
                    @if($earningsGrowth >= 0)
                        <span class="badge badge-success mt-2">
                            <i class="fas fa-check"></i> نمو إيجابي
                        </span>
                    @else
                        <span class="badge badge-danger mt-2">
                            <i class="fas fa-exclamation"></i> انخفاض
                        </span>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-user-plus"></i> نمو الإحالات
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h2 class="mb-3 {{ $referralsGrowth >= 0 ? 'text-success' : 'text-danger' }}">
                        <i class="fas fa-{{ $referralsGrowth >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                        {{ number_format(abs($referralsGrowth), 2) }}%
                    </h2>
                    <p class="text-muted mb-0">
                        مقارنة بالفترة السابقة
                    </p>
                    @if($referralsGrowth >= 0)
                        <span class="badge badge-success mt-2">
                            <i class="fas fa-check"></i> نمو إيجابي
                        </span>
                    @else
                        <span class="badge badge-danger mt-2">
                            <i class="fas fa-exclamation"></i> انخفاض
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- توزيع الأرباح حسب نوع الطلب -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-pie"></i> توزيع الأرباح حسب نوع الطلب
                    </h6>
                </div>
                <div class="card-body">
                    <canvas id="earningsTypeChart" height="80"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- الأرباح اليومية -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-bar"></i> الأرباح اليومية
                    </h6>
                </div>
                <div class="card-body">
                    <canvas id="dailyEarningsChart" height="60"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- الأشخاص الذين دعاهم -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-users"></i> الأشخاص الذين دعاهم في هذه الفترة ({{ $referralsInPeriod->count() }})
                    </h6>
                </div>
                <div class="card-body">
                    @if($referralsInPeriod->count() > 0)
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاسم</th>
                                        <th>الهاتف</th>
                                        <th>تاريخ الدعوة</th>
                                        <th>الحالة</th>
                                        <th>عدد الطلبيات</th>
                                        <th>إجمالي الأرباح</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($referralsInPeriod as $index => $referral)
                                        @php
                                            $referredEarnings = $earningsInPeriod->where('referred_id', $referral->referred_id);
                                            $referredTotalEarnings = $referredEarnings->sum('earnings');
                                            $referredOrdersCount = $referredEarnings->count();
                                        @endphp
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mr-2" style="width: 35px; height: 35px;">
                                                        <span class="text-white font-weight-bold">{{ substr($referral->referred->name ?? 'N', 0, 1) }}</span>
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{{ $referral->referred->name ?? 'غير متوفر' }}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $referral->referred->phone ?? 'غير متوفر' }}</td>
                                            <td>{{ $referral->created_at->format('Y-m-d') }}</td>
                                            <td>
                                                @if($referral->status == 'completed')
                                                    <span class="badge badge-success">مكتمل</span>
                                                @elseif($referral->status == 'pending')
                                                    <span class="badge badge-warning">معلق</span>
                                                @else
                                                    <span class="badge badge-secondary">{{ $referral->status }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge badge-info">{{ $referredOrdersCount }}</span>
                                            </td>
                                            <td>
                                                <span class="font-weight-bold text-success">
                                                    {{ number_format($referredTotalEarnings, 2) }} دينار
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-users fa-3x mb-3"></i>
                            <p>لم يقم هذا المستخدم بدعوة أي شخص في هذه الفترة</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- أفضل الأشخاص المدعوين -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-trophy"></i> أفضل الأشخاص المدعوين (حسب الأرباح)
                    </h6>
                </div>
                <div class="card-body">
                    @if($topReferred->count() > 0)
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاسم</th>
                                        <th>الهاتف</th>
                                        <th>عدد الطلبيات</th>
                                        <th>إجمالي الأرباح</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($topReferred as $index => $item)
                                        <tr>
                                            <td>
                                                @if($index == 0)
                                                    <i class="fas fa-trophy text-warning"></i> 1
                                                @elseif($index == 1)
                                                    <i class="fas fa-medal text-secondary"></i> 2
                                                @elseif($index == 2)
                                                    <i class="fas fa-award text-danger"></i> 3
                                                @else
                                                    {{ $index + 1 }}
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mr-2" style="width: 35px; height: 35px;">
                                                        <span class="text-white font-weight-bold">{{ substr($item->referred->name ?? 'N', 0, 1) }}</span>
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{{ $item->referred->name ?? 'غير متوفر' }}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $item->referred->phone ?? 'غير متوفر' }}</td>
                                            <td>
                                                <span class="badge badge-info">{{ $item->orders_count }}</span>
                                            </td>
                                            <td>
                                                <span class="font-weight-bold text-success">
                                                    {{ number_format($item->total_earnings, 2) }} دينار
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-trophy fa-3x mb-3"></i>
                            <p>لا توجد بيانات</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات عامة -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-users"></i> إجمالي الإحالات
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h2 class="text-primary">{{ $totalReferrals }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-dollar-sign"></i> إجمالي الأرباح (كل الوقت)
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h2 class="text-success">{{ number_format($totalEarningsAllTime, 2) }} دينار</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-wallet"></i> الأرباح المدفوعة
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h2 class="text-success">{{ number_format($totalPaidEarnings, 2) }} دينار</h2>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // رسم بياني لتوزيع الأرباح حسب نوع الطلب
    const typeCtx = document.getElementById('earningsTypeChart');
    if (typeCtx) {
        const typeData = {
            food: {{ $earningsByType['food'] }},
            gas: {{ $earningsByType['gas'] }},
            taxi: {{ $earningsByType['taxi'] }}
        };

        new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: ['طعام', 'غاز', 'تاكسي'],
                datasets: [{
                    data: [typeData.food, typeData.gas, typeData.taxi],
                    backgroundColor: ['#FFC107', '#DC3545', '#007BFF'],
                    borderColor: ['#FFB300', '#C82333', '#0056B3'],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        rtl: true,
                        labels: {
                            color: '#F5F5F5',
                            padding: 15,
                            font: {
                                size: 14,
                                family: 'Cairo'
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed.toFixed(2) + ' دينار';
                            }
                        }
                    }
                }
            }
        });
    }

    // رسم بياني للأرباح اليومية
    const dailyCtx = document.getElementById('dailyEarningsChart');
    if (dailyCtx) {
        const dailyData = @json($dailyEarnings);
        
        new Chart(dailyCtx, {
            type: 'line',
            data: {
                labels: dailyData.map(item => item.date),
                datasets: [{
                    label: 'الأرباح اليومية (دينار)',
                    data: dailyData.map(item => parseFloat(item.total_earnings)),
                    borderColor: '#FFD700',
                    backgroundColor: 'rgba(255, 215, 0, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#FFD700',
                    pointBorderColor: '#FFF',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        rtl: true,
                        labels: {
                            color: '#F5F5F5',
                            font: {
                                size: 14,
                                family: 'Cairo'
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return 'الأرباح: ' + context.parsed.y.toFixed(2) + ' دينار';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: '#F5F5F5',
                            callback: function(value) {
                                return value.toFixed(2) + ' دينار';
                            }
                        },
                        grid: {
                            color: 'rgba(255, 215, 0, 0.1)'
                        }
                    },
                    x: {
                        ticks: {
                            color: '#F5F5F5'
                        },
                        grid: {
                            color: 'rgba(255, 215, 0, 0.1)'
                        }
                    }
                }
            }
        });
    }
</script>
@endpush