<?php
$page_title = 'Integrations';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-plug" style="color:#14b8a6; margin-right:10px;"></i>Integrations</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">WhatsApp, email, SMS alerts, payment gateway, ERP sync, CRM sync.</p>
    </div>
</div>
<div class="grid-3" style="margin-bottom:24px;">
    <?php
    $integrations = [
        ['WhatsApp Support', 'fas fa-comment', '#25d366', 'Connected', 'Order updates, support chat, product inquiries'],
        ['Email Integration', 'fas fa-envelope', '#3b82f6', 'Connected', 'Invoices, statements, promotions, service alerts'],
        ['SMS Alerts', 'fas fa-sms', '#f59e0b', 'Connected', 'OTP, order status, delivery updates, offers'],
        ['Payment Gateway', 'fas fa-credit-card', '#8b5cf6', 'Active', 'UPI, Cards, Net Banking, Wallets, EMI'],
        ['ERP Sync', 'fas fa-sync', '#06b6d4', 'Connected', 'Real-time inventory, pricing, order sync'],
        ['CRM Sync', 'fas fa-users-cog', '#ec4899', 'Connected', 'Customer data, preferences, interaction log'],
    ];
    foreach ($integrations as $int): ?>
    <div class="card" style="margin-bottom:0; text-align:center; cursor:pointer; transition:all 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
        <div style="width:55px; height:55px; border-radius:14px; background:<?= $int[2] ?>15; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;">
            <i class="<?= $int[1] ?>" style="font-size:1.4rem; color:<?= $int[2] ?>;"></i>
        </div>
        <h4 style="margin:0 0 5px; font-size:0.95rem; color:#0f172a;"><?= $int[0] ?></h4>
        <p style="font-size:0.75rem; color:#94a3b8; margin:0 0 10px;"><?= $int[4] ?></p>
        <span style="background:#dcfce7; color:#166534; padding:4px 12px; border-radius:8px; font-size:0.7rem; font-weight:bold;"><?= $int[3] ?></span>
    </div>
    <?php endforeach; ?>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-bell" style="color:#f59e0b; margin-right:8px;"></i>Notification Preferences</h3>
        <?php
        $prefs = [
            ['Order Updates', true, true, true],
            ['Delivery Alerts', true, true, false],
            ['Promotions & Offers', false, true, true],
            ['Service Reminders', true, false, true],
            ['Payment Confirmations', true, true, false],
        ];
        ?>
        <table style="width:100%; font-size:0.85rem;">
            <tr style="color:#64748b; border-bottom:1px solid #e2e8f0;">
                <th style="text-align:left; padding:8px 0; font-weight:600;">Notification</th>
                <th style="text-align:center; padding:8px 0; font-weight:600;">SMS</th>
                <th style="text-align:center; padding:8px 0; font-weight:600;">Email</th>
                <th style="text-align:center; padding:8px 0; font-weight:600;">WhatsApp</th>
            </tr>
            <?php foreach ($prefs as $p): ?>
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:10px 0;"><?= $p[0] ?></td>
                <td style="text-align:center; padding:10px 0;"><input type="checkbox" <?= $p[1] ? 'checked' : '' ?> style="width:16px; height:16px; accent-color:#2563eb;"></td>
                <td style="text-align:center; padding:10px 0;"><input type="checkbox" <?= $p[2] ? 'checked' : '' ?> style="width:16px; height:16px; accent-color:#2563eb;"></td>
                <td style="text-align:center; padding:10px 0;"><input type="checkbox" <?= $p[3] ? 'checked' : '' ?> style="width:16px; height:16px; accent-color:#2563eb;"></td>
            </tr>
            <?php endforeach; ?>
        </table>
        <button style="background:#2563eb; color:#fff; border:none; padding:10px 20px; border-radius:8px; font-size:0.85rem; cursor:pointer; width:100%; margin-top:15px; font-weight:600;">Save Preferences</button>
    </div>
    <div class="card" style="background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff;">
        <h3 style="margin:0 0 15px; font-size:1.15rem;"><i class="fas fa-sync-alt"></i> Sync Status</h3>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:10px;">
            <span>ERP — Last Sync</span><span style="font-weight:bold;">2 min ago</span>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:10px;">
            <span>CRM — Last Sync</span><span style="font-weight:bold;">5 min ago</span>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:10px;">
            <span>Payment Gateway</span><span style="font-weight:bold;">Active ✓</span>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
            <span>WhatsApp API</span><span style="font-weight:bold;">Active ✓</span>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
