@extends('layouts.admin')
@section('title', 'Setting')
@section('admin-content')
<div class="admin-heading"><div><div class="eyebrow">MAKE IT YOURS</div><h1>Setting<span class="gold">.</span></h1><p>Choose how messages appear and whether the theme switch is visible.</p></div></div>
<article class="panel" style="max-width:680px"><form class="stack-form" method="post" action="{{ route('admin.preferences.update') }}">@csrf @method('PUT')
<label>Backend message position<select name="message_position"><option value="top" @selected(old('message_position', $settings->message_position) === 'top')>Top of the page</option><option value="bottom-right" @selected(old('message_position', $settings->message_position) === 'bottom-right')>Bottom right of the page</option></select></label>
<label>Message duration (seconds)<input type="number" name="message_seconds" min="0" max="86400" required value="{{ old('message_seconds', $settings->message_seconds) }}"><small>0 keeps messages visible until dismissed. Timed messages fade in and out.</small></label>
<label class="setting-switch"><input type="checkbox" role="switch" data-autosave-switch data-save-url="{{ route('admin.preferences.toggle') }}" value="1" @checked(old('show_theme_toggle', $settings->show_theme_toggle))><span class="setting-switch-track" aria-hidden="true"><span></span></span><span>Show the light/dark mode switch in the top menu</span><strong class="setting-switch-state" aria-hidden="true"><span class="switch-on">On</span><span class="switch-off">Off</span></strong></label><p class="muted" style="font-size:12px">The theme switch setting applies to player and admin pages. Registration credits remain on their own page.</p>
<p id="switch-save-status" role="status" aria-live="polite" style="font-size:12px;margin:0">Switch changes save automatically.</p><button class="button small" style="align-self:flex-start" type="submit">Save message settings</button></form></article>
<style>
.setting-switch{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;cursor:pointer;color:var(--text);font-size:12px;line-height:1.6}
.setting-switch>input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.setting-switch-track{display:block;width:46px;height:26px;flex-shrink:0;padding:3px;border-radius:20px;background:#8b9795;transition:background .2s}
.setting-switch-track>span{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transition:transform .2s}
.setting-switch input:checked+.setting-switch-track{background:#498f88}
.setting-switch input:checked+.setting-switch-track>span{transform:translateX(20px)}
.setting-switch input:focus-visible+.setting-switch-track{outline:2px solid var(--gold);outline-offset:4px}
.setting-switch-state{font-size:11px;min-width:22px;font-weight:600;color:var(--muted)}
.setting-switch .switch-on{display:none}
.setting-switch input:checked~.setting-switch-state .switch-on{display:inline;color:#498f88}
.setting-switch input:checked~.setting-switch-state .switch-off{display:none}
@media(prefers-reduced-motion:reduce){.setting-switch-track,.setting-switch-track>span{transition:none}}
</style>
@endsection

@push('scripts')
<script src="{{ asset('wheel/setting-switch.js') }}" defer></script>
@endpush