@props([
    'radial' => false,
    'value' => 0,
    'color' => '',
    'size' => 'md',
    'id' => null // Добавлено для уникальности
])
<style>
    .progress1 {
        left: 50%;
        top: 2px;
        position: absolute;
        transform: translateX(-50%);
    }
    .progress {
        position: relative;
    }
</style>
@if($radial)
    <div {{ $attributes->class(['radial-progress', "radial-progress--$color" => $color, "radial-progress-$size" => $size]) }}
         style="--value: 0;" {{-- Начальная ширина для анимации --}}
         data-target-value="{{ $value }}"
    >
        <span id="radial-progress-number{{ $id }}">
            {{ $slot ?? '0%' }}
        </span>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const radialProgress = document.querySelector('.radial-progress[data-target-value]');
            const targetValue = radialProgress.dataset.targetValue;
            const progressNumber = document.getElementById('radial-progress-number{{ $id }}');
            let currentValue = 0;

            const animateProgress = setInterval(() => {
                if (currentValue < targetValue) {
                    currentValue++;
                    radialProgress.style.setProperty('--value', currentValue);
                    progressNumber.innerText = `${currentValue}%`;
                } else {
                    clearInterval(animateProgress);
                }
            }, 20);
        });
    </script>
@else
    <div {{ $attributes->class(['progress']) }}>
        <div class="progress-bar {{ $color ? "progress-bar--$color" : '' }}"
             role="progressbar"
             data-target-value="{{ $value }}"
             style="width: 0%;" {{-- Начальная ширина для анимации --}}
             id="progress-bar{{ $id }}"
        >
            <span class="progress1" id="progress-number{{ $id }}">0%</span>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const progressBar = document.getElementById('progress-bar{{ $id }}');
            const progressNumber = document.getElementById('progress-number{{ $id }}');
            const targetValue = progressBar.getAttribute('data-target-value');
            let currentValue = 0;

            const animateProgress = setInterval(() => {
                if (currentValue < targetValue) {
                    currentValue++;
                    progressBar.style.width = `${currentValue > 100 ? 100 : currentValue}%`;
                    progressNumber.innerText = `${currentValue > 100 ? 100 : currentValue}%`;
                } else {
                    clearInterval(animateProgress);
                }
            }, 20);
        });
    </script>
@endif