@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 ">My Assignment</h1>
            <button data-modal-target="#modal2" class="createModal save">Create Assignment</button>
        </div>

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

        @forelse($assignments as $assignment)
            <table class="content-table">
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Deadline</th>
                    <th>Submission</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{$assignment->title}}</td>
                    <td>{{$assignment->deadline->diffForHumans()}}</td>
                    <td>{{$assignment->mentees()->count()}} students <span class="submission">{{$assignment->submissions()->count()}} submission</span>
                    </td>
                    <td>
                        <div class="actions">
                            <a class="" href="{{route('mentor.assignments.submissions',$assignment->id)}}">
                                <i class="fa fa-eye"></i>
                                View
                            </a>
                            <a href="#" class="edit-btn"
                               data-id="{{$assignment->id}}"
                               data-title="{{$assignment->title}}"
                               data-description="{{$assignment->description}}"
                               data-deadline="{{$assignment->deadline->toDateString()}}"
                               data-mentees="{{htmlspecialchars(json_encode($assignment->mentees->pluck('id')->toArray()), ENT_QUOTES, 'UTF-8')}}"
                            >
                                <i class="fa fa-pencil"></i>
                                <span data-modal-target="#modal" class="modal-view-target mr-5">Edit</span>
                            </a>
                            <a class="text-danger js-remove-list-item"
                               href="{{route('mentor.assignments.delete',$assignment->id)}}"
                               data-url="{{route('mentor.assignments.delete',$assignment->id)}}"
                               data-method="DELETE"
                               data-confirm-title="@lang('Please Confirm')"
                               data-confirm-text="@lang('Are you sure that you want to delete this assignment?')"
                               data-confirm-delete="@lang('Yes, delete!')"
                            >
                                <i class="fa fa-trash-o"></i>
                                Delete
                            </a>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                </tbody>
            </table>
            <span class="float-right">
            {{$assignments->links()}}
        </span>
        @empty
            <div class="insight-placeholder">
                <p>You have not created any assignments!</p>
            </div>
        @endforelse

    </div>

    <div id="modal2" class="modal R2 Reschedule">
        <div>
            <div class="reschedule-h1">
                <h1>Create Assignment</h1>
            </div>
            <span class="material-icons-sharp modal-view-close">close</span>
        </div>

        <form action="{{route("mentor.assignments.create")}}" enctype="multipart/form-data" id="appointment-form"
              method="POST">
            @csrf
            <div class="menteeInfo form-group">
                <span>Select Mentees<span class="text-danger">*</span></span>
                <select class="form_input form-control js-select2-mentees" required multiple name="mentees[]"
                        id="usergender">
                    @foreach($mentees as $mentee)
                        <option value="{{ $mentee->mentee->id }}">{{ $mentee->mentee->getFullName() }}
                            ({{$mentee->mentee->email}})
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="menteeInfo form-group">
                <label for="title">Title<span class="text-danger">*</span></label>
                <input id="title" type="text" class="form-control" name="title" required/>
            </div>

            <div class="menteeInfo form-group">
                <label for="description">Description<span class="text-danger">*</span></label>
                <textarea name="description" id="description" class="form-control" required></textarea>
            </div>

            <div class="menteeInfo form-group">
                <label for="usergender">File Upload</label>
                <input type="file" class="form-control" name="file"/>
            </div>

            <div class="menteeInfo form-group">
                <label for="date">Deadline Date<span class="text-danger">*</span></label>
                <input type="date" min="{{now()->toDateString()}}" class="form-control" name="deadline" required/>
            </div>

            <div class="next">
                <input type="submit" class="btn save">
            </div>
        </form>
    </div>

    <div id="modal" class="modal R2 Reschedule ">
        <div>
            <div class="reschedule-h1">
                <h1>Edit Assignment</h1>
            </div>
            <span class="material-icons-sharp modal-view-close">close</span>
        </div>

        <form action="{{route("mentor.assignments.update")}}" enctype="multipart/form-data" id="appointment-form"
              method="POST">
            @method('PUT')
            @csrf
            <div class="menteeInfo form-group">
                <span>Select Mentees<span class="text-danger">*</span></span>
                <select class="form_input form-control js-select2-mentees-edit" required multiple name="mentees[]"
                        id="usergender">
                    @foreach($mentees as $mentee)
                        <option value="{{ $mentee->mentee->id }}">{{ $mentee->mentee->getFullName() }}
                            ({{$mentee->mentee->email}})
                        </option>
                    @endforeach
                </select>
            </div>

            <input id="id-edit" type="text" hidden class="form-control" name="assignment_id" required/>

            <div class="menteeInfo form-group">
                <label for="title-edit">Title<span class="text-danger">*</span></label>
                <input id="title-edit" type="text" class="form-control" name="title" required/>
            </div>

            <div class="menteeInfo form-group">
                <label for="description-edit">Description<span class="text-danger">*</span></label>
                <textarea name="description" id="description-edit" class="form-control" required></textarea>
            </div>

            <div class="menteeInfo form-group">
                <label for="usergender">File Upload</label>
                <input type="file" class="form-control" name="file"/>
            </div>

            <div class="menteeInfo form-group">
                <label for="deadline-edit">Deadline Date<span class="text-danger">*</span></label>
                <input type="date" min="{{now()->toDateString()}}" id="deadline-edit" class="form-control"
                       name="deadline" required/>
            </div>

            <div class="next">
                <input type="submit" class="btn save">
            </div>
        </form>
    </div>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/classic/ckeditor.js"></script>
    <script>
        $(".js-select2-mentees").select2({
            placeholder: 'Select mentees',
            closeOnSelect: false,
            multiple: true,
            width: '100%',
        });

        $(".js-select2-mentees-edit").select2({
            placeholder: 'Select mentees',
            closeOnSelect: false,
            multiple: true,
            width: '100%',
        });

        ClassicEditor
            .create(document.getElementById('description'))
            .catch(error => {
                console.error(error)
            })

        $('.edit-btn').on('click', function () {
            let $el = $(this);
            $("#id-edit").val($el.data('id'));
            $("#title-edit").val($el.data('title'));
            $("#deadline-edit").val($el.data('deadline'));
            $("#description-edit").val($el.data('description'));
            $('.js-select2-mentees-edit').val($el.data('mentees'));
            $('.js-select2-mentees-edit').trigger('change');

            ClassicEditor
                .create(document.getElementById('description-edit'))
                .catch(error => {
                    console.error(error)
                })
        });
    </script>
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Mentor\CreateNewAssignment', '#appointment-form') !!}
@stop