@extends('hr::layouts.master')
@section('content')
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/badgeEmployeeController.js')}}"></script>
<script src="{{ asset('/js/hr/controller/employeeController.js')}}"></script>
<!--displaying index-->
<div ng-app="employeeApp" ng-controller="badgeEmployeeCtrl" ng-init="badgeEmployeePagingInit()">
    <div class="col s12">
        <div class="card minheight">
            <h1 class="page-title">Badges
                <div class=""> 
                    
                    <a href="{{ url('hr/badge')}}"  class="tooltipped button-style" data-position="top" data-delay="50"  data-tooltip="New Badge">
                        <i class="fa fa-id-badge "></i>
                    </a>
                    <a href="{{ url('hr/badgeEmployee')}}" class="tooltipped button-style2" data-position="top" data-delay="50"  data-tooltip="Badge Allocation"> 
                        <i class="fa fa-user-circle"></i>
                    </a>
                    <a href="#!" ng-click="GoBack()" class="waves-effect page-button backbutton-badegeview"><i class="material-icons left">arrow_back</i>Back</a>
                </div>
                </h1>

                 <div class="row">
                    <div class="col s12">
                        <div class="bordr-color filter">
                           <h1>Filter </h1>
                           <form  class="row  custom-form">
                        <div class="input-field col s2">
                            <p>From
                                <input type="date" class="datepicker" value="" ng-model="dtpstart" ng-change="searchbadgeEmployee()">
                            </p> 
                        </div>                
                        <div class="input-field col s2">
                            <p>To 
                                <input type="date" class="datepicker" value="" ng-model="dtpend" ng-change="searchbadgeEmployee()">
                            </p>
                        </div>
                    </form>
                        </div>
                    </div>
                </div>

        </div> 

        <div class="card">
            <div class="row">
                <div class="col s12"> 
                   <!--  <form  class="row card custom-form">
                        <div class="input-field col s2">
                            <p>From
                                <input type="date" class="datepicker" value="" ng-model="dtpstart" ng-change="searchbadgeEmployee()">
                            </p> 
                        </div>                
                        <div class="input-field col s2">
                            <p>To 
                                <input type="date" class="datepicker" value="" ng-model="dtpend" ng-change="searchbadgeEmployee()">
                            </p>
                        </div>
                    </form> -->
                   <div ng-show="badgeEmployees.data == 0">
            <div ng-show="badgeEmployees.data == 0" class="col s12 card">
                <div class="no-data">   
                    <i class="no-data-img"></i>
                    <p>No results found</p>
                </div>
            </div>
        </div>
                    <table class="responsive-table" ng-hide="badgeEmployees.data == 0">
                        <thead>
                            <tr>
                                <th>Employee Name</th>
                                <th>Badge</th>
                                <th>Expiry Date</th>
                                <th>note</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr ng-repeat="be in badgeEmployees.data">
                                <td>@{{be.empname}}</td>
                                <td>@{{be.name}}</td>
                                <td>@{{be.expirydate}}</td>
                                <td>@{{be.note}}</td>
                                <td>
                                    <div class="switch">
                                        <label>
                                            <b>Inactive</b>
                                            <input ng-checked="be.status == 'ACTIVE'" type="checkbox" id="badgestatus_@{{be.id}}" ng-click="checkbadgestatus(be.id, $index,be.expirydate)" ng-model="bstatus" >
                                            <span class="lever"></span>
                                            <b>Active</b>
                                        </label>
                                    </div>
                                    <!-- </div> -->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="table-footer"><br>
                          <div class="center-align">
                        <!--Pagination starts here-->

                        <ul class="pagination rcenter" ng-if="1 < pages.length || !autoHide">

                            <li  ng-disabled="pagingData.current_page == 1">
                                <a href="" ng-click="pagingData.current_page == 1 || setCurrentbadgeEmployeePage(1)">&laquo;</a>
                            </li>
                            <li  ng-disabled="pagingData.current_page == 1">
                                <a href="" ng-click="pagingData.current_page == 1 || setCurrentbadgeEmployeePage(pagingData.current_page - 1)">&lsaquo;</a>
                            </li>
                            <li ng-repeat="pageNumber in pages track by  $index" ng-class="{ active :pagingData.current_page == pageNumber, disabled : pageNumber == '...' }">
                                <a href="" ng-click="setCurrentbadgeEmployeePage(pageNumber)">@{{ pageNumber}}</a>
                            </li>

                            <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                                <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentbadgeEmployeePage(pagingData.current_page + 1)">&rsaquo;</a>
                            </li>
                            <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                                <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentbadgeEmployeePage(pagingData.last_page)">&raquo;</a>
                            </li>
                        </ul>
                        <!--Pagination ends here--> 
                        </div>
                    </div>
                    <div class="no-data" ng-show="badgeEmployee.data == 0">   
                        <i class="no-data-img"></i>
                        <p>No results found</p>
                    </div>
                </div>

            </div>                
        </div>
        <!--dispay ends here-->
    </div>

      
    <input type="hidden" id='data-badgeEmployee' value="{{$badgeEmployee or '[]'}}"/>
    <input type="hidden" id='data-employee' value="{{$employee or '[]'}}"/>
    <input type="hidden" id='data-badges' value="{{$badges or '[]'}}"/>

    



</div>                
@stop