@extends('hr::layouts.master')
@section('content')
<!--payroll blade starts here.-->
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/payrollController.js')}}"></script>
<div  ng-app="payrollApp">
    <div ng-controller="payrollCtrl" ng-init="getmonthandyear()">
        
        <!--alert box start.-->
        <div class="row" ng-show="viewbox == 'true' ">
            <div class="col s4 m4 l4">
                <div class="card-panel red lighten-4 red-text text-darken-4 alert_box_z-index" style="">
                    <i class="material-icons small alert_box_button" ng-click="alertbox()">close</i>
                    <b>Package not found!</b> @{{msg}}
                </div>
            </div>
        </div>
        <!--alert box end.-->

        <div class="col s12 m8 l8">
            <div class="card">
                <form id="frmpayroll" class="custom-form">
                    <div class="row level-adg">
                        <div class="input-field col s12 m4 l4">
                            <select id="drpmonth" class="browser-default">
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                        </div>
                        <div class="input-field col s12 m4 l4">
                            <select id="drpyear" class="browser-default">
                                                            </select>
                        </div>
                    </div>
                    <!--tabs start here.-->
                    <div class="row">
                        <div class="col s12 ">
                            <ul class="tabs">
                                <li class="tab col s4"><a class="box-style active" href="#all">All</a></li>
                                <li class="tab col s4"><a class="box-style" href="#individual" ng-click="individuals()">Individual</a></li>
                                <li class="tab col s4"><a class="box-style" href="#dptmnt" ng-click="selectDepartment()">Department</a></li>
                            </ul>
                        </div>
                        <!--tab for all-->
                        <div id="all" class="col s12 m8 l8 marg-top">
                            <div class="row">
                                <div class="col s4 m5 l5 push-m6 push-l6">
                                    <img class="responsive-img" src="{{ asset('/img/dollar.png') }}">
                                    <h4 class="center-align clr-text">Tables are a nice way to organize a lot of datas</h4>
                                    <a class="waves-effect waves-light btn-large pad-left-button" ng-click="payrollAll()">Generate</a>
                                </div>
                            </div>
                        </div>
                        
                        <!--tab for individuals-->
                        <div id="individual" class="col s12 marg-top">
                        
                        <!--global search for employee-->
                        <div>
                            <input type="text" id="individualsearch" ng-model="searchInd" ng-keyup="indSearch()"> 
                        </div>
                        <!--global search ends here.-->
                        
                            <table class="highlight bordr-color bordered">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Name</th>
                                        <th>Department</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                <input type="checkbox" ng-model="allindividuals" id="indvidls" ng-click="allindividuals()">
                                    <label for="indvidls">Check all</label>
                                    <tr ng-repeat="employee in employees.data " >
                                        <td>
                                            <input type="checkbox" ng-checked="indselectedornot(employee.id,$index)" class="indvidls" id="indvdls@{{employee.id}}" ng-click="singleemployee($index,employee.id)">
                                            <label for="indvdls@{{employee.id}}"></label>
                                        </td>
                                        <td>
                                            @{{employee.name}}
                                        </td>
                                        <td>
                                            @{{employee.department}}
                                        </td>
                                        <td>
                                            <a class="waves-effect waves-light btn button-oval right" ng-click="generateindvdls(employee.id,$index)">Generate<i class="fa fa-usd" aria-hidden="true"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                                
                                <!--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 || setCurrentIndividualPage(1)">&laquo;</a>
                                    </li>
                                    <li  ng-disabled="pagingData.current_page == 1 ">
                                        <a href="" ng-click="pagingData.current_page == 1 || setCurrentIndividualPage(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="setCurrentIndividualPage(pageNumber)">@{{ pageNumber }}</a>
                                    </li>

                                    <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                                        <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentIndividualPage(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 ||setCurrentIndividualPage(pagingData.last_page)">&raquo;</a>
                                    </li>
                                </ul>
                                <!--Pagination ends here-->
                                
                            </table>
                            <a class="waves-effect waves-light btn button-oval marg-but" ng-click="generateindvdlall()">Generate<i class="fa fa-usd" aria-hidden="true"></i></a> <br>
                        </div>
                        <!--tab for department-->
                        <div id="dptmnt" class="col s12 m12 l12">    
                            
                        <!--global search for employee-->
                        <div>
                            <input type="text" id="dptmntsearch" ng-model="searchdpt" ng-keyup="dptSearch()"> 
                        </div>
                        <!--global search ends here.-->
                            
                            <div class="row marg-top">
                                <div class="col s12 m4 l6">
                                    <select class="select-box-width" id="department"  name="department" ng-model="department" ng-change="selectEmployees()" style="width:100%;">
                                        <option value="" selected="selected">Department</option>
                                        <option value="@{{department.id}}" ng-repeat="department in departments">@{{department.name}}</option>
                                    </select>
                                </div>
                                <div class="col s12 m4 l8 right-align">
                                    <input type="checkbox" id="chkallofdepartment" ng-click="allofdepartment()">
                                    <label for="chkallofdepartment">Check all</label>

                                </div>
                            </div>
                            
                            <table class="highlight bordr-color bordered marg-top">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Name</th>
                                        <th>Department</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="departmentemployee in departmentemployees.data" >
                                        <td>
                                            <p>
                                                <input type="checkbox" ng-checked="dptselectedornot(departmentemployee.id,$index)" class="departmentvise" id="eachperdptmnt@{{departmentemployee.id}}" ng-click="eachperdpartment($index,departmentemployee.id)">
                                                <label for="eachperdptmnt@{{departmentemployee.id}}"></label>
                                            </p>
                                        </td>
                                        <td>
                                            @{{departmentemployee.name}}
                                        </td>
                                        <td>
                                            @{{departmentemployee.department}}
                                        </td>
                                        <td>
                                            <a class="waves-effect waves-light btn button-oval" ng-click="generateforeachinDepartment(departmentemployee.id)">Generate<i class="fa fa-usd" aria-hidden="true"></i></a>
                                            
                                        </td>
                                    </tr>
                                </tbody>
                                
                                <!--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 || setCurrentDptvisePage(1)">&laquo;</a>
                                    </li>
                                    <li  ng-disabled="pagingData.current_page == 1 ">
                                        <a href="" ng-click="pagingData.current_page == 1 || setCurrentDptvisePage(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="setCurrentDptvisePage(pageNumber)">@{{ pageNumber }}</a>
                                    </li>

                                    <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                                        <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentDptvisePage(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 ||setCurrentDptvisePage(pagingData.last_page)">&raquo;</a>
                                    </li>
                                </ul>
                                <!--Pagination ends here-->
                                                                
                            </table>
                            <a class="waves-effect waves-light btn button-oval marg-but" ng-click="generateallforDepartment()">Generate<i class="fa fa-usd" aria-hidden="true"></i></a>
                        </div>
                    </div>
                    <!--tabs ends here.-->
                </form>
            </div>
        </div>
        <div class="col s12 m4 l4">
            <div class="card" style="height: 482px;">
                <!--code for displaying selected employees-->
                    <div class="list-title">
                        <h6 class="col s5">Selected Employees</h6>           
                    </div>
                <input type="text" ng-model="searchselectd" >
                    <ul class="item-list upcoming-events" selected-employees="selectedEmployees()">
                        <li class="item avatar" ng-repeat="employee in selectedemployees | filter:searchselectd">
                            <i class="fa fa-user circle" aria-hidden="true"></i>
                            <span class="title">@{{employee.name}}</span><br>@{{employee.department}}
                            <a href="#!" ng-click="removeEmployee(employee.id, $index)"  class="trash-btn right"><i class="fa fa-trash" aria-hidden="true"></i></a>
                        </li>                       
                        <li class="item load-spinner" ng-show="scrollTask">
                            <i class="fa fa-spinner fa-pulse fa-fw"></i>
                        </li> 
                    </ul>
                    <div id="modal-delete-event" class="modal modal-fixed-footer" data-modalfire>
                        <div class="modal-content">
                            <h4>Do you want remove this employee(s) ?</h4>
                        </div>
                        <div class="modal-footer">
                            <a href="#!" ng-click="removeEmployee()" 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>
                <!--code for display selected employees ends here.-->
            </div>
        </div>
        
        <!-- Modal for multiple employees payroll Starts Here -->
        <div id="modal_payrollall" class="modal fade-in-right modal-fixed-footer" data-modalfire>
            <div class="modal-content">
                <h4>Payroll</h4>                
                <div class="row">
                    <form class=" custom-form col s12" id="frmpayrollall">
                        <div class="row">
                            <div class="input-field col s12">
                                <p>Employees selected</p>
                                <input id="empcount" type="text" ng-model="empcount" readonly="readonly">
                            </div>
                            <div class="input-field col s6">
                                <p>Total amount</p>                            
                                <input type="text" name="totamount" ng-model="totamount" readonly="readonly">
                            </div>
                            <div class="input-field col s6">
                                <p>Deduction</p>                            
                                <input type="text" name="deduction" ng-model="deduction" ng-keyup="deductionall()">
                            </div>
                            <div class="input-field col s6">
                                <p>Deduction note</p>                            
                                <input type="text" name="deductionnote" ng-model="deductionnote" >
                            </div>
                            <div class="input-field col s6">
                                <p>Surplus</p>                            
                                <input type="text" name="surplus" ng-model="surplus" ng-keyup="surplusall()">
                            </div>
                            <div class="input-field col s6">
                                <p>Surplus note</p>                            
                                <input type="text" name="surplusnote" ng-model="surplusnote" >
                            </div>
                            <div class="input-field col s6">
                                <p>Final amount</p>                            
                                <input type="text" name="finalamount" ng-model="finalamount" readonly="readonly">
                            </div>
                        </div>
                        <input type="hidden" id="result" name="result" ng-model="result" value="">
                        <input type="hidden" id="salinfo" name="salinfo" ng-model="salinfo" value="">
                    </form>   
                </div>

            </div>

            <div class="modal-footer">                
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
                <a href="#!" ng-click="savepayrollofallEmployees()" class="waves-effect waves-light btn">Generate</a>
            </div>
        </div>
        <!-- Modal Starts Here -->
        
        <!-- Modal for single employee payroll Starts Here -->
        <div id="modal_payrollsingle" class="modal fade-in-right modal-fixed-footer" data-modalfire>
            <div class="modal-content">
                <h4>Payroll:-Individual</h4>                
                <div class="row">
                    <form class=" custom-form col s12" id="frmpayrollsingle">
                        <div class="row">
                            <div class="input-field col s12">
                                <p>Name</p>
                                <input id="empname" type="text" ng-model="empname" readonly="readonly">
                            </div>
                            <div class="input-field col s12">
                                <p>Department</p>
                                <input id="empdpt" type="text" ng-model="empdpt" readonly="readonly">
                            </div>
                            <div class="input-field col s6">
                                <p>Lop</p>                            
                                <input type="text" name="emplop" ng-model="emplop">
                            </div>
                            <div class="input-field col s6">
                                <p>Deduction</p>                            
                                <input type="text" name="empded" ng-model="empded" ng-keyup="#">
                            </div>
                            <div class="input-field col s6">
                                <p>Deduction note</p>                            
                                <input type="text" name="empdednote" ng-model="empdednote" >
                            </div>
                            <div class="input-field col s6">
                                <p>Surplus</p>                            
                                <input type="text" name="empsur" ng-model="empsur" ng-keyup="#">
                            </div>
                            <div class="input-field col s6">
                                <p>Surplus note</p>                            
                                <input type="text" name="empsurnote" ng-model="empsurnote" >
                            </div>
                            <div class="input-field col s6">
                                <p>Net amount</p>                            
                                <input type="text" name="netamnt" ng-model="netamnt" readonly="readonly">
                            </div>
                        </div>
                    </form>   
                </div>

            </div>

            <div class="modal-footer">                
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
                <a href="#!" ng-click="savepayrollofEmployees()" class="waves-effect waves-light btn">Generate</a>
            </div>
        </div>
        <!-- Modal Starts Here -->
        
    </div>
</div>
<!--payroll blade ends here.
@stop