{{-- Donut: proporción % ventas vs devoluciones (del total) + tasa dev/ventas al centro --}}
@props([
    'variant' => 'team',
])

<div class="tv-returns-donut">
    @if ($variant === 'seller')
        <div class="tv-returns-donut__ring"
             :class="{ 'tv-returns-donut__ring--alert': !isMissing(activeSeller()?.performance?.returns?.percent) && activeSeller().performance.returns.percent >= returnsAlertPercent }"
             :style="`--sales-share: ${naValue(sellerReturnsCompareShares(activeSeller()).salesShare)}`">
            <div class="tv-returns-donut__hole">
                <span class="tv-returns-donut__rate tv-animated-count"
                      :class="!isMissing(activeSeller()?.performance?.returns?.percent) && activeSeller().performance.returns.percent >= returnsAlertPercent ? 'tv-returns-donut__rate--alert' : 'tv-returns-donut__rate--ok'"
                      x-tv-count.percent="naValue(activeSeller()?.performance?.returns?.percent)"></span>
                <span class="tv-returns-donut__rate-label">dev. / ventas</span>
            </div>
        </div>
        <div class="tv-returns-donut__legend">
            <span class="tv-returns-donut__legend-item tv-returns-donut__legend-item--sales">
                <span class="tv-returns-donut__swatch" aria-hidden="true"></span>
                <span x-text="isMissing(sellerReturnsCompareShares(activeSeller()).salesShare) || sellerReturnsCompareShares(activeSeller()).salesShare === 0 ? 'N/A ventas' : `${sellerReturnsCompareShares(activeSeller()).salesShare}% ventas`"></span>
            </span>
            <span class="tv-returns-donut__legend-item tv-returns-donut__legend-item--returns">
                <span class="tv-returns-donut__swatch" aria-hidden="true"></span>
                <span x-text="isMissing(sellerReturnsCompareShares(activeSeller()).returnsShare) ? 'N/A dev.' : `${sellerReturnsCompareShares(activeSeller()).returnsShare}% dev.`"></span>
            </span>
        </div>
    @else
        <div class="tv-returns-donut__ring"
             :class="{ 'tv-returns-donut__ring--alert': !isMissing(snapshot?.metrics?.returns?.percent) && snapshot.metrics.returns.percent >= returnsAlertPercent }"
             :style="`--sales-share: ${naValue(teamReturnsCompareShares().salesShare)}`">
            <div class="tv-returns-donut__hole">
                <span class="tv-returns-donut__rate tv-animated-count"
                      :class="!isMissing(snapshot?.metrics?.returns?.percent) && snapshot.metrics.returns.percent >= returnsAlertPercent ? 'tv-returns-donut__rate--alert' : 'tv-returns-donut__rate--ok'"
                      x-tv-count.percent="naValue(snapshot?.metrics?.returns?.percent)"></span>
                <span class="tv-returns-donut__rate-label">dev. / ventas</span>
            </div>
        </div>
        <div class="tv-returns-donut__legend">
            <span class="tv-returns-donut__legend-item tv-returns-donut__legend-item--sales">
                <span class="tv-returns-donut__swatch" aria-hidden="true"></span>
                <span x-text="isMissing(teamReturnsCompareShares().salesShare) ? 'N/A ventas' : `${teamReturnsCompareShares().salesShare}% ventas`"></span>
            </span>
            <span class="tv-returns-donut__legend-item tv-returns-donut__legend-item--returns">
                <span class="tv-returns-donut__swatch" aria-hidden="true"></span>
                <span x-text="isMissing(teamReturnsCompareShares().returnsShare) ? 'N/A dev.' : `${teamReturnsCompareShares().returnsShare}% dev.`"></span>
            </span>
        </div>
    @endif
</div>