{{--
  Partial: _star_input.blade.php
  Parameters:
    $name — input name (e.g. rating_materi)
    $uid  — unique string suffix to avoid duplicate element IDs
--}}
<div class="star-group d-flex flex-row-reverse justify-content-end" data-group="{{ $name }}">
    @for($i = 5; $i >= 1; $i--)
    <input type="radio" id="{{ $uid }}_{{ $i }}" name="{{ $name }}" value="{{ $i }}" class="d-none star-radio">
    <label for="{{ $uid }}_{{ $i }}" title="{{ $i }} bintang" class="ms-1">
        <i class="fas fa-star fa-2x text-secondary star-icon-item"></i>
    </label>
    @endfor
</div>
<small class="text-secondary star-label-{{ $uid }}">Not graded yet</small>

<script>
(function() {
    var labels = ['', 'Sangat Kurang', 'Kurang', 'Cukup', 'Baik', 'Sangat Baik'];
    var group  = document.querySelector('[data-group="{{ $name }}"]');
    if (!group) return;

    var radios = group.querySelectorAll('.star-radio');
    var icons  = group.querySelectorAll('.star-icon-item');
    var lbl    = document.querySelector('.star-label-{{ $uid }}');

    function paintStars(val) {
        // flex-row-reverse means icon[0]=5, icon[1]=4, ... icon[4]=1
        icons.forEach(function(ic, idx) {
            var starVal = 5 - idx;
            if (starVal <= val) {
                ic.classList.remove('text-secondary');
                ic.classList.add('text-warning');
            } else {
                ic.classList.remove('text-warning');
                ic.classList.add('text-secondary');
            }
        });
        if (lbl) lbl.textContent = val > 0 ? val + ' — ' + labels[val] : 'Not graded yet';
    }

    group.querySelectorAll('label').forEach(function(label) {
        label.addEventListener('mouseenter', function() {
            var val = parseInt(this.getAttribute('for').split('_').pop());
            paintStars(val);
        });
        label.addEventListener('mouseleave', function() {
            var checked = group.querySelector('.star-radio:checked');
            paintStars(checked ? parseInt(checked.value) : 0);
        });
    });

    radios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            paintStars(parseInt(this.value));
        });
    });
})();
</script>