@extends('layouts.super-admin', ['title' => 'WhatsApp Global Settings - Booklio Super Admin', 'pageTitle' => 'WhatsApp Global Settings', 'active' => 'whatsapp'])

@section('content')
    <div class="space-y-5">
        @if (session('status'))
            <div class="rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">{{ session('status') }}</div>
        @endif

        <x-ui.card title="WhatsApp Global Settings" description="Global provider credentials and fallback test message configuration.">
            <form method="POST" action="{{ $formAction }}" class="space-y-5">
                @csrf
                <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                    <label class="flex items-center justify-between gap-4">
                        <span>
                            <span class="block text-sm font-extrabold text-booklio-dark">Enable WhatsApp globally</span>
                            <span class="mt-1 block text-xs leading-5 text-booklio-muted">Business owners can still configure tenant-level credentials later.</span>
                        </span>
                        <input name="enabled" value="1" type="checkbox" @checked((bool) ($settings['enabled'] ?? false)) class="h-4 w-4 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                    </label>
                </div>
                <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    <x-form.input name="phone_number_id" label="Phone Number ID" value="{{ $settings['phone_number_id'] ?? '' }}" />
                    <x-form.input name="business_account_id" label="Business Account ID" value="{{ $settings['business_account_id'] ?? '' }}" />
                    <x-form.input name="access_token" type="password" label="Access Token" value="{{ $settings['access_token'] ?? '' }}" help="Backend-ready placeholder. Encrypt real access tokens before production use." />
                    <x-form.input name="webhook_verify_token" label="Webhook Verify Token" value="{{ $settings['webhook_verify_token'] ?? '' }}" />
                    <x-form.input name="test_phone" label="Test phone number" value="{{ $settings['test_phone'] ?? '' }}" />
                    <x-form.input name="template_namespace" label="Template namespace" value="{{ $settings['template_namespace'] ?? '' }}" />
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
                    <x-ui.button type="button" variant="secondary">Send Test Message</x-ui.button>
                    <x-ui.button type="submit">Save WhatsApp Settings</x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>
@endsection