<x-app-layout>
    <x-slot name="header">
        <div>
            <h2 class="text-2xl font-bold text-slate-900">Website Settings</h2>
            <p class="text-sm text-slate-500 mt-1">Manage front website content dynamically</p>
        </div>
    </x-slot>

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

    <div x-data="{ tab: 'general' }" class="max-w-5xl">
        <div class="flex flex-wrap gap-2 mb-6">
            @foreach ($groups as $groupKey => $group)
                <button type="button"
                    @click="tab = '{{ $groupKey }}'"
                    :class="tab === '{{ $groupKey }}' ? 'bg-brand-green text-white' : 'bg-white text-slate-600 hover:bg-slate-50'"
                    class="px-4 py-2 rounded-lg text-sm font-medium border border-slate-200 transition">
                    {{ $group['label'] }}
                </button>
            @endforeach
        </div>

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

            @foreach ($groups as $groupKey => $group)
                <div x-show="tab === '{{ $groupKey }}'" x-cloak class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 sm:p-8 space-y-6">
                    <h3 class="text-lg font-bold text-slate-900 border-b border-slate-200 pb-3">{{ $group['label'] }}</h3>

                    @foreach ($group['fields'] as $fieldKey => $field)
                        <div>
                            <label for="{{ $fieldKey }}" class="block text-sm font-medium text-slate-700 mb-1">
                                {{ $field['label'] }}
                            </label>
                            @if ($field['type'] === 'textarea')
                                <textarea id="{{ $fieldKey }}" name="{{ $fieldKey }}" rows="{{ $field['rows'] ?? 3 }}"
                                    class="w-full rounded-xl border-slate-300 shadow-sm focus:border-brand-green focus:ring-brand-green text-sm">{{ old($fieldKey, $settings[$fieldKey] ?? '') }}</textarea>
                            @else
                                <input type="{{ $field['type'] }}" id="{{ $fieldKey }}" name="{{ $fieldKey }}"
                                    value="{{ old($fieldKey, $settings[$fieldKey] ?? '') }}"
                                    class="w-full rounded-xl border-slate-300 shadow-sm focus:border-brand-green focus:ring-brand-green text-sm">
                            @endif
                            @error($fieldKey)
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            @if (! empty($field['hint']))
                                <p class="mt-1.5 text-xs text-slate-500">{{ $field['hint'] }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endforeach

            <div class="mt-6 flex items-center gap-4">
                <x-primary-button>Save Settings</x-primary-button>
                <a href="{{ route('login') }}" target="_blank" class="text-sm text-brand-green hover:text-brand-green-dark font-medium">
                    Preview Login Page &rarr;
                </a>
            </div>
        </form>
    </div>

    <style>[x-cloak] { display: none !important; }</style>
</x-app-layout>
