@extends('layouts.app')
@section('title', $course->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}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px}
.card h3{margin:0 0 16px;font-size:1.1rem;color:#1B2A4A}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.detail-item label{display:block;font-size:.8rem;color:#64748b;margin-bottom:4px;font-weight:600}
.detail-item p{margin:0;font-size:.95rem;color:#1B2A4A}
.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}
.badge{padding:4px 10px;border-radius:20px;font-size:.8rem;font-weight:600}
.badge-success{background:#d1fae5;color:#065f46}.badge-warning{background:#fef3c7;color:#92400e}.badge-info{background:#dbeafe;color:#1e40af}.badge-secondary{background:#f1f5f9;color:#475569}.badge-danger{background:#fee2e2;color:#991b1b}
.btn-back{background:#f1f5f9;color:#1B2A4A;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.btn-back:hover{background:#e2e8f0}
.empty-state{text-align:center;padding:40px 20px;color:#94a3b8}
</style>
@endpush

<div class="page-header">
    <h1><i class="fas fa-chalkboard-teacher"></i> {{ $course->title ?? 'تفاصيل الدورة' }}</h1>
    <a href="/training-management/courses" class="btn-back"><i class="fas fa-arrow-right"></i> رجوع للدورات</a>
</div>

<div class="card">
    <h3><i class="fas fa-info-circle"></i> معلومات الدورة</h3>
    <div class="detail-grid">
        <div class="detail-item"><label>عنوان الدورة</label><p>{{ $course->title ?? '-' }}</p></div>
        <div class="detail-item"><label>المدرب</label><p>{{ $course->trainer ?? '-' }}</p></div>
        <div class="detail-item"><label>تاريخ البدء</label><p>{{ $course->start_date ?? '-' }}</p></div>
        <div class="detail-item"><label>تاريخ الانتهاء</label><p>{{ $course->end_date ?? '-' }}</p></div>
        <div class="detail-item"><label>الموقع</label><p>{{ $course->location ?? '-' }}</p></div>
        <div class="detail-item"><label>الحد الأقصى للمقاعد</label><p>{{ $course->max_seats ?? '-' }}</p></div>
        <div class="detail-item"><label>إلزامية</label><p>{{ isset($course->is_mandatory) && $course->is_mandatory ? 'نعم' : 'لا' }}</p></div>
    </div>
    @if(isset($course->description) && $course->description)
    <div style="margin-top:16px"><label style="display:block;font-size:.8rem;color:#64748b;margin-bottom:4px;font-weight:600">الوصف</label><p style="margin:0;color:#1B2A4A;line-height:1.6">{{ $course->description }}</p></div>
    @endif
</div>

<div class="card">
    <h3><i class="fas fa-users"></i> المسجلون ({{ $enrollments->count() }})</h3>
    <div class="table-wrapper">
        <table class="data-table">
            <thead><tr><th>#</th><th>الموظف</th><th>تاريخ التسجيل</th><th>الحالة</th></tr></thead>
            <tbody>
            @forelse($enrollments as $i => $e)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ $e->employee_name ?? 'موظف #' . ($e->employee_id ?? $e->id) }}</td>
                    <td>{{ $e->enrolled_at ?? $e->created_at ?? '-' }}</td>
                    <td>
                        @if(($e->status ?? '') == 'completed')<span class="badge badge-success"><i class="fas fa-check"></i> مكتمل</span>
                        @elseif(($e->status ?? '') == 'in_progress')<span class="badge badge-info"><i class="fas fa-spinner"></i> قيد التنفيذ</span>
                        @elseif(($e->status ?? '') == 'cancelled')<span class="badge badge-danger"><i class="fas fa-times"></i> ملغي</span>
                        @else<span class="badge badge-warning"><i class="fas fa-clock"></i> مسجل</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="4"><div class="empty-state"><i class="fas fa-user-friends" style="font-size:2rem;margin-bottom:8px"></i><p>لا يوجد مسجلون في هذه الدورة</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection