@extends('layouts.master')
@section('title', 'Dashboard')

@section('content')
    <div class="main">
        @include('layouts.partials.messages')
        <h1 class="hd mb-30">Task</h1>

        <div>
            <h1 style="font-weight: bolder;" class="mb-20"><span style="
              color:#4490ce;
              font-size: 34px;">Q:</span>
                {{$assignment->title}} </h1>
        </div>
        <p style="
          width: 80%;
          color: gray" class="mb-30"><span style="font-weight: bolder;
              color:#4490ce;">desc: </span>
            {!! $assignment->description !!}
        </p>
        <form action="{{route("user.assignments.submit")}}" enctype="multipart/form-data" id="appointment-form"
              method="POST">
            @csrf
            <input type="text" hidden value="{{$assignment->id}}" name="assignment_id" required>
            <div class="task-grid">
                <div class="ms-grid-2 mb-4">
                    <label for="answer">Answer<span class="text-danger">*</span></label>
                    <textarea name="answer" id="answer" class="form-control" required>
                        {{$submission->answer ?? ""}}
                    </textarea>
                </div>
                <div class="msg-grid-3">
                    <div class="">
                        <h3 class="mb-30">Upload File</h3>
                        <div class="drag-drop">
                            <i class="fas fa-cloud-upload-alt"></i>

                            <h4>Choose a file to upload</h4>
                            <p class="mb-20">Accepted formats: PDFs, ePUB, Microsoft Word,videos,Audios</p>
                            <input type="file" class="form-control" name="file"/>
                        </div>
                        <div style="display: flex;" class="uploadBtns">
                            @if($submission->file ?? null)
                                <a href="{{$submission->viewFile()}}" target="_blank">
                                    View Previously Uploaded File
                                </a>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
            <div style="display: grid; place-items: center; grid-template-columns:  repeat(2, 1fr);" class="mt-4">
                <button style="margin-right: 50px" class="cancel">
                    <a style="color: #4490ce" href="{{route('user.assignments')}}">
                        Go Back</a
                    >
                </button>
                <button class="start" style="color: #fff">
                    Submit
                </button>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.getElementById('answer'))
            .catch(error => {
                console.error(error)
            })

    </script>
    {!! JsValidator::formRequest('Guildroom\Http\Requests\User\SubmitAssignment', '#appointment-form') !!}
@stop