@props([
'title',
'name',
'options' => [],
'selected' => [],
])
@php
$selected = is_array($selected) ? $selected : [$selected];
@endphp
<style>
.is-readonly {
pointer-events: none;
opacity: 0.75;
user-select: none;
}
</style>
<div class="card shadow-sm border-0 mb-4 {{ $this->isFormReadOnly ? 'is-readonly' : '' }}">

    <div class="card-header section-header">
        <h4 class="mb-0">{{ $title }}</h4>
    </div>

    <div class="card-body">

        @foreach($options as $option)

        <div class="selection-box mb-3">

            <div class="d-flex align-items-start">

                {{-- Group Radio --}}
                <div class="form-check me-3 mt-1">
                    <input
                        type="radio"
                        class="form-check-input"
                        name="equipment_group"
                        id="group_{{ $loop->index }}"
                        value="{{ $option['group'] }}"
                        wire:model.live="equipmentGroup"
                        value="{{ $option['group'] }}"
                        @checked($this->isGroupSelected($option['group']))
                    >
                </div>

                {{-- Children --}}
                <div class="flex-grow-1">

                    @foreach($option['children'] as $child)

                    <div class="form-check d-flex align-items-center mb-2">

                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="{{ $name }}_{{ $loop->parent->index }}_{{ $loop->index }}"
                            wire:model.live="equipment"
                            value="{{ $child['value'] }}"
                            @disabled($this->isGroupDisabled($option['group']))
                        >

                        <label
                            class="form-check-label ms-3"
                            for="{{ $name }}_{{ $loop->parent->index }}_{{ $loop->index }}">
                            @include('components.icons.equipment-icon', [
                            'icon' => $child['icon'] ?? null
                            ])

                            {{ $child['label'] }}
                        </label>

                    </div>

                    @endforeach

                </div>

            </div>

        </div>

        @endforeach

        @error($name)
        <div class="text-danger mt-2">
            {{ $message }}
        </div>
        @enderror

    </div>

</div>