script.js

// ==========================================
// DATA ENGINE (With Financials, Status & Alerts)
// ==========================================
let deliveryMen = [
    { id: 101, name: "khan", vehicle: "Bike", location: "Nilore", status: "On-Delivery", cashInHand: 0 },
    { id: 102, name: "Sajid Khan", vehicle: "Car", location: "Ithehad Town", status: "On-Delivery", cashInHand: 0 },
    { id: 103, name: "Bilal Ahmed", vehicle: "Scooter", location: "Leathrar Road", status: "On-Delivery", cashInHand: 0 },
    { id: 104, name: "Usman Tariq", vehicle: "Van", location: "Thanda Pani", status: "On-Delivery", cashInHand: 0 },
    { id: 105, name: "Hamza Yousaf", vehicle: "Truck", location: "Bahria Town", status: "On-Delivery", cashInHand: 0 }
];

let orders = [
    { orderId: 1001, customer: "Sajal Tariq", address: "Nilore", priority: "High", payment: "COD", amount: 2500, eta: "12 mins", status: "Pending", riderId: 101 },
    { orderId: 1002, customer: "Ali Raza", address: "Leathrar Road", priority: "Medium", payment: "Prepaid", amount: 0, eta: "25 mins", status: "Pending", riderId: 102 },
    { orderId: 1003, customer: "Fatima Noor", address: "Thanda Pani", priority: "High", payment: "COD", amount: 1800, eta: "8 mins", status: "Pending", riderId: 103 },
    { orderId: 1004, customer: "Zain Malik", address: "Bahria Town", priority: "Low", payment: "COD", amount: 3200, eta: "45 mins", status: "Pending", riderId: 104 },
    { orderId: 1005, customer: "Ayesha Khan", address: "I-8 Islamabad", priority: "Medium", payment: "Prepaid", amount: 0, eta: "30 mins", status: "Pending", riderId: 105 }
];

let totalCashCollected = 0;

// ==========================================
// RENDER & COMPUTE ENGINE
// ==========================================
function refreshDashboard() {
    const deliveryTableBody = document.getElementById('delivery-table-body');
    const ordersTableBody = document.getElementById('orders-table-body');
    const riderSelect = document.getElementById('rider-select');

    // 1. Calculate Analytics Metrics
    const totalActiveOrders = orders.filter(o => o.status === 'Pending').length;
    const activeRidersCount = deliveryMen.filter(r => r.status === 'On-Delivery').length;
    const activeSOSCount = deliveryMen.filter(r => r.status === 'Emergency').length;

    document.getElementById('stat-total-orders').innerText = totalActiveOrders;
    document.getElementById('stat-active-riders').innerText = activeRidersCount;
    document.getElementById('stat-total-cash').innerText = `Rs. ${totalCashCollected}`;
    document.getElementById('stat-sos-alerts').innerText = activeSOSCount;

    // Handle SOS Styling Alert State
    const sosCard = document.getElementById('sos-counter-card');
    const sosBanner = document.getElementById('sos-banner');
    if (activeSOSCount > 0) {
        sosCard.classList.add('active');
        sosBanner.classList.remove('hidden');
        const activeSOSOps = deliveryMen.find(r => r.status === 'Emergency');
        document.getElementById('sos-message').innerText = `🚨 EMERGENCY ALERT: Rider ${activeSOSOps.name} triggered an SOS status request!`;
    } else {
        sosCard.classList.remove('active');
        sosBanner.classList.add('hidden');
    }

    // 2. Load Fleet Status Table Rows
    deliveryTableBody.innerHTML = '';
    deliveryMen.forEach(dm => {
        deliveryTableBody.innerHTML += `
            <tr>
                <td><strong>${dm.name}</strong><br><small style="color:var(--text-muted)">ID: ${dm.id}</small></td>
                <td>${dm.vehicle}</td>
                <td><span class="status-${dm.status.replace(' ', '-')}">● ${dm.status}</span></td>
                <td>Rs. ${dm.cashInHand}</td>
                <td>📍 ${dm.location}</td>
                <td>
                    <button class="btn-danger" onclick="triggerSOSEvent(${dm.id})" ${dm.status === 'Emergency' ? 'disabled' : ''}>SOS</button>
                </td>
            </tr>
        `;
    });

    // 3. Load Active Orders Records Table Rows
    ordersTableBody.innerHTML = '';
    orders.forEach(order => {
        const rider = deliveryMen.find(dm => dm.id === order.riderId);
        const actionButton = order.status === 'Pending' 
            ? `<button class="btn-success" onclick="completeOrderEvent(${order.orderId})">Mark Delivered</button>`
            : `<span style="color: var(--success); font-weight:bold;">✓ Completed</span>`;

        ordersTableBody.innerHTML += `
            <tr>
                <td><strong>${order.customer}</strong><br><small style="color:var(--text-muted)">ID: ${order.orderId}</small></td>
                <td>${order.address}</td>
                <td><span class="badge priority-${order.priority}">${order.priority}</span></td>
                <td>${order.payment} ${order.amount > 0 ? '<br><small>Rs.'+order.amount+'</small>':''}</td>
                <td>⏱ ${order.status === 'Pending' ? order.eta : '-'}</td>
                <td>${order.status}</td>
                <td>${actionButton}</td>
            </tr>
        `;
    });

    // 4. Reset Dropdown List Element State Options
    const currentSelection = riderSelect.value;
    riderSelect.innerHTML = '';
    deliveryMen.forEach(dm => {
        riderSelect.innerHTML += `<option value="${dm.id}">${dm.name}</option>`;
    });
    if(currentSelection) riderSelect.value = currentSelection;
}

