@extends('layouts.master')

@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/plugins.bundle.css') }}">
<link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="{{asset('assets/styles/vendor/dropzone.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/styles/vendor/quill.snow.css')}}">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
@endsection

<style>
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    }
    .font-weight-bold label {
        color: red !important;
        font-size: 15px !important;
    }
    .cdk-textarea-autosize{
        min-height: 21px; height: 21px; display: block; width: 100%; resize: none; -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;overflow: hidden;
        box-sizing: content-box;
        word-break: break-word;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        font-size: 18px;
        font-weight: bolder;
        line-height: 1.3em;
        color: #111;
        resize: none;
        border: 0;
        outline: none;
        background: transparent;
        padding: 0 4px 0 0;
    }

    textarea.centeral::-webkit-input-placeholder {
        color: #cfcfcf !important;
        text-align: center;
        font-size: 20px;
    }
    .multiselect-container {
        max-width: 300% !important;
    }
    .hider{
        display: none;
    }
    .multiselect-native-select .btn-group {
        width: 200% !important;
    }
    .modal-fullscreen {
        width: 100vw !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
    }
    .modal-fullscreen .modal-content {
        height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .modal-fullscreen .modal-body {
        overflow-y: auto !important;
    }
    /* CSS for loading spinner */
.loading {
  position: relative;
}

.loading .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hidden {
  display: none;
}
</style>
@section('main-content')
    <div class="auth-layout-wrap" style="background-image: url({{asset('assets/images/photo-wide-'.rand(1,4).'.jpg')}})">
        @can('Can view Staff Profile')
        <div class="col-md-11">

            <div class="card user-profile o-hidden mb-4 mt-12">
                <div class="user-info">
                    {!! profile_info(['elementClass'=>'mt-48','height'=>'120px','width'=>'120px','user'=>$user->id,'thumbFolder'=>'n']) !!}
                    <p class="m-0  text-24">{{ $user->name }}</p>
                    {!! profile_info(['need'=>'departmentName','withinSpecificElement'=>'<p class="text-muted m-0">XX</p>','user'=>$user->id]) !!}
                </div>
                <!-- Loading icon inside this div -->
                <div id="loading" class="loading">
                  <div class="spinner"></div>
                </div>
                <div class="card-body" id="tabMainDiv" style="opacity:0;">
                    <ul class="nav nav-tabs profile-nav mb-4" id="profileTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="timeline-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="false">Overview</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="about-tab" data-toggle="tab" href="#trainings" role="tab" aria-controls="trainings" aria-selected="true">Trainings</a>
                        </li>
                        @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can view one to one tab (under profile page)'))
                        <li class="nav-item">
                            <a class="nav-link" id="friends-tab" data-toggle="tab" href="#oneoones" role="tab" aria-controls="oneoones" aria-selected="false">1:1s</a>
                        </li>
                        @endif

                        <li class="nav-item">
                            <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="goals" aria-selected="false">Reviews</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="feedback-tab" data-toggle="tab" href="#tabFeedbacks" role="tab" aria-controls="feedbacks" aria-selected="false">Feedbacks</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="goals-tab" data-toggle="tab" href="#goals" role="tab" aria-controls="goals" aria-selected="false">Goals</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="engagements-tab" data-toggle="tab" href="#engagements" role="tab" aria-controls="engagements" aria-selected="false">Engagements</a>
                        </li>
                    </ul>

                    <div class="tab-content" id="profileTabContent">
                        <div class="tab-pane fade active show" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="ul-contact-detail__info">
                                                <div class="row">
                                                    <div class="col-6 text-center">
                                                        <div class="ul-contact-detail__info-1">
                                                            <h3>Active Trainings</h3>
                                                            <span class="badge  badge-square-warning lg m-1">{{$totalTrainings}}</span>
                                                        </div>
                                                    </div>

                                                    <div class="col-6 text-center">
                                                        <div class="ul-contact-detail__info-1">
                                                            <h3>Engagement Score</h3>
                                                            <span class="badge  badge-square-warning lg m-1">{{$engagementScore}}</span>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="row">
                                                    <div class="col-6 text-center">
                                                        <div class="ul-contact-detail__info-1">
                                                            <h3>Last Login</h3>
                                                            <span>{{$lastLogin}}</span>
                                                        </div>
                                                    </div>

                                                    <div class="col-6 text-center">
                                                        <div class="ul-contact-detail__info-1">
                                                            <h3>Team / Department</h3>
                                                            <span>{!! ($userTeams ?? '').(($firstDept!='')?'<br>('.$firstDept.')':'<span class="section-info">--No department aligned--</span>') !!}</span>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                            <div class="border-bottom-gray-200 mb-5">
                                                <div class="ul-widget-card__progress-rate">
                                                    <span>Based on user's system activity in last 30 days</span>

                                                </div>
                                                <div class="progress progress--height mb-3 ">
                                                    <div class="progress-bar" role="progressbar" style="width: {{$engagementScore}}%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-12" id='loadMyFeedbacks'>
                                            <!----------Public feedback load here------------>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="card-title">Recent Comments & Mentions</div>
                                                    @if(is_object($comments) && count($comments)>0)
                                                    <div class="">
                                                        @foreach($comments as $comment)
                                                        <div class="ul-widget-app__row-comments border-bottom-gray-200 mb-0">
                                                            <div class="ul-widget-app__comment">
                                                                <div class="ul-widget-app__profile-title">
                                                                    <h6 class="heading">{!! profile_info(['user'=>$user->id,'height'=>26,'width'=>26,'withinSpecificElement'=>'<span class="badge  badge-round-success m-1" id="userDropdown" alt="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">XX</span>']) !!} {{$user->name}}</h6>
                                                                    <p class="mb-2">{{$comment->notes}}</p>
                                                                </div>
                                                                <div class="ul-widget-app__profile-status">
                                                                    <small class="text-mute">{{$comment->created_at->diffForHumans()}}</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                    @else
                                                    <div class="ul-widget-app__row-comments border-bottom-gray-200 mb-0">
                                                        <div class="ul-widget-app__comment">
                                                            <div class="ul-widget-app__profile-title">
                                                                <p class="mb-2">-No Recent Comment -</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="card-title">What's new with {{ explode(' ',$user->name)[0] }}</div>
                                                    @if(is_object($whatsNew) && count($whatsNew)>0)
                                                    <div class="ul-widget-s6__items">
                                                        @foreach($whatsNew as $new)
                                                        <div class="ul-widget-s6__item">
                                                            <span class="ul-widget-s6__badge">
                                                                <p class="badge-dot-primary ul-widget6__dot"></p>
                                                            </span>
                                                            <span class="ul-widget-s6__text">{!! $user->name.' '.getToogleCategory(['cat_id'=>$new->sub_action,'cat_name'=>'']).'&nbsp; <span class="font-weight-700">'.(($new->action_id>0 && isset($new->action->title))?\Illuminate\Support\Str::limit($new->action->title, 20, $end='...'):'').'</span>' !!}</span>
                                                            <span class="ul-widget-s6__time">{{$new->created_at->diffForHumans()}}</span>
                                                        </div>

                                                        @endforeach
                                                    </div>
                                                    @else
                                                    <div class="ul-widget-app__row-comments border-bottom-gray-200 mb-0">
                                                        <div class="ul-widget-app__comment">
                                                            <div class="ul-widget-app__profile-title">
                                                                <p class="mb-2">-Nothing New -</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="row mt-4">
                            @include('partials.notesWidget')

                                <div class="col-lg-6 col-md-6 mb-6">
                                                                        @include('partials.quickAddTodos',['todo_userID'=>$user->id,'todo_deptID'=>$todo_deptID])
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="trainings" role="tabpanel" aria-labelledby="trainings-tab">
                            <div class="table-responsive">
                                <table id="training-list" data-route="{{ route('user_training',$user->id) }}" class="display table " style="width:100%;font-size: 13px;">
                                    <thead>
                                    <tr>
                                    <th>Title</th>
                                    <th>Assigned To</th>
                                    <th>Trainer</th>
                                    <th>Department</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Due date</th>
                                    <th>Added On</th>
                                    <th>Added By</th>
                                    <th>Action</th>
                                    </tr>
                                    <tr>
                                        <td><input type="text" name="title" id="search_title" class="form-control keydown" style="width:100px;"></td>
                                        <td>
                                            <select name="assignedTo" class="form-control filterSelect search_init" id="search_assignedTo" multiple>
                                                @if(isset($deptUsers))
                                                @foreach($deptUsers as $userGroup=>$userArr)
                                                <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                    @foreach($userArr as $userID=>$userName)
                                                    <option value="{{$userID}}" >{{$userName}}</option>
                                                    @endforeach
                                                </optgroup>
                                                @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td>
                                            <select name="trainer" class="form-control filterSelect search_init" id="search_Trainer" multiple>
                                                @if(isset($deptUsers))
                                                @foreach($deptUsers as $userGroup=>$userArr)
                                                <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                    @foreach($userArr as $userID=>$userName)
                                                    <option value="{{$userID}}" >{{$userName}}</option>
                                                    @endforeach
                                                </optgroup>
                                                @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td>
                                            <select name="department_id" multiple class="form-control filterSelect search_init" id="search_department_id" required="required">
                                                {{--<option value="" >-Select-</option>--}}
                                                @if(isset($departments))
                                                    @foreach($departments as $deptID=>$dept)
                                                        <option value="{{$deptID}}" >{{$dept}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td>
                                            <select type="text" name="category_id" class="form-control search_init" id="category_id" required="required">
                                                <option value="" >-Select-</option>
                                                @if(isset($categories))
                                                    @foreach($categories as $catID=>$category)
                                                        <option value="{{$catID}}" >{{$category}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td class="no-search sorting_disabled">&nbsp;</td>
                                        <td><input type="text" name="due_date" id="search_due_date" class="form-control search_init" style="width:100px;font-size: 10px;"></td>
                                        <td><input type="text" name="added_on" id="search_added_on" class="form-control search_init" style="width:100px;font-size: 10px;"></td>
                                        <td>
                                            <select name="added_by" class="form-control filterSelect search_init" id="search_add_by">
                                                <option value="" >-All-</option>
                                                @if(isset($deptUsers))
                                                @foreach($deptUsers as $userGroup=>$userArr)
                                                <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                    @foreach($userArr as $userID=>$userName)
                                                    <option value="{{$userID}}" >{{$userName}}</option>
                                                    @endforeach
                                                </optgroup>
                                                @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td class="no-search sorting_disabled">&nbsp;</td>
                                    </tr>
                                    </thead>


                                </table>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="oneoones" role="tabpanel" aria-labelledby="oneoones-tab">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row mb-4">
                                        <div class="col-md-6">
                                            <h3 class="heading">Upcoming 1:1s</h3>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="row">
                                                @if(is_object($ones) && count($ones)>0)
                                                    @php($count=0)
                                                    @foreach($ones as $one)
                                                        @if($one->status == 'n')
                                                            @php($count++)
                                                            <div class="col-md-12 mb-4">
                                                                <div class="card">
                                                                    <div class="card-body">
                                                                        @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can edit one to one (Tab under profile page)')  || (auth()->user()->can('Can edit MY DEPT 1:1s (under profile page)') && in_array($bothDepts['profile_user_dept'],$bothDepts['logged_user_dept'])))
                                                                            <form action="#" class="oneForms" method="post" enctype="multipart/form-data">
                                                                                @csrf
                                                                                <h4 class="heading text-primary">{{$one->oneTitle}}</h4>
                                                                                <h5 class="text-mute mb-32 {{ ((date('Y-m-d',strtotime($one->meetDate)) < date('Y-m-d', strtotime('-7 days')))?'text-danger':'') }}">{{date('D dS M, Y',strtotime($one->meetDate)).' '.date('h:ia',strtotime($one->meetTime))}}</h5>
                                                                                <div class="card-title mb-20">Meeting Agenda(s)</div>

                                                                                <div class="mt-3 mb-32">
                                                                                    <div class="">
                                                                                        <div class="" id="todo_wrap">
                                                                                            <ul id="show-one-items">
                                                                                                @php($count=1)
                                                                                                @foreach($one->one_staff_agendas($one->ones_staffs_id)->get() as $agenda)
                                                                                                    <li>
                                                                                                        <label class='checkbox checkbox-outline-success animated fadeIn'>
                                                                                                            <input type="hidden" name="agenda_{{ $loop->iteration}}" value="{{$agenda->agenda}}">
                                                                                                            <input class="checkbox chk_agenda class_of_id_{{$one->id}}_{{$one->ones_staffs_id}}" type="checkbox" value="{{$agenda->agenda}}" data-one="{{$one->id}}" data-agenda="{{$agenda->id}}" data-user="{{$user->id}}"><span>{{$agenda->agenda}}</span>
                                                                                                            <span class="checkmark"> </span>
                                                                                                            <a class="float-right" id='item_{{ $loop->iteration}}'>{!! profile_info(['elementClass'=>'rounded-circle m-0 avatar-sm-table','size'=>'avatar-sm-table','user'=>$agenda->created_by]) !!}</a>
                                                                                                        </label>
                                                                                                    </li>
                                                                                                    @php($count++)
                                                                                                @endforeach

                                                                                            </ul>
                                                                                            <div class="row mb-12">
                                                                                                <input type="hidden" value="{{$count}}" name="agendaLen" id="agendaLen" />
                                                                                                <div class="col-md-12">
                                                                                                    <input type="text" class="form-control" id="one-list-item" data-one="{{$one->id}}" data-agenda="0" data-user="{{$user->id}}" placeholder="Any new activity you may want to add?">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="mb-32 ">
                                                                                        <div class="row">
                                                                                            <div class="col-md-12">
                                                                                                <textarea class="form-control centeral"  rows="3" name="oneNotes_{{$one->id}}_{{$one->ones_staffs_id}}" id="oneNotes_{{$one->id}}_{{$one->ones_staffs_id}}" aria-label="With textarea" placeholder="Start typing your notes here..."></textarea>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="row">
                                                                                            <div class="col-md-3">
                                                                                                <button class="input-group-text badge-primary saveOneNote float-left mt-2 " data-onestaffid="{{$one->ones_staffs_id}}" data-one="{{$one->id}}" data-staff="{{$user->id}}" data-route="{{route('one.notes',[$one->id])}}">Add Notes</button>
                                                                                            </div>
                                                                                            <div class="col-md-9">
                                                                                                <div class="ul-form__radio-inline mt-3">
                                                                                                    <label class=" ul-radio__position radio radio-primary form-check-inline">
                                                                                                        <input type="radio" name="radOneNotes_{{$one->ones_staffs_id}}" id="radOneNotes_{{$one->ones_staffs_id}}" value="public" checked onclick="(($(this).is(':checked')== true)?$(this).parent().next().next('.oneNoteStaff').addClass('hider'):'')">
                                                                                                        <span class="ul-form__radio-font">Public</span>
                                                                                                        <span class="checkmark"></span>
                                                                                                    </label>
                                                                                                    <label class="ul-radio__position radio radio-primary">
                                                                                                        <input type="radio" name="radOneNotes_{{$one->ones_staffs_id}}" value="private" class="" onclick="(($(this).is(':checked')== true)?$(this).parent().next('.oneNoteStaff').removeClass('hider'):'')">
                                                                                                        <span class="ul-form__radio-font mr-2">Private</span>
                                                                                                        <span class="checkmark"></span>
                                                                                                    </label>
                                                                                                    <div class="oneNoteStaff hider">
                                                                                                        <select name="OneNoteStaffs_{{$one->ones_staffs_id}}[]" class="form-control mutiselect search_init ml-4" style="display: none;" id="OneNoteStaffs_{{$one->ones_staffs_id}}" multiple required="required">
                                                                                                            <option value="{{loggedin_userSession()->id}}" selected>Only Me</option>
                                                                                                            @if(isset($deptUsers))
                                                                                                                @foreach($deptUsers as $userGroup=>$userArr)
                                                                                                                    <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                                                                                        @foreach($userArr as $userID=>$userName)
                                                                                                                            <option value="{{$userID}}" >{{$userName}}</option>
                                                                                                                        @endforeach
                                                                                                                    </optgroup>
                                                                                                                @endforeach
                                                                                                            @endif
                                                                                                        </select>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>

                                                                                        <div class="mt-3" id="notes_box_{{$one->ones_staffs_id}}">
                                                                                            @if(is_object($one->one_staff_notes($one->ones_staffs_id)) && count($one->one_staff_notes($one->ones_staffs_id))>0)
                                                                                                @php($count=1)
                                                                                                @foreach($one->one_staff_notes($one->ones_staffs_id) as $note)
                                                                                                    @if($note->accessibility == 'private' && in_array(loggedin_userSession()->id,explode(',',$note->accessible_to)))
                                                                                                        @php($count++)
                                                                                                        <blockquote class="blockquote">
                                                                                                            <p class="section-info">{{$note->notes}}</p>
                                                                                                            <footer class="blockquote-footer"><small>{{$note->created_at}}</small></footer>
                                                                                                        </blockquote>
                                                                                                    @elseif($note->accessibility == 'public')
                                                                                                        @php($count++)
                                                                                                        <blockquote class="blockquote">
                                                                                                            <p class="section-info">{{$note->notes}}</p>
                                                                                                            <footer class="blockquote-footer"><small>{{$note->created_at}}</small></footer>
                                                                                                        </blockquote>
                                                                                                    @endif
                                                                                                @endforeach

                                                                                                @if($count ==1)
                                                                                                    <div class="section-info">NA</div>
                                                                                                @endif
                                                                                            @else
                                                                                                <div class="section-info">NA</div>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="mb-12 ">
                                                                                        <div class="row">
                                                                                            <div class="col-md-6">
                                                                                                <div class="row">
                                                                                                    <div class="col-md-9">
                                                                                                        <div class="dropzone one-dropzone" ones_staffs_id="{{$one->ones_staffs_id}}" data-route="{{route('one.upload',[$one->id,$user->id,$one->ones_staffs_id])}}">
                                                                                                            <div class="fallback">
                                                                                                                Upload files here
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="col-md-3">
                                                                                                        <label class="radio radio-primary">
                                                                                                            <input type="radio" name="radOneDoc_{{$one->ones_staffs_id}}" id="radOneDoc_{{$one->ones_staffs_id}}" value="public" checked onclick="(($(this).is(':checked')== true)?$(this).parent().next().next('.oneDocStaffs').addClass('hider'):'')">
                                                                                                            <span>Public</span>
                                                                                                            <span class="checkmark"></span>
                                                                                                        </label>
                                                                                                        <label class="radio radio-primary">
                                                                                                            <input type="radio" name="radOneDoc_{{$one->ones_staffs_id}}" id="radOneDoc_{{$one->ones_staffs_id}}" value="private" onclick="(($(this).is(':checked')== true)?$(this).parent().next('.oneDocStaffs').removeClass('hider'):'')">
                                                                                                            <span>Private</span>
                                                                                                            <span class="checkmark"></span>
                                                                                                        </label>
                                                                                                        <div class="oneDocStaffs hider">
                                                                                                            <select name="oneDocStaffs_{{$one->ones_staffs_id}}[]" class="form-control mutiselect search_init" style="display: none" id="oneDocStaffs_{{$one->ones_staffs_id}}" multiple required="required">
                                                                                                                <option value="{{loggedin_userSession()->id}}" selected>Only Me</option>
                                                                                                                @if(isset($deptUsers))
                                                                                                                    @foreach($deptUsers as $userGroup=>$userArr)
                                                                                                                        <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                                                                                            @foreach($userArr as $userID=>$userName)
                                                                                                                                <option value="{{$userID}}" >{{$userName}}</option>
                                                                                                                            @endforeach
                                                                                                                        </optgroup>
                                                                                                                    @endforeach
                                                                                                                @endif
                                                                                                            </select>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                <button type="button" class="btn btn-success btn-icon float-right btnMarkComplete mt-2" name="edit_2" ones_staffs_id="{{$one->ones_staffs_id}}" data-action="complete" data-one="{{$one->id}}" data-staff="{{$user->id}}" data-route="{{route('one.complete',[$one->id])}}">
                                                                                                    <span class="ul-btn__text"><i class="i-Yes"></i> Mark as Complete</span>
                                                                                                </button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                </div>
                                                                            </form>
                                                                        @else
                                                                            <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No upcoming 1:1 found</h4></div>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                    @if($count==0)
                                                        <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No upcoming 1:1 found</h4></div>
                                                    @endif
                                                @else
                                                    <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No upcoming 1:1 found</h4></div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="card">
                                                <div class="card-header">
                                                    Quick Links
                                                </div>
                                                <div class="card-body">
                                                    <h5 class=""><a href="javascript:void(0)" onclick="location.href='{{route('one.cycles')}}'"><i class="i-Post-Sign-2-ways"></i> Active 1:1 Cycles</a></h5>
                                                    <h5 class=""><a href="javascript:void(0)" data-toggle="modal" data-target=".create-pip"><i class="i-Paper-Plane"></i> Create new <abbr title="Performance Improvement Plan">PIP</abbr></a></h5>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row footer-bottom border-top mt-32">&nbsp;</div>
                            <div class="row">
                                <div class="col-xl-12">
                                    <h3 class="heading">Recently Completed 1:1s for {{ $user->name }}</h3>
                                    <div class="row">
                                        @php($count=0)
                                        @foreach($ones as $one)
                                            @if($one->status=='y')
                                                @php($count++)
                                                <div class="list-item col-md-4">
                                                    <div class="card o-hidden mb-4">
                                                        <div class="card-body justify-content-between align-items-lg-center">
                                                            <div class="row">
                                                                <div class="col-md-9">
                                                                    <h5 class="heading text-primary"><a href="{{route('one.view',$one->ones_staffs_id)}}" target="_blank">{{$one->oneTitle}}</a></h5>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can edit completed 1:1s'))
                                                                        <a href="{{route('one.editable',$one->ones_staffs_id)}}" class="text-success mr-2 float-right" title="Edit Completed 1:1 for {{$user->name}}"><i class="nav-icon i-Pen-4 font-weight-bold"></i></a>
                                                                    @endif
                                                                    @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can view completed 1:1s'))
                                                                        <a href="{{route('one.view',$one->ones_staffs_id)}}" title="View Completed 1:1 for {{$user->name}}" class="text-success mr-2 float-right"><i class="nav-icon i-Eye font-weight-bold"></i></a>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Type:</b> {{getToogleCategory(['cat_id'=>$one->oneTypeId,'cat_name'=>''])}}
                                                            </p>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Frequency:</b> {{getToogleCategory(['cat_id'=>$one->frequencyId,'cat_name'=>''])}}
                                                            </p>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Added by:</b> {{user_details_by_id($one->addedBy)->name}}
                                                            </p>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Due Date:</b> {{\Carbon\Carbon::parse($one->meetDate.' '.$one->meetTime)->format('M d Y, H:ia')}}
                                                            </p>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100 mb-12">
                                                                <b>Completed by:</b> {{(is_object($one->one_staffs) && count($one->one_staffs)>0)?((isset($one->reviewed_by) && $one->reviewed_by>0)?user_details_by_id($one->reviewed_by)->name:user_details_by_id($one->manger_id)->name).' on '.date('dS M, Y h:ia',strtotime($one->updated_at)):'NA'}}
                                                            </p>

                                                            <a href="#collapse-icon-{{$count}}" class="text-default collapsed" data-toggle="collapse" aria-expanded="false">
                                                                <center><i class="i-Arrow-Down-2 t-font-boldest"></i></center>
                                                            </a>
                                                            <div class="collapse" id="collapse-icon-{{$count}}">
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Notes:</b>
                                                                @if(is_object($one->staff_notes_v2($user,1)) && count($one->staff_notes_v2($user,1))>0)
                                                                    @php($count=1)
                                                                    @foreach($one->staff_notes_v2($user,1) as $note)
                                                                        @if($note->accessibility == 'private' && in_array(loggedin_userSession()->id,explode(',',$note->accessible_to)))
                                                                            @php($count++)
                                                                            <blockquote class="blockquote">
                                                                                <p class="section-info">{{Str::limit($note->notes,30)}}</p>
                                                                                <footer class="blockquote-footer"><small>{{$note->created_at}}</small></footer>
                                                                            </blockquote>
                                                                        @elseif($note->accessibility == 'public')
                                                                            @php($count++)
                                                                            <blockquote class="blockquote">
                                                                                <p class="section-info">{{Str::limit($note->notes,30)}}</p>
                                                                                <footer class="blockquote-footer"><small>{{$note->created_at}}</small></footer>
                                                                            </blockquote>
                                                                        @endif
                                                                    @endforeach
                                                                    @if($count ==1)
                                                                        <div class="section-info">NA</div>
                                                                    @endif
                                                                @else
                                                                    <div class="section-info">NA</div>
                                                                @endif
                                                            </p>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Agenda:</b>
                                                                @if(is_object($one->one_staff_agendas($one->ones_staffs_id)->get()) && count($one->one_staff_agendas($one->ones_staffs_id)->get())>0)
                                                                    <ul id="todo_wrap">
                                                                    @foreach($one->one_staff_agendas($one->ones_staffs_id)->get() as $agenda)
                                                                        <label class="checkbox {{($agenda->done_status=='y')?'completed':'typo_link text-danger'}}" title="{{($agenda->done_status=='y')?'This point is completed':'This point was found incomplete'}}">
                                                                            <span>{{$agenda->agenda}}</span>
                                                                        </label>
                                                                    @endforeach
                                                                    </ul>
                                                                @endif
                                                            </p>
                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                <b>Documents:</b>
                                                                @if(is_object($one->staff_documents(['oneId'=>$one->id,'one_staffs_id'=>$one->ones_staffs_id,'user'=>$user->id])) && count($one->staff_documents(['oneId'=>$one->id,'one_staffs_id'=>$one->ones_staffs_id,'user'=>$user->id]))>0)
                                                                <ul id="">
                                                                    @php($count=1)
                                                                    @foreach($one->staff_documents(['oneId'=>$one->id,'one_staffs_id'=>$one->ones_staffs_id,'user'=>$user->id]) as $docs)
                                                                        @if($docs->accessibility == 'private' && in_array(loggedin_userSession()->id,explode(',',$docs->accessible_to)))
                                                                            @php($count++)
                                                                            <li class="">
                                                                                <a href="{{ \App\Http\Controllers\OneController::getDocUrl($docs->doc_name,env('AWS_S3_ONE_DOCS')) }}" target="_blank">
                                                                                    <i class="fa-solid fa-download"></i>
                                                                                    <span>{{$docs->doc_name}}</span>
                                                                                </a>
                                                                            </li>
                                                                        @elseif($docs->accessibility == 'public')
                                                                            @php($count++)
                                                                            <li class="">
                                                                                <a href="{{ \App\Http\Controllers\OneController::getDocUrl($docs->doc_name,env('AWS_S3_ONE_DOCS')) }}" target="_blank">
                                                                                    <i class="fa-solid fa-download"></i>
                                                                                    <span>{{$docs->doc_name}}</span>
                                                                                </a>
                                                                            </li>
                                                                        @endif
                                                                    @endforeach

                                                                    @if($count ==1)
                                                                        <div class="section-info">NA</div>
                                                                    @endif
                                                                </ul>
                                                                @else
                                                                    <div class="section-info">NA</div>
                                                                @endif
                                                            </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                    @if($count==0)
                                        <div class="">
                                            <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No recently complated 1:1 found</h4></div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            {{--MODAL COMPONENT--}}
                            <x-one.one :arrOneTypes="$arrOneTypes" :frequencies="$frequencies" :deptUsers="$deptUsers" :user="$user" />
                        </div>
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <x-user.reviews.reviews :user="$user" />
                            <style type="text/css">
                                #review-table-list .multiselect{
                                    width:55%!important;
                                }
                            </style>
                            <div class="col-md-12 p-0">
                                    <div class="table-responsive">
                                        <table id="review-table-list" class="display table " style="font-size: 12px;width:100%" data-urlLoad="{{route('reviews.list_reviews')}}?review_completed=y&reviewee_id={{$user->id}}" data-showReviewUrl='{{ route("reviews.show", ":whoReviewId") }}'>
                                            <thead>
                                                <tr>
                                                    <th>Review Template Title</th>
                                                    <th>Title</th>
                                                    <th>Reviewed For</th>
                                                    <th>Reviewed By</th>
                                                    <th>Reviewed Type</th>
                                                    <th>Review Date</th>
                                                    <th>Action</th>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <select name="reviews_id" class="form-control search_init" id="reviews_id">
                                                            <option value="">-- All --</option>
                                                            @if(isset($review_types))
                                                            @foreach($review_types as $reviewID=>$review)
                                                            <option value="{{$reviewID}}" >{{$review}}</option>
                                                            @endforeach
                                                            @endif
                                                        </select>
                                                    </td>
                                                    <td><input type="text" id="title" name="title" class="search_init"></td>
                                                    <td>
                                                        <select name="reviewee_id" class="form-control filterSelect search_init" id="reviewee_id" style="width:54%;">
                                                            <option value="" >--All--</option>
                                                            @if(isset($deptUsers))
                                                                @foreach($deptUsers as $userGroup=>$userArr)
                                                                <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                                    @foreach($userArr as $userID=>$userName)
                                                                    <option value="{{$userID}}" >{{$userName}}</option>
                                                                    @endforeach
                                                                </optgroup>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="completed_by" class="form-control filterSelect search_init" id="completed_by">
                                                            <option value="" >--All--</option>
                                                            @if(isset($deptUsers))
                                                                @foreach($deptUsers as $userGroup=>$userArr)
                                                                <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                                    @foreach($userArr as $userID=>$userName)
                                                                    <option value="{{$userID}}" >{{$userName}}</option>
                                                                    @endforeach
                                                                </optgroup>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select name="review_type" class="form-control filterSelect search_init" id="review_type">
                                                            <option value="" >--All--</option>
                                                            <option value="y" >One-Off Review</option>
                                                            <option value="n" >Review Cycle</option>
                                                           
                                                        </select>
                                                    </td>
                                                    <td><input type="text" id="review_date" name="review_date" readonly="readonly" autocomplete="off" class="search_init"></td>
                                                    <td>&nbsp;</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            

                        </div>
                        <div class="tab-pane fade" id="tabFeedbacks" role="tabpanel" aria-labelledby="feedback-tab">
                           <div class="loader-bubble loader-bubble-primary m-5"></div>
                        </div>
                        <div class="tab-pane fade" id="goals" role="tabpanel" aria-labelledby="goals-tab">
                            <div class="row">
                                <div class="col-md-12 text-center"><h5 class="text-mute mb-4">Coming Soon</h5></div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="engagements" role="tabpanel" aria-labelledby="engagements-tab">
                            <div class="row">
                                <div class="col-md-12 text-center"><h5 class="text-mute mb-4">Coming Soon</h5></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endcan
    </div>

@endsection
@section('bottom-js')
    <script>
        var base_path = '{{URL::to('/')}}';
    </script>
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script src="{{asset('assets/js/vendor/dropzone.min.js')}}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="{{asset('assets/js/vendor/quill.min.js')}}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.min.js') }}"></script>
    <script src="{{asset('assets/js/vendor/dropzone.min.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="{{asset('assets/js/trainings.js')}}"></script>
    <script src="{{asset('assets/js/one.js')}}"></script>
    <script src="{{asset('assets/js/form.validation.script.js')}}"></script>
    <script src="{{asset('assets/js/reviewCycle.js')}}"></script>
    <script src="{{asset('assets/js/garlic.js')}}"></script>
    <script>

        function getfeedbacks(){
            $.ajax({
                url: "{{ route('feedback.list') }}",
                method: 'POST',
                data:{loginStaff:"{{$user->id}}"},
                 headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                success: function(data) {
                    // Process the fetched data and update the UI
                    $("#tabFeedbacks").html(data);

                },
                error: function(xhr, status, error) {
                    console.error('Error fetching records:', error);
                }
            });
        }
        function loadMyFeedbacks(){
            $.ajax({
                url: "{{ route('feedback.overview') }}",
                method: 'POST',
                data:{loginStaff:"{{$user->id}}"},
                 headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                success: function(data) {
                    // Process the fetched data and update the UI
                    $("#loadMyFeedbacks").html(data);

                },
                error: function(xhr, status, error) {
                    console.error('Error fetching records:', error);
                }
            });
        }

        // Click on tab change URL.
        $(function(){
            var hash = window.location.hash;
            hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            switch(hash){
                case '#tabFeedbacks':getfeedbacks();
                    break;
                case '#overview':loadMyFeedbacks();
                    break;
                default:loadMyFeedbacks();
                    break;
            }
            $('.nav-tabs a').click(function (e) {
              $(this).tab('show');
              var scrollmem = $('body').scrollTop() || $('html').scrollTop();
              window.location.hash = this.hash;
              $('html,body').scrollTop(scrollmem);
              switch(this.hash){
                case '#tabFeedbacks':getfeedbacks();
                    break;
                case '#overview':loadMyFeedbacks();
                    break;
                }
            });
          });
          // Open the currect tab.
        window.onload = function(){

            var url = document.location.toString();
            if (url.match('#')) {
                $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
            }

            //Change hash for page-reload
            $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').on('shown', function (e) {
                window.location.hash = e.target.hash;
            });
        }
        function mark_as_archive(trainingId,action){
            if(confirm('Would you like to '+action+' it?')){
                $.ajax({
                url: '{{ route('training.mark_as_archived') }}',
                method: 'POST',
                data: {
                    trainingID:trainingId
                },
                success: function(response) {
                    // Handle the response from the server
                    console.log(response.message);
                    location.reload();
                },
                error: function(xhr) {
                    // Handle any error that occurred during the request
                    console.log('AJAX request failed');
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            }else{
                return false;
            }
        } 

        function review_as_archive(who_review_cycles_id,action){
            if(confirm('Would you like to '+action+' it?')){
                $.ajax({
                url: '{{ route('reviews.mark_as_archived') }}',
                method: 'POST',
                data: {
                    who_review_cycles_id:who_review_cycles_id
                },
                success: function(response) {
                    // Handle the response from the server
                    console.log(response.message);
                    location.reload();
                },
                error: function(xhr) {
                    // Handle any error that occurred during the request
                    console.log('AJAX request failed');
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            }else{
                return false;
            }
        }
        document.addEventListener("DOMContentLoaded", function() {
            // Show loading spinner
            var loading = document.getElementById("loading");
            var tabMainDiv = document.getElementById("tabMainDiv");
           

            // Hide loading spinner and show content when page is fully loaded
            window.addEventListener("load", function() {
              loading.style.display = "none";
              $("#tabMainDiv").css("opacity", 1);
              document.getElementById("tabMainDiv").classList.remove("hidden");
            });
          });
    </script>
@include('partials.notesWidgetJs')
@endsection