@extends('layouts.header')
@section('content')
<br>
<!-- <div class="row"> -->
		<!-- <div class="page-header">
			<nav class="breadcrumb-one" aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><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-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="breadcrumb-item"><a href="javascript:void(0);">{{$ModuleName}}</a></li>
					<li class="breadcrumb-item active" aria-current="page"><span>{{$page['title']}}</span></li>
				</ol>
			</nav>
		</div> -->
		<div class="page-header">
			<div class="breadcrumb-four">
				<ul class="breadcrumb">
					<li class="breadcrumb-item"><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><a href="{{url('ViewInboundEmails')}}"><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-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>{{$ModuleName}}</a></li>
					<!-- <li><a href="{{url('Create-DropDownList')}}"><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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg><span>Create DropDownList</span></a></li> -->
					<li class="active"><a href="{{url('Create-InboundEmail')}}" title="{{$page['title']}}"><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-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg><span>{{$page['title']}}</span></a></li>
				</ul>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-lg-12 col-md-12 layout-spacing">
				<form action="{{url('/Save-InboundEmail')}}" method="POST" >
					@csrf
					<div class="statbox widget box box-shadow">
						<div class="row">
							<div class="col-lg-12 layout-spacing">
								<!-- from here -->

								<div class="row">
									<div class="col-md-4">
										<div class="form-group">
											<label class="new-control new-checkbox checkbox-outline-primary  m-auto" style="padding-left: 0px">
												<input type="checkbox" class="new-control-input child-chk select-customers-info" name = "AutoReponseWithBody" id="AutoReponseWithBody" value="1">
											</label>
											<label class="text-primary">Auto response with mail body</label>
											
										</div>
									</div>
								</div>

								<div class="row">
									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Name</label>
											<input type="text" name="Name" id="Name" class="form-control" required="required">
										</div>
									</div>

									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Email Address</label>
											<input type="email" name="EmailId" id="EmailId" class="form-control" required="required">
										</div>
									</div>

									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Host</label>
											<input type="text" name="Host" id="Host" class="form-control" required="required">
										</div>
									</div>
									
									

								</div>
								<div class="row">
									
									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Email Password</label>
											<input type="password" name="EmailPassword" id="EmailPassword" class="form-control" required="required">
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">SMTP Port</label>
											<input type="text" name="EmailPort" id="EmailPort" class="form-control" required="">
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Protocol</label>
											<select name="Protocol" id="Protocol" required="required" class="form-control">
												<option value="">-- None --</option>
												<option value="imap">imap</option>
											</select>
										</div>
									</div>
									
								</div>
								<div class="row">
									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Mailbox Type</label>
											<select name="MailboxType" id="MailboxType" class="form-control">
												<option value="Group">Group</option>
												<option value="User">User</option>
											</select>
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">ValidateCert</label>
											<select name="ValidateCert" id="ValidateCert" class="form-control">
												<option value="true">true</option>
												<option value="false">false</option>
											</select>
										</div>
									</div>
									
									<!-- <div class="col-md-4">
										<div class="form-group">
											<label class="text-primary">Distribution Method</label><br/>
											<select id="DistributionMethod" name="DistributionMethod" class="form-control" >
												<option value="AOPDefault">Use AOP Default</option>
												<option  value="singleUser">Single User</option>
												<option value="roundRobin">Round-Robin</option>
												<option value="leastBusy">Least-Busy</option>
												<option value="random">Random</option></select>
											</div>
										</div> -->
										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Case Macro</label><br/>

												<select id="caseMacro" name="caseMacro" class="form-control" onchange="getCheckDuration()">
													<option value="1">[Ticket No: %1]</option>
													<option  value="2">Same Sender & Subject</option>
												</select>
											</div>
										</div>


									</div>

									<div class="row" id="CheckDurationDivContainer"style="display: none">
										<div class="col-md-4">
											<div class="form-group">
												<div id="CheckDurationDiv"></div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Case Label</label><br/>
												<input type="text" class="form-control" name="CaseLabel" id="CaseLabel" value="Ticket No">
											</div>
										</div>

										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Automail Template</label><br/>
												<select class="form-control" name="AutomailTemplate" id="AutomailTemplate">
													<option value="">--Select Template--</option>
													@foreach($EmailTemplates as $EmailTemplate)
													<option value="{{$EmailTemplate->EmailTemplatesId}}">{{$EmailTemplate->Name}}</option>
													@endforeach
												</select>
											</div>
										</div>

										<div class="col-md-4">
											<label class="text-primary">Automail To</label><br/>
											<select class="form-control" name="AutoMailTo" id="AutoMailTo">
												<option value="1">Sender</option>
												<option value="2">All</option>
											</select>
										</div>

									</div>

									<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Use SSL</label><br/>
												<label class="new-control new-checkbox checkbox-outline-primary  m-auto" style="padding-left: 0px">
													<input type="checkbox" class="new-control-input child-chk select-customers-info" name = "Encryption" id="Encryption" checked="checked" value="ssl">
													<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
												</label>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Import Mails</label><br/>
												<label class="new-control new-checkbox checkbox-outline-primary  m-auto" style="padding-left: 0px">
													<input type="checkbox" class="new-control-input child-chk select-customers-info" name = "ImportMails" id="ImportMails"  value="1">
													<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
												</label>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Create Case</label><br/>
												<label class="new-control new-checkbox checkbox-outline-primary  m-auto" style="padding-left: 0px">
													<input type="checkbox" class="new-control-input child-chk select-customers-info" name = "CreateCase" id="CreateCase"  value="1" onchange="ConfigDistributionType()">
													<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
												</label>
											</div>
										</div>
									</div>

									<!--Ticket Assignment starts----->
									<div class="row" id="ticketAssignmentsDiv" style="visibility: hidden">
										<div class="col-md-4">
											<label class="text-primary">DistributionMethod <font color="red">*</font></label>
											<select class="form-control" name="DistributionMethod" id="DistributionMethod" onchange="GetAssignmentOptions(this.value)">
												<option value="2">Single User</option>
												<option value="1">Round Robin - All Users</option>
												<option value="3">Round Robin - Role Based </option>
												<option value="4">Round Robin - Team Based</option>
												<option value="5">ReadyAgents - Least Busy</option>
												<option value="6">Round Robin - ReadyAgents</option>
												<option value="7">Round Robin - User Mapping</option>
												<option value="8">ReadyAgents - Least Busy Active User with Account & Team Linking</option>
												<option value="9">ReadyAgents - Least Busy Active User with Account & Team Linking & Shift Timings </option>
												<option value="10">ReadyAgents - Least Busy Active User with Account & Team Linking & Shift Timings with LIMIT</option>
												<option value="11">Round Robin - ReadyAgents - Role Based</option>
											</select>
										</div>

										<div class="col-md-4" id="assignmentOptionsDiv">
											<label class="text-primary">Select User <font color="red">*</font></label>
											<select class="form-control" name="DistributionOptions" id="DistributionOptions">
												@foreach($AssignedToList as $al)
												<option value="{{$al['RefId']}}" >{{$al['name']}}</option>
												@endforeach
											</select>

										</div>	

										<div class="col-md-4" id="assignmentOptionsDiv2">
										</div>

									</div>
									<!--Ticket Assignment ends----->

									<br>

									<div class="row">

										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Is Microsoft Office Account?</label><br/>
												<select class="form-control" id="OfficeAccount" name="OfficeAccount">
													<option value="0">No</option>
													<option value="1">Yes</option>
												</select>
											</div>
										</div>

										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Directory (tenant) ID</label><br/>
												<input class="form-control" id="TenantID" name="TenantID">
											</div>
										</div>

										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Application (client) ID</label><br/>
												<input class="form-control" id="ClientID" name="ClientID">
											</div>
										</div>


										<div class="col-md-4">
											<div class="form-group">
												<label class="text-primary">Client Secret (Value)</label><br/>
												<input class="form-control" id="ClientSecret" name="ClientSecret">
											</div>
										</div>


									</div>

									<br>
									<div class="row">
										<div class="col-xs-12 col-sm-12 col-md-12 text-center">
											<button type="submit" class="btn btn-primary">Submit</button>
										</div>
									</div>
									<!-- till here -->
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- </div> -->
			@endsection

			<script>
				getCheckDuration=()=>{
					Macro=$('#caseMacro :selected').val();
					durationdiv=``;
					if(Macro=="2")
					{
						durationdiv+=`
						<label class="text-primary">Duration in minutes</label><br/>
						<input type="number" min=1 class="form-control" id="Duration" name="Duration" value="1" required>
						`;
						$('#CheckDurationDivContainer').css('display','block');
						$('#CheckDurationDiv').html(durationdiv);
					}
					else
					{
						$('#CheckDurationDivContainer').css('display','none');

						$('#CheckDurationDiv').html('');
					}
				}

				ConfigDistributionType=()=>{
					if($('#CreateCase').is(" :checked"))
					{
						$('#ticketAssignmentsDiv').css('visibility','visible');
					}
					else
					{
						$('#ticketAssignmentsDiv').css('visibility','hidden');
						$('#assignmentOptionsDiv').html('');

					}
				}
				GetAssignmentOptions=async (assignmentType)=>{
					// console.log('assignmentType',assignmentType);
					switch(assignmentType)
					{
					case '1':
						$('#assignmentOptionsDiv').css('visibility','hidden');
						$('#assignmentOptionsDiv2').css('visibility','hidden');
						break;
					case '2':
						usersList=await GetUsersList();
						$('#assignmentOptionsDiv').html(usersList);
						$('#assignmentOptionsDiv2').css('visibility','hidden');
						$('#assignmentOptionsDiv').css('visibility','visible');
						break;
					case '3':
						rolesList=await GetRoles();
						$('#assignmentOptionsDiv').html(rolesList);
						$('#assignmentOptionsDiv2').css('visibility','hidden');
						$('#assignmentOptionsDiv').css('visibility','visible');

						break;
					case '4':
						rolesList=await GetRoles(4);
						$('#assignmentOptionsDiv2').html(rolesList);
						$('#assignmentOptionsDiv2').css('visibility','visible');

						teamsList=await GetTeams();
						$('#assignmentOptionsDiv').html(teamsList);
						$('#assignmentOptionsDiv').css('visibility','visible');
						
						break;
					default:
						$('#assignmentOptionsDiv').css('visibility','hidden');
						$('#assignmentOptionsDiv2').css('visibility','hidden');

						break;
					}
				}

				GetUsersList=()=>{
					return new Promise((resolve,reject)=>{

						usersList=``;
						$.ajax({
							type:"post",
							url:"{{url('GetUsersList')}}",
							beforeSend:function (){},
							success:response=>{
								res=JSON.parse(response);
								
								Object.values(res).forEach(val => {
									usersList+=`<option value="${val.RefId}"> ${val.name} </option>`
								});

								userSelect=`
								<label class="text-primary">Select User <font color="red">*</font></label>
								<select class="form-control" name="DistributionOptions" id="name="DistributionOptions">
								${usersList}
								</select>
								`
								resolve(userSelect);
							},

						})

					})
				}

				GetRoles=(id)=>{
					return new Promise((resolve,reject)=>{

						$.ajax({
							type:"post",
							url:"{{url('GetRoles')}}",
							beforeSend:function (){},
							success:response=>{
								res=JSON.parse(response);

								if(id==4)
								{
									rolesList=`<option value="">--Select--</option>`;
									labelName="Select Role";
									name="DistributionOptions2[]";
									multiple="multiple";
								}
								else
								{
									rolesList=``;
									labelName="Select Role";
									name="DistributionOptions";
									multiple="";

								}

								for (const [key, value] of Object.entries(res)) 
								{
								// console.log(`${key}: ${value}`);
									rolesList+=`<option value="${key}"> ${value} </option>`
								}

								RoleSelect=`
								<label class="text-primary">${labelName} <font color="red">*</font></label>
								<select class="form-control" ${multiple} name="${name}" id="${name}">
								${rolesList}
								</select>
								`;
								resolve(RoleSelect);
							},

						})
					});
				}

				GetTeams=()=>{
					return new Promise((resolve,reject)=>{
						teamsList=``;
						$.ajax({
							type:"post",
							url:"{{url('GetTeams')}}",
							beforeSend:function (){},
							success:response=>{
								console.log(response);
								res=JSON.parse(response);
								for (const [key, value] of Object.entries(res)) 
								{
									console.log(`${key}: ${value}`);
									teamsList+=`<option value="${key}"> ${value} </option>`
								}

								TeamSelect=`
								<label class="text-primary">Select Team <font color="red">*</font></label>
								<select class="form-control" name="DistributionOptions" id="name="DistributionOptions">
								${teamsList}
								</select>
								`;
								resolve(TeamSelect);
							},

						})
					});
				}
			</script>