<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSTR-3B Report Generator</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4caf50;
            --warning-color: #ff9800;
            --danger-color: #f44336;
            --border-radius: 8px;
            --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f5f7fb;
            color: var(--dark-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .tagline {
            font-size: 1rem;
            color: #6c757d;
        }

        .card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            transition: var(--transition);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        h1, h2, h3 {
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            margin-bottom: 1.5rem;
            transition: var(--transition);
        }

        .upload-area:hover, .upload-area.dragover {
            border-color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.05);
        }

        .upload-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            text-align: center;
            text-decoration: none;
            color: white;
            background-color: var(--primary-color);
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
        }

        .btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn-outline {
            background-color: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }

        .btn-outline:hover {
            background-color: var(--primary-color);
            color: white;
        }

        input[type="file"] {
            display: none;
        }

        .file-list {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 1.5rem;
        }

        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem;
            border-bottom: 1px solid #eee;
        }

        .file-name {
            font-size: 0.9rem;
            flex-grow: 1;
            margin-right: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-status {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            font-weight: 500;
        }

        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }

        .status-processing {
            background-color: #cce5ff;
            color: #004085;
        }

        .status-success {
            background-color: #d4edda;
            color: #155724;
        }

        .status-error {
            background-color: #f8d7da;
            color: #721c24;
        }

        .remove-file {
            color: var(--danger-color);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .remove-file:hover {
            transform: scale(1.2);
        }

        .progress-container {
            width: 100%;
            background-color: #e9ecef;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            height: 10px;
        }

        .progress-bar {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 12px;
            width: 0%;
            transition: width 0.3s ease;
        }

        .results-section {
            display: none;
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .report-tabs {
            display: flex;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 1.5rem;
        }

        .tab {
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
        }

        .tab.active {
            border-bottom: 3px solid var(--primary-color);
            color: var(--primary-color);
            font-weight: 500;
        }

        .tab:hover:not(.active) {
            background-color: rgba(67, 97, 238, 0.05);
        }

        .report-content {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.5rem;
        }

        th, td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        tr:hover {
            background-color: rgba(67, 97, 238, 0.03);
        }

        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .summary-card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 1.5rem;
        }

        .summary-title {
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 0.5rem;
        }

        .summary-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        .gstr-table {
            border: 1px solid #dee2e6;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .gstr-table th {
            background-color: var(--primary-color);
            color: white;
        }

        .footer {
            text-align: center;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid #dee2e6;
            color: #6c757d;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform: translateX(150%);
            opacity: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
        }

        .notification.show {
            transform: translateX(0);
            opacity: 1;
        }

        .notification-success {
            border-left: 4px solid var(--success-color);
        }

        .notification-error {
            border-left: 4px solid var(--danger-color);
        }

        .notification-icon {
            margin-right: 0.75rem;
            font-size: 1.2rem;
        }

        .notification-success .notification-icon {
            color: var(--success-color);
        }

        .notification-error .notification-icon {
            color: var(--danger-color);
        }

        .notification-message {
            flex-grow: 1;
        }

        .notification-close {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            margin-left: 0.75rem;
            color: #6c757d;
        }

        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                gap: 1rem;
            }
            
            .summary-cards {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">GSTR-3B Report Generator</div>
            <div class="tagline">Upload your JSON files and generate comprehensive GSTR-3B reports</div>
        </header>
        
        <div class="card">
            <h2>Upload GSTR-3B JSON Files</h2>
            <p>Upload up to 20 JSON files to generate your GSTR-3B reports. Drag and drop files or click to browse.</p>
            
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📤</div>
                <h3>Drag & Drop Files Here</h3>
                <p>or</p>
                <label for="fileInput" class="btn">Browse Files</label>
                <input type="file" id="fileInput" accept=".json" multiple>
            </div>
            
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            
            <div class="file-list" id="fileList">
                <!-- File items will be added here dynamically -->
            </div>
            
            <div class="controls">
                <button id="uploadBtn" class="btn" disabled>Process Files</button>
                <button id="clearBtn" class="btn btn-outline">Clear All</button>
            </div>
        </div>
        
        <div class="results-section" id="resultsSection">
            <div class="card">
                <h2>GSTR-3B Report Results</h2>
                
                <div class="summary-cards" id="summaryCards">
                    <!-- Summary cards will be added here dynamically -->
                </div>
                
                <div class="report-tabs">
                    <div class="tab active" data-tab="outward-supplies">Outward Supplies</div>
                    <div class="tab" data-tab="inter-state-supplies">Inter-State Supplies</div>
                    <div class="tab" data-tab="itc-details">ITC Details</div>
                    <div class="tab" data-tab="tax-payment">Tax Payment</div>
                </div>
                
                <div class="report-content">
                    <div class="tab-content active" id="outward-supplies">
                        <table class="gstr-table">
                            <thead>
                                <tr>
                                    <th>GSTIN</th>
                                    <th>Period</th>
                                    <th>Nature of Supplies</th>
                                    <th>Taxable Value</th>
                                    <th>IGST</th>
                                    <th>CGST</th>
                                    <th>SGST</th>
                                    <th>Cess</th>
                                </tr>
                            </thead>
                            <tbody id="outwardSuppliesBody">
                                <!-- Outward supplies data will be added here dynamically -->
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="tab-content" id="inter-state-supplies">
                        <table class="gstr-table">
                            <thead>
                                <tr>
                                    <th>GSTIN</th>
                                    <th>Period</th>
                                    <th>Type</th>
                                    <th>Place of Supply</th>
                                    <th>Taxable Value</th>
                                    <th>Amount</th>
                                </tr>
                            </thead>
                            <tbody id="interStateSuppliesBody">
                                <!-- Inter-state supplies data will be added here dynamically -->
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="tab-content" id="itc-details">
                        <table class="gstr-table">
                            <thead>
                                <tr>
                                    <th>GSTIN</th>
                                    <th>Period</th>
                                    <th>ITC Type</th>
                                    <th>IGST</th>
                                    <th>CGST</th>
                                    <th>SGST</th>
                                    <th>Cess</th>
                                </tr>
                            </thead>
                            <tbody id="itcDetailsBody">
                                <!-- ITC details data will be added here dynamically -->
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="tab-content" id="tax-payment">
                        <table class="gstr-table">
                            <thead>
                                <tr>
                                    <th>GSTIN</th>
                                    <th>Period</th>
                                    <th>Tax Type</th>
                                    <th>Mode of Payment</th>
                                    <th>Amount</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody id="taxPaymentBody">
                                <!-- Tax payment data will be added here dynamically -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="controls">
                    <button id="downloadBtn" class="btn">Download Report</button>
                    <button id="backBtn" class="btn btn-outline">Back to Upload</button>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 GSTR-3B Report Generator | Simplifying GST Compliance</p>
        </div>
    </div>
    
    <div class="notification" id="notification">
        <span class="notification-icon">✓</span>
        <div class="notification-message">Operation completed successfully!</div>
        <button class="notification-close">×</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM elements
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');
            const fileList = document.getElementById('fileList');
            const uploadBtn = document.getElementById('uploadBtn');
            const clearBtn = document.getElementById('clearBtn');
            const progressBar = document.getElementById('progressBar');
            const progressContainer = document.getElementById('progressContainer');
            const resultsSection = document.getElementById('resultsSection');
            const downloadBtn = document.getElementById('downloadBtn');
            const backBtn = document.getElementById('backBtn');
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            const notification = document.getElementById('notification');
            const notificationClose = document.querySelector('.notification-close');
            const summaryCards = document.getElementById('summaryCards');
            
            // Table bodies
            const outwardSuppliesBody = document.getElementById('outwardSuppliesBody');
            const interStateSuppliesBody = document.getElementById('interStateSuppliesBody');
            const itcDetailsBody = document.getElementById('itcDetailsBody');
            const taxPaymentBody = document.getElementById('taxPaymentBody');
            
            // File collection and counter
            let files = [];
            const MAX_FILES = 20;
            
            // Event Listeners
            uploadArea.addEventListener('click', () => fileInput.click());
            fileInput.addEventListener('change', handleFileSelection);
            uploadArea.addEventListener('dragover', handleDragOver);
            uploadArea.addEventListener('dragleave', handleDragLeave);
            uploadArea.addEventListener('drop', handleDrop);
            uploadBtn.addEventListener('click', processFiles);
            clearBtn.addEventListener('click', clearFiles);
            downloadBtn.addEventListener('click', downloadReport);
            backBtn.addEventListener('click', goBackToUpload);
            notificationClose.addEventListener('click', hideNotification);
            
            // Tab functionality
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(tab.dataset.tab).classList.add('active');
                });
            });
            
            // Functions
            function handleFileSelection(e) {
                const selectedFiles = Array.from(e.target.files);
                addFiles(selectedFiles);
            }
            
            function handleDragOver(e) {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            }
            
            function handleDragLeave(e) {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
            }
            
            function handleDrop(e) {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                
                const droppedFiles = Array.from(e.dataTransfer.files);
                addFiles(droppedFiles);
            }
            
            function addFiles(newFiles) {
                const jsonFiles = newFiles.filter(file => file.type === 'application/json' || file.name.endsWith('.json'));
                
                if (jsonFiles.length === 0) {
                    showNotification('Please select valid JSON files.', 'error');
                    return;
                }
                
                if (files.length + jsonFiles.length > MAX_FILES) {
                    showNotification(`You can only upload up to ${MAX_FILES} files at once.`, 'error');
                    return;
                }
                
                // Add files to the collection
                jsonFiles.forEach(file => {
                    const fileExists = files.some(f => f.name === file.name && f.size === file.size);
                    
                    if (!fileExists) {
                        files.push(file);
                        addFileToUI(file);
                    }
                });
                
                updateUploadButtonState();
            }
            
            function addFileToUI(file) {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                fileItem.innerHTML = `
                    <div class="file-name">${file.name}</div>
                    <span class="file-status status-pending">Pending</span>
                    <button class="remove-file" data-name="${file.name}" data-size="${file.size}">×</button>
                `;
                
                fileList.appendChild(fileItem);
                
                // Add event listener to remove button
                const removeBtn = fileItem.querySelector('.remove-file');
                removeBtn.addEventListener('click', function() {
                    const fileName = this.dataset.name;
                    const fileSize = this.dataset.size;
                    
                    files = files.filter(f => !(f.name === fileName && f.size == fileSize));
                    fileItem.remove();
                    updateUploadButtonState();
                });
            }
            
            function updateUploadButtonState() {
                uploadBtn.disabled = files.length === 0;
            }
            
            function clearFiles() {
                files = [];
                fileList.innerHTML = '';
                updateUploadButtonState();
            }
            
            function processFiles() {
                if (files.length === 0) {
                    showNotification('Please select at least one file to process.', 'error');
                    return;
                }
                
                // Show progress
                progressContainer.style.display = 'block';
                
                // Process each file
                let processedCount = 0;
                const reports = [];
                
                files.forEach((file, index) => {
                    const fileItem = fileList.children[index];
                    const statusElem = fileItem.querySelector('.file-status');
                    
                    statusElem.className = 'file-status status-processing';
                    statusElem.textContent = 'Processing...';
                    
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        try {
                            const jsonData = JSON.parse(e.target.result);
                            reports.push(jsonData);
                            
                            statusElem.className = 'file-status status-success';
                            statusElem.textContent = 'Success';
                        } catch (error) {
                            statusElem.className = 'file-status status-error';
                            statusElem.textContent = 'Error';
                            console.error(`Error processing ${file.name}:`, error);
                        }
                        
                        processedCount++;
                        const progress = (processedCount / files.length) * 100;
                        progressBar.style.width = `${progress}%`;
                        
                        if (processedCount === files.length) {
                            finishProcessing(reports);
                        }
                    };
                    
                    reader.onerror = function() {
                        statusElem.className = 'file-status status-error';
                        statusElem.textContent = 'Error';
                        
                        processedCount++;
                        const progress = (processedCount / files.length) * 100;
                        progressBar.style.width = `${progress}%`;
                        
                        if (processedCount === files.length) {
                            finishProcessing(reports);
                        }
                    };
                    
                    // Add a small delay between processing files to show progress
                    setTimeout(() => {
                        reader.readAsText(file);
                    }, index * 100);
                });
            }
            
            function finishProcessing(reports) {
                if (reports.length === 0) {
                    showNotification('No valid reports found in the uploaded files.', 'error');
                    return;
                }
                
                try {
                    generateReport(reports);
                    showResultsSection();
                    showNotification('Reports generated successfully!', 'success');
                } catch (error) {
                    console.error('Error generating reports:', error);
                    showNotification('Error generating reports. Please check the console for details.', 'error');
                }
            }
            
            function generateReport(reports) {
                // Clear previous data
                outwardSuppliesBody.innerHTML = '';
                interStateSuppliesBody.innerHTML = '';
                itcDetailsBody.innerHTML = '';
                taxPaymentBody.innerHTML = '';
                summaryCards.innerHTML = '';
                
                // Aggregate data
                let totalTaxableValue = 0;
                let totalIGST = 0;
                let totalCGST = 0;
                let totalSGST = 0;
                let totalCess = 0;
                let totalITC = 0;
                
                // Process each report
                reports.forEach(report => {
                    // Outward Supplies
                    if (report.sup_details && report.sup_details.osup_det) {
                        const osup = report.sup_details.osup_det;
                        totalTaxableValue += parseFloat(osup.txval || 0);
                        totalIGST += parseFloat(osup.iamt || 0);
                        totalCGST += parseFloat(osup.camt || 0);
                        totalSGST += parseFloat(osup.samt || 0);
                        totalCess += parseFloat(osup.csamt || 0);
                        
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${report.gstin || 'N/A'}</td>
                            <td>${report.ret_period || 'N/A'}</td>
                            <td>Taxable Outward Supplies</td>
                            <td>₹${formatNumber(osup.txval || 0)}</td>
                            <td>₹${formatNumber(osup.iamt || 0)}</td>
                            <td>₹${formatNumber(osup.camt || 0)}</td>
                            <td>₹${formatNumber(osup.samt || 0)}</td>
                            <td>₹${formatNumber(osup.csamt || 0)}</td>
                        `;
                        outwardSuppliesBody.appendChild(row);
                    }
                    
                    // Zero-rated supplies
                    if (report.sup_details && report.sup_details.osup_zero) {
                        const osupZero = report.sup_details.osup_zero;
                        
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${report.gstin || 'N/A'}</td>
                            <td>${report.ret_period || 'N/A'}</td>
                            <td>Zero-rated Supplies</td>
                            <td>₹${formatNumber(osupZero.txval || 0)}</td>
                            <td>₹${formatNumber(osupZero.iamt || 0)}</td>
                            <td>₹${formatNumber(osupZero.camt || 0)}</td>
                            <td>₹${formatNumber(osupZero.samt || 0)}</td>
                            <td>₹${formatNumber(osupZero.csamt || 0)}</td>
                        `;
                        outwardSuppliesBody.appendChild(row);
                    }
                    
                    // Nil-rated, exempted supplies
                    if (report.sup_details && report.sup_details.osup_nil_exmp) {
                        const osupNil = report.sup_details.osup_nil_exmp;
                        
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${report.gstin || 'N/A'}</td>
                            <td>${report.ret_period || 'N/A'}</td>
                            <td>Nil-rated, Exempted Supplies</td>
                            <td>₹${formatNumber(osupNil.txval || 0)}</td>
                            <td>₹${formatNumber(osupNil.iamt || 0)}</td>
                            <td>₹${formatNumber(osupNil.camt || 0)}</td>
                            <td>₹${formatNumber(osupNil.samt || 0)}</td>
                            <td>₹${formatNumber(osupNil.csamt || 0)}</td>
                        `;
                        outwardSuppliesBody.appendChild(row);
                    }
                    
                    // Reverse charge supplies
                    if (report.sup_details && report.sup_details.isup_rev) {
                        const isupRev = report.sup_details.isup_rev;
                        
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${report.gstin || 'N/A'}</td>
                            <td>${report.ret_period || 'N/A'}</td>
                            <td>Reverse Charge Supplies</td>
                            <td>₹${formatNumber(isupRev.txval || 0)}</td>
                            <td>₹${formatNumber(isupRev.iamt || 0)}</td>
                            <td>₹${formatNumber(isupRev.camt || 0)}</td>
                            <td>₹${formatNumber(isupRev.samt || 0)}</td>
                            <td>₹${formatNumber(isupRev.csamt || 0)}</td>  Complete this code