<?php
require_once __DIR__ . '/../../admin/_nav.php';
$pageTitle  = 'Settings';
$sidebarNav = adminNav();
$u = function($p) { return \Core\View::url($p); };

$tabs = [
    'school'     => ['icon'=>'bi-building',        'label'=>'School Profile'],
    'sms'        => ['icon'=>'bi-phone',            'label'=>'SMS (Africa\'s Talking)'],
    'mpesa'      => ['icon'=>'bi-phone-vibrate',    'label'=>'M-Pesa Integration'],
    'email'      => ['icon'=>'bi-envelope-at',      'label'=>'Email / SMTP'],
    'recaptcha'  => ['icon'=>'bi-shield-check',     'label'=>'reCAPTCHA'],
];
$logoUrl = $school['logo']
    ? \Core\View::url('storage/uploads/logos/'.$school['logo'])
    : null;
$sigUrl = !empty($school['principal_signature'])
    ? \Core\View::url('storage/uploads/logos/'.$school['principal_signature'])
    : null;
?>

<div class="page-header">
  <div><h1><i class="bi bi-gear"></i> Settings</h1><p>School configuration & integrations</p></div>
</div>

<!-- Tab nav -->
<div style="display:flex;gap:4px;flex-wrap:wrap;margin-bottom:24px;background:#fff;padding:8px;border-radius:12px;border:1px solid var(--border)">
  <?php foreach($tabs as $key => $t): ?>
  <a href="<?= $u('admin/settings?tab='.$key) ?>"
     style="display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;text-decoration:none;font-size:13.5px;font-weight:500;transition:all .2s;
            <?= $tab===$key ? 'background:var(--primary);color:#fff;' : 'color:var(--gray);' ?>">
    <i class="bi <?= $t['icon'] ?>"></i> <?= $t['label'] ?>
  </a>
  <?php endforeach; ?>
</div>

