<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
    <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-semibold text-gray-700">{{ __('الإيرادات') }}</h3>
        <select wire:model.live="period" class="text-xs rounded border-gray-200 py-1 px-2">
            <option value="today">{{ __('اليوم') }}</option>
            <option value="week">{{ __('الأسبوع') }}</option>
            <option value="month">{{ __('الشهر') }}</option>
            <option value="year">{{ __('السنة') }}</option>
        </select>
    </div>

    <div class="flex items-baseline gap-2">
        <p class="text-2xl font-bold text-gray-900" dir="ltr">{{ format_money($revenue) }}</p>
        @if($change != 0)
        <span class="text-xs font-medium {{ $change > 0 ? 'text-green-600' : 'text-red-600' }}">
            {{ $change > 0 ? '+' : '' }}{{ $change }}%
        </span>
        @endif
    </div>

    @if(count($byMethod) > 0)
    <div class="mt-3 pt-3 border-t border-gray-100 space-y-2">
        @foreach($byMethod as $method => $total)
        <div class="flex items-center justify-between text-xs">
            <span class="text-gray-500">{{ __($method) }}</span>
            <span class="font-medium text-gray-700" dir="ltr">{{ format_money($total) }}</span>
        </div>
        @endforeach
    </div>
    @endif
</div>
