@extends('layouts.admin', ['title' => 'Settings'])

@section('admin-content')
<section class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
    <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
        <div>
            <h1 class="font-display text-3xl font-bold text-white">Platform settings</h1>
            <p class="mt-2 text-sm text-slate-400">Configure SMTP delivery and update your app branding without editing environment files manually.</p>
        </div>
        <div class="rounded-2xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-3 text-sm text-cyan-100">
            Changes apply on the next request.
        </div>
    </div>

    <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" class="mt-8 space-y-6">
        @csrf

        <div class="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
            <div class="rounded-[1.8rem] border border-white/10 bg-white/5 p-5">
                <h2 class="font-display text-2xl font-semibold text-white">Branding</h2>
                <p class="mt-2 text-sm text-slate-400">Set the product name, app tagline, logo, and favicon used throughout the portal.</p>

                <div class="mt-6 grid gap-4 md:grid-cols-2">
                    <div class="md:col-span-2">
                        <label class="mb-2 block text-sm text-slate-300">App name</label>
                        <input name="branding[app_name]" value="{{ old('branding.app_name', $branding['app_name']) }}" placeholder="FinCoreHub" title="Displayed in browser titles, app headers, and email sender names by default" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div class="md:col-span-2">
                        <label class="mb-2 block text-sm text-slate-300">Tagline</label>
                        <input name="branding[app_tagline]" value="{{ old('branding.app_tagline', $branding['app_tagline']) }}" placeholder="Powering modern businesses with smart SaaS solutions" title="Shown under the app name in public and dashboard layouts where branding text appears" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">Logo upload</label>
                        <input type="file" name="branding[logo]" title="Upload the main app logo used in headers and login screens" class="w-full rounded-2xl border border-dashed border-white/15 bg-slate-950/70 px-4 py-3 text-sm text-slate-300 file:mr-4 file:rounded-full file:border-0 file:bg-brand-500 file:px-4 file:py-2 file:font-semibold file:text-white">
                        <p class="mt-2 text-xs text-slate-500">PNG, JPG, WEBP, or SVG up to 4 MB.</p>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">Favicon upload</label>
                        <input type="file" name="branding[favicon]" title="Upload the favicon shown in browser tabs and bookmarks" class="w-full rounded-2xl border border-dashed border-white/15 bg-slate-950/70 px-4 py-3 text-sm text-slate-300 file:mr-4 file:rounded-full file:border-0 file:bg-brand-500 file:px-4 file:py-2 file:font-semibold file:text-white">
                        <p class="mt-2 text-xs text-slate-500">PNG, ICO, or WEBP up to 2 MB.</p>
                    </div>
                </div>

                <div class="mt-6 grid gap-4 sm:grid-cols-2">
                    <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                        <div class="text-xs uppercase tracking-[0.24em] text-slate-500">Current logo</div>
                        <div class="mt-4 flex items-center gap-4">
                            <div class="flex h-16 w-24 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/5 px-2">
                                <img src="{{ asset($branding['logo_path']) }}" alt="Current logo" class="max-h-full w-full object-contain">
                            </div>
                            <div class="min-w-0">
                                <div class="truncate text-sm font-medium text-white">{{ $branding['logo_path'] }}</div>
                                <div class="mt-1 text-xs text-slate-500">Used in the header and login screens.</div>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                        <div class="text-xs uppercase tracking-[0.24em] text-slate-500">Current favicon</div>
                        <div class="mt-4 flex items-center gap-4">
                            <img src="{{ asset($branding['favicon_path']) }}" alt="Current favicon" class="h-12 w-12 rounded-xl border border-white/10 object-cover bg-white">
                            <div class="min-w-0">
                                <div class="truncate text-sm font-medium text-white">{{ $branding['favicon_path'] }}</div>
                                <div class="mt-1 text-xs text-slate-500">Used in the browser tab.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 rounded-2xl border border-cyan-300/15 bg-cyan-400/10 px-4 py-4 text-sm text-cyan-100">
                    The uploaded logo is used in the app header and login screen. The favicon is used only for the browser tab and bookmark icon.
                </div>
            </div>

            <div class="rounded-[1.8rem] border border-white/10 bg-white/5 p-5">
                <h2 class="font-display text-2xl font-semibold text-white">SMTP configuration</h2>
                <p class="mt-2 text-sm text-slate-400">Set your outgoing mailer so password resets, notifications, and activation emails can be delivered reliably.</p>

                <div class="mt-6 grid gap-4 md:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm text-slate-300">Mailer</label>
                        <select name="smtp[mailer]" title="Choose log for local testing or smtp for live email delivery" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                            <option value="log" @selected(old('smtp.mailer', $smtp['mailer']) === 'log')>Log only</option>
                            <option value="smtp" @selected(old('smtp.mailer', $smtp['mailer']) === 'smtp')>SMTP</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">Encryption</label>
                        <select name="smtp[encryption]" title="Set TLS or SSL if your SMTP provider requires secure transport" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                            <option value="" @selected(old('smtp.encryption', $smtp['encryption']) === '')>None</option>
                            <option value="tls" @selected(old('smtp.encryption', $smtp['encryption']) === 'tls')>TLS</option>
                            <option value="ssl" @selected(old('smtp.encryption', $smtp['encryption']) === 'ssl')>SSL</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">SMTP host</label>
                        <input name="smtp[host]" value="{{ old('smtp.host', $smtp['host']) }}" placeholder="smtp.hostinger.com" title="The mail server hostname provided by your email service" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">SMTP port</label>
                        <input type="number" name="smtp[port]" value="{{ old('smtp.port', $smtp['port']) }}" placeholder="587" title="Most providers use 587 for TLS or 465 for SSL" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">SMTP username</label>
                        <input name="smtp[username]" value="{{ old('smtp.username', $smtp['username']) }}" placeholder="notifications@yourdomain.com" title="Usually the full email address or SMTP username from your provider" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">SMTP password</label>
                        <input type="password" name="smtp[password]" value="" placeholder="Leave blank to keep current password" title="Enter a new SMTP password only if you want to replace the currently stored one" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">From address</label>
                        <input type="email" name="smtp[from_address]" value="{{ old('smtp.from_address', $smtp['from_address']) }}" placeholder="hello@yourdomain.com" title="Emails will be sent from this address" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm text-slate-300">From name</label>
                        <input name="smtp[from_name]" value="{{ old('smtp.from_name', $smtp['from_name']) }}" placeholder="FinCoreHub" title="Emails will show this sender name in inboxes" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    </div>
                </div>

                <div class="mt-6 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-4 text-sm text-amber-100">
                    If you leave the SMTP password blank, the currently saved password stays unchanged.
                </div>

                <form method="POST" action="{{ route('admin.settings.test-email') }}" class="mt-5 rounded-2xl border border-white/10 bg-slate-950/40 p-4">
                    @csrf
                    <label class="mb-2 block text-sm text-slate-300">Send test email</label>
                    <div class="flex flex-col gap-3 sm:flex-row">
                        <input type="email" name="test_email" value="{{ old('test_email', auth()->user()->email) }}" placeholder="admin@yourdomain.com" title="Send a live test message using the currently saved SMTP configuration" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                        <button type="submit" class="rounded-2xl border border-cyan-300/25 bg-cyan-400/10 px-5 py-3 font-semibold text-cyan-100">Send test</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
            <button type="submit" class="rounded-2xl bg-brand-500 px-6 py-3 font-semibold text-white shadow-glow">Save settings</button>
            <p class="text-sm text-slate-400">After saving, reload the app to confirm the updated branding and mail configuration.</p>
        </div>
    </form>
</section>
@endsection