@extends('hr::layouts.master')
@section('content')

<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script> 
<script src="{{ asset('/js/hr/controller/departmentshowcaseController.js')}}"></script>
<div  ng-app="employeeApp">

    <div ng-controller="departmentCtrl" ng-init="departmentPagingInit()">
        <div class="col s12">
                <div class="card">
                    <h1 class="page-title">Departments</h1>
                </div>
        </div>
        <input type="hidden" id='data-departments' value="{{$departments or '[]'}}"/>
        <!--display starts here.-->
        <div ng-show="departments.data == 0" class="col s12 card">
            <div class="no-data">   
                <i class="no-data-img"></i>
                <p>No results found</p>
            </div>
        </div>
        <div ng-hide="departments.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 || setDepartmentPage(1)">&laquo;</a>
                </li>
                <li  ng-disabled="pagingData.current_page == 1">
                    <a href="" ng-click="pagingData.current_page == 1 || setDepartmentPage(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="setDepartmentPage(pageNumber)">@{{ pageNumber}}</a>
                </li>

                <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                    <a href="" ng-click="pagingData.current_page == pagingData.last_page || setDepartmentPage(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 || setDepartmentPage(pagingData.last_page)">&raquo;</a>
                </li>
            </ul>
            <!--Pagination ends here-->
            <!--tiles start here-->
            <div class="col s3  " ng-repeat="department in departments.data|  filter:searchDepartment">  
                <br>
                <div class="small-box bg-white card" style="padding-top: 5px;padding-right: 5px;padding-bottom: 5px;padding-left: 5px;">
                    <div class="inner"> <br>   
                        <b style="padding-left: 5px;">Department :</b> @{{department.name}}
                        <p style="padding-left: 5px;"><b>No of Employees :</b> @{{department.eCount}} </p>
                        <div class="icon right">
                            <!--<i class="fa fa-bandcamp"></i>-->
                        </div>
                        <p style="padding-left: 5px;"><b>No of leaves :</b> @{{department.lCount}} </p>
                        <p style="padding-left: 5px;"><b>Contact number :</b> @{{department.contact}} </p>
                    </div> 
                    <div style="background: lightgoldenrodyellow">
                        <p style="padding-left: 5px;"><b>Parent Department :</b> @{{department.parent}} </p><br> 
                        <div style="float: right">
                            <div style="float: right" ng-show="department.eCount !== 0">
                                <a href='employee/index/@{{department.id}}'><i class="fa fa-pencil fa-fw"></i> Employees </a></li>
                            </div>
                            <div style="float: right" ng-show="department.lCount !== 0">
                                <a href="leavetypes/index/@{{department.id}}"><i class="fa fa-pencil fa-fw"></i>Leaves</a></li>
                            </div>
                        </div><br><br>
                    </div>
                </div>  
            </div>
        </div>
    </div>
    <!--dispay ends here-->

</div>

@stop