tomsjavajive-app/admin/integrations.php

<?php
ob_start();
/**
 * Tom's Java Jive - Admin Integrations Settings
 */

$pageTitle = 'Integrations';
$currentPage = 'integrations';
require_once __DIR__ . '/includes/header.php';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $section = $_POST['section'] ?? '';
    
    $settingsMap = [
        'sendgrid' => ['sendgrid_api_key', 'sendgrid_from_email', 'sendgrid_from_name', 'email_notifications_enabled'],
        'twilio' => ['twilio_account_sid', 'twilio_auth_token', 'twilio_phone_number', 'sms_notifications_enabled'],
        'push' => ['vapid_public_key', 'vapid_private_key', 'push_notifications_enabled'],
        'loyalty' => ['loyalty_enabled']
    ];
    
    if (isset($settingsMap[$section])) {
        foreach ($settingsMap[$section] as $key) {
            $value = $_POST[$key] ?? '';
            
            // Check if setting exists
            $existing = db()->fetch("SELECT id FROM settings WHERE setting_key = :key", ['key' => $key]);
            
            if ($existing) {
                db()->query(
                    "UPDATE settings SET setting_value = :value, updated_at = NOW() WHERE setting_key = :key",
                    ['value' => $value, 'key' => $key]
                );
            } else {
                db()->insert('settings', [
                    'setting_key' => $key,
                    'setting_value' => $value
                ]);
            }
        }
        
        setFlash('success', ucfirst($section) . ' settings saved successfully!');
    }
    
    redirect('/admin/integrations.php');
}

// Load current settings
$settings = [];
$allSettings = db()->fetchAll("SELECT setting_key, setting_value FROM settings");
foreach ($allSettings as $s) {
    $settings[$s['setting_key']] = $s['setting_value'];
}
?>

<style>
.integration-card {
    background: var(--admin-surface);
    border-radius: var(--admin-radius);
    margin-bottom: 1.5rem;
}

