@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
		<!-- <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="{{url('Create-DropDownName')}}">{{$page['folder']}}</a></li>
					<li class="breadcrumb-item active" aria-current="page"><span>{{$page['title']}}</span></li>
				</ol>
			</nav>
		</div> -->
	<br>
		<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('View-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-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>{{$page['folder']}}</a></li>
					<li><a href="{{url('Create-DropDownName')}}"><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 Drop Down List</span></a></li>
					<li class="active"><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>{{$page['title']}}</span></a></li>
				</ul>
			</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>Drop Down List Configuration</h4>
							</div>          
						</div>
					</div>
					<div class="widget-content widget-content-area">
						<form name="AddDropDownListNameForm" id="AddDropDownListNameForm" method="POST" >
							@csrf
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<strong>Drop Down Names:</strong>
										<select class="form-control customDropdown" name="DropDownNames" id="DropDownNames" onchange="LoadDropDownLists(this.value)">
											<option value="">--Select DisplayType--</option>
											@foreach($DropDownNamesLists as $fieldtype)
											<option value="{{$fieldtype->DropDownNameId}}"> {{$fieldtype->DropDownNames}} </option>
											@endforeach
										</select>
									</div>
								</div>
							</div>
							<div id="DropDownNameIdreff">
							</div>
							
							<div class="row">
									<div class="col-md-6">
											<div class="form-group">
												<strong>Drop Down List Name:</strong>
												<input type="text" name="DropDownListName" id="DropDownListName" class="form-control" placeholder="Drop Down List Name">
											</div>
									</div>
							</div>
							
							<div class="row">
									<div class="col-md-6">
											<div class="form-group">
												<strong>Sort Order:</strong>
												<input type="text" name="SortOrder" id="SortOrder" min="1" class="form-control" placeholder="SortOrder">
											</div>
									</div>
							</div>

							<div class="row">
									<div class="col-md-6">
											<div class="form-group">
												<strong>Color :</strong>

												<span style="padding: 8px 17px;background: #888ea8;border-radius: 100%;color: #888ea8;" onclick="pickColor('')" id="colordisp"></span>

												<input type="color" id="favcolor" name="favcolor" value="#ff0000" style="display:none" onchange="updateColor('')">
											</div>
									</div>
							</div>

							<div class="row">
								<div class="col-md-12 text-center">
									<div class="form-group">
										<button type="button" onclick='AddNewDropDownList()' class="btn btn-primary">Submit</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div id='DropDownNameIdView'>
							
					</div>
				</div>
			</div>
		</div>
        <!--  END CONTENT AREA  -->
@endsection