<?php require_once('header.php');?>
<section class="content-header">
		<div class="box-body">
		<form id="pod_form">    
		    <div class="form-group">
				<label for="" class="col-sm-3 control-label">Select Multiple Images<span>*</span></label>
				<div class="col-sm-9" style="padding-top:5px">
					<input type="file" name="files[]" id="image" required accept=".png,.jpeg,.webg,.jpg" multiple class="multi_file" required><span style="font-size: 12px;color: blue;font-weight: bold;">(Only IMG Format & Max Upload AWB Files is 15)</span>
				</div>
			</div>
			<div class="form-group">
			    <div class="col-sm-9">
			        <center><button id='form_submit' class="btn btn-warning btn-sm" style="padding:2px 10px;"><span id='submit_txt'><i id='submit_spin'></i> Upload POD Details</span></button></center>
			    </div>
			</div>
			
	<div class="form-group">
	    <div class="col-sm-12" id="loading-bar">	
		<center><div class="progress-bar">
              <div class="progress">0%</div>
            </div>
        </center>
	    </div>
	</div>
			
			
		</form>
		</div>
		
		<!--=========================+++++++++++++++++++++===================-->
		    <div class="box-body">
		        <div class="row" id="contents">
		        </div>
		    </div>
		<!--=========================+++++++++++++++++++++===================-->
</section>

<style>
    .success_div{
        border: 1px solid gray;padding: 5px 10px;border-radius: 6px;border-style: dashed;background: #8fde8f;color: darkgreen;font-weight: 900;
    }
    .warning_div{
        border: 1px solid gray;padding: 5px 10px;border-radius: 6px;border-style: dashed;background: #831d1d;color: white;font-weight: 900;
    }
</style>
<style>
    .progress-bar {
          width: 100%;
        height: 25px;
        margin: 10px 0px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    font-size: 15px;
      border-radius: 5px;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      background-color: #4CAF50;
      text-align: center;
      color: white;
      transition: width 0.3s;
    }
  </style>
  <script>
  $(document).ready(function() {
      $('#loading-bar').hide();
  });
</script>
<script>
 
 
 
 
    $('#pod_form').on('submit', function(e){
                e.preventDefault();
        $('#contents').empty();
                console.log('Product Form Submit Option Start...');
        if($("#image")[0].files.length <= 15){
            $('#loading-bar').show();
            $("#form_submit").prop('disabled', true);
            $('#submit_txt').text('Uploading Pls Wait...');
            $('#submit_spin').addClass('fa fa-spinner fa-spin');
            var formData = new FormData(this);
            formData.append('type', 'confirm');
            $.ajax({
                                    
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(parseInt(percentComplete*100));
        var percentage=parseInt(percentComplete*100);
        $('.progress').text(percentage + '%');
        $('.progress').css('width', percentage + '%');
      }
    }, false);
   
    return xhr;
  },
  
  
                            url: 'bulk-upload-pod-api.php',
                            type: 'post',
                            dataType: 'json',
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                          enctype: 'multipart/form-data',
                            success: function (response) {
                                console.log(response);
                                $('#submit_txt').text('Upload POD Details');
                                $("#submit_spin").removeClass("fa fa-spinner fa-spin");
                                $("#form_submit").prop('disabled', false);
                                 $('#contents').append(response['data']);
                                 $('#loading-bar').hide();
                            }
                        });
        }else{
            alert("You can select only 15 images");
        }        
                

                
    });
    
    

</script>


<?php require_once('footer.php'); ?>