@extends('layouts.admin')

@section('title', 'Site Settings')
@section('page-title', 'Site Settings')

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ $groups[$group] }}</h3>
    </div>
    <div class="card-body">
        <div style="display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
            @foreach($groups as $key => $label)
                <a href="{{ route('admin.settings.index', $key) }}" 
                   class="btn {{ $key === $group ? 'btn-primary' : '' }}" 
                   style="{{ $key !== $group ? 'background: var(--border);' : '' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
        
        <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="group" value="{{ $group }}">
            
            @foreach($settings as $setting)
                <div class="form-group">
                    <label for="{{ $setting->key }}" class="form-label">{{ $setting->label }}</label>
                    
                    @if($setting->type === 'text')
                        <input type="text" class="form-control" id="{{ $setting->key }}" name="{{ $setting->key }}" value="{{ old($setting->key, $setting->value) }}">
                    @elseif($setting->type === 'textarea')
                        <textarea class="form-control" id="{{ $setting->key }}" name="{{ $setting->key }}" rows="3">{{ old($setting->key, $setting->value) }}</textarea>
                    @elseif($setting->type === 'image')
                        @if($setting->value)
                            <div style="margin-bottom: 0.5rem;">
                                <img src="{{ $setting->image_url }}" alt="{{ $setting->label }}" style="max-width: 200px; max-height: 100px; border-radius: 0.375rem;">
                            </div>
                        @endif
                        <input type="file" class="form-control" id="{{ $setting->key }}" name="{{ $setting->key }}" accept="image/*">
                    @elseif($setting->type === 'boolean')
                        <div>
                            <label>
                                <input type="checkbox" name="{{ $setting->key }}" value="1" {{ old($setting->key, $setting->value) ? 'checked' : '' }}>
                                Enabled
                            </label>
                        </div>
                    @endif
                    
                    @if($setting->description)
                        <small style="color: var(--text-light);">{{ $setting->description }}</small>
                    @endif
                    
                    @error($setting->key)
                        <small style="color: var(--danger)">{{ $message }}</small>
                    @enderror
                </div>
            @endforeach
            
            <div style="margin-top: 1.5rem;">
                <button type="submit" class="btn btn-primary">Save Settings</button>
            </div>
        </form>
    </div>
</div>
@endsection