{{-- 
	? 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


		? QR Scanner URL: https://blog.minhazav.dev/research/html5-qrcode
 
	? To implement in Blade: 
	*		@includeIf('layouts.components.file_upload', [ 
												'input_id' => 'example',
											])

--}}


@if ( !empty($input_id) )
@php
	$component_name = 'file_upload';
    $uuid = $input_id .'_' .uniqid();
@endphp

	{{-- @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">

		@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

		@if ( !empty($accept_format) && strtoupper($accept_format) === 'QR' )

			<div style="width: 500px margin:0 auto;" id="{{ $input_id }}"></div>
			<input type="hidden" name="{{ $input_name ?? $input_id }}" value="">
		
		@else
			{{-- @once
				<script src="{{ asset("js/components/$component_name.js") 	}}"></script>
			@endonce --}}

			<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

		@endif
	</div>

	@section('section-js')
		@parent
		@once
			
			@if ( !empty($accept_format) && strtoupper($accept_format) === 'QR' && empty($dont_auto_show_scanner) )

				<script src="{{ asset('js/html5-qrcode.min.js')				}}"></script>
				<script>
					const formatsToSupport = [
						Html5QrcodeSupportedFormats.QR_CODE,
						Html5QrcodeSupportedFormats.AZTEC,
						Html5QrcodeSupportedFormats.CODABAR,
						Html5QrcodeSupportedFormats.CODE_39,
						Html5QrcodeSupportedFormats.CODE_93,
						Html5QrcodeSupportedFormats.CODE_128,
						Html5QrcodeSupportedFormats.DATA_MATRIX,
						Html5QrcodeSupportedFormats.MAXICODE,
						Html5QrcodeSupportedFormats.ITF,
						Html5QrcodeSupportedFormats.EAN_13,
						Html5QrcodeSupportedFormats.EAN_8,
						Html5QrcodeSupportedFormats.PDF_417,
						Html5QrcodeSupportedFormats.RSS_14,
						Html5QrcodeSupportedFormats.RSS_EXPANDED,
						Html5QrcodeSupportedFormats.UPC_A,
						Html5QrcodeSupportedFormats.UPC_E,
						Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
					];
					var html5QrcodeScanner = new Html5QrcodeScanner(
						"{{ $input_id }}", 
						{ 	fps: 10, 
							qrbox: 400
							// supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
							// rememberLastUsedCamera: true
						}, 
						{ formatsToSupport: formatsToSupport }
					);

					function onScanSuccess(decodedText, decodedResult) {
						// Handle on success condition with the decoded text or result.
						console.log(`Scan result: ${decodedText}`, decodedResult);

						console.log($(this))
						alert(decodedResult);
						// ...

						
						// html5QrcodeScanner.clear();
						// ^ this will stop the scanner (video feed) and clear the scan area.
					}

					html5QrcodeScanner.render(onScanSuccess);
				</script>

			@endif

		@endonce
	@stop

@endif