<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تفضيلات الإشعارات') }}</h1>
        <a href="{{ route('profile') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للملف الشخصي') }}</a>
    </div>

    @if(session('success'))
    <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        {{-- Desktop grid header --}}
        <div class="hidden md:block p-4 bg-gray-50 border-b">
            <div class="grid grid-cols-4 gap-4 text-sm font-medium text-gray-600">
                <div class="col-span-1">{{ __('نوع الإشعار') }}</div>
                <div class="text-center">{{ __('بريد') }}</div>
                <div class="text-center">{{ __('SMS') }}</div>
                <div class="text-center">{{ __('داخلي') }}</div>
            </div>
        </div>

        {{-- Desktop grid rows --}}
        <div class="hidden md:block divide-y">
            @foreach($eventTypes as $type => $label)
            <div class="grid grid-cols-4 gap-4 p-4 items-center hover:bg-gray-50">
                <div class="col-span-1 text-sm text-gray-800">{{ $label }}</div>
                <div class="text-center">
                    <input type="checkbox" wire:model="preferences.{{ $type }}.email"
                           class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                </div>
                <div class="text-center">
                    <input type="checkbox" wire:model="preferences.{{ $type }}.sms"
                           class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                </div>
                <div class="text-center">
                    <input type="checkbox" wire:model="preferences.{{ $type }}.in_app"
                           class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" disabled>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Mobile card layout --}}
        <div class="md:hidden divide-y">
            @foreach($eventTypes as $type => $label)
            <div class="p-4 space-y-3">
                <div class="text-sm font-medium text-gray-800">{{ $label }}</div>
                <div class="flex items-center gap-5">
                    <label class="flex items-center gap-1.5 text-xs text-gray-600">
                        <input type="checkbox" wire:model="preferences.{{ $type }}.email"
                               class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        {{ __('بريد') }}
                    </label>
                    <label class="flex items-center gap-1.5 text-xs text-gray-600">
                        <input type="checkbox" wire:model="preferences.{{ $type }}.sms"
                               class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        {{ __('SMS') }}
                    </label>
                    <label class="flex items-center gap-1.5 text-xs text-gray-600">
                        <input type="checkbox" wire:model="preferences.{{ $type }}.in_app"
                               class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" disabled>
                        {{ __('داخلي') }}
                    </label>
                </div>
            </div>
            @endforeach
        </div>

        <div class="p-4 bg-gray-50 border-t">
            <p class="text-xs text-gray-500 mb-3">{{ __('الإشعارات الداخلية لا يمكن تعطيلها') }}</p>
            <button wire:click="save" wire:loading.attr="disabled"
                    class="px-6 py-2.5 w-full sm:w-auto bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
                <span wire:loading.remove wire:target="save">{{ __('حفظ التفضيلات') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </div>
</div>
