@extends('layouts.app')
@section('title','Grade Attempt')
@section('page-title','Assessments')

@section('content')
<div class="page-header">
    <div>
        <h1>Grade Attempt</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('assessments.show', $attempt->test) }}">{{ $attempt->test->title }}</a></li>
            <li class="breadcrumb-item active">Grade</li>
        </ol></nav>
    </div>
</div>

<div class="row g-4">
    <div class="col-12 col-lg-4">
        <div class="card mb-3">
            <div class="card-body">
                <div class="fw-bold mb-1" style="font-size:1rem;">{{ $attempt->taker_display_name }}</div>
                <div style="font-size:.8rem;color:var(--text-2);">{{ $attempt->taker_email }}</div>
                <div style="font-size:.8rem;color:var(--text-2);">Submitted {{ $attempt->submitted_at?->diffForHumans() }}</div>
                <hr style="border-color:var(--card-border);">
                <div style="font-size:.83rem;">
                    <div class="mb-1"><span style="color:var(--text-3);">Test:</span> {{ $attempt->test->title }}</div>
                    <div class="mb-1"><span style="color:var(--text-3);">Pass mark:</span> {{ $attempt->test->pass_score }}%</div>
                    <div><span style="color:var(--text-3);">Auto-scored:</span>
                        <strong>{{ round($attempt->percentage_score ?? 0) }}%</strong>
                        (questions already auto-graded)
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-8">
        <form method="POST" action="{{ route('assessments.grade.save', $attempt) }}" class="d-flex flex-column gap-3">
            @csrf

            @foreach($attempt->responses->whereNotIn('is_correct',[true,false])->where('is_correct',null) as $resp)
            <div class="card">
                <div class="card-body">
                    <div class="fw-semibold mb-2" style="font-size:.92rem;">{{ $resp->question->question_text }}</div>
                    <div class="p-3 rounded-3 mb-3" style="background:var(--body-bg);font-size:.88rem;">
                        {{ $resp->text_response ?? '(no response)' }}
                    </div>
                    <div class="row g-2">
                        <div class="col-4">
                            <label class="form-label" style="font-size:.78rem;">Points (max {{ $resp->question->points }})</label>
                            <input type="number" name="responses[{{ $resp->id }}][points]"
                                   class="form-control" min="0" max="{{ $resp->question->points }}"
                                   step="0.5" value="{{ $resp->points_awarded ?? 0 }}" required>
                        </div>
                        <div class="col-8">
                            <label class="form-label" style="font-size:.78rem;">Grader Comment (optional)</label>
                            <input type="text" name="responses[{{ $resp->id }}][comment]"
                                   class="form-control" value="{{ $resp->grader_comment }}"
                                   placeholder="Feedback for the taker">
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

            <div class="card">
                <div class="card-body">
                    <label class="form-label">Overall Grader Notes</label>
                    <textarea name="grader_notes" class="form-control" rows="3"
                              placeholder="General feedback or internal notes…">{{ $attempt->grader_notes }}</textarea>
                </div>
            </div>

            <div class="alert alert-info" style="font-size:.83rem;">
                <i class="bi bi-bell me-2"></i>
                After saving, emails with the final score will be automatically sent to the test taker, all HR admins, and super admins.
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-success px-4">
                    <i class="bi bi-check-lg me-2"></i>Save Grades & Notify
                </button>
                <a href="{{ route('assessments.show', $attempt->test) }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection