@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-md">
        <h4 class="mb-1 mt-0 font-weight-medium">Staff</h4>
        <p>Select invite staff to invite yourself, staff members or other allied professionals to your TeachKloud account. Staff have access to the mobile/tablet app, while assistant administrators have access to the app and the web version of TeachKloud. Watch a video on how the mobile/tablet app works <a href="https://intercom.help/teachkloud/en/articles/5472770-navigating-the-teacher-app" target="_blank">here</a> or learn how to invite assistant administrators <a href="https://intercom.help/teachkloud/en/articles/5609586-assign-an-assistant-administrator" target="_blank">here</a>. </p>
        {{-- <p class="font-weight-medium">Invite any teacher or staff member who requires access to the TeachKloud Mobile Application here. When an invite is accepted, go to teacher authentication to approve. As the administrator of the account, you can sign into the TeachKloud Mobile Application using the same email and password that you used to create your school account. After signing into the Teacher Mobile Application, approve yourself via <a href="{{ route('teachers.authentication') }}" class="text-underline">Teacher Authentication.</a></p> --}}
    </div>
    @if(isset($teachers) && !empty($teachers))
    <div class="col-md-auto">
        <div class="form-inline float-md-right mt-3 mt-sm-0">
            <div class="btn-group">
                <button type="button" class="btn btn-success  btn-min-width invite-teacher">Invite Staff</button>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@section('content')
@if(isset($teachers) && !empty($teachers))
<div class="row">
    <div class="col-md-12 mb-2">
        <div class="alert alert-success">
            <p class="mb-0 text-success font-weight-semibold">An assistant admin role enables staff to use the school interface. If inviting a registered user to use the interface, they can use the same email and password that they use to log into the TeachKloud: Childcare App, to log into the interface: https://school.teachkloud.com/login. If inviting a user who only needs access to the school interface and has not created an account on TeachKloud, they should sign up on the school interface https://school.teachkloud.com/register.</p>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="font-size-16 pb-3 d-none table-title">Staff and Allied Professionals List</div>
                <table id="datatable" class="table table-striped dt-responsive">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Role</th>
                            <th>Email</th>
                            <th>Rooms</th>
                            <th>Status</th>
                            <th class="text-nowrap">Restricted login <span class="" title="Restricted login enables admin to restrict access to teachkloud. Restrictions are dependent on the Roster > Roster Management section of TeachKloud. Restricting access to TeachKloud is optional" data-toggle="tooltip-info"><i class="icon-info"></i></span></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($teachers as $teacher)
                        <tr data-id="{{$teacher->_id}}" data-registered="{{$teacher->registered}}" data-role="{{$teacher->accessRole}}">
                            <td>{{$teacher->name}}</td>
                            <td>{{$teacher->accessRole == 1 ? 'Staff and Allied Professionals' : 'Assist administrator' }}</td>
                            <td>{{$teacher->email ?? "-"}}</td>
                            <td>{{ implode(', ',array_column($teacher->rooms, "name")) }}</td>
                            <td><span class="text-{{ $teacher->registered == false ? 'pink' : 'success' }} font-weight-medium">{{ $teacher->registered == false ? 'Not registered' : 'Registered' }}</span></td>
                            <td>{{ isset($teacher->restrictedAccess) && $teacher->restrictedAccess == true ? 'During Rostered Hours' : 'Not Restricted' }}</td>
                            <td>
                                <div class="dropdown align-self-center">
                                    <a href="#" class="dropdown-toggle arrow-none text-muted" data-toggle="dropdown" aria-expanded="false"><i class="uil uil-ellipsis-h"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right" x-placement="top-end">
                                        @if($teacher->registered == false)
                                            <a href="javascript:void(0);" class="dropdown-item resend-teacher-invitation">Resend invitation</a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0);" class="dropdown-item text-muted" title="Assign this role after the user has registered on the teacher app using the email that they were invited with." data-toggle="tooltip" data-placement="left">Make assistant administrator role</a> 
                                            <div class="dropdown-divider"></div>
                                        @else
                                            @if(\Session::get('user')->user->userType==0 || (\Session::get('user')->user->userType==1 && \Session::get('user')->user->_id!=$teacher->_id))
                                            <a href="javascript:void(0);" class="dropdown-item make-administrator">{{$teacher->accessRole == 1 ? 'Make' : 'Remove' }} assistant administrator role</a> 
                                            <div class="dropdown-divider"></div>
                                            @endif
                                        @endif
                                        <a href="javascript:void(0);" class="dropdown-item change-restrictions" data-restricted="{{ isset($teacher->restrictedAccess) && $teacher->restrictedAccess == true ? 1 : 0 }}" data-rosterExists="{{ isset($teacher->rosterExists) && $teacher->rosterExists == true ? 1 : 0 }}" data-teacherName="{{ $teacher->name }}">Change restrictions</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="javascript:void(0);" class="dropdown-item edit-rooms" data-room="{{ isset($teacher->rooms) ? implode(',',array_column($teacher->rooms, "_id")) : '' }}" data-teacherName="{{ $teacher->name }}">Manage rooms</a>
                                        <div class="dropdown-divider"></div>
                                        @if(\Session::get('user')->user->userType==0 || (\Session::get('user')->user->userType==1 && \Session::get('user')->user->_id!=$teacher->_id))
                                            <a href="javascript:void(0);" class="dropdown-item text-danger remove-teacher">Remove staff</a>
                                        @endif
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@else
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <p class="font-size-16">Invite staff to your school </p>
                <button type="button" class="btn btn-success btn-min-width invite-teacher">Invite staff</button>
            </div>
        </div>
    </div>
