@extends('adminlte::page')

@section('content')
<?php Fun::lang() ?>
<div class="title-page">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li><a href="#">Operation</a></li>
            <li><a href="#">Manage Operation</a></li>
            <li><a href="#">Client Maintenance House</a></li>
        </ul>
    </div>
</div>
<div class="page">
	<div class="row">
		<div class="col-sm-12 col-xs-12">
			<div class="title-add">
				<div class="pull-left">
					<h2>Client Maintenance List</h2>
				</div>
			</div>
		</div>
		
	</div>
	<div class="row">
		<div class="col-sm-12 col-xs-12">
			<div class="box-body table-responsive">
				<table id="datatable_client_payment" class="table table-striped table-bordered table-hover nowrap">
					<thead>
						<tr>
							<th>No</th>
							<th>Client Code</th>
							<th>Client Name</th>
							<th>Gender</th>
							<th>DOB</th>
							<th>Phone</th>
							<th>Address</th>
							<th>Action</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>
@endsection
@section('js')

<script type="text/javascript">
	$(document).ready(function() {
		$('#main-spinner').show();
		var index = $('#datatable_client_payment').DataTable({
			ordering: false,
			"serverSide": true,
			"scrollY":        "600px",
            "scrollCollapse": true,
			"lengthMenu": [
				[20, 30, 50, 100, -1],
				[20, 30, 50, 100, "All"]
			],
			ajax: "{{ route('maintenance-list.index') }}",
			columns: [{
					data: 'DT_RowIndex'
				},
				{
					data: 'client_code'
				},
				{
					data: 'client_fullname'
				},
				{
					data: 'client_gender'
				},
				{
					data: 'client_dob'
				},
				{
					data: 'client_phone1'
				},
				{
					data: 'client_address'
				},
				{
					data: 'action'
				},
			],

			"initComplete": function(settings, json) {
				$('#main-spinner').hide();
			}
		});
		index.on('order.dt search.dt', function() {
			index.column(0, {
				search: 'applied',
				order: 'applied'
			}).nodes().each(function(cell, i) {
				cell.innerHTML = i + 1;
			});
		}).draw();
		$.fn.dataTable.ext.errMode = 'throw';
	});
</script>
@endsection