@extends('layouts.header')
@section('content')

<br>
<div class="statbox widget box box-shadow">

	<form id="UpdateCreateForm">

		<div class="form-group row">
			<div class="col-md-3">
				<label>Name <font color="red">*</font> </label>
				<input type="text" name="Name" id="Name" class="form-control" required/>
				<div class="invalid-feedback">
					Please Fill Name
				</div>
			</div>

			<div class="col-md-3">
				<label>Module <font color="red">*</font></label>			
				<select class="form-control customDropdown" name="ModuleId" id="ModuleId" required> 
					<option value="">--Select--</option>
					@foreach($Modules as $Module)
					<option value="{{$Module->ModuleId}}">{{$Module->ModuleName}}</option>
					@endforeach
				</select>
				<div class="invalid-feedback">
					Please select Module
				</div>
			</div>
			<div class="col-md-3">
				<label>Record Type <font color="red">*</font></label>			
				<select class="form-control customDropdown" name="RecordType" id="RecordType" required> 
					<option value="">--Select--</option>
					<option value="1">Create</option>
					<option value="2">Update</option>
				</select>
				<div class="invalid-feedback">
					Please select Record Type
				</div>
			</div>
			<div class="col-md-3">
				<label>Description </label>
				<textarea type="text" name="Description" id="Description" class="form-control" rows="1" /></textarea>
			</div>

		</div>


		<div class="form-group row" style="justify-content: center;">
			<div class="col-md-3">
				<button class="btn btn-primary" id="SaveBtn" type="button" style="margin-top:35px" onclick="SaveForm()" >Save</button>
			</div>
		</div>
	</form>
</div>

<br>
<div id="ConfigList"></div>

@endSection

<script>

	document.addEventListener('DOMContentLoaded',()=>{
		setTimeout(LoadConfigList,200);
	})

	SaveForm=()=>{
		console.clear();
		var form=document.getElementById('UpdateCreateForm');
		formData=new FormData(form);

		var invalid = $('#UpdateCreateForm .invalid-feedback');

		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			invalid.css('display', 'block');

			return;
		} else {
			invalid.css('display', 'none');
			form.classList.add('was-validated');
		}

		$.ajax({
			type:"post",
			url:("{{url('WorkFlow-UpdateCreate-Save')}}"),
			data:formData,
			processData:false,
			cache:false,
			contentType:false,
			beforeSend:()=>{
				$('#SaveBtn').prop('disabled',true)
			},
			success:response=>{
				console.log(response);
			}
		})
	}

	LoadConfigList=()=>{
		console.clear();
		$.ajax({
			type:"post",
			url:("{{url('WorkFlow-UpdateCreate-List')}}"),
			beforeSend:()=>{
				`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`
			},
			success:response=>{
				$('#ConfigList').html(response);
			}
		})
	}

</script>