<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
    <h4 class="text-base sm:text-lg font-semibold text-gray-700 mb-3">{{ __('كود خصم') }}</h4>

    <div class="flex flex-col sm:flex-row gap-2">
        <input type="text" wire:model="code" wire:keydown.enter="check"
               placeholder="{{ __('أدخل الكود') }}"
               class="flex-1 rounded-lg border-gray-300 text-sm uppercase py-2.5" dir="ltr">
        <button wire:click="check" wire:loading.attr="disabled" wire:target="check"
                class="w-full sm:w-auto px-4 py-2.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50">
            <span wire:loading.remove wire:target="check">{{ __('تحقق') }}</span>
            <span wire:loading wire:target="check">...</span>
        </button>
    </div>

    @if($result)
    <div class="mt-3 p-3 rounded-lg text-sm {{ $result['valid'] ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200' }}">
        <p class="{{ $result['valid'] ? 'text-green-700' : 'text-red-700' }} font-medium">
            {{ $result['message'] }}
        </p>
        @if($result['valid'])
        <div class="mt-2 text-green-600 text-xs space-y-1">
            <p>{{ $result['name'] }}</p>
            <p>
                @if($result['type'] === 'fixed_price')
                    {{ __('سعر ثابت') }} {{ $result['value_label'] }}
                @else
                    {{ __('خصم') }} {{ $result['value_label'] }}
                @endif
            </p>
            @if($result['remaining'])
            <p>{{ __('متبقي') }}: {{ $result['remaining'] }} {{ __('استخدام') }}</p>
            @endif
            @if($result['expires'])
            <p>{{ __('ينتهي') }}: {{ $result['expires'] }}</p>
            @endif
        </div>
        @endif
    </div>
    @endif
</div>
