@php
    $homework = $submission->homework;
    $max = (int) ($homework?->total_marks ?: $submission->total_marks ?: 10);
@endphp

@extends('layouts.teacher')

@section('title', ($submission->student?->full_name).' · '.$homework?->title.' · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="Submissions"
            :title="$homework?->title"
            :meta="($submission->student?->full_name).' · '.($homework?->lesson?->academicLabel()).' · '.($homework?->dueLabel())"
        >
            <x-slot:actions>
                <a href="{{ route('teacher.submissions.index', $submission->isAwaitingMark() ? 'awaiting' : 'marked') }}" class="btn mec-btn-secondary btn-md">Back</a>
                <a href="{{ route('teacher.homework.show', $homework) }}" class="btn mec-btn-secondary btn-md">Assignment</a>
            </x-slot:actions>
        </x-admin.page-header>

        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">{{ $errors->first() }}</div>
        @endif

        @include('teacher.submissions.nav', ['section' => $submission->isAwaitingMark() ? ($submission->isResubmission() ? 'resubmissions' : 'awaiting') : 'marked'])

        <div class="row g-3">
            <div class="col-lg-7">
                <div class="card mec-panel mb-3">
                    <div class="card-body">
                        <p class="mb-2"><strong>Student:</strong> {{ $submission->student?->full_name }}</p>
                        <p class="mb-2"><strong>Submitted:</strong> {{ $submission->submitted_at?->timezone('Africa/Accra')->format('D j M Y · g:i A') ?: '—' }}</p>
                        @if ($submission->isResubmission())
                            <p class="mb-2"><strong>Resubmitted:</strong> {{ $submission->resubmitted_at?->timezone('Africa/Accra')->format('D j M Y · g:i A') }}</p>
                        @endif
                        <p class="mb-3"><strong>Status:</strong> {{ $submission->status?->label() }}@if ($submission->status?->value === 'marked') · {{ $submission->score }} / {{ $submission->total_marks }}@endif</p>
                        @if ($homework?->details)
                            <h6>Task</h6>
                            <div class="mb-3">{!! nl2br(e($homework->details)) !!}</div>
                        @endif
                        <h6>{{ $submission->student?->first_name }}'s work</h6>
                        @if ($submission->body)
                            <div class="mb-0">{!! nl2br(e($submission->body)) !!}</div>
                        @else
                            <p class="mec-empty mb-0">No written answer was attached.</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card mec-panel">
                    <div class="card-header"><h6 class="mb-0">{{ $submission->isAwaitingMark() ? 'Mark this work' : 'Update mark' }}</h6></div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('teacher.submissions.mark', $submission) }}">
                            @csrf
                            <label class="form-label" for="score">Score out of {{ $max }}</label>
                            <input class="form-control mb-3" id="score" type="number" name="score" min="0" max="{{ $max }}" value="{{ old('score', $submission->score) }}" required>
                            <label class="form-label" for="teacher_feedback">Comments for the student</label>
                            <textarea class="form-control mb-3" id="teacher_feedback" name="teacher_feedback" rows="6">{{ old('teacher_feedback', $submission->teacher_feedback) }}</textarea>
                            <button type="submit" class="btn mec-btn-navy">Return to student</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection