@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="#">Report Project Owner</a></li>
			<li><a href="#">Client List</a></li>
		</ul>
	</div>
</div>
<div class="page">
	<div class="top-content">
		<div class="row">
			<div class="col-sm-12 col-xs-12">
				<div class="title-add">
					<div class="pull-left">
						<h3>Client List</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
	<form action="{{url('realty/report-client-list-print')}}" method="POST">
		@csrf
		<div class="form-search">
			<div class="row">
				<div class="col-xs-12 col-sm-3 col-md-3">
					<div class="form-group">
						<strong>Project Name</strong>
						{!! Form::select('project_name', $projects, null, ['class' => 'form-control select2 form-control project_name']) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 text-right">
					<button type="button" class="button_primary btn-sm search" onclick="searching()">
						<span class="fa fa-search"> Search</span></button>&nbsp
					@can('Client-Payment-Report-Print')
					<button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
					@endcan
				</div>
			</div>
		</div>
	</form>
	<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>Date</th>
								<th>Client Name</th>
								<th>Gender</th>
								<th>Phone</th>
								<th>Project</th>
								<th>Category</th>
								<th>Item Code</th>
								<th>Item Price</th>
								<th>Paid Amount</th>
								<th>Paid Percent</th>
								<th>Status</th>
							</tr>
						</thead>
						<tbody class="tbody"></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection
@section('js')

<script type="text/javascript">
	$(document).ready(function() {
		$('.main-spinner').show();
		var index = $('#datatable_client_payment').DataTable({
			"serverSide": true,
			"lengthMenu": [
				[20, 30, 50, 100, -1],
				[20, 30, 50, 100, "All"]
			],
			ajax: "{{ route('datatable.get_external_client_list') }}",
			columns: [{
					data: 'DT_RowIndex'
				},
				{
					data: 'created_at'
				},
				{
					data: 'client_fullname'
				},
				{
					data: 'client_gender'
				},
				{
					data: 'client_phone1'
				},
				{
					data: 'project_name'
				},
				{
					data: 'category_name'
				},
				{
					data: 'item_name'
				},
				{
					data: 'sale_amount'
				},
				{
					data: 'sale_amount_paid'
				},
				{
					data: 'sale_amount_paid_percent'
				},
				{
					data: 'status'
				},
			],

			"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>
<script type="text/javascript">
	function searching() {

		var project_name = $('.project_name').val();
		var table = '';
		var i = 0;
		var total_sale_amount = 0;
		var total_sale_receive = 0;
		var total_sale_balance = 0;
		$('.tbody').empty();
		$.ajax({
			method: 'POST',
			dataType: 'json',
			url: '/realty/get-exteranl-client-list-datatable',
			async: false,
			data: {

				_token: '{{ csrf_token() }}',
				project_name: project_name,
			},
			success: function(response) {
				$.each(response, function(index, val) {
					var dateTimeSplit = val.created_at.split(' ');
					st2 = dateTimeSplit[0].split('-');


					yr = st2[0];
					mo = st2[1];
					dy = st2[2];
					var depo_date = dy + '-' + mo + '-' + yr;
					var gen = '';
					switch (val.client_gender) {
						case '1':
							gen = "Male";
							break;

						default:
							gen = "Female";
							break;
					}
					var status = '';
					var sale_amount_paid_percent = (val.sale_payment * 100 / val.sale_amount);
					if (val.status == 1) {
						if (sale_amount_paid_percent >= val.admin_commission_condition) {
							status = '<i class="fa fa-check"></i> Completed';
						} else {
							status = '<i class="fa fa-spinner"></i> Pending';
						}
					} else {
						status = '<i class="fa fa-close"></i> Cancelled';
					}

					i++;
					table += "<tr class='remove'>" +
						"<td style='text-align: center;'>" + i + "</td>" +
						"<td style='text-align: center;'>" + depo_date + "</td>" +
						"<td>" + val.client_fullname + "</td>" +
						"<td>" + gen + "</td>" +
						"<td>" + val.client_phone1 + "</td>" +
						"<td>" + val.project_name + "</td>" +
						"<td>" + val.category_name + "</td>" +
						"<td>" + val.item_name + "</td>" +
						"<td style='text-align: right;'>$ " + parseFloat(val.sale_amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
						"<td style='text-align: right;'>$ " + parseFloat(val.sale_payment).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
						"<td style='text-align: right;'>" + parseFloat(val.sale_payment * 100 / val.sale_amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + " %</td>" +
						"<td style='text-align: right;'>" + status + "</td>" +
						"</tr>";

				});

				$('.dataTables_filter').hide();
				$('.dataTables_info').hide();
				$('.pagination').hide();
				$('.dataTables_length').hide();


				$('.tbody').append(table);

			},

		});
	}
</script>
@endsection