<!-- ══ SCHOOL PROFILE ════════════════════════════════════════ -->
<?php if($tab === 'school'): ?>
<form method="POST" action="<?= $u('admin/settings/school') ?>" enctype="multipart/form-data">
  <?= \Core\View::csrf() ?>
  <div class="grid g2">

    <!-- Basic Info -->
    <div class="card">
      <div class="card-header"><h5><i class="bi bi-info-circle"></i> Basic Information</h5></div>
      <div class="card-body">
        <div class="form-group"><label>School Name *</label><input type="text" name="name" value="<?= htmlspecialchars($school['name'] ?? '') ?>" required></div>
        <div class="form-group"><label>Official Email</label><input type="email" name="email" value="<?= htmlspecialchars($school['email'] ?? '') ?>"></div>
        <div class="form-group"><label>Phone Number</label><input type="text" name="phone" value="<?= htmlspecialchars($school['phone'] ?? '') ?>" placeholder="+254..."></div>
        <div class="form-group"><label>Website</label><input type="text" name="website" value="<?= htmlspecialchars($school['website'] ?? '') ?>" placeholder="https://..."></div>
        <div class="form-group"><label>County</label>
          <select name="county">
            <option value="">Select County</option>
            <?php foreach(['Nairobi','Mombasa','Kisumu','Nakuru','Eldoret','Thika','Nyeri','Meru','Kakamega','Kisii','Machakos','Kitui','Garissa','Isiolo','Marsabit','Mandera','Wajir','Turkana','West Pokot','Samburu','Trans Nzoia','Uasin Gishu','Elgeyo Marakwet','Nandi','Baringo','Laikipia','Nakuru','Narok','Kajiado','Kericho','Bomet','Kakamega','Vihiga','Bungoma','Busia','Siaya','Kisumu','Homa Bay','Migori','Kisii','Nyamira','Nairobi','Kiambu','Murang\'a','Kirinyaga','Nyeri','Nyandarua','Meru','Tharaka Nithi','Embu','Kitui','Machakos','Makueni','Nyandarua','Nyeri','Kirinyaga','Murang\'a','Kiambu','Turkana','West Pokot','Samburu','Trans Nzoia','Uasin Gishu','Elgeyo Marakwet','Nandi','Baringo','Laikipia','Nakuru','Narok','Kajiado','Kericho','Bomet','Kakamega','Vihiga','Bungoma','Busia','Siaya','Kisumu','Homa Bay','Migori','Kisii','Nyamira','Mombasa','Kwale','Kilifi','Tana River','Lamu','Taita Taveta','Garissa','Wajir','Mandera','Marsabit','Isiolo','Meru','Tharaka Nithi','Embu','Kitui','Machakos','Makueni'] as $c): ?>
            <option value="<?= $c ?>" <?= ($school['county']??'')===$c?'selected':'' ?>><?= $c ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="form-group"><label>Physical Address</label><textarea name="address" rows="2"><?= htmlspecialchars($school['address'] ?? '') ?></textarea></div>
        <div class="form-group"><label>School Motto</label><input type="text" name="motto" value="<?= htmlspecialchars($school['motto'] ?? '') ?>" placeholder="e.g. Excellence in Education"></div>
      </div>
    </div>

    <!-- Letterhead & Logo -->
    <div class="card">
      <div class="card-header"><h5><i class="bi bi-image"></i> Logo & Letterhead</h5></div>
      <div class="card-body">
        <!-- Logo -->
        <div class="form-group">
          <label>School Logo</label>
          <?php if($logoUrl): ?>
          <div style="margin-bottom:10px;padding:10px;background:var(--light);border-radius:8px;text-align:center">
            <img src="<?= $logoUrl ?>" style="max-height:80px;max-width:200px;object-fit:contain">
            <div style="font-size:11px;color:var(--gray);margin-top:4px">Current logo</div>
          </div>
          <?php endif; ?>
          <input type="file" name="logo" accept="image/*" style="padding:8px">
          <div style="font-size:11px;color:var(--gray);margin-top:4px">JPG/PNG/WebP, max 2MB. Used on report cards & letterheads.</div>
        </div>

        <!-- Principal -->
        <div class="form-group"><label>Principal / Head Teacher Name</label><input type="text" name="principal_name" value="<?= htmlspecialchars($school['principal_name'] ?? '') ?>" placeholder="e.g. Mr. John Kamau"></div>

        <!-- Signature -->
        <div class="form-group">
          <label>Principal's Signature (image)</label>
          <?php if($sigUrl): ?>
          <div style="margin-bottom:10px;padding:10px;background:var(--light);border-radius:8px;text-align:center">
            <img src="<?= $sigUrl ?>" style="max-height:60px;max-width:180px;object-fit:contain">
          </div>
          <?php endif; ?>
          <input type="file" name="principal_signature" accept="image/*" style="padding:8px">
        </div>

        <!-- Letterhead footer -->
        <div class="form-group">
          <label>Letterhead Footer Text</label>
          <textarea name="letterhead_footer" rows="3" placeholder="e.g. P.O Box 1234-00100, Nairobi | Tel: +254700000000 | Email: info@school.ac.ke"><?= htmlspecialchars($school['letterhead_footer'] ?? '') ?></textarea>
          <div style="font-size:11px;color:var(--gray);margin-top:4px">Appears at the bottom of report cards and official documents.</div>
        </div>
      </div>
    </div>
  </div>

  <div style="margin-top:4px">
    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save School Profile</button>
  </div>
</form>

<!-- ══ SMS ═══════════════════════════════════════════════════ -->
<?php elseif($tab === 'sms'): ?>

