@extends('layouts.header')
@section('content')
<br>
<div class="page-header">
	<div class="breadcrumb-four">
		<ol class="breadcrumb">
			<ul class="breadcrumb">
				<li><a href="{{url('dashboard')}}" title="Go to Home Page!"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>
				<li>
					<a href="{{url('Admin-Panel')}}" title="Administration">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-unlock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
						Admin Panel
					</a>
				</li>
				<li>
					<a href="{{url('List-Users')}}" class="active" title="List-Users">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
						List of Users
					</a>
				</li>
				<li>
					<a href="{{url('Create-Users')}}" title="Create-User">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
						Create User
					</a>
				</li>
				<li class="active">
					<a href="{{url('UsersImport')}}" title="UsersImport">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>
						Users Import
					</a>
				</li>
			</ul>
		</ol>
	</div>
</div>
<!-- <pre> -->
	@php
	//print_r($ModuleNamelists);
	@endphp
	<!-- </pre> -->
	<style type="text/css">
		.filepond--root .filepond--drop-label {
			max-height: 2.75em !important;
		}
	</style>
	<div class="statbox widget box box-shadow">

		<h4>Users Import</h4>

		<div class="form-group row">
			<div class="col-md-4 form-group">
				<label>Select File <font color="red">*</font></label>
				<input type="file" class="form-control" name="fileInput" id="fileInput"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onchange="UploadFile(this.files[0])">
			</div>
			<div class="col-md-4">
				<label>Download Sample Template</label><br>
				<a class="btn btn-outline-primary btn-rounded mb-2" href="https://cloudmyschoolone.s3.ap-south-1.amazonaws.com/myschoolone.bpm360.net/CodeFiles/52cf8af1c878da8b30d16f698bd89400UsersImportSample.csv">Sample Template</a>
			</div>
		</div>
		<div class="form-group row" style="margin-top: 20px">
			<div class="col-md-12 form-group" id="MapFields">
				<br>
			</div>
		</div>
	</div>
	@endsection

	<script type="text/javascript">
		UploadFile=(fileInput)=>
		{

			formData=new FormData();
			formData.append('fileInput',fileInput);

			$.ajax({
				type:"post",
				url:"{{url('UsersImport-UploadExcelFile')}}",
				data:formData,
				contentType:false,
				processData:false,
				cache:false,
				mimeType:"multipart/form-data",
				beforeSend:()=>{
					$('#MapFields').html("<center><div class='spinner-border text-primary align-self-center loader-lg'></div></center>")
				},
				success:response=>{
					$('#MapFields').html(response);
				}

			});
		}
	</script>