@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

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

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

@section('content')

	<!-- Page header -->
	<div class="page-header {{\Auth::user()->role == 1 ? 'page-header-light' : ''}}">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">A/P Payment</span></h4>
			</div>
            <div class="d-flex">
                <button type="button"
                        class="btn btn-success"
                        data-toggle="modal"
                        data-target="#modal_ap_manual"
                >
                    <i class="fas fa-file-invoice-dollar"></i>&nbsp;
                    Create Manual A/P
                </button>
            </div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<div class="row mb-1 justify-content-between">
			<div class="d-flex pl-2">
				<label class="col-form-label mr-2 font-weight-bolder">Company: </label>
				<div>
					<select name="company_id" id="company_id" onchange="onchangeCompany()" class="form-control form-control-select2">
						<option value="">-- Select Company --</option>
						<option value="A" {{ isset($_GET['company']) ? ($_GET['company'] == 'A' ? 'selected' : '') : '' }}>-- ALL COMPANY --</option>
						<option value="0" {{ isset($_GET['company']) ? ($_GET['company'] == '0' ? 'selected' : '') : '' }}>-- Empty Recipient --</option>
						@foreach($suppliers as $supplier)
						<option value="{{$supplier->id}}" {{ isset($_GET['company']) ? ($_GET['company'] == $supplier->id ? 'selected' : '') : '' }}>{{ $supplier->company_title.' '.$supplier->company_name }}</option>
						@endforeach
					</select>
				</div>
				{{--
					<div class="ml-2 font-weight-bolder">
						&nbsp; <label class="col-form-label mr-2">Total AR Payment: Rp.<span id="total_tagihan">0</span></label>
					</div>
				--}}
			</div>
			<div class="d-flex pr-2">
				<label class="col-form-label mr-2 font-weight-bolder">Total Balance: {{ ribuanWithComma($balance_amount) }}</label>
			</div>
		</div>
		<div class="card mt-0 table-responsive">
			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th style="display: none">#</th>
						<th>Supplier Name</th>
						<th>Date</th>
						<th>Doc. Number</th>
						<th>Deliver Note</th>
						<th style="text-align: right">Amount</th>
						<th>Due Date</th>
						<th style="text-align: right">Paid</th>
						<th>Remark</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody>
				@php
				$no = 1;
				$idx_item = 0;
				@endphp

				<!-- Fetch Account Payable -->
				@foreach($account_payables as $account_payable)
					@php
					$balance = $account_payable->nett_balance - $account_payable->paid_amount
					@endphp

					@if($balance > 0)
					<tr id="invoice_item{{$idx_item}}">
						<td style="display: none">
							{{--
								<input type="checkbox" name="check[{{$idx_item}}]"
									   id="check{{$idx_item}}" value="{{$idx_item}}"
									   data-idx="{{$idx_item}}">
							--}}
							<input type="hidden" name="account_payable_id[{{$idx_item}}]"
								   id="account_payable{{$idx_item}}" value="{{$account_payable->id}}"
								   data-idx="{{$idx_item}}"
							>
							<input type="hidden" name="supplier_id[{{ $idx_item }}]"
								   id="supplier_id{{ $idx_item }}"
								   value="{{ $account_payable->supplier_id }}">
							@if($account_payable->supplier)
							<input type="hidden" name="supplier_name[{{ $idx_item }}]"
								   id="supplier_name{{ $idx_item }}"
								   value="{{ $account_payable->supplier->company_title.' '.$account_payable->supplier->company_name }}">
							@endif
							<input type="hidden" name="document_no[{{ $idx_item }}]"
								   id="document_no{{ $idx_item }}"
								   value="{{ $account_payable->document_no }}">
							<input type="hidden" name="deliver_note[{{ $idx_item }}]"
								   id="deliver_note{{ $idx_item }}"
								   value="{{ $account_payable->deliver_note }}">
							<input type="hidden" name="invoice_date[{{ $idx_item }}]"
								   id="invoice_date{{ $idx_item }}"
								   value="{{ date('d-m-Y', strtotime($account_payable->invoice_date)) }}">
							<input type="hidden" name="nett_balance[{{ $idx_item }}]"
								   id="nett_balance{{ $idx_item }}"
								   value="{{ $account_payable->nett_balance }}">
							<input type="hidden" name="due_date[{{ $idx_item }}]"
								   id="due_date{{ $idx_item }}"
								   value="{{ date('d-m-Y', strtotime($account_payable->due_date)) }}">
							<input type="hidden" name="note[{{ $idx_item }}]"
								   id="note{{ $idx_item }}"
								   value="{{ $account_payable->note }}">
							<input type="hidden" name="coa_id[{{ $idx_item }}]"
								   id="coa_id{{ $idx_item }}"
								   value="{{ $account_payable->coa_id }}">
							<input type="hidden" name="paid_amount[{{ $idx_item }}]"
								   id="paid_amount{{ $idx_item }}"
								   value="{{ $account_payable->paid_amount ?? 0 }}">
						</td>
						@if($account_payable->supplier)
						<td>{{ $account_payable->supplier->company_title.' '.$account_payable->supplier->company_name }}</td>
						@else
						<td><span class="text-danger">Empty Recipient</span></td>
						@endif
						<td>{{ date('d-m-Y', strtotime($account_payable->invoice_date)) }}</td>
						<td>{{ $account_payable->document_no }}</td>
						<td>{{ $account_payable->deliver_note }}</td>
						<td style="text-align: right">
							{{ ribuanWithComma($balance) }}
						</td>
						<td>{{ date('d-m-Y', strtotime($account_payable->due_date)) }}</td>
						<td style="text-align: right">{{ ribuanWithComma($account_payable->paid_amount) }}</td>
						<td>
                            @php
                                if ($account_payable->note != null) {
                                    if(strlen($account_payable->note) > 10){
                                        $singkatanBefore = substr($account_payable->note, 0, 15).'&nbsp<a href="#/" class="link_hide" onclick="showMore('.$account_payable->id.')">[more]</a>';
                                    }
                                    else{
                                        $singkatanBefore = $account_payable->note;
                                    }
                                }else {
                                        $singkatanBefore = null;
                                }
                            @endphp
                            <div class="singkatan{{$account_payable->id}} resetS" style="white-space: nowrap">{!! $singkatanBefore !!}</div>
                            <div class="kepanjangan{{$account_payable->id}} resetK" style="display: none;">
                                {{ $account_payable->note }} <br>
                                <a href="#/" class="link_hide" onclick="hideMore({{$account_payable->id}})">[hide]</a></div>
                            </div>
                        </td>
						<td>
							<button type="button"
									class="btn btn-success"
									onclick="apPayment({{ $idx_item }})"
							>
								<i class="fas fa-money-bill"></i>
							</button>
                            @if ($account_payable->status_manual == 1)
                                <a class="delbutton"
                                    data-toggle="modal"
                                    data-target="#modal_theme_danger"
                                    data-uri="account-receivable/{{$account_payable->id}}"
                                >
                                    <button type="button" class="btn btn-danger btn-icon"
                                                title="Delete"><i class="icon-x"></i></button>
                                </a>
                            @endif
						</td>
					</tr>
					@endif

					@php
					$no++;
					$idx_item++;
					@endphp
				@endforeach
				</tbody>
			</table>
		</div>
	</div>
	<!-- /content area -->

    <!--MODAL Create AP Manual-->
    <div id="modal_ap_manual" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title">Create Manual A/P</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{ route('account-payable.storemanual')}}" method="post" id="form_coa">
					@csrf
					<input type="hidden" name="hotel_id" id="hotel_id" value="{{ hotelID() }}">

					<div class="modal-body">
						<div class="form-group">
							<label for="transaction_type">Transaction Type<small class="text-danger font-weight-bolder">*</small></label>
							<select name="transaction_type" id="transaction_type" class="form-control" required>
								<option value="">** Choose Transaction Type **</option>
								@foreach(config('custom.payable_transaction_types') as $key => $transaction_type)
								<option value="{{ $key }}">{{ $transaction_type }}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group">
                            <label id="recipient" for="supplier">Supplier<small class="text-danger font-weight-bolder">*</small>:</label>
                            <select name="supplier_id" class="form-control" id="supplier_id" required>
                                <option id="opt_recipient" value="">** Choose Supplier **</option>
                                @foreach($suppliers as $supplier)
                                <option value="{{$supplier->id}}">{{ $supplier->company_title.' '.$supplier->company_name }}</option>
                                @endforeach
                            </select>
                        </div>
						<div id="transaction_type_cost" style="display:none;">
							<div class="form-group">
								<label for="cost_types">Expense Type<small class="text-danger font-weight-bolder">*</small></label>
								<select name="cost_type" id="cost_type" class="form-control">
									<option value="">** Choose Expense Type **</option>
									@foreach(config('custom.cost_types') as $key => $cost_type)
									<option value="{{ $key }}">{{ $cost_type }}</option>
									@endforeach
								</select>
							</div>
						</div>
                        <div>
                            <div class="form-group pay_cash">
                                <label for="pay_from">Payment Method<small class="text-danger font-weight-bolder">*</small></label>
                                <select name="pay_from" id="pay_from" class="form-control">
                                    <option value="">** Choose Payment Method **</option>
                                    @foreach($metode_pembayarans as $metode_pembayaran)
                                    <option value="{{$metode_pembayaran->id}}">{{ $metode_pembayaran->nama_metode }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-12" id="balance_row">
                                    <label for="invoice_date">Balance <small class="text-danger font-weight-bolder">*</small></label>
                                    <input type="text" class="form-control" id="nett_balance" name="nett_balance" onkeyup="formatNumber(this)">
                                </div>
                                <div class="col-lg-6 pay_cash" style="display: none">
                                    <label for="pay_amount">Pay Amount: <small class="text-danger font-weight-bolder">*</small></label>
                                    <input type="text" class="form-control" id="pay_amount" name="pay_amount" onkeyup="formatNumber(this)">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="document_no">Document No <small class="text-danger font-weight-bolder">*</small>:</label>
                            <input type="text" class="form-control" id="document_no" name="document_no" required>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="deliver_note">Deliver Note <small class="text-danger font-weight-bolder">*</small>:</label>
                                <input type="text" class="form-control" id="deliver_note" name="deliver_note" required>
                            </div>
                            <div class="col-md-6">
                                <label for="invoice_date">Inv. Date <small class="text-info">(default: datesystem)</small> </label>
                                <input type="text" class="form-control" id="invoice_date" name="invoice_date">
                            </div>
                        </div>
                        {{--
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="disc_percentage">Discount(%)</label>
                                </div>
                                <div class="col-md-8">

                                </div>
                            </div>
                        --}}
                        {{-- <div class="form-group">
                            <label for="invoice_date">Balance <small class="text-danger font-weight-bolder">*</small></label>
                            <input type="text" class="form-control" id="nett_balance" name="nett_balance" onkeyup="formatNumber(this)">
                        </div> --}}
                        <div class="form-group">
                            <label for="due_date">Due Date:</label>
                            <input type="text" class="form-control daterange-single" id="due_date" name="due_date">
                        </div>
                        <div class="form-group">
                            <label for="note" id="note_label">Note:</label>
                            <textarea name="note" id="note" class="form-control" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="coa">COA <small class="text-info">(default: {{@dataSettingCoa()->coaApPayment ? (@dataSettingCoa()->coaApPayment->account_no.' - '.@dataSettingCoa()->coaApPayment->description) : null}})</small></label>
                            <select name="coa_id" class="form-control" id="coa_id">
                                <option value="">&nbsp;</option>
                                @foreach($coas as $coa)
                                <option value="{{$coa->id}}">({{ $coa->account_no }}) {{ $coa->description }}</option>
                                @endforeach
                            </select>
                        </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 CREATE AP MANUAL-->

	<!-- MODAL AP PAYMENT -->
	<div id="ap_payment_modal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title">AP Payment</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<form action="{{ route('account-payable.storepayment')}}" method="post" id="form_coa">
					@csrf
					<div class="modal-body">
						<input type="hidden" id="payment_account_payable_id" name="account_payable_id">
						<input type="hidden" id="payment_supplier_id">
						<div class="form-group">
							<label for="supplier_name">Recipient</label>
							<input type="text" class="form-control" id="payment_supplier_name" disabled>
						</div>
						<div class="form-group">
							<label for="doc_number">Doc Number</label>
							<input type="text" class="form-control" id="payment_doc_number" disabled>
						</div>
						<div class="row mb-3">
							<div class="col-md-6">
								<label for="deliver_note">Deliver Note</label>
								<input type="text" class="form-control" id="payment_deliver_note" disabled>
                            </div>
                            <div class="col-md-6">
								<label for="supplier_name">Invoice Date</label>
								<input type="text" class="form-control" id="payment_invoice_date" disabled>
                            </div>
						</div>
						<div class="form-group">
							<label for="due_date">Due Date:</label>
							<input type="text" class="form-control" id="payment_due_date" disabled>
						</div>
						<div class="form-group">
							<label for="due_date">Payment Method <small class="text-danger font-weight-bold">*</small>:</label>
							<select name="pembayaran_ap_id" id="pembayaran_ap_id" class="form-control">
								@foreach($metode_pembayarans as $metode_pembayaran)
								<option value="{{ $metode_pembayaran->id }}">{{ $metode_pembayaran->nama_metode }}</option>
								@endforeach
							</select>
						</div>
						<div class="row mb-3">
							<div class="col-md-6">
								<label for="payment_amount">Payment Amount <small class="text-danger font-weight-bold">*</small>:</label>
								<input type="text" class="form-control" id="payment_amount" name="payment_amount" onkeyup="formatNumber(this);" onchange="countLeftBalance(this);" required>
                            </div>
                            <div class="col-md-6">
								<label for="left_balance">Left Balance:</label>
								<input type="text" class="form-control" id="payment_left_balance" disabled>
                            </div>
						</div>

						<div class="form-group">
							<label for="transaction_date">Transaction Date <small class="text-danger font-weight-bold">*</small>:</label>
							<input type="text" class="form-control daterange-single" name="transaction_date" id="payment_transaction_date" required>
						</div>

						<div class="form-group">
							<label for="note">Note:</label>
							<textarea id="payment_note" class="form-control" rows="3" disabled></textarea>
						</div>

						<div class="form-group">
							<label for="payment_comment">Payment Comment:</label>
							<input type="text" id="payment_comment" name="payment_comment" class="form-control">
						</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 AP PAYMENT -->

    <!-- 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> Delete Data? </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 -->
@endsection

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

	<!-- JS Date Picker -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>
    <script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.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>

    function showMore(id){
        $(".resetS").show();
        $(".resetK").hide();
        $(".singkatan"+id).hide();
        $(".kepanjangan"+id).show();
    }

    function hideMore(id){
        $(".kepanjangan"+id).hide();
        $(".singkatan"+id).show();
    }

	//DATA TABLE
    $('select').select2();

	//On Change Company
	function onchangeCompany(){
		let newRequest = window.location.search;
        let params = new URLSearchParams(newRequest);
		params.delete('company');
        params.append('company', document.getElementById("company_id").value);
        document.location.href = "?" + params.toString();
	}

	//AP Payment
	function apPayment(idx_item){
		$('#ap_payment_modal').modal('show');

		let account_payable_id = $('#account_payable'+idx_item).val();
		let supplier_id = $('#supplier_id'+idx_item).val();
		let supplier_name = $('#supplier_name'+idx_item).val();
		let invoice_date = $('#invoice_date'+idx_item).val();
		let document_no = $('#document_no'+idx_item).val();
		let deliver_note = $('#deliver_note'+idx_item).val();
		let due_date = $('#due_date'+idx_item).val();
		let balance = $('#nett_balance'+idx_item).val();
		let paid_amount = $('#paid_amount'+idx_item).val();
		let note = $('#note'+idx_item).val();

		$('#payment_account_payable_id').val(account_payable_id);
		$('#payment_supplier_id').val(supplier_id);
		if(supplier_name){
			$('#payment_supplier_name').val(supplier_name);
		}
		else{
			$('#payment_supplier_name').val('Empty Recipient');
		}
		$('#payment_invoice_date').val(invoice_date);
		$('#payment_doc_number').val(document_no);
		$('#payment_deliver_note').val(deliver_note);
		$('#payment_due_date').val(due_date);
		$('#payment_note').val(note);
		$('#payment_left_balance').val(parseInt(balance - paid_amount).toLocaleString('EN-US'));
	}

	$('#transaction_type').on('change', function(){
		let val = $(this).val();

		// console.log(val);

		//Jika Tipe Transaksi Pembelian
		if(val == 1){
			//Penerima Wajiib Diisi
			$('#recipient').html('Supplier<small class="text-danger">*</small>:');
			$('#opt_recipient').select2().html('** Choose Supplier **').trigger('change');
			$('#supplier_id').select2({dropdownParent: $(this).parent()}).attr('required', 'required').trigger('change');

			//Pilihan Cost Type Dihilangkan
			$('#transaction_type_cost').hide();
			$('#cost_type').removeAttr('required');
			$('#pay_from').removeAttr('required');
			$('#pay_amount').removeAttr('required');
			$('#note_label').html('Note:');
		}
		//Jika Tipe Transaksi Pembiayaan
		else if(val == 2){
			//Penerima Tidak Wajib Diisi
			$('#recipient').html('Recipient:');
			$('#opt_recipient').select2().html('** Choose Recipient **').trigger('change');
			$('#supplier_id').select2({dropdownParent: $(this).parent()}).removeAttr('required').trigger('change');

			//Pilihan Cost Type Dimunculkan
			$('#transaction_type_cost').show();
			$('#cost_type').attr('required', 'required');

			$('#pay_from').attr('required', 'required');
			$('#pay_amount').attr('required', 'required');
			$('#note_label').html('Payment Comment:');
		}
		else{
			$('#recipient').html('Supplier<small class="text-danger">*</small>:');
			$('#opt_recipient').select2().html('** Choose Supplier **').trigger('change');
			$('#supplier_id').select2({dropdownParent: $(this).parent()}).attr('required', 'required').trigger('change');

			//Pilihan Cost Type Dihilangkan
			$('#transaction_type_cost').hide();
			$('#cost_type').removeAttr('required');
			$('#pay_from').removeAttr('required');
			$('#pay_amount').removeAttr('required');
			$('#note_label').html('Note:');
		}
	});

	$('#cost_type').on('change', function(){
		let cost_type = $(this).val();

		if(cost_type == 1){
			$('.pay_cash').show();
            $('#balance_row').attr('class', 'col-lg-6')
			$('#pay_from').attr('required', 'required');
			$('#pay_amount').attr('required', 'required');
		}
		else{
			$('.pay_cash').hide();
            $('#balance_row').attr('class', 'col-lg-12')
			$('#pay_from').removeAttr('required');
			$('#pay_amount').removeAttr('required');
		}
	});


	//Hitung Sisa Hutang
	function countLeftBalance(element){
		//Input Value
		let value = $(element).val();
			value = parseInt(value.replaceAll(',', ''));
		//Balance Value
		let balance = $('#payment_left_balance').val();
			balance = parseInt(balance.replaceAll(',', ''));

		//Left Balance
		let left_balance = balance-value;
			left_balance = left_balance.toLocaleString('EN-US')
		$('#payment_left_balance').val(left_balance);
	}

	var DatatableBasic = function() {

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

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

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

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

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

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

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

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

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


		//
		// Return objects assigned to module
		//

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


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

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

	//Datepicker
	$('.datepicker_ap').daterangepicker({
		singleDatePicker: true,
		startDate: "{{date( 'd-m-Y', strtotime(getSystemDate()) )}}",
		locale: {
			format: 'DD-MM-YYYY'
		}
	});

	function formatNumber(element){
        let element_value = $(element).val()
        let start = element_value.slice(0,1)
        let check_negative_symbol = element_value.indexOf('-', 1)
        if (check_negative_symbol > -1) {
            $(element).val(start+element_value.slice(1, element_value.length).replace('-','').replace('-',''))
        }

        $(element).val(function(index, value) {
            return value
            .replace(/[^0-9-]/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
        });
	}
	</script>

	<script type="text/javascript">
        //modal delete
        $(document).on("click", ".delbutton", function () {
            var url = $(this).data('uri');
            $("#delform").attr("action", url);
        });
		$( 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

		});

         // call date Single picker
            $('#invoice_date').daterangepicker({
                "singleDatePicker": true,
                "linkedCalendars": false,
                "autoUpdateInput": false,
                "showCustomRangeLabel": false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('#invoice_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
            });
	</script>


<script>
	var DateTimePickers = function() {

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

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

			// Single picker
			$('.daterange-single').daterangepicker({
				singleDatePicker: true,
                showDropdowns: true,
                startDate: '{{dateFormat(getSystemDate(), "d-m-Y")}}',
				locale: {
					format: 'DD-MM-YYYY'
				}
			});

		};

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

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

    $('.modal').on('show.bs.modal', function () {
        $('select').each(function () {
            $(this).select2({
                dropdownParent: $(this).parent()
            });
        });
    })

</script>
@endsection