@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
<br>
<div class="page-header">

	<div class="breadcrumb-four">
		<ol class="breadcrumb">
			<ul class="breadcrumb">
				<li><a href="{{url('dashboard')}}"><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 class="active">
					<a href="javascript:void(0);" >
						<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-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>WorkFlow</a>
					</li>
					<li>
						<a href="javascript:void(0);" title="Create WorkFlow">
							<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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>Create WorkFlow</a>
						</li>
					</ul>
				</ol>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12 col-md-12 layout-spacing">
				<div class="statbox widget box box-shadow">
					<div class="widget-header">
						<div class="row">
							<div class="col-xl-12 col-md-12 col-sm-12 col-12">
								<h4>Create WorkFlow....</h4>
							</div>          
						</div>
					</div>
					<form action="{{url('/SaveWorkFlow')}}" method="POST" >
						@csrf
						<div class="widget-content widget-content-area">
							<div id="circle-basic" class="">
								<h3>WorkFlow</h3>
								<section>
									<div class="row">
										<div class="col-xs-12 col-sm-12 col-md-12">
											<div class="form-group">
												<strong>WorkFlow Name:</strong><font color="red">&nbsp;*</font>
												<input type="text" name="WorkFlowName" id="WorkFlowName" class="form-control" placeholder="WorkFlow Name" maxlength="70" required="required">
											</div>
										</div>
										<div class="col-xs-12 col-sm-12 col-md-12">
											<div class="form-group">
												<strong>Run:</strong><font color="red">&nbsp;*</font>
												<select name="WorkFlowRun" id="WorkFlowRun" class="form-control">
													<option value="">-- Select Run --</option>
													@foreach($WFRunDropdown as $key=>$value)
													<option value="{{$key}}">{{$value}}</option>
													@endforeach
												</select>
											</div>
										</div>

										<div class="col-xs-12 col-sm-12 col-md-12">
											<div class="form-group">
												<strong>Multiple Run:</strong><font color="red">&nbsp;*</font>
												<select name="MultipleRun" id="MultipleRun" class="form-control">
													<option value="">-- Select--</option>
													<option value="1">Yes</option>
													<option value="0">No</option>
												</select>
											</div>
										</div>

										<div class="col-xs-12 col-sm-12 col-md-12">
											<div class="form-group">
												<strong>Description:</strong><font color="red">&nbsp;*</font>
												<textarea name="WorkFlowDescription" id="WorkFlowDescription" class="form-control" placeholder="WorkFlow Description" required="required"></textarea>
											</div>
										</div>
										<div class="col-xs-12 col-sm-12 col-md-12">
											<div class="form-group">
												<strong>Related Module:</strong><font color="red">&nbsp;*</font>
												<!-- <select name="ModuleId" id="ModuleId" class="form-control" onChange="ModuleChangeAction()"> -->
													<select name="ModuleId" id="ModuleId" class="form-control">
														<option value="">-- Select Module --</option>
														@foreach($Modules as $Module)
														<option value="{{$Module->ModuleId}}">{{$Module->ModuleName}}</option>
														@endforeach
													</select>
												</div>
											</div>
											<input type="hidden" name="WorkFlowId" id="WorkFlowId" value="" class="form-control" />
											<div class="col-xs-12 col-sm-12 col-md-12 text-center">
												<b>Please Note : Once Confirmed you will not be able to change the WorkFlow Module</b>
											</div>
											<div class="col-xs-12 col-sm-12 col-md-12 text-center">
												<button type="button" class="btn btn-primary" name="WorkflowBasicBtn" id="WorkflowBasicBtn" onclick="SaveBasicDetails()">Confirm</button>
											</div>
										</div>
									</section>
									<h3>Conditions</h3>
									<section>
										<div class="col-xs-12 col-sm-12 col-md-12">
											<div class="form-group">
												<div class="row">
													<div class="col-xs-12 col-sm-12 col-md-12" name="AddConditionMsgDiv" id="AddConditionMsgDiv">
														<b>Please Select the Module and confirm to add Condition</b>
													</div>
													<div class="col-xs-12 col-sm-12 col-md-12" name="AddConditionbtnDiv" id="AddConditionbtnDiv" style="display:none">
														<input class="btn btn-primary" type="button" name="AddConditionbtn" id="AddConditionbtn" value="Add Condition" onClick="ConditionAddGroup()" />
													</div>
													<div class="col-xs-12 col-sm-12 col-md-12" name="Group1div" id="Group1div">
													</div>
													<div class="col-xs-12 col-sm-12 col-md-12" name="Group1div" id="Group1div">
														<div class="form-group" name="AddNewConditionGrpDiv" id="AddNewConditionGrpDiv" style="display:none;">
															<strong class="text-primary">Operator</strong>
															<select name="Operator" id="Operator" class="form-control" onChange="ModuleChangeAction()">
																<option value="">-- Select AND/OR --</option>
																<option value="AND">AND</option>
																<option value="OR">OR</option>
															</select>
															<input class="btn btn-primary" type="button" name="AddNewConditionGrp" id="AddNewConditionGrp" value="Add New Condition Group" onClick="AddGroupCondition()" />
														</div>
													</div>
													<div class="loader dual-loader mx-auto" name="LoadingDivCG" id="LoadingDivCG" style="display:none"></div>
												</div>

											</div>
										</div>
									</section>
									<h3>Actions</h3>
									<section>
										<div class="col-xs-12 col-sm-12 col-md-12" name="AddActionDiv" id="AddActionDiv">
											<input class="btn btn-primary" type="button" name="AddAction" id="AddAction" value="Add Action" onClick="ShowActionOption()"/>
										</div>
										<div id="ActionSection" name="ActionSection"></div>
									</section>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>



			<!-- Modal -->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<input type="hidden" id="NotificationUniqId" value="">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Notifications</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
							</button>
						</div>
						<div class="modal-body">
							<input type="hidden" id="notificationUniqId" name="notificationUniqId" value="">
							<div class="form-group row">
								
								<div class="col-md-4" style="float: left">
									<div class="n-chk">
										<label class="new-control new-checkbox checkbox-info" style="padding-left: 0px">
											<input type="checkbox" class="new-control-input"  onchange="GetNotificationTypeFields('Email')" id="EmailFields" value="12">
											<span class="new-control-indicator"></span>Email
										</label>
									</div>
								</div>

								<div class="col-md-12">
									<div id="EmailFieldsDiv"></div>
								</div>

							</div>

							<!-- <div class="form-group">
								<div id="NotificationTypeDiv">
								</div>
							</div> -->

							<div class="form-group row">
								<div class="col-md-4" style="float: left">
									<div class="n-chk">
										<label class="new-control new-checkbox checkbox-info" style="padding-left: 0px">
											<input type="checkbox" class="new-control-input"  onchange="GetNotificationTypeFields('SMS')" id="SMSFields" value="11">
											<span class="new-control-indicator"></span>SMS
										</label>
									</div>
								</div>

								<div class="col-md-12">
									<div id="SMSFieldsDiv"></div>
								</div>

							</div>

							<!-- <div class="form-group">
								<div id="NotificationTypeDiv">
								</div>
							</div> -->


						</div>
						<div class="modal-footer">
							<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
							<button type="button" class="btn btn-primary" onclick="SaveNotifications()">Save</button>
						</div>
					</div>
				</div>
			</div>


			@endsection