@extends('front.layouts.front1')

@section('head')
	<!-- BEGIN PAGE LEVEL STYLES -->
	{!! HTML::style("assets/global/plugins/select2/select2.css") !!}
	{!! HTML::style("assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css") !!}
	<!-- END PAGE LEVEL STYLES -->

@stop


@section('mainarea')

			<!-- BEGIN PAGE CONTENT-->
			<div class="panel panel-grey">
				<div class="panel-heading">
					<h3 class="panel-title"><i class="fa fa-tasks"></i> My Salary List</h3>
				</div>
				<div class="panel-body">

			<div class="row">
				<div class="col-md-12">

					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div id="load">

					@if(Session::get('success'))
					    <div class="alert alert-success">{!! Session::get('success') !!}</div>
                    @endif

					</div>
					<div class="portlet box blue">
						<div class="portlet-title">
							
							<div class="tools">
							</div>
						</div>

						<div class="portlet-body">


							<table class="table table-striped table-bordered table-hover" id="salary1">
								<thead>
									<tr>
										<th> ID </th>
										<th> Employee Name</th>
										<th> Updated From </th>
										<th> Basic Salary </th>
										<th> HRA </th>
										<th> Dearness Allowance </th>
										<th> Special Allowance </th>
										<th> Hidden EmployeeID</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->

				</div>
			</div>
				</div>
			</div>
			<!-- END PAGE CONTENT-->
			<div style="margin-bottom:255px;">

			</div>
@stop



@section('footerjs')


<!-- BEGIN PAGE LEVEL PLUGINS -->
	{!!  HTML::script("assets/global/plugins/select2/select2.min.js") !!}
    {!! HTML::script("assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js") !!}
	{!!  HTML::script("assets/global/plugins/datatables/media/js/jquery.dataTables.min.js") !!}
	{!!  HTML::script("assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js") !!}

<!-- END PAGE LEVEL PLUGINS -->

<script>


	var table =	$('#salary1').dataTable( {
			"cache": true,
			"bProcessing": true,
			"bServerSide": true,
			// "bDestroy": true,
			"order": [[0, "desc"]],
			"ajax": "{{ route("front.ajaxSalaryDetails") }}",
			"aoColumns": [
				{ 'sClass': 'center', "bSortable": true  },
				{ 'sClass': 'center', "bSortable": true  },
				{ 'sClass': 'center', "bSortable": true },
				{ 'sClass': 'center', "bSortable": true },
				{ 'sClass': 'center', "bSortable": true },
				{ 'sClass': 'center', "bSortable": true },
				{ 'sClass': 'center', "bSortable": true },
				{ 'sClass': 'center', "bSortable": true }


			],
			"columnDefs": [
						{
							"targets": [ 0 ],
							"visible": false,
							"searchable": false
						},{
						  "targets": [ 7 ],
						  "visible": false,
						  "searchable": true
					  }
						],
			"lengthMenu": [
							[5, 15, 20, -1],
							[5, 15, 20, "All"] // change per page values here
						],
			"sPaginationType": "full_numbers",
			"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
				var row = $(nRow);
				row.attr("id", 'row'+aData['0']);
			}

		 });
</script>
@stop