@extends('pln._layout')

@push('stylesheet')	
	<link rel="stylesheet" href="{{ asset('/') }}global_assets/js/plugins/jquery-smartwizard/dist/css/smart_wizard_arrows.min.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="https://hris.pdam-sby.go.id/js/autocomplete/jquery.autocomplete.css" type="text/css" cache="false">
    <style type="text/css">
    	.btn-warning {
    		background-color: #a38f00;
    	}
    	.btn-warning:hover {
    		background-color: #7e6f04;
    	}
		.dtrg-level-0{
			font-weight: 600;
		}
		.dtrg-level-1{
			font-weight: 400;
			font-style: italic;
		}
		.dtrg-level-0 td, .dtrg-level-0 th {
			/* border-top-width: 3px!important;
			border-top-style: double!important; */
			/* border-bottom-width: 3px;
			border-bottom-style: double; */
		}
		.dtrg-start{
			background-color: #fafafa!important;
		}
		.dtrg-end{
			/* background-color: #fafafa!important; */
			background-color: rgba(0,0,0,.02)!important;;
		}
		.dtrg-end th , .dtrg-end td{
			background-color: #fafafa!important;
			border-top: 3px double #ddd!important;
			border-bottom: 3px double #ddd!important;
			/* border-top-width: 3px!important;
    		border-top-style: double!important;
			border-bottom-width: 3px!important;
    		border-bottom-style: double!important; */
		}
		.fs-9 {
			font-size:9px !important;
		}
    </style>
@endpush

@section('header') 
	<div class="sticky-xs pt-2 pb-3 bg-white page-header ga-header _page-header-light _w-100 ga-bgcolor">
		<div class="pt-1 _pb-2 page-header-content header-elements-md-inline">
			<div class="pt-1 x_page-title d-flex align-items-center">
				<span class="d-none _btn btn-icon btn-sm bg-transparent">
					<img src="{{ asset('themes/gthemes/images/png-icon/plan.png') }}" width="42" height="42" class="mr-2" alt="">
				</span>
				<h4 class="mb-0 font-weight-semibold text-dark">
					<span>REKENING PLN {{$dtTitle??''}}</span>
					<span class="d-block text-muted font-size-sm align-middle">Informasi mengenai list data Tagihan listrik</span>
				</h4>
			</div>
			<div class="header-elements">
				<div class="mx-3 sides-divider d-none d-md-block"></div>	
				<ul class="mr-auto d-flex list-inline list-inline-condensed mb-0">			
					<li class="list-inline-item m-0 _mr-0 _mr-md-1">
						<a  href="#" 
							class="mr-2 add-rekening btn btn-sm bg-primary text-white _btn-outline _btn-primary text-capitalize" 
							data-toolbar="true" data-caption="Upload Data Tagihan PLN" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Upload Data Tagihan PLN">
							<i class="mi-add mr-2"></i>
							Upload Tagihan
						</a>	
					</li>		
					<li class="d-none list-inline-item m-0 _mr-0 _mr-md-1">
						<a  href="#" 
							class="download-file-csv _hover-grey ga-nav-link _p-2" 
							data-toolbar="true" data-caption="Download CSV" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Download CSV">
							<i class="icon-libreoffice icon-2x text-primary"></i>
						</a>	
					</li>	
				</ul>
			</div>
		</div>
	</div>
@endsection

@section('content') 
@if(empty($permit))
	<div class="flex-fill">
		<div class="text-center mb-3">
			<h1 class="error-title offline-title">Error Page</h1>
			<h5>Maaf, Halaman yang anda cari tidak ditemukan.. </h5>
		</div>
	</div>
