{{-- resources/views/analytics/index.blade.php --}}

@extends('layouts.apps')

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

@section('content')
<div class="container-fluid p-4">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">التحليلات والإحصائيات</h1>
            <p class="text-muted">تحليل أداء الردود التلقائية والتفاعل</p>
        </div>
        
        <!-- Date Range Filter -->
        <form method="GET" class="d-flex gap-2">
            <select name="range" class="form-select" onchange="this.form.submit()">
                <option value="7" {{ $dateRange == '7' ? 'selected' : '' }}>آخر 7 أيام</option>
                <option value="30" {{ $dateRange == '30' ? 'selected' : '' }}>آخر 30 يوم</option>
                <option value="90" {{ $dateRange == '90' ? 'selected' : '' }}>آخر 3 أشهر</option>
            </select>
        </form>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-robot fa-2x text-primary mb-2"></i>
                    <h4 class="mb-0">{{ number_format($stats['total_auto_replies']) }}</h4>
                    <small class="text-muted">إجمالي الردود التلقائية</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-play-circle fa-2x text-success mb-2"></i>
                    <h4 class="mb-0">{{ number_format($stats['active_auto_replies']) }}</h4>
                    <small class="text-muted">الردود النشطة</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-comments fa-2x text-info mb-2"></i>
                    <h4 class="mb-0">{{ number_format($stats['total_comments']) }}</h4>
                    <small class="text-muted">إجمالي التعليقات</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <i class="fas fa-chart-line fa-2x text-warning mb-2"></i>
                    <h4 class="mb-0">{{ $stats['success_rate'] }}%</h4>
                    <small class="text-muted">معدل النجاح</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">التعليقات والردود اليومية</h5>
                </div>
                <div class="card-body">
                    <canvas id="dailyChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">أفضل الردود أداءً</h5>
                </div>
                <div class="card-body">
                    @forelse($topPerformers as $performer)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <strong>{{ Str::limit($performer->name, 20) }}</strong>
                                <br><small class="text-muted">{{ $performer->successful_replies }} رد ناجح</small>
                            </div>
                            <span class="badge bg-{{ $performer->success_rate >= 80 ? 'success' : ($performer->success_rate >= 60 ? 'warning' : 'danger') }}">
                                {{ $performer->success_rate }}%
                            </span>
                        </div>
                        @if(!$loop->last)<hr>@endif
                    @empty
                        <p class="text-muted text-center">لا توجد بيانات كافية</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Page Activity -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">نشاط الصفحات</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>الصفحة</th>
                            <th>الردود التلقائية</th>
                            <th>إجمالي التعليقات</th>
                            <th>الردود الناجحة</th>
                            <th>معدل النجاح</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pageActivity as $page)
                            <tr>
                                <td>
                                    <strong>{{ $page->name }}</strong>
                                </td>
                                <td>{{ number_format($page->total_replies) }}</td>
                                <td>{{ number_format($page->total_comments) }}</td>
                                <td>{{ number_format($page->successful_replies) }}</td>
                                <td>
                                    <span class="badge bg-{{ $page->success_rate >= 80 ? 'success' : ($page->success_rate >= 60 ? 'warning' : 'danger') }}">
                                        {{ $page->success_rate }}%
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted">لا توجد صفحات نشطة</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Daily Chart
const dailyData = @json($dailyData);
const ctx = document.getElementById('dailyChart').getContext('2d');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: dailyData.map(item => item.date),
        datasets: [{
            label: 'إجمالي التعليقات',
            data: dailyData.map(item => item.total_comments),
            borderColor: '#007bff',
            backgroundColor: 'rgba(0, 123, 255, 0.1)',
            tension: 0.4
        }, {
            label: 'الردود الناجحة',
            data: dailyData.map(item => item.successful_replies),
            borderColor: '#28a745',
            backgroundColor: 'rgba(40, 167, 69, 0.1)',
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
@endpush