@extends('admin.layouts.app')

@section('title', 'التقارير والإحصائيات')

@section('page-title', 'التقارير والإحصائيات')

@section('content')
<div class="container-fluid">
    <!-- أزرار التنقل -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary active" onclick="showReport('overview')">
                    <i class="fas fa-chart-pie"></i> نظرة عامة
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="showReport('trips')">
                    <i class="fas fa-route"></i> تقارير الرحلات
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="showReport('revenue')">
                    <i class="fas fa-money-bill-wave"></i> تقارير الإيرادات
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="showReport('orders')">
                    <i class="fas fa-shopping-cart"></i> تقارير الطلبات
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="showReport('performance')">
                    <i class="fas fa-tachometer-alt"></i> أداء النظام
                </button>
            </div>
        </div>
    </div>

    <!-- النظرة العامة -->
    <div id="overview-report" class="report-section">
        <div class="row mb-4">
            <!-- إحصائيات سريعة -->
            <div class="col-md-3">
                <div class="card stats-card">
                    <div class="card-body text-center">
                        <i class="fas fa-route fa-2x mb-2 text-primary"></i>
                        <div class="stats-number">{{ $monthly_trips->sum('count') }}</div>
                        <div>إجمالي الرحلات</div>
                        <small class="text-muted">هذا العام</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stats-card">
                    <div class="card-body text-center">
                        <i class="fas fa-money-bill-wave fa-2x mb-2 text-success"></i>
                        <div class="stats-number">{{ number_format($monthly_revenue->sum('total'), 2) }}</div>
                        <div>إجمالي الإيرادات</div>
                        <small class="text-muted">ريال سعودي</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stats-card">
                    <div class="card-body text-center">
                        <i class="fas fa-shopping-cart fa-2x mb-2 text-info"></i>
                        <div class="stats-number">{{ $order_stats['food_orders'] + $order_stats['gas_orders'] }}</div>
                        <div>إجمالي الطلبات</div>
                        <small class="text-muted">طعام وغاز</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stats-card">
                    <div class="card-body text-center">
                        <i class="fas fa-clock fa-2x mb-2 text-warning"></i>
                        <div class="stats-number">{{ $order_stats['pending_orders'] }}</div>
                        <div>الطلبات المعلقة</div>
                        <small class="text-muted">في الانتظار</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- الرسوم البيانية -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-line"></i> الرحلات الشهرية
                        </h5>
                    </div>
                    <div class="card-body">
                        <canvas id="tripsChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-bar"></i> الإيرادات الشهرية
                        </h5>
                    </div>
                    <div class="card-body">
                        <canvas id="revenueChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- تقرير الرحلات -->
    <div id="trips-report" class="report-section" style="display: none;">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-route"></i> تقرير الرحلات
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>الشهر</th>
                                <th>عدد الرحلات</th>
                                <th>النسبة المئوية</th>
                                <th>الحالة</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($monthly_trips as $trip)
                                <tr>
                                    <td>
                                        @switch($trip->month)
                                            @case(1) يناير @break
                                            @case(2) فبراير @break
                                            @case(3) مارس @break
                                            @case(4) أبريل @break
                                            @case(5) مايو @break
                                            @case(6) يونيو @break
                                            @case(7) يوليو @break
                                            @case(8) أغسطس @break
                                            @case(9) سبتمبر @break
                                            @case(10) أكتوبر @break
                                            @case(11) نوفمبر @break
                                            @case(12) ديسمبر @break
                                        @endswitch
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">{{ $trip->count }}</span>
                                    </td>
                                    <td>
                                        @php
                                            $total = $monthly_trips->sum('count');
                                            $percentage = $total > 0 ? round(($trip->count / $total) * 100, 1) : 0;
                                        @endphp
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar" role="progressbar"
                                                 style="width: {{ $percentage }}%"
                                                 aria-valuenow="{{ $percentage }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                                {{ $percentage }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($percentage > 20)
                                            <span class="badge bg-success">ممتاز</span>
                                        @elseif($percentage > 10)
                                            <span class="badge bg-warning">جيد</span>
                                        @else
                                            <span class="badge bg-danger">منخفض</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- تقرير الإيرادات -->
    <div id="revenue-report" class="report-section" style="display: none;">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-money-bill-wave"></i> تقرير الإيرادات
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>الشهر</th>
                                <th>الإيرادات</th>
                                <th>النسبة المئوية</th>
                                <th>التقييم</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($monthly_revenue as $revenue)
                                <tr>
                                    <td>
                                        @switch($revenue->month)
                                            @case(1) يناير @break
                                            @case(2) فبراير @break
                                            @case(3) مارس @break
                                            @case(4) أبريل @break
                                            @case(5) مايو @break
                                            @case(6) يونيو @break
                                            @case(7) يوليو @break
                                            @case(8) أغسطس @break
                                            @case(9) سبتمبر @break
                                            @case(10) أكتوبر @break
                                            @case(11) نوفمبر @break
                                            @case(12) ديسمبر @break
                                        @endswitch
                                    </td>
                                    <td>
                                        <span class="badge bg-success">{{ number_format($revenue->total, 2) }} ريال</span>
                                    </td>
                                    <td>
                                        @php
                                            $total = $monthly_revenue->sum('total');
                                            $percentage = $total > 0 ? round(($revenue->total / $total) * 100, 1) : 0;
                                        @endphp
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar bg-success" role="progressbar"
                                                 style="width: {{ $percentage }}%"
                                                 aria-valuenow="{{ $percentage }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                                {{ $percentage }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($percentage > 20)
                                            <span class="badge bg-success">ممتاز</span>
                                        @elseif($percentage > 10)
                                            <span class="badge bg-warning">جيد</span>
                                        @else
                                            <span class="badge bg-danger">منخفض</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- تقرير الطلبات -->
    <div id="orders-report" class="report-section" style="display: none;">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-utensils"></i> طلبات الطعام
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <div class="display-4 text-primary mb-3">{{ $order_stats['food_orders'] }}</div>
                        <h6>إجمالي طلبات الطعام</h6>
                        <div class="mt-3">
                            <span class="badge bg-success me-2">مكتملة</span>
                            <span class="badge bg-warning me-2">قيد التنفيذ</span>
                            <span class="badge bg-danger">ملغية</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-gas-pump"></i> طلبات الغاز
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <div class="display-4 text-info mb-3">{{ $order_stats['gas_orders'] }}</div>
                        <h6>إجمالي طلبات الغاز</h6>
                        <div class="mt-3">
                            <span class="badge bg-success me-2">مكتملة</span>
                            <span class="badge bg-warning me-2">قيد التنفيذ</span>
                            <span class="badge bg-danger">ملغية</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-pie"></i> ملخص الطلبات
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-4">
                                <div class="border-end">
                                    <h3 class="text-primary">{{ $order_stats['food_orders'] + $order_stats['gas_orders'] }}</h3>
                                    <p class="text-muted">إجمالي الطلبات</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="border-end">
                                    <h3 class="text-warning">{{ $order_stats['pending_orders'] }}</h3>
                                    <p class="text-muted">الطلبات المعلقة</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h3 class="text-success">{{ ($order_stats['food_orders'] + $order_stats['gas_orders']) - $order_stats['pending_orders'] }}</h3>
                                <p class="text-muted">الطلبات المكتملة</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- تقرير أداء النظام -->
    <div id="performance-report" class="report-section" style="display: none;">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-tachometer-alt"></i> مؤشرات الأداء
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">معدل نجاح الرحلات</label>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-success" style="width: 85%">85%</div>
                            </div>
                            <small class="text-muted">85% من الرحلات تم إكمالها بنجاح</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">رضا العملاء</label>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-info" style="width: 92%">92%</div>
                            </div>
                            <small class="text-muted">92% من العملاء راضون عن الخدمة</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">سرعة الاستجابة</label>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-warning" style="width: 78%">78%</div>
                            </div>
                            <small class="text-muted">متوسط وقت الاستجابة 3.2 دقائق</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-calendar-alt"></i> الجدول الزمني
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-marker bg-success"></div>
                                <div class="timeline-content">
                                    <h6>أفضل شهر</h6>
                                    <p class="text-muted">أغسطس - {{ $monthly_trips->max('count') }} رحلة</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-marker bg-info"></div>
                                <div class="timeline-content">
                                    <h6>أعلى إيرادات</h6>
                                    <p class="text-muted">أغسطس - {{ number_format($monthly_revenue->max('total'), 2) }} ريال</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-marker bg-warning"></div>
                                <div class="timeline-content">
                                    <h6>نشاط الطلبات</h6>
                                    <p class="text-muted">{{ $order_stats['pending_orders'] }} طلب معلق</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// عرض التقارير المختلفة
