@props([
    'title',
    'description' => null,
    'type' => 'radio', // radio | checkbox
    'name',
    'options' => [],
    'selected' => [],
    'columns' => 1,
])

@php
    // Normalize selected values
    if ($type === 'checkbox') {
        $selected = is_array($selected) ? $selected : [];
    } else {
        $selected = is_array($selected) ? ($selected[0] ?? null) : $selected;
    }

    $columnClass = match((int) $columns) {
        2 => 'col-md-6',
        3 => 'col-md-4',
        4 => 'col-md-3',
        default => 'col-12',
    };
@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">

        @if($description)
            <p class="text-muted mb-4">
                {{ $description }}
            </p>
        @endif

        <div class="row">

            @foreach($options as $option)

                @php
                    $checked = $type === 'checkbox'
                        ? in_array($option['value'], $selected)
                        : $selected == $option['value'];
                @endphp

                <div class="{{ $columnClass }} mb-3">

                    <div class="selection-box {{ $checked ? 'active' : '' }}">

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

                            <input
                                {{ $attributes->except(['class'])->merge(['class' => 'form-check-input mt-1']) }}
                                type="{{ $type }}"
                                id="{{ $name }}_{{ $loop->index }}"
                                name="{{ $type === 'checkbox' ? $name.'[]' : $name }}"
                                value="{{ $option['value'] }}"
                                @checked($checked)
                            >

                            <label
                                class="form-check-label ms-3 w-100"
                            >

                                @isset($option['icon'])
                                    <i class="{{ $option['icon'] }} me-2"></i>
                                @endisset

                                @if($option['value'] == 'radio')
                                    <!-- Radio SVG -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-radio h-4 w-4 text-blue-500">
                                        <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"></path>
                                        <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"></path>
                                        <circle cx="12" cy="12" r="2"></circle>
                                        <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"></path>
                                        <path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"></path>
                                    </svg>
                                @endif

                                @if($option['value'] == 'blocking')
                                    <!-- Blocking SVG -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-alert h-4 w-4 text-orange-500">
                                        <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                                        <path d="M12 8v4"></path>
                                        <path d="M12 16h.01"></path>
                                    </svg>
                                @endif
                                @if($option['value'] == 'sim')
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone h-4 w-4 text-green-600"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg>
                                @endif

                                {{ $option['label'] }}

                            </label>

                        </div>

                    </div>

                </div>

            @endforeach

        </div>

        @if($errors->has($name))
            <div class="text-danger mt-2">
                {{ $errors->first($name) }}
            </div>
        @endif

    </div>

</div>