@extends('admin.layouts.app')

@section('title', 'Settings')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Site Settings</h2>
            <p class="text-gray-500">Configure your website settings</p>
        </div>
    </div>

    <form action="{{ route('admin.settings.update') }}" method="POST">
        @csrf

        <div class="space-y-6">
            @foreach ($settings as $group => $groupSettings)
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4 capitalize">{{ $groups[$group] ?? ucfirst($group) }}
                        Settings</h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach ($groupSettings as $setting)
                            <div class="{{ $setting->type === 'textarea' ? 'md:col-span-2' : '' }}">
                                <label
                                    class="form-label">{{ $setting->label ?? ucfirst(str_replace('_', ' ', $setting->key)) }}</label>

                                @if ($setting->type === 'textarea')
                                    <textarea name="settings[{{ $setting->key }}]" rows="3" class="form-textarea">{{ $setting->value }}</textarea>
                                @elseif($setting->type === 'boolean')
                                    <select name="settings[{{ $setting->key }}]" class="form-select">
                                        <option value="1" {{ $setting->value ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ !$setting->value ? 'selected' : '' }}>No</option>
                                    </select>
                                @else
                                    <input type="text" name="settings[{{ $setting->key }}]"
                                        value="{{ $setting->value }}" class="form-input">
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-6 flex justify-end">
            <button type="submit" class="btn btn-primary btn-lg">Save Settings</button>
        </div>
    </form>
@endsection