@extends('layouts.app')
@section('title', 'تقرير التدريب الإلزامي')
@section('content')
@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.nav-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.nav-tab{padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;color:#64748b;text-decoration:none;background:#f1f5f9;border:none;cursor:pointer;transition:all .2s}
.nav-tab:hover{background:#e2e8f0;color:#1B2A4A}.nav-tab.active{background:#1B2A4A;color:#fff}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.table-wrapper{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:10px 12px;text-align:right;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.data-table th{background:#f8fafc;font-weight:600;color:#64748b;font-size:.85rem}
.data-table tr:hover{background:#f8fafc}
.progress-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-top:4px}
.progress-fill{height:100%;border-radius:4px;transition:width .5s}
.progress-fill.green{background:#10b981}.progress-fill.yellow{background:#f59e0b}.progress-fill.red{background:#ef4444}
.empty-state{text-align:center;padding:60px 20px;color:#94a3b8}
.empty-state i{font-size:3rem;margin-bottom:12px;display:block}
</style>
@endpush

<div class="page-header"><h1><i class="fas fa-clipboard-check"></i> تقرير التدريب الإلزامي</h1></div>

<div class="nav-tabs">
    <a href="/training-management/my-training" class="nav-tab"><i class="fas fa-user-graduate"></i> تدريباتي</a>
    <a href="/training-management/courses" class="nav-tab"><i class="fas fa-chalkboard-teacher"></i> الدورات</a>
    <a href="/training-management/paths" class="nav-tab"><i class="fas fa-route"></i> المسارات</a>
    <a href="/training-management/mandatory-report" class="nav-tab active"><i class="fas fa-clipboard-check"></i> تقرير إلزامي</a>
</div>

<div class="card">
    <div class="table-wrapper">
        <table class="data-table">
            <thead><tr><th>#</th><th>الدورة</th><th>إجمالي المسجلين</th><th>مكتمل</th><th>متبقي</th><th>نسبة الإكمال</th></tr></thead>
            <tbody>
            @forelse($report as $i => $r)
                @php
                    $pct = $r->total > 0 ? round(($r->completed / $r->total) * 100) : 0;
                    $color = $pct >= 80 ? 'green' : ($pct >= 50 ? 'yellow' : 'red');
                @endphp
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ $r->course->title ?? '-' }}</td>
                    <td>{{ $r->total }}</td>
                    <td>{{ $r->completed }}</td>
                    <td>{{ $r->pending }}</td>
                    <td style="min-width:120px">
                        <div style="font-size:.85rem;font-weight:600;color:#1B2A4A">{{ $pct }}%</div>
                        <div class="progress-bar"><div class="progress-fill {{ $color }}" style="width:{{ $pct }}%"></div></div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6"><div class="empty-state"><i class="fas fa-clipboard-check"></i><p>لا توجد دورات إلزامية</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection