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

@section('title', 'A/P Payment List')

@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]) == 1 ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4><span class="font-weight-semibold">AP 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">Company: </label>
					<div class="mr-1">
						<select name="company_id" id="company_id" onchange="onchangeCompany()" class="form-control form-control-select2">
							<option value="">-- Select Company --</option>
							<option value="A" {{ isset($_GET['company_id']) ? ($_GET['company_id'] == 'A' ? 'selected' : '') : '' }}>-- ALL COMPANY --</option>
							<option value="0" {{ isset($_GET['company_id']) ? ($_GET['company_id'] == '0' ? 'selected' : '') : '' }}>-- Empty Recipient --</option>
							@foreach($suppliers as $supplier)
                            <option value="{{$supplier->id}}" {{ isset($_GET['company_id']) ? ($supplier->id == $_GET['company_id'] ? 'selected' : '') : '' }}>{{ $supplier->company_title.' '.$supplier->company_name }}</option>
                            @endforeach
						</select>
					</div>
					<div>
						@php
						$filter_date = $_GET['payment_date_filter'] ?? '';
						$company_id = $_GET['company_id'] ?? '';
						@endphp
						<a id="print_ap_payment_list"
						   href="{{ route('account-payable.printpaymentlist') }}?payment_date_filter={{ $filter_date }}&company_id={{ $company_id }}"
						   class="btn btn-success"
						   target="_blank"
						>
							Print AP Payment List
						</a>
					</div>
				</div>
			</div>
		</form>
		<div class="card">
			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th>A/P Date</th>
						<th>Doc. Number</th>
						<th>Payment ID</th>
						<th style="text-align: right">Balance</th>
						<th style="text-align: right">Paid Amount</th>
						<th style="text-align: right">Remaining Balance</th>
						<th>Pay-Date</th>
						<th>Payment Method</th>
						<th>Comment</th>
						<th style="text-align: center">Action</th>
					</tr>
				</thead>
				<tbody>
				@if($payments)
					@foreach($payments as $company => $payments)
						<tr>
							<td colspan="10" class="font-weight-bolder">
								@if($company)
								{{ $company }}
								@else
								<span class="text-danger">Empty Recipient</span>
								@endif
							</td>
						</tr>

						@php
						$total_debt_company = 0;
						$total_paid_company = 0;
						@endphp

						@foreach($payments as $group_invoice => $payment)

							@php
							$total_debt_invoice = 0;
							$total_paid_invoice = 0;
							@endphp

							@foreach($payment as $item_payment)
							<tr>
								<td>{{ date('d-m-Y', strtotime($item_payment->accountPayable->invoice_date)) }}</td>
								<td>{{ $item_payment->accountPayable->document_no }}</td>
								<td>{{ $item_payment->id }}</td>
								<td style="text-align: right">
									{{ ribuanWithComma($item_payment->accountPayable->nett_balance - $total_paid_invoice) }}
								</td>
								<td style="text-align: right">
									{{ ribuanWithComma($item_payment->payment_amount) }}
									@php
									$total_paid_invoice += $item_payment->payment_amount;
									$total_paid_company += $item_payment->payment_amount;
									@endphp
								</td>
								<td style="text-align: right">{{ ribuanWithComma($item_payment->accountPayable->nett_balance - $total_paid_invoice) }}</td>
								<td>{{ date('d-m-Y', strtotime($item_payment->transaction_date)) }}</td>
								<td>{{ @$item_payment->pembayaranAp->nama_metode }}</td>
								<td>{{ $item_payment->payment_comment }}</td>
								<td>
									<button type="button"
											class="btn btn-danger"
											data-target="#modal_ar_payment_list"
											data-toggle="modal"
											onclick="getPaymentList({{$item_payment->account_payable_id}}, '{{$item_payment->accountPayable->document_no}}')"
											title="AR Invoice List"
									>
										<i class="fas fa-times"></i>&nbsp;Cancel
									</button>
								</td>
							</tr>
							@endforeach
							<tr>
								<td></td>
								<td></td>
								<td style="text-align: right"></td>
								<td style="text-align: right; font-weight: bolder;">Sub Total</td>
								<td style="text-align: right;">{{ ribuanWithComma($total_paid_invoice) }}</td>
								<td style="text-align: right">
									@php
									$total_debt_company += ($item_payment->accountPayable->nett_balance - $total_paid_invoice);
									@endphp
									{{ ribuanWithComma($item_payment->accountPayable->nett_balance - $total_paid_invoice) }}
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						@endforeach
						<tr>
							<td></td>
							<td></td>
							<td style="text-align: right"></td>
							<td style="text-align: right; font-weight: bolder;">Total</td>
							<td style="text-align: right">{{ ribuanWithComma($total_paid_company) }}</td>
							<td style="text-align: right">{{ ribuanWithComma($total_debt_company) }}</td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					@endforeach
				@else
					<tr>
						<td colspan="10" style="text-align: center">No Data</td>
					</tr>
				@endif
				</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 AP Payment Records</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<form action="{{url('account-payable/cancel-ap-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">Doc Number:</label>
									<input type="text" class="form-control" id="cancel_doc_number" value="" disabled>
									<input type="hidden" name="invoice_id" id="account_payable_id" 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>Payment Date</th>
									<th>Nominal</th>
									<th>Method</th>
								</tr>
							</thead>
							<tbody id="ap_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/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, cancel_doc_number){
			$('#cancel_doc_number').val(cancel_doc_number);
			$('#account_payable_id').val(id);

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

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

						$.each(data.ap_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="ap_payment_id[${idx}]"
											   id="ap_payment_id${idx}" value="${value.id}"
											   data-idx="${idx}">
									</td>
									<td>${moment(value.transaction_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}</td>
									<td>${parseInt(value.payment_amount).toLocaleString('ID')}</td>
									<td>${value.pembayaran_ap.nama_metode}</td>
								</tr>
							`;
							no++;
						});
					}

					$('#ap_payment_list').html(html);

					console.log(response);
				}
			});
		}

		function check(idx){
			let is_checked = $('#check'+idx).is(':checked');
			if(is_checked){
				$('#ap_payment_id'+idx).removeAttr('disabled');
			}
			else{
				$('#ap_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 onchangeCompany(){
			let newRequest = window.location.search;
            let params = new URLSearchParams(newRequest);
			params.delete('company_id');
            params.append('company_id', document.getElementById("company_id").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