<?php
$page_title = 'Smart Procurement';
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['admin_id'])) { redirect(SITE_URL . '/admin/login.php'); }
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;">Smart Procurement Network</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">AI-driven vendor management, reverse auctions, and intelligent PO creation.</p>
    </div>
    <button style="background:#2563eb; color:#fff; border:none; padding:10px 20px; border-radius:8px; font-weight:600; cursor:pointer;"><i class="fas fa-plus" style="margin-right:8px;"></i> Create Auto PO</button>
</div>

<!-- Stats Row -->
<div class="grid-4" style="margin-bottom:24px;">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#dbeafe; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-handshake"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">ACTIVE VENDORS</div>
            <div style="color:#0f172a; font-size:1.4rem; font-weight:700;">142</div>
        </div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#dcfce7; color:#10b981; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-file-contract"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">OPEN POs</div>
            <div style="color:#0f172a; font-size:1.4rem; font-weight:700;">38</div>
        </div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#fef3c7; color:#d97706; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-gavel"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">LIVE AUCTIONS</div>
            <div style="color:#0f172a; font-size:1.4rem; font-weight:700;">3</div>
        </div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#fee2e2; color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-exclamation-triangle"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">RISK ALERTS</div>
            <div style="color:#ef4444; font-size:1.4rem; font-weight:700;">5</div>
        </div>
    </div>
</div>

<div class="grid-2">
    <!-- Vendor Scorecard -->
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
        <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-star" style="color:#f59e0b; margin-right:8px;"></i> Vendor Scorecards</h3>
        <table style="width:100%; border-collapse:collapse; font-size:0.9rem;">
            <thead>
                <tr style="background:#f8fafc; text-align:left;">
                    <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Vendor</th>
                    <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Quality</th>
                    <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Delivery</th>
                    <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Score</th>
                    <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Risk</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9; font-weight:500;">Tata Steel Ltd</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9; color:#10b981;">98%</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9; color:#10b981;">96%</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;"><strong>A+</strong></td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;"><span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Low</span></td>
                </tr>
                <tr>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9; font-weight:500;">SAIL</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9; color:#10b981;">94%</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9; color:#d97706;">82%</td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;"><strong>B+</strong></td>
                    <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;"><span style="background:#fef3c7; color:#b45309; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Medium</span></td>
                </tr>
                <tr>
                    <td style="padding:10px 12px; font-weight:500;">JSW Steel</td>
                    <td style="padding:10px 12px; color:#10b981;">97%</td>
                    <td style="padding:10px 12px; color:#10b981;">91%</td>
                    <td style="padding:10px 12px;"><strong>A</strong></td>
                    <td style="padding:10px 12px;"><span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Low</span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Raw Material Trends & Reverse Auction -->
    <div style="display:flex; flex-direction:column; gap:20px;">
        <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
            <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-chart-line" style="color:#6366f1; margin-right:8px;"></i> Raw Material Price Trends</h3>
            <div style="display:flex; justify-content:space-between; align-items:flex-end; height:100px; padding:10px 0; border-bottom:1px solid #e2e8f0;">
                <div style="width:12%; background:#3b82f6; height:55%; border-radius:4px 4px 0 0;"></div>
                <div style="width:12%; background:#3b82f6; height:62%; border-radius:4px 4px 0 0;"></div>
                <div style="width:12%; background:#3b82f6; height:48%; border-radius:4px 4px 0 0;"></div>
                <div style="width:12%; background:#3b82f6; height:70%; border-radius:4px 4px 0 0;"></div>
                <div style="width:12%; background:#ef4444; height:85%; border-radius:4px 4px 0 0;"></div>
                <div style="width:12%; background:#ef4444; height:92%; border-radius:4px 4px 0 0;"></div>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:0.75rem; color:#94a3b8; margin-top:5px;">
                <span>Nov</span><span>Dec</span><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span>
            </div>
            <p style="margin:10px 0 0; font-size:0.85rem; color:#ef4444;"><i class="fas fa-arrow-up"></i> Nickel prices up 6.2% — AI recommends forward contracts.</p>
        </div>

        <div style="background:linear-gradient(135deg, #1e293b, #0f172a); padding:20px; border-radius:12px; color:#fff;">
            <h3 style="margin:0 0 10px; font-size:1.1rem; color:#38bdf8;"><i class="fas fa-gavel" style="margin-right:8px;"></i> Live Reverse Auction</h3>
            <p style="margin:0 0 15px; font-size:0.85rem; color:#94a3b8;">SS 304 Coils – 50 MT • Ends in <strong style="color:#f59e0b;">02h 14m</strong></p>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:10px;">
                <span style="color:#cbd5e1;">Lowest Bid:</span>
                <span style="color:#10b981; font-weight:bold;">₹1,18,400 / MT (Tata Steel)</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
                <span style="color:#cbd5e1;">Participants:</span>
                <span style="color:#fff; font-weight:bold;">7 Vendors</span>
            </div>
        </div>
    </div>
</div>

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