Network-MGMT/resources/views/admin/layout/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            Layout-Einstellungen
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8 space-y-6">

            @if(session('success'))
                <div class="p-4 bg-green-100 text-green-800 rounded-md">
                    {{ session('success') }}
                </div>
            @endif

            <form method="POST" action="{{ route('admin.layout.update') }}" enctype="multipart/form-data"
                  class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6 space-y-8">
                @csrf
                @method('PUT')

                {{-- Site-Name --}}
                <div>
                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
                        Allgemein
                    </h3>
                    <div>
                        <x-input-label for="site_name" value="Seitenname" />
                        <x-text-input id="site_name" name="site_name" type="text" class="mt-1 block w-full"
                            value="{{ old('site_name', $settings['site_name'] ?? 'Network-MGMT') }}" required />
                        <p class="mt-1 text-xs text-gray-500">Wird im Browser-Tab und in der Navigation angezeigt.</p>
                        <x-input-error :messages="$errors->get('site_name')" class="mt-2" />
                    </div>
                </div>

                {{-- Logo --}}
                <div>
                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
                        Logo
                    </h3>

                    @if(!empty($settings['site_logo']))
                        <div class="mb-4 flex items-center space-x-4">
                            <img src="{{ asset('storage/' . $settings['site_logo']) }}"
                                 alt="Logo" class="h-12 object-contain border rounded p-1 bg-gray-50">
                            <a href="{{ route('admin.layout.removeLogo') }}"
                               onclick="return confirm('Logo wirklich entfernen?')"
                               class="text-sm text-red-600 hover:text-red-800">Logo entfernen</a>
                        </div>
                    @endif

                    <div>
                        <x-input-label for="site_logo" value="Logo hochladen (PNG, JPG – max. 2 MB)" />
                        <input id="site_logo" name="site_logo" type="file" accept="image/*"
                               class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
                                      file:rounded-md file:border-0 file:text-sm file:font-medium
                                      file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
                        <x-input-error :messages="$errors->get('site_logo')" class="mt-2" />
                    </div>
                </div>

                {{-- Button-Farbe --}}
                <div>
                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
                        Button-Farbe
                    </h3>
                    <div class="flex items-center space-x-4">
                        <input id="button_color" name="button_color" type="color"
                               value="{{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}"
                               class="h-10 w-20 rounded border border-gray-300 cursor-pointer p-1" />
                        <div>
                            <p class="text-sm text-gray-700 dark:text-gray-300">Primärfarbe für Buttons und Akzente</p>
                            <p class="text-xs text-gray-500" id="color_preview_text">
                                {{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}
                            </p>
                        </div>
                        <button type="button"
                            id="preview_btn"
                            style="background-color: {{ old('button_color', $settings['button_color'] ?? '#4f46e5') }}"
                            class="px-4 py-2 text-white text-sm font-medium rounded-md transition">
                            Vorschau
                        </button>
                    </div>
                    <x-input-error :messages="$errors->get('button_color')" class="mt-2" />
                </div>

                {{-- Dark / Light Mode --}}
                <div>
                    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4 pb-2 border-b border-gray-200">
                        Erscheinungsbild
                    </h3>
                    <div class="flex space-x-4">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="theme_mode" value="light"
                                   {{ ($settings['theme_mode'] ?? 'light') === 'light' ? 'checked' : '' }}
                                   class="text-indigo-600 focus:ring-indigo-500" />
                            <span class="text-sm text-gray-700 dark:text-gray-300">
                                ☀️ Hell (Light Mode)
                            </span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="theme_mode" value="dark"
                                   {{ ($settings['theme_mode'] ?? 'light') === 'dark' ? 'checked' : '' }}
                                   class="text-indigo-600 focus:ring-indigo-500" />
                            <span class="text-sm text-gray-700 dark:text-gray-300">
                                🌙 Dunkel (Dark Mode)
                            </span>
                        </label>
                    </div>
                </div>

                {{-- Speichern --}}
                <div class="flex justify-end pt-2 border-t border-gray-200">
                    <button type="submit"
                        id="save_btn"
                        style="background-color: {{ $settings['button_color'] ?? '#4f46e5' }}"
                        class="inline-flex items-center px-6 py-2 text-white text-sm font-medium rounded-md hover:opacity-90 transition">
                        Einstellungen speichern
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const colorInput = document.getElementById('button_color');
        const previewBtn = document.getElementById('preview_btn');
        const saveBtn    = document.getElementById('save_btn');
        const colorText  = document.getElementById('color_preview_text');

        colorInput.addEventListener('input', function () {
            previewBtn.style.backgroundColor = this.value;
            saveBtn.style.backgroundColor    = this.value;
            colorText.textContent             = this.value;
        });
    </script>
</x-app-layout>