@extends('layouts.app')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="font-weight-bold text-dark"><i class="fas fa-chart-line mr-2"></i> لوحة تحكم المحادثات</h1>
            </div>
        </div>
    </div>
</section>

<div class="content px-3">
    @include('flash::message')

    <!-- KPI Cards -->
    <div class="row">
        <!-- Pending Reports -->
        <div class="col-lg-4 col-6">
            <div class="small-box bg-danger shadow-sm" style="border-radius: 12px;">
                <div class="inner">
                    <h3>{{ $pendingReportsCount }}</h3>
                    <p>البلاغات المعلقة</p>
                </div>
                <div class="icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <a href="#" class="small-box-footer" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">تحتاج تدخل فوري <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- Blocked Messages -->
        <div class="col-lg-4 col-6">
            <div class="small-box bg-success shadow-sm" style="border-radius: 12px;">
                <div class="inner">
                    <h3>{{ $blockedMessagesCount }}</h3>
                    <p>رسائل محجوبة تلقائياً</p>
                </div>
                <div class="icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div class="small-box-footer" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">فعالية قاموس الممنوعات</div>
            </div>
        </div>
        <!-- Total Messages Today -->
        <div class="col-lg-4 col-12">
            <div class="small-box bg-info shadow-sm" style="border-radius: 12px;">
                <div class="inner">
                    <h3>{{ $totalMessagesToday }}</h3>
                    <p>رسائل أُرسلت اليوم</p>
                </div>
                <div class="icon">
                    <i class="fas fa-comments"></i>
                </div>
                <div class="small-box-footer" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">تفاعل الزبائن مع الملاك</div>
            </div>
        </div>
    </div>

    <!-- Charts and Top Offenders -->
    <div class="row">
        <!-- Line Chart -->
        <div class="col-md-8">
            <div class="card shadow-sm" style="border-radius: 12px;">
                <div class="card-header bg-white border-0">
                    <h3 class="card-title font-weight-bold"><i class="fas fa-chart-area text-primary mr-1"></i> كثافة المحادثات (آخر 7 أيام)</h3>
                </div>
                <div class="card-body">
                    <canvas id="messagesChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
            </div>
        </div>
        <!-- Top Offenders -->
        <div class="col-md-4">
            <div class="card shadow-sm" style="border-radius: 12px; height: 100%;">
                <div class="card-header bg-white border-0">
                    <h3 class="card-title font-weight-bold"><i class="fas fa-user-slash text-danger mr-1"></i> الأكثر إزعاجاً</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($topOffenders as $user)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ $user->name ?? $user->full_name }}</strong>
                                <br><small class="text-muted">{{ $user->contact_no }}</small>
                            </div>
                            <span class="badge badge-danger badge-pill">{{ $user->chat_warnings_count }} إنذارات</span>
                        </li>
                        @empty
                        <li class="list-group-item text-center text-muted py-4">
                            لا يوجد مستخدمين مخالفين حالياً.
                        </li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTables -->
    <div class="clearfix"></div>
    <div class="card shadow-sm mt-3" style="border-radius: 12px;">
        <div class="card-header bg-white border-0">
            <h3 class="card-title font-weight-bold"><i class="fas fa-list text-secondary mr-1"></i> جميع البلاغات</h3>
        </div>
        <div class="card-body p-0">
            @include('admin.chat.chat_reports.table')
        </div>
    </div>
</div>
@endsection

@push('third_party_scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(function () {
        var ctx = document.getElementById('messagesChart').getContext('2d');
        var messagesChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: {!! json_encode($chartLabels) !!},
                datasets: [{
                    label: 'عدد الرسائل',
                    data: {!! json_encode($chartData) !!},
                    backgroundColor: 'rgba(60,141,188,0.1)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    pointRadius: 4,
                    pointColor: '#3b8bba',
                    pointStrokeColor: 'rgba(60,141,188,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#f3f3f3',
                            drawBorder: false
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        }
                    }
                }
            }
        });
    });
</script>
@endpush