@props([
    'label' => '',
    'current' => 0,
    'total' => null,
    'color' => 'primary',
    'icon' => null,
    'showPercent' => true,
    'animated' => true,
])

@php
    $percent = $total && $total > 0 ? min(100, ($current / $total) * 100) : 0;
    $remaining = $total ? max(0, $total - $current) : null;
@endphp

<div 
    {{ $attributes->merge(['class' => 'order-progress-widget']) }}
    @if($animated)
        x-data="{ show: false, currentWidth: 0 }"
        x-init="setTimeout(() => { show = true; currentWidth = {{ $percent }}; }, 100)"
        x-show="show"
        x-transition
    @endif
>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="d-flex align-items-center">
            @if($icon)
                <x-ui.nicon :name="$icon" class="text-{{ $color }} me-2"/>
            @endif
            <span class="small fw-medium">{{ $label }}</span>
        </div>
        
        <div class="text-end">
            <span class="fw-bold text-{{ $color }}">{{ number_format($current) }}</span>
            @if($total)
                <span class="text-muted">/</span>
                <span class="text-muted">{{ number_format($total) }}</span>
            @endif
        </div>
    </div>
    
    <div class="progress" style="height: 8px;">
        <div 
            class="progress-bar bg-{{ $color }}"
            role="progressbar"
            @if($animated)
                x-bind:style="'width: ' + currentWidth + '%'"
                style="width: 0%; transition: width 1s ease-out;"
            @else
                style="width: {{ $percent }}%"
            @endif
            aria-valuenow="{{ $percent }}"
            aria-valuemin="0"
            aria-valuemax="100"
        ></div>
    </div>
    
    <div class="d-flex justify-content-between mt-1">
        @if($showPercent)
            <span class="small text-{{ $color }}">{{ number_format($percent, 1) }}%</span>
        @else
            <span></span>
        @endif
        
        @if($remaining !== null)
            <span class="small text-muted">{{ __('Restant') }}: {{ number_format($remaining) }}</span>
        @endif
    </div>
</div>