Sindbad~EG File Manager

<?php
require_once '../../config/config.php';
checkLogin();

$pageTitle = "Reports - " . APP_NAME;
$db = Database::getInstance()->getConnection();

include '../../includes/header.php';
?>

<?php include '../../includes/sidebar.php'; ?>

<!-- Main Content -->
<main class="flex-1 md:ml-64 mt-16">
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-800">
            <i class="fas fa-file-text mr-2 text-blue-500"></i>Reports & Analytics
        </h1>
        <p class="text-gray-600 mt-2">Generate comprehensive reports with analytics</p>
    </div>
    
    <!-- Report Categories -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <!-- Members Report -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
            <div class="flex items-center mb-4">
                <div class="bg-blue-100 rounded-full p-4 mr-4">
                    <i class="fas fa-users text-3xl text-blue-600"></i>
                </div>
                <div>
                    <h3 class="font-bold text-lg text-gray-800">Members Report</h3>
                    <p class="text-sm text-gray-600">Detailed member statistics</p>
                </div>
            </div>
            <button onclick="generateReport('members')" class="w-full bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
                <i class="fas fa-chart-bar mr-2"></i>Generate Report
            </button>
        </div>
        
        <!-- Baptism Report -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
            <div class="flex items-center mb-4">
                <div class="bg-green-100 rounded-full p-4 mr-4">
                    <i class="fas fa-water text-3xl text-green-600"></i>
                </div>
                <div>
                    <h3 class="font-bold text-lg text-gray-800">Baptism Report</h3>
                    <p class="text-sm text-gray-600">Baptism records & stats</p>
                </div>
            </div>
            <button onclick="generateReport('baptism')" class="w-full bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition">
                <i class="fas fa-chart-bar mr-2"></i>Generate Report
            </button>
        </div>
        
        <!-- Demographics Report -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
            <div class="flex items-center mb-4">
                <div class="bg-yellow-100 rounded-full p-4 mr-4">
                    <i class="fas fa-chart-pie text-3xl text-yellow-600"></i>
                </div>
                <div>
                    <h3 class="font-bold text-lg text-gray-800">Demographics</h3>
                    <p class="text-sm text-gray-600">Age, gender & location</p>
                </div>
            </div>
            <button onclick="generateReport('demographics')" class="w-full bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition">
                <i class="fas fa-chart-bar mr-2"></i>Generate Report
            </button>
        </div>
        
        <!-- Location Report -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
            <div class="flex items-center mb-4">
                <div class="bg-purple-100 rounded-full p-4 mr-4">
                    <i class="fas fa-map-marker-alt text-3xl text-purple-600"></i>
                </div>
                <div>
                    <h3 class="font-bold text-lg text-gray-800">Location Report</h3>
                    <p class="text-sm text-gray-600">Areas, Districts, Assemblies</p>
                </div>
            </div>
            <button onclick="generateReport('location')" class="w-full bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition">
                <i class="fas fa-chart-bar mr-2"></i>Generate Report
            </button>
        </div>
        
        <!-- Audit Report -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
            <div class="flex items-center mb-4">
                <div class="bg-red-100 rounded-full p-4 mr-4">
                    <i class="fas fa-shield-alt text-3xl text-red-600"></i>
                </div>
                <div>
                    <h3 class="font-bold text-lg text-gray-800">Audit Trail</h3>
                    <p class="text-sm text-gray-600">System activity logs</p>
                </div>
            </div>
            <button onclick="generateReport('audit')" class="w-full bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition">
                <i class="fas fa-chart-bar mr-2"></i>Generate Report
            </button>
        </div>
        
        <!-- Custom Report -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
            <div class="flex items-center mb-4">
                <div class="bg-gray-100 rounded-full p-4 mr-4">
                    <i class="fas fa-cog text-3xl text-gray-600"></i>
                </div>
                <div>
                    <h3 class="font-bold text-lg text-gray-800">Custom Report</h3>
                    <p class="text-sm text-gray-600">Build your own report</p>
                </div>
            </div>
            <button onclick="generateReport('custom')" class="w-full bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition">
                <i class="fas fa-chart-bar mr-2"></i>Generate Report
            </button>
        </div>
    </div>
    
    <!-- Report Preview Area -->
    <div id="reportPreview" class="bg-white rounded-xl shadow-lg p-6 hidden">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-800">
                <i class="fas fa-chart-line mr-2 text-blue-500"></i><span id="reportTitle">Report Preview</span>
            </h2>
            <div class="flex space-x-2">
                <button onclick="exportReport('pdf')" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition">
                    <i class="fas fa-file-pdf mr-2"></i>PDF
                </button>
                <button onclick="exportReport('excel')" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition">
                    <i class="fas fa-file-excel mr-2"></i>Excel
                </button>
                <button onclick="exportReport('csv')" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
                    <i class="fas fa-file-csv mr-2"></i>CSV
                </button>
            </div>
        </div>
        
        <div id="reportContent" class="mt-6">
            <!-- Report content will be loaded here -->
        </div>
    </div>
</div>

<script>
    function generateReport(type) {
        showLoader();
        
        fetch('<?php echo BASE_URL; ?>api/generate-report.php?type=' + type)
            .then(response => response.json())
            .then(data => {
                hideLoader();
                
                if (data.success) {
                    document.getElementById('reportPreview').classList.remove('hidden');
                    document.getElementById('reportTitle').textContent = data.title;
                    document.getElementById('reportContent').innerHTML = data.html;
                    
                    // Scroll to report
                    document.getElementById('reportPreview').scrollIntoView({ behavior: 'smooth' });
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(error => {
                hideLoader();
                showToast('Error generating report', 'error');
            });
    }
    
    function exportReport(format) {
        showToast('Exporting report to ' + format.toUpperCase() + '...', 'info');
        
        if (format === 'pdf') {
            window.print();
        } else if (format === 'excel' || format === 'csv') {
            // Get table data and convert to CSV
            const tables = document.querySelectorAll('#reportContent table');
            if (tables.length > 0) {
                let csvContent = '';
                tables.forEach(table => {
                    const rows = table.querySelectorAll('tr');
                    rows.forEach(row => {
                        const cols = row.querySelectorAll('th, td');
                        const rowData = Array.from(cols).map(col => '"' + col.textContent.trim().replace(/"/g, '""') + '"');
                        csvContent += rowData.join(',') + '\n';
                    });
                });
                
                // Download CSV
                const blob = new Blob([csvContent], { type: 'text/csv' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'report.' + (format === 'excel' ? 'csv' : format);
                a.click();
                window.URL.revokeObjectURL(url);
            }
        }
    }
    
    function showLoader() {
        // Create or show loader
        let loader = document.getElementById('reportLoader');
        if (!loader) {
            loader = document.createElement('div');
            loader.id = 'reportLoader';
            loader.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            loader.innerHTML = '<div class="bg-white rounded-lg p-6 flex items-center space-x-3"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div><span>Generating report...</span></div>';
            document.body.appendChild(loader);
        } else {
            loader.classList.remove('hidden');
        }
    }
    
    function hideLoader() {
        const loader = document.getElementById('reportLoader');
        if (loader) {
            loader.classList.add('hidden');
        }
    }
    
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${
            type === 'error' ? 'bg-red-500' : 
            type === 'success' ? 'bg-green-500' : 
            'bg-blue-500'
        }`;
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
</script>

</main>

<?php include '../../includes/footer.php'; ?>