@extends('admin.layout')
@section('title', 'Settings')

@section('content')
<form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" class="space-y-6 max-w-2xl">
    @csrf
    @method('PUT')

    @foreach ($groups as $groupLabel => $keys)
        <div class="bg-white rounded-2xl border border-black/[0.06] p-7 space-y-4">
            <h2 class="text-[#0a0a0b] font-semibold text-[15px] mb-1">{{ $groupLabel }}</h2>
            @if ($groupLabel === 'WhatsApp Auto-Send (Meta Cloud API)')
                <p class="text-neutral-400 text-xs -mt-3">Optional — leave all 4 blank and assigning a lead to an outlet still works exactly as before (a manual "Send via WhatsApp" button). Fill all 4 in and it sends automatically the moment a lead is assigned, using your approved WhatsApp Business template. See the setup guide for how to get these from Meta for Developers.</p>
            @endif
            @if ($groupLabel === 'Google Reviews Sync')
                <p class="text-neutral-400 text-xs -mt-3">Once both fields are filled in, go to Reviews and click "Sync from Google" to pull in your real Google reviews automatically. Google's API only ever returns your 5 most relevant reviews — that's a Google limitation, not this site's — so anything beyond that still gets added manually.</p>
            @endif
            @if ($groupLabel === 'SEO & Google Marketing')
                <p class="text-neutral-400 text-xs -mt-3">All optional — paste in whichever IDs you already have from Google Analytics, Google Search Console and Google Ads. Leave the rest blank; nothing breaks either way, and each one activates itself as soon as it's filled in.</p>
            @endif
            @foreach ($keys as $key => $label)
                <div>
                    <label class="text-neutral-500 text-xs font-medium mb-1.5 block">{{ $label }}</label>
                    @if (in_array($key, ['hero_subheadline', 'team_text']))
                        <textarea name="{{ $key }}" rows="3" class="w-full border border-black/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-neutral-400">{{ old($key, $settings[$key] ?? '') }}</textarea>
                    @else
                        <input name="{{ $key }}" value="{{ old($key, $settings[$key] ?? '') }}" class="w-full border border-black/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-neutral-400">
                    @endif
                </div>
            @endforeach

            @if ($groupLabel === 'Site Logo' && isset($fileKeys['site_logo']))
                <div>
                    <label class="text-neutral-500 text-xs font-medium mb-1.5 block">{{ $fileKeys['site_logo'] }}</label>
                    @if (!empty($settings['site_logo']))
                        <div class="inline-flex items-center bg-neutral-50 border border-black/10 rounded-xl px-4 py-3 mb-2">
                            <img src="{{ $settings['site_logo'] }}" alt="Current logo" class="h-12 w-auto max-w-[240px] object-contain">
                        </div>
                        <label class="flex items-center gap-2 text-xs text-neutral-500 mb-2">
                            <input type="checkbox" name="remove_site_logo" value="1"> Remove logo (show the text "OSCAR WORLD" instead)
                        </label>
                    @endif
                    <input type="file" name="site_logo" accept=".png,.jpg,.jpeg,.webp,.svg,image/*" class="w-full border border-black/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-neutral-400 bg-white">
                    <p class="text-neutral-400 text-xs mt-1">Shown at the top-left of every page. The width adjusts automatically to keep the logo's proportions. Leave blank to keep the current one.</p>
                </div>
            @endif

            @if ($groupLabel === 'Homepage Hero' && isset($fileKeys['hero_image']))
                <div>
                    <label class="text-neutral-500 text-xs font-medium mb-1.5 block">{{ $fileKeys['hero_image'] }}</label>
                    @if (!empty($settings['hero_image']))
                        <img src="{{ $settings['hero_image'] }}" alt="Hero image" class="w-48 h-28 object-cover rounded-xl border border-black/10 mb-2">
                    @endif
                    <input type="file" name="hero_image" accept="image/*" class="w-full border border-black/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-neutral-400 bg-white">
                    <p class="text-neutral-400 text-xs mt-1">Upload a new image to replace the current one, or leave blank to keep it.</p>
                </div>
            @endif

            @if ($groupLabel === 'Why Us — Team Section' && isset($fileKeys['team_image']))
                <div>
                    <label class="text-neutral-500 text-xs font-medium mb-1.5 block">{{ $fileKeys['team_image'] }}</label>
                    @if (!empty($settings['team_image']))
                        <img src="{{ $settings['team_image'] }}" alt="Team image" class="w-48 h-28 object-cover rounded-xl border border-black/10 mb-2">
                    @endif
                    <input type="file" name="team_image" accept="image/*" class="w-full border border-black/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-neutral-400 bg-white">
                    <p class="text-neutral-400 text-xs mt-1">Upload a new image to replace the current one, or leave blank to keep it.</p>
                </div>
            @endif
        </div>
    @endforeach

    <div class="pt-2">
        <button type="submit" class="bg-[#0a0a0b] text-white text-sm font-semibold px-6 py-3 rounded-full hover:bg-[#222]">Save Settings</button>
    </div>
</form>
@endsection