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

@section('title', 'Chart of Accounts')

@section('css')
<style type="text/css">
	.datatable-column-width {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		max-height: 90px;
	}
</style>
<style>
    .tebal {
        font-weight:bold;
        font-size:8px;
        background-color: #f2f2f2;
        border-top:1px solid black !important;
        border-bottom:1px solid black !important;
    }

    .tebal_view {
        font-weight:bold;
        font-size:14px;
        background-color: #f2f2f2;
        border-top:1px solid black !important;
        border-bottom:1px solid black !important;
    }

    .listtable {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
        font-size: 8px;
    }

    .listtable td, .listtable th {
        border: 1px solid #ddd;
        padding: 2px;
    }

    .listtable th {
        background-color: #f2f2f2;
    }
</style>
@endsection

@section('content')

<!-- Page header -->
<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">Chart of Accounts -</span> Data</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
        @if (count($coas) < 1)
        @php
            $disabled   = count($mains) > 0 ? '' : 'disabled' ;
            $tooltips   = count($mains) > 0 ? '' : 'Please generate template our main account first' ;
        @endphp
        <span class="float-right p-1 ">
            <form method="post">
                @csrf
                @method('post')
                <button id="btn_cetak_excel" class="btn btn-success" {{$disabled}} title="{{$tooltips}}" formaction="{{url('generate-coa-hotel?type=simple')}}">
                    <i class="far fa-file-excel"></i>&nbsp;Generate Simple COA
                </button>
                <button id="btn_cetak_excel" class="btn btn-success" {{$disabled}} title="{{$tooltips}}" formaction="{{url('generate-coa-hotel?type=advance')}}">
                    <i class="far fa-file-excel"></i>&nbsp;Generate Advance COA
                </button>
            </form>
        </span>
        @endif
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">

	<div class="row">
		<div class="col-md-12">
			<!-- Hover rows -->
			<div class="card">
				<div class="card-header header-elements-inline">
					<a data-toggle="modal" data-target="#modal_add_budget">
                        <button type="button" class="btn btn-success rounded-round">
                            <i class="icon-add mr-2"></i> Add COA
                        </button>
                    </a>
                    <div class="d-flex right">
                        <button class="btn btn-success m-1" data-toggle="modal" data-target="#modal_upload"> <i class="far fa-file-excel"></i>Upload or import</button>
                    </div>
				</div>

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>Account Number</th>
							<th>Description</th>
							<th>Main Account</th>
							<th>Account Type</th>
							<th>FS Type</th>
							<th>FO status</th>
							<th class="text-center" style="text-align: right">Actions</th>
						</tr>
					</thead>
					<tbody>

    				{{-- @if (!$coas->isEmpty())
    				@foreach ($coas as $coa) --}}
					{{-- <tr>
						<td>
							{{ $coa->account_no }}
						</td>
						<td>
							{{ $coa->description }}
						</td>
						<td>
                            {{ @$coa->mainAccount->main_account }}
                            {{ @$coa->mainAccount->name ? ' - '.@$coa->mainAccount->name : '' }} --}}
							{{-- {{config('custom.main_account_coa.'.$coa->main_account)}} --}}
						{{-- </td>
						<td>
							{{config('custom.account_type_coa.'.$coa->account_type)}}
						</td>
						<td>
							{{config('custom.fs_catno_coa.'.$coa->fs_catno)}}
						</td>
						<td>
							{{ @$coa->department->name ?? '-' }}
						</td>
						<td>
							{{ @$coa->coaSaldo() ?? '-' }}
						</td>
						<td align="center">
							<button type="button"
                                    class="btn btn-success btn-icon btn-actual"
                                    title="Actuals"
									data-toggle="modal"
									data-target="#modal_actual"
                                    onclick="viewActual({{ $coa->id }}, '{{ $coa->description }}');"
                            >
								<i class="icon-eye"></i>
							</button> --}}
							{{-- <button type="button"
                                    class="btn btn-success btn-icon"
                                    title="Relation"
									data-toggle="modal"
									data-target="#modal_relation"
                                    onclick="viewRelation({{ $coa->id }});"
                            >
								<i class="icon-link"></i>
							</button> --}}
							{{-- <button type="button"
                                    class="btn btn-primary btn-icon"
                                    title="Ubah"
									data-toggle="modal"
									data-target="#modal_edit_budget"
                                    onclick="editCoa({{ $coa->id }});"
                            >
								<i class="icon-pencil7"></i>
							</button> --}}
							{{-- <a class="delbutton"
                               data-toggle="modal"
                               data-target="#modal_theme_danger"
							   data-uri="budgets/{{$coa->id}}"
                            >
                                <button type="button"
                                        class="btn btn-danger btn-icon"
									    title="Hapus"
                                >
                                    <i class="icon-x"></i>
                                </button>
                            </a> --}}
						{{-- </td>
					</tr> --}}
                    {{-- @endforeach
                    @endif --}}

				</tbody>
				</table>
			</div>
			<!-- /hover rows -->
		</div>
	</div>

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

