@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stat-card bg-primary">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value">{{ $stats['total_users'] }}</div>
                        <div class="stat-label">کل کاربران</div>
                    </div>
                    <i class="bi bi-people"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card bg-success">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value">{{ $stats['total_businesses'] }}</div>
                        <div class="stat-label">کل کسب و کارها</div>
                    </div>
                    <i class="bi bi-shop"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card bg-info">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value">{{ $stats['active_businesses'] }}</div>
                        <div class="stat-label">کسب و کارهای فعال</div>
                    </div>
                    <i class="bi bi-check-circle"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card bg-warning">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-value">{{ $stats['pending_businesses'] }}</div>
                        <div class="stat-label">در انتظار تایید</div>
                    </div>
                    <i class="bi bi-clock"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-pie-chart"></i>
                    آمار کاربران بر اساس نقش
                </div>
                <div class="card-body">
                    <canvas id="rolesChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-bar-chart"></i>
                    آمار وضعیت کسب و کارها
                </div>
                <div class="card-body">
                    <canvas id="businessStatusChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Users and Businesses -->
    <div class="row">
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-person-lines-fill"></i>
                    آخرین کاربران ثبت شده
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($recent_users as $user)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>
                                    <i class="bi bi-person-circle text-primary"></i>
                                    {{ $user->name }}
                                    <small class="text-muted d-block">{{ $user->email }}</small>
                                </span>
                                <span class="badge bg-primary">{{ $user->roles->first()->name ?? '-' }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-building"></i>
                    آخرین کسب و کارها
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($recent_businesses as $business)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>
                                    <i class="bi bi-shop text-success"></i>
                                    {{ $business->name }}
                                    <small class="text-muted d-block">{{ $business->user->name ?? '-' }}</small>
                                </span>
                                <span class="badge bg-success">{{ $business->status }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // تنظیمات کلی چارت‌ها
    Chart.defaults.font.family = 'Vazirmatn';
    Chart.defaults.color = '#475569';

    // Roles Chart
    const rolesData = {
        labels: {!! json_encode($user_roles->pluck('name')) !!},
        datasets: [{
            label: 'تعداد کاربران',
            data: {!! json_encode($user_roles->pluck('total')) !!},
            backgroundColor: [
                '#2563eb', '#16a34a', '#ca8a04', '#dc2626', '#7c3aed'
            ],
        }]
    };
    const rolesConfig = {
        type: 'doughnut',
        data: rolesData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        font: {
                            family: 'Vazirmatn'
                        }
                    }
                }
            }
        }
    };
    new Chart(document.getElementById('rolesChart'), rolesConfig);

    // Business Status Chart
    fetch('{{ route('admin.dashboard.statistics') }}')
        .then(response => response.json())
        .then(data => {
            const statusLabels = data.business_status.map(item => item.status);
            const statusTotals = data.business_status.map(item => item.total);

            new Chart(document.getElementById('businessStatusChart'), {
                type: 'pie',
                data: {
                    labels: statusLabels,
                    datasets: [{
                        label: 'تعداد',
                        data: statusTotals,
                        backgroundColor: [
                            '#16a34a', '#ca8a04', '#6c757d'
                        ],
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                font: {
                                    family: 'Vazirmatn'
                                }
                            }
                        }
                    }
                }
            });
        });
</script>
@endpush
@endsection