@extends('layouts.app')

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<style>

	/* yg ini sdh ok, model bar */		
		.loading-halaman::before {
			content:" ";
			display:block;
			position:fixed;
			z-index:10;
			height:12px;
			text-align:center;
			color:white;
			width:100%;
			top:0;
			left:0;
			background-color: #00FF7F;		/*#1a73e8;*/
			animation: load-halaman infinite ease-out 2s;
			box-shadow:0 2px 2px rgb(63, 255, 128,2);		/*)rgba(0,0,0,.2);*/
		}

		@keyframes load-halaman {
			from {
				background-color: #90EE90;		/*#ffc422;*/
			}
			to {
				background-color: #00FF00; 		/*#c0392b;*/
			}
		}

			
/*--------------------------------------------------*/
		#loader {
			position: absolute;
			left: 60%;
			top: 75%;
			z-index: 100;
			width: 70px;
			height: 70px;
			margin: -75px 0 0 -75px;
			border: 6px solid #f3f3f3;
			border-radius: 50%;
			border-top: 4px solid #3498db;
			width: 70px;
			height: 70px;
			-webkit-animation: spin 2s linear infinite;
			animation: spin 2s linear infinite;
		}


		@-webkit-keyframes spin {
			0% { -webkit-transform: rotate(0deg); }
			100% { -webkit-transform: rotate(360deg); }
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}



/* Add animation to "page content" */

		.animate-bottom {
			position: relative;
			-webkit-animation-name: animatebottom;
			-webkit-animation-duration: 1s;
			animation-name: animatebottom;
			animation-duration: 1s
			}

		@-webkit-keyframes animatebottom {
			from { bottom:-100px; opacity:0 }
			to { bottom:0px; opacity:1 }
		}

		@keyframes animatebottom {
			from{ bottom:-100px; opacity:0 }
			to{ bottom:0; opacity:1 }
		}

		#myDiv {
			display: none;
		}

		.loading {
			position: relative;
			width: 50%;
			height: 200px;
			border: 1px solid rgba(160, 160, 164, 0.2);
			background-color: rgba(160, 160, 164, 0.2);
			border-radius: 3px;
		}

		span.loader {
			position: absolute;
			top: 40%;
			left: 10%;
			width: 250px;
			height: 20px;
			border-radius: 8px;
			border: 2px solid rgba(160, 160, 164, 0.8);
			padding: 0;
		}

	 	span.innerLoad {
			position: absolute;
			left: 90%;
			top: 95%;
			z-index: 100;
			width: 100px;
			height: 30px;
			text-align: center;
			font-size: 15px;
			font-stretch: extra-expanded;
			color: black;
			padding: 1px 18px 3px 80px;
		}
			
			
	</style>
</head>



@section('content')     

<div class="container-fluid">
        
      <div class="card" style="width:100% height:auto; border-radius:15px;">
        <div class="card-block">

        <div class="text-right" style="margin-top:-10px;">
            <button onclick="kembali()" class="btn_close" style="background-color:transparent; color:black;"><i class="fa fa-times"></i></button> 
    	</div>   
		   
		{{-- notifikasi form validasi --}}
		@if ($errors->has('file'))
		<div class="alert alert-danger alert-block" style="margin-top:20px;">
		<!--<span class="invalid-feedback" role="alert"> -->
		    <button type="button" class="close" data-dismiss="alert">X</button> 
			<strong>{{ $errors->first('file') }}</strong>
		<!--</span>-->
		</div>
		@endif
 
		{{-- notifikasi sukses --}}
		@if ($sukses = Session::get('sukses'))
		<div class="alert alert-success alert-block" style="margin-top:20px;">
			<button type="button" class="close" data-dismiss="alert">X</button> 
			<strong>{{ $sukses }}</strong>
		</div>
		@endif		   

		{{-- notifikasi sukses --}}
		@if ($errors = Session::get('error'))
		<div class="alert alert-danger alert-block" style="margin-top:20px;">
			<button type="button" class="close" data-dismiss="alert">X</button>
			<strong>{{ $errors }}</strong>
		</div>
		@endif
		
		<!-- Import Excel -->

				<form method="post" action="{{ DIR_APP }}supplier/importsupplier" enctype="multipart/form-data" id="formImport">
				{{ csrf_field() }}				    
				    
					<div class="text-left">
						<h5 class="modal-title" id="exampleModalLabel">Import Data from Excel</h5>
					</div>
					<br>

					<label>Pilih file excel</label>
					<div class="form-group">
						<input type="file" name="file" required="required">
					</div>
 
                    <h6 class="text-left" style="display:none" id="tunggu">tunggu, sedang import data ...</h6>
					<div id="loader" style="display:none;"></div>
					
					<br><br>	
					<div class="form-group">
						<button onclick="kembali()" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
						<a href="#" type="button" class="btn btn-primary" onclick="document.getElementById('formImport').submit()"> Import </a>
					</div>
				    <br>
			    </form>

        </div>
    </div>
</div>


@endsection


@section('script')
<script type="text/javascript">

  var links = document.getElementsByTagName("a"),
	i = 0, l = links.length,
	body = document.body;

  	for(;i<l;i++) {
    	links[i].addEventListener("click",function(){

	   	document.getElementById("loader").style.display = "block";
	   	document.getElementById("tunggu").style.display = "block";

    	},false);
	}

function kembali(){
    window.location="{{ route('home') }}";
}

</script>
@endsection
