<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-warning">
                        <go-back/>
                        <i class="fas fa-users "></i> {{btn.text}}
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a ng-href="{{baseurl}}/dashboard">Home</a></li>
                        <li class="breadcrumb-item active">{{btn.text}}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <style>
        tr {
            display: block;
        }
        .break {
            float: left !important;
            line-height: 22px !important;
            width: 100% !important;
        }
        .td_width{
            width: 15.3% !important;
        }
        th{
            width: 16.5% !important;
        }
        .td_width2{
            width: 0% !important;
        }
        .ui-datepicker-calendar tr{
            display: table-row !important;
        }
        .tabs{
            padding: 10px;
            border: 1px solid;
            box-shadow: 2px 2px 2px;
            margin-left: 32px;
        }
    </style>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline">
                    <div class="card-body">                        
                        <div class="row text-center">
                            <div class="col tabs {{ stage.title=='Hours Completed' ? 'btn-success' : stage.title=='In Progress' ? 'btn-primary' : stage.title=='Completed' ? 'btn-success' : stage.title=='Not Started' ? 'btn-warning' : stage.title == 'Over Due' ? 'btn-danger' : '' }} " ng-repeat="stage in goalStageCounter">
                                <i ng-if="stage.title=='On Hold'" class="fa fa-exclamation fa-2x"></i>
                                <i ng-if="stage.title=='In Progress'" class="fa fa-spinner fa-2x"></i>
                                <i ng-if="stage.title=='Completed'" class="fa fa-check fa-2x"></i>
                                <i ng-if="stage.title=='Not Started'" class="fa fa-list fa-2x"></i>
                                <i ng-if="stage.title=='Hours Completed'" class="fa fa-check-circle fa-2x"></i>
                                <i ng-if="stage.title=='Over Due'" class="fa fa-clock fa-2x"></i>
                                <h2>{{stage.count ? stage.count : 0}}</h2>
                                <h4>{{stage.title}}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12" ng-repeat="templateList in templateList track by $index" ng-init="parentIndex=$index">
                <div class="card card-warning card-outline collapsed-card">
                    <div class="card-header border-transparent">
                        <h3 class="card-title">{{templateList.name}} <i class="fa fa-clock float-right" style="margin-right: 50px;;"> {{templateList.totalMinutes}} Hours</i></h3>
                        <div class="card-tools">
                            <div class="btn-group btn-group-sm mt--5">
                                <button type="button" class="btn btn-dark" data-widget="collapse"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">                        
                        <div class="row">

                            <div class="col-12 col-md-12 col-lg-12">
                                <!-- <button type="button" ng-click="cancel()" class="btn btn-default float-left" title="Cancel"><i class="fas fa-arrow-left"></i> Back</button><br> -->
                                <h4>{{templateList.name}} <i class="fa fa-clock float-right"> {{templateList.totalMinutes}} Hours</i></h4>
                                
                                <button type="button" ng-click="saveOrUpdateGoals($index,parentIndex)" class="btn btn-primary float-right" title="Save all goals"><i class="fas fa-save"></i> Update goals</button>

                                <!-- <a class="float-right" href="/goal-dashboard/view/{{gUser.id}}/{{heroObj.emp_lm}}"><button type="button" class="btn btn-warning" title="Create New Goal">Create New Goal</button></a> -->
                                <div class="table-responsive">
                                    <table id="masterList" class="table">
                                        <thead>
                                        <tr>
                                            <th>Goal Title</th> 
                                            <th>Target Date</th>
                                            <th>Stage</th>
                                            <!-- <th>Is Completed?</th> -->
                                            <th>Is Approved?</th>                                            
                                            <th>CreatedBy</th>                                           
                                            <th>Actions</th>
                                            <th>Required Time</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="item in templateList.goalList track by $index" ng-if="!item.is_deleted" class="{{item.isExpire ? 'btn-danger' : ''}}">
                                            <td class="td_width">
                                                <div style="font-size: 14px;">
                                                    <strong>{{item.goal_name}}</strong>
                                                </div>
                                                
                                                <!-- <div class="form-group">                                                    
                                                    <input ng-model="item.goal_name" class="form-control" type="text" ng-required="true" placeholder="Goal name" ng-disabled="item.isView"/>
                                                </div> -->
                                            </td>
                                           
                                            <td class="td_width">
                                                {{ item.target_date | datetz:'DD-MMM-YYYY' }}
                                                <!-- <div class="form-group">
                                                    <div>
                                                        <input type="text" date-picker
                                                            placeholder="Date (DD-MM-YYYY)"
                                                            dateformat="dd-mm-yy" ng-disabled="item.isView"
                                                            default="item.target_date"
                                                            value="item.target_date"
                                                            class="form-control"
                                                            ng-model="item.target_date"/>
                                                    </div> 
                                                </div>                                                              -->
                                            </td>
                                            <td class="td_width">
                                                <div class="form-group">
                                                    <select class="form-control custom-select" value="item.stage" ng-model="item.stage" ng-disabled="item.isView"
                                                    ng-options="opt.value as opt.label for opt in stageOptions"></select>
                                                </div>
                                            </td>
                                            <!-- <td class="text-center td_width">
                                                <input type="checkbox" ng-model="item.is_completed" ng-checked="item.is_completed" ng-disabled="item.isView"/>
                                                <span class="badge {{item.is_completed?'badge-success':'badge-danger'}}">&nbsp;{{item.is_completed?'Yes':'No'}}&nbsp;</span>
                                            </td> -->
                                            <td class="text-center td_width">
                                                <span class="badge {{item.is_approved?'badge-success':'badge-danger'}}">&nbsp;{{item.is_approved?'Yes':'No'}}&nbsp;</span>
                                                <br/><span ng-if="item.isView && item.approved_date!=null">
                                                    {{item.approved_date | date:'longDate'}}
                                                </span>
                                            </td>
                                            <td class="td_width">
                                                <span>{{item.emp_first_name+' '+item.emp_last_name+' ('+item.emp_code+')'}}</span>,<br/>
                                                <span>{{item.created_date | date:'longDate'}}</span>
                                            </td>
                                            {{ if(item.is_approved==true) }}
                                            <td class="td_width2">  
                                            {{ if(item.is_approved!=true) }}
                                            <td class="td_width">                           
                                                <button type="button" ng-if="item.isView" ng-click="editRow($index,parentIndex)" class="btn btn-success btn-xs {{ item.is_completed ? 'd-none' : '' }}" title="Edit goal"><i class="fas fa-pen"></i></button>
                                                <button type="button" ng-click="opemModal($index,parentIndex)" class="btn btn-xs btn-primary" title="Write Comment"><i class="fas fa-comment"></i></button>
                                                <button type="button" ng-if="goalList.length>1 && !item.is_approved" ng-click="removeRow($index)" class="btn btn-xs btn-danger" title="Remove goal"><i class="fas fa-times"></i></button>
                                            </td>
                                            <td class="td_width">  
                                               <strong>{{item.maxTime}} Hours </strong> 
                                            </td>

                                            <td class="break" style="border-top: none;">
                                                <div style="font-size: 14px;">
                                                    <textarea ng-model="item.description" class="form-control" placeholder="Comment" ng-disabled="true"/>
                                                    <input ng-disabled="item.isView" type="file" file-model="item.image_name" id="image_name{{$index}}"  class="form-control fileinput">
                                                    <a href="#" ng-if="item.image_name" ng-click="displayImageModal(item.image_name)">View Image</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div style="border-top:1px solid #e1e1e1;padding:4px 0px;text-align:center">
                                        <button type="button" ng-click="cancel()" class="btn btn-default" title="Cancel"><i class="fas fa-remove"></i> Cancel</button>&nbsp;&nbsp;
                                        <!-- <button type="button" ng-click="addRow()" class="btn btn-warning" title="Add New goal"><i class="fas fa-plus"></i> Create New Goal</button>&nbsp;&nbsp; -->
                                        &nbsp;&nbsp;
                                        <button type="button" ng-click="saveOrUpdateGoals($index,parentIndex)" class="btn btn-primary" title="Save all goals"><i class="fas fa-save"></i> Update goals</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
        <!--Goal Comment modal-->
        <div uib-modal-window="modal-window" ng-if="isModalOpen" class="modal fade ng-scope ng-isolate-scope in" role="dialog" 
        size="lg" index="0" animate="animate" tabindex="-1" 
        uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" 
        style="z-index: 1050; display: block;">        
        <div class="modal-header bg-dark"><strong>Goal Comments</strong></div>
        <div class="modal-body" id="modal-body">
            <div class="row">
                <div class="form-group col-sm-12">
                    <label for="goal_comment">Comment</label>
                    <div class="input-group">                        
                        <textarea class="form-control" name="goal_comment" id="goal_comment" ng-model="goalComment.comment" placeholder="Write you comment here" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="text-olive"><strong>Comment Histories</strong></div>
                    <table class="table table-bordered table-sm p-0 m-0">
                        <thead>
                            <tr>
                                <th>Comment</th>
                                <th>Comment By</th>
                                <th>Comment Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in goalCommentList">
                                <td>{{item.comment}}</td>
                                <td>{{item.emp_first_name+' '+item.emp_last_name}}</td>
                                <td>{{item.comment_date}}</td>
                            </tr>
                            <tr ng-if="goalCommentList.length===0">
                                <td colspan="3">No history found</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="modal-footer m-1 p-2">
                <button class="btn btn-danger btn-xs" type="button" ng-click="closeModal()"><i class="fas fa-times"></i> Cancel</button>
                <button class="btn btn-success btn-xs" type="button" ng-click="submitComment()"> Submit Comment</button>
            </div>    
        </div>
    </div>
    <div ng-if="isModalOpen" uib-modal-backdrop="modal-backdrop" class="modal-backdrop fade ng-scope in" ng-style="{'z-index': 1040 + (index &amp;&amp; 1 || 0) + index*10}" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" data-bootstrap-modal-aria-hidden-count="1" aria-hidden="true" style="z-index: 1040;"></div>
    
    <!--delete confirmation modal start-->
    <div uib-modal-window="modal-window" ng-if="isConfirmModalOpen" class="modal fade ng-scope ng-isolate-scope in" role="dialog" 
        size="lg" index="0" animate="animate" tabindex="-1" 
        uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" 
        style="z-index: 1050; display: block;">        
        <div class="modal-header bg-dark"><strong>Delete Confirmation</strong></div>
        <div class="modal-body" id="modal-body">
            <div class="row">
                <div class="form-group col-sm-12">
                    <h5>Do you realy want to delete <span class="text-olive">{{'"'+goalToDelete.goal_name+'"'}}</span> goal?</h5>
                </div>
            </div>
            <div class="modal-footer m-1 p-2">
                <button class="btn btn-default" type="button" ng-click="noCloseGolaDeleteModal()"><i class="fas fa-times"></i> No</button>
                <button class="btn btn-primary" type="button" ng-click="yesDeleteGoal()"><i class="fas fa-check"></i> Yes</button>
            </div>    
        </div>
    </div>
    <div ng-if="isConfirmModalOpen" uib-modal-backdrop="modal-backdrop" class="modal-backdrop fade ng-scope in" ng-style="{'z-index': 1040 + (index &amp;&amp; 1 || 0) + index*10}" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" data-bootstrap-modal-aria-hidden-count="1" aria-hidden="true" style="z-index: 1040;"></div>
    <!--delete confirmation modal start-->
    <style>
        .ui-datepicker-trigger .fa-calendar{display: none;}
    </style>
</div>



<div uib-modal-window="modal-window" ng-if="isImageViewing" class="modal fade ng-scope ng-isolate-scope in" role="dialog" 
size="lg" index="0" animate="animate" tabindex="-1" 
uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" 
style="z-index: 1050; display: block;">        
<div class="modal-header bg-dark"><strong>Screenshot</strong> <span class="float-right" style="cursor: pointer;" ng-click="displayImagecloseModal()"><strong>x</strong></span></div>
<div class="modal-body" id="modal-body">
    <div class="row">
        <div class="form-group col-sm-12">
            <img src="{{baseurl}}/{{screenshotDiaplay}}" style="width: 100%;">
        </div>
    </div>
</div>
</div>
