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

@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">Grade Submission</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>
            @if($submission->file ?? null)
                <div style="display: flex;" class="uploadBtns">
                    <a href="{{$submission->viewFile()}}" target="_blank">
                        View Uploaded File
                    </a>
                </div>
            @endif
        </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>

        <form action="{{route("mentor.assignments.grade")}}" method="POST">
            @csrf
            <div class="mentorComment">

                <div class="reportnfo">
                    <h4>Add Comment</h4>
                    <p class="p-small">Please give us more information about this issue to help us take
                        the right course of action
                    </p>
                    <input type="text" value="{{$submission->id}}" name="submission_id" hidden required>
                    <input type="text" value="{{$submission->grade}}" name="grade" id="grade" hidden required>
                    <textarea name="comment" id="" cols="30" rows="10" required>{{$submission->comment}}</textarea>
                </div>

            </div>
            <div class="mt-30 submit">
                <button class="start" type="submit">Submit</button>
            </div>
        </form>
    </div>
@endsection


@section("scripts")
    <script>
        $(document).ready(() => {
            $(".grade").on("click", function () {
                $(".grade").removeClass("active");
                let $el = $(this);
                $el.addClass('active');
                $("#grade").val($el.data('grade'));
            })
        })
    </script>
@endsection