</div>
@endif

@include('school.teachers.inviteTeacherModal')

<div class="modal fade" id="editRoomsModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('teachers.change-room') }}" class="form-horizontal teacher-rooms-form">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Manage rooms</h3>
                    <p class="mb-0">for <span class="teacher-name"></span></p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <input type="hidden" value="" name="registered">
                        <input type="hidden" value="" name="teacherId">
                        <div class="form-group row">
                            <label class="col-md-3 col-form-label">Rooms</label>
                            <div class="col-md-9">
                                <select class="form-control wide" data-plugin="customselect" id="teacher-rooms" name="rooms[]" multiple data-placeholder="Select rooms">
                                    @if(isset($rooms) && !empty($rooms))
                                    @foreach ($rooms as $room)
                                    <option value="{{$room->_id}}">{{$room->name}}</option>  
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-min-width btn-update-room">Update</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-medium fade" id="editRestrictionsModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('teachers.change-restriction') }}" class="form-horizontal teacher-restriction-form">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Change restrictons</h3>
                    <p class="mb-0">For <span class="teacher-name"></span></p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <input type="hidden" value="" name="registered">
                        <input type="hidden" value="" name="teacherId">
                        <div class="form-group row">
                            <label class="col-md-12">The teacher will be able to use the app</label>
                            <div class="col-md-12">
                                <select class="form-control wide" data-plugin="customselect" id="teacher-restriction" name="restrictedAccess" data-placeholder="Select restriction">
                                    <option value="0" data-label="Not Restricted">Not Restricted</option>  
                                    <option value="1" data-label="During Rostered Hours">During the times that are added to the roster schedule</option>  
                                </select>
                            </div>
                        </div>
                        <div class="mb-2 no-schedule">
                            <p class="text-danger font-size-14">Note: This teacher does not have any schedules added. Please add schedules to the roster management section to restrict teachers from accessing TeachKloud outside their scheduled times. If a schedule is not added, teachers will be able to access teachkloud at any time.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-min-width btn-update-restriction">Save changes</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('[data-toggle="tooltip-info"]').tooltip({template:'<div class="tooltip tooltip-big" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})
    })
</script>
<script type="text/javascript"> var removeTeacherUrl = "{{ route('teachers.remove') }}", resendInviteTeacherUrl = "{{ route('teachers.invite.resend') }}", teacherMakeAdminUrl = "{{ route('teachers.make-administrator') }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/teacher.js') }}?{{time()}}" type="text/javascript"></script>
@endsection