@php
	use App\Enums\OrderCycleStateTypes;
	use App\Models\User;
	use App\Http\Controllers\Order_cycle_statesController;

	$order_cycle_state_types 	= OrderCycleStateTypes::asArray();
	$order_cycle_states 		= new Order_cycle_statesController();
@endphp

<ul class="list-group list-group-flush" data-cycle="{{ $cycle->type }}" data-progress="{{ $cycle->progress() }}">


	@php
		$cacle_type_as_string = "get" .ucfirst($cycle->type);
		$main_checkpoints 	= $order_cycle_states->getMain_checkpoints();
		$optional_checkpoints 	= $order_cycle_states->getOptional_checkpoints();

		$cycle_checkpoints 	= $order_cycle_states->$cacle_type_as_string();
		$states 			= $cycle->states()->get();
		$specific_checkpoints = s_array_merge($main_checkpoints, $cycle_checkpoints) ;
		foreach ($states as $state) {
			if ( !empty($optional_checkpoints[ $state->state_type ]) ) {
				$specific_checkpoints[ $state->state_type ] = $optional_checkpoints[ $state->state_type ];
			}
		}
		uasort($specific_checkpoints, fn($a, $b) => $a['percent'] <=> $b['percent']);

	@endphp

	@foreach ($specific_checkpoints as $checkpoint_type => $checkpoint_data)

		@php
			$state = $cycle->states()->where('state_type', $checkpoint_type)->first();
		@endphp

		@if ( $state != NULL )
			@php
				$title 		= '';
				if(!empty($state->state_description)) 	{ $title .= "<code class='p-2 fs-7'>" .$state->state_description ."</code><br><br>"; }
				if(!empty($state->updated_by)) 			{ $title .= "<span class=''>von " .User::find($state->updated_by)->name ."</span>"; }
			@endphp
		
			{{-- <li class="list-group-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#{{ "modal-state-$state->id" }}"> --}}
			<li class="list-group-item cursor-pointer">
				<div class="row fs-7" title="{!! $title !!}" data-bs-html="true">
					<div class="col-6 ps-0 text-end">
						{{ $checkpoint_data['name'] }}
					</div>
					<div class="col-6 pe-0">
						@php
							$color = 'secondary';
							if( $state->state_status === '1' ) { $color = 'warning animated-pill'; }
							if( $state->state_status === '3' ) { $color = 'warning'; }
							if( $state->state_status === '6' ) { $color = 'success'; }
							if( $state->state_status === '7' ) { $color = 'danger'; }
							if( $state->state_type 	=== 'um' ) { $color = 'warning'; }
						@endphp
						<span class="label badge rounded-pill text-bg-{{ $color }} p-2">
							{{ ($state->state_status === '1') ? 'in Arbeit' : date('d.m.Y H:i', strtotime($state->updated_at)) }}
							@if ( isset($state->state_description) && !empty($state->state_description) )
								@includeIf('layouts.components.icon', [ 
									'name' => 'info (2)', 
									'width' => '15', 
									'class' => 'rounded bg-white ms-1',
									'title' => '',
								])
							@endif
						</span>
					</div>
				</div>
			</li>

			{{-- @section('modal')
				@parent
				<div class="modal fade" id="{{ "modal-state-$state->id" }}" tabindex="-1" aria-labelledby="{{ "modal-state-$state->id" }}Label" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
						<div class="modal-content">
							<div class="modal-header card-header card-title">
								<h1 class="modal-title fs-5" id="{{ "modal-state-$state->id" }}Label">
									{{ $checkpoint_data['name'] }}
								</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">
								
								@includeIf('layouts.components.datetimepicker', [ 
									'label' 		=> 'Status Zeit einstellen',
									'input_id' 		=> "state-$state->id",
									'input_name' 	=> "state_id[$state->id]",
									'date'			=> true,
									'time'			=> true,
								])

								@includeIf('layouts.components.inputs', [ 
									'input_type' 	=> 'textarea',
									'input_id' 		=> "state_description-$state->id",
									'input_name' 	=> "state_description[$state->id]",
									'label'			=> 'Statusänderungs Grund',
									'value'			=> $state->state_description ?? '',
									'text_editor'	=> false,
								])

							</div>
							<div class="modal-footer dark-tobacco-ad-background">
								<button type="submit" class="btn btn-success btn-sm">Speichern</button>
								<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Schließen</button>
							</div>
						</div>
					</div>
				</div>
			@stop --}}

		@else
				
			{{-- <li class="list-group-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#{{ "modal-state-$checkpoint_data['name']" }}" title="Status setzen"> --}}
			<li class="list-group-item">
				<div class="row fs-7">
					<div class="col-6 ps-0 text-end">
						{{ $checkpoint_data['name'] }}
					</div>
					<div class="col-6 pe-0">
						<span class="label badge rounded-pill text-bg-secondary p-2">
							fehlt
						</span>
					</div>
				</div>
			</li>

			{{-- @section('modal')
				@parent
				<div class="modal fade" id="{{ "modal-state-$state_type" }}" tabindex="-1" aria-labelledby="{{ "modal-state-$state_type" }}Label" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
						<div class="modal-content">
							<div class="modal-header card-header card-title">
								<h1 class="modal-title fs-5" id="{{ "modal-state-$state_type" }}Label">
									{{ $state_type }}
								</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">
								
								@includeIf('layouts.components.datetimepicker', [ 
									'label' 		=> 'Status Zeit einstellen',
									'input_id' 		=> "state-$state_type",
									'input_name' 	=> "state_type[$state_type]",
									'date'			=> true,
									'time'			=> true,
								])

							</div>
							<div class="modal-footer dark-tobacco-ad-background">
								<button type="submit" class="btn btn-success btn-sm">Speichern</button>
								<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Schließen</button>
							</div>
						</div>
					</div>
				</div>
			@stop --}}
		@endif

	@endforeach
</ul>