@props([
    'variant' => 'ranking',
])

<div {{ $attributes->merge(['class' => 'tv-seller-performance tv-seller-performance--' . $variant]) }}>
    <div class="tv-seller-performance__cell tv-seller-performance__cell--sales">
        <div class="tv-seller-performance__label">
            <i class="fas fa-percent" aria-hidden="true"></i>
            <span>Meta</span>
        </div>
        <div class="tv-seller-performance__value tv-animated-count"
             :class="`tv-seller-performance__value--${semaphoreColor(seller?.performance?.sales_progress?.percent)}`"
             x-tv-count.percent="naValue(seller?.performance?.sales_progress?.percent)"></div>
        <div class="tv-seller-performance__sub">
            <span class="tv-animated-count" x-tv-count="naValue(seller?.sales_count_month)"></span> ventas
        </div>
    </div>

    <div class="tv-seller-performance__cell tv-seller-performance__cell--customers">
        <div class="tv-seller-performance__label">
            <i class="fas fa-users" aria-hidden="true"></i>
            <span>Clientes</span>
        </div>
        <div class="tv-seller-performance__value tv-seller-performance__value--dual">
            <span x-text="naValue(seller?.performance?.customers?.new_with_purchase_count)"></span>
            <span class="tv-seller-performance__sep">/</span>
            <span x-text="naValue(seller?.performance?.customers?.reactivated_count)"></span>
        </div>
        <div class="tv-seller-performance__sub" title="Nuevos (históricos) / Reactivados (> 6 meses)">nuevos / react. <i class="fas fa-info-circle" style="font-size: 0.7em; opacity: 0.6;"></i></div>
    </div>

    <div class="tv-seller-performance__cell tv-seller-performance__cell--orders">
        <div class="tv-seller-performance__label">
            <i class="fas fa-box" aria-hidden="true"></i>
            <span>Pedidos</span>
        </div>
        <div class="tv-seller-performance__value"
             x-text="naValue(seller?.performance?.orders?.monthly_unprocessed_count)"></div>
        <div class="tv-seller-performance__sub"
             x-text="isMissing(seller?.performance?.orders?.unprocessed_percent) ? 'N/A' : `${formatPercent(seller.performance.orders.unprocessed_percent)}% pend.`"></div>
    </div>

    <div class="tv-seller-performance__cell tv-seller-performance__cell--returns"
         :class="{ 'tv-seller-performance__cell--alert': !isMissing(seller?.performance?.returns?.percent) && seller.performance.returns.percent >= returnsAlertPercent }">
        <div class="tv-seller-performance__label">
            <i class="fas fa-undo" aria-hidden="true"></i>
            <span>Devol.</span>
        </div>
        <div class="tv-seller-performance__value"
             x-text="naValue(seller?.performance?.returns?.count)"></div>
        <div class="tv-seller-performance__sub"
             x-text="isMissing(seller?.performance?.returns?.percent) ? 'N/A' : `${formatPercent(seller.performance.returns.percent)}%`"></div>
    </div>
</div>