@else

	<div class="_card card-gtheme p-0">
		<div class="table-responsive">
		<table class="table table-gtheme table-hover-gtheme _table-bordered _table-striped table-xs datatable-responsive" 
            id="table_inbox" width="100%">
			<thead>
				<tr>
					<th class="border-top-0 search" width="100px">Periode</th>
					<th class="border-top-0 search">IdPel</th>
					<th class="border-top-0 search">Nama</th>
					<th class="border-top-0 search" _width="100px">Tgl Bayar</th>
					<th class="border-top-0 search text-right" _width="130px">Pemakaian (KWH)</th>
					<th class="border-top-0 search text-right" _width="130px">Tagihan (Rp)</th>
					<th class="border-top-0 search text-right" _width="130px">Keterangan</th>
					<!-- <th class="border-top-0 search" _width="100px">Upload</th> -->
					<th class="border-top-0 text-right"></th>
				</tr>
			</thead>
			<tbody data-link="row" class="rowlinks"></tbody>
		</table>
		</div>
	</div>
	
	<div class="modal fade" id="ajaxModalUpload" aria-hidden="true" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-lg">
	        <div class="modal-content card-gtheme border-0 p-0">
                <div class="RZBuIb c8DD0" aria-hidden="true">
                    <div id="modalprogressbar" role="modalprogressbar" class="sZwd7c B6Vhqe qdulke jK7moc">
                        <div class="xcNBHc um3FLe"></div>
                        <div jsname="cQwEuf" class="w2zcLc Iq5ZMc"></div>
                        <div class="MyvhI TKVRUb" jsname="P1ekSe"><span class="l3q5xe SQxu9c"></span></div>
                        <div class="MyvhI sUoeld"><span class="l3q5xe SQxu9c"></span></div>
                    </div>
                </div>                           
	        	<form id="ItemForm" name="ItemForm" class="form-horizontal">
	            <div class="modal-header bg-white">
	                <h4 class="modal-title" id="modelHeading"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          				<span aria-hidden="true">&times;</span>
        			</button>
	            </div>
	            <div class="modal-body">
					<input type="hidden" name="recid" id="recid">
					<div class="form-group row">
						<label for="pln_file_type" class="col-sm-2 text-right col-form-label control-label">File Type</label>
						<div class="col-sm-9">	                            
							<select name="pln_file_type" id="pln_file_type" 
								class="form-control form-control-select2 select2-modal" 
								data-placeholder="Pilih Jenis File" required>
								<!-- <option value=""></option>
								<option value="rar">rar</option> -->
								<option value="xls">xls</option>
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label for="pln_file" class="col-sm-2 text-right col-form-label control-label">Upload File</label>
						<div class="col-sm-9">
							<input type="file" class="form-control" id="pln_file" name="pln_file" placeholder="File Tagihan" value="" required>
						</div>
					</div>
				</div>
	            <div class="_d-none py-2 bg-white modal-footer _d-flex justify-content-between align-items-center">
                    <button type="submit" class="btn btn-primary rounded-round" id="saveBtn" value="create">
						<i class="icon-pencil mr-1"></i>
						Simpan
                    </button>
				</div>
				</form>
	        </div>
	    </div>
	</div>

	<div class="modal fade" id="ajaxModalEdit" aria-hidden="true" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-xl">
	        <div class="modal-content card-gtheme border-0 p-0">
                <div class="RZBuIb c8DD0" aria-hidden="true">
                    <div id="modalprogressbar" role="modalprogressbar" class="sZwd7c B6Vhqe qdulke jK7moc">
                        <div class="xcNBHc um3FLe"></div>
                        <div jsname="cQwEuf" class="w2zcLc Iq5ZMc"></div>
                        <div class="MyvhI TKVRUb" jsname="P1ekSe"><span class="l3q5xe SQxu9c"></span></div>
                        <div class="MyvhI sUoeld"><span class="l3q5xe SQxu9c"></span></div>
                    </div>
                </div>                           
	        	<form id="ItemFormEdit" name="ItemFormEdit" class="form-sm form-horizontal">
	            <div class="modal-header bg-white">
	                <h4 class="modal-title" id="modelHeadingEdit"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          				<span aria-hidden="true">&times;</span>
        			</button>
	            </div>
	            <div class="modal-body">
					<input type="hidden" name="recid" id="recid">
					<div class="row mb-3">
						<div class="col-sm-6">
							<div class="card-gtheme py-3 mb-3">
								<h3 class="lead pb-2 mx-4"><b>Data Pelanggan</b></h3>
								<div class="form-group row">
									<label for="kodepel" class="col-sm-2 text-right col-form-label control-label">Kode</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="kodepel" name="kodepel" value="" disabled>
									</div>
								</div>
								<div class="form-group row">
									<label for="namapel" class="col-sm-2 text-right col-form-label control-label">Nama</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="namapel" name="namapel" value="" disabled>
									</div>
								</div>
								<div class="form-group row">
									<label for="alamatpel" class="col-sm-2 text-right col-form-label control-label">Alamat</label>
									<div class="col-sm-9">
										<textarea class="form-control" id="alamatpel" name="alamatpel" disabled></textarea>
									</div>
								</div>
							</div>
							<div class="card-gtheme py-3 mb-3">
								<div class="form-group row">
									<label for="unitup" class="col-sm-2 text-right col-form-label control-label">UNITUP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="unitup" name="unitup" placeholder="UNITUP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="blth" class="col-sm-2 text-right col-form-label control-label">BLTH REK</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="blth" name="blth" placeholder="BLTH REK" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="trf" class="col-sm-2 text-right col-form-label control-label">TRF</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="trf" name="trf" placeholder="TRF" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="daya" class="col-sm-2 text-right col-form-label control-label">DAYA</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="daya" name="daya" placeholder="DAYA" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="gol" class="col-sm-2 text-right col-form-label control-label">GOL</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="gol" name="gol" placeholder="GOL" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="frt" class="col-sm-2 text-right col-form-label control-label">FRT</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="frt" name="frt" placeholder="FRT" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="fjn" class="col-sm-2 text-right col-form-label control-label">FJN</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="fjn" name="fjn" placeholder="FJN" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="kdin" class="col-sm-2 text-right col-form-label control-label">KDIN</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="kdin" name="kdin" placeholder="KDIN" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="kdout" class="col-sm-2 text-right col-form-label control-label">KDOUT</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="kdout" name="kdout" placeholder="KDOUT" value="">
									</div>
								</div>
							</div>							
							<div class="card-gtheme py-3 ">
								<div class="form-group row">
									<label for="keterangan" class="col-sm-2 text-right col-form-label control-label">Keterangan</label>
									<div class="col-sm-9">
										<textarea class="form-control" id="keterangan" name="keterangan"></textarea>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="card-gtheme py-3 ">
								<div class="form-group row">
									<label for="rptag" class="col-sm-2 text-right col-form-label control-label">RPTAG</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rptag" name="rptag" placeholder="RPTAG" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpbk" class="col-sm-2 text-right col-form-label control-label">RPBK</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpbk" name="rpbk" placeholder="RPBK" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="tgkoreksi" class="col-sm-2 text-right col-form-label control-label">TGKOREKSI</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="tgkoreksi" name="tgkoreksi" placeholder="TGKOREKSI" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="tglbayar" class="col-sm-2 text-right col-form-label control-label">TGLBAYAR</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="tglbayar" name="tglbayar" placeholder="TGLBAYAR" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="wktbyr" class="col-sm-2 text-right col-form-label control-label">WKTBYR</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="wktbyr" name="wktbyr" placeholder="WKTBYR" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="kdpp" class="col-sm-2 text-right col-form-label control-label">KDPP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="kdpp" name="kdpp" placeholder="KDPP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="slalwbp" class="col-sm-2 text-right col-form-label control-label">SLALWBP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="slalwbp" name="slalwbp" placeholder="SLALWBP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="sahlwbp" class="col-sm-2 text-right col-form-label control-label">SAHLWBP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="sahlwbp" name="sahlwbp" placeholder="SAHLWBP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="slawbp" class="col-sm-2 text-right col-form-label control-label">SLAWBP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="slawbp" name="slawbp" placeholder="SLAWBP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="sahwbp" class="col-sm-2 text-right col-form-label control-label">SAHWBP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="sahwbp" name="sahwbp" placeholder="SAHWBP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="slakvarh" class="col-sm-2 text-right col-form-label control-label">SLAKVARH</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="slakvarh" name="slakvarh" placeholder="SLAKVARH" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="sahkvarh" class="col-sm-2 text-right col-form-label control-label">SAHKVARH</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="sahkvarh" name="sahkvarh" placeholder="SAHKVARH" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="fakm" class="col-sm-2 text-right col-form-label control-label">FAKM</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="fakm" name="fakm" placeholder="FAKM" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="pemkwh" class="col-sm-2 text-right col-form-label control-label">PEMKWH</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="pemkwh" name="pemkwh" placeholder="PEMKWH" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpbeban" class="col-sm-2 text-right col-form-label control-label">RPBEBAN</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpbeban" name="rpbeban" placeholder="RPBEBAN" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rplwbp" class="col-sm-2 text-right col-form-label control-label">RPLWBP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rplwbp" name="rplwbp" placeholder="RPLWBP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpwbp" class="col-sm-2 text-right col-form-label control-label">RPWBP</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpwbp" name="rpwbp" placeholder="RPWBP" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpblok3" class="col-sm-2 text-right col-form-label control-label">RPBLOK3</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpblok3" name="rpblok3" placeholder="RPBLOK3" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpkvarh" class="col-sm-2 text-right col-form-label control-label">RPKVARH</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpkvarh" name="rpkvarh" placeholder="RPKVARH" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpptl" class="col-sm-2 text-right col-form-label control-label">RPPTL</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpptl" name="rpptl" placeholder="RPPTL" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpmat" class="col-sm-2 text-right col-form-label control-label">RPMAT</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpmat" name="rpmat" placeholder="RPMAT" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpppn" class="col-sm-2 text-right col-form-label control-label">RPPPN</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpppn" name="rpppn" placeholder="RPPPN" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpbpju" class="col-sm-2 text-right col-form-label control-label">RPBPJU</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpbpju" name="rpbpju" placeholder="RPBPJU" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="rpangs" class="col-sm-2 text-right col-form-label control-label">RPANGS</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="rpangs" name="rpangs" placeholder="RPANGS" value="">
									</div>
								</div>
								<div class="form-group row">
									<label for="trafo" class="col-sm-2 text-right col-form-label control-label">TRAFO</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" id="trafo" name="trafo" placeholder="TRAFO" value="">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
	            <div class="_d-none py-2 bg-white modal-footer _d-flex justify-content-between align-items-center">
                    <button type="submit" class="btn btn-primary rounded-round" id="saveBtnEdit" value="create">
						<i class="icon-pencil mr-1"></i>
						Simpan
                    </button>
				</div>
				</form>
	        </div>
	    </div>
	</div>

