@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Account Receivable')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
    #company_id{
        width:12.5rem;
    }
</style>
@endsection

@section('content')
	<!-- Page header -->
	<div class="page-header {{in_array(\Auth::user()->role, [1,2]) ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4><span class="font-weight-semibold">AR Payment List</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<form method="GET" id="form-filter-payment-date">
			<div class="row mb-2 justify-content-between">
				<div class="d-flex pl-2">
					<label class="col-form-label mr-2" style="white-space: nowrap" for="payment_date_filter"><b>Payment Date</b></label>
					<input type="text" name="payment_date_filter" class="form-control" id="payment_date_filter">
				</div>

				<div class="d-flex pr-2">
					<label class="col-form-label mr-2 font-weight-bolder">Metode Pembayaran: </label>
					<div class="mr-1">
						<select name="payment_method" id="payment_method" onchange="onchangePaymentMethod()" class="form-control form-control-select2">
							<option value="">-- Select Payment Method --</option>
                            <option value="99_99" {{ isset($_GET['payment_method']) ? ($_GET['payment_method'] == '99_99' ? 'selected' : '') : '' }}>
                                All Method
                            </option>
							<!-- Angka 1 atau 2 di depan untuk flagging antara metode pembayaran atau jenis pembayaran-->
							@foreach($payment_methods as $payment_method)
							<option value="1_{{ $payment_method->id }}"
									{{ isset($_GET['payment_method']) ? ($_GET['payment_method'] == '1_'.$payment_method->id ? 'selected' : '') : '' }}
							>
								{{ $payment_method->nama }}
							</option>
							@endforeach

							@foreach($platform_headers as $platform_header)
							<option value="11_{{ $platform_header->id }}"
									{{ isset($_GET['payment_method']) ? ($_GET['payment_method'] == '11_'.$platform_header->id ? 'selected' : '') : '' }}
							>
								{{ $platform_header->name }}
							</option>
							@endforeach

							{{-- @foreach(config('custom.jenis_pembayaran') as $key => $jenis_pembayaran)
								@if(in_array($key, [3]))
								<option value="2_{{ $key }}"
										{{ isset($_GET['payment_method']) ? ($_GET['payment_method'] == '2_'.$key ? 'selected' : '') : '' }}
								>
									{{$jenis_pembayaran}}
								</option>
								@endif
							@endforeach --}}

							@foreach(config('custom.segment_ratecodes') as $key => $segment_ratecode)
								@if(in_array($key, [2,3,4,5,6,8,9,13,14,15]))
								<option value="3_{{ $key }}"
										{{ isset($_GET['payment_method']) ? ($_GET['payment_method'] == '3_'.$key ? 'selected' : '') : '' }}
								>
									{{ $segment_ratecode }}
								</option>
								@endif
							@endforeach
						</select>
					</div>
					<div>
						@php
						$filter_date = $_GET['payment_date_filter'] ?? '';
						$payment_method = $_GET['payment_method'] ?? '';
						@endphp
						<a id="print_ar_payment_list"
						   href="{{ route('account-receivable.print-payment-list') }}?payment_date_filter={{ $filter_date }}&payment_method={{ $payment_method }}"
						   class="btn btn-success"
						   target="_blank"
						>
							Print AR Payment List
						</a>
					</div>
				</div>
			</div>
		</form>
		<div class="card">
			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th>Bill Date</th>
						<th>Bill Number</th>
						<th>Payment ID</th>
						<th>Bill Receiver</th>
						<th style="text-align: right">Debt Amount</th>
						<th style="text-align: right">Pay Amount</th>
						<th>Pay-Date</th>
						<th>Payment Article</th>
						<th>Comment</th>
						<th style="text-align: center">Print</th>
					</tr>
				</thead>
				<tbody>
				@php
				$no = 1;
				@endphp

				@foreach($ar_payments as $key => $per_payment_ids)
					<!-- Per Metode Pembayaran -->
					@php $total = 0; @endphp
					<tr>
						<td colspan="10" class="font-weight-bolder">
							{{ $key }}
						</td>
					</tr>

					@foreach($per_payment_ids as $key_payment_id => $per_payment_id)
						<!-- Per Payment ID -->
						@php $total_per_payment_id = 0; @endphp

						@foreach($per_payment_id as $key_per_bill => $per_bills)
							@php $total_per_bill = 0; @endphp

							@foreach($per_bills as $payment_list)
							<tr>
								<td>{{ date('d-m-Y', strtotime($payment_list->payment_date)) }}</td>
								<td>
									<!-- Jika Pembayaran dari Booking deposit -->
									@if($payment_list->booking_deposit_id)
										@php
										$payment_id = @$payment_list->bookingDeposit->arBankReceipt($payment_list->payment_date)->id;
										@endphp

										@if($payment_list->bookingDeposit->booking)
											{{ @$invoice_array[@$payment_list->bookingDeposit->booking_id][@$payment_list->bookingDeposit->room_index]->no_invoice }}

											@php
											$bill_no = @$invoice_array[@$payment_list->bookingDeposit->booking_id][@$payment_list->bookingDeposit->room_index]->no_invoice;
											@endphp
										@else
											{{ @$payment_list->bookingDeposit->FolioDummy->no_bill }}

											@php
											$bill_no = @$payment_list->bookingDeposit->FolioDummy->no_bill;
											@endphp
										@endif
									@endif

									<!-- Jika Pembayaran dari pembayaran settlement -->
									@if($payment_list->pembayaran_id)
										{{ @$payment_list->pembayaran->invoice->no_invoice }}

										@php
										$payment_id = @$payment_list->pembayaran->arBankReceipt($payment_list->payment_date)->id;
										$bill_no = @$payment_list->pembayaran->invoice->no_invoice;
										@endphp
									@endif

									<!-- Jika Pembayaran dari pembayaran POS -->
									@if($payment_list->pembayaran_pos_id)
										{{ @$payment_list->pembayaranPOS->cart->order_flag }}

										@php
										$payment_id = @$payment_list->pembayaranPOS->arBankReceipt($payment_list->payment_date)->id;
										$bill_no = @$payment_list->pembayaranPOS->cart->order_flag;
										@endphp
									@endif
								</td>
								<td>{{ $payment_list->ar_bank_receipt_id }}</td>
								<td>
									<!-- Jika Pembayaran dari Booking Deposit -->
									@if($payment_list->booking_deposit_id)
										@if($payment_list->bookingDeposit->booking)
											@if($payment_list->bookingDeposit->booking->company)
											<!-- Jika Booking Dengan Company / Segmentasi Ledger -->
											{{ $payment_list->bookingDeposit->booking->company->comp_title.' '.$payment_list->bookingDeposit->booking->company->name ?? 'Customer' }}
											@else($payment_list->bookingDeposit->booking->invoice)
											<!-- Jika Booking Dengan Segmentasi Individual / Bukan Ledger -->
											{{ @$invoice_array[@$payment_list->bookingDeposit->booking_id][@$payment_list->bookingDeposit->room_index]->nama_pelanggan ?? 'Customer' }}
											@endif
										@else
											{{ $payment_list->bookingDeposit->folioDummy->guestProfile->name ?? 'Customer' }}
										@endif
									@endif

									<!-- Jika Pembayaran dari pembayaran settlement -->
									@if($payment_list->pembayaran_id)
										@if(@$payment_list->pembayaran->booking->company)
										<!-- Jika Booking Dengan Company / Segmentasi Ledger -->
										{{ @$payment_list->pembayaran->booking->company->comp_title.' '.@$payment_list->pembayaran->booking->company->name ?? 'Customer' }}
										@else
										<!-- JIka Booking Dengan Segmentasi Individual / Bukan Ledger -->
										{{ @$payment_list->pembayaran->invoice->nama_pelanggan ?? 'Customer' }}
										@endif
									@endif

									<!-- JIka Pembayaran dari pembayaran POS -->
									@if($payment_list->pembayaran_pos_id)
										@if($payment_list->pembayaranPOS->ledger)
										{{ $payment_list->pembayaranPOS->ledger->comp_title.' '.$payment_list->pembayaranPOS->ledger->name ?? 'Customer' }}
										@else
										{{ $payment_list->pembayaranPOS->cart->nama_pelanggan ?? 'Customer' }}
										@endif
									@endif
								</td>
								<td style="text-align: right">
									<!-- Jika Pembayaran dari booking deposit -->
									@if($payment_list->booking_deposit_id)
									{{ @ribuanWithComma($payment_list->bookingDeposit->nominal) }}
									@endif

									<!-- Jika Pembayaran dari pembayaran settlement -->
									@if($payment_list->pembayaran_id)
										@if($payment_list->pembayaran->tipe_pembayaran == 1)
										{{ @ribuanWithComma($payment_list->pembayaran->nominal) }}
										@else
										{{ @ribuanWithComma($payment_list->pembayaran->nominal * -1) }}
										@endif
									@endif

									<!-- Jika Pembayaran dari pembayaran POS -->
									@if($payment_list->pembayaran_pos_id)
									{{ @ribuanWithComma($payment_list->pembayaranPOS->nominal) }}
									@endif
								</td>
								<td style="text-align: right">
									{{ ribuanWithComma($payment_list->nominal) }}
									@php
									$total += $payment_list->nominal;
									$total_per_payment_id += $payment_list->nominal;
									$total_per_bill += $payment_list->nominal;
									@endphp
								</td>
								<td>{{ date('d-m-Y', strtotime($payment_list->payment_date)) }}</td>
								<td>{{ @$payment_list->pembayaranAr->nama_metode }}</td>
								<td>{{$payment_list->payment_comment ?? '-'}}</td>
								<td style="width: 5%; white-space: nowrap">
									<a href="{{ url('account-receivable/print-receipt-voucher/'.$payment_list->ar_bank_receipt_id) }}" target="_blank" class="btn btn-success"><i class="fas fa-print"></i>&nbsp;Print</a>
									<button type="button"
											class="btn btn-danger"
											data-target="#modal_ar_payment_list"
											data-toggle="modal"
											onclick="getPaymentList('{{$payment_list->ar_bank_receipt_id}}', '{{$bill_no}}')"
											title="AR Invoice List"
									>
										<i class="fas fa-times"></i>&nbsp;Cancel
									</button>
								</td>
							</tr>
							@endforeach

							<tr>
								<td colspan="5" style="text-align: right; font-weight: bolder">Total</td>
								<td style="text-align: right;">{{ ribuanWithComma($total_per_bill) }}</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						@endforeach

						{{--
							<tr>
								<td colspan="5" style="text-align: right; font-weight: bolder">Total (Per Group Payment)</td>
								<td style="text-align: right;">{{ ribuanWithComma($total_per_payment_id) }}</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						--}}
					@endforeach

					<tr>
						<td colspan="5" style="text-align: right; font-weight: bolder">Grand Total</td>
						<td style="text-align: right;">{{ ribuanWithComma($total) }}</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				@endforeach
				</tbody>
			</table>
		</div>
		<!-- /hover rows -->
	</div>
	<!-- /content area -->

	{{--
	--------------------------------------------------------------
	Modal AR Invoice List
	--------------------------------------------------------------
	--}}
	<div id="modal_ar_payment_list" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<h6 class="modal-title"><i class="fas fa-file-invoice-dollar mr-1"></i> Release AR Payment Records</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<form action="{{url('account-receivable/cancel-ar-payment')}}" id="form-cancel-ar" method="post">
					@csrf
					<div class="modal-body p-2">
						<div class="row">
							<div class="col-md-4">
								<div class="form-group">
									<label for="bill_no" class="font-weight-bolder">Bill No:</label>
									<input type="text" class="form-control" id="cancel_bil_no" value="" disabled>
									<input type="hidden" name="invoice_id" id="invoice_id" value="">
									<input type="hidden" name="room_index" id="room_index" value="">
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<label for="date" class="font-weight-bolder">Date:</label>
									<input type="text" class="form-control" id="cancel_date" value="" disabled>
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<label for="amount" class="font-weight-bolder">Amount:</label>
									<input type="text" name="cancel_amount" class="form-control" id="cancel_amount" value="" readonly>
								</div>
							</div>
						</div>
						<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th style="width: 1%">#</th>
									<th>Bill Date</th>
									<th>Balance</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody id="ar_payment_list">
								<tr>
									<td colspan="4" class="text-center">
										Tidak Ada Pembayaran
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer p-1">
						<button type="submit" class="btn btn-danger btn-block" onclick="passwordConfirmation()">Cancel Payment</button>
					</div>
				</form>
			</div>
		</div>
	</div>


    <!-- Modal Konfirmasi -->
    <div id="password_confirmation" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
				<div class="modal-body">
					<h3 class="text-center">Password Confirmation</h3>
					<div class="form-group row">
						<label class="col-form-label col-lg-2">Password</label>
						<div class="col-lg-10">
							<input type="password" name="password" class="form-control" id="cancel_ar_password" placeholder="Password" required autocomplete="off" value="">
							<span id="warning_password_false" class="text-danger font-weight-bolder"></span>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					<button type="button" id="submit-confirmation" class="btn bg-warning">OK</button>
				</div>
            </div>
        </div>
    </div>
    <!-- End modal print login -->

