<?php
$page_title = 'Delivery Experience';
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-truck" style="color:#3b82f6; margin-right:10px;"></i>Delivery Experience</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Live tracking, delivery reschedule, pickup points, OTP confirmation, and installation slots.</p>
    </div>
</div>
<div class="card" style="margin-bottom:24px;">
    <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-map-marker-alt" style="color:#ef4444; margin-right:8px;"></i>Live Shipment Tracking — Order #BM-24521</h3>
    <div style="display:flex; justify-content:space-between; position:relative; margin-bottom:20px;">
        <div style="position:absolute; top:18px; left:5%; right:5%; height:4px; background:#e2e8f0; z-index:0;"></div>
        <div style="position:absolute; top:18px; left:5%; width:65%; height:4px; background:#10b981; z-index:1;"></div>
        <?php
        $steps = [
            ['Ordered', 'Apr 28', true],
            ['Packed', 'Apr 29', true],
            ['Shipped', 'Apr 30', true],
            ['Out for Delivery', 'Expected May 2', false],
            ['Delivered', '', false],
        ];
        foreach ($steps as $i => $s): ?>
        <div style="text-align:center; z-index:2; flex:1;">
            <div style="width:36px; height:36px; border-radius:50%; background:<?= $s[2] ? '#10b981' : '#e2e8f0' ?>; color:<?= $s[2] ? '#fff' : '#94a3b8' ?>; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:0.85rem;">
                <?= $s[2] ? '<i class="fas fa-check"></i>' : ($i+1) ?>
            </div>
            <div style="font-weight:<?= $s[2] ? '600' : '400' ?>; font-size:0.8rem; color:<?= $s[2] ? '#0f172a' : '#94a3b8' ?>;"><?= $s[0] ?></div>
            <div style="font-size:0.7rem; color:#94a3b8;"><?= $s[1] ?></div>
        </div>
        <?php endforeach; ?>
    </div>
    <div style="background:#eff6ff; padding:12px 15px; border-radius:8px; border:1px solid #bfdbfe; display:flex; justify-content:space-between; align-items:center;">
        <div>
            <span style="font-weight:600; color:#1e40af; font-size:0.9rem;">📍 In Transit — Bhiwandi Hub</span>
            <span style="font-size:0.8rem; color:#64748b; margin-left:10px;">Tracking: BM-TRK-24521-MH</span>
        </div>
        <button style="background:#2563eb; color:#fff; border:none; padding:6px 14px; border-radius:6px; font-size:0.8rem; cursor:pointer;">Live Map</button>
    </div>
</div>
<div class="grid-3">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-calendar-alt" style="color:#f59e0b; margin-right:8px;"></i>Reschedule Delivery</h3>
        <p style="font-size:0.85rem; color:#64748b; margin-bottom:15px;">Change your delivery date or time slot.</p>
        <select style="width:100%; padding:10px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.85rem; margin-bottom:10px;">
            <option>May 2 — Morning (9 AM – 12 PM)</option>
            <option>May 2 — Afternoon (12 – 4 PM)</option>
            <option>May 3 — Morning (9 AM – 12 PM)</option>
            <option>May 3 — Afternoon (12 – 4 PM)</option>
        </select>
        <button style="background:#f59e0b; color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:0.85rem; cursor:pointer; width:100%;">Confirm Reschedule</button>
    </div>
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-map-pin" style="color:#10b981; margin-right:8px;"></i>Pickup Points</h3>
        <p style="font-size:0.85rem; color:#64748b; margin-bottom:15px;">Self-pickup from nearest collection point.</p>
        <div style="border-left:3px solid #10b981; padding-left:12px; margin-bottom:12px;">
            <div style="font-weight:600; font-size:0.85rem;">Andheri West Hub</div>
            <div style="font-size:0.75rem; color:#94a3b8;">2.3 km away · Open 9 AM – 8 PM</div>
        </div>
        <div style="border-left:3px solid #3b82f6; padding-left:12px;">
            <div style="font-weight:600; font-size:0.85rem;">Malad Warehouse</div>
            <div style="font-size:0.75rem; color:#94a3b8;">5.1 km away · Open 10 AM – 6 PM</div>
        </div>
    </div>
    <div class="card" style="background:linear-gradient(135deg,#10b981,#059669); color:#fff;">
        <h3 style="margin:0 0 15px; font-size:1.1rem;"><i class="fas fa-key"></i> Delivery OTP</h3>
        <p style="font-size:0.85rem; opacity:0.85; margin-bottom:15px;">Share this OTP with delivery partner to confirm receipt.</p>
        <div style="background:rgba(255,255,255,0.15); padding:20px; border-radius:8px; text-align:center;">
            <div style="font-size:2.5rem; font-weight:bold; letter-spacing:10px;">4 8 2 1</div>
        </div>
        <p style="text-align:center; font-size:0.8rem; opacity:0.7; margin-top:10px;">Valid for 24 hours after delivery attempt</p>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