@endif
@endsection

@push('scripts')
	<script src="{{ asset('global_assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
	<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
	<script src="{{ asset('global_assets/js/plugins/forms/validation/validate.min.js') }}"></script>
	
	<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>

	<script src="{{ asset('global_assets/js/plugins/extensions/rowlink.js') }}"></script>	
	<script src="{{ asset('global_assets/js/plugins/forms/selects/select2.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/notifications/jgrowl.min.js') }}"></script>  
    <script src="https://hris.pdam-sby.go.id/js/autocomplete/jquery.autocomplete.js" cache="false"></script>
	<!-- <script src="{{ asset('global_assets/assets/js/app.js') }}"></script> -->
	<script src="{{asset('global_assets/js/plugins/sweetalert/sweetalert2.all.min.js')}}"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
	<script type="text/javascript">
		function JSON2CSV(objArray) {
			var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
			var str = '';
			var line = '';
			// header
			var head = array[0];
			for (var index in array[0]) {
				var value = index + "";
				line += '"' + value.replace(/"/g, '""') + '",';
			}
			line = line.slice(0, -1);
			str += line + '\r\n';

			// data
			for (var i = 0; i < array.length; i++) {
				var line = '';
				for (var index in array[i]) {
					var value = array[i][index] + "";
					line += '"' + value.replace(/"/g, '""') + '",';
				}
				line = line.slice(0, -1);
				str += line + '\r\n';
			}
			return str;
		}
		function newexportaction(e, dt, button, config) {
			var self = this;
			var oldStart = dt.settings()[0]._iDisplayStart;
			dt.one('preXhr', function (e, s, data) {
				// Just this once, load all data from the server...
				data.start = 0;
				data.length = 2147483647;
				dt.one('preDraw', function (e, settings) {
					// Call the original action function
					if (button[0].className.indexOf('buttons-copy') >= 0) {
						$.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-excel') >= 0) {
						$.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
							$.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
							$.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-csv') >= 0) {
						$.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
							$.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
							$.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-pdf') >= 0) {
						$.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
							$.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
							$.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-print') >= 0) {
						$.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
					}
					dt.one('preXhr', function (e, s, data) {
						// DataTables thinks the first item displayed is index 0, but we're not drawing that.
						// Set the property to what it was before exporting.
						settings._iDisplayStart = oldStart;
						data.start = oldStart;
					});
					// Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
					setTimeout(dt.ajax.reload, 0);
					// Prevent rendering of the full data to the DOM
					return false;
				});
			});
			// Requery the server with the new one-time export settings
			dt.ajax.reload();
		};
		$(document).ready(function() {
			
			var formModal 	= $('#ItemForm');			
			var arrSumCol 	= [4,5];
			var arrNameCol 	= {
				4 	: "pemkwh", 
				5	: "rptag"
			};
			var arrFormatCol 	= [5];
			var sumtotalTarif = 0;

			$('#table_inbox thead tr').clone(true).appendTo( '#table_inbox thead' );
			$('#table_inbox thead tr:eq(0)').addClass('_radius-0 bg-primary _d-none');
			$('#table_inbox thead tr:eq(1) th').each( function (i) {
				if( $(this).hasClass( "search" ) ){
					var title = $(this).text();
					if( $(this).hasClass( "text-right" ) ){					
						$(this).html( '<input type="text" class="form-control text-right" placeholder="Search" />' );
					}
					else{					
						$(this).html( '<input type="text" class="form-control" placeholder="Search" />' );
					}
					$( 'input', this ).on( 'keypress', function () {
						if (event.which == 13) {
							if ( table.column(i).search() !== this.value ) {
								table
									.column(i)
									.search( this.value )
									.draw();
							}
						}
					} );
				}
				else {
					$(this).html( '<input type="text" class="form-control" placeholder="" disabled />' );
				}
			} );
			var table = 
			$('#table_inbox')    
			.on( 'processing.dt', function ( e, settings, processing ) {
				var $target = $(this),
					block = $target.closest('.card');	
				if(processing){ blockui(block); } 
				else { unblockui(block); }
			})
			.DataTable({       
				autoWidth 	: false,
				"pageLength": 50,
				dom 		: 	
					"<'_datatable-scroll'tr>"+
					"<'row mr-3 mt-3 px-2'<'col-sm-12 col-md-6 d-flex align-items-center'l<'ml-auto'iB>><'col-sm-12 col-md-6'p>>",
				processing  : true,
				serverSide  : true,
                ajax 		: "{{ route('rekening.index') }}",
				"ordering"	: false,
				buttons: [
					{
						text		: 'Export XLS',
						className 	: 'download-xls d-none btn btn-primary btn-sm mr-2',
						extend 		: 'excelHtml5',
						"action"	: newexportaction,
						// autoFilter	: true
					},
					{
						text		: 'Export CSV',
						className 	: 'download-csv d-none btn btn-primary btn-sm',
						action 		: function (e, dt, buttons, config) {
							$.ajax({
								"url" 		: "{{ route('rekening.index') }}",
								"data"		: dt.ajax.params(),
								"success"	: function(res, status, xhr) {
									var csv = JSON2CSV(JSON.stringify( res.data ));
									var csvData = new Blob( [ csv ] , { type: 'text/csv;charset=utf-8;'} );
									var csvURL = window.URL.createObjectURL(csvData);
									var tempLink = document.createElement('a');
									tempLink.href = csvURL;
									tempLink.setAttribute('download', 'export.csv');
									//console.log(tempLink);
									tempLink.click();
								}
							});
						}
					}
				],
				columns 	: [						
					// { 	data: 'blth', className:'_w-25 text-truncate text-left text-primary font-italic', name: 'blth' }, 	
					{
						"data": "blth",
						render: function (data, type, row, meta) {
							return meta.row + meta.settings._iDisplayStart + 1;
						}
					},
					{ 	data: 'idpel', className:'_w-25 text-truncate text-left _font-weight-semibold', name: 'idpel' }, 	
					{ 	data: 'nama', className:'_w-25 text-truncate text-left _font-weight-semibold', name: 'nama' },     
					// {	data: 'tglbayar', className:'_w-20 text-truncate text-center', name: 'tglbayar'}, 
					{ 	data: null, className:'w-100px text-center',  name: 'tglbayar', 
						"searchable": false, defaultContent: "", 
						render: function(data, type, row, meta) {
							var label = '';
							if ( data.tglbayar && data.tglbayar !== '1970-01-01' && data.tglbayar !== '0000-00-00' ){
								label += moment(data.tglbayar).format('DD/MM/YYYY');
							} else {
								label = '-';
							}
							return label;
						} 
					},				 
					{	data: null, className:'text-right', name: 'pemkwh' , 
						defaultContent: "", "orderable": false ,  
						render: function(data, type, row, meta) {
							var label = numeral(data.pemkwh).format('0,');
							return label;
						} 
					},       				 
					// { 	data: 'rptag', className:'_w-25 text-truncate text-left', name: 'rptag' },	
					{	data: null, className:'text-right', name: 'rptag' , 
						defaultContent: "", "orderable": false ,  
						render: function(data, type, row, meta) {
							var label = numeral(data.rptag).format('0.0,');
							return label;
						} 
					},   
					{ 	data: 'keterangan', className:'_w-25 fs-9', name: 'keterangan' },  
					{ 	data: 'action', 
						className:'text-center rowlink-skip', 
						orderable:false, 
						"searchable": false },
				],
				columnDefs : [
					// {
					// 	// The `data` parameter refers to the data for the cell (defined by the
					// 	// `data` option, which defaults to the column being worked with, in
					// 	// this case `data: 0`.
					// 	render: function (data, type, row) {
					// 		if (data) {
					// 			return data + ' (' + row.penerima_nama + ') <br> <span class="text-muted">'+row.bagian_nama+'</span>';
					// 		}

					// 		return '-';
					// 	},
					// 	targets: 1,
					// },
					// { visible: false, targets: [0] },
				],				
				rowGroup: {
					dataSrc: ['blth'],
					endRender: function (rows, group) {     
						var totalTarif = new Array(); 
						var container = $('<tr/>');
						container.append('<td colspan= "4" class="text-right"> Total (' + group + ')</td>');
						var i;

						for (i = 4; i < table.columns().header().length; i++) {
							if ( arrSumCol.includes(i)   ){
								var nominal = rows
									.data().pluck( arrNameCol[i] ).reduce( function ( a, b ) {
									if ( typeof a === 'string' ) {
										a = a.replace(/[^\d.-]/g, '') * 1;
									}
									if ( typeof b === 'string' ) {
										b = b.replace(/[^\d.-]/g, '') * 1;
									}
									return a + b;
								}, 0 );

								if (typeof totalTarif[i] == 'undefined') {
									totalTarif[i] = new Array();
								}

								totalTarif[i] = +parseFloat(totalTarif[i] + nominal);
								if ( arrFormatCol.includes(i) ){ 
									container.append('<td class="text-right">' + numeral(nominal).format('0.0,') + '</td>');
								}
								else{
									container.append('<td class="text-right">' + numeral(nominal).format('0,') + '</td>');
									// container.append('<td class="text-right">' + nominal + '</td>');
								}
							}
							else {
								container.append('<td></td>');
							}
						}

						sumtotalTarif += totalTarif[4];
						return $(container)
					},
				},
				"drawCallback": function( settings ) {  
					   
					// var that = this;
					// if (settings.bSorted || settings.bFiltered) {
					// 	this.$('tr:not(.dtrg-group) td:first-child', {
					// 		"filter": "applied"
					// 	}).each(function (i) {
					// 		that.fnUpdate(i + 1, this.parentNode, 0, false, false);
					// 	});
					// }          

					var api = this.api();	            
					api.$('td').not( ".NoClick" ).css('cursor','pointer');
					api.$('td a').ripple(); 

					$('.dataTables_length select').select2({
						minimumResultsForSearch: Infinity,
						dropdownAutoWidth: true,
						width: 'auto',
						dropdownParent: $('#table_inbox')
					});
				},
				initComplete: function () {}
			});

			// table.on('order.dt search.dt', function () {
			// 	let i = 1;		
			// 	table.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
			// 		this.data(i++);
			// 	});
			// }).draw();

			// $('#table_inbox tbody').on( 'click', 'tr td', function (e){
			// 	e.preventDefault();
			// 	show_pBar('Loading');
			// 	var _href 	= $(this).parent('tr').find('.memorandum_view').attr('href');
			// 	location.href = _href;
			// 	hide_pBar();
			// 	return false;
			// });

			//Add Kapal
			
			//$('#ajaxModal').on('hidden.bs.modal', function (event) {
				// $('#modal-content').empty();
			//});
			
			// $('body').on('click', '#addKapal', function(e){
			// 	$('#modal-content').load( "{{-- route('rekening.kapal.add') --}}" ,
			// 		function(data, status, jqXGR) { 
			// 			$('#modelHeading').html("Tambah Data Kapal");
			// 			$('#ajaxModal').modal('show'); 
			// 	});
			// 	e.stopPropagation();
			// });

			// show_pBar();
        	// setTimeout(function(){ hide_pBar(); }, 1000);
						
			$(".download-file-xls").on("click", function() {
				table.button( '.download-xls' ).trigger();
			});
			$(".download-file-csv").on("click", function() {
				table.button( '.download-csv' ).trigger();
			});

			// reset form ketika klik tombol tambah
            $(".add-rekening").on("click", function() {
				$('#ItemForm').find('input[name=pln_file_type]').val('');
				$('#ItemForm').find('input[name=pln_file]').val('');
				$('#ItemForm').trigger("reset");
                $('#modelHeading').html("Form Upload Rekening PLN");
                $('#ajaxModalUpload').modal('show');
            });

            //simpan 
            $('#saveBtnEdit').click(function(e) {
                e.preventDefault();
        	    var formdataEdit = $('#ItemFormEdit').serializeArray();
        	    //formdataEdit.push({name:'spbu_nama', value:$('#ItemForm').find('select[name=spbu_id] option:selected').text()});
        	    $.ajax({
        	        url 		: "{{ route('rekening.store') }}",
        	        type 		: "POST",
        	        data 		: $.param(formdataEdit),
        	     	//data 		: $('#ItemForm').serialize(),
        	        dataType 	: 'json',
                    success 	: function(data) {
                        $('#ItemFormEdit').trigger("reset");
                        $('#ajaxModalEdit').modal('hide');
                        Swal.fire(
			 		      'Berhasil!',
			 		      'Data telah berhasil disimpan.',
			 		      'success'
			 		    );
                        table.draw();
                    },
                    error 		: function(xhr, status, error) {
			 			var err = JSON.parse(xhr.responseText);
			 			//console.log(err.Message);
						$('#saveBtnEdit').html('Save Changes');
					}
				});
			});
			
				
			formModal.validate({
				//label
					ignore: 'input[type=hidden], .select2-search__field, :not(:visible)', 
					errorClass: 'validation-invalid-label',
					successClass: 'validation-valid-label',
					validClass: 'validation-valid-label',
					highlight: function(element, errorClass) {
						$(element).removeClass(errorClass);
					},
					unhighlight: function(element, errorClass) {
						$(element).removeClass(errorClass);
					},
					errorPlacement: function(error, element) {
						if (element.parents().hasClass('form-check')) {
							error.appendTo( element.parents('.form-check').parent() );
						}
						else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
							error.appendTo( element.parent() );
						}
						else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
							error.appendTo( element.parent().parent() );
						}
						else {
							error.insertAfter(element);
						}
					}
			});
			
			formModal.on('submit', function(e){
				e.preventDefault();	
				show_mpBar("Processing");	
				if(! $(this).valid()) {
					hide_mpBar();
					Swal.fire(
						'<span class="text-danger">Peringatan!</span>',
						'Data belum Valid, Silahkan cek kembali data isian Anda!!!',
						'warning'
					);	
					// l.stop();
					return false;
				}
				var data = new FormData(this);
				$.ajax({
					url 		: "{{ route('rekening.store') }}",
					type		: 'POST',
					data		: data,
					contentType	: false,
					cache		: false,
					processData	: false,
				})
				.done(function(response) {
					append_pBar(response.content);				
					Swal.fire({
						icon 	: 'warning',
						title 	: response.title,
						html 	: response.content,
					});
					table.draw();			
					setTimeout(function(){ 
						hide_mpBar();
						$('#ajaxModalUpload').modal('hide');
					 }, 500);	
					//  l.stop();
				})
				.fail(function(jqXHR, textStatus, error) {	
					hide_mpBar();
					Swal.fire({
						icon 	: 'warning',
						title 	: 'Peringatan!',
						html 	: error,
					});
					// l.stop();
				});
				e.stopPropagation();
				return false;
			});	
			
			$('body').on('click', '#saveBtn', function(e){
				e.preventDefault();	
				formModal.submit();	
				e.stopPropagation();
				return false;
			});

            //pencarian data di kolom pegawai
            var autoList = $('input[name=penerima]').autocomplete({
		        serviceUrl: "{{route('pegawai.autocomplete')}}",
		        delimiter: /(,|;)\s*/,
		        maxHeight:400,
		        zIndex: 9999,
		        deferRequestBy: 0,
		        noCache: false,
		        onSelect: function(suggestion) {
					console.log(suggestion);
		            $(this).removeClass('autocomplete-loading');
		            $(this).val(suggestion.value);
		            $('#ItemForm').find('input[name=penerima_nip]').val(suggestion.nip);
		            $('#ItemForm').find('input[name=penerima_nama]').val(suggestion.nama);
		            $('#ItemForm').find('input[name=penerima_jabatan]').val(suggestion.jabatan);
		            $('#ItemForm').find('input[name=penerima_jabatan_id]').val(suggestion.jabatan_id);
		            $('#ItemForm').find('input[name=bagian_id]').val(suggestion.bagian_id);
		        }
		    });

            $('body').on('click', '.editItem', function(){
                //$('.switchery').prop('checked', false).trigger("click").change();
				$('#ItemFormEdit').trigger("reset");
                $('#modelHeadingEdit').html("Form Edit Data Pembayaran PLN");

                $('.opt_file_upload').show();		
                $('.add_file_upload').hide();			
                $('.view_file_upload').show();
                var recid = $(this).data('id');
                console.log(recid);
                $.get("{{ route('rekening.index') }}" + '/' + recid + '/edit', function(data) {
					console.log(data);
                    $('#saveBtnEdit').val("edit-rekening");
                    $('#ajaxModalEdit').modal('show');

                    $('#ItemFormEdit #recid').val(recid);
					$('#kodepel').val(data.kode);
					$('#namapel').val(data.nama);
					$('#alamatpel').val(data.alamat);
					$('#unitup').val(data.unitup);
					$('#blth').val(data.blth);
					$('#trf').val(data.trf);
					$('#daya').val(data.daya);
					$('#gol').val(data.gol);
					$('#frt').val(data.frt);
					$('#fjn').val(data.fjn);
					$('#kdin').val(data.kdin);
					$('#kdout').val(data.kdout);
					$('#rptag').val(data.rptag);
					$('#rpbk').val(data.rpbk);
					$('#tgkoreksi').val(data.tgkoreksi);
					$('#tglbayar').val(data.tglbayar);
					$('#wktbyr').val(data.wktbyr);
					$('#kdpp').val(data.kdpp);
					$('#slalwbp').val(data.slalwbp);
					$('#sahlwbp').val(data.sahlwbp);
					$('#slawbp').val(data.slawbp);
					$('#sahwbp').val(data.sahwbp);
					$('#slakvarh').val(data.slakvarh);
					$('#sahkvarh').val(data.sahkvarh);
					$('#fakm').val(data.fakm);
					$('#pemkwh').val(data.pemkwh);
					$('#rpbeban').val(data.rpbeban);
					$('#rplwbp').val(data.rplwbp);
					$('#rpwbp').val(data.rpwbp);
					$('#rpblok3').val(data.rpblok3);
					$('#rpkvarh').val(data.rpkvarh);
					$('#rpptl').val(data.rpptl);
					$('#rpmat').val(data.rpmat);
					$('#rpppn').val(data.rpppn);
					$('#rpbpju').val(data.rpbpju);
					$('#rpangs').val(data.rpangs);
					$('#trafo').val(data.trafo);
					$('#keterangan').val(data.keterangan);
                })
            });

            $('body').on('click', '.deleteItem', function() {
            	// alert('Maaf fitur ini masih dikembangkan.');
                var recid = $(this).data("id");

            	Swal.fire({
				  	title: 'Apakah anda yakin?',
				  	text: "Anda akan menghapus data ini.",
				  	icon: 'warning',
				  	showCancelButton: true,
				  	confirmButtonColor: '#3085d6',
				  	cancelButtonColor: '#d33',
				  	confirmButtonText: 'Ya, hapus!'
				}).then((result) => {
				  	if (result.isConfirmed) {
				    	$.ajax({
		                    type: "DELETE",
		                    url: "{{ route('rekening.store') }}" + '/' + recid,
		                    success: function(data) {
		                    	Swal.fire(
							      'Berhasil!',
							      'Data telah berhasil dihapus.',
							      'success'
							    );
		                        table.draw();
		                    },
		                    error: function(data) {
		                        console.log('Error:', data);
		                    }
		                });
				  	}
				})

                // confirm("Are You sure want to delete !");

                // $.ajax({
                //     type: "DELETE",
                //     url: "{{ route('rekening.store') }}" + '/' + recid,
                //     success: function(data) {
                //         table.draw();
                //     },
                //     error: function(data) {
                //         console.log('Error:', data);
                //     }
                // });
            });

			$('.select2-modal').select2({
				minimumResultsForSearch: Infinity,
				dropdownAutoWidth: true,
				width: 'auto',
				// dropdownParent: $('#table_inbox')
			});
            //$(".add-rekening").click();

		});
	</script>
@endpush