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

@section('styles')

@endsection

@section('page')
<a href="{{url('/projects')}}">Gallery</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>School  
								<small>Gallery</small>
							</h3>
						</div>
					</div>
					<!-- .row -->

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

									<h4>
										Add Gallery Pictures
										
									</h4>

									<hr>

									

									<div class="row form-group">
										<label class="col-lg-3 control-label">Gallery 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 gallery pics</small></label>
				                                     <div class="alert alert-danger" id="msgerror12" style="visibility: hidden;"></div> 
				                                    <input type="file" name="avatar" >
				                                </div> 
                                       

                      </div>
									</div>

									 <div class="row" id="newimage">
										<div class="col-sm-12 text-right">
											<img src="#" alt="Avatar"  id="avata" class="avatar">

											
										</div>
									</div> 
                       <div class="container-fluid">
                                                                                 </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: .10rem;
                                            max-width: 100%;
                                            height: auto;
                                        }
                                        </style>

									<!-- .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/#
        $('#newimage').hide();
        var a_href =window.location.href;
        const input =a_href ;
       // alert(input);
        const [first, second] = input.split('projectphoto/');
		//alert(second);
	   $('#drop-area').dmUploader({ //
          url: '/gallery',
          maxFileSize: 7000000, // 3 Megs max
          multiple: false,
          allowedTypes: 'image/*',
          headers: {
			   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		  },
          extraData: {
			   "projectid": 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');
            $("#avata").attr("src", objJSON.path);
            $('#avata').load(document.URL +  ' #avata');
            $('#newimage').show();
         //   alert('Project picture successfully uploaded.');
           // location.reload();
            // 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