@extends('layouts.dashboard')

@section('title', 'Gestion des Évaluations - Administration Sciences Afrique')
@section('page-title', 'Gestion des Évaluations')
@section('page-subtitle', 'Liste de toutes les évaluations du système.')

@section('content')
<div class="bg-white border border-gray-100 rounded-2xl overflow-hidden shadow-sm">
    <div class="p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-gray-900">Gestion des Évaluations</h2>
            <a href="{{ route('admin.assessments.create') }}" class="px-4 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                <i class="fa-solid fa-plus mr-2"></i> Nouvelle Évaluation
            </a>
        </div>

        @if($assessments->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b">
                            <th class="px-4 py-3 text-left">Cours</th>
                            <th class="px-4 py-3 text-left">Étudiant</th>
                            <th class="px-4 py-3 text-left">Type</th>
                            <th class="px-4 py-3 text-left">Titre</th>
                            <th class="px-4 py-3 text-left">Note</th>
                            <th class="px-4 py-3 text-left">Statut</th>
                            <th class="px-4 py-3 text-left">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($assessments as $assessment)
                            <tr class="border-b hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center space-x-2">
                                        <i class="fa-solid fa-book text-royal-blue"></i>
                                        <div>
                                            <div class="font-medium text-gray-900">{{ $assessment->course->name }}</div>
                                            <div class="text-sm text-gray-600">{{ $assessment->course->department->name }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center space-x-2">
                                        <i class="fa-solid fa-user text-green-600"></i>
                                        <div>
                                            <div class="font-medium text-gray-900">{{ $assessment->student->user->name }}</div>
                                            <div class="text-sm text-gray-600">{{ $assessment->student->matricule }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm font-medium bg-gray-100 text-gray-700 rounded px-2 py-1">
                                    {{ $assessment->type }}
                                </td>
                                <td class="px-4 py-3">{{ $assessment->title }}</td>
                                <td class="px-4 py-3">
                                    @if($assessment->score !== null)
                                        <div class="text-lg font-bold text-green-600">{{ $assessment->score }}/{{ $assessment->max_score }}</div>
                                        <div class="text-sm text-gray-600">{{ $assessment->percentage }}%</div>
                                    @else
                                        <div class="text-gray-500">Non noté</div>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 text-xs font-medium
                                        @if($assessment->status === 'Graded') bg-green-100 text-green-700
                                        @elseif($assessment->status === 'Submitted') bg-yellow-100 text-yellow-700
                                        @else bg-gray-100 text-gray-700 @endif rounded-full">
                                        {{ $assessment->status }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex space-x-2">
                                        <a href="{{ route('admin.assessments.edit', $assessment) }}" class="text-royal-blue hover:text-royal-blue-dark">
                                            <i class="fa-solid fa-pencil"></i>
                                        </a>
                                        <form action="{{ route('admin.assessments.destroy', $assessment) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette évaluation ?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-700">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-6">
                {{ $assessments->links() }}
            </div>
        @else
            <div class="text-center py-8">
                <i class="fa-solid fa-clipboard-list text-6xl text-gray-300 mb-4"></i>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Aucune évaluation trouvée</h3>
                <p class="text-gray-600 mb-4">Commencez par créer votre première évaluation</p>
                <a href="{{ route('admin.assessments.create') }}" class="px-6 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                    <i class="fa-solid fa-plus mr-2"></i> Créer une évaluation
                </a>
            </div>
        @endif
    </div>
</div>
@endsection