@extends('layouts.app')
@section('title', 'تقارير الامتثال الحكومية')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقارير الامتثال الحكومية</h1>
        <p class="page-subtitle">مراقبة الامتثال لأنظمة العمل والجهات الحكومية</p>
    </div>
</div>

<!-- Alert Stats -->
<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-users"></i>
        </div>
        <div class="stat-value">{{ $stats['activeEmployees'] }}</div>
        <div class="stat-label">موظفون نشطون</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: {{ $stats['natRatio'] >= 30 ? 'var(--success-light)' : 'var(--danger-light)' }}; color: {{ $stats['natRatio'] >= 30 ? 'var(--success)' : 'var(--danger)' }};">
            <i class="fas fa-flag"></i>
        </div>
        <div class="stat-value">{{ $stats['natRatio'] }}%</div>
        <div class="stat-label">نسبة التوطين ({{ $stats['saudiCount'] }} سعودي)</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: {{ $stats['expiringDocs'] > 0 ? 'var(--warning-light)' : 'var(--success-light)' }}; color: {{ $stats['expiringDocs'] > 0 ? 'var(--warning)' : 'var(--success)' }};">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="stat-value">{{ $stats['expiringDocs'] }}</div>
        <div class="stat-label">وثائق تنتهي خلال 30 يوم</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: {{ $stats['missingGosi'] > 0 ? 'var(--danger-light)' : 'var(--success-light)' }}; color: {{ $stats['missingGosi'] > 0 ? 'var(--danger)' : 'var(--success)' }};">
            <i class="fas fa-shield-alt"></i>
        </div>
        <div class="stat-value">{{ $stats['missingGosi'] }}</div>
        <div class="stat-label">بدون تأمينات اجتماعية</div>
    </div>
</div>

