@extends('akun.layout')

@push('stylesheet')
<style type="text/css">
	.a_create_container {
		color: #202124!important;
	    box-shadow: 0 4px 4px 0 rgba(60,64,67,0.3), 0 8px 12px 6px rgba(60,64,67,0.15)!important;
	    background-color: #f1f3f4;
	}
	.img-kartu{
		height:215px!important;
	}
</style>
@endpush

@section('content_header') 
    <h1 class="x7WrMb">{{ ucwords(strtolower('Data Profile Akun')) }}</h1>
    <div class="cmSWBc">Info mendasar, seperti nama dan foto Anda, yang Anda gunakan di aplikasi layanan kami</div>
@endsection

@section('content_body')
<form id="form" class="form-horizontal">
<input type="hidden" name="_token" value="{{ csrf_token() }}">	
	<div class="dQBdyc">
	    <div class="wJpH8c zpCp3">
	        <article class="GIxHAe">
	            <div class="XLK0Od">
	            <div class="ahh38c">
	            <div class="ugt2L">
	            <div class="N5YmOc kJXJmd">
	            	<header class="mSUZQd">
	            		<div class="jbRlDc">
	            			<h2 class="fnfC4c">Personal Info</h2>
	            			<div class="ISnqu"></div>
	            		</div>
	            	</header>
	            </div>
	        	</div>
	        	<div class="ugt2L aK2X8b iDdZmf">
	        		<div class="container card-body">
					<div class="row">
			            <div class="col-sm-12 row">			            	
			            	<div class="col-sm-9">
									<div class="form-group row pt-0 pb-1 mb-0">
										<label class="col-lg-3 col-form-label">User</label> 
										<div class="col-lg-8">
                                            <span class="form-control" style="border:0">{{ trim($dtuser->userid) }}</span>
										</div>			
                                	</div>
                                    <div class="d-none form-group row">
                                        <label class="col-lg-3 col-form-label">Password</label>
                                        <div class="col-lg-9">
                                            <input name="password" id="password" type="password" placeholder="Silahkan masukkan password baru" class="form-control">
                                        </div>
                                    </div>
                                    <div class="d-none form-group row">
                                        <label class="col-lg-3 col-form-label">Confirm</label>
                                        <div class="col-lg-9">
                                            <input name="password_confirmation" type="password" placeholder="Silahkan ulangi password baru " class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label">Nama pengguna</label>
                                        <div class="col-lg-9">
                                            <span class="form-control" style="border:0">{{ trim($dtuser->username) }}</span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-form-label">Akses</label>
                                        <div class="col-lg-9">
											@if(!empty($dtuser->roles))
												<ul>
												@foreach($dtuser->roles as $key => $value)
													<li>{{ $value->role }}</li>
												@endforeach
												</ul>
											@else
												-
											@endif
                                        </div>
                                    </div>
							</div>		            	
			            	<div class="col-sm-3">
                                <div class="form-group row">
                                	<div class="col-lg-12">
                                            <p class="text-right">
                                                <input type="file" name="img" style="display:none" id="avatar">
                                                <a href="javascript:void(0)" id="avatar_trigger">
                                                    <img id="preview-avatar" alt="image" class="img-fluid rounded-circle preview-avatar" 
                                                    src="{{ 
													(   file_exists( 'avatar/'.strtolower( trim(Auth::user()->userid) ).'.jpg') ) ? 
														asset('avatar/'.strtolower( trim(Auth::user()->userid) ).'.jpg') :
														asset('avatar/user-pdam.png')
													}}" style="width:128px; height:128px;" />
                                                </a>
                                            </p>
                                    </div>
                                </div>
			            	</div>
						</div>
						<div class="d-none col-sm-12">
							<div class="form-group row my-3">
								<div class="col-lg-12 _text-right">									
									<a id="btn_save" class="btn _btn-sm btn-primary _round _rounded-round text-white">
										<i class="icon-pencil mr-2"></i> Simpan
									</a>
								</div>
							</div>
						</div>
					</div>
					</div>
				</div>
	            </div>
	            </div>
	        </article>
	    </div>
	</div>
