@extends('adminlte::page')
@section('css')
<style>
	.modal-8 {
		width: 50%;
	}
</style>
@stop
@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="#">Reports</a></li>
		<li><a href="#">Report Operation</a></li>
		<li><a href="#">Canceled Installment</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="col-sm-12 col-xs-12">
					<div class="row">
						<div class="pull-left">
							<h2>Payment Cancellation List</h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><br />
	<form action="{{ route('get_payment_operation_cancellation') }}" method="POST">
		@csrf
		<div class="form-search">
			<div class="row">
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Client Name</strong> {!! Form::select('client_id',$clients,null, array('class' => 'form-control select2',"id"=>"client_id")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Client Phone</strong> {!! Form::text('client_phone', null, array('placeholder' => 'Client Phone','class' => 'form-control','autocomplete' => 'off',"id"=>"client_phone")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Agency</strong> {!! Form::select('agency_id', $agencies,[], array('class' => 'form-control select2',"id"=>"agency_id")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Project</strong> {!! Form::select('project_id', $projects,[], array('class' => 'form-control select2',"id"=>"project_id")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Category</strong> {!! Form::select('category_id', $categories,null, array('class' => 'form-control select2',"id"=>"category_id")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Item Name</strong> {!! Form::text('item_name', null, array('placeholder' => 'Item Name','class' => 'form-control','autocomplete' => 'off',"id"=>"item_name")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>Start Date</strong> {!! Form::text('start_date', null, array('placeholder' => 'Start Date','class' => 'form-control date_picker','autocomplete' => 'off',"id"=>"start_date")) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-4 col-md-4">
					<div class="form-group">
						<strong>End Date</strong> {!! Form::text('end_date', null, array('placeholder' => 'End Date','class' => 'form-control date_picker','autocomplete' => 'off',"id"=>"end_date")) !!}
					</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
					<!-- <button type="submit" class="btn btn-warning fa fa-print"> Print</button> -->
				</div>
			</div>
		</div>
		{!! Form::close() !!}
		<div>
			<div class="row">
				<div class="col-sm-12 col-xs-12">
					<div class="box-body table-responsive">
						<table id="datatable_client_cancel_payment" class="table table-striped table-bordered table-hover nowrap">
							<thead>
								<tr>
									<th></th>
									<th>No</th>
									<th>Cancel Date</th>
									<th>Client Name</th>
									<th>Agency</th>
									<th>Project</th>
									<th>Category</th>
									<th>Item</th>
									<th>Selling Price</th>
									<th>Duration</th>
									<th>Interest</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
</div>
@endsection

@section('js')
<script type="text/javascript" src="{{asset('assets/scripts/yajrabox-datatable/handlebars.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/controller/client-payment-schedule-administrator.js')}}"></script>
<script id="details-template" type="text/x-handlebars-template">
	@verbatim
	    <div style="border-top:2px solid #000;"></div>
	    <table class="table details-table" id="purchases-{{id}}">
	        <thead>
	        <tr>
	        	<th>No</th>
	            <th>Payment Date</th>
	            <th>Principal</th>
				<th>Interest</th>
				<th>Principal Balance</th>
				<th>Payment</th>
				<th>Payment Owed</th>
				<th>Penalty</th>
	            <th>Status</th>
	        </tr>
	        </thead>
	    </table>
	    @endverbatim
	</script>

<script type="text/javascript">
	$(document).ready(function() {
		$('.readonly').attr('readonly', true);
	});
	$('.main-spinner').show();
	var template = Handlebars.compile($("#details-template").html());
	var table = $('#datatable_client_cancel_payment').DataTable({
		ordering: false,
		serverSide: true,
		searching: true,
		paging: true,
		"lengthMenu": [
			[20, 25, 50, 100, 500],
			[20, 25, 50, 100, 500]
		],
		dom: 'Blfrtip',
		buttons: [
			'copyHtml5',
			'excelHtml5',
			'csvHtml5',
			'pdfHtml5'
		],
		ajax: "{{ route('get_payment_operation_cancellation') }}",
		columns: [{
				"className": 'details-control',
				"orderable": false,
				"searchable": false,
				"data": null,
				"defaultContent": ''
			},
			{
				data: 'DT_RowIndex'
			},
			{
				data: 'cancel_date'
			},
			{
				data: 'client_name'
			},
			{
				data: 'agent_name'
			},
			{
				data: 'project_name'
			},
			{
				data: 'category_name'
			},
			{
				data: 'item_names'
			},
			{
				data: 'salling_price'
			},
			{
				data: 'loan_duration'
			},
			{
				data: 'loan_interest'
			},
		],
		"initComplete": function(settings, json) {
			$('.main-spinner').hide();
		}
	});

	function searching() {
		$('#datatable_client_cancel_payment').DataTable().destroy();
		var client_id = $('#client_id').val();
		var project_id = $('#project_id').val();
		var category_id = $('#category_id').val();
		var client_phone = $('#client_phone').val();
		var item_name = $('#item_name').val();
		var agency_id = $('#agency_id').val();
		table = $('#datatable_client_cancel_payment').DataTable({
			ordering: false,
			serverSide: false,
			searching: true,
			paging: true,
			"lengthMenu": [
				[20, 25, 50, 100, 500],
				[20, 25, 50, 100, 500]
			],
			dom: 'Blfrtip',
			buttons: [
				'copyHtml5',
				'excelHtml5',
				'csvHtml5',
				'pdfHtml5'
			],
			ajax: {
				type: "POST",
				url: "{{ route('get_payment_operation_cancellation') }}",
				data: {
					_token: "{{csrf_token()}}",
					client_id: client_id,
					project_id: project_id,
					category_id: category_id,
					client_phone: client_phone,
					item_name: item_name,
					agency_id: agency_id
				}
			},
			columns: [{
					"className": 'details-control',
					"orderable": false,
					"searchable": false,
					"data": null,
					"defaultContent": ''
				},
				{
					data: 'DT_RowIndex'
				},
				{
					data: 'cancel_date'
				},
				{
					data: 'client_name'
				},
				{
					data: 'agent_name'
				},
				{
					data: 'project_name'
				},
				{
					data: 'category_name'
				},
				{
					data: 'item_names'
				},
				{
					data: 'salling_price'
				},
				{
					data: 'loan_duration'
				},
				{
					data: 'loan_interest'
				},
			],
			"initComplete": function(settings, json) {
				$('.main-spinner').hide();
			}
		});
	}
</script>
@endsection