@extends('layouts.admin')
@section('title')
Zion Global
@endsection

@section('styles')

@endsection

@section('page')
<a href="{{url('/members')}}">Teachers</a>

@endsection


@section('content')
	<section class="ls section_padding_top_50 section_padding_bottom_50 columns_padding_5">
				<div class="container-fluid">

					<div class="row">
						<div class="col-sm-12">
							<h3>Staff 
								<small>Member</small>
							</h3>
						</div>
					</div>
					<!-- .row -->

					<div class="row">
					<div class="col-md-8">
								<div class="with_border with_padding">

									<h4>
										Add Teachers' Picture
										
									</h4>

									<hr>

									

									<div class="row form-group">
										<label class="col-lg-3 control-label">Profile Pictures: </label>
										<div class="col-lg-9">
											    <div id="image"></div>
				                                <div class="progress mb-2 d-none">
				                                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="myBar"></div>

				                                  {{-- <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar"  style="width: 100%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">100%</div> --}}
				                                </div>

				                               <div class="form-group" id="drop-area" style="">
				                                    <label class="text-muted"><small>Click to upload profile pics</small></label>
				                                     <div class="alert alert-danger" id="msgerror12" style="visibility: hidden;"></div> 
				                                    <input type="file" name="avatar" >
				                                </div> 
                                        				                                <style>
				                                   /* .avatar {
				                                        vertical-align: middle;
				                                        width: 100px;
				                                        height: 100px;
				                                        border-radius: 50%;
				                                    }*/

				                                    .avatar {
													    padding: .25rem;
													    background-color: #fff;
													    border: 1px solid #dee2e6;
													    border-radius: .25rem;
													    max-width: 100%;
													    height: auto;
													}
				                                </style>

                                					</div>
									</div>

									<!-- <div class="row">
										<div class="col-sm-12 text-right">
											<button type="submit" id="addmember" class="theme_button wide_button">Add Member</button>
											
										</div>
									</div> -->
									<!-- .row  -->

								</div>
								<!-- .with_border -->

							</div>
						<!-- .col-* -->
					</div>
					<!-- .row -->


					<!-- .row -->

				</div>
				<!-- .container -->
			</section>

			

@endsection



@section('script')
<script src="../js/joseadebag.js"></script>
<script src="../js/jquery.dm-uploader.min.js"></script>

<script type="text/javascript">
	// var a_href = $(this).attr('href');
        // http://localhost:8000/disable_user/#
        var a_href =window.location.href;
        const input =a_href ;
       // alert(input);
        const [first, second] = input.split('memberphoto/');
		//alert(second);
	   $('#drop-area').dmUploader({ //
          url: '/memberphoto',
          maxFileSize: 7000000, // 3 Megs max
          multiple: false,
          allowedTypes: 'image/*',
          headers: {
			   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		  },
          extraData: {
			   "user": second
			},
          extFilter: ['jpg','jpeg','png','gif'],
          onDragEnter: function(){
            // Happens when dragging something over the DnD area
            this.addClass('active');
          },
          onDragLeave: function(){
            // Happens when dragging something OUT of the DnD area
            this.removeClass('active');
          },
          onInit: function(){
            // Plugin is ready to use
           /* ui_add_log('Penguin initialized :)', 'info');

            this.find('input[type="text"]').val('');*/
          },
          onComplete: function(){
            // All files in the queue are processed (success or error)
           // ui_add_log('All pending tranfers finished');
          },
          onNewFile: function(id, file){
            // When a new file is added using the file selector or the DnD area
           /* ui_add_log('New file added #' + id);

            if (typeof FileReader !== "undefined"){
              var reader = new FileReader();
              var img = this.find('img');
              
              reader.onload = function (e) {
                img.attr('src', e.target.result);
              }
              reader.readAsDataURL(file);
            }*/
          },
          onBeforeUpload: function(id){
            // about tho start uploading a file
            //ui_add_log('Starting the upload of #' + id);
            //ui_single_update_progress(this, 0, true);      
            //ui_single_update_active(this, true);
            //$(this).extraData = {"id": second};
           // ui_single_update_status(this, 'Uploading...');
          },
          onUploadProgress: function(id, percent){
            // Updating file progress
           // ui_single_update_progress(this, percent);
           move(percent);
          },
          onUploadSuccess: function(id, data){
          //	console.log(data);
/*            var response = JSON.stringify(data);
            console.log(response.path);*/
            var strJSON = data;
			var objJSON = eval("(function(){return " + strJSON + ";})()");
			//alert(objJSON.path);
			//alert(objJSON.count);


            // $('#pprofile').load(document.URL +  ' #pprofile');
            $("#avat").attr("src", objJSON.path);
            $('#avat').load(document.URL +  ' #avat');

            // A file was successfully uploaded
            //img-responsive img-circle profile-img
            //ui_add_log('Server Response for file #' + id + ': ' + response);
            //ui_add_log('Upload of file #' + id + ' COMPLETED', 'success');

           // ui_single_update_active(this, false);

            // You should probably do something with the response data, we just show it
           // this.find('input[type="text"]').val(response);

           // ui_single_update_status(this, 'Upload completed.', 'success');
          },
          onUploadError: function(id, xhr, status, message){
            // Happens when an upload error happens
            //ui_single_update_active(this, false);
           // ui_single_update_status(this, 'Error: ' + message, 'danger');
          },
          onFallbackMode: function(){
            // When the browser doesn't support this plugin :(
            //ui_add_log('Plugin cant be used here, running Fallback callback', 'danger');
          },
          onFileSizeError: function(file){
            //ui_single_update_status(this, 'File excess the size limit', 'danger');
              alert('File excess the size limit.');
            // $('#msgerror12').show();
           // ui_add_log('File \'' + file.name + '\' cannot be added: size excess limit', 'danger');
          },
          onFileTypeError: function(file){
           // ui_single_update_status(this, 'File type is not an image', 'danger');
            alert('File type is not an image.');
            // $('#msgerror12').show();
           // ui_add_log('File \'' + file.name + '\' cannot be added: must be an image (type error)', 'danger');
          },
          onFileExtError: function(file){
           // ui_single_update_status(this, 'File extension not allowed', 'danger');
           alert('File type is not an image.');
            // $('#msgerror12').show();
            //ui_add_log('File \'' + file.name + '\' cannot be added: must be an image (extension error)', 'danger');
          }
        });

        function move(percent) {
            var elem = document.getElementById("myBar"); 
            var width = 1;
            var id = setInterval(frame, percent);
            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                } else {
                    width++; 
                    elem.style.width = width + '%'; 
                }
            }
        }


</script>
@endsection