@extends('Component.layout')

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

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

    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route($rolePrefix . '.exams.index') }}" class="p-2 bg-white border border-slate-200 text-slate-500 hover:bg-slate-50 hover:text-slate-800 rounded-xl transition-all shadow-sm">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-800">Add / Edit Marks</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Enter marks for all students in this test.</p>
        </div>
    </div>

    {{-- Exam Info Card --}}
    <div class="bg-gradient-to-br from-cyan-600 to-blue-700 rounded-3xl p-6 text-white shadow-lg shadow-cyan-500/20 flex flex-col md:flex-row justify-between md:items-center gap-6">
        <div>
            <h2 class="text-2xl font-bold">{{ $exam->title }}</h2>
            <div class="flex flex-wrap gap-4 mt-3 text-cyan-100 text-sm font-medium">
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg> {{ $exam->subject }}</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg> {{ $exam->schoolClass->name }} {{ $exam->section ? '- ' . $exam->section->name : '' }}</span>
                <span class="flex items-center gap-1.5"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> {{ $exam->exam_date->format('d M, Y') }}</span>
            </div>
        </div>
        <div class="bg-white/20 backdrop-blur-sm px-6 py-4 rounded-2xl text-center">
            <div class="text-cyan-100 text-xs font-bold uppercase tracking-widest mb-1">Max Marks</div>
            <div class="text-3xl font-black">{{ number_format($exam->max_marks, 0) }}</div>
        </div>
    </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 shrink-0" 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 shrink-0" 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
    @if($errors->any())
        <div class="bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold px-4 py-3.5 rounded-2xl space-y-1">
            @foreach($errors->all() as $error)
                <p>• {{ $error }}</p>
            @endforeach
        </div>
    @endif

    <form action="{{ route($rolePrefix . '.exams.marks.update', $exam->id) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden mb-6">
            <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 w-16">#</th>
                            <th class="px-6 py-4">Student ID (Login ID)</th>
                            <th class="px-6 py-4">Student Name</th>
                            <th class="px-6 py-4 text-center rounded-tr-3xl w-48">Marks Obtained</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($students as $index => $student)
                            @php
                                $markRecord = $existingMarks->get($student->id);
                                $markValue = $markRecord ? rtrim(rtrim(number_format($markRecord->marks_obtained, 2), '0'), '.') : '';
                            @endphp
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4 font-bold text-slate-400">
                                    {{ $index + 1 }}
                                </td>
                                <td class="px-6 py-4 font-medium text-slate-600">
                                    {{ $student->login_id ?? '-' }}
                                </td>
                                <td class="px-6 py-4">
                                    <span class="font-bold text-slate-800">{{ $student->first_name }} {{ $student->surname }}</span>
                                </td>
                                <td class="px-6 py-3 text-center">
                                    <input type="number" name="marks[{{ $student->id }}]" value="{{ old('marks.' . $student->id, $markValue) }}" min="0" max="{{ $exam->max_marks }}" step="0.01" placeholder="--"
                                           class="w-full text-center text-sm font-bold text-slate-700 px-4 py-2.5 rounded-xl border border-slate-200 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/20 outline-none transition-all">
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" 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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                    </div>
                                    <h3 class="text-sm font-bold text-slate-800">No Students Found</h3>
                                    <p class="text-xs text-slate-500 mt-1">There are no students registered in this class.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($students->isNotEmpty())
            <div class="flex justify-end sticky bottom-6">
                <button type="submit" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl shadow-lg shadow-emerald-500/30 transition-all flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Save All Marks
                </button>
            </div>
        @endif
    </form>
</div>
@endsection