@extends('hr::layouts.master')
@section('content')
<script src="{{ asset('/js/accounting/controller/accountingModules.js')}}"></script>
<script src="{{ asset('/js/accounting/controller/systemaccountheadsController.js')}}"></script>
<script src="{{ asset('/js/validation.js')}}"></script>

<div  ng-app="accountingApp">
    <div ng-controller="systemheadsCtrl" ng-init="systemheadsPagingInit()">
        
        <!--display starts here.-->
        <div class="col s12">
            <div class="card">
                <h1 class="page-title">System account heads
                </h1>
            </div>
        </div>
        
        <!--Hidden Variables -->
        <input type="hidden" id='data-systemhead' value="{{$systemheads or '[]'}}"/>
        <input type="hidden" id='data-parents' value="{{$parents or '[]'}}"/>
        <input type="hidden" id='data-accounthead' value="{{$accountheads or '[]'}}"/>
        <!--hidden variables end here.-->

        <div ng-show="systemheads.data == 0">
            <div ng-show="systemheads.data == 0" class="col s12 card">
                <div class="no-data">   
                    <i class="no-data-img"></i>
                    <p>No results found</p>
                </div>
            </div>
        </div>
        <div ng-hide="systemheads.data == 0">
            <br>

            <!--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 || setCurrentsystemheadPage(1)">&laquo;</a>
                </li>
                <li  ng-disabled="pagingData.current_page == 1">
                    <a href="" ng-click="pagingData.current_page == 1 || setCurrentsystemheadPage(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="setCurrentsystemheadPage(pageNumber)">@{{ pageNumber}}</a>
                </li>

                <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                    <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentsystemheadPage(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 || setCurrentsystemheadPage(pagingData.last_page)">&raquo;</a>
                </li>
            </ul>
            <!--Pagination ends here-->

            <div class="col m12  ">  
                <div class="card">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover highlight">
                            <thead>
                                <tr>
                                    <th>Shortcode</th>
                                    <th>Parent</th>
                                    <th>Account Head</th>
                                    <th>Allow Reconciliation</th>
                                    <th>Depreciated</th>
                                    <th>Status</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="systemhead in systemheads.data|  filter:search">
                                    <td>@{{systemhead.shortcode}}</td>
                                    <td>@{{systemhead.parenthead}}</td>
                                    <td>@{{systemhead.type}}</td>
                                    <td>@{{systemhead.reconciliation}}</td>
                                    <td>@{{systemhead.depreciation}}</td>
                                    <td>@{{systemhead.status}}</td>
                                    <td>
                                        <a href="#!" ng-click="editSystemhead(systemhead.id,$index)"><i class="fa fa-pencil fa-fw"></i>Edit</a>
                                    </td>
                                    <td>
                                        <a href="#!" ng-click="deleteSystemhead(systemhead.id,$index)"><i class="fa fa-trash-o fa-fw"></i>Delete</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>   
            </div>
        </div>
        <!--dispay ends here-->
        
        <div class="col s12">
            <div class="primay-footer ">
                    <div class="row">
                        <div class="input-field right">  
                            <a class="waves-effect waves-light btn" href="#modal_createsystemhead" ng-click="clearsystemhead()">Add new</a>
                        </div>
                    </div>
            </div>
        </div>
        
        <!-- Modal Structure for creation starts here-->
        <div id="modal_createsystemhead" class="modal" data-modalfire>
            <div class="modal-content">
                <h4>Create Account System Head</h4>                
                <div class="row">
                    <form class="custom-form col s12 " id="frmsystemhead">
                        <div class="row">
                            <div class="row">
                            <div class="input-field col s6">
                                <p>Accounting head</p>
                                <select id="drpaccHead" class="browser-default" name="drpaccHead" ng-scope="drpaccHead">
                                    <option ng-repeat="accounthead in accountheads.data" value="@{{accounthead.id}}">@{{accounthead.accounthead}}</option>
                                </select>
                            </div>
                            <div class="input-field col s6">
                                <p>shortcode</p>
                                <input id="txtshortcode" type="text" name="txtshortcode" ng-model="txtshortcode" data-vtype="number" required>
                                <span class="error-msg"></span>
                            </div>
                            </div>
                            <div class="row">
                            <div class="input-field col s6">
                                <p>Type</p>
                                <input id="txttype" type="text" name="txttype" ng-model="txttype" data-vtype="text" required>
                                <span class="error-msg"></span>
                            </div>
                            <div class="input-field col s6">
                                <p>Parent</p>
                                <select id="drpparent" class="browser-default" name="drpparent" ng-scope="drpparent">
                                    <option value=""></option>
                                    <option ng-repeat="parent in parents.data" value="@{{parent.id}}">@{{parent.type}}</option>
                                </select>
                            </div>
                            </div>
                            <div class="input-field col s4">
                                <input id="chkreco" type="checkbox" name="chkreco" ng-model="chkreco">
                                <label for="chkreco">Allow reconciliation</label>
                            </div>
                            <div class="input-field col s4">
                                <input id="chkdepr" type="checkbox" name="chkdepr" ng-model="chkdepr">
                                <label for="chkdepr">Depreciation</label>
                            </div>
                            
                            <input type="hidden" value="" id="systemheadId" name='systemheadId' ng-model="systemheadId"/>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">    
                <a href="#!" ng-click="saveSystemhead($event)" class="waves-effect waves-light btn">Create</a>
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
            </div>
        </div>
    <!-- Modal Structure for creation ends here-->
    
            <!--modal structure for deletion starts here.-->
            <div id="modal-delete-systemhead" 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="deletehead()" 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>
            <!--modal structure for deletion ends here.-->
        
    </div>
</div>                
@stop