@extends('admin.layouts.app')

@section('title', 'إحصائيات مكاتب الغاز')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">إحصائيات مكاتب الغاز</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.gas-offices.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> العودة
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- إحصائيات عامة -->
                    <div class="row">
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ $stats['total_offices'] }}</h3>
                                    <p>إجمالي مكاتب الغاز</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-building"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ $stats['active_offices'] }}</h3>
                                    <p>المكاتب النشطة</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ $stats['open_offices'] }}</h3>
                                    <p>المكاتب المفتوحة</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-unlock"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>{{ $stats['total_offices'] - $stats['active_offices'] }}</h3>
                                    <p>المكاتب غير النشطة</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-times-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- إحصائيات القناني -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>إحصائيات قناني الغاز</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-primary">
                                                    <i class="fas fa-box"></i>
                                                </span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">إجمالي القناني</span>
                                                    <span class="info-box-number">{{ $stats['total_cylinders'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- إحصائيات الطلبات -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>إحصائيات الطلبات</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-primary">
                                                    <i class="fas fa-shopping-cart"></i>
                                                </span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">إجمالي الطلبات</span>
                                                    <span class="info-box-number">{{ $stats['total_orders'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-warning">
                                                    <i class="fas fa-clock"></i>
                                                </span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">الطلبات المعلقة</span>
                                                    <span class="info-box-number">{{ $stats['pending_orders'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-success">
                                                    <i class="fas fa-check"></i>
                                                </span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">الطلبات المكتملة</span>
                                                    <span class="info-box-number">{{ $stats['completed_orders'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-3">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-success">
                                                    <i class="fas fa-dollar-sign"></i>
                                                </span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">إجمالي الإيرادات</span>
                                                    <span class="info-box-number">{{ number_format($stats['total_revenue'], 2) }} د.ع</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- رسوم بيانية -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>توزيع الطلبات حسب الحالة</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="ordersChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>توزيع المكاتب حسب الحالة</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="officesChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // رسم بياني لتوزيع الطلبات
    const ordersCtx = document.getElementById('ordersChart').getContext('2d');
    new Chart(ordersCtx, {
        type: 'doughnut',
        data: {
            labels: ['مكتملة', 'معلقة', 'أخرى'],
            datasets: [{
                data: [{{ $stats['completed_orders'] }}, {{ $stats['pending_orders'] }}, {{ $stats['total_orders'] - $stats['completed_orders'] - $stats['pending_orders'] }}],
                backgroundColor: [
                    '#28a745',
                    '#ffc107',
                    '#6c757d'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

    // رسم بياني لتوزيع المكاتب
    const officesCtx = document.getElementById('officesChart').getContext('2d');
    new Chart(officesCtx, {
        type: 'pie',
        data: {
            labels: ['نشطة', 'غير نشطة'],
            datasets: [{
                data: [{{ $stats['active_offices'] }}, {{ $stats['total_offices'] - $stats['active_offices'] }}],
                backgroundColor: [
                    '#28a745',
                    '#dc3545'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
});
</script>
@endsection