@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;
    	}
    </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>MASTER PELANGGAN PLN {{$dtTitle??''}}</span>
					<span class="d-block text-muted font-size-sm align-middle">Informasi mengenai list data Pelanggan PLN</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-pelanggan btn btn-sm bg-primary text-white _btn-outline _btn-primary text-capitalize" 
							data-toolbar="true" data-caption="Tambah Data Pelanggan PLN" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Tambah Data Pelanggan PLN">
							<i class="mi-add mr-2"></i>
							Tambah Pelanggan
						</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">
		<select name="filterStatus" id="filterStatus" class="form-control-sm border-1 rounded p-2">
			<option value="all">-- All --</option>
			<option value="1">Aktif</option>
			<option value="0">Non-Aktif</option>
		</select>
		<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">Kode</th>
					<th class="border-top-0 search">Nama Pelanggan</th>
					<th class="border-top-0 search" _width="150px">Alamat</th>
					<th class="border-top-0 text-center filter-status">Status</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="ajaxModal" 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="kode" 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="kode" name="kode" placeholder="Kode Pelanggan" value="">
						</div>
					</div>
					<div class="form-group row">
						<label for="nama" 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="nama" name="nama" placeholder="Nama Pelanggan" value="">
						</div>
					</div>
					<div class="form-group row">
						<label for="alamat" class="col-sm-2 text-right col-form-label control-label">ALAMAT</label>
						<div class="col-sm-9">
							<textarea class="form-control" id="alamat" name="alamat" placeholder="Alamat Pelanggan"></textarea>
						</div>
					</div>
					<hr>
					<div class="form-group row">
						<label for="kode_perkiraan" class="col-sm-2 text-right col-form-label control-label">Kode Perkiraan</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="kode_perkiraan" name="kode_perkiraan" placeholder="Kode Perkiraan" value="">
						</div>
					</div>
					<div class="form-group row">
						<label for="nama_perkiraan" class="col-sm-2 text-right col-form-label control-label">Nama Perkiraan</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="nama_perkiraan" name="nama_perkiraan" placeholder="Nama Perkiraan" value="">
						</div>
					</div>

					<div class="form-group row">
						<label for="status" class="col-sm-2 text-right col-form-label control-label">Status</label>
						<div class="col-sm-9">
							<div class="form-check form-check-inline">
							 	<input class="form-check-input mb-1" type="radio" name="status" id="aktif" value="1">
							  	<label class="form-check-label" for="aktif">Aktif</label>
							</div>
							<div class="form-check form-check-inline">
							 	<input class="form-check-input mb-1" type="radio" name="status" id="nonaktif" value="0">
							  	<label class="form-check-label" for="nonaktif">Non-Aktif</label>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label for="alias" class="col-sm-2 text-right col-form-label control-label">Alias</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="alias" name="alias" placeholder="Alias" value="">
						</div>
					</div>
					<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" placeholder="Keterangan"></textarea>
						</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>

@endif
@endsection

@push('scripts')
	<script src="{{ asset('global_assets/js/plugins/tables/datatables/datatables.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 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');	

			$('#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();
					$(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 if( $(this).hasClass("filter-status") ){
					$(this).html($('#filterStatus'));
				} 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": 10,
				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 		: {
					"url" 	: "{{ route('pelanggan.index') }}",
					"type" 	: "GET",
					data 	: function (d) {
						d.filterStatus = $('#filterStatus').val();
					}
				},
				"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('pelanggan.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: 'kode', className:'_w-25 text-truncate text-left text-primary font-italic', name: 'kode' }, 	
					{ 	data: 'nama', className:'_w-25 text-truncate text-left font-weight-semibold', name: 'nama' }, 
					{ 	data: 'alamat', className:'_w-25 text-truncate text-left', name: 'alamat' }, 
					{ 	data: 'status', className:'text-center', name: 'status' }, 
					{ 	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: [3] },
				],
				"drawCallback": function( settings ) {             
					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_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();
			});

			// 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-pelanggan").on("click", function() {
				$('#ItemForm').find('input[name=recid]').val('');
				$('#ItemForm').find('input[name=kode]').val('');
				$('#ItemForm').find('input[name=nama]').val('');
				$('#ItemForm').find('textarea[name=alamat]').val('');
				$('#ItemForm').trigger("reset");
                $('#modelHeading').html("Form Tambah Pelanggan Baru");
                $('#ajaxModal').modal('show');
            });

            //simpan 
            $('#saveBtn').click(function(e) {
                e.preventDefault();
        	    var formdata = $('#ItemForm').serializeArray();
        	    //formdataEdit.push({name:'spbu_nama', value:$('#ItemForm').find('select[name=spbu_id] option:selected').text()});
        	    $.ajax({
        	        url 		: "{{ route('pelanggan.store') }}",
        	        type 		: "POST",
        	        data 		: $.param(formdata),
        	     	//data 		: $('#ItemForm').serialize(),
        	        dataType 	: 'json',
                    success 	: function(data) {
                        $('#ItemForm').trigger("reset");
                        $('#ajaxModal').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);
						$('#saveBtn').html('Save Changes');
					}
				});
			});
			
			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('pelanggan.store') }}",
					type		: 'POST',
					data		: data,
					contentType	: false,
					cache		: false,
					processData	: false,
				})
				.done(function(response) {
					append_pBar(response.content);				
					Swal.fire({
						icon 	: 'success',
						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;
			});

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

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

                    $('#recid').val(recid);
					$('#kode').val(data.kode);
					$('#nama').val(data.nama);
					$('#alamat').val(data.alamat);
					$('#kode_perkiraan').val(data.kode_perkiraan);
					$('#nama_perkiraan').val(data.nama_perkiraan);
					$(`input[name=status][value=${data.status}]`).prop('checked', true);
					$('#alias').val(data.alias);
					$('#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('pelanggan.store') }}" + '/' + recid,
		                    success: function(data) {
		                    	Swal.fire(
							      'Berhasil!',
							      'Data telah berhasil dihapus.',
							      'success'
							    );
		                        table.draw();
		                    },
		                    error: function(data) {
		                        console.log('Error:', data);
		                    }
		                });
				  	}
				})

            });

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

			$('select').on('change', function (e) {
                $('#table_inbox').DataTable().ajax.reload();
			});
            //$(".add-pelanggan").click();
		});
	</script>
@endpush