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

@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')
    <main>
        <div class="main">
            @include('layouts.partials.messages')
            <div class="student mb-60">
                <div class="header mb-30">
                    <h1 class="hd">OverView</h1>
                    <button data-modal-target="#modal2" class="createModal save">
                        <span class="material-icons-sharp">add</span> Assign Student
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">Mentor Name</th>
                            <th scope="col">Mentor Email</th>
                            <th scope="col">Assignable Mentees</th>
                            <th scope="col">Assigned Mentees</th>
                            <th scope="col">Mentee Name</th>
                            <th scope="col">Mentee Email</th>
                            <th>Date added</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($mentorsMentees as $mentorMentee)
                            <tr>
                                <td>{{ !empty($mentorMentee->mentor->getFullname()) ?  $mentorMentee->mentor->getFullname()  : "-" }}</td>
                                <td>{{ !empty(data_get($mentorMentee->mentor, 'email')) ?  data_get($mentorMentee->mentor, 'email')  : "-" }}</td>
                                <td>
                                    @foreach($mentorMentee->mentor->careers as $career)
                                        {{$career->career_name}},
                                    @endforeach
                                </td>
                                <td>
                                    {{Guildroom\Models\MentorMentee::query()->where("mentor_id", $mentorMentee->mentor->id)->count()}}
                                </td>
                                <td>{{ !empty($mentorMentee->mentee->getFullname()) ?  $mentorMentee->mentee->getFullname()  : "-" }}</td>
                                <td>{{ !empty(data_get($mentorMentee->mentee, 'email')) ?  data_get($mentorMentee->mentee, 'email')  : "-" }}</td>
                                <td>{{ !empty(show_date($mentorMentee->created_at)) ?  show_date($mentorMentee->created_at)  : "-" }}</td>
                                <td class="text-center align-middle">
                                    <a href="{{ route('super.manual-matching.remove', ['mentor'=> $mentorMentee->mentor->id, 'mentee'=> $mentorMentee->mentee->id]) }}"
                                       onclick="return confirm('Are you sure you want to remove this student from this mentor?')"
                                       class="btn btn-icon"
                                       title="@lang('Remove Student from Mentor')">
                                        <i class="fas fa-user-minus"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


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

            <form action="{{route("super.manual-matching.assign")}}" id="appointment-form" method="POST">
                @csrf
                <div class="form-group">
                    <label for="date">Select Mentor</label>
                    <select class="form_input form-control js-select2-mentors" required name="mentor"
                            id="usergender">
                        @foreach($availableMentors as $availableMentor)
                            <option value="{{ $availableMentor->id }}">{{ $availableMentor->getFullName() }}
                                ({{$availableMentor->email}})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="date">Select Mentee</label>
                    <select class="form_input form-control js-select2-mentees" required name="mentee"
                            id="usergender">
                        @foreach($availableMentees as $availableMentee)
                            <option value="{{ $availableMentee->id }}">{{ $availableMentee->getFullName() }}
                                ({{$availableMentee->email}})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="next">
                    <input type="submit" class="btn save">
                </div>
            </form>
        </div>
    </main>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(".js-select2-mentees").select2({
            placeholder: 'Select Mentor',
            closeOnSelect: false,
            multiple: false,
            width: '100%',
        });

        $(".js-select2-mentors").select2({
            placeholder: 'Select Mentor',
            closeOnSelect: false,
            multiple: false,
            width: '100%',
        });
    </script>
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Super\AssignMentorToMenteeRequest', '#appointment-form') !!}
@stop