{{-- 
	? To set: 
		*	required: 			input_id			 as  string for id tag  	
			array option:		label				 as  string html 
								label_pill			 as  string 
								label_pill_color	 as  string color default = secondary
								label_pill_attr	 	 as  string attributes
								input_name			 as  string if empty = input_id
								input_type			 as  string type from input field, default is text
								input_class			 as  string for custom css class in input field
								input_attr			 as  string for custom attr in input field 			{{ ! activ in textarea ! }} 
								placeholder			 as  string 
								title				 as  string for tooltip
								value				 as  string for validate input value at start
								autocomplete		 as  boolean default false  
								required			 as  boolean default false 
								disabled			 as  boolean default false 

								btn_color			 as  string secondary, primary, light, dark, warnig, danger 
								btn{{ num }}_color	 as  string secondary, primary, light, dark, warnig, danger 

							SELECT: 	options		 as  array  [
													 				option_value,
																	option_label,
																	option_attr
																]
							find_select same as SELECT
							    in BLADE :

								@php
												$options	= [];
												foreach ($model as $item) {
													$options[]	=> [
														'option_value'	=> $item['id'],
														'option_label'	=> $item['id'] .' - ' .$item['name'],
													];
												}
											@endphp

							GENDER: 	gender or gender2 ( as icons )

							icon_radio_slider 	[
													radio_id,
													radio_name,
													radio_value,
													radio_icon_width,
													options		 as  array  [
														 				option_value,
																		option_icon_name,
																		option_icon_class,
																		option_icon_width,
																		option_label,		 as  html
																		rgb,
																		default_checked, 	 as  boolean default false
																	]
												]

							CHECKBOX: 	margin_top	 as  int    in px
										label_class	 as  string 
										check_label	 as  string in html
 
	? To implement in Blade: 
	*		@includeIf('layouts.components.inputs', [ 'input_id' => 'example' ])

--}}

