@extends('hr::layouts.master')
        @section('content')
        <script src="{{ asset('/js/hr/controller/empModules.js')}}"></script> 
        <script src="{{ asset('/js/hr/controller/employeeController.js')}}"></script> 
        <script src="{{ asset('/js/common/controller/countryController.js')}}"></script>     
        <script src="{{ asset('/js/hr/controller/tagController.js')}}"></script>
        <script src="{{ asset('/js/hr/controller/badgeController.js')}}"></script>
        <script src="{{ asset('/js/hr/controller/selectcommonController.js')}}"></script>
        <div  ng-app="employeeApp">
            <div ng-controller="employeeCtrl" ng-init="salarypackagedetailsPagingInit()">
            <div class="col s12">
                <div class="card">
                    <h1 class="page-title">Salary Package Details</h1>
                </div>
            </div>
                
            <div class="row">
                <form class="custom-form card col s8" id="frmsalarypackgedtls">                
                    <div class="input-field mandatory col s3">
                        <input id="salarypackg" name="salarypackg"type="text"  class="validate" placeholder="Salary Packge" ng-model="salarypackg" required>
                        <label for="salarypackg">Salary Package</label>
                    </div>
                    <div class="input-field mandatory col s3">
                        <input id="label" name="label"type="text"  class="validate" placeholder="label" ng-model="label" required>
                        <label for="label">Label</label>
                    </div>
                    <div class="input-field mandatory col s3">
                        <input id="monthlyamnt" name="monthlyamnt"type="text"  class="validate" placeholder="Monthly Amount" ng-model="monthlyamnt" required>
                        <label for="monthlyamnt">Monthly Amount</label>
                    </div>
                    <div class="col s12">
                        <div class="primay-footer ">
                            <div class="footer-content">
                                <div class="row">
                                    <div class="input-field col s7">                                        
                                        <p class="footer-legend"><i class="fa fa-caret-right red-text" aria-hidden="true"></i> &nbsp;Mandatory Fields</p>
                                    </div>
                                    <div class="input-field right">   
                                        <button class="btn white grey-text-text default waves-effect" type="reset">Cancel</button>
                                        <a class="btn transparent green-text primary waves-effect"ng-click="savesalarypackgedetails()" type="submit">Save</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <input type="hidden" name="salrypckgedetailsId" id="salrypckgedetailsId" ng-model="salrypckgedetailsId">
                </form>
                <div>
                        <div class="input-field col s6" ng-hide="salrypackgedtls.data == 0">
                            <label style="margin-left: 50px">Search</label>  
                            <input type="search" value="" ng-model="salrypackgedtls" >
                        </div>
                        <table class="responsive-table" ng-hide="salrypackgedtls.data == 0">
                            <thead>
                                <tr>
                                    <th>Salary Package</th>
                                    <th>Label</th>
                                     <th>Monthly amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="salrypackge in salarypackagedetails.data |  filter:salrypackgedtls" >
                                    <td>@{{salrypackge.salarypackage}}</td>
                                    <td>@{{salrypackge.label}}</td> 
                                    <td>@{{salrypackge.monthlyamount}}</td>
                                    <td>
                                        <a href="#!" ng-click="editsalarypackgedtls(salrypackge.id, $index)"><i class="fa fa-pencil fa-fw"></i> Edit</a>
                                        <a href="#!" ng-click="showDeleteModalsalarypackgedtls(salrypackge.id, $index)" ><i class="fa fa-trash-o fa-fw"></i>Delete</a>
                                    </td>
                                </tr>
                            </tbody>
                            
                            <div class="input-field col s12" ng-hide="salarypackagedetails.data == 0">
                                <ul class="pagination" ng-if="1 < pages.length || !autoHide">
                                    <li  ng-disabled="pagingData.current_page == 1">
                                        <a href="" ng-click="pagingData.current_page == 1 || setCurrentsalarypackgedtlsPage(1)">&laquo;</a>
                                    </li>
                                    <li  ng-disabled="pagingData.current_page == 1">
                                        <a href="" ng-click="pagingData.current_page == 1 || setCurrentsalarypackgedtlsPage(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="setCurrentsalarypackgedtlsPage(pageNumber)">@{{ pageNumber}}</a>
                                    </li>
                                    <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                                        <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentsalarypackgedtlsPage(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 || setCurrentsalarypackgedtlsPage(pagingData.last_page)">&raquo;</a>
                                    </li>
                                </ul>
                            </div>
                        </table>
                    <div id="modal-salarypackagedtls-delete" 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="deletesalarypackgdtls()" 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>
                <div class="col s8">
                <div class="row">
                    <div class="card">
                        <div class="no-data" ng-show="salarypackagedetails.data == 0"> 
                            <i class="no-data-img"></i>
                            <p>No results found</p>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        <input type="hidden" id="data-empid" value="{{$employid or '[]'}}"/>
        <input type="hidden" id="data-packageid" value="{{$packageid or '[]'}}"/>
        <input type="hidden" id="data-expired" value="{{$expired or '[]'}}"/>
        <input type="hidden" id="data-affectedfrm" value="{{$affectedfrm or '[]'}}"/>
        <input type="hidden" id='data-teams' value="{{$teams or '[]'}}"/>
        <input type="hidden" id='data-prooftypes' value="{{$prooftypes or '[]'}}"/>
        <input type="hidden" id='data-workinghours' value="{{$workinghours or '[]'}}"/>    
        <input type="hidden" id='data-leavetypes' value="{{$leavetypes or '[]'}}"/>    
        <input type="hidden" id='data-jobpositions' value="{{$jobpositions or '[]'}}"/>
        <input type="hidden" id='data-leavepackage' value="{{$leavepackage or '[]'}}"/>
        <input type="hidden" id='data-contracts' value="{{$contracttypes or '[]'}}"/>   
        <input type="hidden" id='data-relations' value="{{$relations or '[]'}}"/>
        <input type="hidden" id='data-shifttype' value="{{$shifttypes or '[]'}}"/>   
        <input type="hidden" id='data-departments' value="{{$departments or '[]'}}"/>   
        <input type="hidden" id='data-countries' value="{{$countries or '[]'}}"/>
        <input type="hidden" id='data-salutations' value="{{$salutations or '[]'}}"/>
        <input type="hidden" id='data-banks' value="{{$banks or '[]'}}"/>     
        <input type="hidden" id='data-tags' value="{{$tags or '[]'}}"/>
        <input type="hidden" id="data-parents" value="{{$parents or '[]'}}"/>
        <input type="hidden" id="data-leads" value="{{$leads or '[]'}}"/>
        <input type="hidden" id="data-salaryheads" value="{{$salaryheads or '[]'}}"/>
        <input type="hidden" id="data-salrypackgedeatls" value="{{$salrypackgedtls or '[]'}}"/>        
        </div>
        @stop