// ==========================================
// CORE LOGISTIC EVENTS HANDLERS
// ==========================================
document.getElementById('update-btn').addEventListener('click', () => {
    const selectedRiderId = parseInt(document.getElementById('rider-select').value);
    const newLocationText = document.getElementById('new-location').value.trim();

    if (!newLocationText) return alert('Enter a valid location roadmap descriptor.');

    const rider = deliveryMen.find(dm => dm.id === selectedRiderId);
    if (rider) {
        rider.location = newLocationText;
        alert(`Location updated for ${rider.name} dynamically!`);
        refreshDashboard();
    }
    document.getElementById('new-location').value = '';
});

function completeOrderEvent(orderId) {
    const order = orders.find(o => o.orderId === orderId);
    if (order && order.status === 'Pending') {
        order.status = 'Delivered';
        const rider = deliveryMen.find(dm => dm.id === order.riderId);
        
        if (rider) {
            if (order.payment === 'COD') {
                rider.cashInHand += order.amount;
                totalCashCollected += order.amount;
            }
            // Check if rider has any more active pending deliveries
            const hasMoreOrders = orders.some(o => o.riderId === rider.id && o.status === 'Pending');
            if (!hasMoreOrders && rider.status !== 'Emergency') {
                rider.status = 'Available';
            }
        }
        refreshDashboard();
    }
}

function triggerSOSEvent(riderId) {
    const rider = deliveryMen.find(dm => dm.id === riderId);
    if (rider) {
        rider.status = 'Emergency';
        refreshDashboard();
    }
}

document.getElementById('clear-sos-btn').addEventListener('click', () => {
    deliveryMen.forEach(dm => {
        if (dm.status === 'Emergency') {
            const hasOrders = orders.some(o => o.riderId === dm.id && o.status === 'Pending');
            dm.status = hasOrders ? 'On-Delivery' : 'Available';
        }
    });
    alert('All Active SOS flags resolved with medical/fleet backup dispatch operations.');
    refreshDashboard();
});

// Bootstrap Runtime System Load Configuration
window.onload = refreshDashboard;