<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 pull-right" role="group">
                        <button type="button" class="btn btn-info" ng-click="addQuestion()"><i class="fas fa-plus-square"></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-sm">
                        <thead class="thead-dark">
                        <tr class="row">
                            <th class="col-sm-3 text-center">Question</th>
                            <th class="col-sm-2 text-center">Type</th>
                            <th class="col-sm-5 text-center">Options</th>
                            <th class="col-sm-2 text-center">More..</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="q in data.aqData" class="row">
                            <td class="col-sm-3"><textarea ng-model="q.aq_name" rows="5" class="form-control"></textarea></td>
                            <td class="col-sm-2">
                                <ui-select ng-model="q.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.aqTypes | filter: $select.search">
                                        <i class="fas fa-{{t.i}}"></i> <span ng-bind-html="t.value | highlight: $select.search"></span>
                                    </ui-select-choices>
                                </ui-select>
                            </td>
                            <td class="col-sm-5 p-0">
                                <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 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 q.aq_options">
                                        <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" class="fas fa-trash text-danger pointer mt-1 ml-2"></i></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td class="col-sm-2" style="padding-right:0!important">
                                <div class="input-group input-group-sm">
                                    <input class="col-sm-8 form-control form-control-sm" type="number" placeholder="Priority" ng-model="q.aq_priority">
                                    <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm"> Priority </span></div>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <input type="checkbox" id="{{'hc_'+$index}}" ng-model="q.aq_comment">
                                        </div>
                                    </div>
                                    <label class="form-control pointer no-select {{q.aq_comment ? 'bg-success' : 'bg-danger'}}" for="{{'hc_'+$index}}">Hero's Comment</label>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><input type="checkbox" id="{{'mr_'+$index}}" ng-model="q.aq_manager_reply"/></div>
                                    </div>
                                    <label class="form-control pointer no-select {{q.aq_manager_reply ? 'bg-success' : 'bg-danger'}}" for="{{'mr_'+$index}}">Manager's Reply</label>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><input type="checkbox" id="{{'s_'+$index}}" ng-model="q.aq_status"/></div>
                                    </div>
                                    <label class="form-control pointer no-select {{q.aq_status ? 'bg-success' : 'bg-danger'}}" for="{{'s_'+$index}}">{{q.aq_status ? 'Active' : 'Inactive'}}</label>
                                </div>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text"><i class="fas fa-users"></i></span>
                                    <ui-select ng-model="q.aq_ag_id" theme="bootstrap" title="Select or search a Group" class="form-control col-sm-12 border-left-0 p-0">
                                        <ui-select-match placeholder="Select or search a Group...">{{$select.selected.ag_name}}</ui-select-match>
                                        <ui-select-choices repeat="g.ag_id as g in data.aqGroup | filter: $select.search">
                                            <span ng-bind-html="g.ag_name | highlight: $select.search"></span>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="modal-view_diary">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>You are being redirected to View Diary Page!</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary btn-xs" data-dismiss="modal" ng-click="goToSelf('myDiaryList')">Proceed</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-cancel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Please Note: No data would be saved and you will be redirected to View Diary Page.</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary btn-xs" data-dismiss="modal" ng-click="goToSelf('myDiaryList')">Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>
