<div class="page-title">
    <h2><i class="bi bi-bar-chart"></i> Reports & Analytics</h2>
</div>

<!-- Overview Statistics -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stat-card primary">
            <h6 class="text-muted">Total Campaigns</h6>
            <h3><?= number_format($total_campaigns) ?></h3>
            <small><?= number_format($active_campaigns) ?> Active</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card success">
            <h6 class="text-muted">Total Users</h6>
            <h3><?= number_format($total_users) ?></h3>
            <small>Regular Users</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card warning">
            <h6 class="text-muted">Master Data</h6>
            <h3><?= number_format($total_master_data) ?></h3>
            <small>Total Contacts</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card info">
            <h6 class="text-muted">Performance</h6>
            <h3><?= count($campaigns) ?></h3>
            <small>Campaigns Listed</small>
        </div>
    </div>
</div>

<!-- Performance Chart -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-graph-up"></i> 30-Day Performance Trend</h5>
                <canvas id="performanceChart" style="height: 250px;"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Top Performing Campaigns -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-trophy"></i> Top 5 Performing Campaigns</h5>
                <?php if (!empty($top_campaigns)): ?>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Campaign</th>
                                    <th>Assigned</th>
                                    <th>Sent</th>
                                    <th>Success Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($top_campaigns as $campaign): ?>
                                    <tr>
                                        <td><strong><?= $campaign->name ?></strong></td>
                                        <td><?= number_format($campaign->total_assigned) ?></td>
                                        <td><?= number_format($campaign->total_sent) ?></td>
                                        <td>
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar bg-success" style="width: <?= $campaign->success_rate ?>%">
                                                    <?= $campaign->success_rate ?>%
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php else: ?>
                    <p class="text-muted text-center py-3">No campaign data available yet.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-3"><i class="bi bi-info-circle"></i> Report Features</h5>
                <div class="list-group">
                    <div class="list-group-item">
                        <i class="bi bi-check-circle text-success"></i> Campaign Performance Analysis
                    </div>
                    <div class="list-group-item">
                        <i class="bi bi-check-circle text-success"></i> User Activity Tracking
                    </div>
                    <div class="list-group-item">
                        <i class="bi bi-check-circle text-success"></i> Success Rate Monitoring
                    </div>
                    <div class="list-group-item">
                        <i class="bi bi-check-circle text-success"></i> Real-time Statistics
                    </div>
                    <div class="list-group-item">
                        <i class="bi bi-clock text-warning"></i> PDF Export (Coming Soon)
                    </div>
                    <div class="list-group-item">
                        <i class="bi bi-clock text-warning"></i> Excel Export (Coming Soon)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- All Campaigns Report -->
<div class="card">
    <div class="card-body">
        <h5 class="mb-3"><i class="bi bi-table"></i> All Campaigns Report</h5>
        <div class="table-responsive">
            <table class="table table-hover" id="campaignsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Campaign Name</th>
                        <th>Type</th>
                        <th>Fail %</th>
                        <th>Assigned</th>
                        <th>Sent</th>
                        <th>Failed</th>
                        <th>Remaining</th>
                        <th>Success Rate</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (!empty($campaigns)): ?>
                        <?php foreach ($campaigns as $campaign): ?>
                            <?php
                            $success_rate = $campaign->total_assigned > 0 
                                ? round(($campaign->total_sent / $campaign->total_assigned) * 100, 2)
                                : 0;
                            ?>
                            <tr>
                                <td><?= $campaign->id ?></td>
                                <td><strong><?= $campaign->name ?></strong></td>
                                <td><span class="badge bg-info"><?= $campaign->type ?></span></td>
                                <td><?= $campaign->fail_percentage ?>%</td>
                                <td><?= number_format($campaign->total_assigned) ?></td>
                                <td><span class="text-success"><?= number_format($campaign->total_sent) ?></span></td>
                                <td><span class="text-danger"><?= number_format($campaign->total_failed) ?></span></td>
                                <td><?= number_format($campaign->total_remaining) ?></td>
                                <td><?= $success_rate ?>%</td>
                                <td>
                                    <?php
                                    $badge_class = [
                                        'active' => 'bg-success',
                                        'paused' => 'bg-warning',
                                        'stopped' => 'bg-danger',
                                        'completed' => 'bg-secondary'
                                    ];
                                    ?>
                                    <span class="badge <?= $badge_class[$campaign->status] ?>"><?= ucfirst($campaign->status) ?></span>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="10" class="text-center">No campaigns available</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $('#campaignsTable').DataTable({
        pageLength: 10,
        order: [[0, 'desc']]
    });
    
    // Performance Chart
    const ctx = document.getElementById('performanceChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: <?= json_encode(array_column($performance_data, 'date')) ?>,
            datasets: [{
                label: 'Sent',
                data: <?= json_encode(array_column($performance_data, 'sent')) ?>,
                borderColor: 'rgb(40, 167, 69)',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4
            }, {
                label: 'Failed',
                data: <?= json_encode(array_column($performance_data, 'failed')) ?>,
                borderColor: 'rgb(220, 53, 69)',
                backgroundColor: 'rgba(220, 53, 69, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
