@extends('layouts.app')

@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('nationalization.index') }}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-right"></i> العودة للوحة
        </a>
    </div>
</div>

<div class="stats-grid cols-3">
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-users"></i></div>
        <div class="stat-value">{{ $totalEmployees }}</div>
        <div class="stat-label">إجمالي الموظفين</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-flag"></i></div>
        <div class="stat-value">{{ $nationalsCount }}</div>
        <div class="stat-label">الموظفون السعوديون</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-chart-pie"></i></div>
        <div class="stat-value">{{ $totalEmployees > 0 ? round(($nationalsCount / $totalEmployees) * 100, 2) : 0 }}%</div>
        <div class="stat-label">نسبة التوطين الإجمالية</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>التوزيع حسب القسم</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>
                    @forelse ($departmentBreakdown as $row)
                        <tr>
                            <td>{{ $row->department ?: 'غير محدد' }}</td>
                            <td>{{ $row->total }}</td>
                            <td>{{ $row->nationals }}</td>
                            <td>{{ $row->non_nationals }}</td>
                            <td>{{ $row->percentage }}%</td>
                            <td>
                                <span class="status-badge status-{{ $row->category === 'green' ? 'active' : ($row->category === 'yellow' ? 'pending' : ($row->category === 'red' ? 'danger' : 'draft')) }}">
                                    {{ $row->category_label }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">
                                <div class="empty-state">
                                    <i class="fa-solid fa-inbox"></i>
                                    <p>لا توجد بيانات أقسام متاحة</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>التوزيع حسب الجنسية</h3>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الجنسية</th>
                        <th>عدد الموظفين</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($nationalityBreakdown as $row)
                        <tr>
                            <td>{{ $row->nationality ?: 'غير محدد' }}</td>
                            <td>{{ $row->total }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2">
                                <div class="empty-state">
                                    <i class="fa-solid fa-inbox"></i>
                                    <p>لا توجد بيانات جنسيات متاحة</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection