@extends('layouts.app')

@section('title', 'Mail SMTP — ' . config('app.name'))

@section('content')
<div class="max-w-[1200px] mx-auto px-4 py-6 sm:py-8">
    <div class="mt-4 sm:mt-6 mb-6">
        <h1 class="text-2xl sm:text-3xl font-bold text-white">Mail SMTP & Templates</h1>
        <p class="text-slate-400 mt-1 text-sm">Konfigurasi pengirim <span class="text-cyan-400">support@geonet.co.id</span> dan template email transaksional.</p>
    </div>

    @include('partials.flash')

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6">
            <h2 class="text-lg font-semibold text-white mb-4">SMTP Settings</h2>
            <form method="POST" action="{{ route('mail-settings.smtp.update') }}" class="space-y-4" data-loading-message="Menyimpan pengaturan SMTP...">
                @csrf
                @method('PUT')
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">Mailer</label>
                        <select name="mail_mailer" class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                            <option value="smtp" @selected($settings['mail_mailer'] === 'smtp')>SMTP</option>
                            <option value="log" @selected($settings['mail_mailer'] === 'log')>Log (debug)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">Encryption</label>
                        <select name="mail_encryption" class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                            <option value="ssl" @selected($settings['mail_encryption'] === 'ssl')>SSL</option>
                            <option value="tls" @selected($settings['mail_encryption'] === 'tls')>TLS</option>
                            <option value="" @selected($settings['mail_encryption'] === '')>None</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Host</label>
                    <input name="mail_host" required value="{{ old('mail_host', $settings['mail_host']) }}"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">Port</label>
                        <input type="number" name="mail_port" required value="{{ old('mail_port', $settings['mail_port']) }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">Username</label>
                        <input name="mail_username" value="{{ old('mail_username', $settings['mail_username']) }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                    </div>
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Password @if($settings['has_stored_password'])<span class="text-slate-500">(kosongkan jika tidak diubah)</span>@endif</label>
                    <input type="password" name="mail_password" autocomplete="new-password"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">From Address</label>
                        <input type="email" name="mail_from_address" required value="{{ old('mail_from_address', $settings['mail_from_address']) }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">From Name</label>
                        <input name="mail_from_name" required value="{{ old('mail_from_name', $settings['mail_from_name']) }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                    </div>
                </div>
                <button type="submit" class="rounded-lg bg-cyan-600 hover:bg-cyan-500 px-5 py-2 text-sm font-medium text-white">
                    Save SMTP
                </button>
            </form>
        </div>

        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6">
            <h2 class="text-lg font-semibold text-white mb-2">Test SMTP (plain)</h2>
            <p class="text-slate-400 text-sm mb-4">Kirim email teks biasa untuk memastikan koneksi SMTP berjalan.</p>
            <form method="POST" action="{{ route('mail-settings.test') }}" class="space-y-4" data-loading-message="Mengirim email uji SMTP...">
                @csrf
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Recipient</label>
                    <input type="email" name="test_email" required placeholder="you@example.com"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <button type="submit" data-loading-message="Mengirim email uji SMTP..."
                    class="ui-btn rounded-lg bg-violet-600 hover:bg-violet-500 px-5 py-2 text-sm font-medium text-white">
                    Send Test Email
                </button>
            </form>
        </div>
    </div>

    <h2 class="text-xl font-semibold text-white mb-4">Email Templates</h2>

    @php
        $templateInfo = [
            'password_reset' => [
                'badge' => 'Reset Password',
                'badge_class' => 'bg-violet-950 text-violet-300 border-violet-800',
                'when' => 'Dikirim saat user meminta reset password (forgot password) atau admin mengirim link reset.',
            ],
            'password_changed' => [
                'badge' => 'Password Diubah',
                'badge_class' => 'bg-amber-950 text-amber-300 border-amber-800',
                'when' => 'Dikirim otomatis setelah password LDAP berhasil diubah (admin reset atau self-service reset).',
            ],
        ];
    @endphp

    @foreach ($templates as $template)
        @php $info = $templateInfo[$template->slug] ?? null; @endphp
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 mb-6" id="template-{{ $template->slug }}">
            <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
                <div>
                    <h3 class="text-lg font-semibold text-white">{{ $template->name }}</h3>
                    @if ($info)
                        <span class="inline-flex mt-2 rounded-full border px-2.5 py-0.5 text-xs font-medium {{ $info['badge_class'] }}">
                            {{ $info['badge'] }}
                        </span>
                    @endif
                </div>
                <code class="text-xs text-slate-500">{{ $template->slug }}</code>
            </div>

            @if ($info)
                <div class="rounded-lg bg-slate-800/60 border border-slate-700 px-4 py-3 mb-4 text-sm text-slate-300">
                    <span class="text-cyan-400 font-medium">Kapan dikirim:</span> {{ $info['when'] }}
                </div>
            @endif

            @if ($template->description)
                <p class="text-slate-400 text-sm mb-4">
                    <span class="text-slate-300 font-medium">Placeholder:</span> {{ $template->description }}
                </p>
            @endif

            <form method="POST" action="{{ route('mail-settings.templates.update', $template->slug) }}" class="space-y-4 mb-6" data-loading-message="Menyimpan template email...">
                @csrf
                @method('PUT')
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Subject</label>
                    <input name="subject" required value="{{ old('subject', $template->subject) }}"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Body HTML</label>
                    <textarea name="body_html" rows="12" required
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white font-mono">{{ old('body_html', $template->body_html) }}</textarea>
                </div>
                <button type="submit" class="rounded-lg bg-emerald-700 hover:bg-emerald-600 px-5 py-2 text-sm font-medium text-white">
                    Save Template
                </button>
            </form>

            @if (in_array($template->slug, ['password_reset', 'password_changed'], true))
                <div class="border-t border-slate-800 pt-5">
                    <h4 class="text-sm font-semibold text-white mb-2">Test Send Template</h4>
                    <p class="text-slate-400 text-sm mb-3">
                        Kirim preview template yang sudah disimpan (simpan perubahan dulu). Data contoh: user <code class="text-cyan-300">preview.user</code>.
                    </p>
                    <form method="POST" action="{{ route('mail-settings.templates.test', $template->slug) }}" class="flex flex-wrap gap-3 items-end" data-loading-message="Mengirim preview template email...">
                        @csrf
                        <div class="flex-1 min-w-[14rem]">
                            <label class="block text-sm text-slate-300 mb-1">Recipient</label>
                            <input type="email" name="test_email" required placeholder="you@example.com"
                                class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                        </div>
                        <button type="submit" data-loading-message="Mengirim preview template email..."
                            class="ui-btn rounded-lg bg-violet-700 hover:bg-violet-600 px-5 py-2 text-sm font-medium text-white">
                            Send Preview
                        </button>
                    </form>
                </div>
            @endif
        </div>
    @endforeach

    <aside class="bg-slate-900 border border-slate-800 rounded-2xl p-5 notes-panel">
        <h2 class="text-lg font-semibold text-white mb-4">Catatan</h2>
        <dl class="space-y-3 text-sm text-slate-400">
            <div>
                <dt class="font-medium text-cyan-400 mb-1">Pengirim default</dt>
                <dd>Email dikirim dari <code class="text-cyan-300">support@geonet.co.id</code> via SMTP.</dd>
            </div>
            <div>
                <dt class="font-medium text-violet-400 mb-1">Reset Password</dt>
                <dd>Template <em>password_reset</em> — link reset berlaku 60 menit. User juga bisa test dari halaman Profile.</dd>
            </div>
            <div>
                <dt class="font-medium text-amber-400 mb-1">Password Diubah</dt>
                <dd>Template <em>password_changed</em> — notifikasi keamanan setelah password LDAP diganti.</dd>
            </div>
            <div>
                <dt class="font-medium text-emerald-400 mb-1">Preview vs production</dt>
                <dd>Test template memakai data contoh. Link reset di preview tidak valid untuk reset nyata.</dd>
            </div>
        </dl>
    </aside>
</div>
@endsection