@push('css')
 <link href="{{asset('assets/libs/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css">
@endpush
<div class="row">
	<div class="col-lg-6">
		<div class="mb-3">
			<label>Nama</label>
			{!! Form::text('name',null,['class'=>'form-control','placeholder'=>'input name']) !!}
		</div>
		<div class="mb-3">
			<label>Email</label>
			{!! Form::email('email',null,['class'=>'form-control','placeholder'=>'input email']) !!}
		</div>
		<div class="mb-3">
			<label>Foto Profil</label>
			{!! Form::file('foto',['class'=>'filestyle','data-buttonname'=>'btn-primary','accept'=>'image/*']) !!}
		</div>
		
	</div>
	<div class="col-lg-6">
		<div class="mb-3">
			<label>Password</label>
			{!! Form::password('password',['class'=>'form-control','placeholder'=>'input password']) !!}
		</div>
		<div class="mb-3">
			<label>Status</label>
			{!! Form::select('status',['1'=>'aktif','0'=>'non aktif'],null,['class'=>'form-control','placeholder'=>'pilih status']) !!}
		</div>
		
		<div class="mb-3">
			<label>Foto Tanda Tangan</label>
			{!! Form::file('ttd',['class'=>'filestyle','data-buttonname'=>'btn-primary','accept'=>'image/png']) !!}
			<span style="color:orange;"> *foto tanda tangan barupa image png dengan latar belakang transparan</span>
		</div>
		
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		@isset($user)
		<div class="mb-3">
			<div align="center">
				<img src="{{asset('images/user')}}/{{$user->foto}}" class="img" style="max-width: 50%;"> 
			</div>
		</div>
		@endisset
	</div>
	<div class="col-md-6">
		@isset($user)
		<div class="mb-3">
			<div align="center">
				<img src="{{asset('images/ttd')}}/{{$user->ttd}}" class="img" style="max-width: 50%;"> 
			</div>
		</div>
		@endisset
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		<div class="mb-3">
			<label>No Wa</label>
			{!! Form::number('no_wa',old("no_wa",@$user->no_wa),['class'=>'form-control','placeholder'=>'No Wa....']) !!}
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		<div class="mb-3">
			<label for="role_id">Role</label>
			<select name="role_id" id="role_id" class="form-control role" required>
				<option value="">Pilih Role</option>
				@foreach($role as $key => $value)
					<option value="{{$value->id}}" @if(isset($user) && in_array($value->id,$user->roles()->pluck('id')->toArray())) selected @endif data-json='{!! json_encode($value) !!}'>{{$value->title}}</option>
				@endforeach
			</select>
		</div>
	</div>
	<div class="col-md-6">
		<div class="mb-3">
			<label>Jabatan</label>
			{!! Form::text('jabatan',old('jabatan',@$user->jabatan),['class'=>'form-control','placeholder'=>'Jabatan user...']) !!}
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		<div class="mb-3">
			<label for="divisi_id">Departemen</label>
			<select name="divisi_id[]" id="divisi_id" multiple class="form-control departemen">
				<option value="">Tidak Pakai Departemen</option>
				@foreach($departements as $key => $departement)
					<option value="{{$departement->id}}" @if(isset($user) && in_array($departement->id,$user->divisis()->pluck('divisi_id')->toArray())) selected @endif>{{$departement->name}}</option>
				@endforeach
			</select>
		</div>
	</div>

	<div class="col-md-6">
		<div class="mb-3">
			<label for="perusahaan_id">Perusahaan</label>
			<select name="perusahaan_id[]" id="perusahaan_id" multiple class="form-control perusahaan">
				<option value="">Tidak Pakai Perusahaan</option>
				@foreach($perusahaans as $key => $perusahaan)
					<option value="{{$perusahaan->id}}" @if(isset($user) && in_array($perusahaan->id,$user->perusahaans()->pluck('perusahaan_id')->toArray())) selected @endif>{{$perusahaan->name}}</option>
				@endforeach
			</select>
		</div>
	</div>
</div>

