@extends('layouts.app')
@section('title', 'تقرير التوطين')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقرير التوطين (نطاقات)</h1>
        <p class="page-subtitle">نسب السعودة وتوزيع الجنسيات</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('compliance.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<!-- Overall 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">{{ $totalActive }}</div>
        <div class="stat-label">إجمالي الموظفين</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);"><i class="fas fa-flag"></i></div>
        <div class="stat-value">{{ $saudiCount }}</div>
        <div class="stat-label">سعوديون</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: #e3f2fd; color: #1565c0;"><i class="fas fa-globe"></i></div>
        <div class="stat-value">{{ $nonSaudiCount }}</div>
        <div class="stat-label">غير سعوديين</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: {{ $natRatio >= 30 ? 'var(--success-light)' : 'var(--danger-light)' }}; color: {{ $natRatio >= 30 ? 'var(--success)' : 'var(--danger)' }};"><i class="fas fa-percentage"></i></div>
        <div class="stat-value">{{ $natRatio }}%</div>
        <div class="stat-label">نسبة التوطين</div>
    </div>
</div>

<!-- By Gender -->
<div class="card" style="margin-bottom:1.5rem;">
    <div class="card-header"><h3 class="card-title">حسب الجنس</h3></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead><tr><th>الجنس</th><th>الإجمالي</th><th>سعودي</th><th>غير سعودي</th><th>نسبة التوطين</th></tr></thead>
                <tbody>
                    <tr>
                        <td>ذكور</td><td>{{ $maleTotal }}</td><td>{{ $maleSaudi }}</td><td>{{ $maleTotal - $maleSaudi }}</td>
                        <td>{{ $maleTotal > 0 ? round(($maleSaudi/$maleTotal)*100,1) : 0 }}%</td>
                    </tr>
                    <tr>
                        <td>إناث</td><td>{{ $femaleTotal }}</td><td>{{ $femaleSaudi }}</td><td>{{ $femaleTotal - $femaleSaudi }}</td>
                        <td>{{ $femaleTotal > 0 ? round(($femaleSaudi/$femaleTotal)*100,1) : 0 }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- By Department -->
<div class="card" style="margin-bottom:1.5rem;">
    <div class="card-header"><h3 class="card-title">حسب القسم</h3></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead><tr><th>القسم</th><th>الإجمالي</th><th>سعودي</th><th>غير سعودي</th><th>نسبة التوطين</th><th>المستوى</th></tr></thead>
                <tbody>
                @foreach($byDepartment as $dept)
                <tr>
                    <td>{{ $dept['department'] }}</td>
                    <td>{{ $dept['total'] }}</td>
                    <td>{{ $dept['saudi'] }}</td>
                    <td>{{ $dept['non_saudi'] }}</td>
                    <td>
                        <div style="display:flex; align-items:center; gap:0.5rem;">
                            <div style="flex:1; background:var(--border-light); border-radius:4px; height:8px; min-width:60px;">
                                <div style="width:{{ min($dept['ratio'], 100) }}%; height:100%; border-radius:4px; background:{{ $dept['ratio'] >= 30 ? 'var(--success)' : 'var(--danger)' }};"></div>
                            </div>
                            <span style="font-size:0.8rem;">{{ $dept['ratio'] }}%</span>
                        </div>
                    </td>
                    <td>
                        @if($dept['ratio'] >= 40)
                            <span class="status-badge status-active">أخضر</span>
                        @elseif($dept['ratio'] >= 26)
                            <span class="status-badge status-pending">أصفر</span>
                        @elseif($dept['ratio'] >= 10)
                            <span class="status-badge" style="background:#fff3e0; color:#e65100;">برتقالي</span>
                        @else
                            <span class="status-badge status-danger">أحمر</span>
                        @endif
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- By Nationality -->
<div class="card">
    <div class="card-header"><h3 class="card-title">توزيع الجنسيات</h3></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead><tr><th>الجنسية</th><th>العدد</th><th>النسبة</th></tr></thead>
                <tbody>
                @foreach($byNationality as $nat => $count)
                <tr>
                    <td>{{ $nat }}</td>
                    <td>{{ $count }}</td>
                    <td>
                        <div style="display:flex; align-items:center; gap:0.5rem;">
                            <div style="flex:1; background:var(--border-light); border-radius:4px; height:8px; min-width:60px;">
                                <div style="width:{{ $totalActive > 0 ? round(($count/$totalActive)*100,1) : 0 }}%; height:100%; border-radius:4px; background:var(--primary);"></div>
                            </div>
                            <span style="font-size:0.8rem;">{{ $totalActive > 0 ? round(($count/$totalActive)*100,1) : 0 }}%</span>
                        </div>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection