<?php
include './connection_sql.php';
?> 
    <script src="vendor/new/multi/jquery-3.5.1.js" ></script> 
    
    <style>
#upload_excel label {
    margin: 2px;
    font-size: 1em;
}

#progress-bar {
    background-color: #12CC1A;
    color: #FFFFFF;
    width: 0%;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    transition: width .3s;
    border-radius: 5px;
}

#targetLayer {
    width: 100%;
    text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
    type="text/javascript"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"
    integrity="sha512-YUkaLm+KJ5lQXDBdqBqk7EVhJAdxRnVdT2vtCzwPHSweCzyMgYV/tgGF4/dCyqtCC2eCphz0lRQgatGVdfR0ww=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
<!-- Main content -->
<script type="text/javascript">
$(document).ready(function() {
     $('#upload_excel').submit(function(e) {
        if($('#file').val()) {
            e.preventDefault();
            $('#loader-icon').show();
            $(this).ajaxSubmit({
                target:   '#targetLayer',
                beforeSubmit: function() {
                  $("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){
                    $("#progress-bar").width(percentComplete + '%');
                    $("#progress-bar").html('<div id="progress-status" class="text-center">' + percentComplete +' %</div>')
                },
                success:function (){
                    $('#loader-icon').hide();
                },
                resetForm: true
            });
            return false;
        }
    });
});

</script>
<section class="content">

    <div class="box box-primary">
        <div class="box-header with-border">
           <h3 class="box-title">EXCEL UPLOAD</h3>
            <h4 style="float: right;height: 3px;"><b id="time"></b></h4>
        </div>
         <!--<form id="upload_excel" action="inv_barcode_up_data.php" method="post">-->
         <form class="form-horizontal well" action="inv_barcode_up_data.php" method="post" name="upload_excel" enctype="multipart/form-data">
              
 
                <input type="hidden"  id="tmpno" >
                 <div class="form-group ">
                        <input type="file" name="file" id="file" class="form-control input-sm "> 
                 </div>    
                     
                 
                 <div class="form-group">
                      <!--<input type="submit" id="submit" name="Import" class="full-width" />-->
                        <button type="submit" id="submit" name="Import" class="btn btn-primary button-loading input-sm"   data-loading-text="Loading...">Upload</button>
                        <a onclick="location.reload();" class="btn btn-default">
                        <span class="fa fa-user-plus"></span> &nbsp; New
                    </a>
                </div>
                
                <div class="row">
                    <div id="progress-bar"></div>
                </div>
                <div id="targetLayer"></div>
                
                     
             
        </form>
         <div id="loader-icon" style="display: none;">
            <img src="LoaderIcon.gif" />
        </div>
 
</div>
</section>