{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h2 class="text-xl font-semibold text-slate-900">SMTP & IMAP Settings</h2>
        <p class="mt-1 text-sm text-slate-500">Use Hostinger, Dovecot, Zoho, Gmail Workspace or any SMTP/IMAP provider. Password values are retained if left blank.</p>
      </div>
      <div class="flex gap-2">
        <a href="/email/inbox" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Inbox</a>
        <a href="/email/queue" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Queue</a>
        <a href="/email/templates" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Templates</a>
        <a href="/email/logs" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Logs</a>
      </div>
    </div>
  </div>

  <form method="post" action="/email/settings" class="space-y-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <section class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
      <h3 class="text-base font-semibold text-slate-900">Outgoing SMTP</h3>
      <div class="mt-4 grid gap-4 md:grid-cols-3">
        <label class="block"><span class="text-sm font-medium text-slate-700">SMTP Host</span><input name="smtp_host" value="{{ setting.smtp_host or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" placeholder="smtp.hostinger.com"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">SMTP Port</span><input type="number" name="smtp_port" value="{{ setting.smtp_port or 465 }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">Security</span><select name="smtp_security" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"><option value="SSL" {% if setting.smtp_security=='SSL' %}selected{% endif %}>SSL</option><option value="STARTTLS" {% if setting.smtp_security=='STARTTLS' %}selected{% endif %}>STARTTLS / TLS</option><option value="NONE" {% if setting.smtp_security=='NONE' %}selected{% endif %}>None</option></select></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">SMTP Username</span><input name="smtp_username" value="{{ setting.smtp_username or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" placeholder="notifications@yourdomain.com"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">SMTP Password</span><input type="password" name="smtp_password" value="" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" placeholder="Leave blank to keep existing"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">From Email</span><input name="from_email" value="{{ setting.from_email or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">From Name</span><input name="from_name" value="{{ setting.from_name or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" placeholder="A R R R & ASSOCIATES"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">Reply-to Email</span><input name="reply_to_email" value="{{ setting.reply_to_email or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></label>
      </div>
    </section>

    <section class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
      <h3 class="text-base font-semibold text-slate-900">Incoming IMAP</h3>
      <p class="mt-1 text-sm text-slate-500">Use Hostinger IMAP, Dovecot IMAP or any standard IMAP mailbox. Incoming replies can be fetched from Email → Inbox.</p>
      <div class="mt-4 grid gap-4 md:grid-cols-3">
        <label class="block"><span class="text-sm font-medium text-slate-700">IMAP Host</span><input name="imap_host" value="{{ setting.imap_host or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" placeholder="imap.hostinger.com"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">IMAP Port</span><input type="number" name="imap_port" value="{{ setting.imap_port or 993 }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">Security</span><select name="imap_security" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"><option value="SSL" {% if setting.imap_security=='SSL' %}selected{% endif %}>SSL</option><option value="STARTTLS" {% if setting.imap_security=='STARTTLS' %}selected{% endif %}>STARTTLS / TLS</option><option value="NONE" {% if setting.imap_security=='NONE' %}selected{% endif %}>None</option></select></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">IMAP Username</span><input name="imap_username" value="{{ setting.imap_username or '' }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></label>
        <label class="block"><span class="text-sm font-medium text-slate-700">IMAP Password</span><input type="password" name="imap_password" value="" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" placeholder="Leave blank to keep existing"></label>
      </div>
    </section>

    <section class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
      <div class="flex flex-col gap-1">
        <h3 class="text-base font-semibold text-slate-900">Notification Preferences</h3>
        <p class="text-sm text-slate-500">Enable only the email categories your firm wants. In-app alerts and popup alerts will continue separately.</p>
      </div>

      <div class="mt-4 grid gap-3 md:grid-cols-2">
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="is_active" value="1" class="mt-1" {% if setting.is_active %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Email integration active</span><span class="text-xs text-slate-500">Master switch for SMTP email sending.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_auth_emails" value="1" class="mt-1" {% if setting.send_auth_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Authentication / OTP emails</span><span class="text-xs text-slate-500">Login OTP, password reset OTP, password reset link, invite and password-change emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_alert_emails" value="1" class="mt-1" {% if setting.send_alert_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">General alert emails</span><span class="text-xs text-slate-500">Allows email copy of important in-app alerts.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_task_emails" value="1" class="mt-1" {% if setting.send_task_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Task and work emails</span><span class="text-xs text-slate-500">Task assigned, due today, overdue and status update emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_client_emails" value="1" class="mt-1" {% if setting.send_client_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Client communication emails</span><span class="text-xs text-slate-500">Client clarification, portal welcome and client-facing updates.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_document_emails" value="1" class="mt-1" {% if setting.send_document_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Document request / receipt emails</span><span class="text-xs text-slate-500">Document request and document received notifications.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_billing_emails" value="1" class="mt-1" {% if setting.send_billing_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Billing emails</span><span class="text-xs text-slate-500">Master switch for invoice, reminder and receipt emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_invoice_emails" value="1" class="mt-1" {% if setting.send_invoice_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Invoice and payment reminder emails</span><span class="text-xs text-slate-500">Invoice generated and payment reminder emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_payment_emails" value="1" class="mt-1" {% if setting.send_payment_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Payment / receipt emails</span><span class="text-xs text-slate-500">Payment received, receipt and online payment status emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_online_payment_emails" value="1" class="mt-1" {% if setting.send_online_payment_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Online payment emails</span><span class="text-xs text-slate-500">Cashfree / PayU success and failure emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_partner_review_emails" value="1" class="mt-1" {% if setting.send_partner_review_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Partner review emails</span><span class="text-xs text-slate-500">Partner review required and rework assigned emails.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_consultant_emails" value="1" class="mt-1" {% if setting.send_consultant_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Consultant emails</span><span class="text-xs text-slate-500">Consultant assignments, clarifications and submissions.</span></span>
        </label>
        <label class="flex items-start gap-3 rounded-xl border border-slate-200 p-3">
          <input type="checkbox" name="send_leave_attendance_emails" value="1" class="mt-1" {% if setting.send_leave_attendance_emails %}checked{% endif %}>
          <span><span class="block font-medium text-slate-800">Leave and attendance emails</span><span class="text-xs text-slate-500">Leave requests, approvals, rejections and punch missing alerts.</span></span>
        </label>
      </div>
      <div class="mt-6 flex justify-end"><button class="rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Save Email Settings</button></div>
    </section>
  </form>

  <section class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
    <h3 class="text-base font-semibold text-slate-900">Send Test Email</h3>
    <form method="post" action="/email/settings/test" class="mt-4 flex flex-col gap-3 sm:flex-row">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <input name="test_email" value="{{ current_user.email }}" class="min-w-0 flex-1 rounded-xl border border-slate-300 px-3 py-2">
      <button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Send Test</button>
    </form>
  </section>

  <section class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
    <h3 class="text-base font-semibold text-slate-900">Recent Email Logs</h3>
    <div class="mt-4 overflow-x-auto"><table class="min-w-full divide-y divide-slate-200 text-sm"><thead><tr class="text-left text-xs uppercase tracking-wide text-slate-500"><th class="py-2">Time</th><th>To</th><th>Subject</th><th>Status</th><th>Error</th></tr></thead><tbody class="divide-y divide-slate-100">{% for log in recent_logs %}<tr><td class="py-2 text-slate-500">{{ log.created_at_utc }}</td><td>{{ log.recipient_email }}</td><td>{{ log.subject }}</td><td><span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold">{{ log.status }}</span></td><td class="max-w-xs truncate text-red-600">{{ log.error_message or '' }}</td></tr>{% else %}<tr><td colspan="5" class="py-4 text-center text-slate-500">No emails logged yet.</td></tr>{% endfor %}</tbody></table></div>
  </section>
</div>
{% endblock %}