<div class="content-wrapper" ng-if="gUser.emp_first_name !== 'Admin'">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 offset-sm-1 offset-md-2 offset-lg-3 mt-5">
                <div class="alert alert-danger alert-dismissible">
                    <h5><i class="icon fas fa-ban"></i> Alert!</h5>
                    Please login as Admin.
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content-wrapper" ng-if="gUser.emp_first_name === 'Admin'">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-primary">
                        <go-back/>
                        <i class="fas fa-tachometer-alt"></i> {{page.title}}
                    </h1>
                </div>
                <div class="col-sm-6">
                    <div class="btn-group btn-group-sm pull-right" role="group">
                        <button type="button" class="btn btn-primary btn-xs" ng-click="createSchedule()"><i class="fas fa-plus-circle"></i> Add</button>
                        <!--<button type="button" class="btn btn-success" ng-click="Save()"><i class="fas fa-save"></i> Save Assessment Questions</button>-->
                        <!--<button type="button" class="btn btn-danger"><i class="fas fa-times"></i> Cancel</button>-->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid">
        <div class="card card-primary card-outline">
            <div class="card-body p-0">
                <div class="table table-responsive">
                    <table id="assessmentSchedule" class="table table-bordered table-striped table-sm">
                        <thead class="bg-primary">
                        <tr>
<th><i class="fas fa-stopwatch"></i> Assessment ID</th>
                            <th><i class="fas fa-stopwatch"></i> Name</th>
                            <th><i class="fas fa-list-alt"></i> From</th>
                            <th><i class="fas fa-user"></i> To</th>
                            <th><i class="fas fa-lock"></i> Hero's Lock <small>(in Days)</small></th>
                            <th><i class="fas fa-lock"></i> Manager's Lock <small>(in Days)</small></th>
                            <th><i class="fas fa-calendar"></i> Active from</th>
                            <th><i class="fas fa-circle text-success"></i> Status</th>
                            <th><i class="fas fa-cog"></i> Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="d in data track by $index">
