<?php
$page_title = 'Omnichannel Commerce';
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;">Omnichannel Commerce</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Unified cart sync, team approvals, and multi-channel ordering.</p>
    </div>
</div>

<!-- Channel Status Cards -->
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; text-align:center; border-top:4px solid #3b82f6;">
        <i class="fas fa-globe" style="font-size:2rem; color:#3b82f6; margin-bottom:10px;"></i>
        <h4 style="margin:0 0 5px; color:#0f172a;">Website Portal</h4>
        <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">ACTIVE</span>
    </div>
    <div class="card" style="margin-bottom:0; text-align:center; border-top:4px solid #10b981;">
        <i class="fab fa-android" style="font-size:2rem; color:#10b981; margin-bottom:10px;"></i>
        <h4 style="margin:0 0 5px; color:#0f172a;">Android App</h4>
        <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">SYNCED</span>
    </div>
    <div class="card" style="margin-bottom:0; text-align:center; border-top:4px solid #0f172a;">
        <i class="fab fa-apple" style="font-size:2rem; color:#0f172a; margin-bottom:10px;"></i>
        <h4 style="margin:0 0 5px; color:#0f172a;">iOS App</h4>
        <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">SYNCED</span>
    </div>
    <div class="card" style="margin-bottom:0; text-align:center; border-top:4px solid #25d366;">
        <i class="fab fa-whatsapp" style="font-size:2rem; color:#25d366; margin-bottom:10px;"></i>
        <h4 style="margin:0 0 5px; color:#0f172a;">WhatsApp Commerce</h4>
        <span style="background:#dbeafe; color:#1d4ed8; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">BETA</span>
    </div>
</div>

<div class="grid-2">
    <!-- Unified Cart -->
    <div class="card">
        <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-sync-alt" style="color:#2563eb; margin-right:8px;"></i> Unified Cross-Device Cart</h3>
        <div style="background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0; margin-bottom:15px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                <span style="font-weight:500;">SS-304 Double Bowl Sink × 2</span>
                <span style="font-weight:bold; color:#0f172a;">₹9,000</span>
            </div>
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                <span style="font-weight:500;">Premium Faucet × 1</span>
                <span style="font-weight:bold; color:#0f172a;">₹2,200</span>
            </div>
            <hr style="border:0; border-top:1px solid #e2e8f0; margin:10px 0;">
            <div style="display:flex; justify-content:space-between; align-items:center;">
                <span style="font-weight:600;">Cart Total</span>
                <span style="font-weight:bold; color:#2563eb; font-size:1.1rem;">₹11,200</span>
            </div>
        </div>
        <div style="display:flex; gap:10px;">
            <button style="flex:1; background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; padding:8px; border-radius:6px; font-size:0.85rem; cursor:pointer;">Save for Later</button>
            <button style="flex:1; background:#2563eb; color:#fff; border:none; padding:8px; border-radius:6px; font-size:0.85rem; font-weight:600; cursor:pointer;">Share Cart</button>
        </div>
    </div>

    <!-- Team Cart Approval -->
    <div class="card">
        <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-user-check" style="color:#10b981; margin-right:8px;"></i> Team Cart Approval</h3>
        
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; margin-bottom:12px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                <div>
                    <h4 style="margin:0 0 5px; font-size:0.95rem;">Amit Patel (Buyer)</h4>
                    <p style="margin:0; font-size:0.8rem; color:#64748b;">Submitted kitchen order — ₹45,000 • Needs Approver sign-off</p>
                </div>
                <span style="background:#fef3c7; color:#b45309; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">PENDING</span>
            </div>
            <div style="display:flex; gap:8px;">
                <button style="background:#10b981; color:#fff; border:none; padding:6px 12px; border-radius:6px; font-size:0.8rem; cursor:pointer;"><i class="fas fa-check"></i> Approve</button>
                <button style="background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; padding:6px 12px; border-radius:6px; font-size:0.8rem; cursor:pointer;">Reject</button>
            </div>
        </div>
        
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px;">
            <div style="display:flex; justify-content:space-between; align-items:center;">
                <div>
                    <h4 style="margin:0 0 5px; font-size:0.95rem;">Priya Sharma (Buyer)</h4>
                    <p style="margin:0; font-size:0.8rem; color:#64748b;">Bulk pipes order — ₹1,20,000 • Auto-approved (within budget)</p>
                </div>
                <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">APPROVED</span>
            </div>
        </div>
    </div>
</div>

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