{{--
    Social-login credentials form (Google + Facebook), shared by the owner and
    reseller settings screens via the ManagesSocialLogin trait. Secrets are
    write-only: a stored secret is never echoed back — the field shows a "leave
    blank to keep" hint when one already exists.
--}}
@php $socialHelp = $this->socialRedirectHelp(); @endphp

<div class="space-y-6">
    <p class="rf-hint">
        {{ __('Let visitors sign in with Google or Facebook. Each panel uses its own app — leave a provider blank to fall back to the global app configured by the platform owner.') }}
    </p>

    {{-- Google --}}
    <div class="rounded-xl border p-4" style="border-color:var(--color-border);">
        <div class="mb-4 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg" style="background:var(--color-surface-2);">
                    <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"/><path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33Z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.46 3.44 1.35l2.58-2.58C13.47.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"/></svg>
                </span>
                <div>
                    <div class="text-sm font-semibold" style="color:var(--color-text);">{{ __('Google') }}</div>
                    <div class="text-xs" style="color:var(--color-text-subtle);">{{ __('One Tap + Sign in with Google') }}</div>
                </div>
            </div>
            <x-admin.switch :active="$google_enabled" wire:click="$toggle('google_enabled')" />
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="rf-label">{{ __('Client ID') }}</label>
                <input type="text" wire:model="google_client_id" class="rf-input" autocomplete="off"
                       placeholder="1234567890-abcxyz.apps.googleusercontent.com">
                @error('google_client_id') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="rf-label">{{ __('Client secret') }}</label>
                <x-secret-input model="google_client_secret" :mono="false"
                                :placeholder="$google_has_secret ? __('Leave blank to keep current') : 'GOCSPX-…'" />
                @error('google_client_secret') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
        </div>
        <div class="mt-3">
            <x-social-redirect-hint :uris="$socialHelp['origins']"
                                    :label="__('Add these authorized JavaScript origins to your Google app:')"
                                    :domains-url="$socialHelp['domains_url']" />
        </div>
    </div>

    {{-- Facebook --}}
    <div class="rounded-xl border p-4" style="border-color:var(--color-border);">
        <div class="mb-4 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg" style="background:#1877F2;">
                    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M24 12c0-6.63-5.37-12-12-12S0 5.37 0 12c0 5.99 4.39 10.95 10.13 11.85v-8.38H7.08V12h3.05V9.36c0-3 1.79-4.67 4.53-4.67 1.31 0 2.68.24 2.68.24v2.95h-1.51c-1.49 0-1.95.93-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38C19.61 22.95 24 17.99 24 12Z"/></svg>
                </span>
                <div>
                    <div class="text-sm font-semibold" style="color:var(--color-text);">{{ __('Facebook') }}</div>
                    <div class="text-xs" style="color:var(--color-text-subtle);">{{ __('Continue with Facebook') }}</div>
                </div>
            </div>
            <x-admin.switch :active="$facebook_enabled" wire:click="$toggle('facebook_enabled')" />
        </div>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label class="rf-label">{{ __('App ID') }}</label>
                <input type="text" wire:model="facebook_app_id" class="rf-input" autocomplete="off" placeholder="1234567890123456">
                @error('facebook_app_id') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="rf-label">{{ __('App secret') }}</label>
                <x-secret-input model="facebook_app_secret" :mono="false"
                                :placeholder="$facebook_has_secret ? __('Leave blank to keep current') : ''" />
                @error('facebook_app_secret') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
        </div>
        <div class="mt-3">
            <x-social-redirect-hint :uris="$socialHelp['facebook']"
                                    :label="__('Add this redirect URI to your Facebook app:')"
                                    :domains-url="$socialHelp['domains_url']" />
        </div>
    </div>
</div>