@props([
    'radial' => false,
    'value' => 0,
    'color' => '',
    'size' => 'md',
    'id' => null,
    'colorpercent' => 'text-gray-400',
])
<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 }}" id="{{ $id }}"
    >
    <span id="radial-progress-number{{ $id }}" class="{{ $colorpercent }}">
        {{ $slot ?? '0%' }}
    </span>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Получаем все элементы с классом radial-progress
            const radialProgressElements = document.querySelectorAll('.radial-progress[data-target-value]');

            radialProgressElements.forEach(radialProgress => {
                const targetValue = radialProgress.dataset.targetValue;
                const progressNumber = radialProgress.querySelector(`#radial-progress-number${radialProgress.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 {{ $colorpercent }}" 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}%`;
                    progressNumber.innerText = `${currentValue > 100 ? 100 : currentValue}%`;
                } else {
                    clearInterval(animateProgress);
                }
            }, 20);
        });
    </script>
@endif