<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 Hero.
                </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-olive">
                        <go-back/>
                        <i class="fas fa-book"></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-success btn-xs" ng-click="addQuestion()"><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-success">
            <div class="card-body p-0">
                <div class="table table-responsive">
                    <table class="table table-bordered table-striped table-sm" id="questionstbl">
                        <thead class="thead-dark">
                        <tr class="">
                            <th class="text-center"><i class="fas fa-question-circle"></i> Question</th>
                            <th class="text-center">Type</th>
                            <th class="text-center"><i class="fas fa-check-circle"></i> Options (Demo)</th>
                            <th class="text-center"><i class="fas fa-sort"></i> Priority</th>
                            <th class="text-center" title="Enable comment for Hero for question"><i class="fas fa-user"></i> H. Comment</th>
                            <th class="text-center" title="Enable reply for Manager for question with comment and internal comment"><i class="fas fa-user-secret"></i> M. Reply</th>
                            <th class="text-center"><i class="fas fa-layer-group"></i> Group</th>
                            <th class="text-center"><i class="fas fa-circle text-success"></i> Status</th>
                            <th class="text-center"><i class="fas fa-cog"></i> Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="q in data.aqData track by $index" class="">
                            <td class="">
                                <div class="mw-300 text-wrap">{{q.aq_id}} {{q.aq_name}}</div>
                            </td>
                            <td class=""><span class="badge bg-primary fs-10 text-wrap" ng-bind-html="getType(q.aq_type)"></span></td>
                            <td class="">
                                <div ng-if="q.aq_type === 'shortanswer' || q.aq_type === 'longanswer' || q.aq_type === 'verylonganswer'">
                                    <textarea class="form-control" rows="1" placeholder="Enter your response..."></textarea>
                                </div>
                                <div ng-if="q.aq_type === 'number' || q.aq_type === 'num_range'">
                                    <input type="number" min="{{q.aq_options.min}}" max="{{q.aq_options.max}}" step="{{q.aq_options.step}}" class="form-control" placeholder="{{q.aq_options.min && q.aq_options.max ? 'Enter between ' + q.aq_options.min + ' to ' + q.aq_options.max : 'Enter any number'}}"/>
                                </div>
                                <div ng-if="q.aq_type === 'tf'">
                                    <div class="form-check">
                                        <input class="form-check-input" name="{{q.aq_type+$index}}" type="radio" id="{{'t'+$index}}"/>
                                        <label class="form-check-label" for="{{'t'+$index}}">True</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" name="{{q.aq_type+$index}}" type="radio" id="{{'f'+$index}}"/>
                                        <label class="form-check-label" for="{{'f'+$index}}">False</label>
                                    </div>
                                </div>
                                <div ng-if="q.aq_type === 'multichoice'"></div>
                                <div ng-if="q.aq_type === 'dropdown' || q.aq_type === 'dropdown_scale'">
                                    <ui-select ng-model="q.fakeOptions" theme="bootstrap" title="Select or search a Options" class="form-control col-sm-12 border-left-0 p-0">
                                        <ui-select-match placeholder="Select or search a Options...">{{$select.selected.value}}</ui-select-match>
                                        <ui-select-choices repeat="g.key as g in q.aq_options | filter: $select.search">
                                            <span ng-bind-html="g.value | highlight: $select.search"></span>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                            </td>
                            <td class="text-center"><span class="mt-1 badge bg-secondary fs-10" ng-bind-html="q.aq_priority"></span></td>
                            <td class="text-center"><span class="mt-1 badge {{q.aq_comment ? 'bg-success' : 'bg-danger'}} fs-10" ng-bind-html="q.aq_comment ? 'Yes' : 'No'"></span></td>
                            <td class="text-center"><span class="mt-1 badge {{q.aq_manager_reply ? 'bg-success' : 'bg-danger'}} fs-10" ng-bind-html="q.aq_manager_reply ? 'Yes' : 'No'"></span></td>
                            <td class="text-center">
                                <span class="mt-1 badge bg-info fs-10 d-block" ng-repeat="q in getGroup(q.aq_ag_id) track by $index">{{q}}</span>
                            </td>
                            <td class="text-center"><span class="mt-1 badge {{q.aq_status ? 'bg-success' : 'bg-danger'}} fs-10" ng-bind-html="q.aq_status ? 'Active' : 'Inactive'"></span></td>
                            <td class="text-center">
                                <i ng-click="cloneQuestion(q,$index)" title="Clone" class="pointer text-info fs-18 fas fa-copy"></i>
                                <i ng-click="addQuestion(q,$index)" title="Edit" class="pointer text-success fs-18 fas fa-edit ml-1 mr-1"></i>
                                <i ng-click="deleteQuestion(q,$index)" title="Remove" class="pointer text-danger fs-18 fas fa-trash"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header bg-dark"><strong><i class="fas fa-plus-circle"></i> Add Assessment's Question</strong></div>
        <div class="modal-body" id="modal-body">
            <div class="form-group">
                <label for="q_question"> <i class="fas fa-question-circle"></i> Question</label>
                <textarea rows="2" ng-model="data.single.aq_name" class="form-control" id="q_question" placeholder="Enter your question here"></textarea>
            </div>

            <div class="row">
                <div class="form-group col-sm-8">
                    <label for="q_group"> <i class="fas fa-layer-group"></i> Group </label>
                    <ui-select multiple id="q_group" ng-model="data.single.aq_ag_id" theme="bootstrap" title="Select or search a Group" class="form-control col-sm-12 p-0 sm">
                        <ui-select-match placeholder="Select or search a Group...">{{$item.ag_name}}</ui-select-match>
                        <ui-select-choices repeat="g.ag_id as g in data.dataOriginal.aqGroup | filter: $select.search">
                            <span ng-bind-html="g.ag_name | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                </div>
                <div class="form-group col-sm-4">
                    <label for="q_type"> <i class="fas fa-caret-down"></i> Type</label>
                    <ui-select id="q_type" ng-model="data.single.aq_type" theme="bootstrap" title="Select or search a Type" class="form-control col-sm-12 border-left-0 p-0">
                        <ui-select-match placeholder="Select or search a Type..."><i class="fas fa-{{$select.selected.i}}"></i> {{$select.selected.value}}</ui-select-match>
                        <ui-select-choices repeat="t.key as t in data.dataOriginal.aqTypes | filter: $select.search">
                            <i class="fas fa-{{t.i}}"></i> <span class="{{t.working ? '' : 'text-danger'}}" ng-bind-html="t.value | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>

            <div ng-if="data.single.aq_type === 'num_range'" class="row mb-2">
                <div class="col-sm-3 p-0"></div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col">
                            <label for="min">Min: </label>
                            <input id="min" type="number" class="form-control" ng-model="data.single.aq_options.min">
                        </div>
                        <div class="col">
                            <label for="max"> Max: </label>
                            <input id="max" type="number" class="form-control" ng-model="data.single.aq_options.max" min="{{data.single.aq_options.min+1}}"/>
                        </div>
                        <div class="col">
                            <label for="step"> Step: </label>
                            <input id="step" type="number" class="form-control" ng-model="data.single.aq_options.step"/>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="data.single.aq_type === 'dropdown' || data.single.aq_type === 'dropdown_scale' ">
                <table class="table table-sm table-borderless table-hover">
                    <thead class="thead-light">
                    <tr class="row">
                        <th class="col-sm-1 text-center">#</th>
                        <th class="col-sm-5 text-center">Key</th>
                        <th class="col-sm-5 text-center">Value</th>
                        <th class="col-sm-1 text-center"><i ng-click="data.single.aq_options.push({value: '', key: ''})" title="Add new option" class="fas fa-plus-square pointer text-primary ml-2"></i></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="row" ng-repeat="o in data.single.aq_options track by $index">
                        <td class="col-sm-1 mt-1">{{$index+1}}.</td>
                        <td class="col-sm-5 p-0"><input ng-readonly="$index === 0" type="text" class="form-control form-control-xs" ng-model="o.key" placeholder="Key"/></td>
                        <td class="col-sm-5 p-0"><input ng-readonly="$index === 0" type="text" class="form-control form-control-xs" ng-model="o.value" placeholder="Value"/></td>
                        <td class="col-sm-1"><i ng-if="$index > 0" ng-click="data.single.aq_options.splice($index, 1)" class="fas fa-trash text-danger pointer mt-1 ml-2"></i></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="row">
                <div class="form-group col-sm-3">
                    <label for="aq_priority"><i class="fas fa-sort"></i> Priority </label>
                    <input id="aq_priority" class="form-control" type="number" placeholder="Priority" ng-model="data.single.aq_priority">
                </div>
                <div class="form-group col-sm-3">
                    <label for="is_required"><i class="fas fa-circle text-success"></i> Is Required? </label>
                    <label class="btn pointer col-sm-12 text-left no-select {{data.single.is_required ? 'btn-success' : 'btn-danger'}}" for="is_required">
                        <input type="checkbox" id="is_required" ng-model="data.single.is_required"> {{data.single.is_required ? 'Required' : 'Not Required'}}
                    </label>
                </div>
                <div class="form-group col-sm-2">
                    <label for="temp_aq_comment"><i class="fas fa-user"></i> Hero's Comment </label>
                    <label class="btn pointer col-sm-12 text-left no-select {{data.single.aq_comment ? 'btn-success' : 'btn-danger'}}" for="aq_comment">
                        <input type="checkbox" id="aq_comment" ng-model="data.single.aq_comment"> {{data.single.aq_comment ? 'Yes' : 'No'}}
                    </label>
                </div>

                <div class="form-group col-sm-2">
                    <label for="q_aq_comment"><i class="fas fa-user-secret"></i> Manager's Reply </label>
                    <label class="btn pointer col-sm-12 text-left no-select {{data.single.aq_manager_reply ? 'btn-success' : 'btn-danger'}}" for="aq_manager_reply">
                        <input type="checkbox" id="aq_manager_reply" ng-model="data.single.aq_manager_reply"> {{data.single.aq_manager_reply ? 'Yes' : 'No'}}
                    </label>
                </div>
                <div class="form-group col-sm-2">
                    <label for="q_aq_comment"><i class="fas fa-circle text-success"></i> Status </label>
                    <label class="btn pointer col-sm-12 text-left no-select {{data.single.aq_status ? 'btn-success' : 'btn-danger'}}" for="aq_status">
                        <input type="checkbox" id="aq_status" ng-model="data.single.aq_status"> {{data.single.aq_status ? 'Active' : 'Inactive'}}
                    </label>
                </div>
                <!--Manager only & rms team only-->
                <div class="form-group col-sm-2">
                    <label for="manager_only"><i class="fas fa-user-secret"></i> Manager Only </label>
                    <label class="btn pointer col-sm-12 text-left no-select {{data.single.manager_only ? 'btn-success' : 'btn-danger'}}" for="manager_only">
                        <input type="checkbox" id="manager_only" ng-model="data.single.manager_only"> {{data.single.manager_only ? 'Active' : 'Inactive'}}
                    </label>
                </div>
                <div class="form-group col-sm-2">
                    <label for="rms_team_only"><i class="fas fa-user"></i> RMS Team Only</label>
                    <label class="btn pointer col-sm-12 text-left no-select {{data.single.rms_team_only ? 'btn-success' : 'btn-danger'}}" for="rms_team_only">
                        <input type="checkbox" id="rms_team_only" ng-model="data.single.rms_team_only"> {{data.single.rms_team_only ? 'Active' : 'Inactive'}}
                    </label>
                </div>
            </div>
        </div>
        <div class="modal-footer p-2">
            <button class="btn btn-xs btn-danger" type="button" ng-click="cancel()"><i class="fas fa-times"></i> Cancel</button>
            <button class="btn btn-xs btn-success" type="button" ng-click="save()" ng-disabled="!data.single.aq_name" ng-readonly="!data.single.aq_name"><i class="fas fa-save"></i> Save</button>
        </div>
    </script>
</div>