@extends('layouts.admin', ['title' => __('messages.admin_settings')])

@section('content')
@php
    // Known groups in display order (with Arabic labels)
    $groupOrder = [
        'general'          => __('messages.settings_general'),
        'tabs'             => __('messages.settings_tabs'),
        'texts'            => __('messages.settings_texts'),
        'appearance'       => __('messages.settings_appearance'),
        'landing_hero'     => __('messages.settings_hero'),
        'landing_features' => __('messages.settings_features'),
        'landing_plans'    => __('messages.settings_plans'),
        'landing_how'      => __('messages.settings_how'),
        'landing_cta'      => __('messages.settings_cta'),
        'landing_navbar'   => __('messages.settings_navbar'),
        'landing_footer'   => __('messages.settings_footer'),
    ];
    // Append any unknown groups that exist in the DB so the page never silently hides them
    foreach ($settings->keys() as $g) {
        if (! isset($groupOrder[$g])) {
            $groupOrder[$g] = $g;
        }
    }
    $first = null;
    foreach ($groupOrder as $g => $_) {
        if ($settings->has($g)) { $first = $g; break; }
    }
    $first = $first ?? array_key_first($groupOrder);
@endphp

<form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" x-data="{ tab: '{{ $first }}' }" class="rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden">
    @csrf

    {{-- Tab bar --}}
    <div class="flex items-center gap-2 overflow-x-auto scrollbar-hide p-3 border-b border-white/5">
        @foreach($groupOrder as $g => $label)
            @if($settings->has($g))
                <button type="button" @click="tab = '{{ $g }}'"
                    :class="tab === '{{ $g }}' ? 'bg-teal-500 text-[#0a0f1e]' : 'bg-white/5 text-gray-200 hover:bg-white/10 border border-white/5'"
                    class="shrink-0 px-3.5 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap">
                    {{ $label }}
                </button>
            @endif
        @endforeach
    </div>

    {{-- Sections --}}
    @foreach($groupOrder as $g => $label)
        @if($settings->has($g))
            <section x-show="tab === '{{ $g }}'" x-cloak class="p-5 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($settings[$g] as $setting)
                    <label class="block {{ in_array($setting->type, ['textarea']) ? 'md:col-span-2' : '' }}">
                        @php $fieldLabel = app()->getLocale() === 'ar' ? ($setting->label_ar ?: $setting->key) : ($setting->label_en ?: $setting->label_ar ?: $setting->key); @endphp
                        <span class="block text-xs font-semibold text-gray-300 mb-1.5">
                            {{ $fieldLabel }}
                            <span class="text-gray-500 font-mono text-[10px]">({{ $setting->key }})</span>
                        </span>

                        @switch($setting->type)
                            @case('textarea')
                                @php $isList = str_contains($setting->key, '_features_'); @endphp
                                <textarea name="{{ $setting->key }}" rows="{{ $isList ? 4 : 3 }}"
                                    class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white font-{{ $isList ? 'mono' : 'sans' }} focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30">{{ old($setting->key, $setting->value) }}</textarea>
                                @if($isList)
                                    <span class="block text-[11px] text-teal-300/80 mt-1">{{ __('messages.separate_with_pipe') }} <code class="bg-white/5 px-1 rounded">|</code></span>
                                @endif
                                @break
                            @case('url')
                                <input type="url" name="{{ $setting->key }}" value="{{ old($setting->key, $setting->value) }}" dir="ltr"
                                    placeholder="https://…"
                                    class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
                                @break
                            @case('color')
                                <div class="flex items-center gap-2" x-data="{ v: '{{ old($setting->key, $setting->value ?: '#000000') }}' }">
                                    <input type="color" name="{{ $setting->key }}" x-model="v"
                                        class="w-12 h-10 rounded-lg bg-bgapp border border-white/10 cursor-pointer" />
                                    <input type="text" x-model="v" dir="ltr"
                                        @input="document.querySelector('input[type=color][name={{ $setting->key }}]').value = v"
                                        class="flex-1 rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white font-mono focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
                                </div>
                                @break
                            @case('boolean')
                                <label class="inline-flex items-center gap-2 cursor-pointer mt-1">
                                    <input type="hidden" name="{{ $setting->key }}" value="0" />
                                    <input type="checkbox" name="{{ $setting->key }}" value="1"
                                        @checked(old($setting->key, $setting->value) === '1' || old($setting->key, $setting->value) === 'true')
                                        class="rounded border-white/20 bg-bgapp text-teal-500 focus:ring-teal-500" />
                                    <span class="text-sm text-gray-200">{{ __('messages.active') }}</span>
                                </label>
                                @break
                            @case('image')
                                <div x-data="{
                                        preview: @js($setting->value),
                                        pick(e) {
                                            const f = e.target.files[0];
                                            if (!f) return;
                                            this.preview = URL.createObjectURL(f);
                                        }
                                    }" class="rounded-xl border border-dashed border-white/15 bg-bgapp/60 p-4">

                                    {{-- Preview --}}
                                    <div class="flex items-center gap-4">
                                        <div class="shrink-0 w-20 h-20 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center overflow-hidden">
                                            <template x-if="preview">
                                                <img :src="preview" class="max-w-full max-h-full object-contain" alt="logo preview" />
                                            </template>
                                            <template x-if="!preview">
                                                <span class="text-2xl text-gray-500">🖼️</span>
                                            </template>
                                        </div>

                                        <div class="flex-1">
                                            <label class="inline-flex items-center gap-2 cursor-pointer rounded-lg btn-teal px-4 py-2 text-xs">
                                                📤 {{ app()->getLocale() === 'ar' ? 'رفع صورة' : 'Upload image' }}
                                                <input type="file" name="{{ $setting->key }}" accept="image/png,image/jpeg,image/svg+xml,image/webp,image/gif"
                                                    @change="pick($event)" class="hidden" />
                                            </label>
                                            <p class="text-[11px] text-gray-400 mt-2">PNG / JPG / SVG / WebP — max 2MB</p>

                                            @if($setting->value)
                                                <label class="inline-flex items-center gap-1.5 mt-2 cursor-pointer text-xs text-red-300 hover:text-red-200">
                                                    <input type="checkbox" name="{{ $setting->key }}__clear" value="1"
                                                        class="rounded border-white/20 bg-bgapp text-red-500 focus:ring-red-500" />
                                                    {{ app()->getLocale() === 'ar' ? 'حذف الصورة الحالية' : 'Remove current image' }}
                                                </label>
                                            @endif
                                        </div>
                                    </div>

                                    {{-- Optional URL alternative --}}
                                    <details class="mt-3">
                                        <summary class="cursor-pointer text-[11px] text-gray-400 hover:text-white">{{ app()->getLocale() === 'ar' ? '…أو استخدم رابط URL مباشرة' : '…or paste an image URL' }}</summary>
                                        <input type="url" name="{{ $setting->key }}__url" placeholder="https://example.com/logo.png" dir="ltr"
                                            value="{{ old($setting->key . '__url', $setting->value) }}"
                                            class="mt-2 w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
                                    </details>
                                </div>
                                @break
                            @default
                                <input type="text" name="{{ $setting->key }}" value="{{ old($setting->key, $setting->value) }}"
                                    class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
                        @endswitch
                    </label>
                @endforeach
            </section>
        @endif
    @endforeach

    <div class="p-5 border-t border-white/5 flex justify-end">
        <button class="rounded-xl btn-teal px-6 py-2.5 text-sm">{{ __('messages.save_all_settings') }}</button>
    </div>
</form>
@endsection