@extends('mentor.layouts.master')
@section('title', 'Assignments - Mentor')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <style>

        .select2.select2-container {
            width: 100% !important;
        }

        .select2.select2-container .select2-selection {
            border: 1px solid #ccc;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            height: 34px;
            margin-bottom: 15px;
            outline: none !important;
            transition: all .15s ease-in-out;
        }

        .select2.select2-container .select2-selection .select2-selection__rendered {
            color: #333;
            line-height: 32px;
            padding-right: 33px;
        }

        .select2.select2-container .select2-selection .select2-selection__arrow {
            background: #f8f8f8;
            border-left: 1px solid #ccc;
            -webkit-border-radius: 0 3px 3px 0;
            -moz-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
            height: 32px;
            width: 33px;
        }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
            background: #f8f8f8;
        }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
            -webkit-border-radius: 0 3px 0 0;
            -moz-border-radius: 0 3px 0 0;
            border-radius: 0 3px 0 0;
        }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
            border: 1px solid #34495e;
        }

        .select2.select2-container .select2-selection--multiple {
            height: auto;
            min-height: 34px;
        }

        .select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
            margin-top: 0;
            height: 32px;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__rendered {
            display: block;
            padding: 0 4px;
            line-height: 29px;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__choice {
            background-color: #f8f8f8;
            border: 1px solid #ccc;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            margin: 4px 4px 0 0;
            padding: 0 6px 0 22px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            position: relative;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
            position: absolute;
            top: 0;
            left: 0;
            height: 22px;
            width: 22px;
            margin: 0;
            text-align: center;
            color: #e74c3c;
            font-weight: bold;
            font-size: 16px;
        }

        .select2-container .select2-dropdown {
            background: transparent;
            border: none;
            margin-top: -5px;
        }

        .select2-container .select2-dropdown .select2-search {
            padding: 0;
        }

        .select2-container .select2-dropdown .select2-search input {
            outline: none !important;
            border: 1px solid #34495e !important;
            border-bottom: none !important;
            padding: 4px 6px !important;
        }

        .select2-container .select2-dropdown .select2-results {
            padding: 0;
        }

        .select2-container .select2-dropdown .select2-results ul {
            background: #fff;
            border: 1px solid #34495e;
        }

        .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
            background-color: #3498db;
        }
    </style>

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

        <div class="tabletabs">
            <div class="tabletab {{request()->query("type")!= 'graded' ? "l-active" : ""}}" data-targetname="pending">
                <a href="{{route('mentor.assignments.submissions',$assignment->id)}}">
                    <h4 class="tabletab-text {{request()->query("type")!= 'graded' ? "t-active" : ""}}">@lang('Ungraded Submissions')</h4>
                </a>
            </div>
            <div class="tabletab {{request()->query("type") == 'graded' ? "l-active" : ""}}" data-targetname="expired">
                <a href="{{route('mentor.assignments.submissions',[$assignment->id,'type' => 'graded'])}}">
                    <h4 class="tabletab-text {{request()->query("type") == 'graded' ? "t-active" : ""}}">@lang('Graded Submissions')</h4>
                </a>
            </div>
        </div>

        @forelse($submissions as $submission)
        <table class="content-table">
            <thead>
            <tr>
                <th>Title</th>
                <th>Grade</th>
                <th>Comment</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{$submission->assignment->title}}</td>
                    <td>{{$submission->grade ?? "None"}}</td>
                    <td>{{\Illuminate\Support\Str::limit($submission->comment,15) ?? "None"}}</td>
                    <td>
                        <div class="actions">
                            <a href="{{route('mentor.assignments.answer',$submission->id)}}" class="edit-btn">
                                <i data-modal-target="#submitted-assigment" class="fa fa-eye"></i>Grade
                            </a>
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>
        @empty
            <div class="insight-placeholder">
                <p>No Submissions yet!</p>
            </div>
        @endforelse
        <span class="float-right">
            {{$submissions->links()}}
        </span>
    </div>
@endsection