@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 Payment</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 List</h2>
				</div>
				<div class="pull-right">
					<a class="button_sm button_info" href="javascript:void(0)" id="filter-toggle-search"><span class="fa fa-plus"></span>  Filter Toggle</a>
				</div>
			</div>
		</div>
		
	</div>
	<div class="row">
		<div class="col-sm-12 col-xs-12">
			<div class="box-body table-responsive">
				<div class="row" id="toggle-seaching">
					<br>
					<div class="col-md-6">
						<div class="form-group">
							<strong >Client :</strong>
							{!! Form::select('client_id',$clients,null, array('class' => 'form-control select2','multiple')) !!}
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<strong >Item :</strong>
							{!! Form::select('item_id',$items,null, array('class' => 'form-control select2','multiple')) !!}
						</div>
					</div>
					<div class="col-md-12" style="text-align:right;margin-bottom:40px !important;">
						<a class="button_sm button_success" href="javascript:void(0)" id="search-submit" onclick="searching()"><span class="fa fa-search"></span> Search</a>
					</div>
				</div>
				<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>Item</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">
	function searching(){
		$("#datatable_client_payment").DataTable().draw(true);
	}
	$(document).ready(function() {
		$('#main-spinner').show();
		var index = $('#datatable_client_payment').DataTable({
			ordering: true,
			"serverSide": true,
			"scrollY":        "600px",
            "scrollCollapse": true,
			"lengthMenu": [
				[20, 30, 50, 100, -1],
				[20, 30, 50, 100, "All"]
			],
			ajax: {
				url:"{{ route('sale-list.index') }}",
				type:"GET",
				data: function(d){
					d.client_id = $("select[name=client_id]").val();
					d.item_id = $("select[name=item_id]").val();
				},
			},
			columns: [{
					data: 'DT_RowIndex'
				},
				{
					data: 'client_code'
				},
				{
					data: 'client_fullname'
				},
				{
					data: 'item_houses'
				},
				{
					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