@extends('admin.layout.master')
@section('title', __('admin.dashboard'))
@section('scripts')
    <script src="{{ asset('admin') }}/assets/vendor/libs/chartjs/chartjs.js"></script>
    <script>
        const countries = {!! json_encode($countries) !!};
        const cities = {!! json_encode($cities) !!};

        const localeIsRtl = {{ app()->getLocale() == 'ar' ? 'true' : 'false' }};

        function renderBarChart(ctxId, labels, values, backgroundColor = '#696cff') {
            const ctx = document.getElementById(ctxId);
            if (!ctx) return;

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: backgroundColor,
                        borderColor: 'transparent',
                        maxBarThickness: 15,
                        borderRadius: {
                            topLeft: 10,
                            topRight: 10
                        }
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: { duration: 500 },
                    plugins: {
                        tooltip: {
                            rtl: localeIsRtl,
                            backgroundColor: '#fff',
                            titleColor: '#000',
                            borderWidth: 1,
                            borderColor: '#ddd',
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false, drawBorder: false },
                            ticks: { color: '#666' }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { display: false, drawBorder: false },
                            ticks: { color: '#666' }
                        }
                    }
                }
            });
        }

        renderBarChart('cvsPerCountryChart', countries.map(c => c.label), countries.map(c => c.value), '#696cff');
        renderBarChart('cvsPerCityChart', cities.map(c => c.label), cities.map(c => c.value), '#28c76f');
    </script>


@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row g-6">
            <!-- الإحصائيات -->
            <div class="col-xl-12 col-md-12">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">{{ __('admin.statistics') }}</h5>
                    </div>
                    <div class="card-body d-flex align-items-end">
                        <div class="w-100">
                            <div class="row gy-3">
                                <!-- عدد السير الذاتية -->
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-warning me-4 p-2">
                                            <i class="ti ti-file-text ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $cv_count }}</h5>
                                            <small>{{ __('admin.cvs_count') }}</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- التقييمات المكتملة -->
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-secondary me-4 p-2">
                                            <i class="ti ti-check ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $evaluated_count }}</h5>
                                            <small>{{ __('admin.completed_evaluations') }}</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- إجمالي الأسئلة -->
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-success me-4 p-2">
                                            <i class="ti ti-help ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $total_questions }}</h5>
                                            <small>{{ __('admin.total_questions') }}</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- الأسئلة لكل تقييم -->
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-info me-4 p-2">
                                            <i class="ti ti-list-check ti-lg"></i>
                                        </div>
                                        <div class="card-info">
                                            <h5 class="mb-0">{{ $evaluated_questions }}</h5>
                                            <small>{{ __('admin.questions_per_evaluation') }}</small>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ الإحصائيات -->

            <div class="col-xxl-6 col-md-6 col-sm-12">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="card-header p-0 mb-3">
                            <h5 class="card-title">{{ __('admin.cvs_per_country') }}</h5>
                        </div>
                        <div class="chart-container" style="position: relative; width: 100%; height: 350px;">
                            <canvas id="cvsPerCountryChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xxl-6 col-md-6 col-sm-12">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="card-header p-0 mb-3">
                            <h5 class="card-title">{{ __('admin.cvs_per_city') }}</h5>
                        </div>
                        <div class="chart-container" style="position: relative; width: 100%; height: 350px;">
                            <canvas id="cvsPerCityChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-md-6 col-lg-3">
                <div class="card h-100 shadow-sm">
                    <div class="card-header text-white">
                        <h6 class="mb-0">{{ __('admin.top_universities') }}</h6>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            @foreach($universities as $row)
                                <li class="d-flex mb-6">
                                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                        <div class="me-2">
                                            <h6 class="mb-0">{{  $row['label'] }}</h6>
                                        </div>
                                        <div class="user-progress d-flex align-items-center gap-1">
                                            <p class="mb-0">{{ $row['value'] }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <!-- قائمة الدرجات العلمية -->
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 shadow-sm">
                    <div class="card-header text-white">
                        <h6 class="mb-0">{{ __('admin.top_degrees') }}</h6>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            @foreach($degrees as $row)
                                <li class="d-flex mb-6">
                                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                        <div class="me-2">
                                            <h6 class="mb-0">{{  $row['label'] }}</h6>
                                        </div>
                                        <div class="user-progress d-flex align-items-center gap-1">
                                            <p class="mb-0">{{ $row['value'] }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <!-- قائمة قطاعات الوظائف -->
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 shadow-sm">
                    <div class="card-header text-dark">
                        <h6 class="mb-0">{{ __('admin.top_industries') }}</h6>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            @foreach($sectors as $row)
                                <li class="d-flex mb-6">
                                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                        <div class="me-2">
                                            <h6 class="mb-0">{{   $row['label'] }}</h6>
                                        </div>
                                        <div class="user-progress d-flex align-items-center gap-1">
                                            <p class="mb-0">{{ $row['value'] }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>


            <!-- المسميات الوظيفية -->
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 shadow-sm">
                    <div class="card-header text-white">
                        <h6 class="mb-0">{{ __('admin.top_jobs') }}</h6>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            @foreach($jobs as $row)
                                <li class="d-flex mb-6">
                                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                        <div class="me-2">
                                            <h6 class="mb-0">{{   $row['label'] }}</h6>
                                        </div>
                                        <div class="user-progress d-flex align-items-center gap-1">
                                            <p class="mb-0">{{ $row['value'] }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-xxl-6 col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title m-0 me-2">
                            <h5 class="mb-1">{{ __('admin.top_evaluations', ['count' => $top->count()]) }}</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="p-0 m-0">
                            @foreach($top as $row)
                                <li class="d-flex mb-6">
                                    <div class="me-4">
                                        <img src="{{ $row->image }}" alt="User" class="rounded" width="46">
                                    </div>
                                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                        <div class="me-2">
                                            <h6 class="mb-0">{{  $row->name }}</h6>
                                            <small class="text-muted">{{ $row->title }}</small>
                                        </div>
                                        <div class="user-progress d-flex align-items-center gap-1">
                                            <p class="mb-0">{{ $row->max_evaluation ? round($row->evaluation*100 /$row->max_evaluation) : 0 }}</p>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection