@extends('admin.layouts.app')

@section('title', 'Settings')
@section('subtitle', 'Application configuration')

@push('styles')
<style>
    .settings-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    @media (max-width: 768px) {
        .settings-grid { grid-template-columns: 1fr; }
        .form-grid { grid-template-columns: 1fr; }
        .form-grid .full { grid-column: 1; }
        .test-smtp-wrap { flex-direction: column; }
        .section-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
        .section-footer .btn-save { width: 100%; }
    }


    /* ── Setting section card ────────────────────────────────── */
    .setting-section {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .setting-section:last-child { margin-bottom: 0; }

    .section-header {
        display: flex; align-items: center; gap: 12px;
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
    }

    .section-header-icon {
        width: 36px; height: 36px;
        border-radius: 9px;
        background: rgba(139,0,0,0.2);
        border: 1px solid rgba(139,0,0,0.3);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        color: var(--gold);
    }

    .section-header-icon svg { width: 17px; height: 17px; }

    .section-header-info { flex: 1; }
    .section-title { font-size: 14px; font-weight: 600; color: var(--text); }
    .section-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    .smtp-status {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 10px;
        border-radius: 100px;
        font-size: 11px; font-weight: 500;
    }

    .smtp-status-dot { width: 6px; height: 6px; border-radius: 50%; }

    .status-configured { background: rgba(34,197,94,0.12); color: #86efac; border: 1px solid rgba(34,197,94,0.2); }
    .status-configured .smtp-status-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; }

    .status-missing { background: rgba(251,146,60,0.12); color: #fdba74; border: 1px solid rgba(251,146,60,0.2); }
    .status-missing .smtp-status-dot { background: #fb923c; }

    /* ── Form ────────────────────────────────────────────────── */
    .section-body { padding: 24px; }

    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-grid .full { grid-column: 1 / -1; }

    .form-group { display: flex; flex-direction: column; gap: 6px; }

    .form-label {
        font-size: 10px; letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-muted); font-weight: 500;
    }

    .form-input, .form-select {
        padding: 10px 14px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--text);
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        outline: none;
        transition: border-color 0.2s;
        width: 100%;
    }

    .form-input::placeholder { color: var(--text-dim); }
    .form-input:focus, .form-select:focus { border-color: rgba(139,0,0,0.6); }
    .form-select option { background: var(--surface-2); }

    .form-hint { font-size: 11px; color: var(--text-dim); }

    /* ── Footer ──────────────────────────────────────────────── */
    .section-footer {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 24px;
        border-top: 1px solid var(--border);
        background: var(--surface-2);
    }

    .btn-save {
        padding: 9px 22px;
        background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-mid) 100%);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 9px;
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; font-weight: 500;
        cursor: pointer;
        transition: opacity 0.15s;
    }

    .btn-save:hover { opacity: 0.85; }

    /* ── Test SMTP ───────────────────────────────────────────── */
    .test-smtp-wrap {
        display: flex; gap: 8px; align-items: flex-end;
    }

    .test-smtp-wrap .form-group { flex: 1; }

    .btn-test {
        padding: 10px 18px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--text-muted);
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }

    .btn-test:hover { border-color: var(--border-hover); color: var(--text); }
</style>
@endpush