{{-- @if(isset($user))
	@foreach($user->myRole as $key => $user_role)
		<div class="col-md-12 role-area" number="{{$loop->index}}">
			<div class="row">
				<div class="col-md-6">
					<h2>Role</h2>
				</div>
				<div class="col-md-6">
					@if($loop->index > 0)
						<div align="right">
							<a class="btn btn-sm btn-danger btn-del-role"><i class="fa fa-times"></i> Hapus</a>
						</div>
					@endif
				</div>
			</div>
			<div class="mb-3">
				<label>Role</label>
				<select name="role[{{ $loop->index }}][role]" id="" class="form-control role" required>
					<option value="">Pilih Role</option>
					@foreach($role as $key => $value)
						<option value="{{$value->id}}" @if(@$user_role->role_id == $value->id) selected @endif data-json='{!! json_encode($value) !!}'>{{$value->title}}</option>
					@endforeach
				</select>
			</div>
			<div class="append mb-3">
				@if($user_role->role->pakai_perusahaan)
					<div class="mb-3 ">
						<label>Perusahaan</label>
						{!! Form::select('role['.$loop->index.'][perusahaan]',@$perusahaan,@$user_role->userHasPerusahaan->perusahaan_id,['class'=>'form-control','placeholder'=>'pilih perusahaan']) !!}
					</div>
					
				@endif
				@if($user_role->role->pakai_divisi)
					<div class="">
						<label>Departemen</label>
						{!! Form::select('role['.$loop->index.'][divisi]',@$divisi,@$user_role->userHasDivisi->divisi_id,['class'=>'form-control divisi','placeholder'=>'pilih departemen','required']) !!}
					</div>
				
				@endif
			</div>
			
			<div class="mb-3">
				<label>Jabatan</label>
				{!! Form::text('role['.$loop->index.'][jabatan]',@$user_role->userHasPerusahaan->jabatan ?? @$user_role->userHasDivisi->jabatan,['class'=>'form-control jabatan','placeholder'=>'input jabatan','required']) !!}
			</div>
			<hr>
		</div>
	@endforeach
@else
	<div class="col-md-12 role-area" number="0">
		<div class="row">
			<div class="col-md-6">
				<h2>Role</h2>
			</div>
			<div class="col-md-6">

			</div>
		</div>
		<div class="mb-3">
			<label>Role</label>
			<select name="role[0][role][]" id="" class="form-control role" required>
				<option value="">Pilih Role</option>
				@foreach($role as $key => $value)
					<option value="{{$value->id}}" data-json='{!! json_encode($value) !!}'>{{$value->name}}</option>
				@endforeach
			</select>
		</div>
		<div class="mb-3 append">

		</div>
		<div class="mb-3">
			<label>Jabatan</label>
			{!! Form::text('role[0][jabatan][]',null,['class'=>'form-control jabatan','placeholder'=>'input jabatan','required']) !!}
		</div>
	</div>
@endif
<div class="append-role">
	
</div>
	<div class="mb-3">
		<label>Group Permission</label>
		{!! Form::select('group_id',$groups,null,['class'=>'form-control group-permission','placeholder'=>'pilih group']) !!}
	</div>
<div class="append-permission">
	@if(isset($user))
		@if(isset($selected_group))
			<div class="row">
				@foreach($selected_group as $selected)
				<h4>{{$selected->name}}</h4>
					@foreach($selected->permissions as $permission)
						<div class="col-md-2">
							{!! Form::checkbox('permission_id[]',$permission->name,$permission->customUser->count() > 0?true:false) !!}
							{!! Form::label($permission->name) !!}
						</div>
					@endforeach
				@endforeach
				<br>
				<br>
			</div>
		@endif
	@endif		
</div>

<div class="col-md-12">
	<a  class="btn btn-sm btn-warning btn-add-role"><i class="fa fa-plus"></i>	Tambah Role</a>
</div>
 --}}
