<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GST Report Generator</title>
    <style>
        :root {
            --primary: #4a6fa5;
            --primary-light: #6989b9;
            --primary-dark: #345481;
            --secondary: #6c757d;
            --success: #28a745;
            --danger: #dc3545;
            --warning: #ffc107;
            --info: #17a2b8;
            --light: #f8f9fa;
            --dark: #343a40;
            --white: #ffffff;
            --shadow: rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
        }

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

        header {
            margin-bottom: 2rem;
            text-align: center;
        }

        header h1 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        header p {
            color: var(--secondary);
            font-size: 1.1rem;
        }

        .card {
            background-color: var(--white);
            border-radius: 8px;
            box-shadow: 0 4px 15px var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-header {
            background-color: var(--primary);
            color: var(--white);
            padding: 1.5rem;
            font-size: 1.2rem;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            padding: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark);
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
        }

        .btn {
            display: inline-block;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 4px;
            transition: all 0.15s ease-in-out;
            cursor: pointer;
        }

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

        .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }

        .btn-outline-secondary {
            color: var(--secondary);
            background-color: transparent;
            border-color: var(--secondary);
        }

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

        .btn-block {
            display: block;
            width: 100%;
        }

        .file-upload {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f8f9fa;
            border: 2px dashed #ced4da;
            border-radius: 6px;
            padding: 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .file-upload:hover {
            border-color: var(--primary);
            background-color: rgba(74, 111, 165, 0.05);
        }

        .file-upload input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

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

        .file-upload p {
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .file-upload span {
            color: var(--secondary);
            font-size: 0.9rem;
        }

        .files-list {
            margin-top: 1.5rem;
        }

        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f1f3f5;
            border-radius: 4px;
            padding: 0.75rem 1rem;
            margin-bottom: 0.5rem;
        }

        .file-item:last-child {
            margin-bottom: 0;
        }

        .file-info {
            display: flex;
            align-items: center;
        }

        .file-icon {
            margin-right: 0.75rem;
            color: var(--primary);
            font-size: 1.25rem;
        }

        .file-name {
            font-weight: 500;
        }

        .file-size {
            margin-left: 0.75rem;
            color: var(--secondary);
            font-size: 0.85rem;
        }

        .file-remove {
            color: var(--danger);
            cursor: pointer;
            font-size: 1.25rem;
            transition: all 0.2s ease;
        }

        .file-remove:hover {
            color: #b52c38;
        }

        .alert {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .progress {
            height: 0.5rem;
            background-color: #e9ecef;
            border-radius: 0.25rem;
            margin-top: 0.5rem;
            overflow: hidden;
        }

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

        .export-options {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .export-option {
            flex: 1;
            min-width: 200px;
            background-color: var(--white);
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .export-option:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

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

        .export-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .export-desc {
            color: var(--secondary);
            font-size: 0.9rem;
        }

        footer {
            text-align: center;
            padding: 2rem 0;
            color: var(--secondary);
            font-size: 0.9rem;
        }

        /* Preview Table */
        .preview-table {
            width: 100%;
            overflow-x: auto;
            margin-top: 1rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: var(--white);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

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

        th {
            background-color: #f1f3f5;
            font-weight: 600;
            color: var(--primary-dark);
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }

            header h1 {
                font-size: 2rem;
            }

            .card-header {
                padding: 1rem;
            }

            .card-body {
                padding: 1.5rem;
            }

            .btn {
                padding: 0.6rem 1.2rem;
            }

            .export-options {
                flex-direction: column;
            }
        }

        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-light);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }

        /* Excel styling */
        .excel-preview {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 1rem;
            margin-top: 1rem;
            background-color: var(--white);
        }

        .excel-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            border: 1px solid #ccc;
        }

        .excel-header {
            background-color: #f0f0f0;
            padding: 0.5rem;
            border: 1px solid #ccc;
            font-weight: bold;
            text-align: center;
        }

        .excel-cell {
            padding: 0.5rem;
            border: 1px solid #ccc;
        }

        /* Settings and options */
        .settings-section {
            margin-top: 2rem;
        }

        .settings-section h3 {
            margin-bottom: 1rem;
            color: var(--primary);
        }

        .form-check {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .form-check-input {
            margin-right: 0.5rem;
        }

        .form-check-label {
            font-weight: normal;
        }

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

        .tab {
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }

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

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Tooltip */
        .tooltip {
            position: relative;
            display: inline-block;
            margin-left: 0.5rem;
        }

        .tooltip-icon {
            color: var(--secondary);
            cursor: pointer;
        }

        .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            border-radius: 6px;
            padding: 0.5rem;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.85rem;
        }

        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="fade-in">
            <h1>GST Report Generator</h1>
            <p>Create beautifully formatted Excel reports from your GST data files</p>
        </header>

        <div class="card fade-in">
            <div class="card-header">
                <span>File Upload</span>
                <span id="upload-counter">0 files uploaded</span>
            </div>
            <div class="card-body">
                <div class="file-upload" id="dropzone">
                    <div class="upload-icon">📁</div>
                    <p>Drag & Drop your GST JSON files here</p>
                    <span>or click to browse files</span>
                    <input type="file" id="file-input" accept=".json" multiple>
                </div>
                <div class="progress" style="display: none;" id="upload-progress-container">
                    <div class="progress-bar" id="upload-progress-bar" style="width: 0%"></div>
                </div>
                <div class="files-list" id="files-list"></div>
            </div>
        </div>

        <div class="card fade-in" id="preview-card" style="display: none;">
            <div class="card-header">
                <span>Excel Preview</span>
                <button class="btn btn-outline-secondary" id="refresh-preview">Refresh Preview</button>
            </div>
            <div class="card-body">
                <div class="tabs">
                    <div class="tab active" data-tab="preview">Preview</div>
                    <div class="tab" data-tab="settings">Format Settings</div>
                </div>

                <div class="tab-content active" id="preview-tab">
                    <div class="excel-preview">
                        <div class="excel-grid" id="excel-preview-grid">
                            <!-- Excel preview will be generated here -->
                        </div>
                    </div>

                    <div class="alert alert-info" style="margin-top: 1rem;">
                        <strong>Note:</strong> This is a preview of how your Excel file will look. The actual export will include all data and formatting options.
                    </div>
                </div>

                <div class="tab-content" id="settings-tab">
                    <div class="settings-section">
                        <h3>Excel Formatting Options</h3>
                        
                        <div class="form-group">
                            <label class="form-label">Header Style</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="header-bold" checked>
                                <label class="form-check-label" for="header-bold">Bold Headers</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="header-background" checked>
                                <label class="form-check-label" for="header-background">Color Header Background</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="header-freeze" checked>
                                <label class="form-check-label" for="header-freeze">Freeze Header Row</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Data Formatting</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="autofilter" checked>
                                <label class="form-check-label" for="autofilter">Enable AutoFilter</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="format-numbers" checked>
                                <label class="form-check-label" for="format-numbers">Format Numbers (Currency)</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="auto-width" checked>
                                <label class="form-check-label" for="auto-width">Auto-adjust Column Width</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Conditional Formatting</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="highlight-zeros">
                                <label class="form-check-label" for="highlight-zeros">Highlight Zero Values</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="highlight-negatives" checked>
                                <label class="form-check-label" for="highlight-negatives">Highlight Negative Values</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Additional Options</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="add-summary" checked>
                                <label class="form-check-label" for="add-summary">Add Summary Worksheet</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="add-charts">
                                <label class="form-check-label" for="add-charts">Include Basic Charts</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card fade-in" id="export-card" style="display: none;">
            <div class="card-header">
                <span>Export Options</span>
            </div>
            <div class="card-body">
                <div class="export-options">
                    <div class="export-option" id="export-excel">
                        <div class="export-icon">📊</div>
                        <div class="export-title">Excel (XLSX)</div>
                        <div class="export-desc">Full-featured Excel file with formatting and multiple sheets</div>
                    </div>

                    <div class="export-option" id="export-csv">
                        <div class="export-icon">📝</div>
                        <div class="export-title">CSV</div>
                        <div class="export-desc">Simple data format compatible with all spreadsheet software</div>
                    </div>

                    <div class="export-option" id="export-pdf">
                        <div class="export-icon">📄</div>
                        <div class="export-title">PDF</div>
                        <div class="export-desc">Professional report format for sharing and printing</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>GST Report Generator | Created with ♥ for easier GST reporting</p>
    </footer>

    <script>
        // DOM Elements
        const fileInput = document.getElementById('file-input');
        const dropzone = document.getElementById('dropzone');
        const filesList = document.getElementById('files-list');
        const uploadCounter = document.getElementById('upload-counter');
        const uploadProgressContainer = document.getElementById('upload-progress-container');
        const uploadProgressBar = document.getElementById('upload-progress-bar');
        const previewCard = document.getElementById('preview-card');
        const exportCard = document.getElementById('export-card');
        const refreshPreviewBtn = document.getElementById('refresh-preview');
        const excelPreviewGrid = document.getElementById('excel-preview-grid');
        const exportExcelBtn = document.getElementById('export-excel');
        const exportCsvBtn = document.getElementById('export-csv');
        const exportPdfBtn = document.getElementById('export-pdf');
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');

        // State
        let uploadedFiles = [];
        let filesData = [];
        
        // Event Listeners
        fileInput.addEventListener('change', handleFileSelect);
        dropzone.addEventListener('dragover', handleDragOver);
        dropzone.addEventListener('dragleave', handleDragLeave);
        dropzone.addEventListener('drop', handleDrop);
        refreshPreviewBtn.addEventListener('click', generateExcelPreview);
        exportExcelBtn.addEventListener('click', exportExcel);
        exportCsvBtn.addEventListener('click', exportCsv);
        exportPdfBtn.addEventListener('click', exportPdf);
        
        // Tab switching
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                tab.classList.add('active');
                document.getElementById(`${tab.dataset.tab}-tab`).classList.add('active');
            });
        });

        // Format settings change listeners
        document.querySelectorAll('.form-check-input').forEach(input => {
            input.addEventListener('change', generateExcelPreview);
        });

        // File Selection Functions
        function handleFileSelect(event) {
            const files = event.target.files;
            processFiles(files);
        }

        function handleDragOver(event) {
            event.preventDefault();
            event.stopPropagation();
            dropzone.style.borderColor = '#4a6fa5';
            dropzone.style.backgroundColor = 'rgba(74, 111, 165, 0.05)';
        }

        function handleDragLeave(event) {
            event.preventDefault();
            event.stopPropagation();
            dropzone.style.borderColor = '#ced4da';
            dropzone.style.backgroundColor = '#f8f9fa';
        }

        function handleDrop(event) {
            event.preventDefault();
            event.stopPropagation();
            dropzone.style.borderColor = '#ced4da';
            dropzone.style.backgroundColor = '#f8f9fa';
            
            const files = event.dataTransfer.files;
            processFiles(files);
        }

        function processFiles(files) {
            if (files.length === 0) return;
            
            uploadProgressContainer.style.display = 'block';
            let processedCount = 0;
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                if (file.type !== 'application/json' && !file.name.endsWith('.json')) {
                    showAlert('Only JSON files are supported', 'danger');
                    continue;
                }
                
                if (isFileAlreadyUploaded(file.name)) {
                    showAlert(`File '${file.name}' is already uploaded`, 'danger');
                    continue;
                }
                
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    try {
                        const fileData = JSON.parse(e.target.result);
                        addFile(file, fileData);
                        processedCount++;
                        
                        // Update progress
                        const progress = Math.min(100, Math.round((processedCount / files.length) * 100));
                        uploadProgressBar.style.width = `${progress}%`;
                        
                        if (processedCount === files.length) {
                            setTimeout(() => {
                                uploadProgressContainer.style.display = 'none';
                                uploadProgressBar.style.width = '0%';
                            }, 1000);
                        }
                    } catch (error) {
                        showAlert(`Error parsing file '${file.name}': ${error.message}`, 'danger');
                    }
                };
                
                reader.readAsText(file);
            }
        }

        function isFileAlreadyUploaded(fileName) {
            return uploadedFiles.some(file => file.name === fileName);
        }

        function addFile(file, fileData) {
            uploadedFiles.push(file);
            filesData.push(fileData);
            
            // Create file list item element
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            
            const fileInfo = document.createElement('div');
            fileInfo.className = 'file-info';
            
            const fileIcon = document.createElement('div');
            fileIcon.className = 'file-icon';
            fileIcon.innerHTML = '📄';
            
            const fileName = document.createElement('div');
            fileName.className = 'file-name';
            fileName.textContent = file.name;
            
            const fileSize = document.createElement('div');
            fileSize.className = 'file-size';
            fileSize.textContent = formatFileSize(file.size);
            
            const fileRemove = document.createElement('div');
            fileRemove.className = 'file-remove';
            fileRemove.innerHTML = '×';
            fileRemove.onclick = function() {
                removeFile(file.name, fileItem);
            };
            
            fileInfo.appendChild(fileIcon);
            fileInfo.appendChild(fileName);
            fileInfo.appendChild(fileSize);
            
            fileItem.appendChild(fileInfo);
            fileItem.appendChild(fileRemove);
            
            filesList.appendChild(fileItem);
            
            // Update counter
            updateFileCounter();
            
            // Show preview and export cards
            previewCard.style.display = 'block';
            exportCard.style.display = 'block';
            
            // Generate excel preview
            generateExcelPreview();
        }

        function removeFile(fileName, fileItem) {
            const index = uploadedFiles.findIndex(file => file.name === fileName);
            
            if (index > -1) {
                uploadedFiles.splice(index, 1);
                filesData.splice(index, 1);
                filesList.removeChild(fileItem);
                updateFileCounter();
                
                if (uploadedFiles.length === 0) {
                    previewCard.style.display = 'none';
                    exportCard.style.display = 'none';
                } else {
                    generateExcelPreview();
                }
            }
        }

        function updateFileCounter() {
            uploadCounter.textContent = `${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} uploaded`;
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        function showAlert(message, type) {
            const alertElement = document.createElement('div');
            alertElement.className = `alert alert-${type}`;
            alertElement.textContent = message;
            
            // Insert after the upload progress container
            uploadProgressContainer.parentNode.insertBefore(alertElement, uploadProgressContainer.nextSibling);
            
            // Auto-remove after 5 seconds
            setTimeout(() => {
                alertElement.remove();
            }, 5000);
        }

        // Excel Preview Generation
        function generateExcelPreview() {
            excelPreviewGrid.innerHTML = '';
            
            if (filesData.length === 0) return;
            
            // Sample headers for preview (showing just a subset)
            const previewHeaders = [
                'GSTIN', 'Return Period', 'Taxable Value', 'IGST', 'CGST', 'SGST', 'Cess'
            ];
            
            // Add headers
            previewHeaders.forEach(header => {
                const headerCell = document.createElement('div');
                headerCell.className = 'excel-header';
                headerCell.textContent = header;
                excelPreviewGrid.appendChild(headerCell);
            });
            
            // Add sample data
            filesData.forEach(fileData => {
                const gstin = fileData.gstin || 'N/A';
                const retPeriod = fileData.ret_period || 'N/A';
                const taxableValue = fileData.sup_details.osup_det.txval || 0;
                const igst = fileData.sup_details.osup_det.iamt || 0;
                const cgst = fileData.sup_details.osup_det.camt || 0;
                const sgst = fileData.sup_details.osup_det.samt || 0;
                const cess = fileData.sup_details.osup_det.csamt || 0;
                
                const dataCells = [gstin, retPeriod, taxableValue, igst, cgst, sgst, cess];
                
                dataCells.forEach(cellData => {
                    const cell = document.createElement('div');
                    cell.className = 'excel-cell';
                    cell.textContent = cellData;
                    excelPreviewGrid.appendChild(cell);
                });
            });
        }

        // Export Functions
        function exportExcel() {
            if (filesData.length === 0) {
                showAlert('No files to export', 'danger');
                return;
            }
            
            const formData = new FormData();
            formData.append('filesData', JSON.stringify(filesData));
            
            fetch('generate_excel.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'GST_Report.xlsx';
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                showAlert('Error exporting Excel file', 'danger');
                console.error(error);
            });
        }

        function exportCsv() {
            if (filesData.length === 0) {
                showAlert('No files to export', 'danger');
                return;
            }
            
            const csvData = [
                'GSTIN,Return Period,Taxable Value,IGST,CGST,SGST,Cess'
            ];
            
            filesData.forEach(fileData => {
                const gstin = fileData.gstin || 'N/A';
                const retPeriod = fileData.ret_period || 'N/A';
                const taxableValue = fileData.sup_details.osup_det.txval || 0;
                const igst = fileData.sup_details.osup_det.iamt || 0;
                const cgst = fileData.sup_details.osup_det.camt || 0;
                const sgst = fileData.sup_details.osup_det.samt || 0;
                const cess = fileData.sup_details.osup_det.csamt || 0;
                
                csvData.push(`${gstin},${retPeriod},${taxableValue},${igst},${cgst},${sgst},${cess}`);
            });
            
            const csvBlob = new Blob([csvData.join('\n')], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(csvBlob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'GST_Report.csv';
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
        }

        function exportPdf() {
            showAlert('PDF export is not implemented yet', 'warning');
        }
    </script>
</body>
</html> Imrpove More above page