<!-- Reports Grid -->
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:1.5rem; margin-top:1.5rem;">

    <!-- 1. Nationalization -->
    <div class="card" style="display:flex; flex-direction:column;">
        <div class="card-body" style="flex:1;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;">
                <div style="width:48px; height:48px; border-radius:var(--radius); background:#e8f5e9; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">
                    <i class="fas fa-flag"></i>
                </div>
                <div>
                    <h3 style="margin:0; font-size:1.05rem;">تقرير التوطين (نطاقات)</h3>
                    <p style="margin:0; color:var(--text-muted); font-size:0.85rem;">نسب السعودة حسب القسم والجنس</p>
                </div>
            </div>
            <p style="color:var(--text-secondary); font-size:0.9rem;">تحليل نسبة التوطين ومقارنتها بمتطلبات نطاقات لكل قسم مع توزيع الجنسيات.</p>
        </div>
        <div style="padding:0 1.25rem 1.25rem;">
            <a href="{{ route('compliance.nationalization') }}" class="btn btn-primary" style="width:100%;"><i class="fas fa-chart-bar"></i> عرض التقرير</a>
        </div>
    </div>

    <!-- 2. Social Insurance -->
    <div class="card" style="display:flex; flex-direction:column;">
        <div class="card-body" style="flex:1;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;">
                <div style="width:48px; height:48px; border-radius:var(--radius); background:#e3f2fd; color:#1565c0; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div>
                    <h3 style="margin:0; font-size:1.05rem;">تقرير التأمينات الاجتماعية</h3>
                    <p style="margin:0; color:var(--text-muted); font-size:0.85rem;">GOSI — التسجيل والاشتراكات</p>
                </div>
            </div>
            <p style="color:var(--text-secondary); font-size:0.9rem;">حالة التسجيل في التأمينات وحساب الاشتراكات المتوقعة (حصة صاحب العمل والموظف).</p>
        </div>
        <div style="padding:0 1.25rem 1.25rem;">
            <a href="{{ route('compliance.social-insurance') }}" class="btn btn-primary" style="width:100%;"><i class="fas fa-chart-bar"></i> عرض التقرير</a>
        </div>
    </div>

    <!-- 3. Documents -->
    <div class="card" style="display:flex; flex-direction:column;">
        <div class="card-body" style="flex:1;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;">
                <div style="width:48px; height:48px; border-radius:var(--radius); background:#fff3e0; color:#e65100; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">
                    <i class="fas fa-id-card"></i>
                </div>
                <div>
                    <h3 style="margin:0; font-size:1.05rem;">تقرير الوثائق والمستندات</h3>
                    <p style="margin:0; color:var(--text-muted); font-size:0.85rem;">المنتهية والقريبة الانتهاء</p>
                </div>
            </div>
            <p style="color:var(--text-secondary); font-size:0.9rem;">متابعة صلاحية الهوية/الإقامة، الجواز، التأشيرة مع تنبيهات الانتهاء.</p>
        </div>
        <div style="padding:0 1.25rem 1.25rem;">
            <a href="{{ route('compliance.documents') }}" class="btn btn-primary" style="width:100%;"><i class="fas fa-chart-bar"></i> عرض التقرير</a>
        </div>
    </div>

    <!-- 4. Labor Law -->
    <div class="card" style="display:flex; flex-direction:column;">
        <div class="card-body" style="flex:1;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;">
                <div style="width:48px; height:48px; border-radius:var(--radius); background:#fce4ec; color:#c62828; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">
                    <i class="fas fa-gavel"></i>
                </div>
                <div>
                    <h3 style="margin:0; font-size:1.05rem;">تقرير قانون العمل</h3>
                    <p style="margin:0; color:var(--text-muted); font-size:0.85rem;">العقود وفترة التجربة</p>
                </div>
            </div>
            <p style="color:var(--text-secondary); font-size:0.9rem;">فحص العقود النشطة/المنتهية، فترات التجربة، والبيانات الناقصة.</p>
        </div>
        <div style="padding:0 1.25rem 1.25rem;">
            <a href="{{ route('compliance.labor-law') }}" class="btn btn-primary" style="width:100%;"><i class="fas fa-chart-bar"></i> عرض التقرير</a>
        </div>
    </div>

    <!-- 5. Employee Stats -->
    <div class="card" style="display:flex; flex-direction:column;">
        <div class="card-body" style="flex:1;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;">
                <div style="width:48px; height:48px; border-radius:var(--radius); background:#f3e5f5; color:#6a1b9a; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <div>
                    <h3 style="margin:0; font-size:1.05rem;">إحصائيات القوى العاملة</h3>
                    <p style="margin:0; color:var(--text-muted); font-size:0.85rem;">لوزارة الموارد البشرية</p>
                </div>
            </div>
            <p style="color:var(--text-secondary); font-size:0.9rem;">توزيع الموظفين حسب الجنس، العمر، سنوات الخدمة، نطاق الرواتب، ونوع التوظيف.</p>
        </div>
        <div style="padding:0 1.25rem 1.25rem;">
            <a href="{{ route('compliance.employee-stats') }}" class="btn btn-primary" style="width:100%;"><i class="fas fa-chart-bar"></i> عرض التقرير</a>
        </div>
    </div>

    <!-- 6. Payroll Summary -->
    <div class="card" style="display:flex; flex-direction:column;">
        <div class="card-body" style="flex:1;">
            <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;">
                <div style="width:48px; height:48px; border-radius:var(--radius); background:#e0f2f1; color:#00695c; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">
                    <i class="fas fa-file-invoice-dollar"></i>
                </div>
                <div>
                    <h3 style="margin:0; font-size:1.05rem;">ملخص الرواتب السنوي</h3>
                    <p style="margin:0; color:var(--text-muted); font-size:0.85rem;">للتدقيق والضرائب</p>
                </div>
            </div>
            <p style="color:var(--text-secondary); font-size:0.9rem;">ملخص شهري وسنوي لإجمالي الرواتب والبدلات والخصومات وصافي المستحق.</p>
        </div>
        <div style="padding:0 1.25rem 1.25rem;">
            <a href="{{ route('compliance.payroll-summary') }}" class="btn btn-primary" style="width:100%;"><i class="fas fa-chart-bar"></i> عرض التقرير</a>
        </div>
    </div>
</div>
@endsection