<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin</p>
            <h2 class="text-2xl font-bold text-slate-950 dark:text-white">Email Settings</h2>
        </div>
    </x-slot>

    <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Verification Control</p>
                <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Email Verification</h3>
                <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-300">
                    When this is ON, unverified users must verify their email before opening protected dashboards. When it is OFF, Laravel verification links still exist, but users are not blocked.
                </p>
            </div>
            <span class="rounded-full px-4 py-2 text-sm font-black {{ $emailVerificationEnabled ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200' }}">
                {{ $emailVerificationEnabled ? 'Currently ON' : 'Currently OFF' }}
            </span>
        </div>

        <form method="POST" action="{{ route('admin.email-settings.update') }}" class="mt-6">
            @csrf
            @method('PATCH')

            <label class="flex items-center gap-3 rounded-lg border border-blue-100 bg-blue-50/60 p-4 dark:border-blue-900/50 dark:bg-blue-950/30">
                <input
                    type="checkbox"
                    name="email_verification_enabled"
                    value="1"
                    @checked(old('email_verification_enabled', $emailVerificationEnabled))
                    class="rounded border-blue-300 text-blue-600 shadow-sm focus:ring-blue-500 dark:border-blue-800 dark:bg-slate-950"
                >
                <span>
                    <span class="block text-sm font-black text-slate-950 dark:text-white">Require email verification before dashboard access</span>
                    <span class="mt-1 block text-sm text-slate-600 dark:text-slate-300">Turn this off while fixing SMTP or if you want users to enter the app immediately.</span>
                </span>
            </label>

            <div class="mt-6 flex justify-end">
                <button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white shadow-lg shadow-blue-600/20 transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                    Save Email Settings
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