@if (isset($input_id))

	@if (isset($label) && !empty($label))
		<label for="{{ $input_id }}" class="col-form-label {{ (isset($required) && $required === true) ? 'required' : '' }}">
			{!! $label ?? $input_id .' Label' !!}
			{!! !empty($label_pill) ? "<span class='badge rounded-pill " .(!empty($label_pill_color) ? 'text-bg-' .$label_pill_color : 'text-bg-secondary') ." ms-2 fs-7' " .(!empty($label_pill_attr) ? $label_pill_attr : '') .">$label_pill</span>" : '' !!}
		</label>
	@endif

	{{-- Text input --}}
		@if (!isset($input_type) || $input_type === 'text')

			<input 	type		="{{ $input_type ?? 'text' }}" 
					name		="{{ $input_name ?? $input_id }}" 
					id			="{{ $input_id }}" 
					value		="{{ old( ($input_name ?? $input_id), $value ?? '') }}"
					class		="form-control @error( ($input_name ?? $input_id) ) is-invalid @enderror {{ $input_class ?? '' }}"
					placeholder	="{{ $placeholder ?? '' }}"
					title		="{{ $title ?? '' }}"
					autocomplete="{{ $autocomplete ?? 'off' }}"
					{{ (isset($required) && $required === true) ? 'required' : '' }}
					{{ (isset($disabled) && $disabled === true) ? 'disabled' : '' }}
			>
			
		@endif


	{{-- Text input --}}
		@if (isset($input_type) && $input_type === 'number')

			<input 	type		="text" 
					inputmode	="numeric"
					name		="{{ $input_name 	?? $input_id }}" 
					id			="{{ $input_id }}" 
					value		="{{ old( ($input_name ?? $input_id), $value ?? '') }}"
					class		="form-control @error( ($input_name ?? $input_id) ) is-invalid @enderror {{ $input_class ?? '' }}"
					placeholder	="{{ $placeholder 	?? '' }}"
					title		="{{ $title 		?? '' }}"
					autocomplete="{{ $autocomplete 	?? 'off' }}"
					onclick		="this.setSelectionRange(0, this.value.length)" 
					{{ (isset($required) && $required === true) ? 'required' : '' }}
					{{ (isset($disabled) && $disabled === true) ? 'disabled' : '' }}
			>

			<script>
				$('#{{ $input_id }}').val( $('#{{ $input_id }}').val().replace(/[^\dA-Z]/g, '').replace(/(.{3})/g, '$1 ').trim() )
				document.getElementById("{{ $input_id }}").addEventListener('input', function (e) {
					var target = e.target, position = target.selectionEnd, length = target.value.length;
				  
					target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{3})/g, '$1 ').trim();
					target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
				});
			</script>
			
		@endif

	{{-- Gender radio --}}
		@if (isset($input_type) && $input_type === 'gender')

			<div class="btn-group" role="group" aria-label="">
				<input type="radio" class="btn-check" name="{{ $input_name ?? $input_id }}" id="{{ $input_id }}_1" value="m" autocomplete="off" {{ (old('gender', $value ?? '')	=== 'm')  ? 'checked' : '' }}>
				<label class="btn btn-outline-{{ $btn_color ?? $btn1_color ?? 'primary' }} {{ $input_class ?? '' }}" for="{{ $input_id }}_1">Herr</label>
			  
				<input type="radio" class="btn-check" name="{{ $input_name ?? $input_id }}" id="{{ $input_id }}_2" value="f" autocomplete="off" {{ (old('gender', $value ?? '') === 'f')  ? 'checked' : '' }}>
				<label class="btn btn-outline-{{ $btn_color ?? $btn2_color ?? 'rosa' }} {{ $input_class ?? '' }}" for="{{ $input_id }}_2">Frau</label>

				<input type="radio" class="btn-check" name="{{ $input_name ?? $input_id }}" id="{{ $input_id }}_3" value="" autocomplete="off" {{ (old('gender', $value ?? '') 	=== '')  ? 'checked' : '' }}>
				<label class="btn btn-outline-{{ $btn_color ?? $btn3_color ?? 'secondary' }} {{ $input_class ?? '' }}" for="{{ $input_id }}_3">Unbek.</label>
			</div>
			
		@endif
		@if (isset($input_type) && $input_type === 'gender2')

			@section('section-css')
				@parent
				@once
					<link rel="stylesheet" href="{{ asset("css/components/_inputs_gender2.css") }}">
				@endonce
			@stop

			<div class="wrapper">
				<div class="toggle_radio_gender">
					<input type="radio" class="toggle_option first_toggle" 		id="{{ $input_id }}_1"		value="m" 		name="{{ $input_name ?? $input_id }}" 	autocomplete="off" {{ (old('gender', $value ?? '')	=== 'm')  ? 'checked' : '' }}>
					<input type="radio" class="toggle_option second_toggle" 	id="{{ $input_id }}_2"		value="f" 		name="{{ $input_name ?? $input_id }}"	autocomplete="off" {{ (old('gender', $value ?? '')	=== 'f')  ? 'checked' : '' }}>
					<input type="radio" class="toggle_option third_toggle" 		id="{{ $input_id }}_3"		value="" 		name="{{ $input_name ?? $input_id }}"	autocomplete="off" {{ (old('gender', $value ?? '')	=== '')   ? 'checked' : '' }}>
					<label class="first_label" for="{{ $input_id }}_1">
						@includeIf('layouts.components.icon', [ 'name' => 'man (1)', 'width' => 50 ])
					</label>
					<label class="second_label" for="{{ $input_id }}_2">
						@includeIf('layouts.components.icon', [ 'name' => 'woman', 'width' => 50 ])
					</label>
					<label class="third_label" for="{{ $input_id }}_3">
						@includeIf('layouts.components.icon', [ 'name' => 'anonymous', 'width' => 50 ])
					</label>
				  <div class="toggle_option_slider">
				</div>
			</div>

			<script>
				function initial_checked_gender () { 
					var checked_radio_id 	= $('.toggle_radio_gender input:checked').attr('id');
					$('label[for=' + checked_radio_id +']').parents('.toggle_radio_gender').find('.toggle_option_slider').offset( $('label[for=' + checked_radio_id +']').offset() );
				}
				initial_checked_gender();

				$(window).on('resize', function(){ 
					initial_checked_gender()
				});

				$('.toggle_radio_gender').on('click', 'label', function(e){
					$(this).parents('.toggle_radio_gender').find('.toggle_option_slider').offset( $(this).offset() );
					console.log($(this).offset());
				})
			</script>

		@endif

	{{-- Icon radio --}}
		@if (isset($input_type) && $input_type === 'icon_radio_slider')

			{{-- @section('section-css')
				@parent
				@once
					<link rel="stylesheet" href="{{ asset("css/components/_inputs_gender2.css") }}">
				@endonce
			@stop --}}

			<style>
				.toggle_radio_slider_{{ $input_id }} {
					position: relative;
					background: rgba(255, 255, 255, .1);
					margin: 4px auto;
					/* overflow: hidden; */
					padding: 0 !important;
					-webkit-border-radius: 50px;
					-moz-border-radius: 50px;
					border-radius: 50px;
					position: relative;
					width: 100%;
					justify-content: center;
				}

				.toggle_radio_slider_{{ $input_id }}>* {
					/* float: left; */
				}

				.toggle_radio_slider_{{ $input_id }} input[type=radio] {
					display: none;
				}

				.toggle_radio_slider_{{ $input_id }} label {
					/* display: flex; */
					z-index: 2;
    				position: relative;
					justify-content: center;
					width: {{ (100 / count($options)) - count($options) }}%;
					max-width: 150px;
					height: 100px;
					margin: 0px 3px;
					-webkit-border-radius: 50px;
					-moz-border-radius: 50px;
					border-radius: 50px;
					cursor: pointer;
					text-align: center;
					transition: all .4s ease;
					-webkit-transition: all .4s ease;
					-moz-transition: all .4s ease;
					-o-transition: all .4s ease;
					-ms-transition: all .4s ease;
				}

				.toggle_radio_slider_{{ $input_id }} .toggle_option_slider {
					z-index: 0;
					width: {{ (100 / count($options)) - count($options) }}%;
					max-width: 150px;
					height: 100px;
					position: absolute;
					top: 0px;
					-webkit-border-radius: 50px;
					-moz-border-radius: 50px;
					border-radius: 50px;
					-webkit-transition: all .4s ease;
					-moz-transition: all .4s ease;
					-o-transition: all .4s ease;
					-ms-transition: all .4s ease;
					transition: all .4s ease;
				}
			</style>

			@foreach ($options as $key => $item)
				<style>
					.toggle_radio_slider_{{ $input_id }} input.toggle_{{ $key }}:checked~.toggle_option_slider {
						background: rgb({{ $item['rgb'] ?? '144 144 144' }} / 30%);
						/* left: {{ 136 * $key + 3 .'px' }}; */
						left: 50%;
						transform: translate(-50%, 0);
					}
					.toggle_radio_slider_{{ $input_id }} label.label_{{ $key }}:hover {
						background: rgb({{ $item['rgb'] ?? '144 144 144' }} / 16%);
					}
				</style>
			@endforeach

			<div class="wrapper">
				<div class="toggle_radio_slider_{{ $input_id }} row">

					@foreach ($options as $key => $item)

						<input 	type="radio" 
								class="toggle_option toggle_{{ $key }}" 		
								id="{{ $input_id .'_' .$key }}" 		
								name="{{ $input_name ?? $input_id }}" 	
								autocomplete="off" {{ (old( ($input_name ?? $input_id), $radio_value ?? '')	=== $item['option_value'])  ? 'checked' : '' }}
								value="{{ !empty($item['option_value']) ? $item['option_value'] : '' }}"
								{{ !empty($item['default_checked']) && $item['default_checked'] === true ? 'checked' : '' }}
						>

						<label class="label_{{ $key }}" for="{{ $input_id .'_' .$key }}">
							@includeIf('layouts.components.icon', [ 'name' => ($item['option_icon_name'] ?? 'info (2)'), 'width' => ( $item['option_icon_width'] ?? $radio_icon_width ?? '' ), 'class' => ($item['option_icon_class'] ?? '') ])
							<p class="fw-bolder">
								{!! !empty($item['option_label']) ? $item['option_label'] : '' !!}	
							</p>
						</label>
						
					@endforeach

				  	<div class="toggle_option_slider">
				</div>
			</div>

			<script>
				function initial_checked_radio () { 
					var checked_radio_id 	= $('.toggle_radio_slider_{{ $input_id }} input:checked').attr('id');
					$('label[for=' + checked_radio_id +']').parents('.toggle_radio_slider_{{ $input_id }}').find('.toggle_option_slider').offset( $('label[for=' + checked_radio_id +']').offset() );
				}
				initial_checked_radio();

				$(window).on('resize', function(){ 
					initial_checked_radio()
				});
				
				$('.toggle_radio_slider_{{ $input_id }}').on('click', 'label', function(e){
					$(this).parents('.toggle_radio_slider_{{ $input_id }}').find('.toggle_option_slider').offset( $(this).offset() );
					// console.log($(this).offset());
				});
			</script>

		@endif


	{{-- Select --}}
		@if (isset($input_type) && $input_type === 'select')

			<select name	="{{ $input_name ?? $input_id }}" 
					id		="{{ $input_id }}"
					class	="form-select form-select-sm cursor-pointer @error( ($input_name ?? $input_id) ) is-invalid @enderror {{ $input_class ?? '' }}"
					title	="{{ $title ?? '' }}"
					data-value = "{{ $value ?? '' }}"
					{{ (isset($disabled) && $disabled === true) ? 'disabled' : '' }}

			>
				@foreach ($options as $option)
					@if ( isset($option['option_label']) && !empty(['option_label']) )
						<option {{( old(($input_name ?? $input_id), $value ?? '') == $option['option_value'] ) ? 'selected' : '' }} 
								value="{{ $option['option_value'] }}" 
								{!! !empty($option['option_attr']) 		? $option['option_attr'] 	: '' !!}
						>
							{{ $option['option_label'] }}
						</option>
					@endif
				@endforeach
			</select>
			
		@endif

		@if (isset($input_type) && $input_type === 'find_select')
				
			<select	name	="{{ $input_name ?? $input_id }}" 
					id		="{{ $input_id }}"
					class	="form-select form-select-sm cursor-pointer @error( ($input_name ?? $input_id) ) is-invalid @enderror {{ $input_class ?? '' }}"
					title	="{{ $title ?? '' }}"
					data-dselect-search		="true" 
					data-dselect-clearable	="true" 
					data-dselect-size		="sm"
					{{ (isset($required) && $required === true) ? 'required' : '' }}
					{{ (isset($disabled) && $disabled === true) ? 'disabled' : '' }}
			>	
				<option value="">{{ $placeholder ?? 'finden...' }}</option>
				@if (!empty($options))
					@foreach ($options as $option)
						@if ( isset($option['option_label']) && !empty(['option_label']) )
							<option {{( old(($input_name ?? $input_id), $value ?? '') == $option['option_value'] ) ? 'selected' : '' }} value="{{ $option['option_value'] }}" {!! !empty($option['option_attr']) ? $option['option_attr'] : '' !!}>{{ $option['option_label'] }}</option>
						@endif
					@endforeach
				@endif
			</select>

			<script>
				dselect(document.querySelector('#{{ $input_id }}'))
				$('.dropdown.dselect-wrapper button').on('click', function(e) {
					$(this).next().css('', 'translate3d(0px, 420px, 0px)');
				});
			</script>

		@endif


	{{-- Checkbox --}}
		@if (isset($input_type) && $input_type === 'checkbox')

			<div class="form-check ps-0 py-0" style="{{ isset($margin_top) ? "margin-top:" .$margin_top ."px;" : '' }}">
				<input 	name		="{{ $input_name ?? $input_id }}" 
						id			="{{ $input_id }}"  
						type		="checkbox" 
						class		="btn-check {{ $input_class ?? '' }}" 
						title		="{{ $title ?? '' }}"
						autocomplete="{{ $autocomplete ?? 'off' }}"
						value		= 1
						{{ (isset($disabled) && $disabled === true) ? 'disabled' : '' }}
						{{ (old(($input_name ?? $input_id), $value ?? '') === 1) ? 'checked' : '' }}
				>
				<label class="btn btn-outline-secondary-danger btn-sm w-100 {{ $label_class ?? '' }}" for="{{ $input_id }}">
					{!! $check_label ?? $input_id .' Label' !!}
				</label>
			</div>
			
		@endif
		
	{{-- Textarea --}}
		@if ( isset($input_type) && $input_type === 'textarea' )

			@if ( isset($text_editor) && $text_editor === true )
			
				<div 	{{ (isset($required) && $required === true) ? 'required' : '' }} 
						class				="text-editor form-control text-break {{ $input_class ?? '' }}" 
						data-textarea-id	="{{ $input_id }}" 
						style				="min-height: 5rem;"
						title				="{{ $title ?? '' }}"
				>{!! old(($input_name ?? $input_id), $value ?? '') !!}</div>
				<script>
					new inLine('.text-editor', {
						theme: 		"purple", // dark
						toolbar: 	['bold','italic','underline','strikeThrough','unorderedList','orderedList','color','link'],
						labels: {
							back: 			'zurück',
							indexPanel: 	'Okis Text Editor',
							bold: 			'Fett',
							italic: 		'Kursiv',
							underline: 		'Unterstreichen',
							strikeThrough: 	'Durchstreichen',
							unorderedList: 	'Liste',
							orderedList: 	'Liste nummeriert',
							align: 			'Align',
							alignPanel: 	'Align panel',
							justifyLeft: 	'Left',
							justifyCenter: 	'Center',
							justifyRight: 	'Right',
							justifyFull: 	'Justified',
							link: 			'Link',
							color: 			'Farbe',
							colorPanel: 	'Farb panel',
							colorPalette: 	'Farbpalette',
							textColor: 		'Textfarbe',
							backgroundColor: 'Hintergrundfarbe',
							linkPlaceholder: 'hier Dein Link',
							linkPanel: 		'Link panel',
							removeLink: 	'Link aufheben',
							confirmLink: 	'Link verknüpfen',
							removeStyle: 	'Style zurücksetzen'
						},
						onChange: function (api) {
							document.querySelector('#{{ $input_id }}').value = $('.text-editor[data-textarea-id="{{ $input_id }}"]').html();
						  }
					});
				</script>

			@endif
			
			<textarea 	{{ (isset($required) && $required === true) ? 'required' : '' }} 
						type="text" 
						name="{{ $input_name ?? $input_id }}" 
						id="{{ $input_id }}" 
						class="form-control {{ $input_class ?? '' }} {{ ( isset($text_editor) && $text_editor === true ) ? 'd-none' : '' }} @error('{{ ($input_name ?? $input_id) }}') is-invalid @enderror"
						{{ !empty($input_attr) ? $input_attr : '' }}
						{{ (isset($disabled) && $disabled === true) ? 'disabled' : '' }}

			>{{ old( ($input_name ?? $input_id), $value ?? '') }}</textarea>

		@endif

	
	@error ( $input_name ?? $input_id )
		<div class="invalid-feedback">{{ $message }}</div>
	@enderror
	{{-- <div class="invalid-feedback">	{{ $label ?? $input_id ?? 'Eingabe' }} überprüfen	</div> --}}

@endif