{{-- E-posta hesapları: liste + bağlama/düzenleme formu --}}
<div class="modal fade" id="mailAccountsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" style="border:none;border-radius:16px;overflow:hidden">

            <div class="modal-header" style="border-bottom:1px solid var(--border-1,#e2e8f0);padding:16px 22px">
                <h5 class="modal-title" style="font-size:15px;font-weight:800;letter-spacing:-.02em">
                    <i class="fas fa-at me-2" style="color:var(--primary-color)"></i>
                    <span id="mailAccountsModalTitle">E-posta Hesapları</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
            </div>

            <div class="modal-body mail-modal-form" style="padding:20px 22px">

                {{-- ── Liste görünümü ─────────────────────────────────── --}}
                <div id="mailAccountsList">
                    <div id="mailAccountsCards"></div>

                    <button type="button" class="mail-btn mail-btn-primary w-100 justify-content-center"
                            id="mailAddAccountBtn" style="height:42px;margin-top:6px">
                        <i class="fas fa-plus"></i><span>Yeni Hesap Bağla</span>
                    </button>
                </div>

                {{-- ── Form görünümü ──────────────────────────────────── --}}
                <form id="mailAccountForm" style="display:none" autocomplete="off">
                    <input type="hidden" name="id">

                    <div class="mail-section-title">Kimlik</div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Görünen Ad <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" placeholder="Operasyon" required>
                        </div>
                        <div class="col-md-6">
                            <label>E-posta Adresi <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" name="email" placeholder="operasyon@firma.com" required>
                        </div>
                        <div class="col-md-6">
                            <label>Gönderen Adı</label>
                            <input type="text" class="form-control" name="from_name" placeholder="Firma Adı — Operasyon">
                        </div>
                        <div class="col-md-3">
                            <label>Renk</label>
                            <input type="color" class="form-control form-control-color w-100" name="color" value="#2563eb">
                        </div>
                        <div class="col-md-3">
                            <label>Geçmiş (gün)</label>
                            <input type="number" class="form-control" name="sync_days" value="90" min="1" max="3650"
                                   title="İlk senkronizasyonda kaç günlük posta indirilsin">
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" name="is_shared" id="mailAcctShared">
                                <label class="form-check-label" for="mailAcctShared" style="font-size:12.5px;margin:0">
                                    Acentedeki tüm yetkili kullanıcılar bu hesabı görebilsin
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- ── Gönderici profilleri ───────────────────────
                         Aynı adresten farklı birimler adına yazışmak için.
                         Yalnızca "Kimden" başlığındaki ad değişir; adres,
                         SMTP kimliği ve imza hesabın kendisine aittir. --}}
                    <div class="mail-section-title">Gönderici Profilleri</div>
                    <div class="mail-ident-box">
                        <p class="mail-ident-hint">
                            Bu adresten <b>farklı adlarla</b> yazışabilirsiniz — örneğin
                            “Rezervasyon Departmanı” ya da “Muhasebe”. E-posta adresi
                            değişmez, yalnızca alıcının gördüğü gönderen adı değişir.
                        </p>

                        <div id="mailIdentityList"></div>

                        {{-- Profil imza düzenleyicisi.
                             Liste her işlemde yeniden çizildiği için editörün
                             kendisi listenin DIŞINDA duruyor; açılan profilin
                             satırının altındaki yuvaya taşınıyor. Böylece Quill
                             örneği bir kez kurulur, her çizimde yeniden
                             oluşturulmaz. Ayrı bir kip açmıyoruz: pencere zaten
                             modal içinde, iç içe kip kullanıcıyı kaybettirir. --}}
                        <div class="mail-ident-sign" id="mailIdentitySignature" style="display:none">
                            <div class="mail-ident-sign-head">
                                <i class="fas fa-signature"></i>
                                <span class="mail-ident-sign-title" id="mailIdentitySignName">Profil imzası</span>
                                <span class="mail-badge def" id="mailIdentitySignState">Hesabın imzası</span>
                            </div>

                            <div class="rte-wrap mail-ident-sign-rte" id="mailIdentitySignRte">
                                <div id="mailIdentitySignEditor" style="min-height:104px"></div>
                            </div>

                            <label class="mail-ident-sign-inherit" for="mailIdentitySignInherit">
                                <input class="form-check-input" type="checkbox" id="mailIdentitySignInherit">
                                <span>Hesabın imzasını kullan</span>
                            </label>

                            <div class="mail-ident-sign-note" id="mailIdentitySignNote"></div>

                            <div class="mail-ident-sign-actions">
                                <button type="button" class="mail-btn" data-ident-sign-cancel>
                                    <span>Vazgeç</span>
                                </button>
                                <button type="button" class="mail-btn mail-btn-primary" data-ident-sign-save>
                                    <i class="fas fa-check"></i><span>İmzayı Kaydet</span>
                                </button>
                            </div>
                        </div>

                        <div class="mail-ident-add" data-edit-only style="display:none">
                            <input type="text" class="form-control" id="mailIdentityInput"
                                   maxlength="120" placeholder="Yeni profil adı — ör. Rezervasyon Departmanı">
                            <button type="button" class="mail-btn mail-btn-primary" id="mailIdentityAdd">
                                <i class="fas fa-plus"></i><span>Ekle</span>
                            </button>
                        </div>

                        <div class="mail-ident-locked" data-new-only>
                            <i class="fas fa-circle-info"></i>
                            <span>Profil eklemek için önce hesabı kaydedin.</span>
                        </div>
                    </div>

                    <div class="mail-section-title">Hazır Ayarlar</div>
                    <div class="d-flex flex-wrap gap-2">
                        <button type="button" class="mail-preset" data-preset="gmail">
                            <i class="fab fa-google"></i> Gmail
                        </button>
                        <button type="button" class="mail-preset" data-preset="outlook">
                            <i class="fab fa-microsoft"></i> Outlook / Microsoft 365
                        </button>
                        <button type="button" class="mail-preset" data-preset="yandex">
                            <i class="fas fa-envelope"></i> Yandex
                        </button>
                        <button type="button" class="mail-preset" data-preset="yaani">
                            <i class="fas fa-envelope"></i> Yaani
                        </button>
                        <button type="button" class="mail-preset" data-preset="cpanel">
                            <i class="fas fa-server"></i> Kurumsal (mail.alanadi.com)
                        </button>
                    </div>
                    <div class="form-text" style="font-size:11.5px;margin-top:8px">
                        Gmail ve Microsoft 365 hesaplarında normal parola değil,
                        <b>uygulama parolası</b> kullanmanız gerekir.
                    </div>

                    <div class="mail-section-title">Gelen Posta (IMAP)</div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Sunucu <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="imap_host" placeholder="mail.firma.com" required>
                        </div>
                        <div class="col-md-3">
                            <label>Port <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="imap_port" value="993" required>
                        </div>
                        <div class="col-md-3">
                            <label>Şifreleme</label>
                            <select class="form-select" name="imap_encryption">
                                <option value="ssl">SSL / TLS</option>
                                <option value="tls">STARTTLS</option>
                                <option value="none">Yok</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Kullanıcı Adı <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="imap_username" placeholder="operasyon@firma.com" required>
                        </div>
                        <div class="col-md-6">
                            <label>Parola <span class="text-danger" data-required-star>*</span></label>
                            <input type="password" class="form-control" name="imap_password"
                                   placeholder="••••••••" autocomplete="new-password">
                            <div class="form-text" data-edit-only style="font-size:11px;display:none">
                                Değiştirmek istemiyorsanız boş bırakın.
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch"
                                       name="imap_validate_cert" id="mailAcctCert" checked>
                                <label class="form-check-label" for="mailAcctCert" style="font-size:12.5px;margin:0">
                                    SSL sertifikasını doğrula (kendi imzalı sertifika kullanıyorsanız kapatın)
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mail-section-title">Giden Posta (SMTP)</div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Sunucu <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="smtp_host" placeholder="mail.firma.com" required>
                        </div>
                        <div class="col-md-3">
                            <label>Port <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="smtp_port" value="587" required>
                        </div>
                        <div class="col-md-3">
                            <label>Şifreleme</label>
                            <select class="form-select" name="smtp_encryption">
                                <option value="tls">STARTTLS</option>
                                <option value="ssl">SSL / TLS</option>
                                <option value="none">Yok</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Kullanıcı Adı</label>
                            <input type="text" class="form-control" name="smtp_username"
                                   placeholder="Boş bırakılırsa IMAP kullanıcı adı kullanılır">
                        </div>
                        <div class="col-md-6">
                            <label>Parola</label>
                            <input type="password" class="form-control" name="smtp_password"
                                   placeholder="Boş bırakılırsa IMAP parolası kullanılır" autocomplete="new-password">
                        </div>
                        <div class="col-12">
                            {{-- Ayrı anahtar: gelen ve giden sunucu aynı olsa da farklı
                                 sertifikalar taşıyabilir (biri kendi imzalı, diğeri geçerli). --}}
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch"
                                       name="smtp_validate_cert" id="mailAcctSmtpCert" checked>
                                <label class="form-check-label" for="mailAcctSmtpCert" style="font-size:12.5px;margin:0">
                                    Giden sunucunun SSL sertifikasını doğrula
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mail-section-title">İmza</div>
                    <div class="rte-wrap">
                        <div id="mailSignatureEditor" style="min-height:120px"></div>
                    </div>
                    <div class="form-text" style="font-size:11.5px;margin-top:6px">
                        Yazma penceresindeki <b>İmza</b> düğmesiyle iletinin sonuna eklenir.
                    </div>

                    <div class="mail-test-result" id="mailTestResult"></div>
                </form>
            </div>

            <div class="modal-footer" style="border-top:1px solid var(--border-1,#e2e8f0);padding:14px 22px;gap:8px">
                <button type="button" class="mail-btn" id="mailAccountBack" style="display:none">
                    <i class="fas fa-arrow-left"></i><span>Geri</span>
                </button>
                <div class="mail-bar-spacer"></div>
                <button type="button" class="mail-btn" id="mailAccountTest" style="display:none;border:1px solid var(--border-1,#e2e8f0)">
                    <i class="fas fa-plug-circle-check"></i><span>Bağlantıyı Test Et</span>
                </button>
                <button type="button" class="mail-btn mail-btn-primary" id="mailAccountSave" style="display:none">
                    <i class="fas fa-check"></i><span>Kaydet</span>
                </button>
                <button type="button" class="mail-btn" data-bs-dismiss="modal" id="mailAccountsClose">
                    <span>Kapat</span>
                </button>
            </div>
        </div>
    </div>
</div>