<!-- Provider selector -->
<div class="card" style="margin-bottom:20px">
  <div class="card-header"><h5><i class="bi bi-phone"></i> SMS Provider</h5></div>
  <div class="card-body">
    <form method="POST" action="<?= $u('admin/settings/sms') ?>" id="smsProviderForm">
      <?= \Core\View::csrf() ?>
      <div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px">

        <!-- Advanta -->
        <label style="flex:1;min-width:220px;cursor:pointer">
          <input type="radio" name="sms_provider" value="advanta" <?= ($school['sms_provider']??'advanta')==='advanta'?'checked':'' ?> onchange="showProvider('advanta')" style="display:none" id="provAdvanta">
          <div id="cardAdvanta" style="border:2px solid <?= ($school['sms_provider']??'advanta')==='advanta'?'var(--primary)':'var(--border)' ?>;border-radius:12px;padding:16px;transition:all .2s">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
              <div style="width:40px;height:40px;background:#1a7f5a;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px">AD</div>
              <div>
                <div style="font-weight:700;font-size:14px">Advanta SMS</div>
                <div style="font-size:11px;color:var(--gray)">quicksms.advantasms.com</div>
              </div>
              <span class="badge badge-success" style="margin-left:auto">Recommended</span>
            </div>
            <div style="font-size:12px;color:var(--gray)">Kenya-based SMS gateway. Reliable delivery, competitive rates, easy API integration.</div>
          </div>
        </label>

        <!-- Africa's Talking -->
        <label style="flex:1;min-width:220px;cursor:pointer">
          <input type="radio" name="sms_provider" value="africastalking" <?= ($school['sms_provider']??'')==='africastalking'?'checked':'' ?> onchange="showProvider('africastalking')" style="display:none" id="provAT">
          <div id="cardAT" style="border:2px solid <?= ($school['sms_provider']??'')==='africastalking'?'var(--primary)':'var(--border)' ?>;border-radius:12px;padding:16px;transition:all .2s">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
              <div style="width:40px;height:40px;background:#e74c3c;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px">AT</div>
              <div>
                <div style="font-weight:700;font-size:14px">Africa's Talking</div>
                <div style="font-size:11px;color:var(--gray)">africastalking.com</div>
              </div>
            </div>
            <div style="font-size:12px;color:var(--gray)">Pan-Africa SMS gateway with sandbox for testing.</div>
          </div>
        </label>
      </div>

      <!-- Advanta fields -->
      <div id="fieldsAdvanta" style="display:<?= ($school['sms_provider']??'advanta')==='advanta'?'block':'none' ?>">
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#065f46">
          <i class="bi bi-info-circle"></i> Get your API key from <a href="https://quicksms.advantasms.com/auth/login" target="_blank" style="color:#065f46;font-weight:600">quicksms.advantasms.com</a> → Account → API Settings
        </div>
        <div class="grid g2">
          <div class="form-group">
            <label>API Key *</label>
            <div style="position:relative">
              <input type="password" name="advanta_api_key" id="advantaKey" value="<?= htmlspecialchars($school['advanta_api_key'] ?? '') ?>" placeholder="Your Advanta API Key">
              <button type="button" onclick="togglePass('advantaKey')" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray)"><i class="bi bi-eye"></i></button>
            </div>
          </div>
          <div class="form-group">
            <label>Partner ID</label>
            <input type="text" name="advanta_partner_id" value="<?= htmlspecialchars($school['advanta_partner_id'] ?? '') ?>" placeholder="Your Advanta Partner ID">
          </div>
          <div class="form-group">
            <label>Sender ID / Shortcode</label>
            <input type="text" name="advanta_sender_id" value="<?= htmlspecialchars($school['advanta_sender_id'] ?? '') ?>" placeholder="e.g. EDUSMART (max 11 chars)">
            <div style="font-size:11px;color:var(--gray);margin-top:4px">Must be registered with Advanta. Leave blank to use default.</div>
          </div>
        </div>
      </div>

      <!-- Africa's Talking fields -->
      <div id="fieldsAT" style="display:<?= ($school['sms_provider']??'')==='africastalking'?'block':'none' ?>">
        <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#991b1b">
          <i class="bi bi-info-circle"></i> Get credentials from <a href="https://account.africastalking.com" target="_blank" style="color:#991b1b;font-weight:600">account.africastalking.com</a>. Use <strong>sandbox</strong> for testing.
        </div>
        <div class="grid g2">
          <div class="form-group">
            <label>AT Username *</label>
            <input type="text" name="at_username" value="<?= htmlspecialchars($school['at_username'] ?? '') ?>" placeholder="sandbox or your AT username">
          </div>
          <div class="form-group">
            <label>AT API Key *</label>
            <div style="position:relative">
              <input type="password" name="at_api_key" id="atKey" value="<?= htmlspecialchars($school['at_api_key'] ?? '') ?>" placeholder="Africa's Talking API Key">
              <button type="button" onclick="togglePass('atKey')" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray)"><i class="bi bi-eye"></i></button>
            </div>
          </div>
          <div class="form-group">
            <label>Sender ID <span style="color:var(--gray);font-weight:400">(optional)</span></label>
            <input type="text" name="at_sender_id" value="<?= htmlspecialchars($school['at_sender_id'] ?? '') ?>" placeholder="e.g. EDUSMART">
          </div>
        </div>
      </div>

      <div style="display:flex;gap:10px;align-items:center;margin-top:8px">
        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save SMS Settings</button>
        <span style="font-size:12px;color:var(--gray)">Active: <strong><?= strtoupper($school['sms_provider'] ?? 'advanta') ?></strong></span>
      </div>
    </form>
  </div>
