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

@section('title', 'Transaction Journal Vouchers')

@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">{{$title}}</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			{{--
				<div class="d-flex">
					<a href="{{ $back_button }}" class="btn btn-danger"><i class="fas fa-undo"></i>&nbsp;Back</a>
				</div>
			--}}
            @if (in_array($mapping_act_no, ['000001', '000002', '000004']))
            <div class="d-flex right">
                <button type="button" class="btn btn-warning m-1" data-toggle="modal" data-target="#modal_download"> <i class="fas fa-download"></i>Download excel template</button>
                <button class="btn btn-success m-1" data-toggle="modal" data-target="#modal_upload"> <i class="far fa-file-excel"></i>Upload or import new input only</button>
            </div>
            @endif
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<!-- Filter Area -->
		<form method="GET">
			<div class="card">
	            <div class="card-body">
	                <div class="row">
	                    <div class="col-lg-2">
	                        <div class="form-group">
	                            <label for="from">From</label>
	                            <input type="text" id="from"
	                                   name="from" class="form-control daterange-from"
	                                   value="{{ date('d-m-Y', strtotime($from)) }}" autocomplete="off"
	                                   required
	                            >
	                        </div>
	                    </div>
	                    <div class="col-lg-2">
	                        <div class="form-group">
	                            <label for="to">To</label>
	                            <input type="text" id="to"
	                                   name="to" class="form-control daterange-to"
	                                   value="{{ date('d-m-Y', strtotime($to)) }}" autocomplete="off"
	                                   required
	                            >
	                        </div>
	                    </div>
	                    <div class="col-lg-2">
	                        <div class="form-group">
	                            <label for="to">Type</label>
	                            <select class="form-control" name="type" id="type">
									@foreach(config('custom.journal_statuses') as $key => $journal_status)
									<option value="{{ $key }}" {{ isset($_GET['type']) ? ($_GET['type'] == $key ? 'selected' : '') : '' }}>{{ $journal_status }}</option>
									@endforeach
	                            </select>
	                        </div>
	                    </div>
	                    <div class="col-lg-1">
	                        <div class="form-group">
	                            <label for="btn">&nbsp;</label>
	                            <button type="submit" class="btn btn-success btn-block"><i class="fas fa-search"></i></button>
	                        </div>
	                    </div>
	                    <div class="col-lg-3">
	                        <div class="form-group">
	                            <label for="btn">&nbsp;</label>
	                            <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>
	                        </div>
	                    </div>
	                    <div class="col-lg-2">
	                        <div class="form-group">
	                            <label for="btn">&nbsp;</label>
	                            <a href="#/"
                                    class="btn btn-info btn-block"
                                    data-toggle="modal"
                                    data-target="#log_change_modal"
                                ><i class="icon-history mr-1" title="Change History"></i>
                                </a>
	                        </div>
	                    </div>
	                    {{-- <div class="col-lg-2">
	                        <div class="form-group">
	                            <a id="hidden_log_change_modal"
                                    style="pointer-events: none"
                                ><button
                                    type="button"
                                    class="btn btn-info"
                                    data-toggle="modal"
                                    data-target="#log_change_modal"
                                ><i class="icon-history mr-1" title="Change History"></i>
                                    History
                                </button>
                                </a>
	                        </div>
	                    </div> --}}
	                </div>
	            </div>
			</div>
		</form>
		<!-- Filter Area -->
        <div class="card p-2" style="width: 200px">
            <div class="ml-2 font-weight-bolder">
                <label class="col-form-label mr-2">Total Amount: <span>{{ribuanWithComma($total_amounts)}}</span></label>
            </div>
        </div>
		<!-- Hover rows -->
		<!-- GL List Journal Transaction -->
		<div class="card">
			<div class="card-body">
				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>Date</th>
							{{--
								<th>To</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>{{ date('d-m-Y', strtotime($journal->to)) }}</td>
						--}}
						<td>{{ $journal->reference_no }}</td>
						<td>{{ $journal->description }}</td>
						<td>{{ ribuanWithComma($journal->debitsum()) }}</td>
						<td style="width: 1%; white-space: nowrap">
							{{--
								Tombol Show Lama ngelink langsung dengan PDF
								<a href="{{ url('reporting/transaction-journal-voucher-pdf').'/'.$journal->id }}"
								   class="btn btn-success"
								   target="_blank"
								>
									<i class="fas fa-search"></i>&nbsp;Show
								</a>
							--}}
							<a href="#/"
							   class="btn btn-success btn-tooltip"
							   id="show{{$journal->id}}"
							   onclick="showJournal({{$journal->id}}, '{{$journal->journal_entry}}')"
							   title="Show Journal"
							>
								<i class="fas fa-search"></i>&nbsp;Show
							</a>

							<button class="delbutton1 btn btn-danger btn-tooltip {{$journal->status == 0 ? 'disabled' : ''}}"
									href="#"
									{{ $journal->status == 0 ? '' : 'data-toggle=modal data-target=#modal_theme_danger' }}
									data-uri="{{url('reporting/delete-gl-list/'.$journal->id)}}" title="{{ $journal->status == 0 ? 'Please cancel close month before delete' : 'Delete' }}"
							>
								<i class="fa fa-times"></i>&nbsp;Delete
							</button>
						</td>
					</tr>
					@endforeach
					</tbody>
				</table>
			</div>
		</div>
		<!-- /hover rows -->

		<div class="card">
			<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 class="dropdown text-right">
							<a href="#" data-toggle="dropdown">
								<i class="icon-more"></i>
							</a>
							<div class="dropdown-menu dropdown-menu-right">
								<a class="dropdown-item"
									id="link_print_journal"
									href="#"
									title="Print Transaction Journal Vouchers"
									target="_blank"
								><i class="icon-printer2 mr-1"></i>
									Print Transaction Journal Vouchers
								</a>
								<a class="dropdown-item"
									id="link_export_journal"
									href="#"
									title="Export Transaction Journal Vouchers"
									target="_blank"
								><i class="fas fa-file-excel mr-1"></i>
									Export Transaction Journal Vouchers
								</a>
								<a class="dropdown-item"
									id="link_journal_revision"
									href="#/"
									title="Journal Revision"
								><i class="fas fa-pencil-alt mr-1"></i>
									Journal Revision
								</a>
								<a class="dropdown-item"
									id="add_transaction"
									title="Add Transaction"
									href="#/"
									data-toggle="modal" data-target="#modal_add_transaction"
									data-id=""
									data-date=""
									title="Add Transaction"
								>
									<i class="fas fa-file-signature mr-1"></i>
									Add Transaction
								</a>
							</div>
						</div>
						--}}
					</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>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>
	</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 Add Transaction -->
	<!-- Danger modal -->
	{{--
		<div id="modal_add_transaction" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-primary" align="center">
						<i class="fas fa-file-signature"></i>&nbsp;Add Transaction
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>

					<form action="{{route('reporting.add-transaction')}}" method="post">
						@csrf
						<div class="modal-body">
							<input type="hidden" name="general_ledger_draft_id" id="general_ledger_draft_id">
							<input type="hidden" name="date" id="journal_date">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label for="coa">COA</label>
										<select name="coa_id"
												id="coa_id"
												class="form-control form-control-select2 border-teal border-1"
												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">
										<input type="hidden" name="description" id="description">
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label for="debit">Debit</label>
										<input type="text" name="debet"
											   oninput="formatPayment(this)"
											   class="form-control"
											   id="debet"
										>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label for="credit">Credit</label>
										<input type="text" name="credit"
											   oninput="formatPayment(this)"
											   class="form-control"
											   id="credit"
										>
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group">
										<label for="remark">Remark</label>
										<textarea name="remark" id="remark" class="form-control" row="5"></textarea>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<a type="button" class="btn btn-link" data-dismiss="modal">Cancel</a>
							<button type="submit" class="btn bg-primary">Add Transaction</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">
						<input type="hidden" name="mapping_act_no" value="{{ $mapping_act_no ?? '' }}" required>
						<div class="form-group">
							<label for="from">Date</label>
							<input type="text" name="from" class="form-control daterange-from" value="{{ $_GET['from'] ?? '' }}" 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="{{ $_GET['reference_no'] ?? '' }}" autocomplete="off" required>
						</div>
						<div class="form-group">
							<label for="to">Description</label>
							<input type="text" name="description" class="form-control" value="{{ $_GET['description'] ?? '' }}" 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 -->

    <!--MODAL-->
    <div id="modal_download" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <h6 class="modal-title" id="formTitle">Download Item Excel</span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{url('download-default-gl-fo')}}" method="post" id="upload-form" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Date <span class="text-danger">*</span></label>
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <input type="text" name="date" class="form-control daterange-from" value="" autocomplete="off" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Reference No</label>
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <input type="text" name="reference_no" class="form-control" value="" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Description</label>
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <input type="text" name="description" class="form-control" value="" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        {{-- <span class="form-text text-danger">Note: Please select date, for the template.</span> --}}
                    </div>
                    <input type="hidden" name="title_excel" value="{{$title_excel}}">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Download</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--/MODAL-->

    <!--MODAL-->
    <div id="modal_upload" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <h6 class="modal-title" id="formTitle">{{$title_upload}}</span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{ url('upload-default-gl-fo') }}" method="post" id="upload-form" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="_method" id="method" value="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <input class="form-control-uniform" id="file" name="file" type="file" accept=".xls,.xlsx,.csv">
                        </div>
                        <span class="form-text text-muted">Accepted format: .xls .xlsx .csv</span>
                        {{-- <a href="{{ route('download.roomtypedefault') }}" class="m-1"><button class="btn btn-light btn-sm" type="button"> <i class="fas fa-download"></i>Download Excel Default Template</button></a> --}}
                    </div>
                    <input type="hidden" name="mapping_act_no" value="{{$mapping_act_no}}">
                    <input type="hidden" name="title_reference_no" value="{{$title_reference_no}}">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="submit-upload">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--/MODAL-->

    <!-- Log change modal -->
    <div id="log_change_modal" class="modal fade">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header bg-info" align="center">
					<h6 class="modal-title"><i class="icon-history mr-1"></i>Change Rate Code History</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>User</th>
                                <th>Datetime</th>
                                <th>Activity</th>
                                <th>History</th>
                            </tr>
                        </thead>
                        <tbody id="log_change_item">
                            @if ($log_gl_journal->isNotEmpty())
                                @php ($i = 1) @endphp
                                @foreach ($log_gl_journal as $data)
                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>{{ @$data->user->nama }}</td>
                                        <td>
                                            {{ @$data->created_at->format('d-m-Y') }} <br>
                                            {{ @$data->created_at->format('H:i:s') }}
                                        </td>
                                        <td>{{ @$data->activity }}</td>
                                        <td>
                                            <a href="{{ route('reporting.log-gl-journal-detail',$data->id)}}" target="_blank"><button type="button"
                                                class="btn btn-primary btn-icon"><i class="icon-eye" title="Details"></i></button></a>
                                        </td>
                                    </tr>
                                    @php ($i++) @endphp
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="5" style="text-align:center">No Data</td>
                                </tr>
                            @endif
						</tbody>
                    </table>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
    <!-- Log change 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;

        $(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', '').replaceAll(',', ''));
				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', '').replaceAll(',', ''));
				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){
			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 : '-');

					$.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}));
						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">
												{{--
													<a href="#"
													   class="delbutton text-danger"
													   data-toggle="modal" data-target="#modal_theme_danger"
													   data-uri="{{url('reporting/delete-gl-list-detail')}}/${val.id}"
													   title="Delete"
													   style="display: none;"
													>
														<i class="fa fa-times"></i>
													</a>
												--}}
												<a href="#/"
												   class="delbutton text-danger"
												   data-id="${idx}"
												   title="Delete"
												   style="display: none;"
												>
													<i class="fa fa-times"></i>
												</a>
											</td>
									   </tr>`;
					});

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

					// console.log(total_debet, total_credit, 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).val($(element).val().replaceAll('.00', '').replaceAll(',', ''));
            // $(element).mask("#,##0", {reverse: true});//set separator number

	        $(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: "{{ date('d-m-Y', strtotime('-1 day', strtotime(getSystemDate())) ) }}",
            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