script.js

// Initialize logging system
const logger = {
    info: function(message) {
        console.log(`[INFO] ${new Date().toISOString()}: ${message}`);
    },
    error: function(message, error = null) {
        console.error(`[ERROR] ${new Date().toISOString()}: ${message}`, error);
    },
    warn: function(message) {
        console.warn(`[WARNING] ${new Date().toISOString()}: ${message}`);
    }
};

// Data model
class BoQProject {
    constructor(id = null, name = '', date = new Date().toISOString().split('T')[0], items = []) {
        this.id = id || this.generateId();
        this.name = name;
        this.date = date;
        this.items = items;
    }

    generateId() {
        return 'proj_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    }

    addItem(item) {
        this.items.push(item);
        logger.info(`Added item to project ${this.name}: ${item.description}`);
    }

    removeItem(index) {
        if (index >= 0 && index < this.items.length) {
            const removedItem = this.items.splice(index, 1)[0];
            logger.info(`Removed item from project ${this.name}: ${removedItem.description}`);
            return true;
        }
        logger.error(`Failed to remove item at index ${index} from project ${this.name}`);
        return false;
    }

    calculateTotal() {
        return this.items.reduce((sum, item) => sum + item.total, 0);
    }

    toJSON() {
        return {
            id: this.id,
            name: this.name,
            date: this.date,
            items: this.items
        };
    }

    static fromJSON(json) {
        return new BoQProject(json.id, json.name, json.date, json.items);
    }
}

// Storage manager
const storageManager = {
    saveProject(project) {
        try {
            // Get existing projects
            const projects = this.getAllProjects();
            
            // Find if project already exists
            const index = projects.findIndex(p => p.id === project.id);
            
            if (index !== -1) {
                // Update existing project
                projects[index] = project.toJSON();
            } else {
                // Add new project
                projects.push(project.toJSON());
            }
            
            // Save back to localStorage
            localStorage.setItem('boqProjects', JSON.stringify(projects));
            logger.info(`Project saved: ${project.name} (${project.id})`);
            return true;
        } catch (error) {
            logger.error('Failed to save project', error);
            return false;
        }
    },
    
    getProject(id) {
        try {
            const projects = this.getAllProjects();
            const projectData = projects.find(p => p.id === id);
            
            if (projectData) {
                logger.info(`Project loaded: ${projectData.name} (${projectData.id})`);
                return BoQProject.fromJSON(projectData);
            }
            
            logger.warn(`Project not found: ${id}`);
            return null;
        } catch (error) {
            logger.error(`Failed to get project: ${id}`, error);
            return null;
        }
    },
    
    getAllProjects() {
        try {
            const projectsJson = localStorage.getItem('boqProjects');
            return projectsJson ? JSON.parse(projectsJson) : [];
        } catch (error) {
            logger.error('Failed to get all projects', error);
            return [];
        }
    },
    
    deleteProject(id) {
        try {
            const projects = this.getAllProjects();
            const index = projects.findIndex(p => p.id === id);
            
            if (index !== -1) {
                const deletedProject = projects.splice(index, 1)[0];
                localStorage.setItem('boqProjects', JSON.stringify(projects));
                logger.info(`Project deleted: ${deletedProject.name} (${deletedProject.id})`);
                return true;
            }
            
            logger.warn(`Failed to delete project: ${id} - not found`);
            return false;
        } catch (error) {
            logger.error(`Failed to delete project: ${id}`, error);
            return false;
        }
    }
};

// UI Controller
const uiController = {
    // DOM elements
    elements: {
        projectName: document.getElementById('projectName'),
        projectDate: document.getElementById('projectDate'),
        boqForm: document.getElementById('boqForm'),
        description: document.getElementById('description'),
        quantity: document.getElementById('quantity'),
        unit: document.getElementById('unit'),
        rate: document.getElementById('rate'),
        boqBody: document.getElementById('boqBody'),
        grandTotal: document.getElementById('grandTotal'),
        clearBtn: document.getElementById('clearBtn'),
        saveBtn: document.getElementById('saveBtn'),
        downloadPdfBtn: document.getElementById('downloadPdfBtn'),
        downloadCsvBtn: document.getElementById('downloadCsvBtn'),
        savedProjectsModal: new bootstrap.Modal(document.getElementById('savedProjectsModal')),
        savedProjectsBody: document.getElementById('savedProjectsBody')
    },
    
    // Current project
    currentProject: new BoQProject(),
    
    // Initialize the UI
    init() {
        logger.info('Initializing UI');
        this.setCurrentDate();
        this.bindEvents();
        this.renderTable();
    },
    
    // Set the current date in the date input
    setCurrentDate() {
        const today = new Date().toISOString().split('T')[0];
        this.elements.projectDate.value = today;
        this.currentProject.date = today;
    },
    
    // Bind event listeners
    bindEvents() {
        // Form submission
        this.elements.boqForm.addEventListener('submit', (e) => {
            e.preventDefault();
            this.addItem();
        });
        
        // Clear button
        this.elements.clearBtn.addEventListener('click', () => {
            if (confirm('Are you sure you want to clear all items?')) {
                this.clearItems();
            }
        });
        
        // Save button
        this.elements.saveBtn.addEventListener('click', () => {
            this.saveProject();
        });
        
        // Download PDF button
        this.elements.downloadPdfBtn.addEventListener('click', () => {
            this.downloadPdf();
        });
        
        // Download CSV button
        this.elements.downloadCsvBtn.addEventListener('click', () => {
            this.downloadCsv();
        });
        
        // Project name change
        this.elements.projectName.addEventListener('input', (e) => {
            this.currentProject.name = e.target.value;
        });
        
        // Project date change
        this.elements.projectDate.addEventListener('change', (e) => {
            this.currentProject.date = e.target.value;
        });
    },
    
    // Add a new item to the BoQ
    addItem() {
        try {
            const description = this.elements.description.value;
            const quantity = parseFloat(this.elements.quantity.value);
            const unit = this.elements.unit.value;
            const rate = parseFloat(this.elements.rate.value);
            const total = quantity * rate;
            
            const item = {
                description,
                quantity,
                unit,
                rate,
                total
            };
            
            this.currentProject.addItem(item);
            this.renderTable();
            this.elements.boqForm.reset();
            this.elements.description.focus();
        } catch (error) {
            logger.error('Failed to add item', error);
            alert('Failed to add item. Please check your inputs and try again.');
        }
    },
    
    // Delete an item from the BoQ
    deleteItem(index) {
        if (this.currentProject.removeItem(index)) {
            this.renderTable();
        }
    },
    
    // Clear all items
    clearItems() {
        this.currentProject.items = [];
        logger.info('All items cleared');
        this.renderTable();
    },
    
    // Render the BoQ table
    renderTable() {
        const tbody = this.elements.boqBody;
        tbody.innerHTML = '';
        
        this.currentProject.items.forEach((item, index) => {
            const row = document.createElement('tr');
            
            row.innerHTML = `
                <td>${item.description}</td>
                <td>${item.quantity.toFixed(2)}</td>
                <td>${item.unit}</td>
                <td>$${item.rate.toFixed(2)}</td>
                <td>$${item.total.toFixed(2)}</td>
                <td>
                    <button class="btn btn-danger btn-sm delete-btn">
                        <i class="bi bi-trash"></i> Delete
                    </button>
                </td>
            `;
            
            // Add delete button event listener
            const deleteBtn = row.querySelector('.delete-btn');
            deleteBtn.addEventListener('click', () => {
                this.deleteItem(index);
            });
            
            // Add highlight animation
            row.classList.add('highlight-row');
            
            tbody.appendChild(row);
        });
        
        // Update grand total
        const grandTotal = this.currentProject.calculateTotal();
        this.elements.grandTotal.textContent = `$${grandTotal.toFixed(2)}`;
    },
    
    // Save the current project
    saveProject() {
        try {
            // Check if project has a name
            if (!this.elements.projectName.value.trim()) {
                alert('Please enter a project name before saving.');
                this.elements.projectName.focus();
                return;
            }
            
            // Update project properties
            this.currentProject.name = this.elements.projectName.value;
            this.currentProject.date = this.elements.projectDate.value;
            
            // Save to storage
            if (storageManager.saveProject(this.currentProject)) {
                alert('Project saved successfully!');
            } else {
                alert('Failed to save project. Please try again.');
            }
        } catch (error) {
            logger.error('Failed to save project', error);
            alert('An error occurred while saving the project.');
        }
    },
    
    // Load a project
    loadProject(id) {
        try {
            const project = storageManager.getProject(id);
            
            if (project) {
                this.currentProject = project;
                this.elements.projectName.value = project.name;
                this.elements.projectDate.value = project.date;
                this.renderTable();
                return true;
            }
            
            return false;
        } catch (error) {
            logger.error(`Failed to load project: ${id}`, error);
            alert('Failed to load project. Please try again.');
            return false;
        }
    },
    
    // Render saved projects
    renderSavedProjects() {
        try {
            const projects = storageManager.getAllProjects();
            const tbody = this.elements.savedProjectsBody;
            tbody.innerHTML = '';
            
            if (projects.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center">No saved projects found.</td></tr>';
                return;
            }
            
            projects.forEach(project => {
                const row = document.createElement('tr');
                const totalItems = project.items.length;
                const grandTotal = project.items.reduce((sum, item) => sum + item.total, 0);
                
                row.innerHTML = `
                    <td>${project.name}</td>
                    <td>${project.date}</td>
                    <td>${totalItems}</td>
                    <td>$${grandTotal.toFixed(2)}</td>
                    <td>
                        <button class="btn btn-primary btn-sm me-1 load-btn" data-id="${project.id}">
                            Load
                        </button>
                        <button class="btn btn-info btn-sm me-1 preview-btn" data-id="${project.id}">
                            Preview
                        </button>
                        <button class="btn btn-danger btn-sm delete-proj-btn" data-id="${project.id}">
                            Delete
                        </button>
                    </td>
                `;
                
                tbody.appendChild(row);
            });
            
            // Add event listeners
            const loadButtons = tbody.querySelectorAll('.load-btn');
            loadButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = btn.getAttribute('data-id');
                    this.loadProject(id);
                    this.elements.savedProjectsModal.hide();
                });
            });
            
            const previewButtons = tbody.querySelectorAll('.preview-btn');
            previewButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = btn.getAttribute('data-id');
                    this.previewProject(id);
                });
            });
            
            const deleteButtons = tbody.querySelectorAll('.delete-proj-btn');
            deleteButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = btn.getAttribute('data-id');
                    if (confirm('Are you sure you want to delete this project?')) {
                        storageManager.deleteProject(id);
                        this.renderSavedProjects();
                    }
                });
            });
        } catch (error) {
            logger.error('Failed to render saved projects', error);
            alert('Failed to load saved projects.');
        }
    }
    },
    
    // Download the BoQ as PDF
    downloadPdf: function() {
        try {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            
            // Get project details
            const projectName = this.elements.projectName.value || 'Unnamed Project';
            const projectDate = this.elements.projectDate.value || new Date().toISOString().split('T')[0];
            
            // Set up document
            doc.setFontSize(22);
            doc.text('Bill of Quantities', 105, 20, { align: 'center' });
            
            doc.setFontSize(14);
            doc.text(`Project: ${projectName}`, 20, 35);
            doc.text(`Date: ${projectDate}`, 20, 45);
            
            // Create table
            const tableColumn = ['Description', 'Quantity', 'Unit', 'Rate ($)', 'Total ($)'];
            const tableRows = [];
            
            this.currentProject.items.forEach(item => {
                const itemData = [
                    item.description,
                    item.quantity.toFixed(2),
                    item.unit,
                    item.rate.toFixed(2),
                    item.total.toFixed(2)
                ];
                tableRows.push(itemData);
            });
            
            // Add table to document
            doc.autoTable({
                head: [tableColumn],
                body: tableRows,
                startY: 55,
                theme: 'striped',
                headStyles: {
                    fillColor: [41, 128, 185],
                    textColor: 255
                },
                foot: [['', '', '', 'Grand Total', `$${this.currentProject.calculateTotal().toFixed(2)}`]],
                footStyles: {
                    fillColor: [41, 128, 185],
                    textColor: 255,
                    fontStyle: 'bold'
                }
            });
            
            // Save PDF
            doc.save(`${projectName}_BoQ.pdf`);
            logger.info(`PDF downloaded for project: ${projectName}`);
        } catch (error) {
            logger.error('Failed to download PDF', error);
            alert('Failed to generate PDF. Please try again.');
        }
    },
    
    // Download the BoQ as CSV
    downloadCsv: function() {
        try {
            // Get project details
            const projectName = this.elements.projectName.value || 'Unnamed Project';
            
            // Create CSV content
            let csvContent = 'Description,Quantity,Unit,Rate ($),Total ($)\n';
            
            this.currentProject.items.forEach(item => {
                csvContent += `"${item.description}",${item.quantity.toFixed(2)},"${item.unit}",${item.rate.toFixed(2)},${item.total.toFixed(2)}\n`;
            });
            
            csvContent += `\n,,,Grand Total,$${this.currentProject.calculateTotal().toFixed(2)}`;
            
            // Create download link
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            
            link.setAttribute('href', url);
            link.setAttribute('download', `${projectName}_BoQ.csv`);
            link.style.visibility = 'hidden';
            
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            logger.info(`CSV downloaded for project: ${projectName}`);
        } catch (error) {
            logger.error('Failed to download CSV', error);
            alert('Failed to generate CSV. Please try again.');
        }
    },
    
    // Preview the current project in PDF format
    previewCurrentProject: function() {
        try {
            logger.info('Opening PDF preview for current project');
            
            // Save current project to session storage for the preview page
            const projectData = this.currentProject.toJSON();
            sessionStorage.setItem('previewProject', JSON.stringify(projectData));
            
            // Open the preview page in a new tab
            window.open('pdf-preview.html', '_blank');
        } catch (error) {
            logger.error('Failed to open PDF preview', error);
            alert('Failed to open preview. Please try again.');
        }
    },
    
    // Preview a saved project in PDF format
    previewProject: function(id) {
        try {
            logger.info(`Opening PDF preview for project: ${id}`);
            
            // Get the project and store it in session storage
            const project = storageManager.getProject(id);
            if (project) {
                sessionStorage.setItem('previewProject', JSON.stringify(project.toJSON()));
                window.open('pdf-preview.html', '_blank');
            } else {
                throw new Error(`Project not found: ${id}`);
            }
        } catch (error) {
            logger.error(`Failed to preview project: ${id}`, error);
            alert('Failed to open preview. Please try again.');
        }
    }
};

// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
    logger.info('Application starting');
    
    // Set up date picker with today's date
    uiController.init();
    
    // Add event listener for save button
    document.getElementById('saveBtn').addEventListener('click', () => {
        uiController.saveProject();
    });
    
    // Add event listener for preview button
    document.getElementById('previewBtn').addEventListener('click', () => {
        uiController.previewCurrentProject();
    });
    
    // Show saved projects when clicking on the dropdown
    const savedProjectsModal = document.getElementById('savedProjectsModal');
    savedProjectsModal.addEventListener('show.bs.modal', () => {
        uiController.renderSavedProjects();
    });
    
    // Check for project ID in URL parameters (for editing from saved-projects page)
    const urlParams = new URLSearchParams(window.location.search);
    const projectId = urlParams.get('project');
    
    if (projectId) {
        logger.info(`Loading project from URL parameter: ${projectId}`);
        uiController.loadProject(projectId);
    }
    
    logger.info('Application initialized successfully');
});