</div>

<!-- Test SMS -->
<div class="card">
  <div class="card-header"><h5><i class="bi bi-send"></i> Test SMS</h5></div>
  <div class="card-body">
    <div style="display:flex;gap:20px;flex-wrap:wrap">
      <div style="flex:1;min-width:260px">
        <form method="POST" action="<?= $u('admin/settings/sms/test') ?>">
          <?= \Core\View::csrf() ?>
          <div class="form-group">
            <label>Send test SMS to *</label>
            <input type="text" name="test_phone" placeholder="+254712345678" required>
            <div style="font-size:11px;color:var(--gray);margin-top:4px">Include country code e.g. +254...</div>
          </div>
          <button type="submit" class="btn btn-secondary"><i class="bi bi-send"></i> Send Test SMS</button>
        </form>
      </div>
      <div style="flex:1;min-width:220px;background:var(--light);border-radius:8px;padding:16px">
        <div style="font-weight:600;font-size:13px;margin-bottom:10px">SMS is used for:</div>
        <ul style="font-size:12px;color:var(--gray);padding-left:16px;line-height:2">
          <li>Fee payment reminders</li>
          <li>Results notifications to parents</li>
          <li>Attendance alerts</li>
          <li>School announcements</li>
          <li>2FA verification codes</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- ══ MPESA ══════════════════════════════════════════════════ -->
