@extends('Component.layout')

@section('title', 'Test Management - Iqra Admin')
@section('breadcrumb', 'Test Management')

@section('content')
<div class="space-y-6">

    {{-- Header --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-800">Test Management</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Manage exams, subjects, and enter student marks.</p>
        </div>
        <a href="{{ route($rolePrefix . '.exams.create') }}" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-md shadow-emerald-500/20 transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            Create New Test
        </a>
    </div>

    @if(session('success'))
        <div class="flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold px-4 py-3.5 rounded-2xl">
            <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="flex items-center gap-3 bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold px-4 py-3.5 rounded-2xl">
            <svg class="w-4 h-4 text-rose-600 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            {{ session('error') }}
        </div>
    @endif

    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm whitespace-nowrap">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100 text-[10px] uppercase tracking-widest text-slate-500 font-bold">
                        <th class="px-6 py-4 rounded-tl-3xl">Test Title</th>
                        <th class="px-6 py-4">Class & Section</th>
                        <th class="px-6 py-4">Subject</th>
                        <th class="px-6 py-4">Teacher</th>
                        <th class="px-6 py-4">Exam Date</th>
                        <th class="px-6 py-4 rounded-tr-3xl text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($exams as $exam)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <span class="font-bold text-slate-800">{{ $exam->title }}</span>
                                <div class="text-[11px] text-slate-400 mt-0.5">Max Marks: {{ number_format($exam->max_marks, 0) }}</div>
                            </td>
                            <td class="px-6 py-4 font-medium text-slate-600">
                                {{ $exam->schoolClass->name }} 
                                @if($exam->section)
                                    - {{ $exam->section->name }}
                                @endif
                            </td>
                            <td class="px-6 py-4 font-semibold text-cyan-600">
                                {{ $exam->subject }}
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-xs font-semibold text-slate-600 bg-slate-100 px-2 py-1 rounded-md">{{ $exam->teacher->name }}</span>
                            </td>
                            <td class="px-6 py-4 text-xs font-medium text-slate-500">
                                {{ $exam->exam_date->format('d M, Y') }}
                            </td>
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route($rolePrefix . '.exams.marks', $exam->id) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 font-bold text-xs rounded-lg transition-colors">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                                    Add/Edit Marks
                                </a>
                                
                                <form action="{{ route($rolePrefix . '.exams.destroy', $exam->id) }}" method="POST" class="inline-block ml-2" onsubmit="return confirm('Are you sure you want to delete this test? All marks will be permanently lost.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 text-slate-400 hover:text-rose-500 transition-colors rounded-lg hover:bg-rose-50">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center">
                                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-50 mb-3">
                                    <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                                </div>
                                <h3 class="text-sm font-bold text-slate-800">No Tests Found</h3>
                                <p class="text-xs text-slate-500 mt-1">Get started by creating a new test.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($exams->hasPages())
            <div class="px-6 py-4 border-t border-slate-100">
                {{ $exams->links() }}
            </div>
        @endif
    </div>
</div>
@endsection