@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</h1>
                    </div>
                </div>
                <div class="row">
                    <form class="custom-form card col s8" id="frmsalarypackge">
                        <div class="card">
                            <div class="row">
                                <div >
                                    <div class="input-field mandatory input col s4">
                                        <input id="salarypackagename" type="text" class="validate" data-vtype="name" ng-model="salarypackagename" name="salarypackagename" required>
                                        <span class="error-msg"></span> 
                                        <label for="salarypackagename" data-error="package name required !" >Packagename</label> 
                                    </div>
                                    <div class="input-field mandatory input col s4">
                                        <input type="text" name="salaryvalidity" id="salaryvalidity" data-vtype="number" ng-model="salaryvalidity" required>
                                        <span class="error-msg"></span>
                                        <label for="salaryvalidity" data-error="validity required & should be number!">Validity(months)</label> 
                                    </div>
                                    <div class="input-field col s4">
                                        <div class="switch">
                                            <label>
                                                <b>Status :</b> 
                                                <input type="checkbox" id="salarypackagestatus"  ng-checked="salarypackagestatus =='ACTIVE' " ng-model="salarypackagestatus" name="salarypackagestatus">
                                                <span class="lever"><p style="margin-left:50px;" ng-show="salarypackagestatus">Active</p><p style="margin-left:50px;" ng-show="salarypackagestatus != 'ACTIVE'">Inactive</p></span>

                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div id="clone-container-salarypackage" class="clone-container-package">

                                <div class="cloneId" class="row" ng-repeat="package in salarypackageCounter track by $index">
                                    <div id="salaryclonecontainer@{{$index}}">
                                        <table class="responsive-table">         
                                            <tr>
                                            <div class="input-field mandatory col s3">
                                                <select class="browser-default" id="salaryheadtype@{{$index}}" ng-model="pack[$index].salaryheadtype" name="salaryheadtype[]" data-select>
                                                    <option value=""disabled selected>Select Salary head</option>
                                                    <option ng-repeat="salaryhead in salaryheads.data" value="@{{salaryhead.id}}">@{{salaryhead.salaryhead}}</option>
                                                </select>
                                            </div>
                                            <div class="input-field col s2">
                                                <input type="text" id="monthlyamount@{{$index}}" name="monthlyamount[]" ng-model="pack[$index].monthlyamount" class="validate" placeholder="monthly amount">
                                            </div>
                                            <div class="input-field col s3">
                                                <div class="switch">
                                                    <label>
                                                        <b>Status :</b> 
                                                        <input type="checkbox" ng-model="pack[$index].salrypackagedetailstatus" id="salrypackagedetailstatus@{{$index}}" name="packagedetailstatus[]">
                                                        <span class="lever"><p style="margin-left:50px;"ng-show="pack[$index].salrypackagedetailstatus">Active</p><p style="margin-left:50px;" ng-show="pack[$index].salrypackagedetailstatus != true">Inactive</p></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="input-field col s2">
                                                <a ng-click="Clonepackagedetails($event)"><i class="fa fa-plus"></i> add</a>
                                                <a ng-click="droppackagedetails($event, $index)"ng-hide="$index == 0"><i class="fa fa-times"></i> remove</a>
                                            </div>    
                                            </tr>
                                        </table>
                                    </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="savesalarypackge($index)" type="submit">Save</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> 

                                </div>
                            </div>                
                            <div>
                                <div>
                                    <div class="input-field col s6" ng-hide="salarypackage.data == 0">
                                        <label style="margin-left: 50px">Search</label>  
                                        <input type="search" value="" ng-model="searchLeavepackagedetails" >
                                    </div>  

                                    <table class="responsive-table" ng-hide="salarypackage.data == 0">
                                        <thead>
                                            <tr>
                                                <th>Salaray Package Name</th>
                                                <th>Validity</th>
                                                <th>status</th>
                                                <th>Show</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="salrypkg in salarypackage.data|  filter:searchLeavepackagedetails" >

                                                <td>@{{salrypkg.packagename}}</td>
                                                <td>@{{salrypkg.validity}}</td>
                                                <td>@{{salrypkg.status}}</td>
                                                <td> 
                                                    <a href="#!" ng-click="showsalarypackagedetails(salrypkg.id, $index)"><i class="visibility"></i> view</a>
                                                </td>
                                                <td>
                                                    <a href="#!" ng-click="editsalarypackagedetails(salrypkg.id, $index)"><i class="fa fa-pencil fa-fw"></i> Edit</a>
                                                    <a href="#!" ng-click="showDeletepackagedetails(salrypkg.id, $index)" ><i class="fa fa-trash-o fa-fw"></i>Delete</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <div class="no-data" ng-show="salarypackage.data == 0">   
                                            <i class="no-data-img"></i>
                                            <p>No results found</p>
                                        </div>
                                        <div class="input-field col s12" ng-hide="salarypackage.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 || setCurrentsalarypackagePage(1)">&laquo;</a>
                                                </li>
                                                <li  ng-disabled="pagingData.current_page == 1">
                                                    <a href="" ng-click="pagingData.current_page == 1 || setCurrentsalarypackagePage(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="setCurrentsalarypackagePage(pageNumber)">@{{ pageNumber}}</a>
                                                </li>
                                                <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                                                    <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentsalarypackagePage(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 || setCurrentsalarypackagePage(pagingData.last_page)">&raquo;</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </table>
                                    <div id="modal-salarypackage-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="deletesalarypackage()" 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> 
                        <input type="hidden" name="salrypckgedetailsId" id="salrypckgedetailsId" ng-model="salrypckgedetailsId">
                    </form>
                    <div id="modal-show-salarypackagedetails" class="modal" data-modalfire>
                        <div class="modal-content"> 
                            <div class="input-field col s6" ng-hide="salarypackageshow == 0">
                                <label style="margin-left: 50px">Search</label>  
                                <input type="search" value="" ng-model="searchsalarypackageshow" >
                            </div>
                            <table class="responsive-table" ng-hide="salarypackageshow == 0">
                                <thead>
                                    <tr>

                                        <th>Label</th>
                                        <th>Monthly amount</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="salrypackge in salarypackageshow track by $index | filter:searchsalarypackageshow" >
                                        <td>@{{salrypackge.salaryhead}}</td> 
                                        <td>@{{salrypackge.monthlyamount}}</td>
                                        <td>@{{salrypackge.status}}</td>
                                        <td>
                                            <a href="#!" ng-click="showDeleteModalsalarypackgedtls(salrypackge.id, $index)" ><i class="fa fa-trash-o fa-fw"></i>Delete</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>


                        </div>

                        <div class="no-data" ng-show="salarypackageshow == 0"> 
                            <i class="no-data-img"></i>
                            <p>No results found</p>
                        </div>
                    </div>
                    <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>
        <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 '[]'}}"/>
        <input type="hidden" id="data-salarypackage" value="{{$salarypackage or '[]'}}"/>   
        <input type="hidden" id="data-usertype" value="{{$usertype or '[]'}}"/>
        </div>
        @stop