script.js

document.addEventListener("DOMContentLoaded", () => {
  const dateHeader = document.getElementById("dateHeader");
  const mainGrid = document.getElementById("mainGrid");

    const DAYS_IN_MONTH = 31;
    let INITIAL_BOXES_PER_DAY = 2; // Start with fewer to show adding process, or 5 as requested? 
    // User asked "make it to 5 boxes each columns" -> capacity? or initial state? 
    // "each time they add it goes down" means we append. 
    // Let's start with some, and allow adding more.

    // Dummy Data Generators
    const customers = ["Toyota", "Honda", "Suzuki", "Mitsubishi", "Daihatsu"];
    const jobs = ["Assembly", "Inspection", "Packing", "Painting", "Welding"];
    const models = ["Camry", "Civic", "Swift", "Pajero", "Xenia"];
    const lines = ["Line A", "Line B", "Line C", "Line D"];

    function getRandom(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }

    function generateDiceNo() {
        return "D" + Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    }

    function generatePartNo() {
        return Math.floor(Math.random() * 90000 + 10000) + "-" + Math.floor(Math.random() * 9000);
    }

    // Helper to create box HTML
    function createBoxElement(jobData) {
        const boxEl = document.createElement('div');
        boxEl.className = 'job-box';
        boxEl.innerHTML = `
            <div class="job-row">
                <span class="label">Cust</span>
                <span class="value">${jobData.customer}</span>
            </div>
            <div class="job-row">
                <span class="label">Part No</span>
                <span class="value">${jobData.partNo}</span>
            </div>
            <div class="job-row">
                <span class="label">Job</span>
                <span class="value">${jobData.job}</span>
            </div>
            <div class="job-row">
                <span class="label">Model</span>
                <span class="value highlight">${jobData.model}</span>
            </div>
            <div class="job-row">
                <span class="label">Dice</span>
                <span class="value">${jobData.diceNo}</span>
            </div>
            <div class="job-row">
                <span class="label">Line</span>
                <span class="value">${jobData.lineName}</span>
            </div>
        `;
        return boxEl;
    }

    // Render Initial Dashboard
    function renderDashboard() {
        dateHeader.innerHTML = '';
        mainGrid.innerHTML = '';

        for (let day = 1; day <= DAYS_IN_MONTH; day++) {
            // Header
            const headerCell = document.createElement('div');
            headerCell.className = 'date-header';
            headerCell.textContent = `Day ${day}`;
            dateHeader.appendChild(headerCell);

            // Column
            const column = document.createElement('div');
            column.className = 'day-column';
            column.id = `col-day-${day}`; // Add ID for easy access

            // Initial Boxes (Populate 5 per request, or random? User: "make it to 5 boxes")
            // matching request to have 5 boxes initially
            for (let box = 0; box < 5; box++) {
                const jobData = {
                    customer: getRandom(customers),
                    partNo: generatePartNo(),
                    job: getRandom(jobs),
                    model: getRandom(models),
                    diceNo: generateDiceNo(),
                    lineName: getRandom(lines)
                };
                column.appendChild(createBoxElement(jobData));
            }

            mainGrid.appendChild(column);
        }
    }



    // Navigation Logic
    const scrollContainer = document.querySelector('.dashboard-container'); // Need to target the scrollable container
    const navLeft = document.getElementById('navLeft');
    const navRight = document.getElementById('navRight');

    if (navLeft && navRight && scrollContainer) {
        navLeft.addEventListener('click', () => {
            scrollContainer.scrollBy({ left: -300, behavior: 'smooth' });
        });
        
        navRight.addEventListener('click', () => {
            scrollContainer.scrollBy({ left: 300, behavior: 'smooth' });
        });
    }

    // Clock
    function updateClock() {
        const now = new Date();
        const dateEl = document.getElementById('currentDate');
        const timeEl = document.getElementById('currentTime');

        const day = now.getDate().toString().padStart(2, '0');
        const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
        const month = months[now.getMonth()];
        const year = now.getFullYear();
        
        if(dateEl) dateEl.textContent = `${day}-${month}-${year}`;

        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        
        if(timeEl) timeEl.textContent = `${hours}:${minutes}:${seconds}`;
    }

    setInterval(updateClock, 1000);
    updateClock(); // Initial call
    
    // Start Simulation: REMOVED as per request
    // setInterval(simulateIncomingScan, 3000);

    renderDashboard();
});