@extends('layouts.admin')

@section('content')
    <div class="container mx-auto p-6">
        <h2 class="text-2xl font-bold text-gray-700 mb-6">الإحصائيات</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-3">أنواع العقارات</h3>
                <canvas id="propertyTypeChart"></canvas>
            </div>
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-3">المبيعات حسب المنطقة</h3>
                <canvas id="salesByRegionChart"></canvas>
            </div>
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-3">المنصات المستخدمة</h3>
                <canvas id="auctionsByPlatformChart"></canvas>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const propertyTypeData = @json($chartDataV2['property_types']);
        const salesByRegionData = @json($chartDataV2['sales_by_region']);
        const auctionsByPlatformData = @json($chartDataV2['auctions_by_platform']);

        new Chart(document.getElementById('propertyTypeChart'), {
            type: 'bar',
            data: {
                labels: propertyTypeData.labels,
                datasets: [{
                    label: 'عدد العقارات',
                    data: propertyTypeData.values,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            }
        });

        new Chart(document.getElementById('salesByRegionChart'), {
            type: 'pie',
            data: {
                labels: salesByRegionData.labels,
                datasets: [{
                    data: salesByRegionData.values,
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
                }]
            }
        });

        new Chart(document.getElementById('auctionsByPlatformChart'), {
            type: 'doughnut',
            data: {
                labels: auctionsByPlatformData.labels,
                datasets: [{
                    data: auctionsByPlatformData.values,
                    backgroundColor: ['#4BC0C0', '#FF9F40', '#9966FF'],
                }]
            }
        });
    </script>
@endsection