@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Manage Assessments</h1>
        <x-ui.button variant="create" href="{{ route('admin.assessments.create') }}">
            Create New Assessment
        </x-ui.button>
    </div>
    
    <x-ui.layout.card>
        <div class="overflow-x-auto">
            <div class="min-w-full inline-block align-middle">
                @if ($assessments->isEmpty())
                    <p class="text-gray-700 dark:text-gray-300 p-6">No assessments found. <a href="{{ route('admin.assessments.create') }}" class="text-blue-500 hover:underline">Add one now</a>.</p>
                @else
                    <x-ui.data.table :headers="['Module', 'Name', 'Description', 'Passing Score (%)', '']">
                        @forelse ($assessments as $assessment)
                            <tr>
                                <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $assessment->module->name ?? 'N/A' }}</td>
                                <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100">{{ $assessment->name }}</td>
                                <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 prose-custom dark:prose-invert max-w-xs truncate">{!! $assessment->description !!}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ $assessment->passing_score_percent }}%</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <x-ui.button-group>
                                        <x-ui.button variant="view" size="sm" href="{{ route('admin.assessments.show', $assessment) }}">
                                            View Details
                                        </x-ui.button>
                                        <x-ui.button variant="info" size="sm" href="{{ route('admin.assessments.questions.index', ['assessment' => $assessment->id]) }}">
                                            Manage Questions
                                        </x-ui.button>
                                        <x-ui.button variant="edit" size="sm" href="{{ route('admin.assessments.edit', $assessment) }}">
                                            Edit
                                        </x-ui.button>
                                        <x-ui.button 
                                            variant="delete" 
                                            size="sm" 
                                            method="DELETE" 
                                            action="{{ route('admin.assessments.destroy', $assessment) }}"
                                            confirm="Are you sure you want to delete this assessment and all its questions/options?"
                                        >
                                            Delete
                                        </x-ui.button>
                                    </x-ui.button-group>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 text-center">No assessments found.</td>
                            </tr>
                        @endforelse
                    </x-ui.data.table>
                    
                    <div class="mt-4">
                        <x-ui.data.pagination :paginator="$assessments" />
                    </div>
                @endif
            </div>
        </div>
    </x-ui.layout.card>
</div>
@endsection