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

@php
echo "<pre>";
	//print_r($panels);
echo "</pre>";
@endphp
<!--  BEGIN CONTENT AREA  -->
<br />
<!-- <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);">{{$page['folder']}}</a></li>
			<li class="breadcrumb-item active" aria-current="page"><span>{{$page['title']}}</span></li>
		</ol>
	</nav>
</div> -->
<style>
	/*.select2-container {z-index: 10000;}*/
	/*.select2-container {
		z-index: 10000;
		}*/
	</style>
	<div class="page-header">
		<div class="breadcrumb-four">
			<ol class="breadcrumb">
				<ul class="breadcrumb">
					<li><a href="{{url('dashboard')}}" title="Go to Home Page!"><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('Admin-Panel')}}" class="active" 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('Configure-ListView')}}" class="active" title="Configure-ListView">
							<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-git-pull-request"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M13 6h3a2 2 0 0 1 2 2v7"></path><line x1="6" y1="9" x2="6" y2="21"></line></svg>
							{{$page['folder']}}
						</a>
					</li>
					<li class="active">
						<a href="{{url('DemographyConfig')}}" class="active" title="Create View | {{$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-command"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>
							{{$page['title']}}
						</a>
					</li>
				</ul>
			</ol>
		</div>
	</div>
	<br>
	<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>Demography Configuration</h4>
						</div>          
					</div>
				</div>
			</div> --> <!-- statbox widget box box-shadow -->
			<div class="widget-content widget-content-area" height="800">
				<!-- -->
				<div class="form-group">

					<div class="col-md-4">
						<h6>Module</h6>
						<select class="form-control" name="module_name" id="module_name">
							<option value="" selected="">-- Select   --</option>
							@foreach($ModulesArray as $ModuleKey=>$ModuleValue)
							<option value="{{$ModuleKey}}">{{$ModuleValue}}</option>
							@endforeach
						</select>
					</div>
				</div>
				<!-- -->

				<div class="col-md-4">
					<!-- <label for="Module" class="text-primary">Module</label> -->
					<button type="button" id="panel-btn"class="btn btn-primary"onclick="showPanelModal()">Add Panel</button>
				</div>
				
				<div class="col-md-12" name="ConfigFields" id="ConfigFields">
				</div>
				<div class="col-md-12" name="MassUpdateFields" id="MassUpdateFields">
				</div>
				<br />

				<div class="col-md-12">
					<center>
						<button id="addNewFieldBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#AddFieldModal" style="display: none">Add New Field</button>
					</center>
				</div>

				
			</div>
		</div>

	</div>
	<!--  END CONTENT AREA  -->
	@endsection
	<!-- modal starts here-->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Panels</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<svg aria-hidden="true" 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">
					<div id="iconsAccordion" class="accordion-icons">
						<div class="card">
							<div class="card-header" id="...">
								<section class="mb-0 mt-0">
									<div id="AddPanelSection" role="menu" class="" data-toggle="collapse" data-target="#iconAccordionOne" aria-expanded="true" aria-controls="iconAccordionOne">
										<div class="accordion-icon"><svg> ... </svg></div>
										Add Panel  <div class="icons"><svg> ... </svg></div>
									</div>
								</section>
							</div>

							<div id="iconAccordionOne" class="collapse" aria-labelledby="..." data-parent="#iconsAccordion">
								<div class="card-body">

									<form name="panelform" id="panelform" class="panelform">
										<input type="hidden" id="panelid" name="panelid">
										<div class="form-group mb-4">
											<label for="panelname">Panel Name</label>
											<input type="text" class="form-control" id="panelname" name="panelname" placeholder="Panel Name">
										</div>
										<div class="form-group mb-4">
											<label for="modules">Panel Type</label>
											<br/>
											<input type="radio"  name="panelType" value="0"><label for="Accordian">Accordian</label>
											<input type="radio"  name="panelType" value="1"><label for="Tab">Tab</label>
										</div>
										<div class="form-group mb-4">
											<label for="modules">Modules</label><br/>
											@php
											/*
											<select class="form-control" id="modules" name="modules">
												<option value="">--Select--</option>
												@foreach ($ModulesArray as $ModuleKey=>$ModuleValue)
												<option value="{{$ModuleKey}}">{{$ModuleValue}}</option>
												@endforeach
											</select>
											*/
											$radiocount=0;
											@endphp
											@foreach ($ModulesArray as $ModuleKey=>$ModuleValue)
											@if($radiocount == 3)
											<br/>
											@php
											$radiocount=0;
											@endphp
											@endif
											@php
											$radiocount++;
											@endphp
											&nbsp;<input type="radio" id="modules" name="modules" value="{{$ModuleKey}}"><label for="{{$ModuleValue}}">{{$ModuleValue}}</label>
											@endforeach
										</div>
										<div class="form-group mb-4">
											<label for="sortorder">SortOrder</label>
											<input type="number" class="form-control" id="sortorder" name="sortorder"placeholder="Sort Order" min="1">
										</div>
									</form>

								</div>
							</div>
						</div>
					</div>
					<div id="panel-list-accordian" class="accordion-icons">
						<div class="card">
							<div class="card-header" id="...">
								<section class="mb-0 mt-0">
									<div id="panel-menu"role="menu" class="" data-toggle="collapse" data-target="#panel-list-One" aria-expanded="true" aria-controls="iconAccordionOne">
										<div class="accordion-icon"><svg> ... </svg></div>
										List Of Panels  <div class="icons"><svg> ... </svg></div>
									</div>

								</section>
							</div>
							<div id="panelListTable">

							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
					<button type="button" id="savePanelButton" onclick="savePanel()"class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
	<!-- modal ends here-->




	<!-- Modal Add Field starts-->
	<div class="modal fade" id="AddFieldModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Add New Field</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-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
					</button>
				</div>
				<div class="modal-body">
					<form name="AddFieldForm" id="AddFieldForm">

						<div class="form-group row">

							<div class="col-md-6">
								<label>Column Name</label>
								<input type="text" maxlength="20" class="form-control few-options" placeholder="Column Name" name="ColumnName" id="ColumnName" />
							</div>

							<div class="col-md-6">
								<label>Label Name</label>
								<input type="text" class="form-control" placeholder="Label Name" name="LabelName" id="LabelName" />
							</div>
						</div>	

						<div class="form-group row">

							<div class="col-md-6">
								<label>Type</label>
								<select class="form-control" name="displaytype" id="displaytype" onchange="LoadDDNames(this.value)">
									<option value="">Type</option>
									@foreach($fieldtypes as $fieldtype)
									<option value="{{$fieldtype['key']}}">{{$fieldtype['value']}}</option>
									@endforeach
								</select>
							</div>

							<div class="col-md-6">
								<label>Panel</label>
								<select class="form-control" name="panel" id="panel">
									<option value="">Panel</option>
									@foreach($panels as $panel)
									<option value="{{$panel->DisplayPanelId}}">{{$panel->PanelName}}</option>
									@endforeach
								</select>
							</div>
						</div>

						<div class="form-group row">

							<div class="col-md-6">
								<label>Options</label>
								<select class="form-control" name="AddDropDownNameID" id="AddDropDownNameID">
									<option value="">Select List</option>
								</select>
							</div>

							<div class="col-md-6">
								<label>Required</label>
								<select class="form-control" name="SetRequired" id="SetRequired" >
									<option value="1">Yes</option>
									<option value="0">No</option>
								</select>
							</div>

						</div>

						<div class="form-group row">
							<div class="col-md-6">
								<label>Order No</label>
								<input type="number" class="form-control" placeholder="Sort Order" name="SortOrder" id="SortOrder" min="1" />
							</div>

							<div class="col-md-6">
								<label>Main Table</label>
								<div class="n-chk">
									<label class="new-control new-checkbox checkbox-info" style="padding-left: 0px">
										<input type="checkbox" class="new-control-input" name="TableType" id="TableType" value="1">
										<span class="new-control-indicator"></span>Yes/No
									</label>
								</div>
							</div>

						</div>

					</form>

				</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" name="AddField" id="AddField" onclick="AddNewfield()">Add</button>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal Add Field Ends-->