<?php elseif($tab === 'mpesa'): ?>
<div class="grid g2">
  <div class="card">
    <div class="card-header">
      <h5><i class="bi bi-phone-vibrate"></i> M-Pesa Paybill Integration</h5>
      <a href="https://developer.safaricom.co.ke" target="_blank" class="btn btn-sm btn-secondary"><i class="bi bi-box-arrow-up-right"></i> Daraja Portal</a>
    </div>
    <div class="card-body">
      <div style="background:#d1fae5;border:1px solid #6ee7b7;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#065f46">
        <i class="bi bi-info-circle"></i> Configure your <strong>Safaricom Daraja API</strong> credentials to enable M-Pesa STK Push payments.
        Register at <a href="https://developer.safaricom.co.ke" target="_blank" style="color:#065f46;font-weight:600">developer.safaricom.co.ke</a>.
      </div>
      <form method="POST" action="<?= $u('admin/settings/mpesa') ?>">
        <?= \Core\View::csrf() ?>
        <div class="grid g2">
          <div class="form-group">
            <label>Paybill Number *</label>
            <input type="text" name="mpesa_paybill" value="<?= htmlspecialchars($school['mpesa_paybill'] ?? '') ?>" placeholder="e.g. 400200">
          </div>
          <div class="form-group">
            <label>Account Reference</label>
            <input type="text" name="mpesa_account" value="<?= htmlspecialchars($school['mpesa_account'] ?? '') ?>" placeholder="e.g. Assessment No or School Name">
          </div>
        </div>
        <div class="form-group">
          <label>Consumer Key</label>
          <div style="position:relative">
            <input type="password" name="mpesa_consumer_key" id="mpesaKey" value="<?= htmlspecialchars($school['mpesa_consumer_key'] ?? '') ?>" placeholder="Daraja Consumer Key">
            <button type="button" onclick="togglePass('mpesaKey')" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray)"><i class="bi bi-eye"></i></button>
          </div>
        </div>
        <div class="form-group">
          <label>Consumer Secret</label>
          <div style="position:relative">
            <input type="password" name="mpesa_consumer_secret" id="mpesaSecret" value="<?= htmlspecialchars($school['mpesa_consumer_secret'] ?? '') ?>" placeholder="Daraja Consumer Secret">
            <button type="button" onclick="togglePass('mpesaSecret')" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray)"><i class="bi bi-eye"></i></button>
          </div>
        </div>
        <div class="form-group">
          <label>Lipa Na M-Pesa Passkey</label>
          <textarea name="mpesa_passkey" rows="2" placeholder="Passkey from Daraja portal"><?= htmlspecialchars($school['mpesa_passkey'] ?? '') ?></textarea>
        </div>
        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save M-Pesa Settings</button>
      </form>
    </div>
  </div>

  <!-- Mpesa Info -->
  <div class="card">
    <div class="card-header"><h5><i class="bi bi-question-circle"></i> Setup Guide</h5></div>
    <div class="card-body">
      <div style="font-size:13px;line-height:1.9">
        <div style="font-weight:600;margin-bottom:8px;color:var(--primary)">Step 1 — Register on Daraja</div>
        <p style="color:var(--gray);margin-bottom:16px">Go to <a href="https://developer.safaricom.co.ke" target="_blank">developer.safaricom.co.ke</a>, create an account and create a new app.</p>

        <div style="font-weight:600;margin-bottom:8px;color:var(--primary)">Step 2 — Get Credentials</div>
        <p style="color:var(--gray);margin-bottom:16px">Copy your Consumer Key, Consumer Secret, and Lipa Na M-Pesa Passkey from the app dashboard.</p>

        <div style="font-weight:600;margin-bottom:8px;color:var(--primary)">Step 3 — Configure Paybill</div>
        <p style="color:var(--gray);margin-bottom:16px">Enter your school's M-Pesa Paybill number. Parents will use this to pay fees.</p>

        <div style="font-weight:600;margin-bottom:8px;color:var(--primary)">Step 4 — Test</div>
        <p style="color:var(--gray)">Use the sandbox environment first before going live.</p>
      </div>

      <div style="margin-top:20px;padding:14px;background:var(--light);border-radius:8px">
        <div style="font-weight:600;font-size:13px;margin-bottom:8px">Current Status</div>
        <?php
        $mpesaConfigured = !empty($school['mpesa_paybill']) && !empty($school['mpesa_consumer_key']);
        ?>
        <div style="display:flex;align-items:center;gap:8px;font-size:13px">
          <div style="width:10px;height:10px;border-radius:50%;background:<?= $mpesaConfigured?'var(--success)':'var(--danger)' ?>"></div>
          <?= $mpesaConfigured ? 'M-Pesa configured — Paybill: <strong>'.$school['mpesa_paybill'].'</strong>' : 'Not configured yet' ?>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══ EMAIL ══════════════════════════════════════════════════ -->
