@extends("admin.template.layout")

@section('header')
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> -->
    <link href="{{asset('/formstone/css/upload.css')}}"></link>
    <style type="text/css">
.fs-upload.fs-light .fs-upload-target{background:#fff;border:3px dashed #607d8b;border-radius:2px;color:#455a64;font-size:14px;margin:0;padding:25px;text-align:center;-webkit-transition:background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;transition:background .15s linear,border .15s linear,color .15s linear,opacity .15s linear}
.filelists {
    margin: 20px 0;
}

.filelists h5 {
    margin: 10px 0 0;
}

.filelists .start_all {
    background: #455a64;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    clear: both;
    display: inline-block;
    font-size: 10px;
    margin: 0 10px 0 0;
    padding: 8px 12px;
    text-transform: uppercase;
}

.filelists .cancel_all {
    color: red;
    cursor: pointer;
    clear: both;
    display: inline-block;
    font-size: 10px;
    margin: 0;
    text-transform: uppercase;
}

.filelist {
    margin: 0;
    padding: 10px 0;
}

.filelist li {
    background: #fff;
    border-bottom: 1px solid #ECEFF1;
    font-size: 14px;
    list-style: none;
    padding: 5px;
    position: relative;
}

.filelist li:before {
    display: none !important;
}
/* main site demos */

.filelist li .bar {
    background: #eceff1;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 0;
    -webkit-transition: width 0.1s linear;
    transition: width 0.1s linear;
}

.filelist li .f-content {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.filelist li .file {
    color: #455A64;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    white-space: nowrap;
}

.filelist li .progress {
    color: #B0BEC5;
    display: block;
    float: right;
    font-size: 10px;
    text-transform: uppercase;
}

.filelist li .cancel {
    color: red;
    cursor: pointer;
    display: block;
    float: right;
    font-size: 10px;
    margin: 0 0 0 10px;
    text-transform: uppercase;
}
/* .filelist.started li .cancel { display: block; } */
/* .filelist li .remove { color: red; cursor: pointer; display: block; float: right; font-size: 10px; margin: 0 0 0 10px; text-transform: uppercase; }
.filelist.started li .remove { display: none; } */

.filelist li.error .file {
    color: red;
}

.filelist li.error .progress {
    color: red;
}

.filelist li.error .cancel {
    display: none;
}
.fs-upload-input{
  opacity: 0;
}
</style>
@stop


@section('content')
    <div class="card mb-5">
         @if($message = Session::get('success'))
   <div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>
           <strong>{{ $message }}</strong>
   </div>
   @endif
   @if($message = Session::get('error'))
   <div class="alert alert-danger alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>
           <strong>{{ $message }}</strong>
   </div>
   @endif





   <div class="row" style="padding: 20px;">
 <div class="col-md-6">
  
     <div class="row">
       <div class="col-md-8">
         <h4 class="mb-4">Import Master Products</h4>
       </div>
       <div class="col-md-4 text-right">
         <a href="{{url('admin/download_masterproduct_format')}}" class="btn btn-dark btn-sm"><i class="fa fa-download" aria-hidden="true"></i>&nbsp; Blank Excel</a>
       </div>
     </div>
     <div id="import-alert" class="alert alert-danger" style="display: none;"></div>
     <div class="progress mt-4" id="upload-progress" style="height: 15px; display: none;">
               <div class="progress-bar bg-info" role="progressbar" aria-valuenow="0"
               aria-valuemin="0" aria-valuemax="100" style="min-width:0%;width:0%">
                   0%
               </div>
           </div>
     <form action="#" method="post" class="form pt-5">
       <div id="xls-upload" data-upload-options='{"action":"