@extends('layouts.app')

@section('center')
				<link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.css" />
				<link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.date.css" />
				<link rel="stylesheet" href="{{asset('assets')}}/vendor/bs-select/bs-select.css" />

<div class="content-wrapper">

<div class="row justify-content-center gutters">
	<div class="col-xl-7 col-lg-7 col-md-9 col-sm-10">
		<form action="{{route('edit-user',$data->id)}}" method="post">
			@csrf
			<div class="card m-0">
				<div class="card-header">
					<div class="card-title">Edit User</div>
				</div>
				<div class="card-body">

					<div class="form-group row gutters">
						<label for="inputName" class="col-sm-3 col-form-label text-right">Name </label>
						<div class="col-sm-4">
							<input type="text" name="name" value="{{ old('name', $data->name) }}" class="form-control @error('name') is-invalid @enderror" id="inputName" required>
							@error('name')
								<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
							@enderror
						</div>
					</div>

					<div class="form-group row gutters">
						<label for="inputEmail" class="col-sm-3 col-form-label text-right">Email</label>
						<div class="col-sm-4">
							<input type="text" value="{{ old('email', $data->email) }}" name="email" class="form-control @error('email') is-invalid @enderror" id="inputEmail" required>
							@error('email')
								<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
							@enderror
						</div>
					</div>

					<div class="form-group row gutters">
						<label for="password" class="col-sm-3 col-form-label text-right">Password</label>
						<div class="col-sm-4">
						<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password"  autocomplete="new-password">
						@error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
						</div>
					</div>
					<div class="form-group row gutters">
						<label for="password_confirmation" class="col-sm-3 col-form-label text-right">Confirm Password</label>
						<div class="col-sm-4">
							<input type="password" class="form-control" name="password_confirmation" id="password_confirmation">
						</div>
					</div>

					<div class="form-group row gutters">
						<label for="inputStatus" class="col-sm-3 col-form-label text-right">Status</label>
						<div class="col-sm-4">
							<select name="status" id="inputStatus" class="form-control" required>
								<option value="1" @if($data->status==1) selected @endif > Active </option>
								<option value="0" @if($data->status==0) selected @endif> De-active </option>
							</select>
						</div>
					</div>

					<!-- User Group -->
					<div class="form-group row gutters">
						<label for="inputUgroups" class="col-sm-3 col-form-label text-right">User Group</label>
						<div class="col-sm-4">
							<select name="ugroups" id="inputUgroups" class="form-control" required>
								<option value="admin" @if($data->ugroups=='admin') selected @endif>Admin</option>
								<option value="company" @if($data->ugroups=='company') selected @endif>Company</option>
								<option value="client" @if($data->ugroups=='client') selected @endif>Client</option>
							</select>
						</div>
					</div>

					@if(auth()->user()->ugroups=='admin')
					<div class="form-group row gutters">
						<label for="inputCompany" class="col-sm-3 col-form-label text-right">Company</label>
						<div class="col-sm-4">
						<select name="company" id="inputCompany" class="form-control" required>
							@foreach($company as $row)
								<option value="{{$row->id}}" @if($data->company_id==$row->id) selected @endif> {{$row->title.' / '.$row->address.' / '.$row->email}} </option>
							@endforeach
							</select>
						</div>
					</div>
					@endif

					<div class="form-group row gutters">
						<label class="col-sm-3 col-form-label text-right">Access Type</label>
						<div class="col-sm-4">
							<input type="checkbox" name="phase1" value="1" @if(in_array("1", json_decode($data->app_access) ?? [])) checked @endif> Phase1 Meter <br/>
							<input type="checkbox" name="phase3" value="3" @if(in_array("3", json_decode($data->app_access) ?? [])) checked @endif> Phase3 Meter
						</div>
					</div>

					<!-- Device Access - only visible when ugroups = client -->
					@php
						$selectedDevices = json_decode($data->device_access ?? '[]', true) ?? [];
					@endphp
					<div class="form-group row gutters" id="deviceAccessGroup" style="display: none;">
						<label for="deviceAccessSearch" class="col-sm-3 col-form-label text-right">Device Access</label>
						<div class="col-sm-4">
							<div class="dropdown" id="deviceAccessDropdown">
								<button class="form-control text-left dropdown-toggle" type="button" id="deviceAccessBtn"
										data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									Select devices
								</button>
								<div class="dropdown-menu p-2" aria-labelledby="deviceAccessBtn" style="width:100%; max-height:300px; overflow-y:auto;">
									<input type="text" class="form-control mb-2" id="deviceAccessSearch" placeholder="Search device...">
									<div id="deviceAccessList">
										@foreach($devices as $device)
											<div class="form-check">
												<input class="form-check-input device-checkbox" type="checkbox"
													   name="device_access[]" value="{{ $device->global_device_id }}"
													   id="device_{{ $loop->index }}"
													   @if(in_array($device->global_device_id, $selectedDevices)) checked @endif>
												<label class="form-check-label" for="device_{{ $loop->index }}">
													{{ $device->global_device_id }}
												</label>
											</div>
										@endforeach
									</div>
								</div>
							</div>
						</div>
					</div>

					<button type="submit" id="submit"  class="btn btn-primary float-right">Submit Form</button>

				</div>
			</div>
		</form>
	</div>
</div>

</div>

@push('scripts')
		<script src="{{asset('assets')}}/vendor/datepicker/js/picker.js"></script>
		<script src="{{asset('assets')}}/vendor/bs-select/bs-select.min.js"></script>
		<script src="{{asset('assets')}}/js/main.js"></script>

		<script>
			$(document).ready(function () {
				function toggleDeviceAccess() {
					if ($('#inputUgroups').val() === 'client') {
						$('#deviceAccessGroup').show();
					} else {
						$('#deviceAccessGroup').hide();
						$('.device-checkbox').prop('checked', false);
					}
				}

				function updateButtonLabel() {
					var count = $('.device-checkbox:checked').length;
					$('#deviceAccessBtn').text(count > 0 ? count + ' device(s) selected' : 'Select devices');
				}

				toggleDeviceAccess();
				updateButtonLabel();

				$('#inputUgroups').on('change', toggleDeviceAccess);

				$('#deviceAccessSearch').on('keyup', function () {
					var query = $(this).val().toLowerCase();
					$('#deviceAccessList .form-check').each(function () {
						var label = $(this).find('label').text().toLowerCase();
						$(this).toggle(label.indexOf(query) > -1);
					});
				});

				$('#deviceAccessDropdown .dropdown-menu').on('click', function (e) {
					e.stopPropagation();
				});

				$(document).on('change', '.device-checkbox', updateButtonLabel);
			});
		</script>
@endpush
@endsection