
<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-file-alt"></i> {{createButton.heading}}
                    </h1>
                </div>
                <div class="col-sm-6">
                    <div class="btn-group pull-right" role="group">
                        <button type="button" ng-if="opts.tab==='hero'" class="btn {{opts.hideManagerInfo ? 'btn-default' : 'btn-success'}}" ng-click="opts.hideManagerInfo=!opts.hideManagerInfo">
                            <i class="fas {{opts.hideManagerInfo ? 'fa-eye-slash' : 'fa-eye'}}"></i> {{opts.hideManagerInfo ? 'Hide' : 'Show'}} Manager Info
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card card-primary card-outline card-outline-tabs">
                    <table class="table table-bordered table-sm p-0 m-0">
                        <tr>
                            <td><strong>Name:</strong><br>{{empInfo.emp_first_name + ' ' + empInfo.emp_middle_name + ' ' + empInfo.emp_last_name}} <span class="badge badge-danger">{{empInfo.emp_code}}</span></td>
                            <td><strong>DOJ:</strong><br>{{empInfo.emp_doj | date:'dd MMM yyyy'}}</td>
                            <td><strong>Location:</strong><br>{{empInfo.emp_location}}</td>
                            <td><strong>Department:</strong><br>{{empInfo.emp_department}}</td>
                            <td colspan="2" style="text-align: end;"><strong>Align Manager:</strong><br>{{empInfo.lm_fn + ' ' + empInfo.lm_mn + ' ' + empInfo.lm_ln}} <span class="badge badge-danger">{{empInfo.lm_code}}</span></td>
                            <!-- <td colspan="2"><strong>Project Manager:</strong><br>{{empInfo.pm_fn + ' ' + empInfo.pm_mn + ' ' + empInfo.pm_ln}} <span class="badge badge-danger">{{empInfo.pm_code}}</span></td> -->
                        </tr>
                    </table>
                    <div class="card-body p-1" id="assessmentDiaryList">
                        <div class="card bg-light collapsed-card" ng-repeat="schedule in currentAssessmentSchedule" ng-if="schedule.is_overall==true">
                            <div class="card-header p-0 pointer">
                                <div class="row">
                                    <div class="bg-info col p-3 ml-2"> Assessment: <strong> {{schedule.ae_name}}  </strong><span title="Project Manager" ng-if="opts.tab!=='mngr'"> </span> | 
                                        <span style="font-size: 15px;"
                                        ><strong>Score : {{schedule.total}}</strong> </span> 
                                    </div>   
                                    <button type="button" class="btn btn-dark btn-lg float-right" data-widget="collapse"><i class="fas fa-plus"></i></button>      
                                </div>
                            </div>
                            <div class="card-footer p-1 pr-3" ng-if="schedule.open">
                                

                                <button ng-if="schedule.diaries[0].as_status=='active'" ng-click="saveAsPDF(schedule.ae_id,currentAssessmentSchedule)" class="btn btn-warning btn-xs float-right ml-2"> Save assessment as PDF</button>                       
                                <button type="button" ng-click="Save(false,schedule)" class="savebtn btn btn-success btn-xs float-right ml-2" title="Cannot be undone"><i class="fas {{createButton.icon}}"></i> {{createButton.text}}</button>
                                <button type="button" ng-click="Save(true,schedule)" class=" savebtn btn btn-info btn-xs float-right" id="savebtn"><i class="fas {{createButton.icon}}"></i> Save as Draft</button>
                            </div>

                            <div class="card-body pt-0 pb-0 " ng-if="schedule.open">
                                <div class="card card-success">
                                    <div class="card-body p-0">
                                        <div class="col-sm-12 input-group p-3">
                                            <p><strong>Assessment Description :</strong> {{schedule.description}}</p>
                                        </div>
                                        <div ng-repeat="d in schedule.diaries | orderBy:'sequence'" class="mt-1" ng-if="d.aq_id!=90 && d.aq_id!=91 && d.aq_id!=92 && d.aq_id!=93">
                                            <label class="{{ (d.aq_type=='section') ? 'col-sm-12 pad-1 bg-primary' : 'col-sm-12 alert alert-dark p-1' }} "><i class="fas fa-chevron-right {{ (d.aq_type=='section') ? 'd-none' : '' }} "></i> {{ (d.aq_type=='section') ? '' : $index+1 + '.' }} {{ d.aq_name}}</label>
                                            <div class="col-sm-12 input-group">
                                                <div class="col-sm-1" ng-if="d.aq_type != 'section'"><label class="badge badge-success pointer alert p-2">{{d.rms_team_only?'HR':d.manager_only?'Manager':'You'}}: </label></div>
                                                <div class="col-sm-11" ng-if="!d.rms_team_only && !d.manager_only">
                                                    <div class="row">
                                                        <div class="col-sm-3" ng-if="d.aq_type === 'dropdown' || d.aq_type === 'dropdown_scale'"><select ng-model="d.as_answer" ng-options="ag.key as (ag.value) for ag in d.aq_options" ng-disabled="opts.tab!=='hero'||d.as_manager_status==='active'||d.as_status==='active'" tabindex="{{($parent.$index+1)+($index+1)}}" class="form-control custom-select {{d.is_required?'required':''}}"></select></div>
                                                        <div class="{{d.aq_comment ? 'col-sm-3' : 'col-sm-7'}}" ng-if="d.aq_type === 'shortanswer' || d.aq_type === 'longanswer' || d.aq_type === 'verylonganswer'"><textarea ng-disabled="d.as_status==='active'" ng-model="d.as_answer" class="form-control {{d.is_required?'required':''}}" rows="2" placeholder="Enter your response..."></textarea></div>
                                                        <div class="col-sm-3" ng-if="d.aq_type === 'number' || d.aq_type === 'num_range'"><input ng-model="d.as_answer" type="number" min="{{d.aq_options.min}}" ng-disabled="d.as_status==='active'" max="{{d.aq_options.max}}" step="{{d.aq_options.step}}" class="form-control {{d.is_required?'required':''}}" value="{{d.as_answer}}" placeholder="{{d.aq_options.min && d.aq_options.max ? 'Enter between ' + d.aq_options.min + ' to ' + d.aq_options.max : 'Enter any number'}}"/></div>
                                                        <div ng-if="d.aq_type === 'tf'" class="{{d.is_required?'required':''}}"> 
                                                            <div class="form-check">
                                                                <input class="form-check-input" name="{{d.aq_type+$index}}" ng-disabled="d.as_status==='active'" type="radio" id="{{'t'+$index}}" value="true" ng-model="d.as_answer" ng-checked="d.as_answer"/>
                                                                <label class="form-check-label" for="{{'t'+$index}}">True</label>
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input" name="{{d.aq_type+$index}}" ng-disabled="d.as_status==='active'" type="radio" id="{{'f'+$index}}" value="false" ng-model="d.as_answer" ng-checked="!d.as_answer"/>
                                                                <label class="form-check-label" for="{{'f'+$index}}">False</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4" ng-if="d.aq_manager_reply && d.aq_type != 'section'"><textarea ng-disabled="opts.tab!=='hero'||d.as_manager_status==='active'||d.as_status==='active'" tabindex="{{($parent.$index+1)+($index+2)}}" ng-model="d.as_comments" rows="2" class="form-control" placeholder="Enter  your comment"></textarea></div>
                                                        <div class="col-sm-4"></div>
                                                    </div>
                                                </div>
                                                <!--Show only to manager or rms team only-->
                                                <div class="col-sm-11" ng-if="d.rms_team_only || d.manager_only">
                                                    <div class="row">
                                                        <div class="col-sm-3" ng-if="d.aq_type === 'dropdown' || d.aq_type === 'dropdown_scale'"><select ng-model="d.as_manager_answer" ng-options="ag.key as (ag.value) for ag in d.aq_options" class="form-control custom-select" ng-disabled="true" readonly></select></div>
                                                        <div class="{{d.aq_manager_reply ? 'col-sm-3' : 'col-sm-7'}}" ng-if="d.aq_type === 'shortanswer' || d.aq_type === 'longanswer' || d.aq_type === 'verylonganswer'"><textarea class="form-control" rows="2" disabled readonly>{{d.as_manager_answer}}</textarea></div>
                                                        <div class="col-sm-3" ng-if="d.aq_type === 'number' || d.aq_type === 'num_range'"><input type="number" class="form-control" value="{{d.as_manager_answer}}" disabled readonly/></div>
                                                        <div ng-if="d.aq_type === 'tf'">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="radio" ng-checked="d.as_manager_answer" disabled readonly/>
                                                                <label class="form-check-label" for="{{'t'+$index}}">True</label>
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="radio" ng-checked="!d.as_manager_answer" disabled readonly/>
                                                                <label class="form-check-label" for="{{'f'+$index}}">False</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4" ng-if="d.aq_manager_reply && d.aq_type != 'section'"><textarea rows="2" readonly disabled="true" readonly class="form-control">{{d.as_manager_comments}}</textarea></div>
                                                        <div class="col-sm-4"></div>
                                                    </div>
                                                </div>                                                
                                            </div>

                                            <div class="col-sm-12 input-group" ng-if="opts.hideManagerInfo && d.aq_manager_reply && !d.manager_only">
                                                <div class="col-sm-1"><label class="badge badge-info pointer alert p-2">Manager:</label></div>
                                                <div class="col-sm-3" ng-if="d.aq_type === 'dropdown' || d.aq_type === 'dropdown_scale'"><select ng-disabled="opts.tab!=='mngr'" class="form-control custom-select {{d.is_required?'required':''}}" ng-model="d.as_manager_answer" ng-options="ag.key as (ag.value) for ag in d.aq_options"></select></div>
                                                <div class="col-sm-3" ng-if="d.aq_type === 'shortanswer' || d.aq_type === 'longanswer' || d.aq_type === 'verylonganswer'"><textarea ng-disabled="opts.tab!=='mngr'" ng-model="d.as_manager_answer" class="form-control {{d.is_required?'required':''}}" rows="2" placeholder="Enter your response..."></textarea></div>
                                                <div class="col-sm-3" ng-if="d.aq_type === 'number' || d.aq_type === 'num_range'"><input ng-disabled="opts.tab!=='mngr'" ng-model="d.as_manager_answer" type="number" min="{{d.aq_options.min}}" max="{{d.aq_options.max}}" step="{{d.aq_options.step}}" class="form-control {{d.is_required?'required':''}}" placeholder="{{d.aq_options.min && d.aq_options.max ? 'Enter between ' + d.aq_options.min + ' to ' + d.aq_options.max : 'Enter any number'}}"/></div>
                                                <div ng-if="d.aq_type === 'tf'">
                                                    <div class="form-check">
                                                        <input ng-disabled="opts.tab!=='mngr'" class="form-check-input" name="{{d.aq_type+$index}}" type="radio" id="{{'t'+$index}}" value="true" ng-model="d.as_manager_answer" ng-checked="d.as_manager_answer"/>
                                                        <label class="form-check-label" for="{{'t'+$index}}">True</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input ng-disabled="opts.tab!=='mngr'" class="form-check-input" name="{{d.aq_type+$index}}" type="radio" id="{{'f'+$index}}" value="false" ng-model="d.as_manager_answer" ng-checked="!d.as_manager_answer"/>
                                                        <label class="form-check-label" for="{{'f'+$index}}">False</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4" ng-if="d.aq_manager_reply"><textarea ng-readonly="opts.tab!=='mngr'" ng-model="d.as_manager_comments" rows="2" class="form-control" placeholder="Enter the manager comment"></textarea></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--one-to-one meeting preview to heroes-->
                            <div class="card-body mt-1" ng-repeat="onetoOne in schedule.one_to_one">
                                <div class="card card-success p-2">                            
                                    <div class="card-body">
                                        <div class="card-body p-0">
                                            <div class="mt-1" >                                                
                                                <div class="text-olive">
                                                    <h5>One-to-One Meeting Detail</h5>
                                                </div>
                                                <div class="form-input">                                                        
                                                    <label class="form-label">Is one-to-one meeting done?<label>
                                                        &nbsp;{{onetoOne.one_to_one | capitalize}}
                                                </div>
                                            
                                                <div class="form-input">
                                                    <label class="form-label">Date </label>
                                                    {{ onetoOne.date | datetz:'DD-MMM-YYYY' }}
                                                </div>
                                                <div class="form-textarea">
                                                    <label class="form-label">Meeting notes</label>
                                                    {{ onetoOne.notes }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>                        

                            <div class="card-footer p-1 pr-3" ng-if="schedule.open">
                                <button type="button" ng-click="Save(false,schedule)" class="savebtn btn btn-success btn-xs float-right ml-2" title="Cannot be undone"><i class="fas {{createButton.icon}}"></i> {{createButton.text}}</button>
                                <button type="button" ng-click="Save(true,schedule)" class=" savebtn btn btn-info btn-xs float-right" id="savebtn"><i class="fas {{createButton.icon}}"></i> Save as Draft</button>
                            </div>

                          


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

                      <!-- Goals Start -->
                      <div class="card-body p-1">
                        <div class="card card-success p-2">                            
                            <div class="card-body">
                                <div class="card-body p-0">
                                    <div class="mt-1" >                                    
                                        <div class="text-olive"><h5>Hero Goals</h5></div>
                                        <div class="table-responsive">
                                            <table id="heroList" class="table table-bordered table-striped table-sm">
                                                <thead>
                                                <tr>
                                                    <th>Goal Title</th>
                                                    <th>Stage</th>
                                                    <th>Target Date</th>
                                                    <th>Complete Date</th>
                                                    <th>Description</th>
                                                    <th>Created By</th>
                                                    <th>Is Approved</th>
                                                    <!-- <th>Action</th> -->
                                                </tr>
                                                </thead>
                                                    <tbody>
                                                        <tr ng-repeat="goal in heroGoals">
                                                            <td>{{goal.goal_name}}</td>
                                                            <td><span class="badge {{ goal.stage=='completed'? 'badge-success' : goal.stage=='in-progress' ? 'badge-info' : 'badge-danger' }}">{{goal.stage | capitalize}}</span></td>
                                                            <td>{{ goal.target_date | datetz:'DD-MM-YYYY'}}</td>
                                                            <td>{{ goal.completed_date | date:'d-MM-y' }}</td>
                                                            <td>{{goal.description}}</td>
                                                            <td>{{goal.emp_first_name + ' ' + goal.emp_middle_name + ' ' + goal.emp_last_name}}</td>
                                                            <td><span class="badge {{goal.is_approved?'badge-success':'badge-danger'}}">{{goal.is_approved ? 'Yes' : 'No'}}</span></td>
                                                            <!-- <td><a href="/goal-dashboard/view/{{goal.hero_id}}/" target="_blank">View Details</a></td> -->
                                                        </tr>
                                                    </tbody>
                                            </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End goals -->
                    
                </div>
            </div>
        </div>
    </section>
</div>
<style>
    .pad-1{padding:10px;font-size:15px;font-weight: bold;}
    .required {border: 1px solid red;}
</style>

<!-- 
<div class="modal fade" id="modal-pop-up">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p><i class="fas fa-info-circle"> </i> Are you sure you have filled all assessment questions ?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Let Me Check</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div> -->

<div id="print" class="canvas_div_pdf"></div>