@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

	<!-- JS Date Picker -->
	<!-- <script src="{{asset('/')}}/global_assets/js/plugins/ui/moment/moment.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/daterangepicker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/anytime.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.date.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.time.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/legacy.js"></script> -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>


	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
	<script>
		$('#submit-confirmation').on('click', function(){
			let password = $('#cancel_ar_password').val();
			$.ajax({
                type: 'POST',
                url: "{{url('password-confirmation-transaction')}}",
                data: {
                    _token:'{{csrf_token()}}',
                    password: password,
                },
                success: function (response) {
					let _truefalse = parseInt(response);
					if(_truefalse){
						// console.log('True');
						$('#warning_password_false').html('');
						$('#form-cancel-ar').submit();
					}
					else{
						// console.log('False');
						$('#warning_password_false').html('Password Salah');
					}
                }
            });
		});

		function passwordConfirmation(){
			event.preventDefault();
			$('#password_confirmation').modal('show');
		}

		function getPaymentList(id, bill_no){
			$('#cancel_bil_no').val(bill_no);

			$.ajax({
				type: 'GET',
				url: "{{url('account-receivable/get-payment-list')}}/"+id,
				success: function(response){
					let data = response.ar_bank_receipt;
					let html = "";
					let no = 1;

					console.log(data);

					if(data){
						$('#cancel_date').val(moment(data.date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY'));
						$('#cancel_amount').val(parseInt(data.paid_sum).toLocaleString('en'));

						$.each(data.ar_payments, function(idx, value){
							html += `
								<tr id="payment_list${idx}">
									<td>
										<input type="checkbox" name="check[${idx}]"
											   id="check${idx}" value="${idx}"
											   data-idx="${idx}" onclick="check(${idx})" checked>
										<input type="hidden" name="ar_payment_id[${idx}]"
											   id="ar_payment_id${idx}" value="${value.id}"
											   data-idx="${idx}">
									</td>
									<td>${moment(value.payment_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}</td>
									<td>${parseInt(value.nominal).toLocaleString('ID')}</td>
									<td>${value.pembayaran_ar.nama_metode}</td>
								</tr>
							`;
							no++;
						});
					}

					// if(data.pembayaran.ar_payment){
					// 	$.each(data.pembayaran.ar_payment, function(idx, value){
					// 		html += `
					// 			<tr id="payment_list${idx}">
					// 				<td>
					// 					<input type="checkbox" name="check[${idx}]"
					// 						   id="check${idx}" value="${idx}"
					// 						   data-idx="${idx}" onclick="check(${idx})" checked>
					// 					<input type="hidden" name="ar_payment_id[${idx}]"
					// 						   id="ar_payment_id${idx}" value="${value.id}"
					// 						   data-idx="${idx}" disabled>
					// 				</td>
					// 				<td>${moment(value.payment_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}</td>
					// 				<td>${(parseInt(value.nominal) * -1).toLocaleString('ID')}</td>
					// 				<td>${value.pembayaran_ar.nama_metode}</td>
					// 			</tr>
					// 		`;
					// 		no++;
					// 	});
					// }
					//
					// // Jika dari data pembayaran
					// if(data.pembayaran){
					// 	$('#invoice_id').val(data?.pembayaran?.invoice_id.toLocaleString('id'));
					// 	$('#room_index').val(data?.pembayaran?.room_index.toLocaleString('id'));
					//
					// 	let no = 1;
					//
					// 	if(data.pembayaran.ar_payment){
					// 		$.each(data.pembayaran.ar_payment, function(idx, value){
					// 			html += `
					// 				<tr id="payment_list${idx}">
					// 					<td>
					// 						<input type="checkbox" name="check[${idx}]"
					// 							   id="check${idx}" value="${idx}"
					// 							   data-idx="${idx}" onclick="check(${idx})" checked>
					// 						<input type="hidden" name="ar_payment_id[${idx}]"
					// 							   id="ar_payment_id${idx}" value="${value.id}"
					// 							   data-idx="${idx}" disabled>
					// 					</td>
					// 					<td>${moment(value.payment_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}</td>
					// 					<td>${(parseInt(value.nominal) * -1).toLocaleString('ID')}</td>
					// 					<td>${value.pembayaran_ar.nama_metode}</td>
					// 				</tr>
					// 			`;
					// 			no++;
					// 		});
					// 	}
					// }
					//
					// // Jika dari data booking deposit
					// if(data.booking_deposit){
					// 	$('#cancel_date').val(moment(data?.booking_deposit?.transaction_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY'));
					// 	$('#cancel_amount').val(data?.booking_deposit?.nominal.toLocaleString('id'));
					// 	$('#invoice_id').val(data?.booking_deposit?.invoice_id?.toLocaleString('id'));
					// 	$('#room_index').val(data?.booking_deposit?.room_index?.toLocaleString('id'));
					//
					// 	let no = 1;
					//
					// 	if(data.booking_deposit.ar_payment){
					// 		$.each(data.booking_deposit.ar_payment, function(idx, value){
					// 			html += `
					// 				<tr id="payment_list${idx}">
					// 					<td>
					// 						<input type="checkbox" name="check[${idx}]"
					// 							   id="check${idx}" value="${idx}"
					// 							   data-idx="${idx}" onclick="check(${idx})" checked>
					// 						<input type="hidden" name="ar_payment_id[${idx}]"
					// 							   id="ar_payment_id${idx}" value="${value.id}"
					// 							   data-idx="${idx}" disabled>
					// 					</td>
					// 					<td>${moment(value.payment_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}</td>
					// 					<td>${(parseInt(value.nominal) * -1).toLocaleString('ID')}</td>
					// 					<td>${value.pembayaran_ar.nama_metode}</td>
					// 				</tr>
					// 			`;
					// 			no++;
					// 		});
					// 	}
					// }
					//
					// //Jika dari pembayaran Pos
					// if(data.pembayaran_pos){
					// 	$('#cancel_date').val(moment(data?.pembayaran_pos?.transaction_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY'));
					// 	$('#cancel_amount').val(data?.pembayaran_pos?.nominal.toLocaleString('id'));
					// 	$('#invoice_id').val('');
					// 	$('#room_index').val('');
					//
					// 	let no = 1;
					//
					// 	if(data.pembayaran_pos.ar_payment){
					// 		$.each(data.pembayaran_pos.ar_payment, function(idx, value){
					// 			html += `
					// 				<tr id="payment_list${idx}">
					// 					<td>
					// 						<input type="checkbox" name="check[${idx}]"
					// 							   id="check${idx}" value="${idx}"
					// 							   data-idx="${idx}" onclick="check(${idx})" checked>
					// 						<input type="hidden" name="ar_payment_id[${idx}]"
					// 							   id="ar_payment_id${idx}" value="${value.id}"
					// 							   data-idx="${idx}" disabled>
					// 					</td>
					// 					<td>${moment(value.payment_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}</td>
					// 					<td>${(parseInt(value.nominal) * -1).toLocaleString('ID')}</td>
					// 					<td>${value.pembayaran_ar.nama_metode}</td>
					// 				</tr>
					// 			`;
					// 			no++;
					// 		});
					// 	}
					// }


					$('#ar_payment_list').html(html);
				}
			});
		}

		function check(idx){
			let is_checked = $('#check'+idx).is(':checked');
			if(is_checked){
				$('#ar_payment_id'+idx).removeAttr('disabled');
			}
			else{
				$('#ar_payment_id'+idx).attr('disabled', 'disabled');
			}
		}

		$('#payment_date_filter').daterangepicker({
			startDate: "{{ $startdate_filter }}",
            endDate:  "{{ $enddate_filter }}",
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
                format: 'DD-MM-YYYY'
            }
		});

		// Filter Payment Date Action
		$('#payment_date_filter').on('change', function(){
			console.log('test');
			$('#form-filter-payment-date').submit();
		});

		// Button AR Payment
		$('#btn_ar_payment').on('click', function(){
			let checkbox_selected = $('[type="checkbox"]:checked');
			let ar_payment_amount = 0;
			let bill_name = "";
			let html_selected_bill = "";

			$.each(checkbox_selected, function(idx, element){
				let idx_element = $(element).attr('data-idx');

				let pembayaran_id = $('#pembayaran_id'+idx_element).val();
				let booking_deposit_id = $('#booking_deposit_id'+idx_element).val();
				let pembayaran_pos_id = $('#pembayaran_pos_id'+idx_element).val();

				let no_bill = $('#no_bill'+idx_element).val();
				let debt_amount = parseInt($('#debt_amount'+idx_element).val());
				let pay_amount = parseInt($('#pay_amount'+idx_element).val());
				let balance = parseInt($('#balance'+idx_element).val());

				//Assign Value Di Form Modal
				ar_payment_amount += balance;

				//Index 0
				if(idx == 0){
					bill_name = $('#nama_pelanggan'+idx_element).val();
				}

				// HTML Selected Bill
				html_selected_bill += `<input type="hidden" name="pembayaran_id[${idx}]"
											   id="pembayaran_id${idx}" value="${pembayaran_id}">
									   <input type="hidden" name="booking_deposit_id[${idx}]"
											   id="booking_deposit_id${idx}" value="${booking_deposit_id}">
									   <input type="hidden" name="pembayaran_pos_id[${idx}]"
											   id="pembayaran_pos_id${idx}" value="${pembayaran_pos_id}">

									   <input type="hidden" name="no_bill[${idx}]"
	   									   id="no_bill${idx}" value="${no_bill}">
									   <input type="hidden" name="debt_amount[${idx}]"
	   									   id="debt_amount${idx}" value="${debt_amount}">
		   							   <input type="hidden" name="pay_amount[${idx}]"
		   								   id="pay_amount${idx}" value="${pay_amount}">
		   							   <input type="hidden" name="balance[${idx}]"
		   								   id="balance${idx}" value="${balance}">`;
			});

			$('#ar_payment_amount').val(ar_payment_amount);
			$('#bill_name').val(bill_name);
			$('#selected_bill').html(html_selected_bill);
		});

		// Javascript Untuk Checked Checkbox
		let jumlah_checked = 0;
		$('[type="checkbox"]').on('click', function(){
			let id = $(this).attr('id');
			let checked = $("#"+id+":checked").length > 0;
			if(checked){
				jumlah_checked++
				$("#row_"+id).find('[type="hidden"]').removeAttr('disabled');
			}
			else{
				jumlah_checked--
				$("#row_"+id).find('[type="hidden"]').attr('disabled', 'disabled');
			}

			if (jumlah_checked > 0) {
				$('#create_invoice_submit').attr('disabled', false)
			}else{
				$('#create_invoice_submit').attr('disabled', true)
			}
		});

		//Memunculkan Debit Berdasarkan Metode Pembayaran
		function onchangePaymentMethod(){
			let newRequest = window.location.search;
            let params = new URLSearchParams(newRequest);
			params.delete('payment_method');
            params.append('payment_method', document.getElementById("payment_method").value);
            document.location.href = "?" + params.toString();
		}


		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{
		                orderable: false,
		                targets: [ 0 ]
		            }],
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable();

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

		});
	</script>


<script>
	var DateTimePickers = function() {

		// Daterange picker
		var _componentDaterange = function() {
			if (!$().daterangepicker) {
				console.warn('Warning - daterangepicker.js is not loaded.');
				return;
			}

			// Basic initialization
			$('.daterange-basic').daterangepicker({
				applyClass: 'btn-primary',
				cancelClass: 'btn-light'
			});

			// Single picker
			$('.daterange-single').daterangepicker({
				singleDatePicker: true,
				locale: {
					format: 'YYYY-MM-DD'
				}
			});

		};

		return {
			init: function() {
				_componentDaterange();
			}
		}
	}();

	document.addEventListener('DOMContentLoaded', function() {
		DateTimePickers.init();
	});

</script>
@endsection