@extends('layouts.admin')

@section('title', 'Mandanten-Einstellungen')

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

    <div class="bg-white shadow rounded-lg p-6">
        <form action="{{ route('admin.settings.tenant.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- Anzeige-Einstellungen -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Anzeige-Einstellungen</h3>
                <p class="text-gray-600 mb-6">Bestimmen Sie, welche Informationen Kunden an Ihren Snackautomaten sehen können.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="border rounded-lg p-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input type="checkbox" 
                                       id="show_prices" 
                                       name="show_prices" 
                                       value="1"
                                       {{ old('show_prices', $tenant->show_prices ?? true) ? 'checked' : '' }}
                                       class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            </div>
                            <div class="ml-3">
                                <label for="show_prices" class="text-sm font-medium text-gray-700">
                                    Preise anzeigen
                                </label>
                                <p class="text-xs text-gray-500 mt-1">
                                    Wenn aktiviert, werden Produktpreise für Kunden sichtbar. 
                                    Deaktivieren Sie diese Option, wenn Sie Preise nicht öffentlich anzeigen möchten.
                                </p>
                            </div>
                        </div>
                        @error('show_prices')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="border rounded-lg p-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input type="checkbox" 
                                       id="show_stock" 
                                       name="show_stock" 
                                       value="1"
                                       {{ old('show_stock', $tenant->show_stock ?? true) ? 'checked' : '' }}
                                       class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            </div>
                            <div class="ml-3">
                                <label for="show_stock" class="text-sm font-medium text-gray-700">
                                    Verfügbarkeit anzeigen
                                </label>
                                <p class="text-xs text-gray-500 mt-1">
                                    Wenn aktiviert, sehen Kunden die verfügbare Anzahl der Produkte.
                                    Hilfreich für Transparenz, kann aber bei niedrigen Beständen abschreckend wirken.
                                </p>
                            </div>
                        </div>
                        @error('show_stock')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Vorschau -->
            <div class="border-t pt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Vorschau</h3>
                <p class="text-gray-600 mb-4">So sehen Ihre Einstellungen für Kunden aus:</p>
                
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="border rounded-lg p-4 bg-white max-w-sm">
                        <!-- Slot Number -->
                        <div class="text-center mb-2">
                            <span class="text-2xl font-bold text-blue-600">A1</span>
                        </div>
                        
                        <!-- Product Image -->
                        <div class="mb-2 text-center">
                            <div class="w-16 h-16 bg-gray-200 rounded mx-auto flex items-center justify-center">
                                <span class="text-gray-400 text-xs">🍫</span>
                            </div>
                        </div>
                        
                        <!-- Product Info -->
                        <div class="text-center">
                            <h3 class="font-semibold text-sm mb-1">Beispiel Schokolade</h3>
                            
                            <div id="price-preview" style="display: {{ old('show_prices', $tenant->show_prices ?? true) ? 'block' : 'none' }}">
                                <p class="text-lg font-bold text-green-600">1,50€</p>
                            </div>
                            
                            <div id="stock-preview" style="display: {{ old('show_stock', $tenant->show_stock ?? true) ? 'block' : 'none' }}">
                                <p class="text-xs text-gray-500">8 verfügbar</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex items-center justify-end pt-4 border-t">
                <button type="submit" 
                        class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors">
                    Einstellungen speichern
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const showPricesCheckbox = document.getElementById('show_prices');
    const showStockCheckbox = document.getElementById('show_stock');
    const pricePreview = document.getElementById('price-preview');
    const stockPreview = document.getElementById('stock-preview');
    
    showPricesCheckbox.addEventListener('change', function() {
        pricePreview.style.display = this.checked ? 'block' : 'none';
    });
    
    showStockCheckbox.addEventListener('change', function() {
        stockPreview.style.display = this.checked ? 'block' : 'none';
    });
});
</script>
@endsection