@extends('company.layouts.app')

@section('title', 'لوحة الشركة')

@section('content')
<div class="card">
    <h3>لوحة الشركة</h3>
    <p class="muted">هذه البوابة للعرض فقط. لا يمكن الإضافة أو التعديل أو الحذف.</p>
    <a href="{{ route('company.reports.index') }}">عرض التقرير المبسط</a>
</div>

<div class="grid">
    <div class="metric"><span>الأفراد</span><b>{{ $metrics['customers'] }}</b></div>
    <div class="metric"><span>المركبات</span><b>{{ $metrics['vehicles'] }}</b></div>
    <div class="metric"><span>تصاريح الأفراد</span><b>{{ $metrics['person_permits'] }}</b></div>
    <div class="metric"><span>تصاريح المركبات</span><b>{{ $metrics['vehicle_permits'] }}</b></div>
    <div class="metric"><span>التجديدات</span><b>{{ $metrics['renewals'] }}</b></div>
    <div class="metric"><span>إجمالي المديونيات المفتوحة</span><b>{{ number_format($metrics['open_dues'], 2) }}</b></div>
    <div class="metric"><span>إجمالي المدفوعات (وارد)</span><b>{{ number_format($metrics['payments'], 2) }}</b></div>
</div>

<div class="grid" style="margin-top:14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
    <div class="card">
        <h3>تحصيلات آخر 6 شهور</h3>
        <div class="chart-wrap">
            <canvas id="collectionsChart"></canvas>
        </div>
    </div>
    <div class="card">
        <h3>توزيع حالات المديونيات</h3>
        <div class="chart-wrap">
            <canvas id="duesStatusChart"></canvas>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const collectionsCtx = document.getElementById('collectionsChart');
        if (collectionsCtx) {
            new Chart(collectionsCtx, {
                type: 'line',
                data: {
                    labels: @json($charts['trend_labels']),
                    datasets: [{
                        label: 'تحصيل وارد',
                        data: @json($charts['trend_series']),
                        borderColor: '#1f4ea8',
                        backgroundColor: 'rgba(31, 78, 168, 0.15)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } }
                }
            });
        }

        const duesCtx = document.getElementById('duesStatusChart');
        if (duesCtx) {
            new Chart(duesCtx, {
                type: 'doughnut',
                data: {
                    labels: @json($charts['due_status_labels']),
                    datasets: [{
                        data: @json($charts['due_status_counts']),
                        backgroundColor: ['#3b82f6', '#f59e0b', '#10b981', '#ef4444', '#6366f1']
                    }]
                },
                options: { maintainAspectRatio: false }
            });
        }
    </script>
@endpush