@extends('layouts.header')
@section('content')
<br>

<!-- <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">
		<div class="form-group row">
			<div class="col-md-4 form-group">
				<label>Module <font color="red">*</font> </label>
				<select class="form-control customDropdown" name="ModuleId" id="ModuleId">
					<option value="">Select Module</option>
					@foreach($ModuleNamelists as $Module)
					<option value="{{$Module->ModuleId}}"> {{$Module->ModuleName}} </option>
					@endforeach
				</select>
			</div>
			<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>

		<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)=>
		{

			ModuleId=$('#ModuleId :selected').val();
			if(!ModuleId)
			{
				Snackbar.show({
					text:  "Please Select Module", 
					pos: 'top-right',
					actionTextColor: '#fff',
					backgroundColor: '#e7515a'
				});
				$('#fileInput').val('');
				return;
			}

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

			$.ajax({
				type:"post",
				url:"{{url('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>