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

@section('title', 'Last Year Adjustment')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</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">Last Year Adjustment {{$last_year}}</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			<div class="d-flex">
				@if(isset($_GET['confirm']))
				<a href="#/"
				   class="btn btn-success btn-block"
				   data-toggle="modal"
				   data-target="#modal_blank_journal"
				>
					<i class="fas fa-plus"></i>
					&nbsp;Create Journal Voucher
				</a>
				@endif
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<!-- Hover rows -->
		<!-- GL List Journal Transaction -->
        @if($last_year)
            @if(isset($_GET['confirm']))
			<form action="{{ url('closed-year/repeat-close-year') }}" method="post">
	            @csrf
	            <input type="hidden" name="start_date" id="start_date" value="{{ $start_date }}">
	            <input type="hidden" name="end_date" id="end_date" value="{{ $end_date }}">
				<input type="hidden" name="year" id="year" value="{{ $last_year }}">
	            <div class="card">
	                <div class="card-body px-3">
	                    <div class="form-group mt-3 p-2">
	                        <label class="font-weight-bolder" for="notes">NOTE:</label>
	                        <textarea name="notes" id="notes" class="form-control" rows="5"></textarea>
	                    </div>
						<div class="row">
							<div class="col-md-2">
								<div class="form-group p-2">
									<label for="retained_earning_amount" class="font-weight-bolder">Retained Earning Amount</label>
									<div class="input-group">
										<span class="input-group-prepend">
											<span class="input-group-text">Rp. </span>
										</span>
										<input type="text"
											   class="form-control"
											   id="profit_or_loss"
											   name="profit_or_loss"
											   onkeyup="formatNumber(this);"
											   value="{{ ribuanWithComma($annual_profit_or_loss) }}"
											   readonly
										>
									</div>
								</div>
							</div>
							<div class="col-md-3">
								<div class="form-group p-2">
									<label for="retained_earning_account" class="font-weight-bolder">Retained Earning Account</label>
									<select name="retained_earning_account"
											id="retained_earning_account"
											class="form-control form-control-select2"
											required
									>
										<option value="">** Select COA **</option>
										@foreach($coas as $account_option)
											<option value="{{ $account_option->account_no }}" coa-id="{{ $account_option->id }}">
											{{ $account_option->description }} ({{ $account_option->account_no }})
											</option>
										@endforeach
									</select>
									<input type="hidden" name="coa_id" id="coa_id" value="">
								</div>
							</div>
						</div>
	                </div>
	                <div class="card-footer text-right">
	                    <button class="btn btn-danger"><i class="fas fa-lock mr-3"></i>Repeat Close Year</button>
	                </div>
	            </div>
	            <!-- /hover rows -->
	        </form>

            <div class="card">
    			<div class="card-body">
    				<table class="table datatable-basic table-hover">
    					<thead>
    						<tr>
    							<th>Date</th>
    							<th>Reference No</th>
    							<th>Description</th>
    							<th>Amount</th>
    	                        <th></th>
    						</tr>
    					</thead>
    					<tbody>
    					@foreach($journals as $journal)
    					<tr class="row_table" id="row_{{$journal->id}}">
    						<td>{{ date('d-m-Y', strtotime($journal->from)) }}</td>
    						<td>{{ $journal->reference_no }}</td>
    						<td>{{ $journal->description }}</td>
    						<td>{{ ribuanWithComma($journal->debits) }}</td>
    						<td style="width: 1%; white-space: nowrap">
    							<a href="#transaction_journal_voucher"
    							   class="btn btn-success btn-tooltip"
    							   id="show{{$journal->id}}"
    							   onclick="showJournal({{$journal->id}}, '{{$journal->journal_entry}}', '{{$journal->mapping_act_no}}')"
    							   title="Show Journal"
    							>
    								<i class="fas fa-search"></i>&nbsp;Show
    							</a>

								@if(!$journal->closed_book_id)
								<button class="delbutton1 btn btn-danger btn-tooltip"
    									href="#"
    									data-toggle="modal" data-target="#modal_theme_danger"
    									data-uri="{{url('reporting/delete-gl-list/'.$journal->id)}}"
    							>
    								<i class="fa fa-times"></i>&nbsp;Delete
    							</button>
								@endif
    						</td>
    					</tr>
    					@endforeach
    					</tbody>
    				</table>
    			</div>
    		</div>
    		<!-- /hover rows -->

    		<div class="card" id="transaction_journal_voucher">
    			<div class="card-header container-fluid">
    				<div class="row">
    					<div class="col-md-9">
    						<h4>Transaction Journal Vouchers</h4>
    					</div>
    					<div class="col-md-3 float-right text-right">
    						<a class="btn btn-secondary mb-1"
    							id="link_print_journal"
    							href="#"
    							title="Print Transaction Journal Vouchers"
    							target="_blank"
    						><i class="icon-printer2 mr-1"></i>
    							Print
    						</a>
    						<a class="btn btn-success mb-1"
    							id="link_export_journal"
    							href="#"
    							title="Export"
    							target="_blank"
    						><i class="fas fa-file-excel mr-1"></i>
    							Export
    						</a>
    						<a class="btn btn-warning mb-1"
    							id="link_journal_revision"
    							href="#/"
    							title="Journal Revision"
    							data-id=""
    							data-date=""
                                style="pointer-events: none;"
    						><i class="fas fa-pencil-alt mr-1"></i>
    							Revision
    						</a>
    					</div>
    				</div>
    			</div>
    			<form id="form-transaction-journal-voucher" action="{{ url('reporting/update-gl-list') }}" method="post">
    				@csrf
    				<input type="hidden" name="general_ledger_draft_id" id="general_ledger_draft_id">
    				<input type="hidden" name="date" id="journal_date">
    				<div class="card-body">
    					<table style="font-size: 13px; width:100%; margin-bottom: 10px">
    			            <tr>
    			                <td style="width: 10%; padding: 5px; font-weight: bolder">Journal Entry</td>
    							<td style="width: 1%">:</td>
    							<td>
    								<span id="preview_journal_entry"></span>
    							</td>
    							<td></td>
    							<td style="width: 10%; padding: 5px; font-weight: bolder">Created Date</td>
    							<td style="width: 1%">:</td>
    							<td>
    								<span id="created_date"></span>
    							</td>
    			            </tr>
    			            <tr>
    			                <td style="width: 10%; padding: 5px; font-weight: bolder">Reference No</td>
    							<td style="width: 1%">:</td>
    							<td><span id="preview_reference_no"></span></td>
    							<td></td>
    							<td style="width: 10%; padding: 5px; font-weight: bolder">Created By</td>
    							<td style="width: 1%">:</td>
    							<td>
    								<span id="created_by"></span>
    							</td>
    			            </tr>
    			            <tr>
    			                <td style="width: 10%; padding: 5px; font-weight: bolder">Description</td>
    							<td style="width: 1%">:</td>
    							<td><span id="preview_description"></span></td>
    							<td></td>
    							<td></td>
    							<td></td>
    							<td></td>
    			            </tr>
    			        </table>
    					<table class="table table-bordered table-hover">
    						<thead>
    							<tr>
    								<th>Account-No</th>
    								<th>Description</th>
    								<th>Debet</th>
    								<th>Credit</th>
    								<th style="width: 20%">Remark</th>
    								<th style="width: 10%">Change By</th>
    								<th style="width: 10%">Change Date</th>
    								<th style="width: 1%">Action</th>
    							</tr>
    						</thead>
    						<tbody id="journal_items">
    							<tr>
    								<td colspan="6" style="text-align: center">No Data</td>
    							</tr>
    						</tbody>
    						<tfoot>
    							<tr>
    			                    <td colspan="2" class="checkbalance" style="text-align: right; font-weight: bolder">TOTAL</td>
    			                    <td class="checkbalance" style="text-align: right" id="total_debet"></td>
    			                    <td class="checkbalance" style="text-align: right" id="total_credit"></td>
    			                    <td></td>
    								<td></td>
    								<td></td>
    			                    <td>
    									<a class="btn btn-primary btn-sm"
    										id="add_transaction"
    										title="Add Transaction"
    										href="#/"
    										title="Add Transaction"
    										style="display: none"
    									>
    										<i class="fas fa-plus mr-1"></i>
    									</a>
    			                    </td>
    			                </tr>
    							<tr>
    								<td class="checkbalance" colspan="2" style="text-align: right; font-weight: bolder">BALANCE</td>
    								<td class="checkbalance" colspan="2" id="balance"></td>
    								<td></td>
    								<td></td>
    								<td></td>
    								<td></td>
    							</tr>
    						</tfoot>
    					</table>
    				</div>
    				<div class="card-footer text-right" id="btn-revision" style="display: none">
    					<button type="reset" id="cancel_revision" class="btn btn-danger">Cancel</button>
    					<button type="submit" id="save_revision" class="btn btn-success" disabled>Save</button>
    				</div>
    			</form>
    		</div>
            @else
            <div class="alert alert-warning alert-styled-left alert-dismissible text-center">
                <h4>Are you sure, you want to adjust last year journal?</h4>
                <a href="{{ url('closed-year/last-year-adjustment') }}?confirm=1" class="btn btn-success">Yes</a>&nbsp;<a href="{{ url('closed-year') }}" class="btn btn-danger">No</a>
    	    </div>
            @endif
        @else
        <div class="alert alert-danger alert-styled-left alert-arrow-left alert-dismissible">
			<span class="font-weight-semibold">There is no last Period.
	    </div>
        @endif

	</div>
	<!-- /content area -->

	<!-- MODAL DELETE -->
	<!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
					@csrf
					@method('DELETE')
					<div class="modal-body" align="center">
						<h2> Are you sure? Data will be deleted</h2>
					</div>

					<div class="modal-footer">
						<a type="button" class="btn btn-link" data-dismiss="modal">Cancel</a>
						<button type="submit" class="btn bg-danger">Delete</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<!-- MODAL Blank Journal -->
	<!-- Danger modal -->
	<div id="modal_blank_journal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<i class="fas fa-file-signature"></i>&nbsp;Create Journal Voucher
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{route('reporting.create-blank-journal')}}" method="post">
					@csrf
					<div class="modal-body">
						<div class="form-group">
							<label for="from">Journal Type</label>
							<select name="mapping_act_no" id="mapping_act_no" class="form-control" required>
								<option value="">** Select Journal Type **</option>
								@foreach(config('custom.mapping_account_nos') as $key => $mapping_act_no)
								<option value="{{ $key }}">{{ $mapping_act_no }}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group">
							<label for="from">Date</label>
							<input type="text" name="from" class="form-control daterange-from" value="" autocomplete="off" required>
						</div>
						<div class="form-group">
							<label for="reference_no">Reference No</label>
							<input type="text" name="reference_no" class="form-control" value="" autocomplete="off" required>
						</div>
						<div class="form-group">
							<label for="to">Description</label>
							<input type="text" name="description" class="form-control" value="" autocomplete="off" required>
						</div>
					</div>
					<div class="modal-footer">
						<a type="button" class="btn btn-link" data-dismiss="modal">Cancel</a>
						<button type="submit" class="btn bg-success">Save</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

