{{-- 
	? To set: 
		*	required: 			form_route			as  string exampe: route('orders.update', $order->id)
			array option:		allow_statuses		as  array  ids of allow statuses ['id' => 'output_name', ...]
								form_method			as  string default PUT
								value				as  string 
			
	? To implement in Blade: 
			@includeIf('layouts.components.btn_status', ['form_route' => route('orders.update', $order->id)])

			EXAMPLE:
						@includeIf('layouts.components.btn_status', [
							'form_route' 		=> route('orders.update', $order->id),
							'select_id'			=> "$order->status",
							'allow_statuses' 	=> [
								1 => 'Aktiv', 
								0 => 'Inaktiv', 
								2 => 'Storniert', 
								3 => 'Abgebrochen', 
								4 => 'Reaktiviert', 
								5 => 'Archiviert', 
								6 => 'Abgeschlossen', 
								7 => 'Fehlerhaft', 
							],
						])
--}}

@php
	use App\Enums\Statuses;
	$statuses = Statuses::asArray();
@endphp

@if ( !empty($form_route) )

	@includeIf('layouts.components.helper._section_css', ['component_name' => 'btn_status'])

	@php
		$status_color = [
			'active' 		=> ['color' => '#fff', 				'bg1' => '#41C7AF', 'bg2' => '#54E38E'],
			'reactivated' 	=> ['color' => 'rgb(61, 61, 61)', 	'bg1' => '#47d997', 'bg2' => '#e4d829'],
			'inactive' 		=> ['color' => '#fff', 				'bg1' => '#E13680', 'bg2' => '#A43AB2'],
			'cancelled' 	=> ['color' => '#e13636', 			'bg1' => '#ffde65', 'bg2' => '#e13636'],
			'archived' 		=> ['color' => 'rgb(61, 61, 61)', 	'bg1' => '#cacaca', 'bg2' => '#7f7f7f'],
			'blocked' 		=> ['color' => '#fff', 			 	'bg1' => '#e13636', 'bg2' => '#ffde65'],
			'completed' 	=> ['color' => '#fff', 				'bg1' => '#0cda68', 'bg2' => '#19a7f3'],
			'incorrect' 	=> ['color' => 'rgb(61, 61, 61)', 	'bg1' => '#eef165', 'bg2' => '#e80e0e'],
		];
		$style 	= '<style>';
		foreach ($status_color as $status => $attr) {
			$style .= 	'[data-status="' .$status .'"] {';
			$style .= 		'color:' .$attr['color'] .';';
			$style .= 		'background: linear-gradient(360deg, ' .$attr['bg1'] .' 10%, ' .$attr['bg2'] .' 360%);';
			$style .= 		'background: -webkit-linear-gradient(360deg, ' .$attr['bg1'] .' 10%, ' .$attr['bg2'] .' 360%);';
			$style .= 		'background: -moz-linear-gradient(360deg, ' .$attr['bg1'] .' 10%, ' .$attr['bg2'] .' 360%);';
			$style .= 	'}';
			$style .= 	'[data-status="' .$status .'"]:hover, [data-status="' .$status .'"].selection {';
			$style .= 		'color:' .$attr['color'] .';';
			$style .= 	'}';
			$style .= 	'.custom-select-trigger[data-status="' .$status .'"]:after {';
			$style .= 		'border-bottom: 1px solid ' .$attr['color'] .';';
			$style .= 		'border-right: 1px solid ' .$attr['color'] .';';
			$style .= 	'}';
		}
		$style .= '</style>';
		echo $style;

		// NOT INCLUDED
		// $status_name_DE [	
		// 	1 => 'Aktiv', 
		// 	0 => 'Inaktiv', 
		// 	2 => 'Storniert', 
		// 	3 => 'Abgebrochen', 
		// 	4 => 'Reaktiviert', 
		// 	5 => 'Archiviert', 
		// 	6 => 'Abgeschlossen', 
		// 	7 => 'Fehlerhaft', 
		// ];
	@endphp

	<div class="input-group mx-auto d-table w-auto">
		<section>
			{{-- <label for="potencial">Status</label> --}}
			<select name="status" class="custom-select sources" placeholder="Status">
				@foreach ($statuses as $status_name => $db_key)
                    @if (empty($allow_statuses) || isset($allow_statuses[$db_key instanceof \App\Enums\Statuses ? $db_key->value : $db_key]))
                        
                        @php
                            $select_key = !empty($select_id) ? $select_id : 1;

                            // Wenn $db_key ein Enum ist, stellen wir sicher, dass der tatsächliche Wert genutzt wird
                            $db_key_value = $db_key instanceof \App\Enums\Statuses ? $db_key->value : $db_key;

                            // Auch bei $status_name, falls dies ein Enum ist, verwenden wir den korrekten Wert
                            $status_name_value = $status_name instanceof \App\Enums\Statuses ? $status_name->value : $status_name;

                            // Der Vergleich muss auch den tatsächlichen Wert verwenden
                            $selected = ($db_key_value == $select_key || $status_name_value == $select_key) ? true : false;
                        @endphp

                        <option value="{{ $db_key_value }}" 
                                class="status {{ $selected === true ? 'selection' : '' }}" 
                                data-status="{{ $status_name_value }}" 
                                {{ $selected === true ? 'selected' : '' }}
                        >
                            {{ !empty($allow_statuses[$db_key_value]) ? $allow_statuses[$db_key_value] : Str::ucfirst($status_name_value) }}
                        </option>

                    @endif
                @endforeach
			</select>
		</section>
	</div>

	@section('modal')
		@parent

		<div class="modal fade" id="{{ "status-modal" }}" tabindex="-1" aria-labelledby="{{ "status-modal" }}Label" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
				<div class="modal-content">

					<form class="" id="status-modal-form" action="{{ $form_route }}" method="{{ !empty($form_method) ? $form_method : 'POST' }}">
						@csrf
						@if (empty($form_method))
							@method('PUT')
						@endif

						<div class="modal-header card-header card-title">
							<h1 class="modal-title fs-5" id="{{ "status-modal" }}Label">Status änderung bestätigen</h1>
							<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body card card-light">
							<input type="hidden" id="selected-status" name="status" value="">
							@includeIf('layouts.components.inputs', [ 
								'input_id' 		=> "status_description",
								'label'			=> 'Änderungs Grund',
								'required'		=> true,
								'input_type'	=> 'textarea',
								'input_attr'	=> 'minlength=5',
							])
						</div>
						<div class="modal-footer dark-tobacco-ad-background">
							<button type="submit" class="btn btn-success btn-sm">Bestätigen</button>
							<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Abbrechen</button>
						</div>

					</form>

				</div>
			</div>
		</div>

	@stop

	<script>
		$(".custom-select").each(function() {
			var classes = $(this).attr("class"),
			    id 		= $(this).attr("id"),
			    name 	= $(this).attr("name");
				text 	= $(this).attr("placeholder");

		  	var template = 	'<div class="' + classes + '">';
			  		template +=	'<span class="custom-select-trigger"' + $(this).attr("data-status",  $(this).find("option.selection").attr('data-status')) + '>' +
						    		text +
							    "</span>";
			  		template += '<div class="custom-options">';
		  	$(this).find("option").each(function() {
		    			template +=	'<span class="'	+	'custom-option ' +
									    				$(this).attr("class") + 
												'"' +
								      	 ' data-value="' 	+ $(this).attr("value") + '"' +
									     ' data-status="' 	+ $(this).attr("data-status") + '"' +
										 'data-bs-toggle="modal" data-bs-target="#status-modal"' +
										 'data-bs-status_id="' + $(this).attr("value") + '"' +
									'>' +
									    $(this).html() +
									"</span>";
		  	});
		  		template += "</div></div>";

		  	$(this).wrap('<div class="custom-select-wrapper"></div>');
		 	$(this).hide();
		  	$(this).after(template);
		});

		$(".custom-option.selection").each( customSelectOption );


		$(".custom-option:first-of-type").hover(
		  	function() {
		    	$(this).parents(".custom-options").addClass("option-hover");
		  	},
		  	function() {
		    	$(this).parents(".custom-options").removeClass("option-hover");
		  	}
		);


		$(".custom-select-trigger").on("mouseenter click", function() {
		  	$("html").one("mouseenter", function() {
		    	$(".custom-select").removeClass("opened");
		  	});
		  	$(this).parents(".custom-select").toggleClass("opened");
		  	event.stopPropagation();
		});
		$(".custom-select > .custom-options").on("mouseleave", function() {
	    	$(".custom-select").removeClass("opened");
		  	event.stopPropagation();
		});


		// $(".custom-option").on("click", customSelectOption);
		$(".custom-option").on("click", function(event) {
			const $status_modal 		= $('#status-modal');
			const $selected_status 		= $(this).data('status');
			const $selected_status_id 	= $(this).data('value');

			$status_modal.find('input#selected-status').val($selected_status_id);
		});
		$('button[type="submit"]').on('click', function() {
			console.log($(this).parents('form'));
		   	$(this).parents('form').addClass('was-validated');
		});


		function customSelectOption() {
			$(this)	
					.parents(".custom-select-wrapper")
		  			.find("select")
		  			.val($(this).data("value"));
		  	$(this)	
					.parents(".custom-options")
		  			.find(".custom-option")
		  			.removeClass("selection");
		  	$(this)
					.addClass("selection");
		  	$(this)
					.parents(".custom-select")
					.removeClass("opened");
		  	$(this)
		  			.parents(".custom-select")
		  			.find(".custom-select-trigger")
		  			.text($(this).text())
					.attr("data-status", $(this).attr("data-status"));
		}


		// const modal = document.getElementById('modal')
		// modal.addEventListener('show.bs.modal', event => {
		// 	// Button that triggered the modal
		// 	const button = event.relatedTarget
		// 	// Extract info from data-bs-* attributes
		// 	const recipient = button.getAttribute('data-bs-whatever')
		// 	// If necessary, you could initiate an AJAX request here
		// 	// and then do the updating in a callback.
		// 	//
		// 	// Update the modal's content.
		// 	const modalTitle = modal.querySelector('.modal-title')
		// 	const modalBodyInput = modal.querySelector('.modal-body input'	

		// 	modalTitle.textContent = `New message to ${recipient}`
		// 	modalBodyInput.value = recipient
		// })


		
	</script>

@endif