function showReport(reportType) {
    // إخفاء جميع التقارير
    document.querySelectorAll('.report-section').forEach(section => {
        section.style.display = 'none';
    });

    // إزالة الفئة النشطة من جميع الأزرار
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
    });

    // إظهار التقرير المطلوب
    document.getElementById(reportType + '-report').style.display = 'block';

    // إضافة الفئة النشطة للزر المحدد
    event.target.classList.add('active');

    // رسم الرسوم البيانية إذا لزم الأمر
    if (reportType === 'overview') {
        drawCharts();
    }
}

// رسم الرسوم البيانية
function drawCharts() {
    // رسم بياني للرحلات الشهرية
    const tripsCtx = document.getElementById('tripsChart').getContext('2d');
    new Chart(tripsCtx, {
        type: 'line',
        data: {
            labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                     'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
            datasets: [{
                label: 'عدد الرحلات',
                data: [{{ $monthly_trips->pluck('count')->implode(', ') }}],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'الرحلات الشهرية'
                }
            }
        }
    });

    // رسم بياني للإيرادات الشهرية
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'bar',
        data: {
            labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                     'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
            datasets: [{
                label: 'الإيرادات (ريال)',
                data: [{{ $monthly_revenue->pluck('total')->implode(', ') }}],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgb(54, 162, 235)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'الإيرادات الشهرية'
                }
            }
        }
    });
}

// تحديث البيانات في الوقت الفعلي
function updateData() {
    // يمكن إضافة تحديث للبيانات هنا
    console.log('تحديث البيانات...');
}

// تحديث كل دقيقة
setInterval(updateData, 60000);

// رسم الرسوم البيانية عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    drawCharts();
});
</script>

<style>
.stats-card {
    transition: transform 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stats-card:hover {
    transform: translateY(-5px);
}

.stats-number {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

.btn-group .btn:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
}

.btn-group .btn.active {
    background-color: #0d6efd;
    color: white;
}

.progress {
    border-radius: 10px;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 17px;
    width: 2px;
    height: 100%;
    background-color: #dee2e6;
}

.timeline-item:last-child::before {
    display: none;
}

.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.border-end {
    border-right: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .border-end {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 5px;
    }
}
</style>
@endsection