{{-- 
	? To set: 
		*	required: 			input_id			 as  string for id tag  
		*						date				 as  boolean for show datepicker input
		*						time				 as  boolean for show timepicker input
			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_class			 as  string for custom css class in input field
								title				 as  string for tooltip
								clear_title			 as  string html for tooltip of clear btn
								value				 as  string for validate input value at start
								required			 as  boolean default false 
								group_class			 as  string 
								disabled			 as  boolean 

								btn_color			 as  string secondary, primary, light, dark, warnig, danger 

	? To implement in Blade: 
	*		@includeIf('layouts.components.datetimepicker', [ 'input_id' => 'example' ])

--}}

@if (isset($input_id))

	@php
		if (!empty($value)) {
			$get_date = new \Carbon\Carbon($value);
			$get_date = $get_date->setTimezone('EET');
			$date_value = $get_date->format('d.m.Y');
			$time_value = $get_date->format('G:i \U\h\r');
			if ($time_value === '0:00 Uhr') {
			    $time_value = null;
			}
		}
	@endphp

	<div class="form-group {{ $group_class ?? '' }}">

		@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

		<div class='input-group'>

			{{-- date --}}
				@if ( ( !empty($date) && empty($disabled) ) || ( !empty($disabled) && !empty($date_value) && !empty($date) ) )
					<input 	type		="text" 
							name		="date_{{ $input_name ?? $input_id }}" 
							id			="date-{{ $input_id }}" 
							class		="form-control cursor-pointer {{ $input_class ?? '' }} {{ ( isset($time) && $time === true ) ? 'text-end' : '' }}" 
							value		="{{ old( ($input_name ?? $input_id), $date_value ?? '') }}"
							placeholder	="Datum wählen..."
							{{ !empty($disabled) ? 'disabled' : '' }}
							{{ (isset($required) && $required === true) ? 'required' : '' }}
					/>

					<script>
						new dateDropper({
							selector: '#date-{{ $input_id }}',
							format: 'dd.mm.y',
							expandable: true,
							lang: 'de',
							// overlay: true,
							maxYear: {{ date('Y', strtotime('+15 years')) }},
							minYear: {{ date('Y', strtotime('-15 years')) }},
							startFromMonday: true,
							maxDate: null, // "2022/12/31"
							minDate: null,  //"2021/01/01"
							autoFill: true,
							customClass: 'date-dropper'
						});
					</script>
				@endif

			{{-- time --}}
				@if ( ( !empty($time) && empty($disabled) ) || ( !empty($disabled) && !empty($time_value) && !empty($time) ) )
					<input 	type		="text" 
							name		="time_{{ $input_name ?? $input_id }}" 
							id			="time-{{ $input_id }}" 
							class		="form-control {{ $input_class ?? '' }}" 
							value		="{{ old( ($input_name ?? $input_id), $time_value ?? '') }}"
							placeholder	="Zeit wählen..."
							{{ !empty($disabled) ? 'disabled' : '' }}
							{{ (isset($required) && $required === true) ? 'required' : '' }}
					/>

					<script>
						$('#time-{{ $input_id }}').timeDropper({
							format: 'H:mm \U\hr',
							autoswitch: true,
							mousewheel: true,
							setCurrentTime: false,
							minutesSteps: 15,
							
						});
					</script>
				@endif


				@if ( !empty($disabled) && empty($time_value) && empty($date_value) )
					{!! !empty($label) ? '<span class="text-secondary fs-7">- kein ' .$label .' eingetragen -</span>' : '<span class="text-secondary fs-7">- keine Angaben! -</span>' !!}
				@endif

			{{-- reset btn --}}
				@if ( empty($disabled) && ( isset($date) || isset($time) ) )
					<button type="button" id="clear-{{ $input_id }}" class="btn btn-outline-secondary" title="{!! $label ?? $clear_title ?? $input_id .' Label' !!} leeren">
						<i class="fa-solid fa-circle-xmark"></i>
					</button>
				@endif
		</div>
		<script>
			$('#clear-{{ $input_id }}').on('click', function () {
				$('#date-{{ $input_id }}').val('');
				$('#time-{{ $input_id }}').val('');
			});
		</script>

	</div>

	




	{{-- @section('section-js')
		@parent
			@once

			@endonce
	@stop --}}

@endif