</form>
@endsection

@push('scripts')
    <script src="{{ asset('global_assets/js/plugins/forms/validation/validate.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/selects/select2.min.js') }}"></script>
	<script src="{{ asset('global_assets/js/plugins/pickers/daterangepicker.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/inputs/inputmask.js') }}"></script>
	<script src="{{ asset('global_assets/js/plugins/forms/inputs/formatter.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('global_assets/js/plugins/fancybox/lib/jquery.mousewheel-3.0.6.pack.js') }}"></script>
	<script type="text/javascript">
	    $(document).ready(function(){ 
			$('[name=nik]').formatter({
				'pattern': '@{{9999999999999999}}',
			});
			$('[name=npwp],[name=npwp_prsh]').formatter({
				'pattern': '@{{99}}.@{{999}}.@{{999}}.@{{9}}-@{{999}}.@{{999}}',
				// 'persistent': true
			});
			function isPasswordPresent() {
				return $('#password').val().length > 0;
			}
            $.validator.addMethod("pwcheck",
            function(value, element) {
                return /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/.test(value);
            });
	    	var validator = $('#form').validate({
	            ignore 		: 'input[type=hidden], .select2-search__field', // ignore hidden fields
	            errorClass 	: 'validation-invalid-label',
	            highlight: function(element, errorClass, validClass) {
	                $(element).removeClass(errorClass);
	            },
	            unhighlight: function(element, errorClass, validClass) {
	                $(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);
	                }
	            },
                rules: {
                    nik: {
                        required: true,
                        number:true,
                        minlength: 16,
                        maxlength:16
                    },
                    npwp: {
                        required: true,
                        minlength: 20,
                        maxlength:20
                    },
                    npwp_prsh: {
                        required: true,
                        minlength: 20,
                        maxlength:20
                    },
                    password: {
                        required: false,
                        pwcheck: {
							depends: isPasswordPresent,
                			param: true
						},
                        minlength: 8
                    },
                    password_confirmation: {
                        equalTo: '#password'
                    },
                    telepon: {
                        number: true
                    },
				},
                messages: { 
                    nik: {
                        required: 'NIK terdiri dari 16 digit angka.'
                    },
                    npwp: {
                        required: 'NPWP terdiri dari 15 digit angka.',
                        minlength: 'NPWP terdiri dari 15 digit angka.',
                        maxlength: 'NPWP terdiri dari 15 digit angka.'
                    },
                    npwp_prsh: {
                        required: 'NPWP terdiri dari 15 digit angka.',
                        minlength: 'NPWP terdiri dari 15 digit angka.',
                        maxlength: 'NPWP terdiri dari 15 digit angka.'
                    },
                    password: {
                        pwcheck: 'Sandi terdiri huruf besar, kecil & angka.<br>Minimal 8 digit.'
                    },
				}
	        });

	    	function readURL(input) {
	            if (input.files && input.files[0]) {
	                var reader = new FileReader();
	                reader.onload = function (e) {
	                    //$('#preview-avatar').attr('src', e.target.result);
	                    $('.preview-avatar').attr('src', e.target.result);
	                }

	                reader.readAsDataURL(input.files[0]);
	            }
	        }

	    	function readURL_nik(input) {
	            if (input.files && input.files[0]) {
	                var reader = new FileReader();
	                reader.onload = function (e) {
	                    $('#preview_nik_avatar').attr('src', e.target.result);
	                }
	                reader.readAsDataURL(input.files[0]);
	            }
	        }

	    	function readURL_npwp(input) {
	            if (input.files && input.files[0]) {
	                var reader = new FileReader();
	                reader.onload = function (e) {
	                    $('#preview_npwp_avatar').attr('src', e.target.result);
	                }
	                reader.readAsDataURL(input.files[0]);
	            }
	        }

	        function fancy (url) {
	            $.fancybox.open({
	                autoSize    : false,
	                width       : "100%",
	                height      : "100%",
	                href        : url,
	                type        : 'iframe',
	                padding     : 5
	            });
	        }

	        var cbpAnimatedHeader = (function() {
	            var docElem = document.documentElement,
	                    header = document.querySelector( '.navbar-default' ),
	                    didScroll = false,
	                    changeHeaderOn = 200;
	            function init() {
	                window.addEventListener( 'scroll', function( e ) {
	                    if( !didScroll ) {
	                        didScroll = true;
	                        setTimeout( scrollPage, 250 );
	                    }
	                }, false );
	            }
	            function scrollPage() {
	                var sy = scrollY();
	                if ( sy >= changeHeaderOn ) {
	                    $(header).addClass('navbar-scroll')
	                }
	                else {
	                    $(header).removeClass('navbar-scroll')
	                }
	                didScroll = false;
	            }
	            function scrollY() {
	                return window.pageYOffset || docElem.scrollTop;
	            }
	            init();
	        })();

            $('#avatar_trigger').click(function(e) {
                $('#avatar').click();
                return false;
            });

            $("#avatar").change(function(e){
                readURL(this);
            });
	    	
            $('#nik_avatar_trigger').click(function(e) {
                $('#nik_avatar').click();
                return false;
            });

            $("#nik_avatar").change(function(e){
                readURL_nik(this);
            });
			
            $('#npwp_avatar_trigger').click(function(e) {
                $('#npwp_avatar').click();
                return false;
            });

            $("#npwp_avatar").change(function(e){
                readURL_npwp(this);
            });

	        $('.form-input-styled').uniform({
	            fileButtonClass: 'action btn btn-sm bg-blue'
	        });

	        $('.form-check-input').uniform({
	            wrapperClass: 'border-primary-600 text-primary-800'
	        });

	        $('.chosen-select-width').select2({
                //minimumResultsForSearch: Infinity
            });

		    $('.daterange-single').datepicker({
	            dateFormat 		: 'dd-mm-yy',
	            showButtonPanel	: true,
	            isRTL			: $('html').attr('dir') == 'rtl' ? true : false,
	            uiLibrary 		: 'bootstrap4', 
	            size 			: 'small',
	            iconsLibrary 	: 'fontawesome'
			});
			
	        $('#btn_save')
	        .on('click', function(e) {
	        	e.preventDefault();
	        	$('#form').submit();
                e.stopPropagation();
                return false;
	        });
			/**/
			
			$('#form').submit(function(e) {
                e.preventDefault();
                var $target = $(this),
				    block = $target.closest('section');  
					blockui(block); 
				if(! $target.valid()) {
					unblockui(block);
					$.alert("Data belum Valid, Silahkan cek kembali data isian Anda!!!");
					return false;
				}
				    
                var data = new FormData(this);
                $.ajax({
                    url: "{{ route('akun.store') }}",
                    type: 'POST',
                    data: data,
                    contentType: false,
                    cache: false,
                    processData:false,
                })
                .done(function(response) {
                	console.log(response);
                	$.alert(response.message);
                	unblockui(block); 
                	setTimeout(function(){  
		                //window.location.reload(true);
		            }, 7000 );
                    //location.reload();
                })
                .fail(function(response) {
                    console.log(response);
					$.alert(response.message);
                	// $.alert('data gagal disimpan');
                });
                e.stopPropagation();
                return false;
            });

			$(".toggle-password").click(function() {
                var input = $($(this).attr("toggle"));
                if (input.attr("type") == "password") {
                    $(this).attr( 'class', "cursor-pointer toggle-password icon-eye-blocked" );
                    input.attr("type", "text");
                } else {
                    $(this).attr( 'class', "cursor-pointer toggle-password icon-eye" );
                    input.attr("type", "password");
                }              
            });

	    });
	</script>
@endpush