@php
    $current = old($name, $value);
    $current = $current === null || $current === '' ? null : (int) round((float) $current);
    $required = $required ?? false;
@endphp
<div class="star-field" data-star-field>
    <div class="star-rating" role="radiogroup" aria-labelledby="{{ $name }}_label">
        @for($i = 5; $i >= 1; $i--)
            <input type="radio" id="{{ $name }}_{{ $i }}" name="{{ $name }}" value="{{ $i }}" @checked($current === $i) @if($required && $i === 5) required @endif>
            <label for="{{ $name }}_{{ $i }}" title="{{ $i }} star{{ $i > 1 ? 's' : '' }}">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.49l-5.87 3.09 1.12-6.54L2.5 9.41l6.56-.95z"/></svg>
                <span class="sr-only">{{ $i }} star{{ $i > 1 ? 's' : '' }}</span>
            </label>
        @endfor
    </div>
    <div class="star-meta">
        <span class="star-value" data-star-value>{{ $current ? $current.' / 5' : 'Not rated' }}</span>
        @unless($required)
            <button type="button" class="star-clear" data-star-clear title="Clear rating" aria-label="Clear rating" @if(! $current) hidden @endif>&times;</button>
        @endunless
    </div>
</div>
@once
@push('scripts')
<script>
document.addEventListener('change', (e) => {
  const field = e.target.closest('[data-star-field]');
  if (!field) return;
  field.querySelector('[data-star-value]').textContent = e.target.value + ' / 5';
  const clear = field.querySelector('[data-star-clear]');
  if (clear) clear.hidden = false;
});
document.addEventListener('click', (e) => {
  const clear = e.target.closest('[data-star-clear]');
  if (!clear) return;
  const field = clear.closest('[data-star-field]');
  field.querySelectorAll('input').forEach((i) => { i.checked = false; });
  field.querySelector('[data-star-value]').textContent = 'Not rated';
  clear.hidden = true;
});
</script>
@endpush
@endonce