@extends('layouts.master')
@section('title', 'Assignments - User')

@section("styles")
    <style>
        .more-comment .active {
            background-color: rgba(4, 52, 83, 0.47);
            color: #fff;
        }
    </style>
@endsection

@section('content')
    <div class="main">
        @include('layouts.partials.messages')
        <div class='assignment-heading mb-60'>
            <h1 class="hd">Assignment Grade</h1>

        </div>
        <!-- question title -->
        <div>
            <h1 style="font-weight: bolder;" class="mb-30">
                {{$submission->assignment->title}}
            </h1>
        </div>

        <div class="answer">
            <h4 class="mb-10">Answer</h4>
            <p style="letter-spacing: 1;">
                {!! $submission->answer !!}
            </p>
        </div>

        <!-- Mentors grading -->

        <div class="comment">
            <span>Grade Answer</span>
            <div class="more-comment">
                <span class="grade {{$submission->grade=="A" ? "active" : ""}}" data-grade="A">A</span>
                <span class="grade {{$submission->grade=="B" ? "active" : ""}}" data-grade="B">B</span>
                <span class="grade {{$submission->grade=="C" ? "active" : ""}}" data-grade="C">C</span>
                <span class="grade {{$submission->grade=="D" ? "active" : ""}}" data-grade="D">D</span>
                <span class="grade {{$submission->grade=="F" ? "active" : ""}}" data-grade="F">F</span>
            </div>
        </div>

        <div class="mentorComment mt-4">

            <div class="reportnfo">
                <h4>Mentor's Comment</h4>
                <p class="p-small">This is your mentor's comment on your assignment submission
                </p>
                <textarea disabled name="comment" id="" cols="30" rows="30" required>{{$submission->comment}}</textarea>
            </div>

        </div>
    </div>
@endsection