<?php elseif($tab === 'email'): ?>
<div class="grid g2">
  <div class="card">
    <div class="card-header"><h5><i class="bi bi-envelope-at"></i> Email / SMTP Configuration</h5></div>
    <div class="card-body">
      <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#92400e">
        <i class="bi bi-info-circle"></i> Used for sending report cards, fee receipts, and notifications via email.
        Works with Gmail, Outlook, or any SMTP provider.
      </div>
      <form method="POST" action="<?= $u('admin/settings/email') ?>">
        <?= \Core\View::csrf() ?>
        <div class="grid g2">
          <div class="form-group">
            <label>SMTP Host *</label>
            <input type="text" name="smtp_host" value="<?= htmlspecialchars($school['smtp_host'] ?? '') ?>" placeholder="smtp.gmail.com">
          </div>
          <div class="form-group">
            <label>SMTP Port</label>
            <select name="smtp_port">
              <option value="587" <?= ($school['smtp_port']??'587')==='587'?'selected':'' ?>>587 (TLS — recommended)</option>
              <option value="465" <?= ($school['smtp_port']??'')==='465'?'selected':'' ?>>465 (SSL)</option>
              <option value="25"  <?= ($school['smtp_port']??'')==='25'?'selected':'' ?>>25 (Plain)</option>
            </select>
          </div>
          <div class="form-group">
            <label>SMTP Username</label>
            <input type="text" name="smtp_user" value="<?= htmlspecialchars($school['smtp_user'] ?? '') ?>" placeholder="your@gmail.com">
          </div>
          <div class="form-group">
            <label>SMTP Password / App Password</label>
            <div style="position:relative">
              <input type="password" name="smtp_pass" id="smtpPass" value="<?= htmlspecialchars($school['smtp_pass'] ?? '') ?>" placeholder="App password">
              <button type="button" onclick="togglePass('smtpPass')" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray)"><i class="bi bi-eye"></i></button>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label>From Email Address</label>
          <input type="email" name="smtp_from" value="<?= htmlspecialchars($school['smtp_from'] ?? '') ?>" placeholder="noreply@yourschool.ac.ke">
        </div>
        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save Email Settings</button>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><h5><i class="bi bi-question-circle"></i> Gmail Setup Guide</h5></div>
    <div class="card-body" style="font-size:13px;line-height:1.9;color:var(--gray)">
      <div style="font-weight:600;color:var(--dark);margin-bottom:6px">Using Gmail:</div>
      <ol style="padding-left:18px;margin-bottom:16px">
        <li>Enable 2-Step Verification on your Google account</li>
        <li>Go to Google Account → Security → App Passwords</li>
        <li>Generate an App Password for "Mail"</li>
        <li>Use that 16-character password here (not your Gmail password)</li>
      </ol>
      <div style="font-weight:600;color:var(--dark);margin-bottom:6px">Gmail Settings:</div>
      <div style="background:var(--light);padding:10px 14px;border-radius:8px;font-family:monospace;font-size:12px">
        Host: smtp.gmail.com<br>
        Port: 587<br>
        Username: your@gmail.com<br>
        Password: [App Password]
      </div>
    </div>
  </div>
