{{-- 
	? To implement in Blade: 
			@includeIf('layouts.components.rounded_fixed_btn', ['rounded_fixed_btn' => ['save', 'archiv', 'delete']])
--}}

<style>
	.btn-rounded-fixed {
		transition: all 0.3s;
	}

	.btn-rounded-fixed:hover {
		filter: brightness(1.1);
		--bs-bg-opacity: 0.8;
		width: 120px!important;
		border-radius: 20px!important;
	}
</style>

@php
	$rounded_fixed_btn = $rounded_fixed_btn ?? [];
	$buttons = [
		'archiv' => [
			'class' => 'btn-archiv',
			'icon' 	=> 'archiv',
			'title' => 'Archivieren',
			'color' => 'secondary',
		],
		'save' => [
			'class' => 'btn-save',
			'icon' 	=> 'datei-speichern',
			'title' => 'Speichern',
			'color' => 'success',
		],
		'delete' => [
			'class' => 'btn-delete',
			'icon' 	=> 'loschen',
			'title' => 'Löschen',
			'color' => 'danger',
		],
	];
	$visibleButtons = array_intersect($rounded_fixed_btn, array_keys($buttons));
@endphp

@foreach ($visibleButtons as $buttonKey)
	<input type="hidden" name="{{ $buttonKey }}" value=0>
	<div class="border border-3 btn-rounded-fixed bg-{{ $buttons[$buttonKey]['color'] }} border-{{ $buttons[$buttonKey]['color'] }} bg-opacity-50 cursor-pointer p-3 rounded-circle fixed-bottom text-center translate-middle"
		style="width: 80px; display:none; bottom: 3%; transform: translate(-50%, 0)!important"
		onclick="$(this).prev().val(1)"
		title="{{ $buttons[$buttonKey]['title'] }}">
		@includeIf('layouts.components.icon', [
			'name' => $buttons[$buttonKey]['icon'],
			'width' => 40,
			'attr' => 'style=""',
			'class' => 'mx-auto bg-light rounded',
		])
	</div>
@endforeach

<script>
	$(function() {
		var btns = $('.btn-rounded-fixed');
		var btnWidth = 80;
		var btnMargin = 20; // Margin between buttons

		btns.delay(3000).fadeIn('slow');
		btns.on('click', function() {
			$(this).parents('form').submit();
		});

		function updatePositionFixedButtons() {
			var windowWidth = $(window).width();
			var totalWidth = (btns.length * btnWidth) + ((btns.length - 1) * btnMargin);
			var left = (windowWidth - totalWidth) / 2;

			btns.each(function(index) {
				$(this).css('left', left + (index * (btnWidth + btnMargin)));
			});
		}

		$(window).resize(function() {
			updatePositionFixedButtons();
		});

		updatePositionFixedButtons();
	});
</script>