@section('content')
<div class="settings-grid">

    <div>

        {{-- SMTP Section --}}
        <div class="setting-section" id="smtp">
            <div class="section-header">
                <div class="section-header-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                </div>
                <div class="section-header-info">
                    <div class="section-title">Email / SMTP</div>
                    <div class="section-desc">Used to send credentials to new treasurers</div>
                </div>
                @if($smtp['smtp_host'])
                    <span class="smtp-status status-configured">
                        <span class="smtp-status-dot"></span> Configured
                    </span>
                @else
                    <span class="smtp-status status-missing">
                        <span class="smtp-status-dot"></span> Not configured
                    </span>
                @endif
            </div>

            <form action="/admin/settings/smtp" method="POST">
                @csrf
                <div class="section-body">
                    <div class="form-grid">

                        <div class="form-group">
                            <label class="form-label">SMTP Host</label>
                            <input type="text" name="smtp_host" class="form-input"
                                value="{{ old('smtp_host', $smtp['smtp_host']) }}"
                                placeholder="smtp.gmail.com">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Port</label>
                            <input type="number" name="smtp_port" class="form-input"
                                value="{{ old('smtp_port', $smtp['smtp_port']) }}"
                                placeholder="587">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Username</label>
                            <input type="text" name="smtp_username" class="form-input"
                                value="{{ old('smtp_username', $smtp['smtp_username']) }}"
                                placeholder="your@email.com">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Password</label>
                            <input type="password" name="smtp_password" class="form-input"
                                placeholder="{{ $smtp['smtp_password'] ? '••••••••• (saved)' : 'Enter password' }}"
                                autocomplete="new-password">
                            <span class="form-hint">Leave blank to keep existing password</span>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Encryption</label>
                            <select name="smtp_encryption" class="form-select">
                                <option value="tls"  {{ $smtp['smtp_encryption'] === 'tls'  ? 'selected' : '' }}>TLS (recommended)</option>
                                <option value="ssl"  {{ $smtp['smtp_encryption'] === 'ssl'  ? 'selected' : '' }}>SSL</option>
                                <option value="none" {{ $smtp['smtp_encryption'] === 'none' ? 'selected' : '' }}>None</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">From Address</label>
                            <input type="email" name="mail_from_address" class="form-input"
                                value="{{ old('mail_from_address', $smtp['mail_from_address']) }}"
                                placeholder="noreply@bni.com">
                        </div>

                        <div class="form-group full">
                            <label class="form-label">From Name</label>
                            <input type="text" name="mail_from_name" class="form-input"
                                value="{{ old('mail_from_name', $smtp['mail_from_name']) }}"
                                placeholder="BNI Chapter Accounting">
                        </div>

                    </div>
                </div>
                <div class="section-footer">
                    <span class="form-hint">If not configured, temp passwords will be shown in the UI instead of emailed.</span>
                    <button type="submit" class="btn-save">Save SMTP Settings</button>
                </div>
            </form>
        </div>

        {{-- Test SMTP --}}
        @if($smtp['smtp_host'])
        <div class="setting-section">
            <div class="section-header">
                <div class="section-header-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </div>
                <div class="section-header-info">
                    <div class="section-title">Test Email</div>
                    <div class="section-desc">Send a test email to verify your SMTP configuration</div>
                </div>
            </div>
            <form action="/admin/settings/smtp/test" method="POST">
                @csrf
                <div class="section-body">
                    <div class="test-smtp-wrap">
                        <div class="form-group">
                            <label class="form-label">Send test to</label>
                            <input type="email" name="test_email" class="form-input" placeholder="you@example.com" required>
                        </div>
                        <button type="submit" class="btn-test">Send Test Email</button>
                    </div>
                </div>
            </form>
        </div>
        @endif

        {{-- Contact Support Section --}}
        <div class="setting-section" id="contact-support">
            <div class="section-header">
                <div class="section-header-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.87a16 16 0 0 0 6.16 6.16l.87-.87a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg>
                </div>
                <div class="section-header-info">
                    <div class="section-title">Contact Support</div>
                    <div class="section-desc">Support details shown to treasurers in the app</div>
                </div>
            </div>

            <form action="/admin/settings/contact" method="POST">
                @csrf
                <div class="section-body">
                    <div class="form-grid">

                        <div class="form-group">
                            <label class="form-label">Support Email</label>
                            <input type="email" name="support_email" class="form-input"
                                value="{{ old('support_email', $contact['support_email']) }}"
                                placeholder="support@bni.com">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Support Phone</label>
                            <input type="text" name="support_phone" class="form-input"
                                value="{{ old('support_phone', $contact['support_phone']) }}"
                                placeholder="+91 98000 00000">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Operating Days</label>
                            <input type="text" name="support_days" class="form-input"
                                value="{{ old('support_days', $contact['support_days']) }}"
                                placeholder="Monday – Saturday">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Operating Hours</label>
                            <input type="text" name="support_hours" class="form-input"
                                value="{{ old('support_hours', $contact['support_hours']) }}"
                                placeholder="9:00 AM – 6:00 PM">
                        </div>

                        <div class="form-group full">
                            <label class="form-label">WhatsApp Number <span style="color:var(--text-dim)">(optional)</span></label>
                            <input type="text" name="support_whatsapp" class="form-input"
                                value="{{ old('support_whatsapp', $contact['support_whatsapp']) }}"
                                placeholder="+91 98000 00000">
                        </div>

                    </div>
                </div>
                <div class="section-footer">
                    <span class="form-hint">These details are returned in the API for the Flutter app to display.</span>
                    <button type="submit" class="btn-save">Save Contact Info</button>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection