@extends('layouts.vending')

@section('title', 'Systemeinstellungen')

@section('content')
<div class="max-w-6xl mx-auto px-4">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Systemeinstellungen</h1>
        <p class="text-gray-600 mt-2">Konfigurieren Sie die Einstellungen für Ihre Snackautomaten-Verwaltung</p>
    </div>

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

    <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-8">
        @csrf
        @method('PUT')

        @foreach($settings as $groupName => $groupSettings)
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-6 border-b border-gray-200 pb-2">
                    @switch($groupName)
                        @case('inventory')
                            📦 Bestandsverwaltung
                            @break
                        @case('display')
                            🖥️ Anzeige-Einstellungen
                            @break
                        @case('general')
                            ⚙️ Allgemeine Einstellungen
                            @break
                        @case('lmiv')
                            📋 LMIV-Einstellungen
                            @break
                        @default
                            {{ ucfirst($groupName) }}
                    @endswitch
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @foreach($groupSettings as $setting)
                        <div class="@if($setting->type === 'string' && strlen($setting->description) > 100) md:col-span-2 @endif">
                            @if($setting->type === 'boolean')
                                <!-- Checkbox für Boolean-Werte -->
                                <div class="flex items-start">
                                    <div class="flex items-center h-5">
                                        <input type="hidden" name="settings[{{ $setting->key }}]" value="0">
                                        <input type="checkbox" name="settings[{{ $setting->key }}]" id="{{ $setting->key }}" 
                                               value="1" {{ $setting->value ? 'checked' : '' }}
                                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    </div>
                                    <div class="ml-3">
                                        <label for="{{ $setting->key }}" class="text-sm font-medium text-gray-700">
                                            {{ $setting->label }}
                                        </label>
                                        @if($setting->description)
                                            <p class="text-sm text-gray-500 mt-1">{{ $setting->description }}</p>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <!-- Input für andere Typen -->
                                <div>
                                    <label for="{{ $setting->key }}" class="block text-sm font-medium text-gray-700 mb-2">
                                        {{ $setting->label }}
                                        @if($setting->type === 'integer')
                                            <span class="text-gray-400">(Zahl)</span>
                                        @endif
                                    </label>
                                    
                                    @if($setting->type === 'integer')
                                        <input type="number" name="settings[{{ $setting->key }}]" id="{{ $setting->key }}" 
                                               value="{{ $setting->value }}" min="0"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    @elseif(strlen($setting->description) > 100)
                                        <textarea name="settings[{{ $setting->key }}]" id="{{ $setting->key }}" rows="3"
                                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">{{ $setting->value }}</textarea>
                                    @else
                                        <input type="text" name="settings[{{ $setting->key }}]" id="{{ $setting->key }}" 
                                               value="{{ $setting->value }}"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    @endif
                                    
                                    @if($setting->description)
                                        <p class="text-sm text-gray-500 mt-1">{{ $setting->description }}</p>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach

        <!-- Warnung und Speichern -->
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Wichtiger Hinweis</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>Änderungen an diesen Einstellungen wirken sich auf die gesamte Anwendung aus. Besonders die Deaktivierung der Bestandsverwaltung entfernt alle Bestandsanzeigen aus der öffentlichen und Admin-Ansicht.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Aktionsbuttons -->
        <div class="flex justify-end space-x-4 bg-gray-50 px-6 py-4 rounded-lg">
            <a href="{{ route('admin.dashboard') }}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Abbrechen
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Einstellungen speichern
            </button>
        </div>
    </form>

    <!-- Hilfe-Sektion -->
    <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h3 class="text-lg font-semibold text-blue-900 mb-4">Hilfe zu den Einstellungen</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-blue-800">
            <div>
                <h4 class="font-semibold mb-2">📦 Bestandsverwaltung</h4>
                <ul class="space-y-1 text-blue-700">
                    <li>• <strong>Bestandsverwaltung aktivieren:</strong> Hauptschalter für alle bestandsbezogenen Funktionen</li>
                    <li>• <strong>Warnschwelle:</strong> Ab dieser Anzahl wird ein Slot als "niedrig" markiert</li>
                </ul>
            </div>
            <div>
                <h4 class="font-semibold mb-2">🖥️ Anzeige-Einstellungen</h4>
                <ul class="space-y-1 text-blue-700">
                    <li>• <strong>Bestand öffentlich anzeigen:</strong> Zeigt Kunden die verfügbare Menge</li>
                    <li>• <strong>Ausverkaufte Produkte:</strong> Bestimmt ob leere Slots sichtbar bleiben</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection