<div> @foreach ($maintenanceHistory->historyHosts as $historyHost) <div class="mb-3"> <div class="position-relative"> <div class="btn-toggle btn py-3 bg-primary w-100 text-start" style="--bs-bg-opacity: .2;" data-bs-toggle="collapse" data-bs-target="#collapse{{ $historyHost->id }}"> <b>{{ $historyHost->host->hostname }}</b> </div> <div class="position-absolute top-50 end-0 translate-middle-y px-3 py-2"> <x-form::checkbox groupClass="ms-auto" wire:key="{{ $historyHost->id . 'skip' }}" wire:model.live.debounce.250ms="maintenance_host_skipped.{{ $historyHost->id }}" name="maintenance_host_skipped[{{ $historyHost->id }}]" id="maintenance_host_skipped-{{ $historyHost->id }}" label="{{ __('Skip') }}" /> </div> </div> <div class="collapse" id="collapse{{ $historyHost->id }}" wire:ignore.self> <div class="card card-body mt-2"> @foreach ($historyHost->historyTasks as $historyTask) <x-form::checkbox wire:key="{{ $historyHost->id . $historyTask->id }}" wire:model.live.debounce.250ms="maintenance_task_status.{{ $historyHost->id }}.{{ $historyTask->id }}" name="maintenance_task_status[{{ $historyHost->id }}][{{ $historyTask->id }}]" id="maintenance_task_status-{{ $historyHost->id }}-{{ $historyTask->id }}" label="{{ $historyTask->maintenanceTask->task->name }}" /> <p>{!! $historyTask->maintenanceTask->task->description !!}</p> @endforeach </div> </div> </div> @endforeach </div>