<td>{{d.ae_id}}</td>
                            <td><span class="text-wrap" title="{{d.ae_sys_name}}"><strong>{{d.ae_name}}</strong></span></td>
                            <td class="text-center"><span class="text-wrap badge badge-primary fs-10">{{d.ae_from | datetz:'DD MMM YYYY'}}</span></td>
                            <td class="text-center"><span class="text-wrap badge badge-primary fs-10">{{d.ae_to | datetz:'DD MMM YYYY'}}</span></td>
                            <td class="text-center"><span class="text-wrap badge badge-primary fs-10">{{d.ae_hero_lock}}</span></td>
                            <td class="text-center"><span class="text-wrap badge badge-primary fs-10">{{d.ae_manager_lock}}</span></td>
                            <td class="text-center"><span class="text-wrap badge badge-success fs-10">{{d.ae_active_from | datetz:'DD MMM YYYY'}}</span></td>
                            <td class="text-center"><span class="text-wrap badge fs-10 {{d.ae_status==='active' ? 'btn-success' : d.ae_status==='inactive' ? 'btn-danger' : 'btn-warning'}}">
                                <i class="far {{d.ae_status==='active' ? 'fa-check-circle' : d.ae_status==='inactive' ? 'fa-times-circle' : 'fa-stop-circle'}}"></i> {{d.ae_status | titlecase}}</span></td>
                            <td class="text-center">
                                <i ng-click="cloneSchdule(d,$index)" title="Create copy of {{d.ae_name}}" class="pointer text-info fs-18 fas fa-copy"></i>
                                <i ng-click="createSchedule(d,$index)" title="Edit with user modification" class="pointer text-success fs-18 fas fa-edit ml-1 mr-1"></i>
                                <i ng-click="addQuestions(d,$index)" title="Add/Remove Question" class="pointer text-purple fs-18 fas fa-question-circle ml-1 mr-1"></i>
                                <i ng-click="deleteSchedule(d,$index)" title="Safely Remove" class="pointer text-danger fs-18 fas fa-trash"></i>
                                <i ng-click="sendMail(d,$index)" title="Send Mail" class="pointer text-primary fs-18 fas fa-envelope ml-1 mr-1"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <script type="text/ng-template" id="modelAssessmentSchedule.html">
        <div class="modal-header bg-dark"><strong><i class="{{mInfo.head_icon}}"></i> {{data.opts !== 'question' ? mInfo.head_title : data.single.ae_name}} </strong> <button class="btn btn-danger btn-xs" type="button" ng-click="cancel()"><i class="fas fa-times"></i></button></div>
        <div class="modal-body {{data.opts !== 'question' ? '' : 'p-0'}}" id="modal-body">
            <div class="row">
                <div ng-if="data.opts!=='question'" class="form-group col-sm-3">
                    <label for="ae_name"><i class="fas fa-text-width"></i> Name: </label>
                    <input id="ae_name" class="form-control" type="text" placeholder="Enter your name" ng-model="data.single.ae_name">
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-3">
                    <label for="ae_name"><i class="fas fa-text-width"></i> System Name: </label>
                    <span class="form-control-plaintext">{{data.single.ae_sys_name}}</span>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-3">
                    <label for="is_multi_mngr"><i class="fas fa-lock"></i> Is multi-manager? </label>
                    <input  ng-model="data.single.is_multi_mngr" class="form-control" type="checkbox" 
                    ng-checked="data.single.is_multi_mngr">
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-3">
                    <label for="overall_assessment"><i class="fas fa-lock"></i> Is overall asessment? </label>
                    <input  ng-model="data.single.is_overall" class="form-control" type="checkbox" 
                    ng-checked="data.single.is_overall">
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="ae_from"><i class="fas fa-calendar"></i> From: </label>
                    <input id="ae_from" type=text date-picker
                           placeholder='Date (DD-MM-YYYY)'
                           dateformat='dd-mm-yy'
                           maxlength="10"
                           ng-required='true'
                           default="{{data.single.ae_from}}"
                           class='form-control'
                           ng-model='data.single.ae_from'/>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="ae_to"><i class="fas fa-calendar"></i> To: </label>
                    <input id="ae_to" type=text date-picker
                           placeholder='Date (DD-MM-YYYY)'
                           dateformat='dd-mm-yy'
                           maxlength="10"
                           ng-required='true'
                           default="{{data.single.ae_to}}"
                           class='form-control'
                           ng-model='data.single.ae_to'/>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="ae_active_from"><i class="fas fa-calendar"></i> Active from: </label>
                    <input id="ae_active_from" type=text date-picker
                           placeholder='Date (DD-MM-YYYY)'
                           dateformat='dd-mm-yy'
                           maxlength="10"
                           ng-required='true'
                           default="{{data.single.ae_active_from}}"
                           class='form-control'
                           ng-model='data.single.ae_active_from'/>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="ae_hero_lock"><i class="fas fa-lock"></i> Hero Lock: </label>
                    <input id="ae_hero_lock" class="form-control" type="number" min="1" max="30" placeholder="Select date" ng-model="data.single.ae_hero_lock">
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="ae_manager_lock"><i class="fas fa-lock"></i> Manager Lock: </label>
                    <input id="ae_manager_lock" class="form-control" type="number" min="1" max="30" placeholder="Select date" ng-model="data.single.ae_manager_lock">
                </div>
               
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="ae_status"><i class="fas fa-circle text-success"></i> Status </label>
                    <div class="btn-group col-sm-12 p-0">
                        <button id="ae_status" type="button" class="btn {{data.single.ae_status==='active' ? 'btn-success' : data.single.ae_status==='inactive' ? 'btn-danger' : 'btn-warning'}}">
                            <i class="far {{data.single.ae_status==='active' ? 'fa-check-circle' : data.single.ae_status==='inactive' ? 'fa-times-circle' : 'fa-stop-circle'}}"></i> {{data.single.ae_status | titlecase}}
                        </button>
                        <button type="button" class="btn dropdown-toggle dropdown-icon {{data.single.ae_status==='active' ? 'btn-success' : data.single.ae_status==='inactive' ? 'btn-danger' : 'btn-warning'}}"
                                data-toggle="dropdown" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-menu p-0" role="menu" style="">
                            <button class="dropdown-item bg-warning pt-2 pb-2" ng-click="data.single.ae_status='draft'"><i class="far fa-stop-circle"></i> Draft</button>
                            <button class="dropdown-item bg-success pt-2 pb-2" ng-click="data.single.ae_status='active'"><i class="far fa-check-circle"></i> Active</button>
                            <button class="dropdown-item bg-danger pt-2 pb-2" ng-click="data.single.ae_status='inactive'"><i class="far fa-times-circle"></i> Inactive</button>
                        </div>
                    </div>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-2">
                    <label for="is_show_score"><i class="fas fa-lock"></i> Is show score ? </label>
                    <input  ng-model="data.single.is_show_score" class="form-control" type="checkbox" 
                    ng-checked="data.single.is_show_score"/>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-10">
                    <label for="total_score"> Total Score
                        <input type="number" ng-model="data.single.total_score" id="total_score" name="total_score" ng-value="data.single.total_score" class="form-control ng-pristine ng-valid ng-not-empty ng-touched">
                    </label>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-12 {{data.single.is_overall ? 'd-none': ''}} ">
                    <ui-select multiple ng-model="data.single.users" theme="bootstrap" class="form-control col-sm-12 border-left-0 p-0" close-on-select="false">
                        <ui-select-match placeholder="Select Heroes...">
                            <small title="{{$item.emp_email+' '+$item.emp_code}}" ng-bind-html="$item.emp_first_name+' '+(!$item.emp_middle_name || $item.emp_middle_name === 'null' ? '' : $item.emp_middle_name)+' '+$item.emp_last_name"></small>
                        </ui-select-match>
                        <ui-select-choices repeat="g.employeeid as g in _empAll | filter: $select.search | orderBy:'emp_first_name'">
                            <div>
                                <strong ng-bind-html="g.emp_first_name+' '+(!g.emp_middle_name || g.emp_middle_name === 'null' ? '' : g.emp_middle_name)+' '+g.emp_last_name  | highlight: $select.search"></strong>
                                <span ng-bind-html="' ('+ g.emp_code+')'  | highlight: $select.search"></span>
                                &lt;<span ng-bind-html="''+ g.emp_email+''  | highlight: $select.search"></span>&gt;
                            </div>
                        </ui-select-choices>
                    </ui-select>
                </div>
                <div ng-if="data.opts!=='question'" class="form-group col-sm-12">
                    <textarea class="form-control ng-pristine ng-valid ng-not-empty ng-touched" id="data.single.description" ng-model="data.single.description" placeholder="Description">
                        {{data.single.description}}
                    </textarea>
                </div>
                <div ng-if="data.opts==='question'" class="form-group col-sm-12">
                    <table class="table table-bordered table-bordered table-condensed table-sm" ng-if="data.questions.length > 0">
                        <tr>
                            <th>#</th>
                            <th>Question</th>
                            <th>Sequence</th>
                            <th>Action</th>
                        </tr>
                        <tr ng-repeat="q in data.questions | orderBy : 'sequence'  track by $index" class="{{q.aq_type=='section'?'text-bold':''}}" ng-init="rowIndex=$index">
                            <td class="">{{q.aq_id}}</td>
                            <td class="">{{q.aq_name}}</td>
                            <!--<td class=""><input type="text" id="seq" ng-if="q.aq_type!='section'"></td>-->
                            <td class="" >
							<select name="sequencesave{{rowIndex}}" id="sequencesave{{rowIndex}}">
							<option ng-repeat="r in data.questions track by $index" ng-init="colIndex=$index" value="{{colIndex+1}}" ng-selected="colIndex+1 == rowIndex+1">{{colIndex+1}}</option>
							</select>

							</td>
                            <td class="text-center"><span class="label label-danger pointer" ng-click="removeQues(q,$index)"><i class="fas fa-times text-danger"></i></span></td>
                        </tr>
                    </table>
                    <div class="input-group">
                        <ui-select ng-model="data.activeQue" theme="bootstrap" class="form-control col-sm-12 border-left-0 p-0" on-select="addQues()" close-on-select="false">
                            <ui-select-match placeholder="Select Questions..."><span ng-bind-html="$select.selected.aq_id +'. '+ $select.selected.aq_name"></span></ui-select-match>
                            <ui-select-choices repeat="q in data.quesList | question_show | filter: $select.search | orderBy:'aq_id'">{{q.aq_id}}. {{q.aq_name}}</ui-select-choices>
                        </ui-select>
                        <span class="input-group-addon" id="basic-addon2" ng-if="false"><button ng-click="addQues()" class="btn btn-success"><i class="fa fa-plus"></i> Add </button></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer p-2">
                <button class="btn btn-danger btn-xs" type="button" ng-click="cancel()"><i class="fas fa-times"></i> Cancel</button>
                <button class="btn btn-success btn-xs" type="button" ng-click="save()" ng-disabled="!data.single.ae_name" ng-readonly="!data.single.aq_name"><i class="{{mInfo.btn_icon}}"></i> {{mInfo.btn_title}}</button>
            </div>
        </div>
    </script>


    <!-- By Syed Mohd Bilal Rais -->
    <!-- Assessment Mails -->
    <script type="text/ng-template" id="modelAssessmentScheduleMails.html">
        <div class="modal-header bg-dark"><strong><i class="{{mInfo.head_icon}}"></i> {{ mInfo.head_title }} | {{data.single.ae_name}} </strong></div>
        <div class="modal-body" id="modal-body">
            <div class="row">
                <div class="form-group col-sm-12">
                    <table class="table table-bordered table-bordered table-condensed table-sm">
                        <tr>
                            <th><input ng-click="toggleAll()" type="checkbox" ng-model="check"> All</th>
                            <th><label for="mailto">Hero Name</label></th>
                            <th><label for="mailto">Last Mail Send</label></th>
                        </tr>
                        <tr ng-if="data.sendmail.length == 0">
                            <td colspan="3">This assessment is not assigned to any hero.</td>
                        </tr>
                        <tr ng-repeat="hero in data.sendmail" ng-if="hero.emp_id != null">
                            <td>
                                <input type="checkbox" ng-model="hero.check" ng-checked="check">
                            </td>
                            <td>{{ (hero.emp_middle_name != null) ? hero.emp_first_name + ' ' + hero.emp_middle_name + ' ' + hero.emp_last_name : hero.emp_first_name + ' ' + hero.emp_last_name}}</td>
                            <td>{{ (hero.id[0].mail=='send') ? hero.timestamp : hero.mail2  }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer p-2">
                <button class="btn btn-danger btn-xs" type="button" ng-click="cancel()"><i class="fas fa-times"></i> Cancel</button>
                <button class="btn btn-success btn-xs" type="button" ng-click="send()"><i class="{{mInfo.btn_icon}}"></i> {{mInfo.btn_title}}</button>
            </div>
        </div>
    </script>
</div>