@extends('layouts.admin', [
    'title' => 'Email Settings',
    'pageTitle' => 'Email Settings',
    'active' => 'reminders',
])

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Configure SMTP delivery for booking emails, invoice reminders, and follow-up messages.</p>
            @include('admin.reminders.partials.nav', ['activeTab' => 'email'])
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <div class="space-y-5">
                <x-ui.card title="SMTP Settings">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="smtp_host" label="SMTP host" value="smtp.mailprovider.com" />
                        <x-form.input name="smtp_port" label="SMTP port" value="587" />
                        <x-form.input name="smtp_username" label="SMTP username" value="notifications@booklio.test" />
                        <x-form.input name="smtp_password" label="SMTP password" type="password" value="booklio-smtp-password" />
                        <x-form.select name="encryption" label="Encryption" value="tls" :options="['tls' => 'TLS', 'ssl' => 'SSL', 'none' => 'None']" />
                        <x-form.input name="from_email" label="From email" value="hello@booklio.test" />
                        <x-form.input name="from_name" label="From name" value="Booklio Beauty Salon" class="sm:col-span-2" />
                    </div>

                    <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                        <x-ui.button variant="secondary" data-booklio-placeholder="Email reminder settings are represented here; save persistence lives in Settings > Email SMTP.">Save Settings</x-ui.button>
                        <x-ui.button data-booklio-placeholder="Test email delivery will be connected to the notification mail service.">
                            <x-ui.icon name="send" class="h-4 w-4" />
                            Send Test Email
                        </x-ui.button>
                    </div>
                </x-ui.card>
            </div>

            <div class="space-y-5">
                <x-ui.card title="Email Health">
                    <div class="flex items-center gap-3">
                        <span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-50 text-booklio-primary">
                            <x-ui.icon name="mail" class="h-5 w-5" />
                        </span>
                        <div>
                            <p class="text-sm font-extrabold">SMTP ready</p>
                            <p class="text-xs font-medium text-booklio-muted">Last test delivered successfully</p>
                        </div>
                    </div>
                    <div class="mt-5 space-y-3 text-sm">
                        <div class="flex justify-between"><span class="font-bold text-booklio-muted">Open rate</span><span class="font-extrabold">64.2%</span></div>
                        <div class="flex justify-between"><span class="font-bold text-booklio-muted">Bounce rate</span><span class="font-extrabold text-emerald-600">0.8%</span></div>
                        <div class="flex justify-between"><span class="font-bold text-booklio-muted">Failed today</span><span class="font-extrabold text-red-600">2</span></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Delivery Notes">
                    <div class="space-y-4 text-sm leading-6 text-slate-600">
                        <p>Use authenticated SMTP credentials from the business owner or platform mail provider.</p>
                        <p>Test emails validate host, port, encryption, username, password, and sender identity before reminders go live.</p>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection