@extends('layouts.backend.app')

@section('content')

 <!-- Start right Content here -->
 <div class="main-content shop">
	<div class="page-content">
	
	<div class="container-fluid">
		<div class="page-title-box">
			<div class="row align-items-center">

				<div class="col-md-8">
					<h6 class="page-title">Products model import</h6>
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">Products model import</li>
					</ol>
				</div>

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

	 <div class="row">
		<div class="col-md-12">

		<div class="col-md-12 mobile-table-column mbp">
			<div class="card">
				<div class="card-body">

		<div class="row gutters-5 pb-2">
			<div class="col-md-3 text-left text-md-left"></div>
			<div class="col-md-6">
				<div class="add-custmer">
					<div>
			<form action="{{ route('product-import-save') }}" id="import" name="import" method="POST" enctype="multipart/form-data">

				@csrf
				<table><tr><td>
				<input type="file" name="file" id="file" class="form-control file">
				</td><td>&nbsp;&nbsp;&nbsp;
				<button type="button" class="btn btn-success sbmtn">Import Excel</button>
				</td><td><a href="frontend/assets/csv/star_mobiles.xlsx" download="Products.xlsx" style="font-size: 10px;color: red;">(<small>Sample</small>)</a>
				</td></tr>

				</table>
			</form>

						<div id="preloder"><div class="loader"></div></div>
					</div>
				</div>
			</div>

		</div>

			</div></div>
			</div>
		</div>
	</div>
	<!-- end row -->

		</div>
	</div>
</div>
<!-- end main content-->

@endsection

@section('scripts')

<script>

$(document).on("click", ".sbmtn", function () {

	var err = true;
	var $input = $("#file");
	var input = $("#file");
	var files = $input[0].files;

	if(files.length == 0) {

		input.removeClass("valid").addClass("invalid");
		$("#prfd").remove();
		$('<div id="prfd" class="text-danger">Please select a file and try again!</div>').insertAfter("#file");
		$("#file").val('');
		err = false;
		return false;
			
	} else {

		var filename = files[0].name;
		var extension = filename.substr(filename.lastIndexOf("."));
		var allowedExtensionsRegx = /(\.csv|\.xlsx)$/i;
		var isAllowed = allowedExtensionsRegx.test(extension);
		var urlvl = $("#file").val();

		if(isAllowed){

			var $input = $("#file");
			var files = $input[0].files;
			for(var i=0; i<files.length; i++){
				var fileSize = files[i].size;
				var size = Math.round((fileSize / 1024));
				if (size <= 1*1024) {
					input.removeClass("invalid").addClass("valid");
					$("#prfd").remove();
				} else {
					input.removeClass("valid").addClass("invalid");
					$("#prfd").remove();
					$('<div id="prfd" class="text-danger">Invalid file size, please select a file less than or equal to 1mb size</div>').insertAfter("#file");
					$("#file").val('');
					err = false;
					return false;
				}
			}

		} else {
			input.removeClass("valid").addClass("invalid");
			$("#prfd").remove();
			$('<div id="prfd" class="text-danger" >Invalid File type, please select a file(.xlsx,.csv)</div>').insertAfter("#file");
			$("#file").val('');
			err = false;
			return false;
		}

		if(err == true) {

			$("#preloder").fadeIn();
			$(".sbmtn").attr("disabled", true);
			document.forms["import"].submit();
			return true;
		}
	}
});

</script>

@endsection