<?php
$page_title = 'Logistics & Reverse Logistics';
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;">Fulfillment & Logistics Engine</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Track live shipments, warehouse allocation, and reverse logistics.</p>
    </div>
</div>

<div class="grid-2">
    <!-- Active Shipments & Tracking -->
    <div class="card">
        <h3 style="margin:0 0 20px; font-size:1.2rem; color:#0f172a;"><i class="fas fa-truck-moving" style="color:#2563eb; margin-right:8px;"></i> Live Order Tracking</h3>
        
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; margin-bottom:15px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
                <div>
                    <h4 style="margin:0; font-size:1rem; color:#0f172a;">Order #ORD-8823</h4>
                    <span style="font-size:0.8rem; color:#64748b;">Consolidated Shipment • 4 Items</span>
                </div>
                <span style="background:#dbeafe; color:#1d4ed8; padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600;">In Transit</span>
            </div>
            
            <div style="height:150px; background:#f1f5f9; border-radius:8px; margin-bottom:15px; position:relative; overflow:hidden; border:1px solid #e2e8f0;">
                <!-- Simulated Map -->
                <div style="position:absolute; top:0; left:0; right:0; bottom:0; background:url('https://maps.googleapis.com/maps/api/staticmap?center=28.6139,77.2090&zoom=10&size=600x300&maptype=roadmap&sensor=false') center/cover; opacity:0.6;"></div>
                <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
                    <i class="fas fa-map-marker-alt" style="color:#ef4444; font-size:2rem; text-shadow:0 2px 4px rgba(0,0,0,0.2);"></i>
                </div>
            </div>
            
            <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
                <span style="color:#64748b;">Current ETA: <strong style="color:#0f172a;">Tomorrow, 2:00 PM</strong></span>
                <span style="color:#64748b;">Allocated: <strong style="color:#0f172a;">Delhi Warehouse</strong></span>
            </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; font-size:1rem; color:#0f172a;">Order #ORD-8825</h4>
                    <span style="font-size:0.8rem; color:#64748b;">Partial Shipment • 2/5 Items</span>
                </div>
                <span style="background:#fef3c7; color:#d97706; padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600;">Processing</span>
            </div>
        </div>
    </div>

    <!-- Reverse Logistics -->
    <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
            <h3 style="margin:0; font-size:1.2rem; color:#0f172a;"><i class="fas fa-undo-alt" style="color:#ef4444; margin-right:8px;"></i> Reverse Logistics</h3>
            <button style="background:#ef4444; color:#fff; border:none; padding:6px 12px; border-radius:6px; font-size:0.8rem; cursor:pointer;">+ Book Return</button>
        </div>

        <div style="position:relative; margin-left:15px; border-left:2px solid #e2e8f0; padding-left:20px;">
            <!-- Step 1 -->
            <div style="position:relative; margin-bottom:25px;">
                <div style="position:absolute; left:-29px; top:0; width:16px; height:16px; border-radius:50%; background:#10b981; border:3px solid #fff; box-shadow:0 0 0 1px #10b981;"></div>
                <h4 style="margin:0 0 5px; font-size:0.95rem; color:#0f172a;">Pickup Completed</h4>
                <p style="margin:0; font-size:0.8rem; color:#64748b;">Return #RET-1092 • SS Sink (Damage during transit)</p>
                <p style="margin:5px 0 0; font-size:0.75rem; color:#94a3b8;">12 Oct, 10:30 AM</p>
            </div>
            <!-- Step 2 -->
            <div style="position:relative; margin-bottom:25px;">
                <div style="position:absolute; left:-29px; top:0; width:16px; height:16px; border-radius:50%; background:#2563eb; border:3px solid #fff; box-shadow:0 0 0 1px #2563eb;"></div>
                <h4 style="margin:0 0 5px; font-size:0.95rem; color:#0f172a;">Quality Inspection Workflow</h4>
                <p style="margin:0; font-size:0.8rem; color:#64748b;">Item is currently under inspection at the hub.</p>
                <div style="margin-top:10px; background:#f8fafc; padding:10px; border-radius:6px; font-size:0.8rem; border:1px solid #e2e8f0;">
                    <i class="fas fa-search" style="color:#64748b; margin-right:5px;"></i> Inspection Status: <strong style="color:#d97706;">Pending Report</strong>
                </div>
            </div>
            <!-- Step 3 -->
            <div style="position:relative;">
                <div style="position:absolute; left:-29px; top:0; width:16px; height:16px; border-radius:50%; background:#e2e8f0; border:3px solid #fff; box-shadow:0 0 0 1px #cbd5e1;"></div>
                <h4 style="margin:0 0 5px; font-size:0.95rem; color:#94a3b8;">Refund / Credit Note Issuance</h4>
                <p style="margin:0; font-size:0.8rem; color:#94a3b8;">Awaiting inspection approval.</p>
            </div>
        </div>
        
        <hr style="border:0; border-top:1px solid #e2e8f0; margin:25px 0;">
        
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <div>
                <h4 style="margin:0; font-size:0.95rem; color:#0f172a;">Scrap & Recycle Program</h4>
                <p style="margin:0; font-size:0.8rem; color:#64748b;">Schedule old material pickup for credits.</p>
            </div>
            <i class="fas fa-recycle" style="color:#10b981; font-size:1.5rem;"></i>
        </div>
    </div>
</div>

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