Atomcms-edit/resources/themes/dusk/views/user/settings/preferences.blade.php

<x-app-layout>
    @push('title', __('Preferences'))

    <div class="col-span-12 flex flex-col gap-y-3 md:col-span-3">
        <x-user.settings.settings-navigation />
    </div>

    <div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
        <x-content.content-card icon="cog-icon">
            <x-slot:title>
                {{ __('Preferences') }}
            </x-slot:title>

            <x-slot:under-title>
                {{ __('Manage your preferences') }}
            </x-slot:under-title>

            <form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
                @method('PUT')
                @csrf

                {{-- Radio Settings --}}
                <div>
                    <h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
                    <div class="space-y-4">
                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
                            </div>
                            <input type="hidden" name="radio_auto_play" value="0">
                            <input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>

                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
                            </div>
                            <input type="hidden" name="radio_shouts" value="0">
                            <input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>

                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
                            </div>
                            <input type="hidden" name="radio_notifications" value="0">
                            <input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>
                    </div>
                </div>

                <hr style="border-color: var(--color-text-muted); opacity: 0.3;">

                {{-- Social Settings --}}
                <div>
                    <h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
                    <div class="space-y-4">
                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
                            </div>
                            <input type="hidden" name="friend_requests" value="0">
                            <input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>

                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Room invites') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
                            </div>
                            <input type="hidden" name="room_invites" value="0">
                            <input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>
                    </div>
                </div>

                <hr style="border-color: var(--color-text-muted); opacity: 0.3;">

                {{-- Client Settings --}}
                <div>
                    <h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
                    <div class="space-y-4">
                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
                            </div>
                            <input type="hidden" name="client_open_mode" value="same">
                            <input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>
                    </div>
                </div>

                <hr style="border-color: var(--color-text-muted); opacity: 0.3;">

                {{-- Notification Settings --}}
                <div>
                    <h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
                    <div class="space-y-4">
                        <label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
                            <div>
                                <span class="font-semibold" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
                                <p class="text-sm" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
                            </div>
                            <input type="hidden" name="email_notifications" value="0">
                            <input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
                                   class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
                        </label>
                    </div>
                </div>

                <div class="flex w-full justify-start md:justify-end">
                    <x-form.primary-button classes="lg:w-1/4">
                        {{ __('Save preferences') }}
                    </x-form.primary-button>
                </div>
            </form>
        </x-content.content-card>
    </div>
</x-app-layout>