@extends('layouts.admin')

@section('content')

<h2 class="text-2xl font-bold mb-4">
    {{ $exam->title }} - Student Attempts
</h2>

<form method="GET" action="{{ route('admin.results.show', $exam->id) }}" class="mb-4 flex flex-wrap items-center gap-3">
    <label for="filter" class="text-sm font-semibold text-gray-200">Filter:</label>
    <select id="filter" name="filter"
            class="px-3 py-2 rounded bg-gray-900/80 border border-gray-600 text-gray-100"
            onchange="this.form.submit()">
        <option value="all" {{ ($filter ?? 'all') === 'all' ? 'selected' : '' }}>All Attempts</option>
        <option value="highest" {{ ($filter ?? '') === 'highest' ? 'selected' : '' }}>Highest Marks</option>
        <option value="lowest" {{ ($filter ?? '') === 'lowest' ? 'selected' : '' }}>Lowest Marks</option>
        <option value="pass" {{ ($filter ?? '') === 'pass' ? 'selected' : '' }}>Passed Students</option>
        <option value="fail" {{ ($filter ?? '') === 'fail' ? 'selected' : '' }}>Failed Students</option>
    </select>

    <select name="department"
            class="px-3 py-2 rounded bg-gray-900/80 border border-gray-600 text-gray-100"
            onchange="this.form.submit()">
        <option value="">All Departments</option>
        @foreach(config('academix.departments', []) as $dept)
            <option value="{{ $dept }}" {{ ($department ?? '') === $dept ? 'selected' : '' }}>{{ $dept }}</option>
        @endforeach
    </select>

    <select name="semester"
            class="px-3 py-2 rounded bg-gray-900/80 border border-gray-600 text-gray-100"
            onchange="this.form.submit()">
        <option value="">All Semesters</option>
        @foreach(config('academix.semesters', []) as $sem)
            <option value="{{ $sem }}" {{ ($semester ?? '') === $sem ? 'selected' : '' }}>{{ $sem }}</option>
        @endforeach
    </select>
</form>

<table class="table-auto w-full border border-gray-700 rounded-lg overflow-hidden">
    <thead class="bg-gray-800">
        <tr>
            <th class="p-3 text-left">Student</th>
            <th class="p-3 text-center">Marks</th>
            <th class="p-3 text-center">%</th>
            <!-- 3 columns ki jagah ab 1 column -->
            <th class="p-3 text-center">Correct / Wrong / NA</th>
            <th class="p-3 text-center">Status</th>
            <th class="p-3 text-center">Action</th>
        </tr>
    </thead>

    <tbody>
        @forelse($results as $r)
        <tr class="border-t border-gray-700 hover:bg-gray-800">
            <!-- Student -->
            <td class="p-3">
                <div class="flex items-center gap-2">
                    <img src="{{ $r->user->profile_photo_path ? asset('storage/' . $r->user->profile_photo_path) : 'https://ui-avatars.com/api/?name='.urlencode($r->user->name).'&color=7F9CF5&background=EBF4FF' }}" 
                         alt="{{ $r->user->name }}" 
                         class="w-8 h-8 rounded-full object-cover border border-white/20">
                    <span>{{ $r->user->name }}</span>
                </div>
            </td>

            <!-- Marks -->
            <td class="p-3 text-center">{{ $r->obtained_marks }} / {{ $r->total_marks }}</td>

            <!-- Percentage -->
            <td class="p-3 text-center">{{ rtrim(rtrim(number_format($r->percentage, 2), '0'), '.') }}%</td>

            <!-- CORRECT / WRONG / NOT ATTEMPTED (Combined) -->
            <td class="p-3 text-center">
    <div class="flex items-center justify-center gap-1">
        <span class="px-2 py-0.5 bg-green-600 text-white text-xs rounded" title="Correct">
            {{ $r->correct ?? 0 }}
        </span>
        <span class="px-2 py-0.5 bg-red-600 text-white text-xs rounded" title="Wrong">
            {{ $r->wrong ?? 0 }}
        </span>
        <span class="px-2 py-0.5 bg-yellow-600 text-white text-xs rounded" title="Not Attempted">
            {{ $r->not_attempted ?? 0 }}
        </span>
    </div>
</td>

            <!-- Status -->
            <td class="p-3 text-center">
                <span class="px-2 py-1 rounded text-sm
                    {{ $r->status === 'Pass' ? 'bg-green-600' : 'bg-red-600' }}">
                    {{ $r->status }}
                </span>
            </td>

            <!-- Action -->
            <td class="p-3 text-center">
                <a href="{{ route('admin.results.sheet', $r->id) }}"
                   target="_blank"
                   class="px-3 py-1 bg-indigo-600 rounded hover:bg-indigo-700 text-white text-sm">
                    View Sheet
                </a>
            </td>
        </tr>
        @empty
        <tr class="border-t border-gray-700">
            <!-- Colspan ab 6 ho gaya -->
            <td colspan="6" class="p-4 text-center text-gray-300">
                No student attempts found for selected filter.
            </td>
        </tr>
        @endforelse
    </tbody>
</table>

@endsection