@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>
	<script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.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>
		//Default Total
		let default_total_debet = 0;
		let default_total_credit = 0;
		let default_balance = 0;
		let last_idx = 0;

		//Link Journal Revision
		$('#link_journal_revision').hide();

		//Retained Earning Account
		$('#retained_earning_account').on('change', function(){
			let val = $(this).val();
			let coa_id = $(this).find('option[value="'+val+'"]').attr('coa-id');
			$('#coa_id').val(coa_id);
		});

        $(document).ready(function() {
            let show_session = JSON.parse(window.sessionStorage.getItem("draft"));

            // check if any session
            if (show_session) {
                showJournal(show_session.draft_id, show_session.journal_entry)

                sessionStorage.removeItem('draft')
            }
        })

		$('#form-transaction-journal-voucher').on('submit', function(){
			$('#save_revision').attr('disabled', 'disabled');
		});

		//Check Balance
		function checkBalance(){
			let total_debet = parseFloat($('#total_debet').html().replaceAll('.00', '').replaceAll(',', ''));
			let total_credit = parseFloat($('#total_credit').html().replaceAll('.00', '').replaceAll(',', ''));
			let amount_debet = isNaN(total_debet) ? 0 : total_debet;
			let amount_credit = isNaN(total_credit) ? 0 : total_credit
			let balance = amount_debet - amount_credit;

			//Show Balance
			$('#balance').html(balance.toLocaleString(undefined, {minimumFractionDigits: 2}));

			//Menampilkan Balance Dan Menandai Dengan warna
			if(balance == 0){
				$('.checkbalance').addClass('text-success');
				$('.checkbalance').removeClass('text-danger');
			}
			else{
				// console.log(balance);
				$('.checkbalance').addClass('text-danger');
				$('.checkbalance').removeClass('text-success');
			}

			//Enable Tombol Save Jika Jurnal Balance
			if(amount_debet == amount_credit){
				$('#save_revision').removeAttr('disabled');
			}
			//Disable Tombol Save Jika Jurnal Tidak balance
			else{
				$('#save_revision').attr('disabled', 'disabled');
			}
		}

		//Change Debet
		function changeDebet(){
			let element = $('.debet_input');
			let total_debet = 0
			$.each(element, function(idx, el){
				let val_debet = parseFloat($(el).val().replaceAll('.00', ''));
				total_debet += val_debet;
			})
			$('#total_debet').html(total_debet.toLocaleString(undefined, {minimumFractionDigits: 2}));
			checkBalance();
		}

		//Change Credit
		function changeCredit(){
			let element = $('.credit_input');
			let total_credit = 0
			$.each(element, function(idx, el){
				let val_credit = parseFloat($(el).val().replaceAll('.00', ''));
				total_credit += val_credit;
			})
			$('#total_credit').html(total_credit.toLocaleString(undefined, {minimumFractionDigits: 2}));
			checkBalance();
		}

		//Cancel Revision
		$('#cancel_revision').on('click', function(){
			location.reload();
			// setTimeout(function() {
			// 	$('.debet_input').attr('type', 'hidden');
    		// 	$('.credit_input').attr('type', 'hidden');
			//
			// 	$('.debet_text').show();
			// 	$('.credit_text').show();
		  	// }, 1000);
			//
			// $('#btn-revision').hide();
			// $('#add_transaction').hide();
			// $('.delbutton').hide();
			// $('#total_debet').html(default_total_debet.toLocaleString(undefined, {minimumFractionDigits: 2}));
			// $('#total_credit').html(default_total_credit.toLocaleString(undefined, {minimumFractionDigits: 2}));
		})

		// Revisi Jurnal
		$('#link_journal_revision').on('click', function(){
			$('.debet_input').attr('type', 'text');
			$('.credit_input').attr('type', 'text');
			$('.remark_input').show();
			$('.debet_text').hide();
			$('.credit_text').hide();
			$('.coa_text').hide();
			$('.remark_text').hide();

			$('#btn-revision').show();
			$('#add_transaction').show();
			$('.delbutton').show();
			$('.form-control-select2').show();
			$('.form-control-select2').select2();

			let general_ledger_draft_id = $(this).attr('data-id');
			let journal_date = $(this).attr('data-date');

			$('#general_ledger_draft_id').val(general_ledger_draft_id);
			$('#journal_date').val(journal_date);

			checkBalance();
		});

		// Add Transaction
		$('#add_transaction').on('click', function(){
			// let general_ledger_draft_id = $(this).attr('data-id');
			// let journal_date = $(this).attr('data-date');
			//
			// $('#general_ledger_draft_id').val(general_ledger_draft_id);
			// $('#journal_date').val(journal_date);
			last_idx++
			let html_item = `<tr id="row_item_${last_idx}">
								<td>
									<input type="hidden" name="id[]" value="" />
									<select name="coa_id[]"
											id="coa_id_${last_idx}"
											data-id="${last_idx}"
											class="form-control form-control-select2 border-teal border-1"
											onchange="changeCoa(this)"
											required
									>
										<option value="">** Select COA **</option>
										@foreach($coas as $coa)
											<option value="{{$coa->id}}"
													data-account-no="{{$coa->account_no}}"
													data-description="{{$coa->description}}"
													data-remark="{{$coa->remark}}"
											>
												({{$coa->account_no}}) {{$coa->description}}
											</option>
										@endforeach
									</select>
									<input type="hidden" name="account_no[]" id="account_no_${last_idx}" value="" />
									<input type="hidden" name="description[]" id="description_${last_idx}" value="" />
								</td>
								<td id="coa_description_${last_idx}"></td>
								<td style="text-align: right">
									<input type="text"
										   name="debet[]"
										   id="debet_${last_idx}"
										   value="0"
										   oninput="formatPayment(this); changeDebet();"
										   class="form-control debet_input"
										   data-id="${last_idx}"
									/>
								</td>
								<td style="text-align: right">
									<input type="text"
										   name="credit[]"
										   id="credit_${last_idx}"
										   value="0"
										   oninput="formatPayment(this); changeCredit();"
										   class="form-control credit_input"
										   data-id="${last_idx}"
									/>
								</td>
								<td>
									<textarea name="remark[]" id="remark_${last_idx}" class="form-control" rows="5"></textarea>
								</td>
								<td>
									{{\Auth::user()->nama}}
								</td>
								<td>
									{{date('d-m-Y')}}
								</td>
								<td style="text-align: center">
									<a href="#/"
									   class="delbutton text-danger"
									   data-id="${last_idx}"
									   title="Delete"
									>
										<i class="fa fa-times"></i>
									</a>
								</td>
						   </tr>`;
			$('#journal_items').append(html_item);

			$('.form-control-select2').select2();
		});

		//Ketika Memilih COA saat add transaction
		// $('#coa_id').on('change', function(){
		// 	let coa_val = $(this).val();
		// 	let account_no = $(this).find('option[value="'+coa_val+'"]').attr('data-account-no');
		// 	let description = $(this).find('option[value="'+coa_val+'"]').attr('data-description');
		// 	let remark = $(this).find('option[value="'+coa_val+'"]').attr('data-remark');
		//
		// 	$('#account_no').val(account_no);
		// 	$('#description').val(description);
		// 	$('#remark').html(remark);
		// });
		function changeCoa(el){
			let id = $(el).attr('data-id');
			let coa_val = $(el).val();
			let account_no = $(el).find('option[value="'+coa_val+'"]').attr('data-account-no');
			let description = $(el).find('option[value="'+coa_val+'"]').attr('data-description');
			let remark = $(el).find('option[value="'+coa_val+'"]').attr('data-remark');

			console.log(description);

			$('#account_no_'+id).val(account_no);
			$('#description_'+id).val(description);
			$('#remark_'+id).html(remark);
			$('#coa_description_'+id).html(description);
		}

		function showJournal(id, date, journal_number){
            console.log(journal_number)
            if(journal_number == '000001'){
                var link_pdf = "{{ url('reporting/transaction-journal-voucher-pdf') }}";
                var link_excel = "{{ url('reporting/transaction-journal-voucher-excel') }}";
            }
            else if(journal_number == '000002'){
                var link_pdf = "{{ url('account-receivable/transaction-journal-voucher-pdf') }}";
                var link_excel = "{{ url('account-receivable/transaction-journal-voucher-excel') }}";
            }
            else if(journal_number == '000003'){
                var link_pdf = "{{ url('fnb/transaction-journal-voucher-pdf') }}";
                var link_excel = "{{ url('fnb/transaction-journal-voucher-excel') }}";
            }
            else if(journal_number == '000004'){
                var link_pdf = "{{ url('account-payable/transaction-journal-voucher-pdf') }}";
                var link_excel = "{{ url('account-payable/transaction-journal-voucher-excel') }}";
            }

            console.log(link_pdf);

			let print_transaction_journal = link_pdf+"/"+id;
			let export_transaction_journal = link_excel+"/"+id;

			$('#link_print_journal').attr('href', print_transaction_journal);
			$('#link_export_journal').attr('href', export_transaction_journal);
			$('.row_table').removeClass('text-danger');
			$('.row_table').removeClass('font-weight-bolder');

			$('#link_journal_revision').attr('data-id', id);
			$('#link_journal_revision').attr('data-date', date);
			$('#link_journal_revision').css('pointer-events', 'auto');
			// $('#add_transaction').attr('data-id', id);
			// $('#add_transaction').attr('data-date', date);

			$('#row_'+id).addClass('text-danger font-weight-bolder');
			$.ajax({
	            type: 'GET',
	            url: "{{ url('/get-journal-datas/')}}/"+id,
	            success: function (datas) {
					let draft = datas.draft;
					let transaction_journal_vouchers = datas.draft.details;
					last_idx = transaction_journal_vouchers.length - 1;
					let total_debet = 0
					let total_credit = 0
					let html_items = "";

					$('#preview_journal_entry').html(moment(draft.journal_entry, "YYYY-MM-DD")
											   .format("DD-MM-YYYY"));
					$('#preview_reference_no').html(draft.reference_no);
					$('#preview_description').html(draft.description);
					$('#created_date').html(moment(draft.created_at, "YYYY-MM-DD HH:mm:ss")
														.format("DD-MM-YYYY"));
					$('#created_by').html(draft.user ? draft.user.nama : '-');

					if(draft.closed_book){
						$('#link_journal_revision').hide();
					}
					else{
						$('#link_journal_revision').show();
					}

					$.each(transaction_journal_vouchers, function(idx, val){
						total_debet += parseFloat(val.debet)
						total_credit += parseFloat(val.credit)

						let debet = parseFloat(val.debet).toLocaleString(undefined, {minimumFractionDigits: 2});
						let credit = parseFloat(val.credit).toLocaleString(undefined, {minimumFractionDigits: 2});
						let change_by = val.user ? val.user.nama : '-'
						let change_date = val.updated_at ? moment(val.updated_at, "YYYY-MM-DD HH:mm:ss").format("DD-MM-YYYY") : '-'

						// console.log(change_by);
						// console.log(change_date);
						// console.log(val.debet.toLocaleString(undefined, {minimumFractionDigits: 2}));
						// console.log(val.credit.toLocaleString(undefined, {minimumFractionDigits: 2}));

						if(!draft.closed_book){
							var btn_delete = `<a href="#/"
											   class="delbutton text-danger"
											   data-id="${idx}"
											   title="Delete"
											   style="display: none;"
											>
												<i class="fa fa-times"></i>
											</a>`;
						}
						else{
							var btn_delete = '-';
						}

						html_items += `<tr id="row_item_${idx}">
											<td>
												<input type="hidden" name="id[]" value="${val.id}" />
												<span class="coa_text">${val.account_no}</span>
												<select name="coa_id[]"
														id="coa_id_${idx}"
														data-id="${idx}"
														class="form-control form-control-select2 border-teal border-1"
														onchange="changeCoa(this)"
														style="display: none"
														required
												>
													<option value="">** Select COA **</option>
													@foreach($coas as $coa)
														<option value="{{$coa->id}}"
																data-account-no="{{$coa->account_no}}"
																data-description="{{$coa->description}}"
																data-remark="{{$coa->remark}}"
																${ {{$coa->id}} == val.coa_id ? 'selected' : ''}
														>
															({{$coa->account_no}}) {{$coa->description}}
														</option>
													@endforeach
												</select>
												<input type="hidden" name="account_no[]" id="account_no_${idx}" value="${val.account_no}" />
												<input type="hidden" name="description[]" id="description_${idx}" value="${val.description}" />

												<input type="hidden" name="old_coa_id[]" id="old_coa_id_${idx}" value="${val.coa_id}" />
											</td>
											<td id="coa_description_${idx}">${val.description}</td>
											<td style="text-align: right">
												<span class="debet_text">${debet}</span>
												<input type="hidden"
													   name="debet[]"
													   id="debet_${idx}"
													   value="${(val.debet).toLocaleString('ID')}"
													   oninput="formatPayment(this); changeDebet();"
													   class="form-control debet_input"
													   data-id="${idx}"
												/>

												<input type="hidden"
													   name="old_debet[]"
													   id="old_debet_${idx}"
													   value="${val.debet}"
												/>
											</td>
											<td style="text-align: right">
												<span class="credit_text">${credit}</span>
												<input type="hidden"
													   name="credit[]"
													   id="credit_${idx}"
													   value="${(val.credit).toLocaleString('ID')}"
													   oninput="formatPayment(this); changeCredit();"
													   class="form-control credit_input"
													   data-id="${idx}"
												/>

												<input type="hidden"
													   name="old_credit[]"
													   id="old_credit_${idx}"
													   value="${val.credit}"
												/>
											</td>
											<td>
												<span class="remark_text">${val.remark ?? '-'}</span>
												<textarea name="remark[]" id="remark_${idx}" class="form-control remark_input" rows="5" style="display:none">${val.remark ?? '-'}</textarea>

												<input type="hidden"
													   name="old_remark[]"
													   id="old_remark_${idx}"
													   value="${val.remark ?? '-'}"
												/>
											</td>
											<td>${change_by}</td>
											<td>${change_date}</td>
											<td style="text-align: center">
												${btn_delete}
											</td>
									   </tr>`;
					});

					default_total_debet = total_debet;
					default_total_credit = total_credit;
					let balance = total_debet - total_credit;

					console.log(default_balance);

					$('#journal_items').html(html_items);
					$('#total_debet').html(total_debet.toLocaleString(undefined, {minimumFractionDigits: 2}));
					$('#total_credit').html(total_credit.toLocaleString(undefined, {minimumFractionDigits: 2}));
					$('#balance').html(balance.toLocaleString(undefined, {minimumFractionDigits: 2}));
	            }
	        });

			$('.form-control-select2').select2();
		}

		function formatPayment(element){
			// $(element).unmask().mask('###.###.###.###.###.###.###.###', {
	        //     reverse: true,
	        //     translation: {
	        //         '#': {
	        //             pattern: /\-|\d/,
	        //             recursive: true
	        //         }
	        //     },
	        // });

	        $(element).text($(element).text().replace('-.', '-'));

			let id = $(element).attr('data-id');
			let val = $(element).val().replaceAll('.', '');
			let text_debet_credit = parseFloat($(element).val().replaceAll('.', '')).toLocaleString(undefined, {minimumFractionDigits: 2});
		}

		// Modal Delete
		$(document).on("click", ".delbutton1", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		$(document).on("click", ".delbutton", function () {
		     // var url = $(this).data('uri');
		     // $("#delform").attr("action", url);
			 let id = $(this).attr('data-id');
			 $('#row_item_'+id).remove();
			 changeDebet();
			 changeCredit();
		});

        //Single Date Picker
        let date_from = {!! json_encode(date('d-m-Y', strtotime(\Request::get('from') ? \Request::get('from') : '0 day', strtotime(getSystemDate())) ) ) !!};
        let date_to = {!! json_encode(date('d-m-Y', strtotime(\Request::get('to') ? \Request::get('to') : '0 day', strtotime(getSystemDate())) ) ) !!};

        $('.daterange-from').daterangepicker({
            singleDatePicker: true,
            // autoUpdateInput: false,
            startDate: date_from,
            maxDate: "{{ '31-12'.$last_year }}",
            minDate: "{{ '01-01-'.$last_year }}",
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('.daterange-to').daterangepicker({
            singleDatePicker: true,
            // autoUpdateInput: false,
            startDate: date_to,
            // maxDate: "{{ date('d-m-Y', strtotime('-1 day', strtotime(getSystemDate())) ) }}",
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        // $('.daterange-single').daterangepicker({
		// 	singleDatePicker: true,
        //     autoUpdateInput: false,
        //     startDate: "{{ date('d-m-Y', strtotime('-1 day', strtotime(getSystemDate())) ) }}",
        //     maxDate: "{{ date('d-m-Y', strtotime('-1 day', strtotime(getSystemDate())) ) }}",
		// 	locale: {
		// 		format: 'DD-MM-YYYY'
		// 	}
		// });

        $('.daterange-single').on('apply.daterangepicker', function(ev, picker) {
		    $(this).val(picker.startDate.format('DD-MM-YYYY'));
		});

	  	$('.daterange-single').on('cancel.daterangepicker', function(ev, picker) {
	      	$(this).val('');
	  	})

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

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

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{
		                orderable: false,
		                width: 150,
		                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;' }
		            }
		        });

				// 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();
		});

		//Button tooltip
		$('.btn-tooltip').tooltip()

		//Single Date Picker
        $('.daterange-single').daterangepicker({
			singleDatePicker: true,
            autoUpdateInput: false,
            startDate: "{{ date('d-m-Y', strtotime('-1 day', strtotime(getSystemDate())) ) }}",
            maxDate: "{{ date('d-m-Y', strtotime(getSystemDate()) ) }}",
			locale: {
				format: 'DD-MM-YYYY'
			}
		});

        $('.daterange-single').on('apply.daterangepicker', function(ev, picker) {
		    $(this).val(picker.startDate.format('DD-MM-YYYY'));
		});

	  	$('.daterange-single').on('cancel.daterangepicker', function(ev, picker) {
	      	$(this).val('');
	  	})
	</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>
@endsection