<div class="content-wrapper" ng-if="!myAccess.watchlistHeroes">
    <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-warning alert-dismissible">
                    <h5><i class="icon fas fa-ban"></i> Warning!</h5>
                    Unauthorised Access.
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content-wrapper" ng-if="myAccess.watchlistHeroes">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row" >
                <div class="col-md-12" >
                    <div class="form-row justify-content-center">
                       <!-- <div class="col-sm-3 offset-sm-4"><select data-toggle="tooltip" title="Select WatchList" id="watchlist" class="form-control custom-select" ng-model="selwatchlist" ng-options="a.wtl_id as a.tag for a in filter.wlist"></select>
						</div>
                        <div class="col-sm-3"><select data-toggle="tooltip" title="Project Status" id="viewType" class="form-control custom-select" ng-model="selemp" ng-options="p.hero_id as p.emp_first_name +' '+p.emp_last_name  for p in filter.emp"></select>
						</div>-->
						<div class="col-sm-3"><label for="name">Select Tag</label><select data-toggle="tooltip" ng-change="allTags(selwatchlist)" title="Select Tag" id="watchlist" class="form-control custom-select" ng-model="selwatchlist">
                        <option value="">All</option>
                        <option ng-repeat="tags in tag_names" value="{{tags.wtl_id}}">{{tags.tag}}</option>
						</select>
						</div>
						<div class="col-sm-3"><label for="name">Select Hero</label><select data-toggle="tooltip" ng-change="heroAndtags(selwatchlist,selemp)" title="Select Hero" id="viewType" class="form-control custom-select" ng-model="selemp">
                            <option value="">All</option>
						<option ng-repeat="hero_name in taggedHeroes | filter : { wtl_id:selwatchlist } | unique : 'hero_id'" value="{{hero_name.hero_id}}">
                            {{hero_name.emp_first_name +' '+hero_name.emp_last_name}}</option>
						</select>
						</div>
                    </div>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-success">
                        <go-back/>
                        <i class="fas fa-table"></i> Hero WatchlList ({{watchlists.length}})
                    </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">WatchlList</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-success card-outline">
                        <div class="card-header border-transparent">
                            <h3 class="card-title">&nbsp;</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <button type="button" title="Fullscreen Toggle" class="btn btn-dark toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                    <button data-id="{{dl.wt_id}}" type="button" class="btn btn-dark" data-widget="collapse"><i class="fas fa-minus"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                
                                <table id="watchList" class="table table-bordered table-striped table-sm">
                                    <thead>
                                    <tr>
                                       <th>#</th>
										<th>WatchList Tag</th>
										<th>Hero</th>
                                        <th>Code</th>
                                        <th>Revenue Center</th>
                                        <th data-toggle="tooltip" title="Years of Experience">YOE <i class="fas fa-question-circle"></i></th>
                                        <th data-toggle="tooltip" title="Date of Joining">DOJ <i class="fas fa-question-circle"></i></th>
										<th>Comment</th>
										<th>Date</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="dl in watchlists" ng-class="{'table-success':dl.status==='1'}" style="{{ dl.expire == 1 ? 'background-color:aqua' : '' }}">
                                        <td>{{ $index+1 }}</td>
                                            <td><strong>{{dl.tag|capitalize}}</strong></td>
                                            <td><strong>
                                                <a target="_blank" href="/heroes/view/{{dl.hero_id}}"><i class="fas fa-external-link-alt"></i></a>
                                                <a target="_blank" ng-click="goToFeedback(dl)" href="">{{dl.emp_first_name +' '+dl.emp_last_name | capitalize}}</a>
                                                </strong>
                                            </td>
                                            <td>{{dl.emp_code}}</td>
                                            <td>{{dl.rc_name}}</td>
                                            <td>{{dl.emp_yoe}}</td>
                                            <td>{{dl.emp_doj | date:'d-MMM-y'}}</td>
                                            <td><strong>{{dl.comment|capitalize}}</strong></td>
											<td>{{dl.comment_datetime  | datetz:'DD-MMM-YY'}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script type="text/ng-template" id="ProjectStatus.html">
        <div class="">
            <div class="modal-header bg-danger">
                <h4 class="modal-title" id="modal-title">Change project status of <strong>{{data.project.proj_name}}</strong></h4>
            </div>
            <div class="modal-body" id="modal-body">
                <p>Current project status: <strong>{{data.project.proj_status | capitalize}}</strong></p>
                <div class="form-group">
                    <label for="proj_status">Change status to:</label>
                    <select id="proj_status" class="form-control custom-select"
                            ng-model="data.project.status" ng-options="ps.value as ps.label for ps in data.projStatus">
                    </select>
                </div>
                <div class="form-group">
                    <label for="proj_status_change_comment">Reason of Status Change</label>
                    <textarea required="required" ng-model="data.project.change_comment" id="proj_status_change_comment" class="form-control" rows="2" placeholder="Reason of Status Change"></textarea>
                </div>
            </div>
            <div class="modal-footer bg-danger">
                <button ng-if="data.project.status == data.project.proj_status" class="btn btn-default" disabled type="button">Change</button>
                <button ng-if="data.project.status != data.project.proj_status" class="btn btn-default" type="button" ng-click="change(data)">Change</button>
                <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </script>
</div>