</div>
<?php elseif($tab === 'recaptcha'): ?>
<?php
$appCfg   = require ROOT . '/config/app.php';
$rcSite   = $appCfg['recaptcha_site']   ?? '';
$rcSecret = $appCfg['recaptcha_secret'] ?? '';
?>
<div class="grid g2">
  <div class="card">
    <div class="card-header"><h5><i class="bi bi-shield-check"></i> Google reCAPTCHA v2</h5></div>
    <div class="card-body">
      <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#1e40af">
        <i class="bi bi-info-circle"></i> reCAPTCHA protects your login page from bots and brute-force attacks.
        Get your free keys from <a href="https://www.google.com/recaptcha/admin" target="_blank" style="color:#1e40af;font-weight:600">google.com/recaptcha</a>
        &rarr; Register site &rarr; Choose <strong>reCAPTCHA v2 &ldquo;I&rsquo;m not a robot&rdquo;</strong>.
      </div>
      <form method="POST" action="<?= $u('admin/settings/recaptcha') ?>">
        <?= \Core\View::csrf() ?>
        <div class="form-group">
          <label>Site Key <span style="color:var(--gray);font-weight:400">(public — shown in login page)</span></label>
          <input type="text" name="recaptcha_site" value="<?= htmlspecialchars($rcSite) ?>" placeholder="6Lc...">
        </div>
        <div class="form-group">
          <label>Secret Key <span style="color:var(--gray);font-weight:400">(private — never share)</span></label>
          <div style="position:relative">
            <input type="password" name="recaptcha_secret" id="rcSecret" value="<?= htmlspecialchars($rcSecret) ?>" placeholder="6Lc...">
            <button type="button" onclick="togglePass('rcSecret')" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray)"><i class="bi bi-eye"></i></button>
          </div>
        </div>
        <div style="display:flex;align-items:center;gap:14px;margin-top:4px">
          <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save reCAPTCHA Keys</button>
          <?php if($rcSite): ?>
          <span style="font-size:12px;color:var(--success)"><i class="bi bi-check-circle-fill"></i> <strong>Active</strong> on login page</span>
          <?php else: ?>
          <span style="font-size:12px;color:var(--gray)"><i class="bi bi-circle"></i> Inactive &mdash; add site key to enable</span>
          <?php endif; ?>
        </div>
      </form>
    </div>
  </div>
  <div class="card">
    <div class="card-header"><h5><i class="bi bi-question-circle"></i> Setup Guide</h5></div>
    <div class="card-body" style="font-size:13px;line-height:1.9;color:var(--gray)">
      <div style="font-weight:600;color:var(--dark);margin-bottom:4px">Step 1 &mdash; Register your site</div>
      <p>Go to <a href="https://www.google.com/recaptcha/admin" target="_blank" style="color:var(--primary)">google.com/recaptcha</a>, sign in and click <strong>+</strong>.</p>
      <div style="font-weight:600;color:var(--dark);margin:10px 0 4px">Step 2 &mdash; Choose type</div>
      <p>Select <strong>reCAPTCHA v2</strong> &rarr; <em>&ldquo;I&rsquo;m not a robot&rdquo; Checkbox</em>.</p>
      <div style="font-weight:600;color:var(--dark);margin:10px 0 4px">Step 3 &mdash; Add domain</div>
      <p>Add <code>localhost</code> for local testing or your live domain.</p>
      <div style="font-weight:600;color:var(--dark);margin:10px 0 4px">Step 4 &mdash; Copy keys</div>
      <p>Paste the <strong>Site Key</strong> and <strong>Secret Key</strong> into the form on the left.</p>
      <div style="margin-top:14px;padding:10px;background:#fef3c7;border-radius:8px;font-size:12px;color:#92400e">
        <i class="bi bi-exclamation-triangle"></i> Leave keys blank to disable reCAPTCHA (e.g. during development).
      </div>
    </div>
  </div>
</div>
<?php endif; ?>
function togglePass(id) {
  var el = document.getElementById(id);
  el.type = el.type === "password" ? "text" : "password";
}
function showProvider(p) {
  document.getElementById("fieldsAdvanta").style.display = p === "advanta" ? "block" : "none";
  document.getElementById("fieldsAT").style.display      = p === "africastalking" ? "block" : "none";
  document.getElementById("cardAdvanta").style.borderColor = p === "advanta" ? "var(--primary)" : "var(--border)";
  document.getElementById("cardAT").style.borderColor      = p === "africastalking" ? "var(--primary)" : "var(--border)";
  // enable/disable hidden inputs so only active provider fields are submitted
  var advantaInputs = document.querySelectorAll("#fieldsAdvanta input");
  var atInputs      = document.querySelectorAll("#fieldsAT input");
  advantaInputs.forEach(function(el){ el.disabled = p !== "advanta"; });
  atInputs.forEach(function(el){      el.disabled = p !== "africastalking"; });
}
// Run on page load to disable inactive provider fields
(function(){
  var active = document.querySelector("input[name=sms_provider]:checked");
  if (active) showProvider(active.value);
})();
</script>'; ?>

