@props([
  'name',
  'label'     => null,
  'selected'  => null,
  'options'   => [],
  'required'  => true,
  'tooltip'   => null,
  'class'     => '',
])

@php
  $inputId = 'toggle_' . $name;
@endphp

<div class="{{ $class }}"
     id="div_{{$name}}"
     data-toggle-name="{{ $name }}"
     data-required="{{ $required ? '1':'0' }}"
     data-label="{{ $label }}">

  @if($label)
    <label class="form-label d-block" for="{{ $inputId }}">
      {{ $label }}
      @if($tooltip)
        <i class="bi bi-question-circle text-muted ms-1"
           data-bs-toggle="tooltip"
           title="{{ $tooltip }}"
           style="cursor: pointer;"></i>
      @endif
    </label>
  @endif

  <div id="{{ $inputId }}" class="selectgroup selectgroup-pills">
    @foreach ($options as $value => $data)
      @php
        $isSelected = (string)$selected === (string)$value;
        $icon       = is_array($data) ? ($data['icon'] ?? null) : null;
        $text       = is_array($data) ? ($data['label'] ?? $value) : $data;
        $disabled   = is_array($data) && ($data['disabled'] ?? false);
      @endphp

      <label class="selectgroup-item">
        <input
          type="radio"
          name="{{ $name }}"
          value="{{ $value }}"
          class="selectgroup-input"
          @if($isSelected) checked @endif
          @if($disabled)   disabled @endif
        >
        <span class="selectgroup-button @if($disabled) disabled @endif">
          @if($icon)
            <i class="bi {{ $icon }} me-1"></i>
          @endif
          {{ $text }}
        </span>
      </label>
    @endforeach
  </div>

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

@once
<style>
  .selectgroup {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.selectgroup-item {
    position: relative;
}

.selectgroup-input {
    display: none;
}

.selectgroup-button {
    font-family: inherit;          
    padding: 6px 16px;
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid #ccccccb5;   
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.selectgroup-input:checked ~ .selectgroup-button {
    border-color:#2628b6;   
    color:#2628b6;
    animation: pulse 0.25s ease;
}

.selectgroup-button.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.selectgroup-button i {
    font-size: 1rem;
}

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}


</style>

<script>
document.addEventListener('DOMContentLoaded', function(){
  // initialize tooltips
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
          .forEach(el => new bootstrap.Tooltip(el));

  // attach one submit‐handler per form
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function(e){
      // for each toggle-group inside this form
      this.querySelectorAll('[data-toggle-name]').forEach(wrapper => {
        const name = wrapper.getAttribute('data-toggle-name');
        const required = wrapper.getAttribute('data-required') === '1';
        if (! required) return;  // skip if not required

        // correctly select inputs by name (quotes around name)
        const inputs = wrapper.querySelectorAll(`input[name="${name}"]`);
        const checked = Array.from(inputs).some(i => i.checked);

        if (! checked) {
          e.preventDefault();
          e.stopImmediatePropagation(); 
          const label = wrapper.getAttribute('data-label') || name;
            promptify({
                icon:'info',
                text: 'Please select a value for ' + label,
            });
        }
      });
    });
  });
});
</script>
@endonce