@extends('user.header')
@section('userContent')
<div class="content-wrapper" style="min-height: 887px;">
	<div class="container-full">
		<!-- Content Header (Page header) -->
		<!-- Main content -->
		<section class="content">
			@include('extensions.alerts')
			<!-- vertical wizard -->
			<div class="box">
				<div class="box-header with-border">
					<h4 class="box-title">Dropdown values</h4>
				</div>
				<div class="box-body">
					<!-- Tab panes -->
					<div class="tab-content">
						<div class="tab-pane active" id="qualification" role="tabpanel">
							<div class="col-sm-12">
								<div class="row">
									{{-- <h5 class="mb-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-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Other Training and Certification <a href="" class="waves-effect waves-light btn btn-info mb-5 pull-right"><i class="fa fa-plus"></i></a></h5> --}}
									<div class="clearfix"></div>
									<div class="col-12">
										<div class="table-responsive-sm">
											<table class="table mb-0">
												<thead class="table-light">
													<tr>
														<th scope="col">Dropdown</th>
														<th scope="col">Dropdown Value Name</th>
														<th scope="col">Display Status</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<form method="post" action="{{route('admin.dropdown-value.store')}}" id="dropdown-form">
															@csrf
															<td>
																<select class="form-select" name="dropdown_id" required onchange="filterMenus(this)">
																	<option value="">Select</option>
																	@foreach($dropdowns as $dropdown)
																	<option value="{{$dropdown->id}}">{{$dropdown->dropdown_name}}</option>
																	@endforeach
																</select>
															</td>
															<td><textarea name="dropdown_values" class="form-control" required placeholder="Ex: value1, value2"></textarea></td>
															<td>
																<select class="form-select" name="displayflag" required>
																	<option value="1" selected="">Enable</option>
																	<option value="0">Disable</option>
																</select>
															</td>
														</form>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div></div>
								<div class="row mt-20">
									<hr>
									<div class="col-md-12">
										<div class="clearfix text-right">
											<button type="submit" form="dropdown-form" class="waves-effect waves-light btn btn-dark mb-5"><i class="fa fa-check"></i> Save</button>
											{{-- <button type="button" class="waves-effect waves-light btn btn-dark mb-5"><i class="fa fa-arrow-right"></i> Next</button> --}}
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="table-responsive">
											<table id="example2" class="table table-lg invoice-archive tr-odd_clr">
												<thead>
													<tr>
														<th width="2%">#</th>
														<th scope="col">DROPDOWN</th>
														<th scope="col">DROPDOWN VALUE NAME</th>
														<th width="10%">SORT NO.</th>
														<th width="10%">STATUS</th>
														<th width="10%">ACTION</th>
													</tr>
												</thead>
												<tbody>
													<form method="post" id="sort-form" action="{{route('admin.dropdown-value.update', 1)}}">
														@csrf
														@method('PATCH')
														<input type="hidden" name="type" value="sort-update">
														@foreach($dropdownValues as $key => $dropdown)
														<input type="hidden" name="id[]" value="{{$dropdown->id}}">
														<tr class="result" data-mid="{{$dropdown->dropdown_id}}">
															<td align="left">{{++$key}}</td>
															<td align="left">{{$dropdown->dropdown_name}}</td>
															<td align="left">{{$dropdown->dropdown_value}}</td>
															<td align="left"><input type="number" min="1" onKeyPress="if(this.value.length===8) return false;" name="sortid[]" value="{{$dropdown->sortid}}" class="form-control " /></td>
															<td align="left">{{($dropdown->displayflag === 1) ? 'Enable' : 'Disable' }}</td>
															<td>
																<button data-id="{{$dropdown->id}}" data-dropdown-value="{{$dropdown->dropdown_value}}" data-dropdown-id="{{$dropdown->dropdown_id}}" data-dropdown-status="{{$dropdown->displayflag}}" data-update-url="{{route('admin.dropdown-value.update', $dropdown->id)}}" type="button" data-bs-toggle="modal" data-bs-target="#modal-default" class="waves-effect waves-light btn btn-default btn-flat mb-5" style="width:100%;font-size:12px;background:#649464 !important;color:#fff!important" onclick="updateModalInfo(this)">Edit</button>
																<button type="button" data-destroy-url="{{route('admin.dropdown-value.destroy', $dropdown->id)}}" data-bs-toggle="modal" data-bs-target="#modal-delete" class="waves-effect waves-light btn btn-danger btn-flat mb-5" style="width:100%;margin: 2px 0;font-size:12px" onclick="destroyUrlUpdate(this)">Delete</button>
															</td>
														</tr>
														@endforeach
														<tr>
															<td align="left"></td>
															<td align="left"></td>
															<td align="left"></td>
															<td align="center"><button class="btn btn-sm btn-primary text-nowrap" form="sort-form">Update Sort No.</button></td>
															<td align="left"></td>
															<td></td>
														</tr>
													</form>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /.box -->
				</div></section>
				<!-- /.content -->
			</div>
		</div>
		<div class="modal fade" id="modal-default" aria-modal="true" role="dialog">
			<div class="modal-dialog " role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">Edit Dropdown</h4>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<form method="post" id="dropdown-info-form">
							@csrf
							@method('PATCH')
							<input type="hidden" name="type" value="normal-update">
							<div class="form-group">
								<select class="form-select drop-id" name="dropdown_id" required>
									<option value="">Select</option>
									@foreach($dropdowns as $dropdown)
									<option value="{{$dropdown->id}}">{{$dropdown->dropdown_name}}</option>
									@endforeach
								</select>
							</div>
							<div class="form-group">
								<input maxlength="70" type="text" name="dropdown_value" class="form-control drop-value" required placeholder="Dropdown value">
							</div>
							<div class="form-group">
								<select class="form-select drop-displayflag" name="displayflag" required>
									<option value="1" >Enable</option>
									<option value="0">Disable</option>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
						<button type="submit" form="dropdown-info-form" class="btn btn-primary float-end">Save changes</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<div class="modal fade" id="modal-delete" aria-modal="true" role="dialog">
			<div class="modal-dialog modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row">
								<div class="col-md-12">
									<div class="row text-center">
										<div class="col-12 text-center my-2 px-1">
											<i data-feather="trash-2" class="text-dark mb-1"></i>
											<h5 class="text-dark font-weight-bolder ">Are you sure you want to delete this dropdown value?</h5>
											<p class="text-dark ">This action cannot be reversed!</p>
										</div>
									</div>
									<form method="post"  id="dropdown-delete-form">
										<div class="row mx-0">
											@csrf
											@method('DELETE')
											<div class="col-6">
												<div class="d-grid gap-1">
													<button type="submit" class="btn btn-block btn-dark">Delete</button>
												</div>
											</div>
											<div class="col-6">
												<div class="d-grid gap-1">
													<button type="button" class="btn btn-block btn-secondary" data-bs-dismiss="modal">Cancel</button>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<script type="text/javascript">
			function updateModalInfo(info) {
				document.querySelector('#dropdown-info-form').setAttribute('action', info.dataset.updateUrl);
				document.querySelector('.drop-value').value = info.dataset.dropdownValue;
				document.querySelector('.drop-id').value = info.dataset.dropdownId;
				document.querySelector('.drop-displayflag').value = info.dataset.dropdownStatus;
			}
			function destroyUrlUpdate(info) {
				document.querySelector('#dropdown-delete-form').setAttribute('action', info.dataset.destroyUrl);
			}

			function filterMenus(e) {
				document.querySelectorAll('.result').forEach(element => {
					console.log(element.dataset.mid, e.value);
					if(e.value == 0){
						element.style.display = 'table-row';
					}else{
						if(element.dataset.mid === e.value){
							element.style.display = 'table-row';
						}else{
							element.style.display = 'none';
						}
					}
				})
			}
		</script>

		@endsection