@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
	<br />
	<div class="page-header">
		<div class="breadcrumb-four">
			<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><span>Create Report</span></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('ListWhatsAppConfiguration')}}">List WhatsApp Configuration</a></li>
				<li><a href="{{url('WhatsAppAutoResponseConfigure')}}">Auto Response Configuration</a></li>
				<li class="active"><a href="{{url('WhatsAppConfiguration')}}">Create WhatsApp Configuration</a></li>
			</ul>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-lg-12 col-md-12 layout-spacing">
			<div class="widget-content widget-content-area" height="800">
			<form id="WhatsAppConfig" id="WhatsAppConfig">
				<input type="hidden" name="PrimaryId" id="PrimaryId" value="{{$UUID}}">
				<div class="row">
					<div class="col-md-4">
						<font color="blue">Name</font><font color="red">*</font>
						<br>
						<input class="form-control" type="text" id="FromMobileNumberName" name="FromMobileNumberName" >
					</div>
					<div class="col-md-4">
						<font color="blue">From PhoneNumber ID</font><font color="red">*</font>
						<br>
						<input class="form-control" type="text" id="FromPhoneno" name="FromPhoneno" >
					</div>
					<div class="col-md-4">
						<font color="blue">Parameter Auth Key</font><font color="red">*</font><br>
						<textarea id="ParameterAuthkey" name="ParameterAuthkey" class="form-control"></textarea>
					</div> 
				</div><br>
				<div class="row">
					<div class="col-md-4">
						<font color="blue">Create Ticket of WhatsApp Intergation</font>
						<br>
						<input class="form-check-input" type="checkbox" id="CreateTicket" name="CreateTicket" >
					</div>
					<div class="col-md-4">
						<font color="blue">Auto Response</font><br>
						<input class="form-check-input" type="checkbox" id="AutoResponse" name="AutoResponse" >
					</div> 
					<div class="col-md-4">
						<font color="blue">Auto Response Template</font><br>
						<select class="form-control" id="AutoResponseTemplate" name="AutoResponseTemplate">
							<option value="">--select--</option>
							@foreach($GetConfiguredAutoRespone as $EachAutoResponse)
								<option value="{{$EachAutoResponse->WhatsAppAutoResponseConfigId}}">{{$EachAutoResponse->Name}}</option>
							@endforeach
						</select>
					</div>
				</div><br>
				
				<div class="row">
					<div class="col-md-12" align="center">
						<button type="button" class="btn btn-primary mb-2 mr-2" onclick="CreateWhatsAppConfiguration()"> Configure </button>
					</div>
				</div><br><br>
				</form>
				<div class="row">
					<div class="col-md-4">
						<font color="blue">Select Module WhatsApp Intergation </font>
						<select class="form-control" name="Module" id="Module"  onchange="ModuleConfigureonWhatsApp(this.value)">
							<option value=''>--select--</option>
							@foreach($ModulesArray as $ModuleId=>$ModuleName)
								<option value="{{$ModuleId}}">{{$ModuleName}}</option>
							@endforeach
						</select>
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12 col-md-12 layout-spacing">
			<div class="widget-content widget-content-area" height="800">
				<div id="DisplayWhatsAppModule"></div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="FieldConfiguration" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Module Fields Configuration</h5>
				</div>
				<div class="modal-body">
					<div id="displayModuleFields"></div>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
				</div>
			</div>
		</div>
	</div>


@endsection