@extends('hr::layouts.master')
@section('content')
<style type="text/css">
</style>
<link rel="stylesheet" href="{{asset('/css/nav_vertical.css')}}" >
<!-- Modal Trigger -->
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/employeeshowcaseController.js')}}"></script>
<div  ng-app="employeeApp">
    <div ng-controller="employeeCtrl" ng-init="employeePaginginit()">
        <input type="hidden" id='data-employees' value="{{$employees or '[]'}}"/>
        <input type="hidden" id='data-departments' value="{{$departments or '[]'}}"/>
        <div class="col s12">
            <div class="card minheight">
                <h1 class="page-title pad-top">Employee
                <!--code for dropdown buttons-->
                <div class="">
                    <a href="#" class="dropdown-button button-style" data-activates='dropdownempindex'><i id="gear" class="fa fa-gear" ng-mouseover="mouseOver()" ng-mouseleave="mouseLeave()"></i></a>
                    <ul id='dropdownempindex' class='dropdown-content dropdown-card-width2'>
                        <li><a href="{{ url('hr/employee/create')}}">Create</a></li>
                         <li class="divider"></li>
                        <li><a href="{{ url('hr/employee/badge')}}">Badge</a></li>
                         <li class="divider"></li>
                        <li><a href="{{ url('hr/employee/settings')}}">Settings</a></li>
                    </ul>
                     <a href="#!" ng-click="GoBack()" class="waves-effect page-button backbutton-settings"><i class="material-icons left">arrow_back</i>Back</a>

                </div>
                <!--code ends here.-->
                </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 s4">
                                    <input type="search" value="" placeholder="Global search" ng-model="txtemployee" ng-keyup="searchAjaxEmployee()">
                                </div>
                                <div class="input-field col s4">
                                    <select class="browser-default" ng-model="drpoption" style="margin-left: 50px" ng-change="chooseDisplayOption()" data-select>
                                        <option value="all">All employees</option>
                                        <option value="active">Active employees only</option>
                                        <option value="inactive">Inactive employees only</option>
                                        <option value="filterdpt">Department</option>
                                    </select>
                                </div>
                                <div class="input-field col s1"></div>
                                <div class="input-field col s3" ng-show="drpoption == 'filterdpt' ">
                                    <select name="dptfilter" class="browser-default" id="dptfilter" ng-model="dptfilter" ng-change="departmentFilter()">
                                        <option value="" selected="selected">Department</option>
                                        <option ng-repeat=" department in departments.data" value="@{{department.id}}">@{{department.name}}</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div ng-show="employees.data == 0" class="col s12 card">
            <div class="no-data">
                <i class="no-data-img"></i>
                <p>No results found</p>
            </div>
        </div>
       
        <div class="right-align but-mar">
            <div ng-hide="employees.data == 0">
                <!--Pagination starts here-->
                <ul class="pagination" ng-if="1 < pages.length || !autoHide">
                    <li  ng-disabled="pagingData.current_page == 1">
                        <a href="" ng-click="pagingData.current_page == 1 || setCurrentEmployeePage(1)">&laquo;</a>
                    </li>
                    <li  ng-disabled="pagingData.current_page == 1">
                        <a href="" ng-click="pagingData.current_page == 1 || setCurrentEmployeePage(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="setCurrentEmployeePage(pageNumber)">@{{ pageNumber}}</a>
                    </li>
                    <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                        <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentEmployeePage(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 || setCurrentEmployeePage(pagingData.last_page)">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
      
        <!--Pagination ends here-->
        <!--tiles start here-->
        
        <!-- info card -->  
        <div class="">
            <div class="row">
                <div class="col s12 m6 l3 employeinforesponcive"  ng-repeat="employee in employees.data|  filter:searchEmployee">
                    <div class="card card-zoom">
                        <div class="card-image">
                            <img src="{{ asset('/img/info-back.jpg')}}">
                            <div class="user-img">
                                <img  id="imagesource" ng-src="@{{employee.thump || defaultImg}}" class="circle responsive-img">
                            </div>
                            <!--materialize switch start here.-->
                            <div class="switch Status-switch">
                                <label>
                                    <input ng-checked="employee.status == 'ACTIVE'" type="checkbox" id="chkstatus_@{{employee.id}}" ng-click="checkemployeeStatus(employee.id, $index)">
                                    <span class="lever"></span>
                                    <!--Active-->
                                </label>
                            </div>
                            <!--materialize switch ends here.-->
                        </div>
                        <div class="card-content ash-clr">
                            <div class="container top-space">
                                <h2 class="line-bt-test center-align"><span>@{{employee.name}}</span></h2>
                                
                            </div>
                            <h2><b>Position:</b>@{{employee.position}} </h2>
                            <h2><b>Email:</b>@{{employee.workemail}} </h2>
                            <h2><b>Contact number:</b>@{{employee.workcontactnumber}}</h2>
                            <h2><b>Company address:</b>@{{employee.workaddress}} </h2>
                            <div class="badge-div">
                            <div class="col s2 m2 l4  offset-m9 offset-l9 bage-img"> 
                                <a href="#" tooltipped class="tooltipped" data-position="top" data-delay="50"  data-tooltip="@{{employee.allocatedBadges}}"><img class="responsive-img" ng-show="employee.issetBadge == 'yes' " ng-src="@{{employee.badgePic}}"></a>
                            </div>
                        </div>
                        </div>
                       
                        <div class="card-action" ng-show="employees.data[$index].status == 'ACTIVE'">
                            <a href='employee/create/@{{employee.id}}'><i class="fa fa-pencil fa-fw"></i> Edit</a>
                            <a href="#!" ng-click="showDeleteModal(employee.id)"  ><i class="fa fa-trash-o fa-fw"></i>Delete</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="modal-delete-employee" class="modal modal-fixed-footer" data-modalfire>
            <div class="modal-content">
                <h4>Do you want delete this item(s) ?</h4>
            </div>
            <div class="modal-footer">
                <a href="#!" ng-click="deleteItem()" class="modal-action waves-effect waves-red btn-flat ">Yes</a>
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">No</a>
            </div>
        </div>
        
    </div>
</div>
<!-- end info card -->
@stop