@push('js')
 <script src="{{asset('assets/libs/admin-resources/bootstrap-filestyle/bootstrap-filestyle.min.js')}}"></script>
 <script src="{{asset('assets/libs/select2/js/select2.min.js')}}"></script>
 <script type="text/javascript">
 	$('.role').select2({
 		width:'100%',
 		placeholder:'pilih role',
 	});

	 $('.departemen').select2({
 		width:'100%',
 	});

	 $('.perusahaan').select2({
 		width:'100%',
 	});

 	$(document).ready(function(){
 		$('.group-span-filestyle').find('label').removeClass('btn-secondary').addClass('btn-primary');
 	});

 	$('body').on('change','.role',function(){
 		var text = $(this).find('option:selected').text();
 		var json = $(this).find('option:selected').data('json');
		var parent = $(this).closest('.col-md-12').find('.append');
		parent.html("");
		if(json.pakai_perusahaan == 1){
			var clone = $('#perusahaan').clone();
			clone.removeAttr('id');
			clone.addClass('perusahaan');
			clone.removeClass('d-none');
			parent.append(clone);
			
		} else {
			parent.find('.perusahaan').remove();
		}

		
		if(json.pakai_divisi == 1){
			
			var clone = $('#divisi').clone();
			clone.removeAttr('id');
			clone.addClass('divisi');
			clone.removeClass('d-none');
			parent.append(clone);
			
		} else {
			parent.find('.divisi').remove();
		}
 		
		$.each($('.role-area'),function(index,item){
 				$(this).attr('number',index);
 				$(this).find('.role').attr('name','role['+index+'][role]');
 				$(this).find('.jabatan').attr('name','role['+index+'][jabatan]');
 				$(this).find('.divisi').attr('name','role['+index+'][divisi]');
 				$(this).find('.perusahaan').attr('name','role['+index+'][perusahaan]');
 			});
 	});

 	$('.group-permission').change(function(){
 		var ini = $(this).val();
 		if (ini.trim().length !== 0) {
 			$.ajax({
 				url:'{{route('select.permission')}}',
 				method:'POST',
 				data:{_token:'{{ csrf_token() }}',id:ini},
 				dataType:'JSON',
 				success:function(res){
 					$('.append-permission').append(res.html);
 				}
 			}).fail(function(res){
 				alert('gagal mengambil persmission');
 			});
 		}
 	});

 	$('body').on('click','.btn-remove-permission',function(){
 		$(this).closest('.row').remove();
 	});
 </script>

 <script type="text/javascript">
 	$('.btn-add-role').click(function(){
 		if ($('.role-area').length > 1) {
 			alert('jumlah role dibatasi 2 untuk setiap user');
 		}else{
 			$('.append-role').append($('#add-role-element').html());
 		}
 	});

 	$('body').on('click','.btn-del-role',function(){
 		$(this).closest('.col-md-12').remove();
 	});
 </script>

 <div class="d-none">
	<div id="divisi" class="d-none">
		<label>Departemen</label>
	   {!! Form::select('role[][divisi_id]',$divisi,null,['class'=>'form-control divisi','placeholder'=>'pilih departemen','required']) !!}
	</div>
	<div id="perusahaan"  class="d-none">
		<label>Perusahaan</label>
	   {!! Form::select('role[][perusahaan_id]',$perusahaan,null,['class'=>'form-control perusahaan','placeholder'=>'pilih perusahaan','required']) !!}
	</div>
 </div>

 <script type="text/template" id="add-role-element">
 	<div class="col-md-12 role-area" number="1">
 		<hr>
 		<div class="row">
			<div class="col-md-6">
				<h2>Role</h2>
			</div>
			<div class="col-md-6">
				<div align="right">
					<a class="btn btn-sm btn-danger btn-del-role"><i class="fa fa-times"></i> Hapus</a>
				</div>
			</div>
		</div>
 		<div class="mb-3">
 			<label>Role</label>
 			<select name="role[1][role]" id="" class="form-control role" required>
				<option value="">Pilih Role</option>
				@foreach($role as $key => $value)
					<option value="{{$value->id}}" data-json='{!! json_encode($value) !!}'>{{$value->name}}</option>
				@endforeach
			</select>
 		</div>
 		<div class="mb-3 append">

 		</div>
 		<div class="mb-3">
 			<label>Jabatan</label>
 			{!! Form::text('role[1][jabatan]',null,['class'=>'form-control jabatan','placeholder'=>'input jabatan','required']) !!}
 		</div>
 	</div>
 </script>
@endpush