{{-- 
	? To set: 
		*	required: 			input_id			 as  string for id tag  	
			array option:		label				 as  string html 
								input_name			 as  string if empty = input_id
								input_class			 as  string for custom css class in input field
								input_attr			 as  string for custom attr in input field 			{{ ! activ in textarea ! }} 
								title				 as  string for tooltip
								img_src				 as  string 
								accept_format		 as  string  default image optional qr
								required			 as  boolean default false 
								multiple			 as  boolean default false 
								max_file_size		 as  float 	 in MB -> default 15 MB

								dont_auto_show_scanner	 as  boolean  default flase


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

--}}

@php
	$component_name = 'image_manager';
@endphp

@if ( !empty($input_id) )

	{{-- @section('section-css')
		@parent
		@once
			<link rel="stylesheet" href="{{ asset("css/components/$component_name.css") }}">
		@endonce
	@stop --}}
	
	<div class="form-group px-0 text-center" data-component="{{ $component_name }}">

		@if ( !empty($label) )
			<label for="{{ $input_id }}" class="col-form-label {{ (isset($required) && $required === true) ? 'required' : '' }}">
				{!! $label ?? $input_id .' Label' !!}
				<span class="fs-7 text-{{ !empty($label_secoundary_text_color) ? $label_secoundary_text_color : "secondary" }}">( {{ !empty($max_file_size) ? $max_file_size : 15 }}MB zugelassen )</span>
			</label>
		@endif

        <div class="alert-placeholder"></div>

        <div 	class="file-wrapper col-md-12 text-center {{ !empty($input_class) ? $input_class : '' }}" 
                title="{{ !empty($title) ? $title : 'Datei hochladen' }}" 
                {{ !empty($input_attr) ? $input_attr : '' }} 
        >
            <img class="file-img" src="{{ !empty($img_src) ? $img_src : '' }}"  />
            <div class="close-button btn-trash" onClick="$(this).closest('.file-wrapper').fadeOut(1700, function(){ $(this).remove(); });" title="Bild verwerfen">
                {{-- <i class="fa fa-square-xmark" aria-hidden="true"></i> --}}
                <i class="fa fa-trash" aria-hidden="true"></i>
            </div>
            <div class="upload-button" onClick="$(this).next('input').click();">
                <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
            </div>
            <input 	id=			"{{ $input_id }}" 
                    name=		"{{ !empty($multiple) && $multiple === true ? '' : ($input_name ?? $input_id) }}" 
                    data-name=	"{{ !empty($multiple) && $multiple === true ? ($input_name ?? $input_id) .'[]' : ($input_name ?? $input_id) }}" 
                    class=		"file-upload hidden @error( ($input_name ?? $input_id) ) is-invalid @enderror" 
                    type=		"file" 
                    {{ isset($capture) ? 'capture='.$capture : '' }}
                    accept=		"{{ !empty($accept_format) ? $accept_format : 'image/*' }}"
                    onchange=	"upload_file(this);"
                    {{ !empty($multiple) && $multiple === true 	? 'multiple' : '' }} 
                    {{ !empty($required) && $required === true 	? 'required' : '' }}
            />

        </div>
        @error ( $input_name ?? $input_id )
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror

	</div>

	{{-- @section('section-js')
		@parent
		@once
            <script src="{{ asset("js/components/$component_name.js") 	}}"></script>
		@endonce
	@stop --}}

@endif