.integration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.integration-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.integration-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.integration-icon.sendgrid { background: #1A82E2; color: white; }
.integration-icon.twilio { background: #F22F46; color: white; }
.integration-icon.push { background: #8B5CF6; color: white; }
.integration-icon.loyalty { background: #F59E0B; color: white; }

.integration-body {
    padding: 1.5rem;
}

.status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.configured {
    background: rgba(16, 185, 129, 0.1);
    color: var(--admin-success);
}

.status-badge.not-configured {
    background: rgba(245, 158, 11, 0.1);
    color: var(--admin-warning);
}

.status-badge.enabled {
    background: rgba(16, 185, 129, 0.1);
    color: var(--admin-success);
}

.status-badge.disabled {
    background: rgba(239, 68, 68, 0.1);
    color: var(--admin-error);
}

.key-input {
    font-family: monospace;
    font-size: 0.875rem;
}

.test-btn {
    margin-top: 0.5rem;
}

.help-text {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    margin-top: 0.25rem;
}

.help-link {
    color: var(--admin-primary);
}
</style>

<div class="page-header">
    <h1 class="page-title">Integrations</h1>
    <p class="text-muted">Configure third-party service integrations</p>
</div>

<?php if (hasFlash('success')): ?>
    <div class="alert alert-success mb-2">
        <i class="fas fa-check-circle"></i> <?= getFlash('success') ?>
    </div>
<?php endif; ?>

<!-- SendGrid Email -->
<div class="integration-card">
    <div class="integration-header">
        <div class="integration-title">
            <div class="integration-icon sendgrid">
                <i class="fas fa-envelope"></i>
            </div>
            <div>
                <h3 style="margin: 0;">SendGrid Email</h3>
                <p style="margin: 0.25rem 0 0; color: var(--admin-text-muted); font-size: 0.875rem;">
                    Send transactional emails (order confirmations, shipping updates, etc.)
                </p>
            </div>
        </div>
        <?php 
        $sgConfigured = !empty($settings['sendgrid_api_key']) && $settings['sendgrid_api_key'] !== 'YOUR_SENDGRID_API_KEY_HERE';
        $sgEnabled = ($settings['email_notifications_enabled'] ?? '0') === '1';
        ?>
        <span class="status-badge <?= $sgConfigured && $sgEnabled ? 'enabled' : ($sgConfigured ? 'configured' : 'not-configured') ?>">
            <?= $sgConfigured && $sgEnabled ? 'Enabled' : ($sgConfigured ? 'Configured' : 'Not Configured') ?>
        </span>
    </div>
    <div class="integration-body">
        <form method="POST">
            <input type="hidden" name="section" value="sendgrid">
            
            <div class="form-row">
                <div class="form-group" style="flex: 2;">
                    <label class="form-label">SendGrid API Key</label>
                    <input type="password" name="sendgrid_api_key" class="form-input key-input" 
                           value="<?= htmlspecialchars($settings['sendgrid_api_key'] ?? '') ?>"
                           placeholder="SG.xxxxxxxxxxxxxxxxxxxxxxxx">
                    <p class="help-text">
                        Get your API key from 
                        <a href="https://app.sendgrid.com/settings/api_keys" target="_blank" class="help-link">SendGrid Dashboard</a>
                    </p>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">From Email</label>
                    <input type="email" name="sendgrid_from_email" class="form-input" 
                           value="<?= htmlspecialchars($settings['sendgrid_from_email'] ?? 'noreply@tomsjavajive.com') ?>">
                </div>
                <div class="form-group">
                    <label class="form-label">From Name</label>
                    <input type="text" name="sendgrid_from_name" class="form-input" 
                           value="<?= htmlspecialchars($settings['sendgrid_from_name'] ?? "Tom's Java Jive") ?>">
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-checkbox">
                    <input type="checkbox" name="email_notifications_enabled" value="1" 
                           <?= ($settings['email_notifications_enabled'] ?? '0') === '1' ? 'checked' : '' ?>>
                    Enable email notifications
                </label>
            </div>
            
            <div style="display: flex; gap: 0.5rem;">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Save Settings
                </button>
                <button type="button" class="btn btn-secondary" onclick="testSendGrid()">
                    <i class="fas fa-paper-plane"></i> Send Test Email
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Twilio SMS -->
<div class="integration-card">
    <div class="integration-header">
        <div class="integration-title">
            <div class="integration-icon twilio">
                <i class="fas fa-sms"></i>
            </div>
            <div>
                <h3 style="margin: 0;">Twilio SMS</h3>
                <p style="margin: 0.25rem 0 0; color: var(--admin-text-muted); font-size: 0.875rem;">
                    Send SMS notifications for orders, shipping updates, and promotions
                </p>
            </div>
        </div>
        <?php 
        $twConfigured = !empty($settings['twilio_account_sid']) && !empty($settings['twilio_auth_token']);
        $twEnabled = ($settings['sms_notifications_enabled'] ?? '0') === '1';
        ?>
        <span class="status-badge <?= $twConfigured && $twEnabled ? 'enabled' : ($twConfigured ? 'configured' : 'not-configured') ?>">
            <?= $twConfigured && $twEnabled ? 'Enabled' : ($twConfigured ? 'Configured' : 'Not Configured') ?>
        </span>
    </div>
    <div class="integration-body">
        <form method="POST">
            <input type="hidden" name="section" value="twilio">
            
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Account SID</label>
                    <input type="text" name="twilio_account_sid" class="form-input key-input" 
                           value="<?= htmlspecialchars($settings['twilio_account_sid'] ?? '') ?>"
                           placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                </div>
                <div class="form-group">
                    <label class="form-label">Auth Token</label>
                    <input type="password" name="twilio_auth_token" class="form-input key-input" 
                           value="<?= htmlspecialchars($settings['twilio_auth_token'] ?? '') ?>"
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">Twilio Phone Number</label>
                <input type="text" name="twilio_phone_number" class="form-input" 
                       value="<?= htmlspecialchars($settings['twilio_phone_number'] ?? '') ?>"
                       placeholder="+1234567890">
                <p class="help-text">
                    Get your credentials from 
                    <a href="https://console.twilio.com/" target="_blank" class="help-link">Twilio Console</a>
                </p>
            </div>
            
            <div class="form-group">
                <label class="form-checkbox">
                    <input type="checkbox" name="sms_notifications_enabled" value="1" 
                           <?= ($settings['sms_notifications_enabled'] ?? '0') === '1' ? 'checked' : '' ?>>
                    Enable SMS notifications
                </label>
            </div>
            
            <div style="display: flex; gap: 0.5rem;">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Save Settings
                </button>
                <button type="button" class="btn btn-secondary" onclick="testTwilio()">
                    <i class="fas fa-sms"></i> Send Test SMS
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Push Notifications -->
<div class="integration-card">
    <div class="integration-header">
        <div class="integration-title">
            <div class="integration-icon push">
                <i class="fas fa-bell"></i>
            </div>
            <div>
                <h3 style="margin: 0;">Push Notifications</h3>
                <p style="margin: 0.25rem 0 0; color: var(--admin-text-muted); font-size: 0.875rem;">
                    Web push notifications for order updates and promotions
                </p>
            </div>
        </div>
        <?php 
        $pushConfigured = !empty($settings['vapid_public_key']) && !empty($settings['vapid_private_key']);
        $pushEnabled = ($settings['push_notifications_enabled'] ?? '0') === '1';
        ?>
        <span class="status-badge <?= $pushConfigured && $pushEnabled ? 'enabled' : ($pushConfigured ? 'configured' : 'not-configured') ?>">
            <?= $pushConfigured && $pushEnabled ? 'Enabled' : ($pushConfigured ? 'Configured' : 'Not Configured') ?>
        </span>
    </div>
    <div class="integration-body">
        <form method="POST">
            <input type="hidden" name="section" value="push">
            
            <div class="form-group">
                <label class="form-label">VAPID Public Key</label>
                <input type="text" name="vapid_public_key" class="form-input key-input" 
                       value="<?= htmlspecialchars($settings['vapid_public_key'] ?? '') ?>"
                       placeholder="BNxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
            </div>
            
            <div class="form-group">
                <label class="form-label">VAPID Private Key</label>
                <input type="password" name="vapid_private_key" class="form-input key-input" 
                       value="<?= htmlspecialchars($settings['vapid_private_key'] ?? '') ?>"
                       placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                <p class="help-text">
                    Generate VAPID keys at 
                    <a href="https://web-push-codelab.glitch.me/" target="_blank" class="help-link">Web Push Codelab</a>
                </p>
            </div>
            
            <div class="form-group">
                <label class="form-checkbox">
                    <input type="checkbox" name="push_notifications_enabled" value="1" 
                           <?= ($settings['push_notifications_enabled'] ?? '0') === '1' ? 'checked' : '' ?>>
                    Enable push notifications
                </label>
            </div>
            
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Settings
            </button>
        </form>
    </div>
</div>

<!-- Loyalty Program -->
<div class="integration-card">
    <div class="integration-header">
        <div class="integration-title">
            <div class="integration-icon loyalty">
                <i class="fas fa-crown"></i>
            </div>
            <div>
                <h3 style="margin: 0;">Loyalty Program</h3>
                <p style="margin: 0.25rem 0 0; color: var(--admin-text-muted); font-size: 0.875rem;">
                    Reward customers with points and tiers (Bronze, Silver, Gold, Platinum)
                </p>
            </div>
        </div>
        <?php $loyaltyEnabled = ($settings['loyalty_enabled'] ?? '1') === '1'; ?>
        <span class="status-badge <?= $loyaltyEnabled ? 'enabled' : 'disabled' ?>">
            <?= $loyaltyEnabled ? 'Enabled' : 'Disabled' ?>
        </span>
    </div>
    <div class="integration-body">
        <form method="POST">
            <input type="hidden" name="section" value="loyalty">
            
            <div class="form-group">
                <label class="form-checkbox">
                    <input type="checkbox" name="loyalty_enabled" value="1" 
                           <?= $loyaltyEnabled ? 'checked' : '' ?>>
                    Enable loyalty program
                </label>
            </div>
            
            <div style="background: var(--admin-bg); padding: 1.5rem; border-radius: var(--admin-radius); margin: 1rem 0;">
                <h4 style="margin: 0 0 1rem;">Tier Structure</h4>
                <table class="table" style="margin: 0;">
                    <thead>
                        <tr>
                            <th>Tier</th>
                            <th>Min Points</th>
                            <th>Multiplier</th>
                            <th>Key Benefits</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span style="color: #CD7F32;"><i class="fas fa-coffee"></i></span> Bronze Bean</td>
                            <td>0</td>
                            <td>1x</td>
                            <td>1 point/$1, Birthday reward</td>
                        </tr>
                        <tr>
                            <td><span style="color: #C0C0C0;"><i class="fas fa-mug-hot"></i></span> Silver Roast</td>
                            <td>500</td>
                            <td>1.25x</td>
                            <td>Free shipping $25+, Double points weekends</td>
                        </tr>
                        <tr>
                            <td><span style="color: #FFD700;"><i class="fas fa-crown"></i></span> Gold Blend</td>
                            <td>1,500</td>
                            <td>1.5x</td>
                            <td>Free shipping all orders, Priority support</td>
                        </tr>
                        <tr>
                            <td><span style="color: #E5E4E2;"><i class="fas fa-gem"></i></span> Platinum Reserve</td>
                            <td>5,000</td>
                            <td>2x</td>
                            <td>Express shipping, VIP events, Account manager</td>
                        </tr>
                    </tbody>
                </table>
                <p class="text-muted" style="margin: 1rem 0 0; font-size: 0.875rem;">
                    100 points = $1 credit • Points earned on every purchase
                </p>
            </div>
            
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Settings
            </button>
        </form>
    </div>
</div>

<!-- Test Modal -->
<div class="modal-overlay" id="testModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title" id="testModalTitle">Send Test</h3>
            <button type="button" class="modal-close" onclick="Modal.close('testModal')">&times;</button>
        </div>
        <form id="testForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label" id="testInputLabel">Recipient</label>
                    <input type="text" id="testRecipient" class="form-input" required>
                </div>
                <div id="testResult" style="display: none; padding: 1rem; border-radius: var(--admin-radius); margin-top: 1rem;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="Modal.close('testModal')">Cancel</button>
                <button type="submit" class="btn btn-primary" id="testSubmitBtn">
                    <i class="fas fa-paper-plane"></i> Send
                </button>
            </div>
        </form>
    </div>
</div>

<script>
let testType = '';

function testSendGrid() {
    testType = 'email';
    document.getElementById('testModalTitle').textContent = 'Send Test Email';
    document.getElementById('testInputLabel').textContent = 'Recipient Email';
    document.getElementById('testRecipient').type = 'email';
    document.getElementById('testRecipient').placeholder = 'test@example.com';
    document.getElementById('testResult').style.display = 'none';
    Modal.open('testModal');
}

function testTwilio() {
    testType = 'sms';
    document.getElementById('testModalTitle').textContent = 'Send Test SMS';
    document.getElementById('testInputLabel').textContent = 'Phone Number';
    document.getElementById('testRecipient').type = 'tel';
    document.getElementById('testRecipient').placeholder = '+1234567890';
    document.getElementById('testResult').style.display = 'none';
    Modal.open('testModal');
}

document.getElementById('testForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const recipient = document.getElementById('testRecipient').value;
    const resultDiv = document.getElementById('testResult');
    const submitBtn = document.getElementById('testSubmitBtn');
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
    
    try {
        const response = await fetch('/api/test-notification.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type: testType, recipient })
        });
        const data = await response.json();
        
        resultDiv.style.display = 'block';
        if (data.success) {
            resultDiv.style.background = 'rgba(16, 185, 129, 0.1)';
            resultDiv.innerHTML = '<i class="fas fa-check-circle" style="color: var(--admin-success);"></i> ' + (data.message || 'Test sent successfully!');
        } else {
            resultDiv.style.background = 'rgba(239, 68, 68, 0.1)';
            resultDiv.innerHTML = '<i class="fas fa-times-circle" style="color: var(--admin-error);"></i> ' + (data.error || 'Failed to send test');
        }
    } catch (err) {
        resultDiv.style.display = 'block';
        resultDiv.style.background = 'rgba(239, 68, 68, 0.1)';
        resultDiv.innerHTML = '<i class="fas fa-times-circle" style="color: var(--admin-error);"></i> Error: ' + err.message;
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Send';
    }
});
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>