<?php
/**
 * Settings Page
 * 
 * Allows users to update their password and system configuration.
 */

// Fetch current config
$config_sql = "SELECT * FROM config LIMIT 1";
$config_data = $crud->getRecordSet($config_sql);
$conf = !empty($config_data) ? $config_data[0] : [];

// Fetch CMS settings
$cms_settings_res = $crud->getRecordSet("SELECT * FROM cms_settings");
$cms_settings = [];
foreach ($cms_settings_res as $row) {
    $cms_settings[$row['setting_key']] = $row['setting_value'];
}
?>

<div class="container-fluid py-3" style="direction: rtl;">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="card-title fw-bold mb-0 text-primary">سسٹم سیٹنگز</h5>
                </div>
                <div class="card-body p-4">
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills mb-3 gap-2 settings-tabs-font" id="settingsTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="config-tab" data-bs-toggle="tab"
                                data-bs-target="#config" type="button" role="tab">ویب سائٹ کنفیگریشن</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password"
                                type="button" role="tab">پاس ورڈ تبدیل کریں</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email"
                                type="button" role="tab">ای میل سیٹنگز</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="logo-tab" data-bs-toggle="tab" data-bs-target="#logo"
                                type="button" role="tab">لوگو اپلوڈ کریں</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="signature-tab" data-bs-toggle="tab" data-bs-target="#signature"
                                type="button" role="tab">مہتمم کے دستخط اپلوڈ کریں</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="terms-tab" data-bs-toggle="tab" data-bs-target="#terms"
                                type="button" role="tab">قواعد و ضوابط </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="whatsapp-tab" data-bs-toggle="tab" data-bs-target="#whatsapp"
                                type="button" role="tab">واٹس ایپ سیٹنگز</button>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <!-- Configuration Tab -->
                        <div class="tab-pane fade show active" id="config" role="tabpanel">
                            <form id="configForm" class="row g-3">
                                <div class="col-md-6">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0">مدرسہ کا نام</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <input type="text" name="M_Name" class="form-control"
                                                value="<?php echo htmlspecialchars($conf['M_Name'] ?? ''); ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0">فون نمبر</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <input type="text" name="P_Number" class="form-control"
                                                value="<?php echo htmlspecialchars($conf['P_Number'] ?? ''); ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row align-items-center">
                                        <div class="col-md-2 text-start">
                                            <label class="form-label fw-bold mb-0">مدرسہ کا پتہ</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input type="text" name="M_Address" class="form-control"
                                                value="<?php echo htmlspecialchars($conf['M_Address'] ?? ''); ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0">الحاق نمبر</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <input type="text" name="Reg_Number" class="form-control"
                                                value="<?php echo htmlspecialchars($conf['Reg_Number'] ?? ''); ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0">مہتمم کا نام</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <input type="text" name="Mohtamim" class="form-control"
                                                value="<?php echo htmlspecialchars($conf['Mohtamim'] ?? ''); ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0">موبائل نمبر</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <input type="text" name="Cell" class="form-control"
                                                value="<?php echo htmlspecialchars($conf['Cell'] ?? ''); ?>">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-md-2 text-start pt-2">
                                            <label class="form-label fw-bold mb-0">انگلش ایڈریس (برائے کارڈ)</label>
                                        </div>
                                        <div class="col-md-10">
                                            <textarea name="E_Address" class="form-control"
                                                rows="2"><?php echo htmlspecialchars($conf['E_Address'] ?? ''); ?></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <hr class="my-3">
                                    <div
                                        class="d-flex align-items-center justify-content-between p-3 bg-light rounded-3">
                                        <div>
                                            <h6 class="fw-bold mb-1 text-primary">پبلک فرنٹ پیج</h6>
                                            <p class="text-muted small mb-0">ویب سائٹ کے مین پیج کو فعال یا غیر فعال
                                                کریں</p>
                                        </div>
                                        <div class="form-check form-switch fs-4">
                                            <input class="form-check-input" type="checkbox" name="frontpage_enabled"
                                                id="frontPageToggle" value="1" <?php echo
                                                ($cms_settings['frontpage_enabled'] ?? '0' )=='1' ? 'checked' : '' ; ?>>
                                        </div>
                                    </div>
                                    <div class="mt-3 p-3 bg-light rounded-3">
                                        <label class="form-label urdu-bold">Gemini AI API Key</label>
                                        <input type="password" class="form-control" name="gemini_api_key"
                                            placeholder="AI Generation کے لیے اپنی API Key یہاں درج کریں"
                                            value="<?php echo $cms_settings['gemini_api_key'] ?? ''; ?>">
                                        <small class="text-muted">یہ چابی (Key) AI Content Generator کے لیے استعمال
                                            ہوگی۔</small>
                                    </div>
                                    <div class="mt-3 p-3 bg-light rounded-3">
                                        <label class="form-label urdu-bold">TinyMCE API Key</label>
                                        <input type="text" class="form-control dir-ltr" name="tinymce_api_key"
                                            placeholder="TinyMCE Editor کے لیے اپنی API Key یہاں درج کریں"
                                            value="<?php echo $conf['tinymce_api_key'] ?? 'fyd8ry7pe88f7mg472nymfu1nq668vg0uodn5vq4wgnzi5gr'; ?>">
                                        <div class="mt-2">
                                            <a href="https://www.youtube.com/watch?v=PofZbdLbASE" target="_blank"
                                                class="text-decoration-none small">
                                                <i class="bi bi-question-circle-fill me-1"></i> How to create TinyMCE
                                                API Key?
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-3 text-start">
                                    <button type="submit" class="btn btn-primary px-5">محفوظ کریں</button>
                                </div>
                            </form>
                        </div>

                        <!-- Password Tab -->
                        <div class="tab-pane fade" id="password" role="tabpanel">
                            <form id="passwordForm" class="row g-3 w-75">
                                <div class="col-12">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0" for="oldKey">پرانا پاس ورڈ</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light border-0 px-3"><i
                                                        class="bi bi-key"></i></span>
                                                <input type="password" name="oldKey" id="oldKey"
                                                    class="form-control bg-light border-0" required>
                                                <button class="btn btn-light border-0 px-3 password-toggle text-muted"
                                                    type="button">
                                                    <i class="bi bi-eye"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0" for="newKey">نیا پاس ورڈ</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="input-group mb-2">
                                                <span class="input-group-text bg-light border-0 px-3"><i
                                                        class="bi bi-lock"></i></span>
                                                <input type="password" name="newKey" id="newKey"
                                                    class="form-control bg-light border-0" required>
                                                <button class="btn btn-light border-0 px-3 password-toggle text-muted"
                                                    type="button">
                                                    <i class="bi bi-eye"></i>
                                                </button>
                                            </div>
                                            <!-- Password Strength Indicator -->
                                            <div class="progress mb-1" style="height: 6px;">
                                                <div id="strengthMeter" class="progress-bar" role="progressbar"
                                                    style="width: 0%;" aria-valuenow="0" aria-valuemin="0"
                                                    aria-valuemax="100">
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <small id="strengthText" class="fw-medium small transition-all">بہت
                                                    کمزور</small>
                                                <small class="text-muted extra-small">کم از کم 8 حروف، نمبر اور علامات
                                                    استعمال
                                                    کریں</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="row align-items-center">
                                        <div class="col-sm-4 text-start">
                                            <label class="form-label fw-bold mb-0" for="cNewKey">نیا پاس ورڈ دوبارہ
                                                لکھیں</label>
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text bg-light border-0 px-3"><i
                                                        class="bi bi-check2-circle"></i></span>
                                                <input type="password" name="cNewKey" id="cNewKey"
                                                    class="form-control bg-light border-0" required>
                                                <button class="btn btn-light border-0 px-3 password-toggle text-muted"
                                                    type="button">
                                                    <i class="bi bi-eye"></i>
                                                </button>
                                            </div>
                                            <div id="matchWarning" class="text-danger small mt-1"
                                                style="display: none;">پاس
                                                ورڈ
                                                ایک جیسے نہیں ہیں</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-4 text-start">
                                    <button type="submit" class="btn btn-danger px-5">تبدیل کریں</button>
                                </div>
                            </form>
                        </div>

                        <!-- Email Settings Tab -->
                        <div class="tab-pane fade" id="email" role="tabpanel">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold mb-0">ای میل اکاؤنٹس منیجمنٹ</h6>
                                <button type="button" class="btn btn-primary btn-sm" onclick="openEmailModal()">
                                    <i class="bi bi-plus-lg me-1"></i>نیا اکاؤنٹ شامل کریں
                                </button>
                            </div>

                            <div class="alert alert-info border-0 shadow-sm mb-3">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-info-circle-fill fs-4 me-3"></i>
                                    <div>
                                        <p class="mb-0 fw-bold">ڈیفالٹ ای میل بھیجنے کا طریقہ منتخب کریں:</p>
                                        <div class="mt-2 d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="defaultMailer"
                                                    id="defaultGmail" value="gmail">
                                                <label class="form-check-label" for="defaultGmail">جی میل (تمام جی میل
                                                    اکاؤنٹس سے باری باری)</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="defaultMailer"
                                                    id="defaultPersonal" value="personal">
                                                <label class="form-check-label" for="defaultPersonal">پرسنل / ڈومین ای
                                                    میل</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover border">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>قسم</th>
                                            <th>ای میل / یوزر</th>
                                            <th>ہوسٹ</th>
                                            <th>Encryption</th>
                                            <th>ایکشن</th>
                                        </tr>
                                    </thead>
                                    <tbody id="emailAccountsTable">
                                        <!-- Loaded via JS -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Logo Upload Tab -->
                        <div class="tab-pane fade" id="logo" role="tabpanel">
                            <form id="logoForm" class="row g-3" style="max-width: 500px;" enctype="multipart/form-data">
                                <div class="col-12 text-center mb-3">
                                    <div class="border rounded p-3 bg-light d-inline-block">
                                        <img src="images/card_logo.png" id="currentLogoPreview"
                                            onerror="this.src=''; this.alt='لوگو موجود نہیں'"
                                            style="max-height: 120px; max-width: 100%; object-fit: contain;">
                                    </div>
                                    <p class="text-muted small mt-2">موجودہ لوگو</p>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-bold">نئی تصویر منتخب کریں (صرف PNG)</label>
                                    <input type="file" name="cardLogo" id="cardLogo" class="form-control"
                                        accept="image/png" required>
                                </div>
                                <div class="col-12 mt-4 text-start">
                                    <button type="submit" class="btn btn-primary px-5" id="btnUploadLogo">اپلوڈ
                                        کریں</button>
                                </div>
                            </form>
                        </div>

                        <!-- Signature Upload Tab -->
                        <div class="tab-pane fade" id="signature" role="tabpanel">
                            <form id="signatureForm" class="row g-3" style="max-width: 500px;"
                                enctype="multipart/form-data">
                                <div class="col-12 text-center mb-3">
                                    <div class="border rounded p-3 bg-light d-inline-block">
                                        <img src="images/Signature.png" id="currentSignaturePreview"
                                            onerror="this.src=''; this.alt='دستخط موجود نہیں'"
                                            style="max-height: 120px; max-width: 100%; object-fit: contain;">
                                    </div>
                                    <p class="text-muted small mt-2">موجودہ دستخط</p>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-bold">نئی تصویر منتخب کریں (صرف PNG)</label>
                                    <input type="file" name="signatureImage" id="signatureImage" class="form-control"
                                        accept="image/png" required>
                                </div>
                                <div class="col-12 mt-4 text-start">
                                    <button type="submit" class="btn btn-primary px-5" id="btnUploadSignature">اپلوڈ
                                        کریں</button>
                                </div>
                            </form>
                        </div>

                        <!-- Terms & Conditions Tab -->
                        <div class="tab-pane fade" id="terms" role="tabpanel">
                            <div class="alert alert-info border-0 shadow-sm mb-3">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-info-circle-fill fs-4 me-3"></i>
                                    <div>
                                        <p class="mb-0">یہاں مدرسہ کے قواعد و ضوابط (Terms & Conditions) درج کریں۔ یہ
                                            مواد طالب علم کے داخلہ فارم اور دیگر رپورٹس پر پرنٹ ہوگا۔</p>
                                    </div>
                                </div>
                            </div>
                            <form id="termsForm">
                                <div class="mb-3">
                                    <textarea id="termsUrEditor" name="contents_ur"></textarea>
                                </div>
                                <div class="text-start">
                                    <button type="submit" class="btn btn-primary px-5" id="btnSaveTerms">محفوظ
                                        کریں</button>
                                </div>
                            </form>
                        </div>
                        <!-- WhatsApp Settings Tab -->
                        <div class="tab-pane fade" id="whatsapp" role="tabpanel">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card border-0 bg-light-subtle mb-3">
                                        <div class="card-body p-4">
                                            <h6 class="fw-bold mb-3">واٹس ایپ (UltraMsg) کنفیگریشن</h6>
                                            <form id="whatsappSettingsForm">
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Instance ID</label>
                                                    <input type="text" id="wa_instance_id" name="whatsapp_instance_id"
                                                        class="form-control" placeholder="instanceXXXXX">
                                                </div>
                                                <div class="mb-4">
                                                    <label class="form-label fw-bold">Token</label>
                                                    <input type="text" id="wa_token" name="whatsapp_token"
                                                        class="form-control" placeholder="your_ultramsg_token">
                                                </div>

                                                <hr class="my-4">

                                                <div class="d-flex align-items-center justify-content-between mb-3">
                                                    <div>
                                                        <h6 class="fw-bold mb-0">واٹس ایپ سروس کو فعال کریں</h6>
                                                        <small class="text-muted">پیغام رسانی کے لیے واٹس ایپ کا استعمال
                                                            شروع کریں</small>
                                                    </div>
                                                    <div class="form-check form-switch fs-4">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="wa_enabled_toggle" name="whatsapp_enabled" value="1">
                                                    </div>
                                                </div>

                                                <button type="submit" class="btn btn-primary px-5 shadow-sm">
                                                    <i class="bi bi-save me-2"></i> سیٹنگز محفوظ کریں
                                                </button>
                                            </form>
                                        </div>
                                    </div>

                                    <div class="alert alert-warning border-0 shadow-sm">
                                        <div class="d-flex">
                                            <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
                                            <div>
                                                <p class="mb-1 fw-bold">اہم ہدایات:</p>
                                                <ul class="mb-0 small">
                                                    <li>واٹس ایپ سروس کو فعال کرنے سے پہلے Instance ID اور Token کا ہونا
                                                        لازمی ہے۔</li>
                                                    <li>یہ سروس <strong>UltraMsg.com</strong> کے ذریعے کام کرتی ہے۔</li>
                                                    <li>اگر سیٹنگز محفوظ نہیں ہوتیں تو چیک کریں کہ آپ کی
                                                        <code>.env</code> فائل رائٹ ایبل (Writable) ہے یا نہیں۔
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Email Account Modal -->
<div class="modal fade" id="emailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="emailModalTitle">ای میل اکاؤنٹ شامل کریں</h5>
                <button type="button" class="btn-close ms-0 me-auto" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form id="emailAccountForm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="acc_id">
                    <input type="hidden" name="action" value="saveAccount">

                    <div class="mb-3">
                        <label class="form-label fw-bold">اکاؤنٹ کی قسم</label>
                        <select name="account_type" id="acc_type" class="form-select" onchange="toggleAccountType()">
                            <option value="gmail">جی میل (Gmail)</option>
                            <option value="personal">پرسنل / ڈومین (SMTP)</option>
                        </select>
                    </div>

                    <div id="smtpFields">
                        <div class="mb-3">
                            <label class="form-label fw-bold">SMTP ہوسٹ</label>
                            <input type="text" name="smtp_host" id="acc_host" class="form-control"
                                placeholder="e.g. smtp.gmail.com">
                        </div>
                        <div class="row mb-3">
                            <div class="col-6">
                                <label class="form-label fw-bold">پورٹ</label>
                                <input type="number" name="smtp_port" id="acc_port" class="form-control"
                                    placeholder="465 or 587">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-bold">Encryption</label>
                                <select name="encryption" id="acc_enc" class="form-select">
                                    <option value="tls">TLS</option>
                                    <option value="ssl">SSL</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">ای میل / یوزر آئی ڈی</label>
                        <input type="email" name="email_user" id="acc_user" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">پاس ورڈ (یا ایپ پاس ورڈ)</label>
                        <input type="password" name="email_pass" id="acc_pass" class="form-control">
                        <small class="text-muted" id="passHint">جی میل کے لیے "App Password" استعمال کریں</small>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <label class="form-label fw-bold">بھیجنے والا ای میل</label>
                            <input type="email" name="email_from" id="acc_from" class="form-control" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-bold">Reply To</label>
                            <input type="email" name="reply_to" id="acc_reply" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بند کریں</button>
                    <button type="submit" class="btn btn-primary">محفوظ کریں</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // Config Form Submit
        $('#configForm').on('submit', function (e) {
            e.preventDefault();
            const formData = $(this).serialize() + '&action=updateConfig';

            $.ajax({
                url: 'APIs/updateConfig.php',
                method: 'POST',
                data: formData,
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'کامیابی',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => location.reload());
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'غلطی',
                            text: response.message
                        });
                    }
                }
            });
        });

        // Password visibility toggle
        $('.password-toggle').on('click', function () {
            const $btn = $(this);
            const $input = $btn.siblings('input');
            const $icon = $btn.find('i');

            if ($input.attr('type') === 'password') {
                $input.attr('type', 'text');
                $icon.removeClass('bi-eye').addClass('bi-eye-slash');
            } else {
                $input.attr('type', 'password');
                $icon.removeClass('bi-eye-slash').addClass('bi-eye');
            }
        });

        // Password strength and matching logic
        const $newKey = $('#newKey');
        const $confirmKey = $('#cNewKey');
        const $strengthMeter = $('#strengthMeter');
        const $strengthText = $('#strengthText');
        const $matchWarning = $('#matchWarning');

        function checkPasswordMatch() {
            const password = $newKey.val();
            const confirmPassword = $confirmKey.val();
            if (confirmPassword.length > 0 && password !== confirmPassword) {
                $matchWarning.show();
            } else {
                $matchWarning.hide();
            }
        }

        $newKey.on('input', function () {
            const password = $(this).val();
            const strength = calculatePasswordStrength(password);
            updateStrengthUI(strength);
            checkPasswordMatch();
        });

        $confirmKey.on('input', checkPasswordMatch);

        function calculatePasswordStrength(password) {
            let score = 0;
            if (!password) return 0;
            if (password.length >= 8) score++;
            if (/[A-Z]/.test(password)) score++;
            if (/[a-z]/.test(password)) score++;
            if (/[0-9]/.test(password)) score++;
            if (/[^A-Za-z0-9]/.test(password)) score++;
            return score;
        }

        function updateStrengthUI(score) {
            let color = '';
            let text = '';
            let width = '';

            switch (score) {
                case 0: width = '0%'; text = 'بہت کمزور'; color = 'bg-danger'; break;
                case 1:
                case 2: width = '40%'; text = 'کمزور'; color = 'bg-warning'; break;
                case 3: width = '60%'; text = 'اوسط'; color = 'bg-info'; break;
                case 4: width = '80%'; text = 'مضبوط'; color = 'bg-primary'; break;
                case 5: width = '100%'; text = 'بہت مضبوط'; color = 'bg-success'; break;
            }

            $strengthMeter.css('width', width).removeClass('bg-danger bg-warning bg-info bg-primary bg-success').addClass(color);
            $strengthText.text(text).removeClass('text-danger text-warning text-info text-primary text-success').addClass('text-' + color.replace('bg-', ''));
        }

        // Password Form Submit
        $('#passwordForm').on('submit', function (e) {
            e.preventDefault();

            if ($newKey.val() !== $confirmKey.val()) {
                Swal.fire('غلطی', 'نیا پاس ورڈ اور اس کی تصدیق ایک جیسے نہیں ہیں۔', 'error');
                return;
            }

            const formData = $(this).serialize() + '&action=changePassword';

            $.ajax({
                url: 'APIs/updateConfig.php',
                method: 'POST',
                data: formData,
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'کامیابی',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            $('#passwordForm')[0].reset();
                            updateStrengthUI(0);
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'غلطی',
                            text: response.message
                        });
                    }
                }
            });
        });

        // Logo Upload Form Submit
        $('#logoForm').on('submit', function (e) {
            e.preventDefault();

            const fileInput = document.getElementById('cardLogo');
            if (fileInput.files.length === 0) return;

            const file = fileInput.files[0];
            if (file.type !== 'image/png') {
                Swal.fire('توجہ', 'صرف PNG تصویر اپلوڈ کی جاسکتی ہے۔', 'warning');
                return;
            }

            const formData = new FormData(this);
            formData.append('action', 'uploadCardLogo');

            const btn = $('#btnUploadLogo');
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>لوڈ ہو رہا ہے...');

            // First, explicitly check if the file exists via API to determine if we prompt
            $.ajax({
                url: 'APIs/uploadCardLogo.php?check=1',
                method: 'GET',
                dataType: 'json',
                success: function (res) {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    if (res.exists) {
                        Swal.fire({
                            title: 'تصدیق مینو',
                            text: 'کارڈ لوگو فائل پہلے سے موجود ہے۔ کیا آپ اسے نئی کارڈ لوگو فائل سے تبدیل کرنا چاہتے ہیں؟',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'ہاں، تبدیل کریں',
                            cancelButtonText: 'منسوخ'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                performUpload(formData);
                            }
                        });
                    } else {
                        performUpload(formData);
                    }
                },
                error: function () {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    Swal.fire('خرابی', 'سرور سے رابطہ نہیں ہو سکا۔', 'error');
                }
            });
        });

        function performUpload(formData) {
            const btn = $('#btnUploadLogo');
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>اپلوڈ ہورہا ہے...');


            $.ajax({
                url: 'APIs/uploadCardLogo.php',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (response) {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'کامیابی',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            // Refresh cache for the image
                            $('#currentLogoPreview').attr('src', 'images/card_logo.png?t=' + new Date().getTime());
                            $('#logoForm')[0].reset();
                        });
                    } else {
                        Swal.fire('خرابی', response.message, 'error');
                    }
                },
                error: function () {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    Swal.fire('خرابی', 'سرور سے رابطہ نہیں ہو سکا۔', 'error');
                }
            });
        }

        // Signature Upload Form Submit
        $('#signatureForm').on('submit', function (e) {
            e.preventDefault();

            const fileInput = document.getElementById('signatureImage');
            if (fileInput.files.length === 0) return;

            const file = fileInput.files[0];
            if (file.type !== 'image/png') {
                Swal.fire('توجہ', 'صرف PNG تصویر اپلوڈ کی جاسکتی ہے۔', 'warning');
                return;
            }

            const formData = new FormData(this);
            formData.append('action', 'uploadSignature');

            const btn = $('#btnUploadSignature');
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>لوڈ ہو رہا ہے...');

            $.ajax({
                url: 'APIs/uploadSignature.php?check=1',
                method: 'GET',
                dataType: 'json',
                success: function (res) {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    if (res.exists) {
                        Swal.fire({
                            title: 'تصدیق مینو',
                            text: 'مہتمم کے دستخط کی تصویر پہلے سے موجود ہے۔ کیا آپ اسے نئی تصویر سے تبدیل کرنا چاہتے ہیں؟',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'ہاں، تبدیل کریں',
                            cancelButtonText: 'منسوخ'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                performSignatureUpload(formData);
                            }
                        });
                    } else {
                        performSignatureUpload(formData);
                    }
                },
                error: function () {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    Swal.fire('خرابی', 'سرور سے رابطہ نہیں ہو سکا۔', 'error');
                }
            });
        });

        function performSignatureUpload(formData) {
            const btn = $('#btnUploadSignature');
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>اپلوڈ ہورہا ہے...');

            $.ajax({
                url: 'APIs/uploadSignature.php',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (response) {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'کامیابی',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            // Refresh cache for the image
                            $('#currentSignaturePreview').attr('src', 'images/Signature.png?t=' + new Date().getTime());
                            $('#signatureForm')[0].reset();
                        });
                    } else {
                        Swal.fire('خرابی', response.message, 'error');
                    }
                },
                error: function () {
                    btn.prop('disabled', false).html('اپلوڈ کریں');
                    Swal.fire('خرابی', 'سرور سے رابطہ نہیں ہو سکا۔', 'error');
                }
            });
        }

        // Email Settings Logic
        function loadEmailAccounts() {
            $.ajax({
                url: 'APIs/emailSettings.php',
                data: { action: 'fetchAccounts' },
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        let html = '';

                        // Default Radio checks
                        if (res.default_mailer_type === 'gmail') $('#defaultGmail').prop('checked', true);
                        else $('#defaultPersonal').prop('checked', true);

                        // Personal Account
                        if (res.personal) {
                            html += `<tr class="table-light">
                                <td><span class="badge bg-info text-dark">پرسنل</span></td>
                                <td>${res.personal.email_user}</td>
                                <td>${res.personal.smtp_host}</td>
                                <td>${res.personal.encryption.toUpperCase()}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary" onclick='window.editAccount(${JSON.stringify(res.personal)})'><i class="bi bi-pencil"></i></button>
                                        <button class="btn btn-outline-danger" onclick="window.deleteAccount(${res.personal.id})"><i class="bi bi-trash"></i></button>
                                    </div>
                                </td>
                            </tr>`;
                        } else {
                            html += `<tr><td colspan="5" class="text-center text-muted py-3">کوئی پرسنل اکاؤنٹ موجود نہیں۔</td></tr>`;
                        }

                        // Gmail Accounts Header
                        html += `<tr class="bg-light"><td colspan="5" class="fw-bold py-2"> <i class="bi bi-google me-2"></i> جی میل اکاؤنٹس </td></tr>`;

                        if (res.gmail.length > 0) {
                            res.gmail.forEach(acc => {
                                html += `<tr>
                                    <td><span class="badge bg-danger">جی میل</span></td>
                                    <td>${acc.email_user}</td>
                                    <td>${acc.smtp_host}</td>
                                    <td>${acc.encryption.toUpperCase()}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary" onclick='window.editAccount(${JSON.stringify(acc)})'><i class="bi bi-pencil"></i></button>
                                            <button class="btn btn-outline-danger" onclick="window.deleteAccount(${acc.id})"><i class="bi bi-trash"></i></button>
                                        </div>
                                    </td>
                                </tr>`;
                            });
                        } else {
                            html += `<tr><td colspan="5" class="text-center text-muted py-3">کوئی جی میل اکاؤنٹ موجود نہیں۔</td></tr>`;
                        }

                        $('#emailAccountsTable').html(html);
                    }
                }
            });
        }

        loadEmailAccounts();

        window.openEmailModal = function () {
            $('#acc_id').val('');
            $('#emailAccountForm')[0].reset();
            $('#emailModalTitle').text('ای میل اکاؤنٹ شامل کریں');
            $('#acc_type').trigger('change');
            $('#emailModal').modal('show');
        };

        window.toggleAccountType = function () {
            const type = $('#acc_type').val();
            if (type === 'gmail') {
                $('#acc_host').val('smtp.gmail.com').prop('readonly', true);
                $('#acc_port').val('465').prop('readonly', true);
                $('#acc_enc').val('ssl').prop('disabled', true);
                $('#passHint').text('جی میل کے لیے اپی پاس ورڈ استعمال کریں');
            } else {
                $('#acc_host').val('').prop('readonly', false);
                $('#acc_port').val('').prop('readonly', false);
                $('#acc_enc').val('tls').prop('disabled', false);
                $('#passHint').text('اپنے ویب ہوسٹنگ یا SMTP سرور کا پاس ورڈ لکھیں');
            }
        };

        window.editAccount = function (acc) {
            $('#acc_id').val(acc.id);
            $('#acc_type').val(acc.account_type).trigger('change');
            $('#acc_host').val(acc.smtp_host);
            $('#acc_port').val(acc.smtp_port);
            $('#acc_enc').val(acc.encryption);
            $('#acc_user').val(acc.email_user);
            $('#acc_from').val(acc.email_from);
            $('#acc_reply').val(acc.reply_to);
            $('#acc_pass').val(''); // Don't show password for editing
            $('#emailModalTitle').text('ای میل اکاؤنٹ ایڈٹ کریں');
            $('#emailModal').modal('show');
        };

        window.deleteAccount = function (id) {
            Swal.fire({
                title: 'تصدیق',
                text: 'کیا آپ واقعی یہ اکاؤنٹ ختم کرنا چاہتے ہیں؟',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'ہاں، ختم کریں',
                cancelButtonText: 'منسوخ'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post('APIs/emailSettings.php', { action: 'deleteAccount', id: id }, function (res) {
                        if (res.success) {
                            Swal.fire('کامیابی', res.message, 'success');
                            loadEmailAccounts();
                        }
                    }, 'json');
                }
            });
        };

        $('#emailAccountForm').on('submit', function (e) {
            e.preventDefault();
            // Re-enable disabled/readonly fields for serialization
            $('#acc_enc').prop('disabled', false);
            const formData = $(this).serialize();
            $('#acc_enc').prop('disabled', $('#acc_type').val() === 'gmail');

            $.post('APIs/emailSettings.php', formData, function (res) {
                if (res.success) {
                    $('#emailModal').modal('hide');
                    Swal.fire('کامیابی', res.message, 'success');
                    loadEmailAccounts();
                } else {
                    Swal.fire('غلطی', res.message, 'error');
                }
            }, 'json');
        });

        $('input[name="defaultMailer"]').on('change', function () {
            const type = $(this).val();
            $.post('APIs/emailSettings.php', { action: 'setDefaultType', type: type }, function (res) {
                if (res.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'اپ ڈیٹ کر دیا گیا',
                        text: res.message,
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            }, 'json');
        });

        // WhatsApp Settings Logic
        function loadWhatsAppSettings() {
            $.ajax({
                url: 'APIs/whatsapp_settings_api.php',
                data: { action: 'fetchSettings' },
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        $('#wa_instance_id').val(res.whatsapp_instance_id);
                        $('#wa_token').val(res.whatsapp_token);
                        $('#wa_enabled_toggle').prop('checked', res.whatsapp_enabled);

                        // Disable toggle if no credentials
                        if (!res.whatsapp_instance_id || !res.whatsapp_token) {
                            $('#wa_enabled_toggle').parent().attr('title', 'پہلے Instance ID اور Token درج کریں');
                        }
                    }
                }
            });
        }

        loadWhatsAppSettings();

        $('#whatsappSettingsForm').on('submit', function (e) {
            e.preventDefault();
            const $btn = $(this).find('button[type="submit"]');
            const originalHtml = $btn.html();

            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>محفوظ ہو رہا ہے...');

            const formData = {
                action: 'saveSettings',
                whatsapp_instance_id: $('#wa_instance_id').val(),
                whatsapp_token: $('#wa_token').val(),
                whatsapp_enabled: $('#wa_enabled_toggle').is(':checked') ? 1 : 0
            };

            $.post('APIs/whatsapp_settings_api.php', formData, function (res) {
                $btn.prop('disabled', false).html(originalHtml);
                if (res.success) {
                    Swal.fire('کامیابی', res.message, 'success');
                    loadWhatsAppSettings();
                } else {
                    Swal.fire('غلطی', res.message, 'error');
                    // Refresh if failed to sync toggle state correctly (e.g. if we tried to enable without credentials)
                    loadWhatsAppSettings();
                }
            }, 'json');
        });

    });
</script>
<script src="https://cdn.tiny.cloud/1/<?=($conf['tinymce_api_key'] ?? 'no-api-key')?>/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
<script src="assets/js/madrasa_terms_conditions.js"></script>