<!-- ===================== CONFIGURATION TAB ===================== -->
<div class="tab-pane <?= ($requested_tab === 'config') ? 'active' : '' ?>" id="tab-config">
  <div class="card" style="max-width:600px">
    <div class="card-header">
      <span class="card-title">⚙️ Communication Configuration</span>
      <p class="text-muted text-sm" style="margin-top: 8px;">Set up default contact methods for sending WhatsApp, SMS, and Email from leads</p>
    </div>
    <div class="card-body">
      <form id="configForm">
        <div class="form-grid">
          <div class="form-group span-2">
            <label class="form-label">
              📱 WhatsApp Number
              <span class="text-muted text-xs">(Include country code, e.g., +96171234567)</span>
            </label>
            <input type="tel" name="whatsapp_number" id="whatsapp_number" class="form-control" 
                   placeholder="+96171234567" value="<?= htmlspecialchars($config['phone_number']) ?>">
            <div class="form-hint text-xs text-muted">Used when clicking WhatsApp button on lead contacts</div>
          </div>
          
          <div class="form-group span-2">
            <label class="form-label">
              ✉️ SMS Number
              <span class="text-muted text-xs">(For SMS gateway integration)</span>
            </label>
            <input type="tel" name="sms_number" id="sms_number" class="form-control" 
                   placeholder="+96171234567" value="<?= htmlspecialchars($config['sms_number']) ?>">
            <div class="form-hint text-xs text-muted">Number used for sending SMS messages via your SMS gateway</div>
          </div>
          
          <div class="form-group span-2">
            <label class="form-label">
              📧 Email From Address
              <span class="text-muted text-xs">(Sender email for communications)</span>
            </label>
            <input type="email" name="email_from" id="email_from" class="form-control" 
                   placeholder="contact@yourcompany.com" value="<?= htmlspecialchars($config['email_from']) ?>">
            <div class="form-hint text-xs text-muted">Email address that will appear as sender when sending emails from CRM</div>
          </div>
          
          <div class="form-group span-2">
            <label class="form-label">
              📧 Email Host / SMTP Server (Optional)
            </label>
            <input type="text" name="smtp_host" id="smtp_host" class="form-control" 
                   placeholder="smtp.gmail.com" value="<?= htmlspecialchars($config['smtp_host'] ?? '') ?>">
          </div>
          
          <div class="form-group">
            <label class="form-label">SMTP Port</label>
            <input type="number" name="smtp_port" id="smtp_port" class="form-control" 
                   placeholder="587" value="<?= htmlspecialchars($config['smtp_port'] ?? '') ?>">
          </div>
          
          <div class="form-group">
            <label class="form-label">SMTP Username</label>
            <input type="text" name="smtp_username" id="smtp_username" class="form-control" 
                   value="<?= htmlspecialchars($config['smtp_username'] ?? '') ?>">
          </div>
          
          <div class="form-group">
            <label class="form-label">SMTP Password</label>
            <input type="password" name="smtp_password" id="smtp_password" class="form-control" 
                   value="<?= htmlspecialchars($config['smtp_password'] ?? '') ?>">
            <div class="form-hint text-xs text-muted">Leave blank to keep existing password</div>
          </div>
          
          <div class="form-group span-2">
            <label class="form-label">
              🔗 WhatsApp API URL (Optional - for automated sending)
            </label>
            <input type="url" name="whatsapp_api_url" id="whatsapp_api_url" class="form-control" 
                   placeholder="https://api.whatsapp.com/send?phone=" value="<?= htmlspecialchars($config['whatsapp_api_url'] ?? '') ?>">
            <div class="form-hint text-xs text-muted">Custom API endpoint for WhatsApp integration</div>
          </div>
        </div>
        
        <div style="margin-top: 20px; display: flex; gap: 12px;">
          <button type="button" class="btn btn-primary" onclick="saveConfig()">💾 Save Configuration</button>
          <button type="button" class="btn btn-secondary" onclick="testWhatsApp()">📱 Test WhatsApp</button>
          <button type="button" class="btn btn-secondary" onclick="testEmail()">📧 Test Email</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- Usage Instructions -->
  <div class="card" style="margin-top: 24px;">
    <div class="card-header">
      <span class="card-title">📖 How to Use</span>
    </div>
    <div class="card-body">
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
        <div>
          <h4>📱 WhatsApp</h4>
          <p class="text-sm text-muted">The WhatsApp number will be used when you click the WhatsApp button in:</p>
          <ul class="text-sm">
            <li>Lead details page</li>
            <li>Customer contacts list</li>
            <li>Quick contact buttons</li>
          </ul>
        </div>
        <div>
          <h4>✉️ SMS</h4>
          <p class="text-sm text-muted">The SMS number will be used for sending text messages through your SMS gateway integration.</p>
        </div>
        <div>
          <h4>📧 Email</h4>
          <p class="text-sm text-muted">The email address will appear as the sender when sending emails from:</p>
          <ul class="text-sm">
            <li>Lead follow-ups</li>
            <li>Activity notifications</li>
            <li>Customer communications</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