<!--MODAL ACTUAL-->
    <div id="modal_actual" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title" id="title-actual">View Actual COA</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal_body" style="padding: 16px">
                    <div class="row align-items-end">
                        <div class="col-4 form-group">
                            <input type="number" name="year" id="year"
                                class="form-control border-teal border-1"
                                placeholder="Input a valid year"
                                value="{{dateFormat(getSystemDate(), "Y")}}"

                                required
                            />
                        </div>
                        <div class="col-auto form-group">
                            <button
                                class="btn btn-outline-success"
                                id="submit-year"
                                data-coa=""
                                data-title=""
                                type="button"
                            >
                                Select Year
                            </button>
                        </div>
                    </div>

                    <table class="listtable" style="font-size: 14px">
                        <thead>
                            <tr>
                                <th style="text-align:center;width:30%;" rowspan="2"><small>DESCRIPTION</small></th>
                                <th style="text-align:center" colspan="3"><small>MONTH TO DATE</small></th>
                            </tr>
                            <tr>
                                <th style="text-align:center"><small>MTD</small></th>
                                <th style="text-align:center"><small>BUDGET</small></th>
                                <th style="text-align:center"><small>VARIANCE</small></th>
                            </tr>
                        </thead>
                        <tbody id="table_body">
                        </tbody>
                    </table>
                </div>
			</div>
		</div>
	</div>
<!--/MODAL-->

<!--MODAL SHOW-->
<div id="modal_show" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success" align="center">
                <h6 class="modal-title" id="title-actual">View Remaining Balance</span></h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body" style="font-size:16px">
                <input type="hidden" id="remaining_b_id" value="">
                <div class="row">
                    <div class="col-lg-4">Account No.</div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-4" id="accountno"></div>
                </div>
                <div class="row">
                    <div class="col-lg-4">Description</div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-4" id="description">0</div>
                </div>
                <br>
                <div class="row mb-1 justify-content-between" style="font-size:14px">
                    <div class="d-flex pl-2">
                        <label class="col-form-label mr-2">Filter Date: </label>
                        <div>
                            <input type="text" name="transaction_date" class="form-control" id="transaction_date">
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-4">Remaining Balance</div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-4" id="balance">0</div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--/MODAL-->

<!--MODAL SHOW-->
<div id="modal_insert_fs" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning" align="center">
                <h6 class="modal-title" id="title-actual">Insert First Balance</span></h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form action="">
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <label class="col-form-label font-weight-bold">Amount: </label>
                        </div>
                        <div class="col-lg-5">
                            <input type="text" name="amount" class="form-control input_comma_custom" placeholder="0">
                        </div>
                        <div class="col-lg-3">
                            <label>&nbsp;</label>
                            <button class="btn btn-warning">Save</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<!--/MODAL-->

<!--MODAL RELATION-->
    <div id="modal_relation" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title" id="">View Relation COA</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal_body">
                    <table class="table datatable-journal-lists table-hover" id="journal_lists" style="width: 100%">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Reference No</th>
                                <th>Description</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_journal_lists">
                        </tbody>
                    </table>
                </div>
			</div>
		</div>
	</div>
<!--/MODAL-->

