<?php  session_start(); error_reporting(0); ?>
<?php if(!isset($_SESSION['j_admin']) && !isset($_SESSION['j_admin'])){ 
    $url = urlencode("http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); header('location:../login/?url='.$url.'');  
} ?>
<!doctype html>
<html lang="en"> 
<head>
	<?php
    require_once("../j_conn/url.php");
    require_once("../j_conn/dbc.php");
    require_once("../j_incs/functions.php");
    $page_name="Profile Picture";
    $page_desc="$page_name";
    $page_img="".$dir."j_files/j_img/logo/logo-meta.png";
    $page_author="$company";
    $page_keywords="".$company.", $page_name, $page_desc, ".$company_motto.", $company_desc";
    $page_url="".$dir."profile-picture/";
    require_once("../j_incs/metas.php");
    require_once("../j_incs/scripts-top.php");
    ?>
</head>
<body>
    
    <div class="app">
        <div class="layout">
            <?php 
            require_once("../j_incs/header.php");
            require_once("../j_incs/nav.php");
            ?>
            <!-- Page Container START -->
            <div class="page-container">
                

                <!-- Content Wrapper START -->
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row">
							<div class="col-md-2"></div>
                            <div class="col-md-8">
                                <div class="page-header">
									<?php /*<h2 class="header-title"><?php echo $page_name; ?></h2>*/ ?>
									<div class="header-sub-title">
										<nav class="breadcrumb breadcrumb-dash">
											<a href="<?php echo $dir; ?>" class="breadcrumb-item"><i class="anticon anticon-dashboard m-r-5"></i>Dashboard</a>
											<!--<a class="breadcrumb-item" href="#"> </a>-->
											<span class="breadcrumb-item active"><?php echo $page_name; ?></span>
										</nav>
									</div>
								</div>
                            </div>
                        </div>
                    </div>
                     
                     
                    <div class="container-fluid">
						<div class="row">
							<div class="col-md-2"></div>
							<div class="col-md-8">
								<div class="tab-content m-t-15">
									<div class="tab-pane fade show active" id="tab-account">
										<div class="card">
											<div class="card-header">
												<h4> Update Profile Picture</h4>
											</div>
											<div class="card-body">
												<form method="POST" action="" id="form" enctype="multipart/form-data">

													<div class="form-group">
														<label class="btn btn-warning btn-lg fileCtn">
															<i class="fas fa-image"></i> Browse <input type="file" name="file1[]" id="imageSelect" accept="image/*" hidden>
														</label>
													</div>
													<div class="form-group">
														<div id="image_output"></div>
													</div>
													<div class="form-group">
														<label class="font-weight-semibold">Current Password:</label>
														 <div class="input-affix m-b-10">
															 <input type="password" class="form-control passw rMe" name="old_password" placeholder="Password"/>
															<span class="prefix-icon" id="sPass" style="cursor: pointer; margin-left: 87%;">
																<i class="anticon anticon-eye"></i>
															</span>
															<span id="sStatus" style="display:none;">0</span>
														</div>
													</div>



													<div class="form-group">
														 <button id="submit"  name="submit" class="btn btn-primary btn-block m-t-30">Update</button>
													</div>

												</form>
												
												<div class="progress" style="height:15px; display:none;">
													<div class="progress-bar bg-primary" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="percent">0%</span></div>
												</div>												
												
												<div id="formresult"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
                </div>
                <!-- Content Wrapper END -->

                <?php
                require_once("../j_incs/footer.php");
                ?>

            </div>
            <!-- Page Container END -->
        </div>
    </div>
    
    
    <?php
    require_once("../j_incs/scripts-bottom.php");
    ?>
    
   
    
    
    <script>
        
        function readURL(input) {
        if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var source = e.target.result;
                    $('#image_output').html('<img src="'+source+'" style="width:200px; height:auto;"/><br/><br/>');
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imageSelect").change(function(){
            readURL(this); 
        });
        
        var form = "#form";
        var button = "#submit";
        var button_val = $(button).html();
        var result = "#formresult";
        $(form).on('submit',(function(e) {
        e.preventDefault();
        
        //continue
        $(button).attr('disabled', '');
        $(button).html("<i class='anticon anticon-loading'></i> Processing");
        $(result).html("<div class='alert alert-warning'> Taking too long? <a href=''>Reload </a></div>");
        
		
		var barBox = $('.progress');
		var bar = $('.progress-bar');
		var perc = $('.percent');

		$.ajax({
			url: "save.php",
			type: "POST",
			data: new FormData(this),
			contentType: false,
			processData:false,
			cache: false,
			enctype: 'multipart/form-data',
			xhr: function(){
				//upload Progress
				barBox.show();
				var xhr = $.ajaxSettings.xhr();
				if (xhr.upload) {
				xhr.upload.addEventListener('progress', function(event) {
				var percent = 0;
				var position = event.loaded || event.position;
				var total = event.total;
				if (event.lengthComputable)
				{
				percent = Math.ceil(position / total * 100);
				}
				//update progressbar
				if(percent==100){
					bar.removeClass('bg-primary');	
					bar.addClass('bg-success');	
				}
				bar.css("width", + percent +"%");
				perc.text(percent +"%");
				}, true);
				}
				return xhr;
			},
			success: function(data)
			{
				bar.removeClass('bg-success');	
				bar.addClass('bg-primary');	
				bar.width('0%');
				perc.html('0%');
				barBox.hide();
				//$(form).hide();
				$(button).removeAttr('disabled');
				$(button).html(button_val);
				$(result).html(data);
				if(data){
					
				}else{
					$(result).html("Error occurred.");
				}
			},
		});
			
			
        }));
		
		 /*
        var input = document.createElement('input');
        input.type = 'file';

        input.onchange = e => { 

           // getting a hold of the file reference
           var file = e.target.files[0]; 

           // setting up the reader
           var reader = new FileReader();
           reader.readAsText(file,'UTF-8');

           // here we tell the reader what to do when it's done reading...
           reader.onload = readerEvent => {
              var content = readerEvent.target.result; // this is the content!
              //console.log( content );
              //alert(content );
               $(result).html(content);
           }

        }

        input.click();
        */
        
		    /*
        function readURL(input) {
         for(var i =0; i< input.files.length; i++){
                 if (input.files[i]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                       var img = $('<img id="dynamic">');
                       img.attr('src', e.target.result);
                       img.appendTo('#form1');  
                    }
                    reader.readAsDataURL(input.files[i]);
                   }
                }
            }

            $("#imgUpload").change(function(){
                readURL(this);
            });
        }
        */
        
		
        </script>
   
</body>
</html>