@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-chart-bar text-primary"></i>
                    تقارير النقاط والدعوات
                </h1>
                <a href="{{ route('admin.points.dashboard') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-right"></i> العودة للوحة التحكم
                </a>
            </div>
        </div>
    </div>

    <!-- فلاتر التاريخ -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label for="start_date" class="form-label">من تاريخ</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
                        </div>
                        <div class="col-md-3">
                            <label for="end_date" class="form-label">إلى تاريخ</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> تحديث التقرير
                                </button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="button" class="btn btn-success" onclick="exportReport()">
                                    <i class="fas fa-download"></i> تصدير التقرير
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات الفترة -->
    <div class="row mb-4">
        <div class="col-md-2">
            <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($periodStats['total_earned']) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-arrow-up fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card border-left-danger 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-danger text-uppercase mb-1">
                                نقاط مستخدمة
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($periodStats['total_used']) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-arrow-down fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <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">
                                {{ $periodStats['total_referrals'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-share-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <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">
                                {{ $periodStats['completed_referrals'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <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">
                                {{ $periodStats['total_redemptions'] }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card border-left-secondary 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-secondary text-uppercase mb-1">
                                معدل النجاح
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                @if($periodStats['total_referrals'] > 0)
                                    {{ number_format(($periodStats['completed_referrals'] / $periodStats['total_referrals']) * 100, 1) }}%
                                @else
                                    0%
                                @endif
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percentage 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">المعاملات اليومية</h6>
                </div>
                <div class="card-body">
                    <canvas id="dailyTransactionsChart" width="400" height="200"></canvas>
                </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">
                    <canvas id="transactionTypesChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- جدول المعاملات اليومية -->
    <div class="row mb-4">
        <div class="col-12">
            <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($dailyTransactions->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="thead-light">
                                    <tr>
                                        <th>التاريخ</th>
                                        <th>نقاط مكتسبة</th>
                                        <th>نقاط مستخدمة</th>
                                        <th>صافي النقاط</th>
                                        <th>عدد المعاملات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($dailyTransactions as $transaction)
                                        <tr>
                                            <td>{{ $transaction->date }}</td>
                                            <td>
                                                <span class="badge badge-success">{{ number_format($transaction->earned) }}</span>
                                            </td>
                                            <td>
                                                <span class="badge badge-danger">{{ number_format($transaction->used) }}</span>
                                            </td>
                                            <td>
                                                <span class="badge badge-{{ ($transaction->earned - $transaction->used) >= 0 ? 'success' : 'danger' }}">
                                                    {{ number_format($transaction->earned - $transaction->used) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge badge-info">{{ $transaction->count ?? 0 }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">لا توجد بيانات للفترة المحددة</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- تقارير إضافية -->
    <div class="row">
        <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">
                    <div id="topUsersChart">
                        <!-- سيتم ملؤها بـ JavaScript -->
                    </div>
                </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">
                    <div id="popularRewardsChart">
                        <!-- سيتم ملؤها بـ JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@push('scripts')
<script>
// بيانات المعاملات اليومية
const dailyData = @json($dailyTransactions);

// رسم بياني للمعاملات اليومية
const ctx1 = document.getElementById('dailyTransactionsChart').getContext('2d');
new Chart(ctx1, {
    type: 'line',
    data: {
        labels: dailyData.map(item => item.date),
        datasets: [{
            label: 'نقاط مكتسبة',
            data: dailyData.map(item => item.earned),
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1
        }, {
            label: 'نقاط مستخدمة',
            data: dailyData.map(item => item.used),
            borderColor: 'rgb(255, 99, 132)',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// رسم بياني لتوزيع أنواع المعاملات
const ctx2 = document.getElementById('transactionTypesChart').getContext('2d');
new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['نقاط مكتسبة', 'نقاط مستخدمة'],
        datasets: [{
            data: [{{ $periodStats['total_earned'] }}, {{ $periodStats['total_used'] }}],
            backgroundColor: [
                'rgba(75, 192, 192, 0.8)',
                'rgba(255, 99, 132, 0.8)'
            ],
            borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

function exportReport() {
    // يمكن إضافة وظيفة تصدير التقرير هنا
    alert('وظيفة تصدير التقرير قيد التطوير');
}
</script>
@endpush