<!--MODAL-->
    <div id="modal_add_budget" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title">Add COA</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{ route('coa.store')}}" method="post" id="form_coa">
					@csrf

					{{-- <input type="hidden" name="no_kamar" id="no_kamar"> --}}
					<input type="hidden" name="hotel_id" id="hotel_id" value="{{ hotelID() }}">

					<div class="modal-body">
                        <div class="form-group">
							<label>Main Account</label>
							<select name="main_account_id" id="mainAccount" class="form-control-select2 select-icons" data-fouc>
								@foreach($mains as $key => $value)
									<option value="{{ $value->id }}" data-main="{{$value->main_account}}">{{ $value->name }}({{ $value->main_account }})</option>
								@endforeach
							</select>
						</div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Account Number</label>
                                    <input type="text" name="account_no" id="accountNo" class="form-control border-teal border-1" placeholder="XXX - XXX - XXX" required>
                                    <span class="form-text text-muted">Recently used: <b id="lastCoa"></b></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Mapping Account Number</label>
                                    <!-- <input type="text" name="mapping_act_no" id="mappingAct" class="form-control border-teal border-1"> -->
									<!-- <input type="text" name="mapping_act_no" id="mappingAct" class="form-control border-teal border-1"> -->
									<select name="mapping_act_no[]"
											id="mapping_act_no"
											class="form-control-select2 select-icons border-teal border-1"
											multiple="multiple"
											data-fouc
									>
										<option value="">** Select Mapping Account Number **</option>
                                        @foreach(config('custom.mapping_account_nos') as $key => $value)
                                        <option value="{{ $key }}">{{ $key }} - {{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" name="description" id="description" class="form-control border-teal border-1" placeholder="Description" required>
                        </div>
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>Account Type <br> <small>**(for Balance Sheet Report)</small></label>
                                    <select name="account_type" id="accountType" class="form-control-select2 select-icons" data-fouc>
                                        @foreach(config('custom.account_type_coa') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }} ({{ $key }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>FS Type <br> <small>**(for Profit Loss Report)</small></label>
                                    <select name="fs_catno" id="fsCatNo" class="form-control-select2 select-icons" data-fouc>
                                        @foreach(config('custom.fs_catno_coa') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }} ({{ $key }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
							<label>Department</label>
							<select name="dept" id="dept" class="form-control-select2 select-icons" data-fouc>
                                <option value="">-- Select Department --</option>
								@foreach($departments as $department)
									<option value="{{ $department->id }}">{{ $department->name }}</option>
								@endforeach
							</select>
						</div>
                        <div class="form-group">
                            <label>Comment</label>
                            <textarea name="comment" id="comment" placeholder="Comment (optional)" class="form-control border-teal border-1"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Active Flag</label>
                                    <select name="active_flag" id="activeFlag" class="form-control-select2 select-icons" data-fouc>
                                        @foreach(config('custom.active_flag_coa') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md">
                                <label>Tax Code</label>
                                <input type="text" name="tax_code" id="taxCode" class="form-control border-teal border-1" placeholder="Tax Code (optional)">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label>FO status**(for used on FO role)</label>
                                <select name="fo_status" id="fo_status" class="form-control-select2 select-icons" data-fouc>
                                    <option value="0">NO</option>
                                    <option value="1">YES</option>
                                </select>
                            </div>
                        </div>
					</div>

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

<!--MODAL-->
    <div id="modal_edit_budget" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-primary" align="center">
					<h6 class="modal-title">Edit COA</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="form_edit_coa">
					@csrf
                    @method('PUT')

					{{-- <input type="hidden" name="no_kamar" id="no_kamar"> --}}

					<div class="modal-body">
                        <div class="form-group">
							<label>Main Account</label>
							<select name="main_account_id" id="mainAccount" class="form-control-select2 select-icons" data-fouc>
                                @foreach($mains as $key => $value)
									<option value="{{ $value->id }}" data-main="{{$value->main_account}}">{{ $value->name }}({{ $value->main_account }})
                                    </option>
								@endforeach
								{{-- @foreach(config('custom.main_account_coa') as $key => $value)
									<option value="{{ $key }}">{{ $value }} ({{ $key }})</option>
								@endforeach --}}
							</select>
						</div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Account Number</label>
                                    <input type="text" name="account_no" id="accountNo" class="form-control border-teal border-1" placeholder="XXX - XXX - XXX" required>
                                    <span class="form-text text-muted">Currently used: <b id="lastCoaEdit"></b></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Mapping Account Number</label>
                                    <!-- <input type="text" name="mapping_act_no" id="mappingAct" class="form-control border-teal border-1"> -->
									<select name="mapping_act_no[]"
											id="mappingAct"
											class="form-control-select2 select-icons border-teal border-1"
											data-fouc
											multiple="multiple"
									>
										{{-- <option value="">** Select Mapping Account Number **</option> --}}
                                        @foreach(config('custom.mapping_account_nos') as $key => $value)
                                        <option value="{{ $key }}">{{ $key }} - {{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" name="description" id="description" class="form-control border-teal border-1" placeholder="Description" required>
                        </div>
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>Account Type <br> <small>**(for Balance Sheet Report)</small></label>
                                    <select name="account_type" id="accountType" class="form-control-select2 select-icons" data-fouc>
                                        @foreach(config('custom.account_type_coa') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }} ({{ $key }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>FS Type <br> <small>**(for Profit Loss Report)</small></label>
                                    <select name="fs_catno" id="fsCatNo" class="form-control-select2 select-icons" data-fouc>
                                        @foreach(config('custom.fs_catno_coa') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }} ({{ $key }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
							<label>Department</label>
							<select name="dept" id="dept" class="form-control-select2 select-icons" data-fouc>
                                <option value="">-- Select Department --</option>
								@foreach($departments as $department)
									<option value="{{ $department->id }}">{{ $department->name }}</option>
								@endforeach
							</select>
						</div>
                        <div class="form-group">
                            <label>Comment</label>
                            <textarea name="comment" id="comment" placeholder="Comment (optional)" class="form-control border-teal border-1"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Active Flag</label>
                                    <select name="active_flag" id="activeFlag" class="form-control-select2 select-icons" data-fouc>
                                        @foreach(config('custom.active_flag_coa') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md">
                                <label>Tax Code</label>
                                <input type="text" name="tax_code" id="taxCode" class="form-control border-teal border-1" placeholder="Tax Code (optional)">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label>FO status**(for used on FO role)</label>
                                <select name="fo_status" id="fo_status" class="form-control-select2 select-icons" data-fouc>
                                    <option value="0">NO</option>
                                    <option value="1">YES</option>
                                </select>
                            </div>
                        </div>
					</div>

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

<!-- 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> Hapus Data? </h2>
				</div>

				<div class="modal-footer">
					<a type="button" class="btn btn-link" data-dismiss="modal">Batal</a>
					<button type="submit" class="btn bg-danger">Hapus</button>
				</div>
			</form>
		</div>
	</div>
</div> --}}
<!-- /default 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">Upload COA Excel</span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{ url('upload-default-coa') }}" 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="{{ url('download-default-coa') }}" class="m-1"><button class="btn btn-sm btn-light" type="button"> <i class="fas fa-download"></i>Download Excel Default Template</button></a>
                    </div>

                    <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-->

@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/editors/summernote/summernote.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.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/form_inputs.js')}}"></script>

<script>
    const accountNo = $("#accountNo")
    const mainAccount = $("#mainAccount")
    const mappingAccount = $("#mappingAct")
    const description = $("#description")
    const accountType = $("#accountType")
    const fsCatNo = $("#fsCatNo")
    const dept = $("#dept")
    const comment = $("#comment")
    const activeFlag = $("#activeFlag")
    const lastCoa = $("#lastCoa")
    const lastCoaEdit = $("#lastCoaEdit")
    const submitYear = $("#submit-year")

    // $('#transaction_date').daterangepicker({
    //     startDate: "{{date('01-m-Y', strtotime(getSystemDate()))}}",
    //     endDate: "{{date('t-m-Y', strtotime(getSystemDate()))}}",
    //     applyClass: 'btn-primary',
    //     cancelClass: 'btn-light',
    //     locale: {
    //         format: 'DD-MM-YYYY'
    //     }
    // });

    $('#transaction_date').daterangepicker({
        singleDatePicker: true,
        startDate: "{{date('01-m-Y', strtotime(getSystemDate()))}}",
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    $(document).ready(function() {
        // init mask input account no
		accountNo.mask("000-000-000", {
            placeholder: "___-___-___",
        })

        let value = mainAccount.find(":selected").data('main')
        handleSetAccountNo(value)

        // open modal create if get new generate from results running audit..
        var queryString = window.location.search;
        var urlParams = new URLSearchParams(queryString);
        var m_coa = urlParams.get('m_coa');
        if (m_coa) {
            mainAccount.val('120').trigger('change')
            accountNo.val(`${m_coa}`)
            $('#modal_add_budget').modal('show')
        }
    })

    $(document).on("input", "#year", function () {
		$(this).mask("0000")
	});

    mainAccount.on("change", function() {
        const value = $(this).find(":selected").data('main')
        handleSetAccountNo(value)
    })

    submitYear.on("click", function(){
        const coa = $(this).data('coa');
        const title = $(this).data('title');

        viewActual(coa, title);
    })

    $('#modal_actual').on('hidden.bs.modal', function () {
        const submit = $('#submit-year');
        submit.attr('data-coa', "");
        submit.attr('data-title', "");

        const year = $('#year').val("{{dateFormat(getSystemDate(), 'Y')}}");
    });

    function handleSetAccountNo(value)
    {
        accountNo.val(`${value}-000-000`)

        if(value){
            getLastCoa(value)
        }
    }

    function getLastCoa(mainAccount)
    {
        $.ajax({
            type: 'GET',
            url: "{{ url('/getlastcoa/')}}/"+mainAccount,
            success: function (data) {
                lastCoa.text(data)
                lastCoaEdit.text(data)
            }
        });
    }

	function editCoa(id)
    {
		$.ajax({
            type: 'GET',
            url: "{{ url('/getdetailcoa/')}}/"+id,
            success: function (data) {

				let mapping_act_no = isJsonString(data.mapping_act_no) ? JSON.parse(data.mapping_act_no) : data.mapping_act_no;

                $("#form_edit_coa").attr("action", "{{ url('coa')}}/"+data.id);

                $('#form_edit_coa #mainAccount').val(data.main_account_id).trigger('change');
                $('#form_edit_coa #accountNo').val(data.account_no);
                $('#form_edit_coa #accountType').val(data.account_type).trigger('change');
                $('#form_edit_coa #fsCatNo').val(data.fs_catno).trigger('change');
                $('#form_edit_coa #mappingAct').select2().val(mapping_act_no ?? '').trigger('change');
                $('#form_edit_coa #dept').val(data.dept).trigger('change');
                $('#form_edit_coa #description').val(data.description);
                $('#form_edit_coa #comment').val(data.comment ?? '');
                $('#form_edit_coa #taxCode').val(data.tax_code ?? '');
                $('#form_edit_coa #activeFlag').val(data.active_flag).trigger('change');
                $('#form_edit_coa #fo_status').val(data.fo_status).trigger('change');
            }
		});
	}

    function viewActual(id, title){
        const year = $('#year');
        const submit = $('#submit-year');
        submit.attr('data-coa', id);
        submit.attr('data-title', title);

		$.ajax({
				type: 'GET',
				url: "{{ url('coa/actuals')}}/"+id+"/"+year.val(),
				success: function (data) {
                    $('#title-actual').text(title)

                    if(data){
                        $('#table_body').html(data)
                    }
				}
		});
	}

    function viewBalance(id){
        $('#modal_show #accountno').html(null)
        $('#modal_show #description').html(null)
        $('#modal_show #balance').html(0)
		$.ajax({
				type: 'GET',
				url: "{{ url('coa/remainingbalance')}}/"+id,
				success: function (data) {
                    if(data){
                        $('#modal_show #accountno').html(data.coa.account_no)
                        $('#modal_show #description').html(data.coa.description)
                        $('#modal_show #remaining_b_id').val(id)
                        $('#modal_show #balance').html((Number(data.balance).toLocaleString('en-US')) ?? 0)
                    }
				}
		});
	}

    $('#transaction_date').on('apply.daterangepicker', (e, picker) => {
        var date = document.getElementById("transaction_date").value
        var id = document.getElementById("remaining_b_id").value
        $.ajax({
				type: 'GET',
				url: "{{ url('coa/remainingbalance')}}/"+id,
                data:{
                    date:date,
                },
				success: function (data) {
                    if(data){
                        $('#modal_show #balance').html((Number(data.balance).toLocaleString('en-US')) ?? 0)
                    }
				}
		});
    });


    // function for view relation coa
    function viewRelation(coa_id) {
        // ajax get Relation coa
        $.ajax({
            type: 'GET',
            url: "{{ url('/get-journal-draft-lists-by-coa-id')}}/"+coa_id,
            success: function (results) {
                let draft = null

                $('.datatable-journal-lists').DataTable().destroy();

                let html_journal_lists = ''

                $.each(results, function(key_result, result){
                    if (result?.draft) {
                        draft = result.draft

                        html_journal_lists += `<tr>
                                                    <td>${moment(draft.from).format('DD-MM-YYYY')}</td>
                                                    <td><button class="btn btn-link" onclick="redirectToDraft(${draft.id}, '${draft.journal_entry}', ${draft.status})">${draft.reference_no}</button></td>
                                                    <td>${draft.description}</td>
                                                    <td>${(draft.debits).toLocaleString('ja-JP')}</td>
                                                </tr>`
                    }
                })

                $('#tbody_journal_lists').html(html_journal_lists)

                $('.datatable-journal-lists').DataTable().draw();
            }
        });
    }

    function redirectToDraft(draft_id, journal_entry, status) {
        let array_for_show_drafts = {'draft_id' : draft_id, 'journal_entry' : journal_entry}
        window.sessionStorage.setItem('draft', JSON.stringify(array_for_show_drafts))

        window.open("{{ url('income-audit/gl-list') }}?from="+journal_entry+"&to="+journal_entry+"&type="+status+"", "_blank");

        setTimeout(function() {
            sessionStorage.removeItem('draft');
        }, 1000);
    }

	//modal delete
		/* $(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		}); */

    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,
                    width: 200,
                    targets: [ 0 ]
                },
                {
                        "targets": 6,
                        "className": "text-center",
                        "orderable": false
                }
                ],
                // scrollX:true,
                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;' }
                }
            });

            let datas = [
                {data: 'account_no'},
                {data: 'description'},
                {data: 'mainaccount'},
                {data: 'accounttype'},
                {data: 'fstype'},
                {data: 'fo_status'},
                {data:null, render:function(data, type, row){
                    let html = '';
                    // var htmla += `
                    //     <a href="{{url('coa-mutasi')}}/${data.id}">
                    //     <button type="button"
                    //             class="btn btn-light btn-icon "
                    //             title="See Mutation coa"
                    //     >
                    //         <i class="fas fa-clipboard-list"></i>
                    //     </button>
                    //     </a>
                    //     <button type="button"
                    //             class="btn btn-warning btn-icon"
                    //             title="Insert first balance"
                    //             data-toggle="modal"
                    //             data-target="#modal_insert_fs"
                    //             onclick="insertFB(${data.id})"
                    //     >
                    //         <i class="icon-add"></i>
                    //     </button>
                    //     <button type="button"
                    //             class="btn btn-light btn-icon btn-actual"
                    //             title="See Remaining Balance"
                    //             data-toggle="modal"
                    //             data-target="#modal_show"
                    //             onclick="viewBalance(${data.id});"
                    //     >
                    //         <i class="icon-exclamation"></i>
                    //     </button>
                    //     <button type="button"
                    //             class="btn btn-success btn-icon btn-actual"
                    //             title="Actuals"
                    //             data-toggle="modal"
                    //             data-target="#modal_actual"
                    //             onclick="viewActual(${data.id}, '${data.description}');"
                    //     >
                    //         <i class="icon-eye"></i>
                    //     </button>
                    //     <button type="button"
                    //             class="btn btn-primary btn-icon"
                    //             title="Ubah"
                    //             data-toggle="modal"
                    //             data-target="#modal_edit_budget"
                    //             onclick="editCoa(${data.id});"
                    //     >
                    //         <i class="icon-pencil7"></i>
                    //     </button>
                    // `;

                    html += `
                        <div class="dropdown outerHTML">
                            <button type="button" class="btn btn-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                More
                                <i class="icon-more"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" style="z-index:5">
                                <a href="{{url('coa-mutasi')}}/${data.id}" class="dropdown-item btn btn-warning btn-icon">
                                    <i class="fas fa-clipboard-list"></i> See mutation coa
                                </a>
                                <a href="#" class="dropdown-item btn btn-warning btn-icon text-warning"
                                    title="Insert first balance"
                                    data-toggle="modal"
                                    data-target="#modal_insert_fs"
                                    onclick="insertFB(${data.id})"
                                >
                                    <i class="icon-add"></i> Insert first saldo
                                </a>
                                <a href="#" class="dropdown-item btn btn-light btn-icon btn-actual"
                                    title="See Remaining Balance"
                                    data-toggle="modal"
                                    data-target="#modal_show"
                                    onclick="viewBalance(${data.id});"
                                >
                                    <i class="icon-exclamation"></i> View balance account
                                </a>
                                <a href="#" class="dropdown-item btn btn-success btn-icon btn-actual text-success"
                                    title="Actuals"
                                    data-toggle="modal"
                                    data-target="#modal_actual"
                                    onclick="viewActual(${data.id}, '${data.description}');"
                                >
                                    <i class="icon-eye"></i> View actual modal budget account
                                </a>
                                <a href="#" class="dropdown-item btn btn-primary btn-icon text-primary"
                                    title="Edit"
                                    data-toggle="modal"
                                    data-target="#modal_edit_budget"
                                    onclick="editCoa(${data.id});"
                                >
                                    <i class="icon-pencil7"></i> Edit COA
                                </a>
                            </div>
                        </div>
                    `;

                    return html
                }}
            ];

            // Basic datatable
            $('.datatable-basic').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{url('/coa-datatable')}}",
                    type: "GET",
                },
                columns: datas,
                "order": [[ 0, "desc" ]],
            });
            // $('.datatable-basic').DataTable({
            //     "bInfo" : false
            // });

            $('.datatable-journal-lists').DataTable({
                "bInfo" : false,
            });

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

    var FormValidation = function() {

        // Validation config
        var _componentValidation = function() {
            if (!$().validate) {
                console.warn('Warning - validate.min.js is not loaded.');
                return;
            }

            // Initialize
            var validator_edit_coa = $('#form_edit_coa').validate({
                focusInvalid: false,
                ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
                errorClass: 'validation-invalid-label',
                //successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').addClass('has-error');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').removeClass('has-error');
                },
                // success: function(label) {
                //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
                //},

                // Different components require proper error label placement
                errorPlacement: function(error, element) {

                    // Unstyled checkboxes, radios
                    if (element.parents().hasClass('form-check')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parents('.form-check').parent() );
                    }

                    // Input with icons and Select2
                    else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent() );
                    }

                    // Input group, styled file input
                    else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent().parent() );
                    }

                    // Other elements
                    else {
                        $(element).closest('.addError').addClass('has-error');
                        error.insertAfter(element);
                    }
                },
                messages: {
                    account_no: {
                        required: 'Please fill out this field.'
                    },
                    description: {
                        required: 'Please fill out this field.'
                    },
                    dept: {
                        required: 'Please select an item in the list.'
                    },
                },
            });

            // Initialize
            var validator_add_coa = $('#form_coa').validate({
                focusInvalid: false,
                ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
                errorClass: 'validation-invalid-label',
                //successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').addClass('has-error');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').removeClass('has-error');
                },
                // success: function(label) {
                //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
                //},

                // Different components require proper error label placement
                errorPlacement: function(error, element) {

                    // Unstyled checkboxes, radios
                    if (element.parents().hasClass('form-check')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parents('.form-check').parent() );
                    }

                    // Input with icons and Select2
                    else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent() );
                    }

                    // Input group, styled file input
                    else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent().parent() );
                    }

                    // Other elements
                    else {
                        $(element).closest('.addError').addClass('has-error');
                        error.insertAfter(element);
                    }
                },
                messages: {
                    account_no: {
                        required: 'Please fill out this field.'
                    },
                    description: {
                        required: 'Please fill out this field.'
                    },
                    dept: {
                        required: 'Please select an item in the list.'
                    },
                },
            });

            $('#modal_edit_budget, #modal_add_budget').on('hidden.bs.modal', function () {
                validator_edit_coa.resetForm();
                validator_add_coa.resetForm();
            })
        };

        // Return objects assigned to module
        return {
            init: function() {
                _componentValidation();
            }
        }
    }();

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

    document.addEventListener('DOMContentLoaded', function() {
        DatatableBasic.init();
        FormValidation.init();
    });
</script>
<script type="text/javascript">
	$( document ).ready(function() {

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

			$('.daterange-single').daterangepicker({
				applyClass: 'btn-primary',
				cancelClass: 'btn-light',
				startDate: '{{ dateFormat(getSystemDate(), "d-m-Y") }}',
                endDate: '{{ dateFormat(getSystemDate(), "d-m-Y") }}',
				locale: {
					format: 'DD-MM-YYYY'
				}
			});

	        // 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

		});

        function insertFB(id) {
            var inserturl = 'insert-saldoawal/'+id;
            $('#modal_insert_fs form').attr('action', inserturl)
        }

        $('.input_comma_custom').on('input', function(){
            $('.input_comma_custom').mask("#,##0", {
                reverse: true,
                translation: {
                    '#': {
                    pattern: /-|[0-9*]/,
                    recursive: true
                    }
                }
            });//set separator number
        })

        $('form').submit(function() {
            $(".input_comma_custom").unmask();
        });

</script>
@endsection